The PosDisplayComponent displays POS entity information in a card-based layout with support for different visibility variants ('consumer', 'partner', 'full').

Features

Variant Support: Choose from 'consumer', 'partner', or 'full' display modes
Conditional Field Visibility: Fields are dynamically shown/hidden based on variant
Edit Mode: Toggle between view and edit modes
Responsive Grid: Displays up to 3 columns with gap-4 spacing
More Actions: Optional button for additional actions

Usage

Basic Usage

import { PosDisplayComponent, IPosEntity } from '@/app/components';

@Component({
  selector: 'app-my-component',
  template: `
    <app-pos-display
      variant="consumer"
      [pos]="posData"
      [editMode]="isEditing"
      (onMoreAction)="handleMoreAction()"
      (editModeChange)="editModeChange($event)"
    />
  `,
  standalone: true,
  imports: [PosDisplayComponent],
})
export class MyComponent {
  posData = signal<IPosEntity>({
    id: '123',
    name: 'Terminal 1',
    pos_type: 'PSP',
    serial_number: 'SN123',
    model: 'Model X',
    status: 'active',
    complex: { id: 'c1', name: 'Complex 1' },
    device: { id: 'd1', name: 'Device A' },
    provider: { id: 'p1', name: 'Provider A' },
  });

  isEditing = signal(false);

  handleMoreAction(): void {
    console.log('More action clicked');
  }

  editModeChange(editing: boolean): void {
    this.isEditing.set(editing);
  }
}

Variants

Consumer Variant

Displays: name, pos_type, serial_number, device, model, provider (6 fields)

Partner Variant

Displays: name, pos_type, serial_number (3 fields)

Full Variant

Displays: name, pos_type, serial_number, device, model, provider (6 fields - same as consumer)

Inputs

Input	Type	Default	Description
`variant`	'consumer' \| 'partner' \| 'full'	'full'	Display variant mode
`pos`	Signal<IPosEntity \| undefined>	undefined	POS entity data
`editMode`	Signal	false	Edit mode state
`cardTitle`	string	'اطلاعات پایانه‌ فروش'	Card header title
`showMoreActions`	boolean	true	Show more actions button

Outputs

Output	Payload	Description
`editModeChange`	boolean	Emitted when edit mode toggled
`onMoreAction`	void	Emitted when more actions button clicked
`onSubmit`	void	Emitted on form submission

Model (IPosEntity)

interface IPosEntity {
  id: string;
  name: string;
  serial_number: string;
  model?: string;
  status: string;
  pos_type: string;
  complex: ISummary;
  device?: ISummary;
  provider?: ISummary;
}

Integration in Existing Component

To replace the inline display in your POS single view:

// Before: Manual field rendering
<app-key-value label="عنوان" [value]="pos()?.name" />
<app-key-value label="نوع پایانه" [value]="pos()?.pos_type" />
// ... more fields

// After: Use the component
<app-pos-display
  variant="full"
  [pos]="pos"
  [editMode]="editMode"
  (onMoreAction)="toPosLanding()"
/>

Files

pos-display.component.ts - Component logic
pos-display.component.html - Template
pos-display.component.scss - Styles
models/posEntity.model.ts - TypeScript interfaces and types
index.ts - Barrel export