@alaarab/ogrid-angular-primeng 2.0.8 → 2.0.11

package/dist/esm/datagrid-table/inline-cell-editor.component.js

@@ -4,24 +4,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, input, output, signal, effect, viewChild } from '@angular/core';
+import { Component, signal, effect, ViewChild, Input, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
 let InlineCellEditorComponent = class InlineCellEditorComponent {
     constructor() {
-        this.value = input.required();
-        this.item = input.required();
-        this.column = input.required();
-        this.rowIndex = input.required();
-        this.editorType = input.required();
-        this.commit = output();
-        this.cancel = output();
-        this.inputEl = viewChild('inputEl');
+        this.commit = new EventEmitter();
+        this.cancel = new EventEmitter();
         this.localValue = signal('');
         this.selectOptions = signal([]);
         effect(() => {
-            const v = this.value();
+            const v = this.value;
             this.localValue.set(v != null ? String(v) : '');
-            const col = this.column();
+            const col = this.column;
             if (col.cellEditorParams?.values) {
                 this.selectOptions.set(col.cellEditorParams.values);
             }
@@ -29,7 +23,7 @@ let InlineCellEditorComponent = class InlineCellEditorComponent {
     }
     ngAfterViewInit() {
         setTimeout(() => {
-            const el = this.inputEl()?.nativeElement;
+            const el = this.inputEl?.nativeElement;
             if (el) {
                 el.focus();
                 if (el instanceof HTMLInputElement && el.type === 'text') {
@@ -72,20 +66,44 @@ let InlineCellEditorComponent = class InlineCellEditorComponent {
     }
     getInputStyle() {
         const baseStyle = 'width:100%;box-sizing:border-box;padding:6px 10px;border:2px solid var(--ogrid-selection, #217346);border-radius:2px;outline:none;font:inherit;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424);';
-        const col = this.column();
+        const col = this.column;
         if (col.type === 'numeric') {
             return baseStyle + 'text-align:right;';
         }
         return baseStyle;
     }
 };
+__decorate([
+    Input({ required: true })
+], InlineCellEditorComponent.prototype, "value", void 0);
+__decorate([
+    Input({ required: true })
+], InlineCellEditorComponent.prototype, "item", void 0);
+__decorate([
+    Input({ required: true })
+], InlineCellEditorComponent.prototype, "column", void 0);
+__decorate([
+    Input({ required: true })
+], InlineCellEditorComponent.prototype, "rowIndex", void 0);
+__decorate([
+    Input({ required: true })
+], InlineCellEditorComponent.prototype, "editorType", void 0);
+__decorate([
+    Output()
+], InlineCellEditorComponent.prototype, "commit", void 0);
+__decorate([
+    Output()
+], InlineCellEditorComponent.prototype, "cancel", void 0);
+__decorate([
+    ViewChild('inputEl')
+], InlineCellEditorComponent.prototype, "inputEl", void 0);
 InlineCellEditorComponent = __decorate([
     Component({
         selector: 'ogrid-primeng-inline-cell-editor',
         standalone: true,
         imports: [CommonModule],
         template: `
-    @switch (editorType()) {
+    @switch (editorType) {
       @case ('text') {
         <input
           #inputEl

package/dist/esm/datagrid-table/popover-cell-editor.component.js

@@ -4,45 +4,38 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, input, ChangeDetectionStrategy, signal, effect, viewChild, Injector, createComponent, EnvironmentInjector, inject, } from '@angular/core';
+import { Component, ChangeDetectionStrategy, signal, effect, ViewChild, Injector, createComponent, EnvironmentInjector, inject, Input } from '@angular/core';
 /**
  * PopoverCellEditor component for Angular PrimeNG.
  * Renders custom popover editor when anchor element is set.
  */
 let PopoverCellEditorComponent = class PopoverCellEditorComponent {
     constructor() {
-        this.item = input.required();
-        this.column = input.required();
-        this.rowIndex = input.required();
-        this.globalColIndex = input.required();
-        this.displayValue = input.required();
-        this.editorProps = input.required();
-        this.onCancel = input.required();
-        this.anchorRef = viewChild('anchorEl');
-        this.editorContainerRef = viewChild('editorContainer');
         this.injector = inject(Injector);
         this.envInjector = inject(EnvironmentInjector);
         this.showEditor = signal(false);
         // Show editor after anchor is rendered
         effect(() => {
-            const anchor = this.anchorRef();
+            const anchor = this.anchorRef;
             if (anchor) {
                 setTimeout(() => this.showEditor.set(true), 0);
             }
         });
         // Render custom editor component when container is available
         effect(() => {
-            const container = this.editorContainerRef();
-            const props = this.editorProps();
-            const col = this.column();
+            const container = this.editorContainerRef;
+            const props = this.editorProps;
+            const col = this.column;
             if (!container || !this.showEditor() || typeof col.cellEditor !== 'function')
                 return;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const EditorComponent = col.cellEditor; // ComponentType
             const componentRef = createComponent(EditorComponent, {
                 environmentInjector: this.envInjector,
                 elementInjector: this.injector,
             });
             // Pass props to component instance
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Object.assign(componentRef.instance, props);
             componentRef.changeDetectorRef.detectChanges();
             // Append to DOM
@@ -52,9 +45,36 @@ let PopoverCellEditorComponent = class PopoverCellEditorComponent {
         });
     }
     handleOverlayClick() {
-        this.onCancel()();
+        this.onCancel();
     }
 };
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "item", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "column", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "rowIndex", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "globalColIndex", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "displayValue", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "editorProps", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "onCancel", void 0);
+__decorate([
+    ViewChild('anchorEl')
+], PopoverCellEditorComponent.prototype, "anchorRef", void 0);
+__decorate([
+    ViewChild('editorContainer')
+], PopoverCellEditorComponent.prototype, "editorContainerRef", void 0);
 PopoverCellEditorComponent = __decorate([
     Component({
         selector: 'ogrid-primeng-popover-cell-editor',
@@ -63,10 +83,10 @@ PopoverCellEditorComponent = __decorate([
         template: `
     <div #anchorEl
       class="ogrid-popover-anchor"
-      [attr.data-row-index]="rowIndex()"
-      [attr.data-col-index]="globalColIndex()"
+      [attr.data-row-index]="rowIndex"
+      [attr.data-col-index]="globalColIndex"
     >
-      {{ displayValue() }}
+      {{ displayValue }}
     </div>
     @if (showEditor()) {
       <div class="ogrid-popover-editor-overlay" (click)="handleOverlayClick()">

package/dist/esm/index.js

@@ -6,6 +6,8 @@ export { DataGridTableComponent } from './datagrid-table/datagrid-table.componen
 export { InlineCellEditorComponent } from './datagrid-table/inline-cell-editor.component';
 export { PopoverCellEditorComponent } from './datagrid-table/popover-cell-editor.component';
 export { ColumnHeaderFilterComponent } from './column-header-filter/column-header-filter.component';
+// IColumnHeaderFilterProps is now exported from @alaarab/ogrid-angular (base class)
 export { ColumnChooserComponent } from './column-chooser/column-chooser.component';
+// IColumnChooserProps is now exported from @alaarab/ogrid-angular (base class)
 export { PaginationControlsComponent } from './pagination-controls/pagination-controls.component';
 export { ColumnHeaderMenuComponent } from './column-header-menu/column-header-menu.component';

package/dist/esm/ogrid/ogrid.component.js

@@ -4,37 +4,49 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, input, computed, effect, inject, ChangeDetectionStrategy } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy, Input, signal, effect } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { OGridService, OGridLayoutComponent, } from '@alaarab/ogrid-angular';
 import { DataGridTableComponent } from '../datagrid-table/datagrid-table.component';
 import { ColumnChooserComponent } from '../column-chooser/column-chooser.component';
 import { PaginationControlsComponent } from '../pagination-controls/pagination-controls.component';
 let OGridComponent = class OGridComponent {
+    set props(value) {
+        this.propsSignal.set(value);
+    }
     constructor() {
         this.service = inject(OGridService);
-        this.props = input.required();
+        this.propsSignal = signal(undefined);
         // Stable callback references (avoid re-creating every template eval)
         this.onColumnSortFn = (columnKey) => this.service.handleSort(columnKey);
         this.onColumnResizedFn = (columnId, width) => this.service.handleColumnResized(columnId, width);
         this.onColumnPinnedFn = (columnId, pinned) => this.service.handleColumnPinned(columnId, pinned);
         this.onSelectionChangeFn = (event) => this.service.handleSelectionChange(event);
         this.onFilterChangeFn = (key, value) => this.service.handleFilterChange(key, value);
-        this.showToolbar = computed(() => this.service.columnChooserPlacement() === 'toolbar' || this.service.toolbar() != null);
-        this.emptyStateObj = computed(() => ({
+        effect(() => {
+            const p = this.propsSignal();
+            if (p)
+                this.service.configure(p);
+        });
+    }
+    get showToolbar() {
+        return this.service.columnChooserPlacement() === 'toolbar' || this.service.toolbar() != null;
+    }
+    get emptyStateObj() {
+        return {
             hasActiveFilters: this.service.hasActiveFilters(),
             onClearAll: () => this.service.setFilters({}),
             message: this.service.emptyState()?.message,
             render: this.service.emptyState()?.render,
-        }));
-        effect(() => {
-            this.service.configure(this.props());
-        });
+        };
     }
     onPageSizeChange(size) {
         this.service.setPageSize(size);
     }
 };
+__decorate([
+    Input({ required: true })
+], OGridComponent.prototype, "props", null);
 OGridComponent = __decorate([
     Component({
         selector: 'ogrid-primeng',
@@ -51,7 +63,7 @@ OGridComponent = __decorate([
         template: `
     <ogrid-layout
       [className]="service.className()"
-      [hasToolbar]="showToolbar()"
+      [hasToolbar]="showToolbar"
       [hasToolbarBelow]="false"
       [hasPagination]="true"
       [sideBar]="service.sideBarProps()"
@@ -104,7 +116,7 @@ OGridComponent = __decorate([
         [suppressHorizontalScroll]="service.suppressHorizontalScroll()"
         [aria-label]="service.ariaLabel()"
         [aria-labelledby]="service.ariaLabelledBy()"
-        [emptyState]="emptyStateObj()"
+        [emptyState]="emptyStateObj"
       ></ogrid-primeng-datagrid-table>
 
       <div pagination>

package/dist/esm/pagination-controls/pagination-controls.component.js

@@ -4,24 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, input, output, computed } from '@angular/core';
+import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { getPaginationViewModel } from '@alaarab/ogrid-core';
-let PaginationControlsComponent = class PaginationControlsComponent {
-    constructor() {
-        this.currentPage = input.required();
-        this.pageSize = input.required();
-        this.totalCount = input.required();
-        this.pageSizeOptions = input(undefined);
-        this.entityLabelPlural = input('items');
-        this.pageChange = output();
-        this.pageSizeChange = output();
-        this.labelPlural = computed(() => this.entityLabelPlural() ?? 'items');
-        this.vm = computed(() => getPaginationViewModel(this.currentPage(), this.pageSize(), this.totalCount(), this.pageSizeOptions() ? { pageSizeOptions: this.pageSizeOptions() } : undefined));
-    }
-    onPageSizeChange(value) {
-        this.pageSizeChange.emit(Number(value));
-    }
+import { BasePaginationControlsComponent } from '@alaarab/ogrid-angular';
+let PaginationControlsComponent = class PaginationControlsComponent extends BasePaginationControlsComponent {
 };
 PaginationControlsComponent = __decorate([
     Component({
@@ -32,14 +18,14 @@ PaginationControlsComponent = __decorate([
     @if (vm()) {
       <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ogrid-fg, #242424)">
         <div>
-          Showing {{ vm()!.startItem }} to {{ vm()!.endItem }} of {{ totalCount().toLocaleString() }} {{ labelPlural() }}
+          Showing {{ vm()!.startItem }} to {{ vm()!.endItem }} of {{ totalCount.toLocaleString() }} {{ labelPlural() }}
         </div>
 
         <div style="display:flex;align-items:center;gap:4px" role="navigation" aria-label="Pagination">
           <button
             type="button"
             class="p-button p-button-text p-button-sm"
-            [disabled]="currentPage() === 1"
+            [disabled]="currentPage === 1"
             (click)="pageChange.emit(1)"
             aria-label="First page"
             style="min-width:32px;padding:4px 8px"
@@ -47,8 +33,8 @@ PaginationControlsComponent = __decorate([
           <button
             type="button"
             class="p-button p-button-text p-button-sm"
-            [disabled]="currentPage() === 1"
-            (click)="pageChange.emit(currentPage() - 1)"
+            [disabled]="currentPage === 1"
+            (click)="pageChange.emit(currentPage - 1)"
             aria-label="Previous page"
             style="min-width:32px;padding:4px 8px"
           >&lsaquo;</button>
@@ -68,10 +54,10 @@ PaginationControlsComponent = __decorate([
             <button
               type="button"
               class="p-button p-button-sm"
-              [class.p-button-outlined]="currentPage() !== pageNum"
+              [class.p-button-outlined]="currentPage !== pageNum"
               (click)="pageChange.emit(pageNum)"
               [attr.aria-label]="'Page ' + pageNum"
-              [attr.aria-current]="currentPage() === pageNum ? 'page' : null"
+              [attr.aria-current]="currentPage === pageNum ? 'page' : null"
               style="min-width:32px;padding:4px 8px"
             >{{ pageNum }}</button>
           }
@@ -90,15 +76,15 @@ PaginationControlsComponent = __decorate([
           <button
             type="button"
             class="p-button p-button-text p-button-sm"
-            [disabled]="currentPage() >= vm()!.totalPages"
-            (click)="pageChange.emit(currentPage() + 1)"
+            [disabled]="currentPage >= vm()!.totalPages"
+            (click)="pageChange.emit(currentPage + 1)"
             aria-label="Next page"
             style="min-width:32px;padding:4px 8px"
           >&rsaquo;</button>
           <button
             type="button"
             class="p-button p-button-text p-button-sm"
-            [disabled]="currentPage() >= vm()!.totalPages"
+            [disabled]="currentPage >= vm()!.totalPages"
             (click)="pageChange.emit(vm()!.totalPages)"
             aria-label="Last page"
             style="min-width:32px;padding:4px 8px"
@@ -108,7 +94,7 @@ PaginationControlsComponent = __decorate([
         <div style="display:flex;align-items:center;gap:6px">
           <span style="font-size:12px">Rows</span>
           <select
-            [value]="'' + pageSize()"
+            [value]="'' + pageSize"
             (change)="onPageSizeChange($any($event.target).value)"
             aria-label="Rows per page"
             style="padding:4px 6px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"

package/dist/types/column-chooser/column-chooser.component.d.ts

@@ -1,20 +1,4 @@
-import type { IColumnDefinition } from '@alaarab/ogrid-angular';
-export interface IColumnChooserProps {
-    columns: IColumnDefinition[];
-    visibleColumns: Set<string>;
-    onVisibilityChange: (columnKey: string, visible: boolean) => void;
-}
-export declare class ColumnChooserComponent {
-    readonly columns: import("@angular/core").InputSignal<IColumnDefinition[]>;
-    readonly visibleColumns: import("@angular/core").InputSignal<Set<string>>;
-    readonly visibilityChange: import("@angular/core").OutputEmitterRef<{
-        columnKey: string;
-        visible: boolean;
-    }>;
-    readonly open: import("@angular/core").WritableSignal<boolean>;
-    protected readonly visibleCount: import("@angular/core").Signal<number>;
-    protected readonly totalCount: import("@angular/core").Signal<number>;
-    onToggle(columnKey: string, checked: boolean): void;
-    onSelectAll(): void;
-    onClearAll(): void;
+import { BaseColumnChooserComponent } from '@alaarab/ogrid-angular';
+export declare class ColumnChooserComponent extends BaseColumnChooserComponent {
+    get open(): import("@angular/core").WritableSignal<boolean>;
 }

package/dist/types/column-header-filter/column-header-filter.component.d.ts

@@ -1,70 +1,13 @@
 import { ElementRef } from '@angular/core';
-import type { ColumnFilterType, IDateFilterValue, UserLike } from '@alaarab/ogrid-angular';
-export interface IColumnHeaderFilterProps {
-    columnKey: string;
-    columnName: string;
-    filterType: ColumnFilterType;
-    isSorted?: boolean;
-    isSortedDescending?: boolean;
-    onSort?: () => void;
-    selectedValues?: string[];
-    onFilterChange?: (values: string[]) => void;
-    options?: string[];
-    isLoadingOptions?: boolean;
-    textValue?: string;
-    onTextChange?: (value: string) => void;
-    selectedUser?: UserLike;
-    onUserChange?: (user: UserLike | undefined) => void;
-    peopleSearch?: (query: string) => Promise<UserLike[]>;
-    dateValue?: IDateFilterValue;
-    onDateChange?: (value: IDateFilterValue | undefined) => void;
-}
-export declare class ColumnHeaderFilterComponent {
+import { BaseColumnHeaderFilterComponent } from '@alaarab/ogrid-angular';
+export declare class ColumnHeaderFilterComponent extends BaseColumnHeaderFilterComponent {
     private destroyRef;
-    readonly columnKey: import("@angular/core").InputSignal<string>;
-    readonly columnName: import("@angular/core").InputSignal<string>;
-    readonly filterType: import("@angular/core").InputSignal<ColumnFilterType>;
-    readonly isSorted: import("@angular/core").InputSignal<boolean>;
-    readonly isSortedDescending: import("@angular/core").InputSignal<boolean>;
-    readonly onSort: import("@angular/core").InputSignal<(() => void) | undefined>;
-    readonly selectedValues: import("@angular/core").InputSignal<string[] | undefined>;
-    readonly onFilterChange: import("@angular/core").InputSignal<((values: string[]) => void) | undefined>;
-    readonly options: import("@angular/core").InputSignal<string[]>;
-    readonly isLoadingOptions: import("@angular/core").InputSignal<boolean>;
-    readonly textValue: import("@angular/core").InputSignal<string>;
-    readonly onTextChange: import("@angular/core").InputSignal<((value: string) => void) | undefined>;
-    readonly selectedUser: import("@angular/core").InputSignal<UserLike | undefined>;
-    readonly onUserChange: import("@angular/core").InputSignal<((user: UserLike | undefined) => void) | undefined>;
-    readonly peopleSearch: import("@angular/core").InputSignal<((query: string) => Promise<UserLike[]>) | undefined>;
-    readonly dateValue: import("@angular/core").InputSignal<IDateFilterValue | undefined>;
-    readonly onDateChange: import("@angular/core").InputSignal<((value: IDateFilterValue | undefined) => void) | undefined>;
-    readonly isFilterOpen: import("@angular/core").WritableSignal<boolean>;
-    readonly tempTextValue: import("@angular/core").WritableSignal<string>;
-    readonly searchText: import("@angular/core").WritableSignal<string>;
-    readonly tempSelected: import("@angular/core").WritableSignal<Set<string>>;
-    readonly peopleSearchText: import("@angular/core").WritableSignal<string>;
-    readonly peopleSuggestions: import("@angular/core").WritableSignal<UserLike[]>;
-    readonly isPeopleLoading: import("@angular/core").WritableSignal<boolean>;
-    readonly tempDateFrom: import("@angular/core").WritableSignal<string>;
-    readonly tempDateTo: import("@angular/core").WritableSignal<string>;
-    readonly filterTrigger: import("@angular/core").Signal<ElementRef<HTMLButtonElement> | undefined>;
-    readonly filterPanel: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
-    private peopleDebounceTimer;
+    filterTrigger?: ElementRef<HTMLButtonElement>;
+    filterPanel?: ElementRef<HTMLDivElement>;
+    protected getHeaderEl(): ElementRef<HTMLElement> | undefined;
     private clickOutsideHandler;
-    readonly hasActiveFilter: import("@angular/core").Signal<boolean>;
-    readonly filteredOptions: import("@angular/core").Signal<string[]>;
     constructor();
     handleSortClick(): void;
     toggleFilter(): void;
-    handleTextApply(): void;
-    handleTextClear(): void;
-    handleCheckboxChange(opt: string, checked: boolean): void;
     handleSelectAllOptions(): void;
-    handleClearSelection(): void;
-    handleApplyMultiSelect(): void;
-    onPeopleSearchInput(value: string): void;
-    handleUserSelect(user: UserLike): void;
-    handleClearUser(): void;
-    handleDateApply(): void;
-    handleDateClear(): void;
 }

package/dist/types/column-header-menu/column-header-menu.component.d.ts

@@ -1,20 +1,19 @@
 import type { Menu } from 'primeng/menu';
 import type { MenuItem } from 'primeng/api';
+import { type ColumnHeaderMenuHandlers } from '@alaarab/ogrid-core';
 /**
- * Column header dropdown menu for pin/unpin actions.
+ * Column header dropdown menu for pin/unpin, sort, and autosize actions.
  * Uses PrimeNG Menu component.
  */
 export declare class ColumnHeaderMenuComponent {
-    readonly columnId: import("@angular/core").InputSignal<string>;
-    readonly canPinLeft: import("@angular/core").InputSignal<boolean>;
-    readonly canPinRight: import("@angular/core").InputSignal<boolean>;
-    readonly canUnpin: import("@angular/core").InputSignal<boolean>;
-    readonly onPinLeft: import("@angular/core").InputSignal<(() => void) | undefined>;
-    readonly onPinRight: import("@angular/core").InputSignal<(() => void) | undefined>;
-    readonly onUnpin: import("@angular/core").InputSignal<(() => void) | undefined>;
-    readonly menuRef: import("@angular/core").Signal<Menu | undefined>;
+    columnId: string;
+    canPinLeft: boolean;
+    canPinRight: boolean;
+    canUnpin: boolean;
+    currentSort: 'asc' | 'desc' | null;
+    isSortable: boolean;
+    isResizable: boolean;
+    handlers: Partial<ColumnHeaderMenuHandlers>;
+    menuRef?: Menu;
     readonly menuModel: import("@angular/core").Signal<MenuItem[]>;
-    handlePinLeft(): void;
-    handlePinRight(): void;
-    handleUnpin(): void;
 }