diff --git a/src/app/components/panelmenu/panelmenu.ts b/src/app/components/panelmenu/panelmenu.ts index 0c2ba554ce0..a611119d4dc 100644 --- a/src/app/components/panelmenu/panelmenu.ts +++ b/src/app/components/panelmenu/panelmenu.ts @@ -285,7 +285,7 @@ export class PanelMenuSub { [focusedItemId]="focused ? focusedItemId : undefined" [activeItemPath]="activeItemPath()" [transitionOptions]="transitionOptions" - [items]="processedItems()" + [items]="processedItems" [parentExpanded]="parentExpanded" (itemToggle)="onItemToggle($event)" (keydown)="onKeyDown($event)" @@ -300,7 +300,14 @@ export class PanelMenuSub { class: 'p-element' } }) -export class PanelMenuList implements OnChanges { +export class PanelMenuList { + @Input() set model(value: MenuItem[] | undefined) { + this._model = value; + this._processedItems = this.createProcessedItems(this._model || []); + } + get model(): MenuItem[] | undefined { + return this._model; + } @Input() panelId: string | undefined; @Input() id: string | undefined; @@ -337,10 +344,19 @@ export class PanelMenuList implements OnChanges { activeItemPath = signal([]); - processedItems = signal([]); + _model: any; + + _processedItems: any[]; + + get processedItems() { + if (!this._processedItems || !this._processedItems.length) { + this._processedItems = this.createProcessedItems(this.model || []); + } + return this._processedItems; + } visibleItems = computed(() => { - const processedItems = this.processedItems(); + const processedItems = this.processedItems; return this.flatItems(processedItems); }); @@ -349,11 +365,11 @@ export class PanelMenuList implements OnChanges { return focusedItem && focusedItem.item?.id ? focusedItem.item.id : ObjectUtils.isNotEmpty(this.focusedItem()) ? `${this.panelId}_${this.focusedItem().key}` : undefined; } - ngOnChanges(changes: SimpleChanges) { - if (changes && changes.items && changes.items.currentValue) { - this.processedItems.set(this.createProcessedItems(changes.items.currentValue || [])); - } - } + // ngOnChanges(changes: SimpleChanges) { + // if (changes && changes.items && changes.items.currentValue) { + // this._processedItems = this.createProcessedItems(changes.items.currentValue || []); + // } + // } getItemProp(processedItem, name) { return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined; @@ -429,7 +445,7 @@ export class PanelMenuList implements OnChanges { } findProcessedItemByItemKey(key, processedItems?, level = 0) { - processedItems = processedItems || this.processedItems(); + processedItems = processedItems || this.processedItems; if (processedItems && processedItems.length) { for (let i = 0; i < processedItems.length; i++) { const processedItem = processedItems[i]; @@ -493,9 +509,9 @@ export class PanelMenuList implements OnChanges { expanded && activeItemPath.push(processedItem); this.activeItemPath.set(activeItemPath); - const processedItems = this.processedItems(); + const processedItems = this.processedItems; const newProcessedItems = processedItems.map((item) => (item === processedItem ? processedItem : item)); - this.processedItems.set(newProcessedItems); + this._processedItems = newProcessedItems; this.focusedItem.set(processedItem); } @@ -792,6 +808,7 @@ export class PanelMenuList implements OnChanges { >
(null); + + + _model: MenuItem[] | undefined; + + + ngOnInit() { this.id = this.id || UniqueComponentId(); } @@ -1094,3 +1123,4 @@ export class PanelMenu implements AfterContentInit { declarations: [PanelMenu, PanelMenuSub, PanelMenuList] }) export class PanelMenuModule {} +