npm - @tekus/design-system - Versions diffs - 5.27.0 → 5.28.0 - Mend

@tekus/design-system 5.27.0 → 5.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

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

@@ -136,11 +136,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 CHANGED Viewed

	@@ -1 +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":"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"}
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":"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"}

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

@@ -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-s) var(--tk-spacing-padding-m);margin:0;width:100%;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-s) var(--tk-spacing-padding-m);margin:0;width:100%;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 ADDED Viewed

@@ -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-toggle.mjs ADDED Viewed

@@ -0,0 +1,95 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, model, input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { NgControl, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i2 from 'primeng/toggleswitch';
+import { ToggleSwitchModule } from 'primeng/toggleswitch';
+import * as i3 from 'primeng/message';
+import { MessageModule } from 'primeng/message';
+class ToggleComponent {
+    constructor() {
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.destroyRef = inject(DestroyRef);
+        this.model = model(false, ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        this.control = input(new FormControl(), ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+        this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+        this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    get effectiveControl() {
+        return this.ngControl?.control || this.control();
+    }
+    ngOnInit() {
+        const control = this.effectiveControl;
+        if (control.value !== undefined && control.value !== null) {
+            this.model.set(!!control.value);
+        }
+        if (this.control() === control && this.disabled()) {
+            control.disable({ emitEvent: false });
+        }
+        else {
+            this.disabled.set(control.disabled);
+        }
+        control.statusChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.disabled.set(control.disabled);
+        });
+        control.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(value => {
+            this.model.set(!!value);
+        });
+    }
+    writeValue(value) {
+        this.model.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+        if (isDisabled) {
+            this.control().disable({ emitEvent: false });
+        }
+        else {
+            this.control().enable({ emitEvent: false });
+        }
+    }
+    onModelChange(value) {
+        this.model.set(value);
+        this.onChange(value);
+        this.effectiveControl.setValue(value, { emitEvent: false });
+        this.effectiveControl.markAsDirty();
+        this.onTouched();
+    }
+    onBlur() {
+        this.onTouched();
+        this.effectiveControl.markAsTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ToggleComponent, isStandalone: true, selector: "tk-toggle", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", disabled: "disabledChange" }, ngImport: i0, template: "<div class=\"tk-toggle-wrapper\">\n  <div class=\"tk-toggle-group\" [class.tk-disabled]=\"disabled()\">\n    <p-toggleswitch\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [disabled]=\"disabled()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"\n      (blur)=\"onBlur()\">\n    </p-toggleswitch>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-toggle-label\">{{ label() }}</label>\n    }\n  </div>\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .tk-toggle-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-toggle-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-toggle-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-toggle-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-toggle-label{cursor:pointer}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep p-toggleswitch.ng-invalid.ng-touched .p-toggleswitch,:host ::ng-deep p-toggleswitch.ng-invalid.ng-dirty .p-toggleswitch{outline:2px solid var(--tk-color-base-red-700, #cf2604);outline-offset:2px;border-radius:var(--p-toggleswitch-border-radius)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i2.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-toggle', imports: [ReactiveFormsModule, FormsModule, ToggleSwitchModule, MessageModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tk-toggle-wrapper\">\n  <div class=\"tk-toggle-group\" [class.tk-disabled]=\"disabled()\">\n    <p-toggleswitch\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [disabled]=\"disabled()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"\n      (blur)=\"onBlur()\">\n    </p-toggleswitch>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-toggle-label\">{{ label() }}</label>\n    }\n  </div>\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .tk-toggle-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-toggle-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-toggle-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-toggle-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-toggle-label{cursor:pointer}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep p-toggleswitch.ng-invalid.ng-touched .p-toggleswitch,:host ::ng-deep p-toggleswitch.ng-invalid.ng-dirty .p-toggleswitch{outline:2px solid var(--tk-color-base-red-700, #cf2604);outline-offset:2px;border-radius:var(--p-toggleswitch-border-radius)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }] } });
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { ToggleComponent };
+//# sourceMappingURL=tekus-design-system-components-toggle.mjs.map

package/fesm2022/tekus-design-system-components-toggle.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tekus-design-system-components-toggle.mjs","sources":["../../../projects/design-system/components/toggle/src/toggle.component.ts","../../../projects/design-system/components/toggle/src/toggle.component.html","../../../projects/design-system/components/toggle/tekus-design-system-components-toggle.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n input,\n model,\n OnInit,\n inject,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n ControlValueAccessor,\n FormControl,\n ReactiveFormsModule,\n NgControl,\n FormsModule,\n} from '@angular/forms';\nimport { ToggleSwitchModule } from 'primeng/toggleswitch';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n selector: 'tk-toggle',\n imports: [ReactiveFormsModule, FormsModule, ToggleSwitchModule, MessageModule],\n templateUrl: './toggle.component.html',\n styleUrl: './toggle.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleComponent implements ControlValueAccessor, OnInit {\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n model = model<boolean>(false);\n\n label = input<string>('');\n\n name = input<string>('');\n\n inputId = input<string>('');\n\n control = input<FormControl>(new FormControl());\n\n errorMessage = input<string>('');\n\n disabled = model<boolean>(false);\n\n get effectiveControl(): FormControl {\n return (this.ngControl?.control as FormControl) || this.control();\n }\n\n onChange: (value: boolean) => void = () => {};\n onTouched: () => void = () => {};\n\n ngOnInit(): void {\n const control = this.effectiveControl;\n\n if (control.value !== undefined && control.value !== null) {\n this.model.set(!!control.value);\n }\n\n if (this.control() === control && this.disabled()) {\n control.disable({ emitEvent: false });\n } else {\n this.disabled.set(control.disabled);\n }\n\n control.statusChanges\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n this.disabled.set(control.disabled);\n });\n\n control.valueChanges\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(value => {\n this.model.set(!!value);\n });\n }\n\n writeValue(value: boolean): void {\n this.model.set(!!value);\n }\n\n registerOnChange(fn: (value: boolean) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n if (isDisabled) {\n this.control().disable({ emitEvent: false });\n } else {\n this.control().enable({ emitEvent: false });\n }\n }\n\n onModelChange(value: boolean): void {\n this.model.set(value);\n this.onChange(value);\n this.effectiveControl.setValue(value, { emitEvent: false });\n this.effectiveControl.markAsDirty();\n this.onTouched();\n }\n\n onBlur(): void {\n this.onTouched();\n this.effectiveControl.markAsTouched();\n }\n}\n","<div class=\"tk-toggle-wrapper\">\n <div class=\"tk-toggle-group\" [class.tk-disabled]=\"disabled()\">\n <p-toggleswitch\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n [class.ng-invalid]=\"effectiveControl.invalid\"\n [class.ng-dirty]=\"effectiveControl.dirty\"\n [class.ng-touched]=\"effectiveControl.touched\"\n (blur)=\"onBlur()\">\n </p-toggleswitch>\n @if (label()) {\n <label [for]=\"inputId()\" class=\"tk-toggle-label\">{{ label() }}</label>\n }\n </div>\n @if (\n effectiveControl.invalid &&\n (effectiveControl.dirty || effectiveControl.touched) &&\n errorMessage()\n ) {\n <div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n errorMessage()\n }}</p-message>\n </div>\n </div>\n }\n</div>\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-topbar.mjs CHANGED Viewed

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { ButtonComponent } from '@tekus/design-system/components/button';
 import { TagComponent } from '@tekus/design-system/components/tag';
+import { BreadCrumpsComponent } from '@tekus/design-system/components/bread-crumps';
 /**
  * @component TopbarComponent
@@ -15,18 +16,24 @@ class TopbarComponent {
         this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         /** Optional list of actions displayed in the header. */
         this.actions = input(null, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+        /** Whether to show breadcrumbs instead of a simple title. */
+        this.showBreadcrumbs = input(false, ...(ngDevMode ? [{ debugName: "showBreadcrumbs" }] : /* istanbul ignore next */ []));
+        /** Manual breadcrumb items. If not provided and showBreadcrumbs is true, it uses automatic routing. */
+        this.breadcrumbItems = input(null, ...(ngDevMode ? [{ debugName: "breadcrumbItems" }] : /* istanbul ignore next */ []));
+        /** Size of the breadcrumbs. Can be 'small' or 'large'. Default is 'large' for topbar. */
+        this.breadcrumbSize = input('large', ...(ngDevMode ? [{ debugName: "breadcrumbSize" }] : /* istanbul ignore next */ []));
         /** Optional list of tags displayed in the meta section. */
         this.tags = input(null, ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
         /** Optional description displayed in the meta section. */
         this.description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: TopbarComponent, isStandalone: true, selector: "tk-topbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tk-topbar\">\n  <div class=\"tk-topbar__header\">\n    <h2 class=\"tk-topbar__title\">{{ title() }}</h2>\n\n    @if (actions()?.length) {\n    <div class=\"tk-topbar__actions\">\n      @for (action of actions(); track $index) {\n        @if (action.type === 'primary') {\n        <tk-button\n          [label]=\"action.label\"\n          severity=\"primary\"\n          [tooltipText]=\"action.tooltipText\"\n          (clicked)=\"action.onClick()\">\n        </tk-button>\n        } @else {\n        <tk-button\n          [icon]=\"action.icon\"\n          severity=\"secondary\"\n          [tooltipText]=\"action.tooltipText\"\n          (clicked)=\"action.onClick()\">\n        </tk-button>\n        }\n      }\n    </div>\n    }\n  </div>\n\n  @if (tags()?.length || description()) {\n  <div class=\"tk-topbar__meta\">\n    @if (tags()?.length) {\n    <div class=\"tk-topbar__tags\">\n      @for (tag of tags(); track $index) {\n      <tk-tag\n        [value]=\"tag.label\"\n        [severity]=\"tag.variant ?? 'secondary'\"></tk-tag>\n      }\n    </div>\n    }\n    @if (description()) {\n    <p class=\"tk-topbar__description\">{{ description() }}</p>\n    }\n  </div>\n  }\n</div>\n", styles: [".tk-topbar{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem);padding:var(--tk-spacing-padding-m, 1rem) var(--tk-spacing-padding-m, 1rem);background:var(--tk-color-background-soft, #f2f1f1);border-radius:var(--tk-borderRadius-s, .5rem)}.tk-topbar__header{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:var(--tk-spacing-gap-m, 1rem);width:100%}.tk-topbar__title{margin:0;flex:1 1 auto;min-width:12.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--tk-font-size-headers-l, 2rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #191a1b)}.tk-topbar__actions{display:flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem);margin-left:auto}@media(max-width:768px){.tk-topbar__header{flex-wrap:wrap}.tk-topbar__actions{width:100%;margin-left:0}}.tk-topbar__meta{display:flex;align-items:center;gap:var(--tk-spacing-gap-m, 1rem);width:100%}.tk-topbar__tags{display:flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-topbar__description{margin:0;font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-text-default, #191a1b)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: TopbarComponent, isStandalone: true, selector: "tk-topbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItems: { classPropertyName: "breadcrumbItems", publicName: "breadcrumbItems", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbSize: { classPropertyName: "breadcrumbSize", publicName: "breadcrumbSize", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tk-topbar\">\n  <div class=\"tk-topbar__header\">\n    @if (showBreadcrumbs()) {\n      <tk-bread-crumps [items]=\"breadcrumbItems()\" [size]=\"breadcrumbSize()\"></tk-bread-crumps>\n    } @else {\n      <h2 class=\"tk-topbar__title\">{{ title() }}</h2>\n    }\n\n    @if (actions()?.length) {\n    <div class=\"tk-topbar__actions\">\n      @for (action of actions(); track $index) {\n        @if (action.type === 'primary') {\n        <tk-button\n          [label]=\"action.label\"\n          severity=\"primary\"\n          [tooltipText]=\"action.tooltipText\"\n          (clicked)=\"action.onClick()\">\n        </tk-button>\n        } @else {\n        <tk-button\n          [icon]=\"action.icon\"\n          severity=\"secondary\"\n          [tooltipText]=\"action.tooltipText\"\n          (clicked)=\"action.onClick()\">\n        </tk-button>\n        }\n      }\n    </div>\n    }\n  </div>\n\n  @if (tags()?.length || description()) {\n  <div class=\"tk-topbar__meta\">\n    @if (tags()?.length) {\n    <div class=\"tk-topbar__tags\">\n      @for (tag of tags(); track $index) {\n      <tk-tag\n        [value]=\"tag.label\"\n        [severity]=\"tag.variant ?? 'secondary'\"></tk-tag>\n      }\n    </div>\n    }\n    @if (description()) {\n    <p class=\"tk-topbar__description\">{{ description() }}</p>\n    }\n  </div>\n  }\n</div>\n", styles: [".tk-topbar{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem);padding:var(--tk-spacing-padding-m, 1rem) var(--tk-spacing-padding-m, 1rem);background:var(--tk-color-background-soft, #f2f1f1);border-radius:var(--tk-borderRadius-s, .5rem)}.tk-topbar__header{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:var(--tk-spacing-gap-m, 1rem);width:100%}.tk-topbar__title{margin:0;flex:1 1 auto;min-width:12.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--tk-font-size-headers-l, 2rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #191a1b)}.tk-topbar__actions{display:flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem);margin-left:auto}@media(max-width:768px){.tk-topbar__header{flex-wrap:wrap}.tk-topbar__actions{width:100%;margin-left:0}}.tk-topbar__meta{display:flex;align-items:center;gap:var(--tk-spacing-gap-m, 1rem);width:100%}.tk-topbar__tags{display:flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-topbar__description{margin:0;font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-text-default, #191a1b)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { kind: "component", type: BreadCrumpsComponent, selector: "tk-bread-crumps", inputs: ["items", "size", "onlyCurrent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-topbar', imports: [ButtonComponent, TagComponent], template: "<div class=\"tk-topbar\">\n  <div class=\"tk-topbar__header\">\n    <h2 class=\"tk-topbar__title\">{{ title() }}</h2>\n\n    @if (actions()?.length) {\n    <div class=\"tk-topbar__actions\">\n      @for (action of actions(); track $index) {\n        @if (action.type === 'primary') {\n        <tk-button\n          [label]=\"action.label\"\n          severity=\"primary\"\n          [tooltipText]=\"action.tooltipText\"\n          (clicked)=\"action.onClick()\">\n        </tk-button>\n        } @else {\n        <tk-button\n          [icon]=\"action.icon\"\n          severity=\"secondary\"\n          [tooltipText]=\"action.tooltipText\"\n          (clicked)=\"action.onClick()\">\n        </tk-button>\n        }\n      }\n    </div>\n    }\n  </div>\n\n  @if (tags()?.length || description()) {\n  <div class=\"tk-topbar__meta\">\n    @if (tags()?.length) {\n    <div class=\"tk-topbar__tags\">\n      @for (tag of tags(); track $index) {\n      <tk-tag\n        [value]=\"tag.label\"\n        [severity]=\"tag.variant ?? 'secondary'\"></tk-tag>\n      }\n    </div>\n    }\n    @if (description()) {\n    <p class=\"tk-topbar__description\">{{ description() }}</p>\n    }\n  </div>\n  }\n</div>\n", styles: [".tk-topbar{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem);padding:var(--tk-spacing-padding-m, 1rem) var(--tk-spacing-padding-m, 1rem);background:var(--tk-color-background-soft, #f2f1f1);border-radius:var(--tk-borderRadius-s, .5rem)}.tk-topbar__header{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:var(--tk-spacing-gap-m, 1rem);width:100%}.tk-topbar__title{margin:0;flex:1 1 auto;min-width:12.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--tk-font-size-headers-l, 2rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #191a1b)}.tk-topbar__actions{display:flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem);margin-left:auto}@media(max-width:768px){.tk-topbar__header{flex-wrap:wrap}.tk-topbar__actions{width:100%;margin-left:0}}.tk-topbar__meta{display:flex;align-items:center;gap:var(--tk-spacing-gap-m, 1rem);width:100%}.tk-topbar__tags{display:flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-topbar__description{margin:0;font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-text-default, #191a1b)}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-topbar', imports: [ButtonComponent, TagComponent, BreadCrumpsComponent], template: "<div class=\"tk-topbar\">\n  <div class=\"tk-topbar__header\">\n    @if (showBreadcrumbs()) {\n      <tk-bread-crumps [items]=\"breadcrumbItems()\" [size]=\"breadcrumbSize()\"></tk-bread-crumps>\n    } @else {\n      <h2 class=\"tk-topbar__title\">{{ title() }}</h2>\n    }\n\n    @if (actions()?.length) {\n    <div class=\"tk-topbar__actions\">\n      @for (action of actions(); track $index) {\n        @if (action.type === 'primary') {\n        <tk-button\n          [label]=\"action.label\"\n          severity=\"primary\"\n          [tooltipText]=\"action.tooltipText\"\n          (clicked)=\"action.onClick()\">\n        </tk-button>\n        } @else {\n        <tk-button\n          [icon]=\"action.icon\"\n          severity=\"secondary\"\n          [tooltipText]=\"action.tooltipText\"\n          (clicked)=\"action.onClick()\">\n        </tk-button>\n        }\n      }\n    </div>\n    }\n  </div>\n\n  @if (tags()?.length || description()) {\n  <div class=\"tk-topbar__meta\">\n    @if (tags()?.length) {\n    <div class=\"tk-topbar__tags\">\n      @for (tag of tags(); track $index) {\n      <tk-tag\n        [value]=\"tag.label\"\n        [severity]=\"tag.variant ?? 'secondary'\"></tk-tag>\n      }\n    </div>\n    }\n    @if (description()) {\n    <p class=\"tk-topbar__description\">{{ description() }}</p>\n    }\n  </div>\n  }\n</div>\n", styles: [".tk-topbar{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem);padding:var(--tk-spacing-padding-m, 1rem) var(--tk-spacing-padding-m, 1rem);background:var(--tk-color-background-soft, #f2f1f1);border-radius:var(--tk-borderRadius-s, .5rem)}.tk-topbar__header{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:var(--tk-spacing-gap-m, 1rem);width:100%}.tk-topbar__title{margin:0;flex:1 1 auto;min-width:12.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--tk-font-size-headers-l, 2rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #191a1b)}.tk-topbar__actions{display:flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem);margin-left:auto}@media(max-width:768px){.tk-topbar__header{flex-wrap:wrap}.tk-topbar__actions{width:100%;margin-left:0}}.tk-topbar__meta{display:flex;align-items:center;gap:var(--tk-spacing-gap-m, 1rem);width:100%}.tk-topbar__tags{display:flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-topbar__description{margin:0;font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-text-default, #191a1b)}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showBreadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumbs", required: false }] }], breadcrumbItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbItems", required: false }] }], breadcrumbSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbSize", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/tekus-design-system-components-topbar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tekus-design-system-components-topbar.mjs","sources":["../../../projects/design-system/components/topbar/src/topbar.component.ts","../../../projects/design-system/components/topbar/src/topbar.component.html","../../../projects/design-system/components/topbar/tekus-design-system-components-topbar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { TopbarAction, TopbarTag } from './topbar.types';\n\n/*\n @component TopbarComponent\n * @description\n * Layout component that renders a title with optional actions and metadata.\n * It composes `tk-button` and `tk-tag` and uses only design tokens for styles.\n /\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'tk-topbar',\n imports: [ButtonComponent, TagComponent],\n templateUrl: './topbar.component.html',\n styleUrl: './topbar.component.scss',\n})\nexport class TopbarComponent {\n /* Main title text for the topbar. /\n title = input.required<string>();\n\n /* Optional list of actions displayed in the header. /\n actions = input<TopbarAction[] \| null>(null);\n\n /* Optional list of tags displayed in the meta section. /\n tags = input<TopbarTag[] \| null>(null);\n\n /* Optional description displayed in the meta section. /\n description = input<string \| null>(null);\n}\n","<div class=\"tk-topbar\">\n <div class=\"tk-topbar__header\">\n <h2 class=\"tk-topbar__title\">{{ title() }}</h2>\n\n @if (actions()?.length) {\n <div class=\"tk-topbar__actions\">\n @for (action of actions(); track $index) {\n @if (action.type === 'primary') {\n <tk-button\n [label]=\"action.label\"\n severity=\"primary\"\n [tooltipText]=\"action.tooltipText\"\n (clicked)=\"action.onClick()\">\n </tk-button>\n } @else {\n <tk-button\n [icon]=\"action.icon\"\n severity=\"secondary\"\n [tooltipText]=\"action.tooltipText\"\n (clicked)=\"action.onClick()\">\n </tk-button>\n }\n }\n </div>\n }\n </div>\n\n @if (tags()?.length \|\| description()) {\n <div class=\"tk-topbar__meta\">\n @if (tags()?.length) {\n <div class=\"tk-topbar__tags\">\n @for (tag of tags(); track $index) {\n <tk-tag\n [value]=\"tag.label\"\n [severity]=\"tag.variant ?? 'secondary'\"></tk-tag>\n }\n </div>\n }\n @if (description()) {\n <p class=\"tk-topbar__description\">{{ description() }}</p>\n }\n </div>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;~~AAKA;;;;;~~AAKG;MAQU,eAAe,CAAA;AAP5B,IAAA,WAAA,GAAA;;AASE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;;AAGhC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAwB,IAAI,8EAAC;;AAG5C,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAqB,IAAI,2EAAC;;AAGtC,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAgB,IAAI,kFAAC;AACzC,IAAA;~~8GAZY~~,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,~~EAAA~~,~~YAAA,~~EAAA,~~IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,~~MAAA,EAAA,~~EAAA~~,~~KAAA~~,EAAA,~~EAAA~~,~~iBAAA,~~EAAA,~~OAAA~~,EAAA,~~UAAA~~,EAAA,~~OAAA~~,EAAA,~~QAAA,EAAA,~~IAAA,~~EAAA~~,~~UAAA~~,EAAA,~~IAAA~~,EAAA,~~iBAAA~~,EAAA,~~IAAA~~,EAAA,~~EAAA~~,OAAA,EAAA,~~EAAA~~,~~iBAAA,~~EAAA,~~SAAA~~,EAAA,UAAA,EAAA,SAAA,EAAA,~~QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,~~MAAA,EAAA,~~UAAA,EAAA,~~MAAA,EAAA,~~QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,~~aAAA,EAAA,~~UAAA~~,~~EAAA~~,~~aAAA,~~EAAA,~~QAAA~~,EAAA,~~IAAA~~,~~EAAA~~,~~UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClB5B,mrCA4CA,EAAA,MAAA,EAAA,~~CAAA~~,+rCAAA~~,~~CAAA,~~EAAA,~~YAAA,~~EAAA,~~CAAA,~~EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,~~ED9BY~~,~~eAAe~~,~~iLAAE~~,~~YAAY~~,EAAA,QAAA,EAAA,~~QAAA~~,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,~~UAAA~~,EAAA,~~iBAAA~~,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FAI5B~~,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;sCACS,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,WAAW,~~WACZ~~,CAAC,eAAe,EAAE,YAAY,CAAC,EAAA,QAAA,EAAA,~~mrCAAA,~~EAAA,MAAA,EAAA,CAAA,+rCAAA,CAAA,EAAA;;;~~AEd1C~~;;AAEG;;;;"}
1	+ {"version":3,"file":"tekus-design-system-components-topbar.mjs","sources":["../../../projects/design-system/components/topbar/src/topbar.component.ts","../../../projects/design-system/components/topbar/src/topbar.component.html","../../../projects/design-system/components/topbar/tekus-design-system-components-topbar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { BreadCrumpsComponent, BreadCrumpItem } from '@tekus/design-system/components/bread-crumps';\nimport { TopbarAction, TopbarTag } from './topbar.types';\n\n/*\n @component TopbarComponent\n * @description\n * Layout component that renders a title with optional actions and metadata.\n * It composes `tk-button` and `tk-tag` and uses only design tokens for styles.\n /\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'tk-topbar',\n imports: [ButtonComponent, TagComponent, BreadCrumpsComponent],\n templateUrl: './topbar.component.html',\n styleUrl: './topbar.component.scss',\n})\nexport class TopbarComponent {\n /* Main title text for the topbar. /\n title = input.required<string>();\n\n /* Optional list of actions displayed in the header. /\n actions = input<TopbarAction[] \| null>(null);\n \n /* Whether to show breadcrumbs instead of a simple title. /\n showBreadcrumbs = input<boolean>(false);\n\n /* Manual breadcrumb items. If not provided and showBreadcrumbs is true, it uses automatic routing. /\n breadcrumbItems = input<BreadCrumpItem[] \| null>(null);\n\n /* Size of the breadcrumbs. Can be 'small' or 'large'. Default is 'large' for topbar. /\n breadcrumbSize = input<'small' \| 'large'>('large');\n\n /* Optional list of tags displayed in the meta section. /\n tags = input<TopbarTag[] \| null>(null);\n\n /* Optional description displayed in the meta section. /\n description = input<string \| null>(null);\n}\n","<div class=\"tk-topbar\">\n <div class=\"tk-topbar__header\">\n @if (showBreadcrumbs()) {\n <tk-bread-crumps [items]=\"breadcrumbItems()\" [size]=\"breadcrumbSize()\"></tk-bread-crumps>\n } @else {\n <h2 class=\"tk-topbar__title\">{{ title() }}</h2>\n }\n\n @if (actions()?.length) {\n <div class=\"tk-topbar__actions\">\n @for (action of actions(); track $index) {\n @if (action.type === 'primary') {\n <tk-button\n [label]=\"action.label\"\n severity=\"primary\"\n [tooltipText]=\"action.tooltipText\"\n (clicked)=\"action.onClick()\">\n </tk-button>\n } @else {\n <tk-button\n [icon]=\"action.icon\"\n severity=\"secondary\"\n [tooltipText]=\"action.tooltipText\"\n (clicked)=\"action.onClick()\">\n </tk-button>\n }\n }\n </div>\n }\n </div>\n\n @if (tags()?.length \|\| description()) {\n <div class=\"tk-topbar__meta\">\n @if (tags()?.length) {\n <div class=\"tk-topbar__tags\">\n @for (tag of tags(); track $index) {\n <tk-tag\n [value]=\"tag.label\"\n [severity]=\"tag.variant ?? 'secondary'\"></tk-tag>\n }\n </div>\n }\n @if (description()) {\n <p class=\"tk-topbar__description\">{{ description() }}</p>\n }\n </div>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;AAMA;;;;;AAKG;MAQU,eAAe,CAAA;AAP5B,IAAA,WAAA,GAAA;;AASE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;;AAGhC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAwB,IAAI,8EAAC;;AAG5C,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAU,KAAK,sFAAC;;AAGvC,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAA0B,IAAI,sFAAC;;AAGtD,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAoB,OAAO,qFAAC;;AAGlD,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAqB,IAAI,2EAAC;;AAGtC,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAgB,IAAI,kFAAC;AACzC,IAAA;8GArBY,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,ogCCnB5B,+0CAgDA,EAAA,MAAA,EAAA,CAAA,+rCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDjCY,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,MAAA,EAAA,aAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,YAAY,qGAAE,oBAAoB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,aAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAIlD,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;sCACS,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,WAAW,EAAA,OAAA,EACZ,CAAC,eAAe,EAAE,YAAY,EAAE,oBAAoB,CAAC,EAAA,QAAA,EAAA,+0CAAA,EAAA,MAAA,EAAA,CAAA,+rCAAA,CAAA,EAAA;;;AEfhE;;AAEG;;;;"}