@messaia/cdk 20.0.0-RC.6 → 20.0.0-RC.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11353,11 +11353,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
11353
11353
  args: [{ providedIn: 'root' }]
11354
11354
  }], ctorParameters: () => [{ type: i0.Compiler }] });
11355
11355
 
11356
+ /**
11357
+ * Represents a user-defined action that can be performed on an entity.
11358
+ * @template TEntity The type of the entity the action operates on.
11359
+ * @template TContext The type of the context in which the action is executed.
11360
+ */
11356
11361
  class ActionItem {
11357
11362
  /**
11358
- * The title of the action item.
11363
+ * Unique identifier for the action item.
11359
11364
  * @type {string}
11360
11365
  */
11366
+ id = '';
11367
+ /**
11368
+ * The display title of the action item.
11369
+ * Can be a static string or a function returning a string,
11370
+ * which can optionally use the entity and context to generate the title.
11371
+ * @type {string | ((x: TEntity, ctx: TContext) => string)}
11372
+ */
11361
11373
  title;
11362
11374
  /**
11363
11375
  * Tooltip text for the action item, displayed on hover.
@@ -14570,7 +14582,7 @@ class VdDynamicMenuComponent {
14570
14582
  }, { once: true });
14571
14583
  }
14572
14584
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VdDynamicMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
14573
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: VdDynamicMenuComponent, isStandalone: true, selector: "vd-dynamic-menu", inputs: { items: "items", data: "data", index: "index", context: "context", contextMenu: "contextMenu" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: MatMenu, descendants: true }, { propertyName: "contextMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div layout=\"row\" layout-align=\"start center\" *ngIf=\"items\" flex>\r\n <ng-container *ngFor=\"let menu of items\">\r\n <!-- #region Button trigger -->\r\n <a mat-icon-button [mat-menu-trigger-for]=\"matMenu\" *ngIf=\"!contextMenu && menu?.items?.length && !(menu.hide && menu.hide(data, context, index))\" [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\" [matTooltip]=\"menu.tooltip\" (click)=\"$event.stopPropagation();\">\r\n <mat-icon fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"menu.iconClass??'' | func:data:context\" [style.color]=\"menu.iconColor\"> <!-- Bind iconColor here -->\r\n {{(menu.icon??'more_vert' | func:data:context) || 'more_vert'}}\r\n </mat-icon>\r\n <span [style.color]=\"menu.textColor\">{{menu.title}}</span> <!-- Bind textColor here -->\r\n </a>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Context trigger -->\r\n <div *ngIf=\"contextMenu\" style=\"visibility: hidden; position: fixed\" [style.left]=\"contextMenuPosition.x\" [style.top]=\"contextMenuPosition.y\" [matMenuTriggerFor]=\"matMenu\"></div>\r\n <!-- #endregion -->\r\n\r\n <a mat-icon-button *ngIf=\"!menu?.items?.length && !(menu.hide && menu.hide(data, context, index))\" [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\" [matTooltip]=\"menu.tooltip\" (click)=\"$event.stopPropagation(); menu.event ? menu.event(data, context, index) : null\">\r\n <mat-icon fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"menu.iconClass??'' | func:data:context\" [style.color]=\"menu.iconColor\"> <!-- Bind iconColor here -->\r\n {{(menu.icon??'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n </a>\r\n <mat-menu x-position=\"before\" #matMenu=\"matMenu\">\r\n <ng-container *ngFor=\"let menuItem of menu?.items\">\r\n <ng-container *ngIf=\"!menuItem.items\">\r\n <a mat-menu-item (click)=\"menuItem.event ? menuItem.event(data, context, index) : null\" *ngIf=\"!menuItem.hide || !menuItem.hide(data, context, index)\" [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\" [matTooltip]=\"menuItem.tooltip\">\r\n <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"menuItem.iconClass??'' | func:data:context\" [style.color]=\"menuItem.iconColor\"> <!-- Bind iconColor here -->\r\n {{(menuItem.icon??'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n <span [style.color]=\"menuItem.textColor\">{{menuItem.title}}</span> <!-- Bind textColor here -->\r\n </a>\r\n </ng-container>\r\n <ng-container *ngIf=\"menuItem.items\">\r\n <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n <ng-container *ngFor=\"let menuSubItem of menuItem.items\">\r\n <a mat-menu-item (click)=\"menuSubItem.event ? menuSubItem.event(data, context, index) : null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide(data, context, index)\" [disabled]=\"menuSubItem.disable && menuSubItem.disable(data, context, index)\" [matTooltip]=\"menuItem.tooltip\">\r\n <mat-icon fontSet=\"{{menuSubItem.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"menuSubItem.iconClass??'' | func:data:context\" [style.color]=\"menuSubItem.iconColor\"> <!-- Bind iconColor here -->\r\n {{(menuSubItem.icon??'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n <span [style.color]=\"menuSubItem.textColor\">{{menuSubItem.title}}</span> <!-- Bind textColor here -->\r\n </a>\r\n </ng-container>\r\n </mat-menu>\r\n <a mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide(data, context, index)\" [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\" [matTooltip]=\"menuItem.tooltip\">\r\n <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"menuItem.iconClass??'' | func:data:context\" [style.color]=\"menuItem.iconColor\"> <!-- Bind iconColor here -->\r\n {{(menuItem.icon??'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n <span [style.color]=\"menuItem.textColor\">{{menuItem.title}}</span> <!-- Bind textColor here -->\r\n </a>\r\n </ng-container>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: FuncPipe, name: "func" }] });
14585
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: VdDynamicMenuComponent, isStandalone: true, selector: "vd-dynamic-menu", inputs: { items: "items", data: "data", index: "index", context: "context", contextMenu: "contextMenu" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: MatMenu, descendants: true }, { propertyName: "contextMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<!-- Container row layout for displaying action items horizontally, aligned center vertically -->\r\n<div layout=\"row\" layout-align=\"start center\" *ngIf=\"items\" flex>\r\n <ng-container *ngFor=\"let menu of items\">\r\n\r\n <!-- #region Button trigger for actions that open a submenu -->\r\n <a\r\n mat-icon-button\r\n *ngIf=\"!contextMenu && menu?.items?.length && !(menu.hide && menu.hide(data, context, index))\"\r\n [mat-menu-trigger-for]=\"matMenu\"\r\n [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\"\r\n [matTooltip]=\"menu.tooltip\"\r\n (click)=\"$event.stopPropagation();\">\r\n <!-- Display menu icon -->\r\n <mat-icon\r\n fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\"\r\n [class]=\"menu.iconClass ?? '' | func:data:context\"\r\n [style.color]=\"menu.iconColor\">\r\n {{ (menu.icon ?? 'more_vert' | func:data:context) || 'more_vert' }}\r\n </mat-icon>\r\n\r\n <!-- Optional title next to icon -->\r\n <span [style.color]=\"menu.textColor\">{{menu.title | func:data:context}}</span>\r\n </a>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Invisible context menu trigger used for right-click context positioning -->\r\n <div\r\n *ngIf=\"contextMenu\"\r\n style=\"visibility: hidden; position: fixed\"\r\n [style.left]=\"contextMenuPosition.x\"\r\n [style.top]=\"contextMenuPosition.y\"\r\n [matMenuTriggerFor]=\"matMenu\"></div>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Direct action button (no submenu) -->\r\n <a\r\n mat-icon-button\r\n *ngIf=\"!menu?.items?.length && !(menu.hide && menu.hide(data, context, index))\"\r\n [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\"\r\n [matTooltip]=\"menu.tooltip\"\r\n (click)=\"$event.stopPropagation(); menu.event ? menu.event(data, context, index) : null\">\r\n <!-- Icon for the action -->\r\n <mat-icon\r\n fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\"\r\n [class]=\"menu.iconClass ?? '' | func:data:context\"\r\n [style.color]=\"menu.iconColor\">\r\n {{ (menu.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n </mat-icon>\r\n </a>\r\n <!-- #endregion -->\r\n\r\n <!-- #region MatMenu with nested submenus -->\r\n <mat-menu x-position=\"before\" #matMenu=\"matMenu\">\r\n <ng-container *ngFor=\"let menuItem of menu?.items\">\r\n <!-- Simple menu item without sub-items -->\r\n <ng-container *ngIf=\"!menuItem.items\">\r\n <a\r\n mat-menu-item\r\n (click)=\"menuItem.event ? menuItem.event(data, context, index) : null\"\r\n *ngIf=\"!menuItem.hide || !menuItem.hide(data, context, index)\"\r\n [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\"\r\n [matTooltip]=\"menuItem.tooltip\">\r\n <mat-icon\r\n fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n [class]=\"menuItem.iconClass ?? '' | func:data:context\"\r\n [style.color]=\"menuItem.iconColor\">\r\n {{ (menuItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n </mat-icon>\r\n <span [style.color]=\"menuItem.textColor\">{{menuItem.title | func:data:context}}</span>\r\n </a>\r\n </ng-container>\r\n\r\n <!-- Menu item with nested submenu -->\r\n <ng-container *ngIf=\"menuItem.items\">\r\n <!-- Define the submenu -->\r\n <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n <ng-container *ngFor=\"let menuSubItem of menuItem.items\">\r\n <a\r\n mat-menu-item\r\n (click)=\"menuSubItem.event ? menuSubItem.event(data, context, index) : null\"\r\n *ngIf=\"!menuSubItem.hide || !menuSubItem.hide(data, context, index)\"\r\n [disabled]=\"menuSubItem.disable && menuSubItem.disable(data, context, index)\"\r\n [matTooltip]=\"menuItem.tooltip\">\r\n <mat-icon\r\n fontSet=\"{{menuSubItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n [class]=\"menuSubItem.iconClass ?? '' | func:data:context\"\r\n [style.color]=\"menuSubItem.iconColor\">\r\n {{ (menuSubItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n </mat-icon>\r\n <span [style.color]=\"menuSubItem.textColor\">{{menuSubItem.title | func:data:context}}</span>\r\n </a>\r\n </ng-container>\r\n </mat-menu>\r\n\r\n <!-- Trigger for submenu -->\r\n <a\r\n mat-menu-item\r\n [matMenuTriggerFor]=\"subMenu\"\r\n *ngIf=\"!menuItem.hide || !menuItem.hide(data, context, index)\"\r\n [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\"\r\n [matTooltip]=\"menuItem.tooltip\">\r\n <mat-icon\r\n fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n [class]=\"menuItem.iconClass ?? '' | func:data:context\"\r\n [style.color]=\"menuItem.iconColor\">\r\n {{ (menuItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n </mat-icon>\r\n <span [style.color]=\"menuItem.textColor\">{{menuItem.title | func:data:context}}</span>\r\n </a>\r\n </ng-container>\r\n </ng-container>\r\n </mat-menu>\r\n <!-- #endregion -->\r\n </ng-container>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: FuncPipe, name: "func" }] });
14574
14586
  }
14575
14587
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VdDynamicMenuComponent, decorators: [{
14576
14588
  type: Component,
@@ -14582,7 +14594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
14582
14594
  MatButtonModule,
14583
14595
  MatTooltipModule,
14584
14596
  FuncPipe
14585
- ], template: "<div layout=\"row\" layout-align=\"start center\" *ngIf=\"items\" flex>\r\n <ng-container *ngFor=\"let menu of items\">\r\n <!-- #region Button trigger -->\r\n <a mat-icon-button [mat-menu-trigger-for]=\"matMenu\" *ngIf=\"!contextMenu && menu?.items?.length && !(menu.hide && menu.hide(data, context, index))\" [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\" [matTooltip]=\"menu.tooltip\" (click)=\"$event.stopPropagation();\">\r\n <mat-icon fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"menu.iconClass??'' | func:data:context\" [style.color]=\"menu.iconColor\"> <!-- Bind iconColor here -->\r\n {{(menu.icon??'more_vert' | func:data:context) || 'more_vert'}}\r\n </mat-icon>\r\n <span [style.color]=\"menu.textColor\">{{menu.title}}</span> <!-- Bind textColor here -->\r\n </a>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Context trigger -->\r\n <div *ngIf=\"contextMenu\" style=\"visibility: hidden; position: fixed\" [style.left]=\"contextMenuPosition.x\" [style.top]=\"contextMenuPosition.y\" [matMenuTriggerFor]=\"matMenu\"></div>\r\n <!-- #endregion -->\r\n\r\n <a mat-icon-button *ngIf=\"!menu?.items?.length && !(menu.hide && menu.hide(data, context, index))\" [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\" [matTooltip]=\"menu.tooltip\" (click)=\"$event.stopPropagation(); menu.event ? menu.event(data, context, index) : null\">\r\n <mat-icon fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"menu.iconClass??'' | func:data:context\" [style.color]=\"menu.iconColor\"> <!-- Bind iconColor here -->\r\n {{(menu.icon??'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n </a>\r\n <mat-menu x-position=\"before\" #matMenu=\"matMenu\">\r\n <ng-container *ngFor=\"let menuItem of menu?.items\">\r\n <ng-container *ngIf=\"!menuItem.items\">\r\n <a mat-menu-item (click)=\"menuItem.event ? menuItem.event(data, context, index) : null\" *ngIf=\"!menuItem.hide || !menuItem.hide(data, context, index)\" [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\" [matTooltip]=\"menuItem.tooltip\">\r\n <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"menuItem.iconClass??'' | func:data:context\" [style.color]=\"menuItem.iconColor\"> <!-- Bind iconColor here -->\r\n {{(menuItem.icon??'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n <span [style.color]=\"menuItem.textColor\">{{menuItem.title}}</span> <!-- Bind textColor here -->\r\n </a>\r\n </ng-container>\r\n <ng-container *ngIf=\"menuItem.items\">\r\n <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n <ng-container *ngFor=\"let menuSubItem of menuItem.items\">\r\n <a mat-menu-item (click)=\"menuSubItem.event ? menuSubItem.event(data, context, index) : null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide(data, context, index)\" [disabled]=\"menuSubItem.disable && menuSubItem.disable(data, context, index)\" [matTooltip]=\"menuItem.tooltip\">\r\n <mat-icon fontSet=\"{{menuSubItem.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"menuSubItem.iconClass??'' | func:data:context\" [style.color]=\"menuSubItem.iconColor\"> <!-- Bind iconColor here -->\r\n {{(menuSubItem.icon??'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n <span [style.color]=\"menuSubItem.textColor\">{{menuSubItem.title}}</span> <!-- Bind textColor here -->\r\n </a>\r\n </ng-container>\r\n </mat-menu>\r\n <a mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide(data, context, index)\" [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\" [matTooltip]=\"menuItem.tooltip\">\r\n <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"menuItem.iconClass??'' | func:data:context\" [style.color]=\"menuItem.iconColor\"> <!-- Bind iconColor here -->\r\n {{(menuItem.icon??'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked'}}\r\n </mat-icon>\r\n <span [style.color]=\"menuItem.textColor\">{{menuItem.title}}</span> <!-- Bind textColor here -->\r\n </a>\r\n </ng-container>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n</div>" }]
14597
+ ], template: "<!-- Container row layout for displaying action items horizontally, aligned center vertically -->\r\n<div layout=\"row\" layout-align=\"start center\" *ngIf=\"items\" flex>\r\n <ng-container *ngFor=\"let menu of items\">\r\n\r\n <!-- #region Button trigger for actions that open a submenu -->\r\n <a\r\n mat-icon-button\r\n *ngIf=\"!contextMenu && menu?.items?.length && !(menu.hide && menu.hide(data, context, index))\"\r\n [mat-menu-trigger-for]=\"matMenu\"\r\n [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\"\r\n [matTooltip]=\"menu.tooltip\"\r\n (click)=\"$event.stopPropagation();\">\r\n <!-- Display menu icon -->\r\n <mat-icon\r\n fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\"\r\n [class]=\"menu.iconClass ?? '' | func:data:context\"\r\n [style.color]=\"menu.iconColor\">\r\n {{ (menu.icon ?? 'more_vert' | func:data:context) || 'more_vert' }}\r\n </mat-icon>\r\n\r\n <!-- Optional title next to icon -->\r\n <span [style.color]=\"menu.textColor\">{{menu.title | func:data:context}}</span>\r\n </a>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Invisible context menu trigger used for right-click context positioning -->\r\n <div\r\n *ngIf=\"contextMenu\"\r\n style=\"visibility: hidden; position: fixed\"\r\n [style.left]=\"contextMenuPosition.x\"\r\n [style.top]=\"contextMenuPosition.y\"\r\n [matMenuTriggerFor]=\"matMenu\"></div>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Direct action button (no submenu) -->\r\n <a\r\n mat-icon-button\r\n *ngIf=\"!menu?.items?.length && !(menu.hide && menu.hide(data, context, index))\"\r\n [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\"\r\n [matTooltip]=\"menu.tooltip\"\r\n (click)=\"$event.stopPropagation(); menu.event ? menu.event(data, context, index) : null\">\r\n <!-- Icon for the action -->\r\n <mat-icon\r\n fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\"\r\n [class]=\"menu.iconClass ?? '' | func:data:context\"\r\n [style.color]=\"menu.iconColor\">\r\n {{ (menu.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n </mat-icon>\r\n </a>\r\n <!-- #endregion -->\r\n\r\n <!-- #region MatMenu with nested submenus -->\r\n <mat-menu x-position=\"before\" #matMenu=\"matMenu\">\r\n <ng-container *ngFor=\"let menuItem of menu?.items\">\r\n <!-- Simple menu item without sub-items -->\r\n <ng-container *ngIf=\"!menuItem.items\">\r\n <a\r\n mat-menu-item\r\n (click)=\"menuItem.event ? menuItem.event(data, context, index) : null\"\r\n *ngIf=\"!menuItem.hide || !menuItem.hide(data, context, index)\"\r\n [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\"\r\n [matTooltip]=\"menuItem.tooltip\">\r\n <mat-icon\r\n fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n [class]=\"menuItem.iconClass ?? '' | func:data:context\"\r\n [style.color]=\"menuItem.iconColor\">\r\n {{ (menuItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n </mat-icon>\r\n <span [style.color]=\"menuItem.textColor\">{{menuItem.title | func:data:context}}</span>\r\n </a>\r\n </ng-container>\r\n\r\n <!-- Menu item with nested submenu -->\r\n <ng-container *ngIf=\"menuItem.items\">\r\n <!-- Define the submenu -->\r\n <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n <ng-container *ngFor=\"let menuSubItem of menuItem.items\">\r\n <a\r\n mat-menu-item\r\n (click)=\"menuSubItem.event ? menuSubItem.event(data, context, index) : null\"\r\n *ngIf=\"!menuSubItem.hide || !menuSubItem.hide(data, context, index)\"\r\n [disabled]=\"menuSubItem.disable && menuSubItem.disable(data, context, index)\"\r\n [matTooltip]=\"menuItem.tooltip\">\r\n <mat-icon\r\n fontSet=\"{{menuSubItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n [class]=\"menuSubItem.iconClass ?? '' | func:data:context\"\r\n [style.color]=\"menuSubItem.iconColor\">\r\n {{ (menuSubItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n </mat-icon>\r\n <span [style.color]=\"menuSubItem.textColor\">{{menuSubItem.title | func:data:context}}</span>\r\n </a>\r\n </ng-container>\r\n </mat-menu>\r\n\r\n <!-- Trigger for submenu -->\r\n <a\r\n mat-menu-item\r\n [matMenuTriggerFor]=\"subMenu\"\r\n *ngIf=\"!menuItem.hide || !menuItem.hide(data, context, index)\"\r\n [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\"\r\n [matTooltip]=\"menuItem.tooltip\">\r\n <mat-icon\r\n fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n [class]=\"menuItem.iconClass ?? '' | func:data:context\"\r\n [style.color]=\"menuItem.iconColor\">\r\n {{ (menuItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n </mat-icon>\r\n <span [style.color]=\"menuItem.textColor\">{{menuItem.title | func:data:context}}</span>\r\n </a>\r\n </ng-container>\r\n </ng-container>\r\n </mat-menu>\r\n <!-- #endregion -->\r\n </ng-container>\r\n</div>" }]
14586
14598
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { matMenu: [{
14587
14599
  type: ViewChild,
14588
14600
  args: [MatMenu]
@@ -17347,7 +17359,7 @@ class VdDynamicTableComponent {
17347
17359
  var actionColmun = this._columns?.find(x => x.name == 'action');
17348
17360
  /* If so, just add the menu items to it */
17349
17361
  if (actionColmun != null) {
17350
- actionColmun.menu ||= { icon: 'more_vert' };
17362
+ actionColmun.menu ||= { id: 'more', icon: 'more_vert' };
17351
17363
  this.rowMenuItems.forEach(y => actionColmun.menu.items?.unshift(y));
17352
17364
  }
17353
17365
  /* Otherwise add a new one */
@@ -17358,7 +17370,7 @@ class VdDynamicTableComponent {
17358
17370
  columnSets: ['action', 'common'],
17359
17371
  type: TableColumnType.Action,
17360
17372
  disabled: true,
17361
- menu: { icon: 'more_vert', items: this.rowMenuItems },
17373
+ menu: { id: 'more', icon: 'more_vert', items: this.rowMenuItems },
17362
17374
  configurable: false,
17363
17375
  stickyEnd: true
17364
17376
  }));
@@ -18351,6 +18363,7 @@ class GenericListComponent extends BaseComponent {
18351
18363
  * @type {ActionItem[]}
18352
18364
  */
18353
18365
  toolbarActions = [{
18366
+ id: 'refresh',
18354
18367
  icon: 'refresh',
18355
18368
  tooltip: $localize `:@@refreshList:Refresh the list`,
18356
18369
  event: () => this.loadList()
@@ -18860,6 +18873,7 @@ class GenericListComponent extends BaseComponent {
18860
18873
  /* Add 'Delete selected' menu item */
18861
18874
  if (this.deletable) {
18862
18875
  this.toolbarMenuItems.push({
18876
+ id: 'delete-selected',
18863
18877
  title: $localize `:@@deleteSelected:Delete selected`,
18864
18878
  icon: 'delete_forever',
18865
18879
  iconClass: 'tc-orange-800',
@@ -18871,6 +18885,7 @@ class GenericListComponent extends BaseComponent {
18871
18885
  /* Opens config dialog */
18872
18886
  if (this.configurable) {
18873
18887
  this.toolbarMenuItems.push({
18888
+ id: 'configure-table',
18874
18889
  title: $localize `:@@configureTable:Configure table`,
18875
18890
  icon: 'settings',
18876
18891
  event: () => this.openConfigDialog()
@@ -18879,6 +18894,7 @@ class GenericListComponent extends BaseComponent {
18879
18894
  /* Opens export dialog */
18880
18895
  if (this.exportable) {
18881
18896
  this.toolbarMenuItems.push({
18897
+ id: 'export-data',
18882
18898
  title: $localize `:@@exportData:Export data`,
18883
18899
  icon: 'download',
18884
18900
  iconClass: 'tc-blue-500',
@@ -18889,7 +18905,7 @@ class GenericListComponent extends BaseComponent {
18889
18905
  /* Sort the menu items by index */
18890
18906
  Utils.sortArray(this.toolbarMenuItems, 'index');
18891
18907
  /* Add the toolbar menu items to the the toolbar actions */
18892
- this.toolbarActions.push({ icon: 'more_vert', items: this.toolbarMenuItems });
18908
+ this.toolbarActions.push({ id: 'more', icon: 'more_vert', items: this.toolbarMenuItems });
18893
18909
  }
18894
18910
  }
18895
18911
  /**
@@ -18911,6 +18927,7 @@ class GenericListComponent extends BaseComponent {
18911
18927
  /* Add duplicate menu */
18912
18928
  if (this.duplicable) {
18913
18929
  this.rowMenuItems.unshift({
18930
+ id: 'duplicate',
18914
18931
  title: $localize `:@@duplicate:Duplicate`,
18915
18932
  icon: 'file_copy',
18916
18933
  event: (row) => this.duplicate(row),
@@ -18920,6 +18937,7 @@ class GenericListComponent extends BaseComponent {
18920
18937
  /* Add download menu */
18921
18938
  if (this.downloadable) {
18922
18939
  this.rowMenuItems.unshift({
18940
+ id: 'download',
18923
18941
  title: $localize `:@@download:Download`,
18924
18942
  icon: 'file_download',
18925
18943
  event: (row) => this.download(row),
@@ -18929,6 +18947,7 @@ class GenericListComponent extends BaseComponent {
18929
18947
  /* Add delete menu */
18930
18948
  if (this.deletable && this.canDelete) {
18931
18949
  this.rowMenuItems.unshift({
18950
+ id: 'delete',
18932
18951
  title: $localize `:@@delete:Delete`,
18933
18952
  icon: 'delete_forever',
18934
18953
  iconClass: 'tc-orange-800',
@@ -18939,6 +18958,7 @@ class GenericListComponent extends BaseComponent {
18939
18958
  /* Add edit menu */
18940
18959
  if (this.editable && this.canUpdate) {
18941
18960
  this.rowMenuItems.unshift({
18961
+ id: 'edit',
18942
18962
  title: $localize `:@@edit:Edit`,
18943
18963
  icon: 'edit_note',
18944
18964
  iconClass: 'tc-blue-400',
@@ -19172,14 +19192,16 @@ class GenericEmbeddedListComponent extends GenericListComponent {
19172
19192
  * Menu options for managing a list of items, including delete and more options.
19173
19193
  */
19174
19194
  itemListMenu = [
19195
+ /* Option to remove the selected item from the list */
19175
19196
  {
19176
- /* Option to remove the selected item from the list */
19197
+ id: 'delete',
19177
19198
  icon: 'delete_forever',
19178
19199
  event: (_, __, i) => this.removeItem(i),
19179
19200
  hide: (item) => (item?.id ?? 0) > 0
19180
19201
  },
19202
+ /* Action to show additional options for the item */
19181
19203
  {
19182
- /* Action to show additional options for the item */
19204
+ id: 'more',
19183
19205
  icon: 'more_vert',
19184
19206
  hide: (item) => (item?.id ?? 0) <= 0,
19185
19207
  items: this.rowMenuItems
@@ -19649,6 +19671,7 @@ class GenericFormBaseComponent extends BaseComponent {
19649
19671
  * Toolbar action buttons.
19650
19672
  */
19651
19673
  toolbarActions = [{
19674
+ id: 'refresh',
19652
19675
  icon: 'refresh',
19653
19676
  tooltip: $localize `:@@refreshPage:Refresh the page`,
19654
19677
  event: () => this.reloadPage(),
@@ -20069,6 +20092,7 @@ class GenericFormBaseComponent extends BaseComponent {
20069
20092
  /* Add 'Delete' menu item */
20070
20093
  if (this.deletable) {
20071
20094
  this.toolbarMenuItems.push({
20095
+ id: 'delete',
20072
20096
  title: $localize `:@@delete:Delete`,
20073
20097
  icon: 'delete_forever',
20074
20098
  iconClass: 'tc-orange-800',
@@ -20082,7 +20106,7 @@ class GenericFormBaseComponent extends BaseComponent {
20082
20106
  /* Sort the menu items by index */
20083
20107
  Utils.sortArray(this.toolbarMenuItems, 'index');
20084
20108
  /* Add the toolbar menu items to the the toolbar actions */
20085
- this.toolbarActions.push({ icon: 'more_vert', items: this.toolbarMenuItems });
20109
+ this.toolbarActions.push({ id: 'more', icon: 'more_vert', items: this.toolbarMenuItems });
20086
20110
  }
20087
20111
  }
20088
20112
  /**