@tekus/design-system 5.27.0 → 5.29.0

package/fesm2022/tekus-design-system-components-menu.mjs

@@ -115,6 +115,7 @@ class MenuComponent {
                 item.command({ originalEvent: event, item });
             }
             this.itemClick.emit({ event, item });
+            event.stopPropagation();
         }
     }
     /**
@@ -136,11 +137,11 @@ class MenuComponent {
         this.pMenu()?.toggle(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: MenuComponent, isStandalone: true, selector: "tk-menu", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, popup: { classPropertyName: "popup", publicName: "popup", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "pMenu", first: true, predicate: ["pMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-menu\n  #pMenu\n  [model]=\"visibleModel()\"\n  [popup]=\"popup()\"\n  [appendTo]=\"appendTo()\"\n  [styleClass]=\"'tk-menu ' + variant() + ' ' + styleClass()\"\n>\n  <!-- Group Header template -->\n  <ng-template pTemplate=\"submenuheader\" let-item>\n    <div class=\"tk-menu-submenu-header\">\n      {{ item.label }}\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"item\" let-item>\n    <a (click)=\"handleItemClick($event, item)\"\n       (keydown.enter)=\"handleItemClick($event, item)\"\n       tabindex=\"0\"\n       class=\"tk-menu-item-link\"\n       [ngClass]=\"item.styleClass || ''\"\n       [class.tk-menu-item-selected]=\"isSelected(item)\"\n       [attr.target]=\"item.target\"\n       [attr.title]=\"item.title\">\n      <div class=\"tk-menu-item-content\">\n        @if (item.icon) {\n          <tk-icon [icon]=\"item.icon\" class=\"tk-menu-item-icon\"></tk-icon>\n        }\n        <span class=\"tk-menu-item-label\">{{ item.label }}</span>\n      </div>\n      \n      @if (item.items) {\n        @if (isExpanded(item)) {\n          <tk-icon icon=\"chevron-up\" class=\"tk-menu-item-chevron\"></tk-icon>\n        } @else {\n          <tk-icon icon=\"chevron-down\" class=\"tk-menu-item-chevron\"></tk-icon>\n        }\n      }\n    </a>\n  </ng-template>\n\n</p-menu>\n\n", styles: [":host{display:block}:host ::ng-deep .tk-menu{border:none;padding:var(--tk-spacing-base-50, .5rem);width:100%;background:transparent}:host ::ng-deep .tk-menu .p-menu-list{padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-menu .p-menuitem-content{background:transparent;border-radius:var(--tk-borderRadius-s, .5rem);color:inherit;overflow:hidden}:host ::ng-deep .tk-menu .p-menuitem-content,:host ::ng-deep .tk-menu .p-menuitem-content:hover,:host ::ng-deep .tk-menu .p-menuitem-content:focus,:host ::ng-deep .tk-menu .p-menuitem-content:focus-within,:host ::ng-deep .tk-menu .p-menuitem-content:focus-visible,:host ::ng-deep .tk-menu .p-menuitem-content.p-highlight,:host ::ng-deep .tk-menu .p-menuitem-content.p-focus,:host ::ng-deep .tk-menu .p-menuitem-content.p-menuitem-link-active{background:transparent;outline:none;box-shadow:none}:host ::ng-deep .tk-menu.default .p-menuitem-link,:host ::ng-deep .tk-menu.default .tk-menu-item-link{border-radius:var(--tk-borderRadius-s, .5rem);outline:none}:host ::ng-deep .tk-menu.default .p-menuitem-link .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link .tk-menu-item-chevron{color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected{background-color:var(--tk-color-base-surface-100, #f2f1f1)}:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-chevron{color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus{background-color:transparent}:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron{color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .tk-menu.default .p-menu-separator{border-top:.0625rem solid var(--tk-color-base-surface-100, #f2f1f1)}:host ::ng-deep .tk-menu.inverse{background:var(--tk-color-base-surface-950, #191a1b);color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menuitem-content{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .tk-menu-submenu-header{color:var(--tk-color-base-surface-0, #ffffff);background:transparent}:host ::ng-deep .tk-menu.inverse .p-menuitem-link,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link{color:var(--tk-color-base-surface-0, #ffffff);background:transparent;border-radius:var(--tk-borderRadius-s, .5rem);outline:none}:host ::ng-deep .tk-menu.inverse .p-menuitem-link .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .tk-menu-item-chevron{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected{background-color:var(--tk-color-base-surface-700, #424243)}:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-chevron{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus{background-color:transparent}:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menu-separator{border-top:.0625rem solid var(--tk-color-base-surface-800, #303031)}:host ::ng-deep .tk-menu .tk-menu-submenu-header{font-weight:600;padding:var(--tk-spacing-base-100, 1rem) var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem);font-size:var(--tk-font-size-base-113, 1.125rem);line-height:normal}:host ::ng-deep .tk-menu .p-menuitem{outline:none}:host ::ng-deep .tk-menu .tk-menu-item-link{display:flex;align-items:center;justify-content:space-between;padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem);text-decoration:none;transition:background-color .2s;cursor:pointer;outline:none;border:none}:host ::ng-deep .tk-menu .tk-menu-item-link .tk-menu-item-content{display:flex;align-items:center;gap:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-menu .tk-menu-item-link .tk-menu-item-icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem}:host ::ng-deep .tk-menu .tk-menu-item-link .tk-menu-item-chevron{display:flex;align-items:center;font-size:.75rem}:host ::ng-deep .tk-menu .tk-menu-item-link.tk-submenu-item{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-menu .tk-menu-item-link.tk-submenu-item .tk-menu-item-label{font-size:var(--tk-font-size-base-100, 1rem)}:host ::ng-deep .tk-menu .p-menu-separator{margin:var(--tk-spacing-base-75, .75rem) 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i2.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: MenuComponent, isStandalone: true, selector: "tk-menu", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, popup: { classPropertyName: "popup", publicName: "popup", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "pMenu", first: true, predicate: ["pMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-menu\n  #pMenu\n  [model]=\"visibleModel()\"\n  [popup]=\"popup()\"\n  [appendTo]=\"appendTo()\"\n  [styleClass]=\"'tk-menu ' + variant() + ' ' + styleClass()\"\n>\n  <!-- Group Header template -->\n  <ng-template pTemplate=\"submenuheader\" let-item>\n    <div class=\"tk-menu-submenu-header\">\n      {{ item.label }}\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"item\" let-item>\n    <a (click)=\"handleItemClick($event, item)\"\n       (keydown.enter)=\"handleItemClick($event, item)\"\n       tabindex=\"0\"\n       class=\"tk-menu-item-link\"\n       [ngClass]=\"item.styleClass || ''\"\n       [class.tk-menu-item-selected]=\"isSelected(item)\"\n       [attr.target]=\"item.target\"\n       [attr.title]=\"item.title\">\n      <div class=\"tk-menu-item-content\">\n        @if (item.icon) {\n          <tk-icon [icon]=\"item.icon\" class=\"tk-menu-item-icon\"></tk-icon>\n        }\n        <span class=\"tk-menu-item-label\">{{ item.label }}</span>\n      </div>\n      \n      @if (item.items) {\n        @if (isExpanded(item)) {\n          <tk-icon icon=\"chevron-up\" class=\"tk-menu-item-chevron\"></tk-icon>\n        } @else {\n          <tk-icon icon=\"chevron-down\" class=\"tk-menu-item-chevron\"></tk-icon>\n        }\n      }\n    </a>\n  </ng-template>\n\n</p-menu>\n\n", styles: [":host{display:block}:host ::ng-deep .tk-menu{border:none;padding:var(--tk-spacing-base-50, .5rem);width:100%;background:transparent}:host ::ng-deep .tk-menu .p-menu-list{padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--tk-spacing-padding-none, 0rem)}:host ::ng-deep .tk-menu .p-menuitem-content{background:transparent;border-radius:var(--tk-borderRadius-s, .5rem);color:inherit;overflow:hidden}:host ::ng-deep .tk-menu .p-menuitem-content,:host ::ng-deep .tk-menu .p-menuitem-content:hover,:host ::ng-deep .tk-menu .p-menuitem-content:focus,:host ::ng-deep .tk-menu .p-menuitem-content:focus-within,:host ::ng-deep .tk-menu .p-menuitem-content:focus-visible,:host ::ng-deep .tk-menu .p-menuitem-content.p-highlight,:host ::ng-deep .tk-menu .p-menuitem-content.p-focus,:host ::ng-deep .tk-menu .p-menuitem-content.p-menuitem-link-active{background:transparent;outline:none;box-shadow:none}:host ::ng-deep .tk-menu.default .p-menuitem-link,:host ::ng-deep .tk-menu.default .tk-menu-item-link{border-radius:var(--tk-borderRadius-s, .5rem);outline:none}:host ::ng-deep .tk-menu.default .p-menuitem-link .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link .tk-menu-item-chevron{color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected{background-color:var(--tk-color-base-surface-100, #f2f1f1)}:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-chevron{color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus{background-color:transparent}:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron{color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .tk-menu.default .p-menu-separator{border-top:.0625rem solid var(--tk-color-base-surface-100, #f2f1f1)}:host ::ng-deep .tk-menu.inverse{background:var(--tk-color-base-surface-950, #191a1b);color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menuitem-content{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .tk-menu-submenu-header{color:var(--tk-color-base-surface-0, #ffffff);background:transparent}:host ::ng-deep .tk-menu.inverse .p-menuitem-link,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link{color:var(--tk-color-base-surface-0, #ffffff);background:transparent;border-radius:var(--tk-borderRadius-s, .5rem);outline:none}:host ::ng-deep .tk-menu.inverse .p-menuitem-link .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .tk-menu-item-chevron{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected{background-color:var(--tk-color-base-surface-700, #424243)}:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-chevron{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus{background-color:transparent}:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menu-separator{border-top:.0625rem solid var(--tk-color-base-surface-800, #303031)}:host ::ng-deep .tk-menu .tk-menu-submenu-header{font-weight:600;padding:var(--tk-spacing-base-100, 1rem) var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem);font-size:var(--tk-font-size-base-113, 1.125rem);line-height:normal}:host ::ng-deep .tk-menu .p-menuitem{outline:none}:host ::ng-deep .tk-menu .tk-menu-item-link{display:flex;align-items:center;justify-content:space-between;padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem);text-decoration:none;transition:background-color .2s;cursor:pointer;outline:none;border:none}:host ::ng-deep .tk-menu .tk-menu-item-link .tk-menu-item-content{display:flex;align-items:center;gap:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-menu .tk-menu-item-link .tk-menu-item-icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem}:host ::ng-deep .tk-menu .tk-menu-item-link .tk-menu-item-chevron{display:flex;align-items:center;font-size:.75rem}:host ::ng-deep .tk-menu .tk-menu-item-link.tk-submenu-item{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-menu .tk-menu-item-link.tk-submenu-item .tk-menu-item-label{font-size:var(--tk-font-size-base-100, 1rem)}:host ::ng-deep .tk-menu .p-menu-separator{margin:var(--tk-spacing-base-75, .75rem) 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i2.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-menu', standalone: true, imports: [CommonModule, MenuModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-menu\n  #pMenu\n  [model]=\"visibleModel()\"\n  [popup]=\"popup()\"\n  [appendTo]=\"appendTo()\"\n  [styleClass]=\"'tk-menu ' + variant() + ' ' + styleClass()\"\n>\n  <!-- Group Header template -->\n  <ng-template pTemplate=\"submenuheader\" let-item>\n    <div class=\"tk-menu-submenu-header\">\n      {{ item.label }}\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"item\" let-item>\n    <a (click)=\"handleItemClick($event, item)\"\n       (keydown.enter)=\"handleItemClick($event, item)\"\n       tabindex=\"0\"\n       class=\"tk-menu-item-link\"\n       [ngClass]=\"item.styleClass || ''\"\n       [class.tk-menu-item-selected]=\"isSelected(item)\"\n       [attr.target]=\"item.target\"\n       [attr.title]=\"item.title\">\n      <div class=\"tk-menu-item-content\">\n        @if (item.icon) {\n          <tk-icon [icon]=\"item.icon\" class=\"tk-menu-item-icon\"></tk-icon>\n        }\n        <span class=\"tk-menu-item-label\">{{ item.label }}</span>\n      </div>\n      \n      @if (item.items) {\n        @if (isExpanded(item)) {\n          <tk-icon icon=\"chevron-up\" class=\"tk-menu-item-chevron\"></tk-icon>\n        } @else {\n          <tk-icon icon=\"chevron-down\" class=\"tk-menu-item-chevron\"></tk-icon>\n        }\n      }\n    </a>\n  </ng-template>\n\n</p-menu>\n\n", styles: [":host{display:block}:host ::ng-deep .tk-menu{border:none;padding:var(--tk-spacing-base-50, .5rem);width:100%;background:transparent}:host ::ng-deep .tk-menu .p-menu-list{padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-menu .p-menuitem-content{background:transparent;border-radius:var(--tk-borderRadius-s, .5rem);color:inherit;overflow:hidden}:host ::ng-deep .tk-menu .p-menuitem-content,:host ::ng-deep .tk-menu .p-menuitem-content:hover,:host ::ng-deep .tk-menu .p-menuitem-content:focus,:host ::ng-deep .tk-menu .p-menuitem-content:focus-within,:host ::ng-deep .tk-menu .p-menuitem-content:focus-visible,:host ::ng-deep .tk-menu .p-menuitem-content.p-highlight,:host ::ng-deep .tk-menu .p-menuitem-content.p-focus,:host ::ng-deep .tk-menu .p-menuitem-content.p-menuitem-link-active{background:transparent;outline:none;box-shadow:none}:host ::ng-deep .tk-menu.default .p-menuitem-link,:host ::ng-deep .tk-menu.default .tk-menu-item-link{border-radius:var(--tk-borderRadius-s, .5rem);outline:none}:host ::ng-deep .tk-menu.default .p-menuitem-link .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link .tk-menu-item-chevron{color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected{background-color:var(--tk-color-base-surface-100, #f2f1f1)}:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-chevron{color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus{background-color:transparent}:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron{color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .tk-menu.default .p-menu-separator{border-top:.0625rem solid var(--tk-color-base-surface-100, #f2f1f1)}:host ::ng-deep .tk-menu.inverse{background:var(--tk-color-base-surface-950, #191a1b);color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menuitem-content{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .tk-menu-submenu-header{color:var(--tk-color-base-surface-0, #ffffff);background:transparent}:host ::ng-deep .tk-menu.inverse .p-menuitem-link,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link{color:var(--tk-color-base-surface-0, #ffffff);background:transparent;border-radius:var(--tk-borderRadius-s, .5rem);outline:none}:host ::ng-deep .tk-menu.inverse .p-menuitem-link .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .tk-menu-item-chevron{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected{background-color:var(--tk-color-base-surface-700, #424243)}:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-chevron{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus{background-color:transparent}:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menu-separator{border-top:.0625rem solid var(--tk-color-base-surface-800, #303031)}:host ::ng-deep .tk-menu .tk-menu-submenu-header{font-weight:600;padding:var(--tk-spacing-base-100, 1rem) var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem);font-size:var(--tk-font-size-base-113, 1.125rem);line-height:normal}:host ::ng-deep .tk-menu .p-menuitem{outline:none}:host ::ng-deep .tk-menu .tk-menu-item-link{display:flex;align-items:center;justify-content:space-between;padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem);text-decoration:none;transition:background-color .2s;cursor:pointer;outline:none;border:none}:host ::ng-deep .tk-menu .tk-menu-item-link .tk-menu-item-content{display:flex;align-items:center;gap:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-menu .tk-menu-item-link .tk-menu-item-icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem}:host ::ng-deep .tk-menu .tk-menu-item-link .tk-menu-item-chevron{display:flex;align-items:center;font-size:.75rem}:host ::ng-deep .tk-menu .tk-menu-item-link.tk-submenu-item{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-menu .tk-menu-item-link.tk-submenu-item .tk-menu-item-label{font-size:var(--tk-font-size-base-100, 1rem)}:host ::ng-deep .tk-menu .p-menu-separator{margin:var(--tk-spacing-base-75, .75rem) 0}\n"] }]
+            args: [{ selector: 'tk-menu', standalone: true, imports: [CommonModule, MenuModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-menu\n  #pMenu\n  [model]=\"visibleModel()\"\n  [popup]=\"popup()\"\n  [appendTo]=\"appendTo()\"\n  [styleClass]=\"'tk-menu ' + variant() + ' ' + styleClass()\"\n>\n  <!-- Group Header template -->\n  <ng-template pTemplate=\"submenuheader\" let-item>\n    <div class=\"tk-menu-submenu-header\">\n      {{ item.label }}\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"item\" let-item>\n    <a (click)=\"handleItemClick($event, item)\"\n       (keydown.enter)=\"handleItemClick($event, item)\"\n       tabindex=\"0\"\n       class=\"tk-menu-item-link\"\n       [ngClass]=\"item.styleClass || ''\"\n       [class.tk-menu-item-selected]=\"isSelected(item)\"\n       [attr.target]=\"item.target\"\n       [attr.title]=\"item.title\">\n      <div class=\"tk-menu-item-content\">\n        @if (item.icon) {\n          <tk-icon [icon]=\"item.icon\" class=\"tk-menu-item-icon\"></tk-icon>\n        }\n        <span class=\"tk-menu-item-label\">{{ item.label }}</span>\n      </div>\n      \n      @if (item.items) {\n        @if (isExpanded(item)) {\n          <tk-icon icon=\"chevron-up\" class=\"tk-menu-item-chevron\"></tk-icon>\n        } @else {\n          <tk-icon icon=\"chevron-down\" class=\"tk-menu-item-chevron\"></tk-icon>\n        }\n      }\n    </a>\n  </ng-template>\n\n</p-menu>\n\n", styles: [":host{display:block}:host ::ng-deep .tk-menu{border:none;padding:var(--tk-spacing-base-50, .5rem);width:100%;background:transparent}:host ::ng-deep .tk-menu .p-menu-list{padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--tk-spacing-padding-none, 0rem)}:host ::ng-deep .tk-menu .p-menuitem-content{background:transparent;border-radius:var(--tk-borderRadius-s, .5rem);color:inherit;overflow:hidden}:host ::ng-deep .tk-menu .p-menuitem-content,:host ::ng-deep .tk-menu .p-menuitem-content:hover,:host ::ng-deep .tk-menu .p-menuitem-content:focus,:host ::ng-deep .tk-menu .p-menuitem-content:focus-within,:host ::ng-deep .tk-menu .p-menuitem-content:focus-visible,:host ::ng-deep .tk-menu .p-menuitem-content.p-highlight,:host ::ng-deep .tk-menu .p-menuitem-content.p-focus,:host ::ng-deep .tk-menu .p-menuitem-content.p-menuitem-link-active{background:transparent;outline:none;box-shadow:none}:host ::ng-deep .tk-menu.default .p-menuitem-link,:host ::ng-deep .tk-menu.default .tk-menu-item-link{border-radius:var(--tk-borderRadius-s, .5rem);outline:none}:host ::ng-deep .tk-menu.default .p-menuitem-link .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link .tk-menu-item-chevron{color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected{background-color:var(--tk-color-base-surface-100, #f2f1f1)}:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.tk-menu-item-selected .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-chevron{color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus{background-color:transparent}:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.default .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron{color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .tk-menu.default .p-menu-separator{border-top:.0625rem solid var(--tk-color-base-surface-100, #f2f1f1)}:host ::ng-deep .tk-menu.inverse{background:var(--tk-color-base-surface-950, #191a1b);color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menuitem-content{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .tk-menu-submenu-header{color:var(--tk-color-base-surface-0, #ffffff);background:transparent}:host ::ng-deep .tk-menu.inverse .p-menuitem-link,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link{color:var(--tk-color-base-surface-0, #ffffff);background:transparent;border-radius:var(--tk-borderRadius-s, .5rem);outline:none}:host ::ng-deep .tk-menu.inverse .p-menuitem-link .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link .tk-menu-item-chevron{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected{background-color:var(--tk-color-base-surface-700, #424243)}:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.tk-menu-item-selected .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link:not(.p-disabled):hover .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-menuitem-link-active .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.tk-menu-item-selected .tk-menu-item-chevron{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus{background-color:transparent}:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .p-menuitem-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-highlight:not(.tk-menu-item-selected) .tk-menu-item-chevron,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .p-menuitem-text,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-label,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-icon,:host ::ng-deep .tk-menu.inverse .tk-menu-item-link.p-focus:not(.tk-menu-item-selected) .tk-menu-item-chevron{color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .tk-menu.inverse .p-menu-separator{border-top:.0625rem solid var(--tk-color-base-surface-800, #303031)}:host ::ng-deep .tk-menu .tk-menu-submenu-header{font-weight:600;padding:var(--tk-spacing-base-100, 1rem) var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem);font-size:var(--tk-font-size-base-113, 1.125rem);line-height:normal}:host ::ng-deep .tk-menu .p-menuitem{outline:none}:host ::ng-deep .tk-menu .tk-menu-item-link{display:flex;align-items:center;justify-content:space-between;padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem);text-decoration:none;transition:background-color .2s;cursor:pointer;outline:none;border:none}:host ::ng-deep .tk-menu .tk-menu-item-link .tk-menu-item-content{display:flex;align-items:center;gap:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-menu .tk-menu-item-link .tk-menu-item-icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem}:host ::ng-deep .tk-menu .tk-menu-item-link .tk-menu-item-chevron{display:flex;align-items:center;font-size:.75rem}:host ::ng-deep .tk-menu .tk-menu-item-link.tk-submenu-item{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-menu .tk-menu-item-link.tk-submenu-item .tk-menu-item-label{font-size:var(--tk-font-size-base-100, 1rem)}:host ::ng-deep .tk-menu .p-menu-separator{margin:var(--tk-spacing-base-75, .75rem) 0}\n"] }]
         }], propDecorators: { pMenu: [{ type: i0.ViewChild, args: ['pMenu', { isSignal: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], popup: [{ type: i0.Input, args: [{ isSignal: true, alias: "popup", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 /**

package/fesm2022/tekus-design-system-components-menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-menu.mjs","sources":["../../../projects/design-system/components/menu/src/menu.component.ts","../../../projects/design-system/components/menu/src/menu.component.html","../../../projects/design-system/components/menu/tekus-design-system-components-menu.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, viewChild, input, output, signal, computed } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MenuModule, Menu } from 'primeng/menu';\nimport { MenuItem } from 'primeng/api';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n@Component({\n  selector: 'tk-menu',\n  standalone: true,\n  imports: [CommonModule, MenuModule, IconComponent],\n  templateUrl: './menu.component.html',\n  styleUrl: './menu.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MenuComponent {\n  /**\n   * Reference to the PrimeNG Menu component instance.\n   */\n  pMenu = viewChild<Menu>('pMenu');\n\n  /**\n   * An array of menu items to display.\n   */\n  model = input<MenuItem[]>([]);\n\n  /**\n   * Whether the menu is a popup.\n   */\n  popup = input<boolean>(false);\n\n  /**\n   * Target element to attach the overlay.\n   */\n  appendTo = input<string | HTMLElement>();\n\n  /**\n   * The visual variant of the menu.\n   * 'default' (light background) or 'inverse' (dark background).\n   */\n  variant = input<'default' | 'inverse'>('default');\n\n  /**\n   * Additional style class for the menu.\n   */\n  styleClass = input<string>('');\n\n  /**\n   * Event emitted when a menu item is clicked.\n   */\n  itemClick = output<{ event: Event; item: MenuItem }>();\n\n  /**\n   * Set of expanded item labels or IDs.\n   */\n  expandedItems = signal<Set<string>>(new Set());\n\n  /**\n   * Currently selected item ID or label.\n   */\n  selectedId = signal<string | null>(null);\n\n  /**\n   * Computed visible model for PrimeNG menu.\n   * It flattens the input model to support interactive sub-menus in a flat list.\n   */\n  visibleModel = computed(() => {\n    const rawModel = this.model();\n    const expanded = this.expandedItems();\n    const result: MenuItem[] = [];\n\n    rawModel.forEach(group => {\n      if (group.label && group.items && !group.icon) {\n        // It's a group header\n        const processedItems: MenuItem[] = [];\n        group.items.forEach(item => {\n          processedItems.push(item);\n          const key = item.id || item.label || '';\n          if (item.items && expanded.has(key)) {\n            item.items.forEach(subItem => {\n              processedItems.push({\n                ...subItem,\n                styleClass: (subItem.styleClass || '') + ' tk-submenu-item'\n              });\n            });\n          }\n        });\n        result.push({ ...group, items: processedItems });\n      } else {\n        // It's a top-level item\n        result.push(group);\n        const key = group.id || group.label || '';\n        if (group.items && expanded.has(key)) {\n          group.items.forEach(subItem => {\n            result.push({\n              ...subItem,\n              styleClass: (subItem.styleClass || '') + ' tk-submenu-item'\n            });\n          });\n        }\n      }\n    });\n\n    return result;\n  });\n\n  /**\n   * Handles the click event on a menu item.\n   */\n  handleItemClick(event: Event, item: MenuItem) {\n    if (item.items) {\n      // Toggle expansion\n      const key = item.id || item.label || '';\n      const newExpanded = new Set(this.expandedItems());\n      \n      if (newExpanded.has(key)) {\n        newExpanded.delete(key);\n      } else {\n        newExpanded.add(key);\n      }\n\n      this.expandedItems.set(newExpanded);\n      \n      // Prevent default command if it's just a toggle\n      event.preventDefault();\n      event.stopPropagation();\n    } else {\n      const key = item.id || item.label || '';\n      this.selectedId.set(key);\n      \n      if (item.command) {\n        item.command({ originalEvent: event, item });\n      }\n      this.itemClick.emit({ event, item });\n    }\n  }\n\n  /**\n   * Checks if an item is currently selected.\n   */\n  isSelected(item: MenuItem): boolean {\n    return this.selectedId() === (item.id || item.label || '');\n  }\n\n\n  /**\n   * Checks if an item is currently expanded.\n   */\n  isExpanded(item: MenuItem): boolean {\n    return this.expandedItems().has(item.id || item.label || '');\n  }\n\n  /**\n   * Toggles the menu visibility for popup mode.\n   */\n  toggle(event: Event) {\n    this.pMenu()?.toggle(event);\n  }\n}\n\n\n","<p-menu\n  #pMenu\n  [model]=\"visibleModel()\"\n  [popup]=\"popup()\"\n  [appendTo]=\"appendTo()\"\n  [styleClass]=\"'tk-menu ' + variant() + ' ' + styleClass()\"\n>\n  <!-- Group Header template -->\n  <ng-template pTemplate=\"submenuheader\" let-item>\n    <div class=\"tk-menu-submenu-header\">\n      {{ item.label }}\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"item\" let-item>\n    <a (click)=\"handleItemClick($event, item)\"\n       (keydown.enter)=\"handleItemClick($event, item)\"\n       tabindex=\"0\"\n       class=\"tk-menu-item-link\"\n       [ngClass]=\"item.styleClass || ''\"\n       [class.tk-menu-item-selected]=\"isSelected(item)\"\n       [attr.target]=\"item.target\"\n       [attr.title]=\"item.title\">\n      <div class=\"tk-menu-item-content\">\n        @if (item.icon) {\n          <tk-icon [icon]=\"item.icon\" class=\"tk-menu-item-icon\"></tk-icon>\n        }\n        <span class=\"tk-menu-item-label\">{{ item.label }}</span>\n      </div>\n      \n      @if (item.items) {\n        @if (isExpanded(item)) {\n          <tk-icon icon=\"chevron-up\" class=\"tk-menu-item-chevron\"></tk-icon>\n        } @else {\n          <tk-icon icon=\"chevron-down\" class=\"tk-menu-item-chevron\"></tk-icon>\n        }\n      }\n    </a>\n  </ng-template>\n\n</p-menu>\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;MAca,aAAa,CAAA;AAR1B,IAAA,WAAA,GAAA;AASE;;AAEG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,SAAS,CAAO,OAAO,4EAAC;AAEhC;;AAEG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAa,EAAE,4EAAC;AAE7B;;AAEG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAU,KAAK,4EAAC;AAE7B;;AAEG;QACH,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAwB;AAExC;;;AAGG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAwB,SAAS,8EAAC;AAEjD;;AAEG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,EAAE,iFAAC;AAE9B;;AAEG;QACH,IAAA,CAAA,SAAS,GAAG,MAAM,EAAoC;AAEtD;;AAEG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAc,IAAI,GAAG,EAAE,oFAAC;AAE9C;;AAEG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAgB,IAAI,iFAAC;AAExC;;;AAGG;AACH,QAAA,IAAA,CAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AAC3B,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE;AAC7B,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE;YACrC,MAAM,MAAM,GAAe,EAAE;AAE7B,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,IAAG;AACvB,gBAAA,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;;oBAE7C,MAAM,cAAc,GAAe,EAAE;AACrC,oBAAA,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;AACzB,wBAAA,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;wBACzB,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE;wBACvC,IAAI,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;AACnC,4BAAA,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,IAAG;gCAC3B,cAAc,CAAC,IAAI,CAAC;AAClB,oCAAA,GAAG,OAAO;oCACV,UAAU,EAAE,CAAC,OAAO,CAAC,UAAU,IAAI,EAAE,IAAI;AAC1C,iCAAA,CAAC;AACJ,4BAAA,CAAC,CAAC;wBACJ;AACF,oBAAA,CAAC,CAAC;AACF,oBAAA,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC;gBAClD;qBAAO;;AAEL,oBAAA,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;oBAClB,MAAM,GAAG,GAAG,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,KAAK,IAAI,EAAE;oBACzC,IAAI,KAAK,CAAC,KAAK,IAAI,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;AACpC,wBAAA,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,IAAG;4BAC5B,MAAM,CAAC,IAAI,CAAC;AACV,gCAAA,GAAG,OAAO;gCACV,UAAU,EAAE,CAAC,OAAO,CAAC,UAAU,IAAI,EAAE,IAAI;AAC1C,6BAAA,CAAC;AACJ,wBAAA,CAAC,CAAC;oBACJ;gBACF;AACF,YAAA,CAAC,CAAC;AAEF,YAAA,OAAO,MAAM;AACf,QAAA,CAAC,mFAAC;AAsDH,IAAA;AApDC;;AAEG;IACH,eAAe,CAAC,KAAY,EAAE,IAAc,EAAA;AAC1C,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;;YAEd,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE;YACvC,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;AAEjD,YAAA,IAAI,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;AACxB,gBAAA,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC;YACzB;iBAAO;AACL,gBAAA,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC;YACtB;AAEA,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,WAAW,CAAC;;YAGnC,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;QACzB;aAAO;YACL,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE;AACvC,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC;AAExB,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,OAAO,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;YAC9C;YACA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QACtC;IACF;AAEA;;AAEG;AACH,IAAA,UAAU,CAAC,IAAc,EAAA;AACvB,QAAA,OAAO,IAAI,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;IAC5D;AAGA;;AAEG;AACH,IAAA,UAAU,CAAC,IAAc,EAAA;AACvB,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;IAC9D;AAEA;;AAEG;AACH,IAAA,MAAM,CAAC,KAAY,EAAA;QACjB,IAAI,CAAC,KAAK,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC;IAC7B;8GA9IW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,01BCd1B,4xCA0CA,EAAA,MAAA,EAAA,CAAA,0vbAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDjCY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,UAAU,mcAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAKtC,aAAa,EAAA,UAAA,EAAA,CAAA;kBARzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,EAAA,UAAA,EACP,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,UAAU,EAAE,aAAa,CAAC,EAAA,eAAA,EAGjC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,4xCAAA,EAAA,MAAA,EAAA,CAAA,0vbAAA,CAAA,EAAA;mEAMvB,OAAO,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AElBjC;;AAEG;;;;"}
+{"version":3,"file":"tekus-design-system-components-menu.mjs","sources":["../../../projects/design-system/components/menu/src/menu.component.ts","../../../projects/design-system/components/menu/src/menu.component.html","../../../projects/design-system/components/menu/tekus-design-system-components-menu.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, viewChild, input, output, signal, computed } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MenuModule, Menu } from 'primeng/menu';\nimport { MenuItem } from 'primeng/api';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n@Component({\n  selector: 'tk-menu',\n  standalone: true,\n  imports: [CommonModule, MenuModule, IconComponent],\n  templateUrl: './menu.component.html',\n  styleUrl: './menu.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MenuComponent {\n  /**\n   * Reference to the PrimeNG Menu component instance.\n   */\n  pMenu = viewChild<Menu>('pMenu');\n\n  /**\n   * An array of menu items to display.\n   */\n  model = input<MenuItem[]>([]);\n\n  /**\n   * Whether the menu is a popup.\n   */\n  popup = input<boolean>(false);\n\n  /**\n   * Target element to attach the overlay.\n   */\n  appendTo = input<string | HTMLElement>();\n\n  /**\n   * The visual variant of the menu.\n   * 'default' (light background) or 'inverse' (dark background).\n   */\n  variant = input<'default' | 'inverse'>('default');\n\n  /**\n   * Additional style class for the menu.\n   */\n  styleClass = input<string>('');\n\n  /**\n   * Event emitted when a menu item is clicked.\n   */\n  itemClick = output<{ event: Event; item: MenuItem }>();\n\n  /**\n   * Set of expanded item labels or IDs.\n   */\n  expandedItems = signal<Set<string>>(new Set());\n\n  /**\n   * Currently selected item ID or label.\n   */\n  selectedId = signal<string | null>(null);\n\n  /**\n   * Computed visible model for PrimeNG menu.\n   * It flattens the input model to support interactive sub-menus in a flat list.\n   */\n  visibleModel = computed(() => {\n    const rawModel = this.model();\n    const expanded = this.expandedItems();\n    const result: MenuItem[] = [];\n\n    rawModel.forEach(group => {\n      if (group.label && group.items && !group.icon) {\n        // It's a group header\n        const processedItems: MenuItem[] = [];\n        group.items.forEach(item => {\n          processedItems.push(item);\n          const key = item.id || item.label || '';\n          if (item.items && expanded.has(key)) {\n            item.items.forEach(subItem => {\n              processedItems.push({\n                ...subItem,\n                styleClass: (subItem.styleClass || '') + ' tk-submenu-item'\n              });\n            });\n          }\n        });\n        result.push({ ...group, items: processedItems });\n      } else {\n        // It's a top-level item\n        result.push(group);\n        const key = group.id || group.label || '';\n        if (group.items && expanded.has(key)) {\n          group.items.forEach(subItem => {\n            result.push({\n              ...subItem,\n              styleClass: (subItem.styleClass || '') + ' tk-submenu-item'\n            });\n          });\n        }\n      }\n    });\n\n    return result;\n  });\n\n  /**\n   * Handles the click event on a menu item.\n   */\n  handleItemClick(event: Event, item: MenuItem) {\n    if (item.items) {\n      // Toggle expansion\n      const key = item.id || item.label || '';\n      const newExpanded = new Set(this.expandedItems());\n      \n      if (newExpanded.has(key)) {\n        newExpanded.delete(key);\n      } else {\n        newExpanded.add(key);\n      }\n\n      this.expandedItems.set(newExpanded);\n      \n      // Prevent default command if it's just a toggle\n      event.preventDefault();\n      event.stopPropagation();\n    } else {\n      const key = item.id || item.label || '';\n      this.selectedId.set(key);\n      \n      if (item.command) {\n        item.command({ originalEvent: event, item });\n      }\n      this.itemClick.emit({ event, item });\n      event.stopPropagation();\n    }\n  }\n\n  /**\n   * Checks if an item is currently selected.\n   */\n  isSelected(item: MenuItem): boolean {\n    return this.selectedId() === (item.id || item.label || '');\n  }\n\n\n  /**\n   * Checks if an item is currently expanded.\n   */\n  isExpanded(item: MenuItem): boolean {\n    return this.expandedItems().has(item.id || item.label || '');\n  }\n\n  /**\n   * Toggles the menu visibility for popup mode.\n   */\n  toggle(event: Event) {\n    this.pMenu()?.toggle(event);\n  }\n}\n\n\n","<p-menu\n  #pMenu\n  [model]=\"visibleModel()\"\n  [popup]=\"popup()\"\n  [appendTo]=\"appendTo()\"\n  [styleClass]=\"'tk-menu ' + variant() + ' ' + styleClass()\"\n>\n  <!-- Group Header template -->\n  <ng-template pTemplate=\"submenuheader\" let-item>\n    <div class=\"tk-menu-submenu-header\">\n      {{ item.label }}\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"item\" let-item>\n    <a (click)=\"handleItemClick($event, item)\"\n       (keydown.enter)=\"handleItemClick($event, item)\"\n       tabindex=\"0\"\n       class=\"tk-menu-item-link\"\n       [ngClass]=\"item.styleClass || ''\"\n       [class.tk-menu-item-selected]=\"isSelected(item)\"\n       [attr.target]=\"item.target\"\n       [attr.title]=\"item.title\">\n      <div class=\"tk-menu-item-content\">\n        @if (item.icon) {\n          <tk-icon [icon]=\"item.icon\" class=\"tk-menu-item-icon\"></tk-icon>\n        }\n        <span class=\"tk-menu-item-label\">{{ item.label }}</span>\n      </div>\n      \n      @if (item.items) {\n        @if (isExpanded(item)) {\n          <tk-icon icon=\"chevron-up\" class=\"tk-menu-item-chevron\"></tk-icon>\n        } @else {\n          <tk-icon icon=\"chevron-down\" class=\"tk-menu-item-chevron\"></tk-icon>\n        }\n      }\n    </a>\n  </ng-template>\n\n</p-menu>\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/tekus-design-system-components-message.mjs

@@ -0,0 +1,82 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Message } from 'primeng/message';
+import { PrimeTemplate } from 'primeng/api';
+import { IconComponent } from '@tekus/design-system/components/icon';
+
+/**
+ * @component MessageComponent
+ * @description
+ * Custom notification banner component that wraps PrimeNG p-message.
+ * Supports info, warn, error, and success severities with design system tokens.
+ *
+ * @usage
+ * ```html
+ * <tk-message severity="info" [closable]="true">
+ *   Este es un mensaje informativo con un <a href="#">enlace</a>.
+ * </tk-message>
+ * ```
+ */
+class MessageComponent {
+    constructor() {
+        /**
+         * Severity of the message.
+         * Options: 'info' | 'success' | 'warn' | 'error'
+         */
+        this.severity = input('info', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the message can be closed by the user.
+         */
+        this.closable = input(false, ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+        /**
+         * Event emitted when the message is closed.
+         */
+        this.closed = output();
+        /**
+         * Internal state to manage visibility.
+         */
+        this.visible = signal(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        /**
+         * Maps severity to the corresponding design system icon.
+         */
+        this.iconName = computed(() => {
+            switch (this.severity()) {
+                case 'success': return 'circle-check';
+                case 'error': return 'circle-xmark';
+                case 'warn': return 'triangle-exclamation';
+                case 'info':
+                default: return 'circle-info';
+            }
+        }, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+        /**
+         * Maps severity to the corresponding design system icon style.
+         */
+        this.iconStyle = computed(() => {
+            return this.severity() === 'warn' ? 'regular' : 'solid';
+        }, ...(ngDevMode ? [{ debugName: "iconStyle" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Closes the message.
+     */
+    close() {
+        this.visible.set(false);
+        this.closed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: MessageComponent, isStandalone: true, selector: "tk-message", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "style.display": "visible() ? \"block\" : \"none\"", "attr.aria-hidden": "!visible()" } }, ngImport: i0, template: "@if (visible()) {\n  <p-message \n    [severity]=\"severity()\" \n    [closable]=\"closable()\" \n    (onClose)=\"close()\"\n    class=\"tk-message\">\n    <ng-template pTemplate=\"icon\">\n      <tk-icon [icon]=\"iconName()\" [styleIcon]=\"iconStyle()\" size=\"sm\"></tk-icon>\n    </ng-template>\n    <ng-template pTemplate=\"closeicon\">\n      <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n    </ng-template>\n    <ng-content></ng-content>\n  </p-message>\n}", styles: [":host{display:block;width:100%}:host ::ng-deep .p-message{border-radius:var(--tk-borderRadius-s);border-width:.0625rem;border-style:solid;padding:var(--tk-spacing-padding-xs) var(--tk-spacing-padding-m);margin:0;width:100%;height:auto;min-height:var(--tk-spacing-gap-xl);display:flex;align-items:center}:host ::ng-deep .p-message .p-message-content-wrapper{display:flex;align-items:center;width:100%}:host ::ng-deep .p-message .p-message-content{padding:0;display:flex;align-items:center;gap:var(--tk-spacing-gap-s);flex:1 1 auto;border:none;background:transparent}:host ::ng-deep .p-message .p-message-icon{display:flex;align-items:center;justify-content:center;font-size:var(--tk-font-size-paragraph-l);margin-right:0}:host ::ng-deep .p-message .p-message-icon tk-icon{display:flex;color:inherit}:host ::ng-deep .p-message .p-message-text{font-family:var(--tk-font-family, \"Poppins\", sans-serif);font-size:var(--tk-font-size-paragraph-s);font-weight:var(--tk-font-weight-400);line-height:1.5;margin:0;flex:1 1 auto;display:block;color:inherit}:host ::ng-deep .p-message .p-message-text span,:host ::ng-deep .p-message .p-message-text p{margin:0;color:inherit}:host ::ng-deep .p-message .p-message-text a{text-decoration:underline;font-weight:600;color:inherit;transition:opacity .2s}:host ::ng-deep .p-message .p-message-text a:hover{opacity:.8}:host ::ng-deep .p-message .p-message-close-button{display:flex;align-items:center;justify-content:center;width:var(--tk-size-base-200);height:var(--tk-size-base-200);border-radius:var(--tk-borderRadius-full);transition:background-color .2s;margin-left:auto;color:inherit;background:transparent;border:none;cursor:pointer}:host ::ng-deep .p-message .p-message-close-button tk-icon{display:flex;color:inherit}:host ::ng-deep .p-message .p-message-close-button:hover{background:#0000000d}:host ::ng-deep .p-message .p-message-close-button .p-message-close-icon{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: MessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-message', standalone: true, imports: [CommonModule, Message, PrimeTemplate, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[style.display]': 'visible() ? "block" : "none"',
+                        '[attr.aria-hidden]': '!visible()',
+                    }, template: "@if (visible()) {\n  <p-message \n    [severity]=\"severity()\" \n    [closable]=\"closable()\" \n    (onClose)=\"close()\"\n    class=\"tk-message\">\n    <ng-template pTemplate=\"icon\">\n      <tk-icon [icon]=\"iconName()\" [styleIcon]=\"iconStyle()\" size=\"sm\"></tk-icon>\n    </ng-template>\n    <ng-template pTemplate=\"closeicon\">\n      <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n    </ng-template>\n    <ng-content></ng-content>\n  </p-message>\n}", styles: [":host{display:block;width:100%}:host ::ng-deep .p-message{border-radius:var(--tk-borderRadius-s);border-width:.0625rem;border-style:solid;padding:var(--tk-spacing-padding-xs) var(--tk-spacing-padding-m);margin:0;width:100%;height:auto;min-height:var(--tk-spacing-gap-xl);display:flex;align-items:center}:host ::ng-deep .p-message .p-message-content-wrapper{display:flex;align-items:center;width:100%}:host ::ng-deep .p-message .p-message-content{padding:0;display:flex;align-items:center;gap:var(--tk-spacing-gap-s);flex:1 1 auto;border:none;background:transparent}:host ::ng-deep .p-message .p-message-icon{display:flex;align-items:center;justify-content:center;font-size:var(--tk-font-size-paragraph-l);margin-right:0}:host ::ng-deep .p-message .p-message-icon tk-icon{display:flex;color:inherit}:host ::ng-deep .p-message .p-message-text{font-family:var(--tk-font-family, \"Poppins\", sans-serif);font-size:var(--tk-font-size-paragraph-s);font-weight:var(--tk-font-weight-400);line-height:1.5;margin:0;flex:1 1 auto;display:block;color:inherit}:host ::ng-deep .p-message .p-message-text span,:host ::ng-deep .p-message .p-message-text p{margin:0;color:inherit}:host ::ng-deep .p-message .p-message-text a{text-decoration:underline;font-weight:600;color:inherit;transition:opacity .2s}:host ::ng-deep .p-message .p-message-text a:hover{opacity:.8}:host ::ng-deep .p-message .p-message-close-button{display:flex;align-items:center;justify-content:center;width:var(--tk-size-base-200);height:var(--tk-size-base-200);border-radius:var(--tk-borderRadius-full);transition:background-color .2s;margin-left:auto;color:inherit;background:transparent;border:none;cursor:pointer}:host ::ng-deep .p-message .p-message-close-button tk-icon{display:flex;color:inherit}:host ::ng-deep .p-message .p-message-close-button:hover{background:#0000000d}:host ::ng-deep .p-message .p-message-close-button .p-message-close-icon{display:none}\n"] }]
+        }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MessageComponent };
+//# sourceMappingURL=tekus-design-system-components-message.mjs.map

package/fesm2022/tekus-design-system-components-message.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-message.mjs","sources":["../../../projects/design-system/components/message/src/message.component.ts","../../../projects/design-system/components/message/src/message.component.html","../../../projects/design-system/components/message/tekus-design-system-components-message.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, computed, signal, output } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Message } from 'primeng/message';\nimport { PrimeTemplate } from 'primeng/api';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n/**\n * @component MessageComponent\n * @description\n * Custom notification banner component that wraps PrimeNG p-message.\n * Supports info, warn, error, and success severities with design system tokens.\n * \n * @usage\n * ```html\n * <tk-message severity=\"info\" [closable]=\"true\">\n *   Este es un mensaje informativo con un <a href=\"#\">enlace</a>.\n * </tk-message>\n * ```\n */\n@Component({\n  selector: 'tk-message',\n  standalone: true,\n  imports: [CommonModule, Message, PrimeTemplate, IconComponent],\n  templateUrl: './message.component.html',\n  styleUrl: './message.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[style.display]': 'visible() ? \"block\" : \"none\"',\n    '[attr.aria-hidden]': '!visible()',\n  }\n})\nexport class MessageComponent {\n  /**\n   * Severity of the message.\n   * Options: 'info' | 'success' | 'warn' | 'error'\n   */\n  severity = input<'info' | 'success' | 'warn' | 'error'>('info');\n\n  /**\n   * Whether the message can be closed by the user.\n   */\n  closable = input<boolean>(false);\n\n  /**\n   * Event emitted when the message is closed.\n   */\n  closed = output<void>();\n\n  /**\n   * Internal state to manage visibility.\n   */\n  visible = signal(true);\n\n  /**\n   * Maps severity to the corresponding design system icon.\n   */\n  iconName = computed(() => {\n    switch (this.severity()) {\n      case 'success': return 'circle-check';\n      case 'error': return 'circle-xmark';\n      case 'warn': return 'triangle-exclamation';\n      case 'info':\n      default: return 'circle-info';\n    }\n  });\n\n  /**\n   * Maps severity to the corresponding design system icon style.\n   */\n  iconStyle = computed(() => {\n    return this.severity() === 'warn' ? 'regular' : 'solid';\n  });\n\n  /**\n   * Closes the message.\n   */\n  close() {\n    this.visible.set(false);\n    this.closed.emit();\n  }\n}\n","@if (visible()) {\n  <p-message \n    [severity]=\"severity()\" \n    [closable]=\"closable()\" \n    (onClose)=\"close()\"\n    class=\"tk-message\">\n    <ng-template pTemplate=\"icon\">\n      <tk-icon [icon]=\"iconName()\" [styleIcon]=\"iconStyle()\" size=\"sm\"></tk-icon>\n    </ng-template>\n    <ng-template pTemplate=\"closeicon\">\n      <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n    </ng-template>\n    <ng-content></ng-content>\n  </p-message>\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/tekus-design-system-components-modal.mjs

@@ -237,7 +237,7 @@ class ModalComponent {
         this.returnValueOnClose = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ModalComponent, isStandalone: true, selector: "tk-modal", inputs: { dialogRef: { classPropertyName: "dialogRef", publicName: "dialogRef", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footerButtons: { classPropertyName: "footerButtons", publicName: "footerButtons", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, interceptor: { classPropertyName: "interceptor", publicName: "interceptor", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpened: "isOpenedChange", closed: "closed" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<p-dialog\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [focusOnShow]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{\n    'max-width': modalMaxWidth(),\n    width: 'calc(100% - var(--tk-spacing-base-200))',\n  }\"\n  (onHide)=\"handleClose()\"\n  (onShow)=\"checkScroll()\"\n  class=\"tk-modal\">\n  @if (title()) {\n    <ng-template pTemplate=\"header\">\n      <span class=\"p-dialog-title\">{{ title() }}</span>\n    </ng-template>\n  }\n  <section class=\"tk-modal__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n\n  @if (hasFooter()) {\n    <ng-template pTemplate=\"footer\">\n      <section\n        class=\"tk-modal__footer\"\n        [class.tk-modal__footer--with-content]=\"hasScroll\">\n        @for (btn of footerButtons()!; track $index) {\n          <tk-button\n            [label]=\"btn.label\"\n            [severity]=\"btn.severity\"\n            [variant]=\"btn.variant\"\n            (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.space)=\"handleAction(btn.action, btn.returnValue)\" />\n        }\n      </section>\n    </ng-template>\n  }\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog{max-height:90vh;display:flex;flex-direction:column}:host ::ng-deep .p-dialog-content{overflow-y:auto}:host ::ng-deep .p-dialog-title{color:var(--tk-color-text-default, #212121)}:host ::ng-deep .p-dialog-close-button{color:var(--tk-surface-500, #8a8a8b)}:host ::ng-deep .p-dialog-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-surface-500, #8a8a8b)}.tk-modal__content{padding-bottom:var(--tk-spacing-padding-l, 1.25rem);color:var(--tk-surface-1000, #000000)}.tk-modal__footer{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-modal__footer--with-content{padding-right:var(--tk-spacing-padding-l, 1.25rem)}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ModalComponent, isStandalone: true, selector: "tk-modal", inputs: { dialogRef: { classPropertyName: "dialogRef", publicName: "dialogRef", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footerButtons: { classPropertyName: "footerButtons", publicName: "footerButtons", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, interceptor: { classPropertyName: "interceptor", publicName: "interceptor", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpened: "isOpenedChange", closed: "closed" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<p-dialog\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [focusOnShow]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{\n    'max-width': modalMaxWidth(),\n    width: 'calc(100% - var(--tk-spacing-base-200))',\n  }\"\n  (onHide)=\"handleClose()\"\n  (onShow)=\"checkScroll()\"\n  class=\"tk-modal\">\n  @if (title()) {\n    <ng-template pTemplate=\"header\">\n      <span class=\"p-dialog-title\">{{ title() }}</span>\n    </ng-template>\n  }\n  <section class=\"tk-modal__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n\n  @if (hasFooter()) {\n    <ng-template pTemplate=\"footer\">\n      <section\n        class=\"tk-modal__footer\"\n        [class.tk-modal__footer--with-content]=\"hasScroll\">\n        @for (btn of footerButtons()!; track $index) {\n          <tk-button\n            [label]=\"btn.label\"\n            [severity]=\"btn.severity\"\n            [variant]=\"btn.variant\"\n            (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.space)=\"handleAction(btn.action, btn.returnValue)\" />\n        }\n      </section>\n    </ng-template>\n  }\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog{max-height:90vh;display:flex;flex-direction:column}:host ::ng-deep .p-dialog-content{overflow-y:auto}:host ::ng-deep .p-dialog-title{color:var(--tk-color-text-default, #212121)}:host ::ng-deep .p-dialog-close-button{color:var(--tk-surface-500, #8a8a8b)}:host ::ng-deep .p-dialog-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-surface-500, #8a8a8b)}.tk-modal__content{padding-bottom:var(--tk-spacing-padding-l, 1.25rem);color:var(--tk-surface-1000, #000000)}.tk-modal__footer{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-modal__footer--with-content{padding-right:var(--tk-spacing-padding-l, 1.25rem)}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,

package/fesm2022/tekus-design-system-components-modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-modal.mjs","sources":["../../../projects/design-system/components/modal/src/modal.component.ts","../../../projects/design-system/components/modal/src/modal.component.html","../../../projects/design-system/components/modal/src/services/modal.service.ts","../../../projects/design-system/components/modal/tekus-design-system-components-modal.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  output,\n  Type,\n  ElementRef,\n  model,\n  viewChild,\n  ViewContainerRef,\n  ComponentRef,\n  effect,\n  OnDestroy,\n  untracked,\n  afterEveryRender,\n  inject,\n  Injector,\n} from '@angular/core';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { DialogModule } from 'primeng/dialog';\nimport { ModalFooterButton, ModalSizeType } from './modal.types';\nimport {\n  TkCanClose,\n  TkCloseInterceptor,\n  TkDialogRef,\n} from '@tekus/design-system/core/types';\n\n/**\n * @component ModalComponent\n * @description\n * A programmatically controlled modal dialog used for displaying dynamic content.\n * Modernized for Angular 19 with 100% synchronous Signal-based closing interception.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-modal',\n  imports: [DialogModule, ButtonComponent],\n  templateUrl: './modal.component.html',\n  styleUrl: './modal.component.scss',\n})\nexport class ModalComponent<T = unknown> implements OnDestroy {\n  private readonly elementRef = inject(ElementRef);\n  private readonly injector = inject(Injector);\n\n  private readonly contentHost = viewChild('contentHost', {\n    read: ViewContainerRef,\n  });\n  private componentRef?: ComponentRef<T>;\n\n  /** The dialog ref associated with this modal */\n  dialogRef = input<TkDialogRef<ModalComponent<T>, unknown> | null>(null);\n\n  /** The title displayed at the top of the modal */\n  title = input<string>('');\n\n  /** The main content of the modal. Can be a string or a Component Type. */\n  content = input<string | Type<T> | null>(null);\n\n  /** Array of footer buttons with label, callback, and return value */\n  footerButtons = input<ModalFooterButton[]>([]);\n\n  /** Modal size: 'small', 'large', 'medium' or 'full' */\n  size = input<ModalSizeType>('small');\n\n  /** Whether the modal can be closed by the user via close button */\n  closable = input<boolean>(true);\n\n  /** Whether clicking outside the modal mask closes the modal */\n  closeOnOutsideClick = input<boolean>(false);\n\n  /**\n   * Optional data to be passed as inputs to the dynamic component.\n   */\n  data = input<Partial<T>>({});\n\n  /**\n   * Optional interceptor called before the modal closes.\n   * MUST be synchronous. Returns true to allow closing.\n   */\n  interceptor = input<TkCloseInterceptor | undefined>(undefined);\n\n  /** Computed: whether the content is a simple string */\n  isContentString = computed(() => typeof this.content() === 'string');\n\n  /** Computed: whether the modal has footer buttons to display */\n  hasFooter = computed(() => (this.footerButtons() ?? []).length > 0);\n\n  /** Whether the modal should be responsive on mobile screens */\n  responsive = input<boolean>(true);\n\n  /** Visibility flag as Model Signal (allows two-way binding) */\n  isOpened = model<boolean>(false);\n\n  /** Whether the modal content has a scrollbar */\n  hasScroll = false;\n\n  // --- Internals ---\n  /** Emits when the modal closes, passing the return value from footer buttons or null */\n  readonly closed = output<unknown>();\n  private alreadyEmitted = false;\n  private returnValueOnClose: unknown = null;\n\n  constructor() {\n    /**\n     * @summary Orchestrates the reactive dynamic lifecycle.\n     */\n\n    effect(() => {\n      const opened = this.isOpened();\n      const host = this.contentHost();\n      this.dialogRef(); // Track it to re-run if it's set later\n\n      untracked(() => {\n        if (opened && host) {\n          this.attachDynamicContent();\n        } else if (!opened) {\n          this.detachDynamicContent();\n        }\n      });\n    });\n\n    effect(() => {\n      const currentData = this.data();\n      untracked(() => this.syncDynamicInputs(currentData));\n    });\n\n    afterEveryRender(() => {\n      this.checkScroll();\n    });\n  }\n\n  /** Computed: calculates modal max-width based on `size` */\n  modalMaxWidth = computed(() => {\n    switch (this.size()) {\n      case 'large':\n        return '67.5rem';\n      case 'medium':\n        return '35rem';\n      case 'full':\n        return '98vw';\n      default:\n        return '25rem';\n    }\n  });\n\n  ngOnDestroy(): void {\n    this.detachDynamicContent();\n  }\n\n  /**\n   * @summary Orchestrates dynamic rendering and destruction based on visibility.\n   * @private\n   */\n  private attachDynamicContent(): void {\n    const type = this.content();\n    const host = this.contentHost();\n\n    if (!type || typeof type === 'string' || !host) return;\n    this.detachDynamicContent();\n\n    const customInjector = Injector.create({\n      providers: [{ provide: TkDialogRef, useValue: this.dialogRef() }],\n      parent: this.injector,\n    });\n\n    this.componentRef = host.createComponent(type, {\n      injector: customInjector,\n    });\n    this.syncDynamicInputs(this.data());\n  }\n\n  /**\n   * @summary Synchronizes incoming data record with the dynamic instance @Inputs.\n   * @private\n   */\n  private syncDynamicInputs(data: Partial<T>): void {\n    if (!this.componentRef) return;\n    Object.entries(data).forEach(([key, value]) => {\n      this.componentRef?.setInput(key, value);\n    });\n  }\n\n  /**\n   * @summary Safely destroys the dynamic component and clears references.\n   * @private\n   */\n  private detachDynamicContent(): void {\n    if (this.componentRef) {\n      this.componentRef.destroy();\n      this.componentRef = undefined;\n    }\n  }\n\n  /**\n   * Checks if the modal content has a scrollbar and updates `hasScroll` state.\n   */\n  checkScroll(): void {\n    const contentEl =\n      this.elementRef.nativeElement.querySelector('.p-dialog-content');\n    if (contentEl) {\n      this.hasScroll = contentEl.scrollHeight > contentEl.clientHeight;\n    }\n  }\n\n  private wasOpened = false;\n\n  /**\n   * Opens the modal dialog.\n   */\n  open(): void {\n    this.wasOpened = true;\n    this.isOpened.set(true);\n    this.resetClosureState();\n  }\n\n  /**\n   * @summary Main entry point for closure requests.\n   * Evaluation is 100% synchronous based on current Signal state.\n   * @param returnValue (Optional) Value to emit on close.\n   */\n  tryClose(returnValue: unknown = null): void {\n    if (this.canExecuteClosure()) {\n      this.executeClosure(returnValue, arguments.length > 0);\n    } else {\n      const instance = this.componentRef?.instance as TkCanClose | undefined;\n      instance?.onBlockedClose?.();\n    }\n  }\n\n  /**\n   * @summary Synchronous evaluator of hierarchical guards.\n   * @returns true if closure is allowed.\n   * @private\n   */\n  private canExecuteClosure(): boolean {\n    const instance = this.componentRef?.instance as TkCanClose | undefined;\n    const canClose = instance?.canClose ? instance.canClose() : true;\n    if (!canClose) return false;\n\n    const configInterceptor = this.interceptor();\n    if (configInterceptor && !configInterceptor()) return false;\n\n    return true;\n  }\n\n  /**\n   * @summary Unified logic to execute the final closure state change.\n   * @private\n   */\n  private executeClosure(returnValue: unknown, hasReturnValue: boolean): void {\n    if (hasReturnValue) {\n      this.alreadyEmitted = true;\n      this.returnValueOnClose = returnValue;\n    }\n    this.isOpened.set(false);\n  }\n\n  /**\n   * @summary Handles external visibility changes (from p-dialog 'X' or Escape).\n   * Ensures the reactive guard is respected before allowing closure.\n   */\n  onVisibleChange(visible: boolean): void {\n    if (!visible) {\n      this.tryClose();\n    }\n  }\n\n  /**\n   * Handles the close event from the underlying dialog component.\n   */\n  handleClose(): void {\n    if (!this.wasOpened || this.isOpened()) {\n      return;\n    }\n    const valueToEmit = this.alreadyEmitted ? this.returnValueOnClose : null;\n    this.closed.emit(valueToEmit);\n    this.resetClosureState();\n    this.wasOpened = false;\n  }\n\n  /**\n   * @summary Handles actions triggered by footer buttons.\n   */\n  handleAction(action: (() => void) | undefined, returnValue: unknown): void {\n    if (action) action();\n    this.tryClose(returnValue);\n  }\n\n  /**\n   * @summary Safely closes the modal forcefully without checks.\n   */\n  close(): void {\n    this.tryClose();\n  }\n\n  /**\n   * @private\n   * Encapsulates state cleanup to avoid repetitive assignments\n   */\n  private resetClosureState(): void {\n    this.alreadyEmitted = false;\n    this.returnValueOnClose = null;\n  }\n}\n","<p-dialog\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [focusOnShow]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{\n    'max-width': modalMaxWidth(),\n    width: 'calc(100% - var(--tk-spacing-base-200))',\n  }\"\n  (onHide)=\"handleClose()\"\n  (onShow)=\"checkScroll()\"\n  class=\"tk-modal\">\n  @if (title()) {\n    <ng-template pTemplate=\"header\">\n      <span class=\"p-dialog-title\">{{ title() }}</span>\n    </ng-template>\n  }\n  <section class=\"tk-modal__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n\n  @if (hasFooter()) {\n    <ng-template pTemplate=\"footer\">\n      <section\n        class=\"tk-modal__footer\"\n        [class.tk-modal__footer--with-content]=\"hasScroll\">\n        @for (btn of footerButtons()!; track $index) {\n          <tk-button\n            [label]=\"btn.label\"\n            [severity]=\"btn.severity\"\n            [variant]=\"btn.variant\"\n            (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.space)=\"handleAction(btn.action, btn.returnValue)\" />\n        }\n      </section>\n    </ng-template>\n  }\n</p-dialog>\n","import { Injectable, ApplicationRef, ComponentRef, createComponent, EmbeddedViewRef, inject } from '@angular/core';\nimport { ModalComponent } from '../modal.component';\nimport { ModalConfig } from '../modal.types';\nimport { TkDialogRef } from '@tekus/design-system/core/types';\n\n/**\n * @service ModalService\n * @description\n * Service responsible for programmatically opening and managing modal dialogs.\n * It handles component creation, attachment to the document body, and cleanup.\n */\n@Injectable({ providedIn: 'root' })\nexport class ModalService {\n  private readonly appRef = inject(ApplicationRef);\n\n  /** Reference to the currently open modal dialog ref */\n  private dialogRef: TkDialogRef<ModalComponent> | null = null;\n\n  /** Internal getter for testing purposes */\n  get modalRefForTesting(): ComponentRef<ModalComponent> | null {\n    return this.dialogRef?.componentRef || null;\n  }\n  /** Internal setter for testing purposes */\n  set modalRefForTesting(ref: ComponentRef<ModalComponent> | null) {\n    this.dialogRef = ref ? new TkDialogRef(ref) : null;\n  }\n\n  /**\n   * Opens a modal dialog with the provided configuration.\n   * Only one modal can be open at a time.\n   * @param config Configuration object for the modal (title, content, buttons, etc.)\n   * @returns A TkDialogRef for the opened modal.\n   */\n  open<T = unknown, R = unknown>(config: ModalConfig): TkDialogRef<ModalComponent<T>, R> {\n    if (this.dialogRef) {\n      return this.dialogRef as unknown as TkDialogRef<ModalComponent<T>, R>;\n    }\n\n    const componentRef = createComponent(ModalComponent, {\n      environmentInjector: this.appRef.injector,\n    }) as ComponentRef<ModalComponent<T>>;\n\n    this.appRef.attachView(componentRef.hostView);\n\n    const domElem = (componentRef.hostView as EmbeddedViewRef<unknown>).rootNodes[0] as HTMLElement;\n    document.body.appendChild(domElem);\n\n    const dialogRef = new TkDialogRef<ModalComponent<T>, R>(componentRef);\n    this.dialogRef = dialogRef as unknown as TkDialogRef<ModalComponent>;\n\n    componentRef.setInput('title', config.title);\n    componentRef.setInput('content', config.content);\n    componentRef.setInput('footerButtons', config.footerButtons || []);\n    componentRef.setInput('size', config.size || 'small');\n    componentRef.setInput('closable', config.closable ?? true);\n    componentRef.setInput('closeOnOutsideClick', config.closeOnOutsideClick ?? false);\n    componentRef.setInput('interceptor', config.interceptor);\n    componentRef.setInput('data', config.data || {});\n    componentRef.setInput('dialogRef', dialogRef);\n\n    componentRef.instance.closed.subscribe((value: unknown) => {\n      dialogRef.emitClose(value as R);\n      this.appRef.detachView(componentRef.hostView);\n      componentRef.destroy();\n      this.dialogRef = null;\n    });\n\n    componentRef.instance.open();\n\n    return dialogRef;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-modal.mjs","sources":["../../../projects/design-system/components/modal/src/modal.component.ts","../../../projects/design-system/components/modal/src/modal.component.html","../../../projects/design-system/components/modal/src/services/modal.service.ts","../../../projects/design-system/components/modal/tekus-design-system-components-modal.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  output,\n  Type,\n  ElementRef,\n  model,\n  viewChild,\n  ViewContainerRef,\n  ComponentRef,\n  effect,\n  OnDestroy,\n  untracked,\n  afterEveryRender,\n  inject,\n  Injector,\n} from '@angular/core';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { DialogModule } from 'primeng/dialog';\nimport { ModalFooterButton, ModalSizeType } from './modal.types';\nimport {\n  TkCanClose,\n  TkCloseInterceptor,\n  TkDialogRef,\n} from '@tekus/design-system/core/types';\n\n/**\n * @component ModalComponent\n * @description\n * A programmatically controlled modal dialog used for displaying dynamic content.\n * Modernized for Angular 19 with 100% synchronous Signal-based closing interception.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-modal',\n  imports: [DialogModule, ButtonComponent],\n  templateUrl: './modal.component.html',\n  styleUrl: './modal.component.scss',\n})\nexport class ModalComponent<T = unknown> implements OnDestroy {\n  private readonly elementRef = inject(ElementRef);\n  private readonly injector = inject(Injector);\n\n  private readonly contentHost = viewChild('contentHost', {\n    read: ViewContainerRef,\n  });\n  private componentRef?: ComponentRef<T>;\n\n  /** The dialog ref associated with this modal */\n  dialogRef = input<TkDialogRef<ModalComponent<T>, unknown> | null>(null);\n\n  /** The title displayed at the top of the modal */\n  title = input<string>('');\n\n  /** The main content of the modal. Can be a string or a Component Type. */\n  content = input<string | Type<T> | null>(null);\n\n  /** Array of footer buttons with label, callback, and return value */\n  footerButtons = input<ModalFooterButton[]>([]);\n\n  /** Modal size: 'small', 'large', 'medium' or 'full' */\n  size = input<ModalSizeType>('small');\n\n  /** Whether the modal can be closed by the user via close button */\n  closable = input<boolean>(true);\n\n  /** Whether clicking outside the modal mask closes the modal */\n  closeOnOutsideClick = input<boolean>(false);\n\n  /**\n   * Optional data to be passed as inputs to the dynamic component.\n   */\n  data = input<Partial<T>>({});\n\n  /**\n   * Optional interceptor called before the modal closes.\n   * MUST be synchronous. Returns true to allow closing.\n   */\n  interceptor = input<TkCloseInterceptor | undefined>(undefined);\n\n  /** Computed: whether the content is a simple string */\n  isContentString = computed(() => typeof this.content() === 'string');\n\n  /** Computed: whether the modal has footer buttons to display */\n  hasFooter = computed(() => (this.footerButtons() ?? []).length > 0);\n\n  /** Whether the modal should be responsive on mobile screens */\n  responsive = input<boolean>(true);\n\n  /** Visibility flag as Model Signal (allows two-way binding) */\n  isOpened = model<boolean>(false);\n\n  /** Whether the modal content has a scrollbar */\n  hasScroll = false;\n\n  // --- Internals ---\n  /** Emits when the modal closes, passing the return value from footer buttons or null */\n  readonly closed = output<unknown>();\n  private alreadyEmitted = false;\n  private returnValueOnClose: unknown = null;\n\n  constructor() {\n    /**\n     * @summary Orchestrates the reactive dynamic lifecycle.\n     */\n\n    effect(() => {\n      const opened = this.isOpened();\n      const host = this.contentHost();\n      this.dialogRef(); // Track it to re-run if it's set later\n\n      untracked(() => {\n        if (opened && host) {\n          this.attachDynamicContent();\n        } else if (!opened) {\n          this.detachDynamicContent();\n        }\n      });\n    });\n\n    effect(() => {\n      const currentData = this.data();\n      untracked(() => this.syncDynamicInputs(currentData));\n    });\n\n    afterEveryRender(() => {\n      this.checkScroll();\n    });\n  }\n\n  /** Computed: calculates modal max-width based on `size` */\n  modalMaxWidth = computed(() => {\n    switch (this.size()) {\n      case 'large':\n        return '67.5rem';\n      case 'medium':\n        return '35rem';\n      case 'full':\n        return '98vw';\n      default:\n        return '25rem';\n    }\n  });\n\n  ngOnDestroy(): void {\n    this.detachDynamicContent();\n  }\n\n  /**\n   * @summary Orchestrates dynamic rendering and destruction based on visibility.\n   * @private\n   */\n  private attachDynamicContent(): void {\n    const type = this.content();\n    const host = this.contentHost();\n\n    if (!type || typeof type === 'string' || !host) return;\n    this.detachDynamicContent();\n\n    const customInjector = Injector.create({\n      providers: [{ provide: TkDialogRef, useValue: this.dialogRef() }],\n      parent: this.injector,\n    });\n\n    this.componentRef = host.createComponent(type, {\n      injector: customInjector,\n    });\n    this.syncDynamicInputs(this.data());\n  }\n\n  /**\n   * @summary Synchronizes incoming data record with the dynamic instance @Inputs.\n   * @private\n   */\n  private syncDynamicInputs(data: Partial<T>): void {\n    if (!this.componentRef) return;\n    Object.entries(data).forEach(([key, value]) => {\n      this.componentRef?.setInput(key, value);\n    });\n  }\n\n  /**\n   * @summary Safely destroys the dynamic component and clears references.\n   * @private\n   */\n  private detachDynamicContent(): void {\n    if (this.componentRef) {\n      this.componentRef.destroy();\n      this.componentRef = undefined;\n    }\n  }\n\n  /**\n   * Checks if the modal content has a scrollbar and updates `hasScroll` state.\n   */\n  checkScroll(): void {\n    const contentEl =\n      this.elementRef.nativeElement.querySelector('.p-dialog-content');\n    if (contentEl) {\n      this.hasScroll = contentEl.scrollHeight > contentEl.clientHeight;\n    }\n  }\n\n  private wasOpened = false;\n\n  /**\n   * Opens the modal dialog.\n   */\n  open(): void {\n    this.wasOpened = true;\n    this.isOpened.set(true);\n    this.resetClosureState();\n  }\n\n  /**\n   * @summary Main entry point for closure requests.\n   * Evaluation is 100% synchronous based on current Signal state.\n   * @param returnValue (Optional) Value to emit on close.\n   */\n  tryClose(returnValue: unknown = null): void {\n    if (this.canExecuteClosure()) {\n      this.executeClosure(returnValue, arguments.length > 0);\n    } else {\n      const instance = this.componentRef?.instance as TkCanClose | undefined;\n      instance?.onBlockedClose?.();\n    }\n  }\n\n  /**\n   * @summary Synchronous evaluator of hierarchical guards.\n   * @returns true if closure is allowed.\n   * @private\n   */\n  private canExecuteClosure(): boolean {\n    const instance = this.componentRef?.instance as TkCanClose | undefined;\n    const canClose = instance?.canClose ? instance.canClose() : true;\n    if (!canClose) return false;\n\n    const configInterceptor = this.interceptor();\n    if (configInterceptor && !configInterceptor()) return false;\n\n    return true;\n  }\n\n  /**\n   * @summary Unified logic to execute the final closure state change.\n   * @private\n   */\n  private executeClosure(returnValue: unknown, hasReturnValue: boolean): void {\n    if (hasReturnValue) {\n      this.alreadyEmitted = true;\n      this.returnValueOnClose = returnValue;\n    }\n    this.isOpened.set(false);\n  }\n\n  /**\n   * @summary Handles external visibility changes (from p-dialog 'X' or Escape).\n   * Ensures the reactive guard is respected before allowing closure.\n   */\n  onVisibleChange(visible: boolean): void {\n    if (!visible) {\n      this.tryClose();\n    }\n  }\n\n  /**\n   * Handles the close event from the underlying dialog component.\n   */\n  handleClose(): void {\n    if (!this.wasOpened || this.isOpened()) {\n      return;\n    }\n    const valueToEmit = this.alreadyEmitted ? this.returnValueOnClose : null;\n    this.closed.emit(valueToEmit);\n    this.resetClosureState();\n    this.wasOpened = false;\n  }\n\n  /**\n   * @summary Handles actions triggered by footer buttons.\n   */\n  handleAction(action: (() => void) | undefined, returnValue: unknown): void {\n    if (action) action();\n    this.tryClose(returnValue);\n  }\n\n  /**\n   * @summary Safely closes the modal forcefully without checks.\n   */\n  close(): void {\n    this.tryClose();\n  }\n\n  /**\n   * @private\n   * Encapsulates state cleanup to avoid repetitive assignments\n   */\n  private resetClosureState(): void {\n    this.alreadyEmitted = false;\n    this.returnValueOnClose = null;\n  }\n}\n","<p-dialog\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [focusOnShow]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{\n    'max-width': modalMaxWidth(),\n    width: 'calc(100% - var(--tk-spacing-base-200))',\n  }\"\n  (onHide)=\"handleClose()\"\n  (onShow)=\"checkScroll()\"\n  class=\"tk-modal\">\n  @if (title()) {\n    <ng-template pTemplate=\"header\">\n      <span class=\"p-dialog-title\">{{ title() }}</span>\n    </ng-template>\n  }\n  <section class=\"tk-modal__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n\n  @if (hasFooter()) {\n    <ng-template pTemplate=\"footer\">\n      <section\n        class=\"tk-modal__footer\"\n        [class.tk-modal__footer--with-content]=\"hasScroll\">\n        @for (btn of footerButtons()!; track $index) {\n          <tk-button\n            [label]=\"btn.label\"\n            [severity]=\"btn.severity\"\n            [variant]=\"btn.variant\"\n            (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.space)=\"handleAction(btn.action, btn.returnValue)\" />\n        }\n      </section>\n    </ng-template>\n  }\n</p-dialog>\n","import { Injectable, ApplicationRef, ComponentRef, createComponent, EmbeddedViewRef, inject } from '@angular/core';\nimport { ModalComponent } from '../modal.component';\nimport { ModalConfig } from '../modal.types';\nimport { TkDialogRef } from '@tekus/design-system/core/types';\n\n/**\n * @service ModalService\n * @description\n * Service responsible for programmatically opening and managing modal dialogs.\n * It handles component creation, attachment to the document body, and cleanup.\n */\n@Injectable({ providedIn: 'root' })\nexport class ModalService {\n  private readonly appRef = inject(ApplicationRef);\n\n  /** Reference to the currently open modal dialog ref */\n  private dialogRef: TkDialogRef<ModalComponent> | null = null;\n\n  /** Internal getter for testing purposes */\n  get modalRefForTesting(): ComponentRef<ModalComponent> | null {\n    return this.dialogRef?.componentRef || null;\n  }\n  /** Internal setter for testing purposes */\n  set modalRefForTesting(ref: ComponentRef<ModalComponent> | null) {\n    this.dialogRef = ref ? new TkDialogRef(ref) : null;\n  }\n\n  /**\n   * Opens a modal dialog with the provided configuration.\n   * Only one modal can be open at a time.\n   * @param config Configuration object for the modal (title, content, buttons, etc.)\n   * @returns A TkDialogRef for the opened modal.\n   */\n  open<T = unknown, R = unknown>(config: ModalConfig): TkDialogRef<ModalComponent<T>, R> {\n    if (this.dialogRef) {\n      return this.dialogRef as unknown as TkDialogRef<ModalComponent<T>, R>;\n    }\n\n    const componentRef = createComponent(ModalComponent, {\n      environmentInjector: this.appRef.injector,\n    }) as ComponentRef<ModalComponent<T>>;\n\n    this.appRef.attachView(componentRef.hostView);\n\n    const domElem = (componentRef.hostView as EmbeddedViewRef<unknown>).rootNodes[0] as HTMLElement;\n    document.body.appendChild(domElem);\n\n    const dialogRef = new TkDialogRef<ModalComponent<T>, R>(componentRef);\n    this.dialogRef = dialogRef as unknown as TkDialogRef<ModalComponent>;\n\n    componentRef.setInput('title', config.title);\n    componentRef.setInput('content', config.content);\n    componentRef.setInput('footerButtons', config.footerButtons || []);\n    componentRef.setInput('size', config.size || 'small');\n    componentRef.setInput('closable', config.closable ?? true);\n    componentRef.setInput('closeOnOutsideClick', config.closeOnOutsideClick ?? false);\n    componentRef.setInput('interceptor', config.interceptor);\n    componentRef.setInput('data', config.data || {});\n    componentRef.setInput('dialogRef', dialogRef);\n\n    componentRef.instance.closed.subscribe((value: unknown) => {\n      dialogRef.emitClose(value as R);\n      this.appRef.detachView(componentRef.hostView);\n      componentRef.destroy();\n      this.dialogRef = null;\n    });\n\n    componentRef.instance.open();\n\n    return dialogRef;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/tekus-design-system-components-panel-menu.mjs

@@ -24,6 +24,7 @@ class PanelMenuComponent {
                 item.command({ originalEvent: event, item });
             }
             this.itemClick.emit({ event, item });
+            event.stopPropagation();
         }
     }
     isSelected(item) {

package/fesm2022/tekus-design-system-components-panel-menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-panel-menu.mjs","sources":["../../../projects/design-system/components/panel-menu/src/panel-menu.component.ts","../../../projects/design-system/components/panel-menu/src/panel-menu.component.html","../../../projects/design-system/components/panel-menu/tekus-design-system-components-panel-menu.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output, signal } from '@angular/core';\nimport { PanelMenuModule } from 'primeng/panelmenu';\nimport { MenuItem } from 'primeng/api';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n@Component({\n  selector: 'tk-panel-menu',\n  imports: [PanelMenuModule, IconComponent],\n  templateUrl: './panel-menu.component.html',\n  styleUrl: './panel-menu.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PanelMenuComponent {\n  model = input<MenuItem[]>([]);\n\n  variant = input<'default' | 'inverse'>('default');\n\n  multiple = input<boolean>(false);\n\n  styleClass = input<string>('');\n\n  itemClick = output<{ event: Event; item: MenuItem }>();\n\n  selectedItem = signal<MenuItem | null>(null);\n\n  onItemClick(event: Event, item: MenuItem) {\n    if (item.disabled) {\n      return;\n    }\n\n    if (!item.items) {\n      this.selectedItem.set(item);\n\n      if (item.command) {\n        item.command({ originalEvent: event, item });\n      }\n\n      this.itemClick.emit({ event, item });\n    }\n  }\n\n  isSelected(item: MenuItem): boolean {\n    if (item.items) return false;\n    const current = this.selectedItem();\n    if (!current) return false;\n    \n    // Match by ID if both have it, otherwise fallback to object reference\n    if (current.id && item.id) {\n      return current.id === item.id;\n    }\n    return current === item;\n  }\n}\n","<div [class]=\"'tk-panel-menu ' + variant() + ' ' + styleClass()\">\n  <p-panelmenu [model]=\"model()\" [multiple]=\"multiple()\">\n    <ng-template pTemplate=\"item\" #item let-item>\n      <button type=\"button\"\n              class=\"tk-pm-item-link\" \n              (click)=\"onItemClick($event, item)\" \n              (keydown.enter)=\"onItemClick($event, item)\"\n              (keydown.space)=\"onItemClick($event, item)\"\n              [class.tk-pm-item-selected]=\"isSelected(item)\">\n        <div class=\"tk-pm-item-content\">\n          @if (item.icon) {\n            <tk-icon [icon]=\"item.icon\" class=\"tk-pm-item-icon\"></tk-icon>\n          }\n          <span class=\"tk-pm-item-label\">{{ item.label }}</span>\n        </div>\n        @if (item.items) {\n          <tk-icon [icon]=\"item.expanded ? 'chevron-up' : 'chevron-down'\" class=\"tk-pm-item-chevron\"></tk-icon>\n        }\n      </button>\n    </ng-template>\n  </p-panelmenu>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-panel-menu.mjs","sources":["../../../projects/design-system/components/panel-menu/src/panel-menu.component.ts","../../../projects/design-system/components/panel-menu/src/panel-menu.component.html","../../../projects/design-system/components/panel-menu/tekus-design-system-components-panel-menu.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output, signal } from '@angular/core';\nimport { PanelMenuModule } from 'primeng/panelmenu';\nimport { MenuItem } from 'primeng/api';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n@Component({\n  selector: 'tk-panel-menu',\n  imports: [PanelMenuModule, IconComponent],\n  templateUrl: './panel-menu.component.html',\n  styleUrl: './panel-menu.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PanelMenuComponent {\n  model = input<MenuItem[]>([]);\n\n  variant = input<'default' | 'inverse'>('default');\n\n  multiple = input<boolean>(false);\n\n  styleClass = input<string>('');\n\n  itemClick = output<{ event: Event; item: MenuItem }>();\n\n  selectedItem = signal<MenuItem | null>(null);\n\n  onItemClick(event: Event, item: MenuItem) {\n    if (item.disabled) {\n      return;\n    }\n\n    if (!item.items) {\n      this.selectedItem.set(item);\n\n      if (item.command) {\n        item.command({ originalEvent: event, item });\n      }\n\n      this.itemClick.emit({ event, item });\n      event.stopPropagation();\n    }\n  }\n\n  isSelected(item: MenuItem): boolean {\n    if (item.items) return false;\n    const current = this.selectedItem();\n    if (!current) return false;\n    \n    // Match by ID if both have it, otherwise fallback to object reference\n    if (current.id && item.id) {\n      return current.id === item.id;\n    }\n    return current === item;\n  }\n}\n","<div [class]=\"'tk-panel-menu ' + variant() + ' ' + styleClass()\">\n  <p-panelmenu [model]=\"model()\" [multiple]=\"multiple()\">\n    <ng-template pTemplate=\"item\" #item let-item>\n      <button type=\"button\"\n              class=\"tk-pm-item-link\" \n              (click)=\"onItemClick($event, item)\" \n              (keydown.enter)=\"onItemClick($event, item)\"\n              (keydown.space)=\"onItemClick($event, item)\"\n              [class.tk-pm-item-selected]=\"isSelected(item)\">\n        <div class=\"tk-pm-item-content\">\n          @if (item.icon) {\n            <tk-icon [icon]=\"item.icon\" class=\"tk-pm-item-icon\"></tk-icon>\n          }\n          <span class=\"tk-pm-item-label\">{{ item.label }}</span>\n        </div>\n        @if (item.items) {\n          <tk-icon [icon]=\"item.expanded ? 'chevron-up' : 'chevron-down'\" class=\"tk-pm-item-chevron\"></tk-icon>\n        }\n      </button>\n    </ng-template>\n  </p-panelmenu>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}