# PropertyPanelComponent

Import it from `@grafloria/angular`.

Property panel component for editing diagram node properties. Displays editable properties based on PropertySchema.

Features:
- Schema-driven dynamic rendering
- Multi-node editing with mixed value detection
- Validation with inline error display
- Conditional property visibility
- Collapsible property groups
- Immediate and deferred update modes
- Responsive design
- WCAG 2.1 Level AA accessible

```ts
@Component({
    selector: 'diagram-property-panel',
    imports: [CommonModule, PropertyEditorComponent],
    templateUrl: './property-panel.component.html',
    styleUrls: ['./property-panel.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class PropertyPanelComponent implements OnInit, OnDestroy
```

Use it as `<diagram-property-panel>` in a template.

**Inputs**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `updateMode?` | `'immediate' \| 'deferred'` |  | Update mode: 'immediate' or 'deferred'. |
| `showHeader?` |  |  | Show header section with node info. |
| `showActions?` |  |  | Show actions menu (delete, duplicate, etc.). |
| `collapsibleGroups?` |  |  | Enable collapsible groups. |
| `headerTemplate?` | `TemplateRef<any>` |  | Custom header template. |
| `emptyStateTemplate?` | `TemplateRef<any>` |  | Custom empty state template. |
| `groupHeaderTemplate?` | `TemplateRef<any>` |  | Custom group header template. |

**Outputs**

- `propertyChanged` — Emitted when property value changes.
- `validationError` — Emitted when validation error occurs.
- `save` — Emitted when Save button clicked (deferred mode).
- `cancel` — Emitted when Cancel button clicked (deferred mode).

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `updateMode` | `'immediate' \| 'deferred'` | `'immediate'` | Update mode: 'immediate' or 'deferred'. - immediate: Changes applied on every keystroke - deferred: Changes applied only when Save button clicked |
| `showHeader` |  | `true` | Show header section with node info. |
| `showActions` |  | `false` | Show actions menu (delete, duplicate, etc.). |
| `collapsibleGroups` |  | `true` | Enable collapsible groups. |
| `headerTemplate?` | `TemplateRef<any>` |  | Custom header template. |
| `emptyStateTemplate?` | `TemplateRef<any>` |  | Custom empty state template. |
| `groupHeaderTemplate?` | `TemplateRef<any>` |  | Custom group header template. |
| `propertyChanged` |  |  | Emitted when property value changes. |
| `validationError` |  |  | Emitted when validation error occurs. |
| `save` |  |  | Emitted when Save button clicked (deferred mode). |
| `cancel` |  |  | Emitted when Cancel button clicked (deferred mode). |
| `schema` | `PropertySchema \| null` | `null` |  |
| `propertyGroups` | `Map<string, PropertyDefinition[]>` |  |  |
| `expandedGroups` |  |  |  |
| `propertyValues` |  |  |  |
| `propertyErrors` |  |  |  |
| `isDirty` |  | `false` |  |

**Methods**

- `@Input() set selectedNodes(nodes: PropertyDiagramNode | PropertyDiagramNode[] | null)` — Selected node(s) to edit. Can be single node or array for multi-node editing.
- `get selectedNodes(): PropertyDiagramNode[]` — Selected node(s) to edit. Can be single node or array for multi-node editing.
- `constructor( private propertyPanelService: PropertyPanelService, private changeDetectorRef: ChangeDetectorRef )`
- `ngOnInit(): void`
- `ngOnDestroy(): void`
- `onPropertyChange(property: PropertyDefinition, newValue: any): void` — Handle property value change.
- `isPropertyVisible(property: PropertyDefinition): boolean` — Check if property should be visible.
- `hasMixedValues(property: PropertyDefinition): boolean` — Check if property has mixed values (multi-node editing).
- `getPropertyValue(property: PropertyDefinition): any` — Get property value or placeholder.
- `getPropertyErrors(property: PropertyDefinition): string[]` — Get validation errors for property.
- `toggleGroup(groupName: string): void` — Toggle group expand/collapse.
- `isGroupExpanded(groupName: string): boolean` — Check if group is expanded.
- `onSave(): void` — Save changes (deferred mode).
- `onCancel(): void` — Cancel changes (deferred mode).
- `trackByGroupName(index: number, entry: { key: string; value: PropertyDefinition[] }): string` — Track by function for property groups (performance optimization).
- `trackByPropertyKey(index: number, property: PropertyDefinition): string` — Track by function for properties (performance optimization).

**Example**

```html
<diagram-property-panel
  [selectedNodes]="selectedNodes"
  [updateMode]="'immediate'"
  [showHeader]="true"
  (propertyChanged)="onPropertyChange($event)">
</diagram-property-panel>
```