ng-zenduit 2.0.13 → 2.0.14

package/esm2020/lib/top-nav/zen-top-nav.component.mjs

@@ -53,10 +53,10 @@ export class ZenTopNavComponent {
     }
 }
 ZenTopNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenTopNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZenTopNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenTopNavComponent, selector: "zen-top-nav", inputs: { breadcrumbs: "breadcrumbs", submoduleItems: "submoduleItems", activeSubmodule: "activeSubmodule", showBackButton: "showBackButton", profileData: "profileData", profileMenuItems: "profileMenuItems", showClarity: "showClarity", notificationCount: "notificationCount", tabs: "tabs", activeTab: "activeTab" }, outputs: { back: "back", breadcrumbClick: "breadcrumbClick", submoduleChange: "submoduleChange", tabChange: "tabChange", clarityClick: "clarityClick", notificationClick: "notificationClick", chatClick: "chatClick", profileMenuItemClick: "profileMenuItemClick" }, ngImport: i0, template: "<div class=\"zen-top-nav\" [class.zen-top-nav--with-tabs]=\"hasTabs\">\n  <!-- Main bar -->\n  <div class=\"zen-top-nav__bar\">\n    <!-- Left side -->\n    <div class=\"zen-top-nav__left\">\n      <!-- Back button -->\n      <button *ngIf=\"showBackButton\" class=\"zen-top-nav__back\" type=\"button\" (click)=\"onBack()\">\n        <zen-icon name=\"arrow-left\" [customColor]=\"'#667085'\"\n                  class=\"zen-top-nav__back-icon\"></zen-icon>\n      </button>\n\n      <!-- Option A: Submodule tabs -->\n      <div *ngIf=\"hasSubmodules\" class=\"zen-top-nav__submodules\">\n        <zen-submodule-item *ngFor=\"let item of submoduleItems\"\n                            [label]=\"item.label\"\n                            [icon]=\"item.icon\"\n                            [current]=\"activeSubmodule === (item.tag || item.label)\"\n                            (activate)=\"onSubmoduleClick(item)\">\n        </zen-submodule-item>\n      </div>\n\n      <!-- Option B: Breadcrumbs -->\n      <div *ngIf=\"!hasSubmodules && breadcrumbs.length\" class=\"zen-top-nav__breadcrumbs\">\n        <ng-container *ngFor=\"let crumb of breadcrumbs; let i = index; let last = last\">\n          <div class=\"zen-top-nav__breadcrumb-item\"\n               (click)=\"onBreadcrumbClick(crumb)\">\n            <zen-icon *ngIf=\"crumb.icon\"\n                      class=\"zen-top-nav__breadcrumb-icon\"\n                      [name]=\"crumb.icon\"\n                      [customColor]=\"getBreadcrumbColor(crumb, i)\"></zen-icon>\n            <span *ngIf=\"crumb.text\"\n                  class=\"zen-top-nav__breadcrumb-text\"\n                  [style.color]=\"getBreadcrumbColor(crumb, i)\">\n              {{ crumb.text }}\n            </span>\n            <div *ngIf=\"crumb.tooltip\" class=\"zen-top-nav__breadcrumb-tooltip\">{{ crumb.tooltip }}</div>\n          </div>\n          <zen-icon *ngIf=\"!last\"\n                    class=\"zen-top-nav__breadcrumb-chevron\"\n                    name=\"chevron-right\"\n                    [customColor]=\"'#667085'\"></zen-icon>\n        </ng-container>\n      </div>\n\n      <!-- Option C: Content projection for custom left content -->\n      <ng-content select=\"[topNavLeft]\"></ng-content>\n    </div>\n\n    <!-- Right side: Top menu items -->\n    <div class=\"zen-top-nav__right\">\n      <ng-content select=\"[topNavRight]\"></ng-content>\n      <zen-top-nav-item *ngIf=\"showClarity\"\n                        menu=\"clarity\"\n                        (activate)=\"clarityClick.emit()\"></zen-top-nav-item>\n      <div class=\"zen-top-nav__actions\">\n        <zen-top-nav-item menu=\"chat\"\n                          (activate)=\"chatClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"notification\"\n                          [badgeCount]=\"notificationCount\"\n                          (activate)=\"notificationClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"profile\"\n                          [profileData]=\"profileData\"\n                          [profileMenuItems]=\"profileMenuItems\"\n                          (profileMenuItemClick)=\"profileMenuItemClick.emit($event)\"></zen-top-nav-item>\n      </div>\n    </div>\n  </div>\n\n  <!-- Horizontal tabs (second row) -->\n  <div *ngIf=\"hasTabs\" class=\"zen-top-nav__tabs\">\n    <div class=\"zen-top-nav__tabs-list\">\n      <a *ngFor=\"let tab of tabs\"\n         class=\"zen-top-nav__tab\"\n         [class.zen-top-nav__tab--active]=\"activeTab === tab.label\"\n         (click)=\"onTabClick(tab)\">\n        {{ tab.label }}\n      </a>\n    </div>\n    <div class=\"zen-top-nav__tabs-divider\"></div>\n  </div>\n</div>\n", styles: [".zen-top-nav{display:flex;flex-direction:column;width:100%;box-sizing:border-box;background-color:#101828}.zen-top-nav__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;border-bottom:1px solid rgba(255,255,255,.08)}.zen-top-nav--with-tabs .zen-top-nav__bar{border-bottom:none}.zen-top-nav__left{display:flex;align-items:center;gap:16px}.zen-top-nav__back{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;border:none;border-radius:8px;background:transparent;cursor:pointer;flex-shrink:0}.zen-top-nav__back:hover{background:rgba(255,255,255,.1)}.zen-top-nav__back-icon{display:inline-block;width:20px;height:20px}.zen-top-nav__submodules{display:flex;align-items:center;gap:4px}.zen-top-nav__breadcrumbs{display:flex;align-items:center;gap:12px;height:30px}.zen-top-nav__breadcrumb-item{display:flex;align-items:center;gap:4px;cursor:pointer;padding:8px;border-radius:8px;position:relative;transition:background-color .2s}.zen-top-nav__breadcrumb-item:hover{background:rgba(255,255,255,.1)}.zen-top-nav__breadcrumb-item:hover .zen-top-nav__breadcrumb-tooltip{display:block}.zen-top-nav__breadcrumb-tooltip{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:#344054;color:#fff;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:18px;padding:4px 8px;border-radius:6px;white-space:nowrap;z-index:10;pointer-events:none}.zen-top-nav__breadcrumb-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-bottom-color:#344054}.zen-top-nav__breadcrumb-icon{display:inline-block;width:20px;height:20px;flex-shrink:0}.zen-top-nav__breadcrumb-text{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;white-space:nowrap}.zen-top-nav__breadcrumb-chevron{display:inline-block;width:16px;height:16px;flex-shrink:0}.zen-top-nav__right{display:flex;align-items:center;gap:24px}.zen-top-nav__actions{display:flex;align-items:center;gap:8px}.zen-top-nav__tabs{display:flex;flex-direction:column;padding:12px 24px 0}.zen-top-nav__tabs-list{display:flex;gap:16px}.zen-top-nav__tab{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px 4px 11px;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#667085;cursor:pointer;text-decoration:none;border-bottom:2px solid transparent;transition:color .15s}.zen-top-nav__tab:hover{color:#d0d5dd}.zen-top-nav__tab--active{color:#105494;border-bottom-color:#105494}.zen-top-nav__tabs-divider{height:1px;background:#EAECF0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: i3.ZenSubmoduleItemComponent, selector: "zen-submodule-item", inputs: ["label", "icon", "current"], outputs: ["activate"] }, { kind: "component", type: i4.ZenTopNavItemComponent, selector: "zen-top-nav-item", inputs: ["menu", "state", "tooltipText", "badgeCount", "clarityLabel", "profileData", "profileMenuItems"], outputs: ["activate", "profileMenuItemClick"] }] });
+ZenTopNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenTopNavComponent, selector: "zen-top-nav", inputs: { breadcrumbs: "breadcrumbs", submoduleItems: "submoduleItems", activeSubmodule: "activeSubmodule", showBackButton: "showBackButton", profileData: "profileData", profileMenuItems: "profileMenuItems", showClarity: "showClarity", notificationCount: "notificationCount", tabs: "tabs", activeTab: "activeTab" }, outputs: { back: "back", breadcrumbClick: "breadcrumbClick", submoduleChange: "submoduleChange", tabChange: "tabChange", clarityClick: "clarityClick", notificationClick: "notificationClick", chatClick: "chatClick", profileMenuItemClick: "profileMenuItemClick" }, ngImport: i0, template: "<div class=\"zen-top-nav\" [class.zen-top-nav--with-tabs]=\"hasTabs\">\n  <!-- Main bar -->\n  <div class=\"zen-top-nav__bar\">\n    <!-- Left side -->\n    <div class=\"zen-top-nav__left\">\n      <!-- Back button -->\n      <button *ngIf=\"showBackButton\" class=\"zen-top-nav__back\" type=\"button\" (click)=\"onBack()\">\n        <zen-icon name=\"arrow-left\" [customColor]=\"'#667085'\"\n                  class=\"zen-top-nav__back-icon\"></zen-icon>\n      </button>\n\n      <!-- Option A: Submodule tabs -->\n      <div *ngIf=\"hasSubmodules\" class=\"zen-top-nav__submodules\">\n        <zen-submodule-item *ngFor=\"let item of submoduleItems\"\n                            [label]=\"item.label\"\n                            [icon]=\"item.icon\"\n                            [current]=\"activeSubmodule === (item.tag || item.label)\"\n                            (activate)=\"onSubmoduleClick(item)\">\n        </zen-submodule-item>\n      </div>\n\n      <!-- Option B: Breadcrumbs -->\n      <div *ngIf=\"!hasSubmodules && breadcrumbs.length\" class=\"zen-top-nav__breadcrumbs\">\n        <ng-container *ngFor=\"let crumb of breadcrumbs; let i = index; let last = last\">\n          <div class=\"zen-top-nav__breadcrumb-item\"\n               (click)=\"onBreadcrumbClick(crumb)\">\n            <zen-icon *ngIf=\"crumb.icon\"\n                      class=\"zen-top-nav__breadcrumb-icon\"\n                      [name]=\"crumb.icon\"\n                      [customColor]=\"getBreadcrumbColor(crumb, i)\"></zen-icon>\n            <span *ngIf=\"crumb.text\"\n                  class=\"zen-top-nav__breadcrumb-text\"\n                  [style.color]=\"getBreadcrumbColor(crumb, i)\">\n              {{ crumb.text }}\n            </span>\n            <div *ngIf=\"crumb.tooltip\" class=\"zen-top-nav__breadcrumb-tooltip\">{{ crumb.tooltip }}</div>\n          </div>\n          <zen-icon *ngIf=\"!last\"\n                    class=\"zen-top-nav__breadcrumb-chevron\"\n                    name=\"chevron-right\"\n                    [customColor]=\"'#667085'\"></zen-icon>\n        </ng-container>\n      </div>\n\n      <!-- Option C: Content projection for custom left content -->\n      <ng-content select=\"[topNavLeft]\"></ng-content>\n    </div>\n\n    <!-- Right side: Top menu items -->\n    <div class=\"zen-top-nav__right\">\n      <ng-content select=\"[topNavRight]\"></ng-content>\n      <zen-top-nav-item *ngIf=\"showClarity\"\n                        menu=\"clarity\"\n                        (activate)=\"clarityClick.emit()\"></zen-top-nav-item>\n      <div class=\"zen-top-nav__actions\">\n        <zen-top-nav-item menu=\"chat\"\n                          (activate)=\"chatClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"notification\"\n                          [badgeCount]=\"notificationCount\"\n                          (activate)=\"notificationClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"profile\"\n                          [profileData]=\"profileData\"\n                          [profileMenuItems]=\"profileMenuItems\"\n                          (profileMenuItemClick)=\"profileMenuItemClick.emit($event)\"></zen-top-nav-item>\n      </div>\n    </div>\n  </div>\n\n  <!-- Horizontal tabs (second row) -->\n  <div *ngIf=\"hasTabs\" class=\"zen-top-nav__tabs\">\n    <div class=\"zen-top-nav__tabs-list\">\n      <a *ngFor=\"let tab of tabs\"\n         class=\"zen-top-nav__tab\"\n         [class.zen-top-nav__tab--active]=\"activeTab === tab.label\"\n         (click)=\"onTabClick(tab)\">\n        {{ tab.label }}\n      </a>\n    </div>\n    <div class=\"zen-top-nav__tabs-divider\"></div>\n  </div>\n</div>\n", styles: [".zen-top-nav{display:flex;flex-direction:column;width:100%;min-width:-moz-fit-content;min-width:fit-content;box-sizing:border-box;background-color:#101828}.zen-top-nav__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;border-bottom:1px solid rgba(255,255,255,.08)}.zen-top-nav--with-tabs .zen-top-nav__bar{border-bottom:none}.zen-top-nav__left{display:flex;align-items:center;gap:16px}.zen-top-nav__back{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;border:none;border-radius:8px;background:transparent;cursor:pointer;flex-shrink:0}.zen-top-nav__back:hover{background:rgba(255,255,255,.1)}.zen-top-nav__back-icon{display:inline-block;width:20px;height:20px}.zen-top-nav__submodules{display:flex;align-items:center;gap:4px}.zen-top-nav__breadcrumbs{display:flex;align-items:center;gap:12px;height:30px}.zen-top-nav__breadcrumb-item{display:flex;align-items:center;gap:4px;cursor:pointer;padding:8px;border-radius:8px;position:relative;transition:background-color .2s}.zen-top-nav__breadcrumb-item:hover{background:rgba(255,255,255,.1)}.zen-top-nav__breadcrumb-item:hover .zen-top-nav__breadcrumb-tooltip{display:block}.zen-top-nav__breadcrumb-tooltip{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:#344054;color:#fff;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:18px;padding:4px 8px;border-radius:6px;white-space:nowrap;z-index:10;pointer-events:none}.zen-top-nav__breadcrumb-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-bottom-color:#344054}.zen-top-nav__breadcrumb-icon{display:inline-block;width:20px;height:20px;flex-shrink:0}.zen-top-nav__breadcrumb-text{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;white-space:nowrap}.zen-top-nav__breadcrumb-chevron{display:inline-block;width:16px;height:16px;flex-shrink:0}.zen-top-nav__right{display:flex;align-items:center;gap:24px}.zen-top-nav__actions{display:flex;align-items:center;gap:8px}.zen-top-nav__tabs{display:flex;flex-direction:column;padding:12px 24px 0}.zen-top-nav__tabs-list{display:flex;gap:16px}.zen-top-nav__tab{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px 4px 11px;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#667085;cursor:pointer;text-decoration:none;border-bottom:2px solid transparent;transition:color .15s}.zen-top-nav__tab:hover{color:#d0d5dd}.zen-top-nav__tab--active{color:#105494;border-bottom-color:#105494}.zen-top-nav__tabs-divider{height:1px;background:#EAECF0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: i3.ZenSubmoduleItemComponent, selector: "zen-submodule-item", inputs: ["label", "icon", "current"], outputs: ["activate"] }, { kind: "component", type: i4.ZenTopNavItemComponent, selector: "zen-top-nav-item", inputs: ["menu", "state", "tooltipText", "badgeCount", "clarityLabel", "profileData", "profileMenuItems"], outputs: ["activate", "profileMenuItemClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenTopNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'zen-top-nav', template: "<div class=\"zen-top-nav\" [class.zen-top-nav--with-tabs]=\"hasTabs\">\n  <!-- Main bar -->\n  <div class=\"zen-top-nav__bar\">\n    <!-- Left side -->\n    <div class=\"zen-top-nav__left\">\n      <!-- Back button -->\n      <button *ngIf=\"showBackButton\" class=\"zen-top-nav__back\" type=\"button\" (click)=\"onBack()\">\n        <zen-icon name=\"arrow-left\" [customColor]=\"'#667085'\"\n                  class=\"zen-top-nav__back-icon\"></zen-icon>\n      </button>\n\n      <!-- Option A: Submodule tabs -->\n      <div *ngIf=\"hasSubmodules\" class=\"zen-top-nav__submodules\">\n        <zen-submodule-item *ngFor=\"let item of submoduleItems\"\n                            [label]=\"item.label\"\n                            [icon]=\"item.icon\"\n                            [current]=\"activeSubmodule === (item.tag || item.label)\"\n                            (activate)=\"onSubmoduleClick(item)\">\n        </zen-submodule-item>\n      </div>\n\n      <!-- Option B: Breadcrumbs -->\n      <div *ngIf=\"!hasSubmodules && breadcrumbs.length\" class=\"zen-top-nav__breadcrumbs\">\n        <ng-container *ngFor=\"let crumb of breadcrumbs; let i = index; let last = last\">\n          <div class=\"zen-top-nav__breadcrumb-item\"\n               (click)=\"onBreadcrumbClick(crumb)\">\n            <zen-icon *ngIf=\"crumb.icon\"\n                      class=\"zen-top-nav__breadcrumb-icon\"\n                      [name]=\"crumb.icon\"\n                      [customColor]=\"getBreadcrumbColor(crumb, i)\"></zen-icon>\n            <span *ngIf=\"crumb.text\"\n                  class=\"zen-top-nav__breadcrumb-text\"\n                  [style.color]=\"getBreadcrumbColor(crumb, i)\">\n              {{ crumb.text }}\n            </span>\n            <div *ngIf=\"crumb.tooltip\" class=\"zen-top-nav__breadcrumb-tooltip\">{{ crumb.tooltip }}</div>\n          </div>\n          <zen-icon *ngIf=\"!last\"\n                    class=\"zen-top-nav__breadcrumb-chevron\"\n                    name=\"chevron-right\"\n                    [customColor]=\"'#667085'\"></zen-icon>\n        </ng-container>\n      </div>\n\n      <!-- Option C: Content projection for custom left content -->\n      <ng-content select=\"[topNavLeft]\"></ng-content>\n    </div>\n\n    <!-- Right side: Top menu items -->\n    <div class=\"zen-top-nav__right\">\n      <ng-content select=\"[topNavRight]\"></ng-content>\n      <zen-top-nav-item *ngIf=\"showClarity\"\n                        menu=\"clarity\"\n                        (activate)=\"clarityClick.emit()\"></zen-top-nav-item>\n      <div class=\"zen-top-nav__actions\">\n        <zen-top-nav-item menu=\"chat\"\n                          (activate)=\"chatClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"notification\"\n                          [badgeCount]=\"notificationCount\"\n                          (activate)=\"notificationClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"profile\"\n                          [profileData]=\"profileData\"\n                          [profileMenuItems]=\"profileMenuItems\"\n                          (profileMenuItemClick)=\"profileMenuItemClick.emit($event)\"></zen-top-nav-item>\n      </div>\n    </div>\n  </div>\n\n  <!-- Horizontal tabs (second row) -->\n  <div *ngIf=\"hasTabs\" class=\"zen-top-nav__tabs\">\n    <div class=\"zen-top-nav__tabs-list\">\n      <a *ngFor=\"let tab of tabs\"\n         class=\"zen-top-nav__tab\"\n         [class.zen-top-nav__tab--active]=\"activeTab === tab.label\"\n         (click)=\"onTabClick(tab)\">\n        {{ tab.label }}\n      </a>\n    </div>\n    <div class=\"zen-top-nav__tabs-divider\"></div>\n  </div>\n</div>\n", styles: [".zen-top-nav{display:flex;flex-direction:column;width:100%;box-sizing:border-box;background-color:#101828}.zen-top-nav__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;border-bottom:1px solid rgba(255,255,255,.08)}.zen-top-nav--with-tabs .zen-top-nav__bar{border-bottom:none}.zen-top-nav__left{display:flex;align-items:center;gap:16px}.zen-top-nav__back{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;border:none;border-radius:8px;background:transparent;cursor:pointer;flex-shrink:0}.zen-top-nav__back:hover{background:rgba(255,255,255,.1)}.zen-top-nav__back-icon{display:inline-block;width:20px;height:20px}.zen-top-nav__submodules{display:flex;align-items:center;gap:4px}.zen-top-nav__breadcrumbs{display:flex;align-items:center;gap:12px;height:30px}.zen-top-nav__breadcrumb-item{display:flex;align-items:center;gap:4px;cursor:pointer;padding:8px;border-radius:8px;position:relative;transition:background-color .2s}.zen-top-nav__breadcrumb-item:hover{background:rgba(255,255,255,.1)}.zen-top-nav__breadcrumb-item:hover .zen-top-nav__breadcrumb-tooltip{display:block}.zen-top-nav__breadcrumb-tooltip{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:#344054;color:#fff;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:18px;padding:4px 8px;border-radius:6px;white-space:nowrap;z-index:10;pointer-events:none}.zen-top-nav__breadcrumb-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-bottom-color:#344054}.zen-top-nav__breadcrumb-icon{display:inline-block;width:20px;height:20px;flex-shrink:0}.zen-top-nav__breadcrumb-text{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;white-space:nowrap}.zen-top-nav__breadcrumb-chevron{display:inline-block;width:16px;height:16px;flex-shrink:0}.zen-top-nav__right{display:flex;align-items:center;gap:24px}.zen-top-nav__actions{display:flex;align-items:center;gap:8px}.zen-top-nav__tabs{display:flex;flex-direction:column;padding:12px 24px 0}.zen-top-nav__tabs-list{display:flex;gap:16px}.zen-top-nav__tab{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px 4px 11px;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#667085;cursor:pointer;text-decoration:none;border-bottom:2px solid transparent;transition:color .15s}.zen-top-nav__tab:hover{color:#d0d5dd}.zen-top-nav__tab--active{color:#105494;border-bottom-color:#105494}.zen-top-nav__tabs-divider{height:1px;background:#EAECF0}\n"] }]
+            args: [{ selector: 'zen-top-nav', template: "<div class=\"zen-top-nav\" [class.zen-top-nav--with-tabs]=\"hasTabs\">\n  <!-- Main bar -->\n  <div class=\"zen-top-nav__bar\">\n    <!-- Left side -->\n    <div class=\"zen-top-nav__left\">\n      <!-- Back button -->\n      <button *ngIf=\"showBackButton\" class=\"zen-top-nav__back\" type=\"button\" (click)=\"onBack()\">\n        <zen-icon name=\"arrow-left\" [customColor]=\"'#667085'\"\n                  class=\"zen-top-nav__back-icon\"></zen-icon>\n      </button>\n\n      <!-- Option A: Submodule tabs -->\n      <div *ngIf=\"hasSubmodules\" class=\"zen-top-nav__submodules\">\n        <zen-submodule-item *ngFor=\"let item of submoduleItems\"\n                            [label]=\"item.label\"\n                            [icon]=\"item.icon\"\n                            [current]=\"activeSubmodule === (item.tag || item.label)\"\n                            (activate)=\"onSubmoduleClick(item)\">\n        </zen-submodule-item>\n      </div>\n\n      <!-- Option B: Breadcrumbs -->\n      <div *ngIf=\"!hasSubmodules && breadcrumbs.length\" class=\"zen-top-nav__breadcrumbs\">\n        <ng-container *ngFor=\"let crumb of breadcrumbs; let i = index; let last = last\">\n          <div class=\"zen-top-nav__breadcrumb-item\"\n               (click)=\"onBreadcrumbClick(crumb)\">\n            <zen-icon *ngIf=\"crumb.icon\"\n                      class=\"zen-top-nav__breadcrumb-icon\"\n                      [name]=\"crumb.icon\"\n                      [customColor]=\"getBreadcrumbColor(crumb, i)\"></zen-icon>\n            <span *ngIf=\"crumb.text\"\n                  class=\"zen-top-nav__breadcrumb-text\"\n                  [style.color]=\"getBreadcrumbColor(crumb, i)\">\n              {{ crumb.text }}\n            </span>\n            <div *ngIf=\"crumb.tooltip\" class=\"zen-top-nav__breadcrumb-tooltip\">{{ crumb.tooltip }}</div>\n          </div>\n          <zen-icon *ngIf=\"!last\"\n                    class=\"zen-top-nav__breadcrumb-chevron\"\n                    name=\"chevron-right\"\n                    [customColor]=\"'#667085'\"></zen-icon>\n        </ng-container>\n      </div>\n\n      <!-- Option C: Content projection for custom left content -->\n      <ng-content select=\"[topNavLeft]\"></ng-content>\n    </div>\n\n    <!-- Right side: Top menu items -->\n    <div class=\"zen-top-nav__right\">\n      <ng-content select=\"[topNavRight]\"></ng-content>\n      <zen-top-nav-item *ngIf=\"showClarity\"\n                        menu=\"clarity\"\n                        (activate)=\"clarityClick.emit()\"></zen-top-nav-item>\n      <div class=\"zen-top-nav__actions\">\n        <zen-top-nav-item menu=\"chat\"\n                          (activate)=\"chatClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"notification\"\n                          [badgeCount]=\"notificationCount\"\n                          (activate)=\"notificationClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"profile\"\n                          [profileData]=\"profileData\"\n                          [profileMenuItems]=\"profileMenuItems\"\n                          (profileMenuItemClick)=\"profileMenuItemClick.emit($event)\"></zen-top-nav-item>\n      </div>\n    </div>\n  </div>\n\n  <!-- Horizontal tabs (second row) -->\n  <div *ngIf=\"hasTabs\" class=\"zen-top-nav__tabs\">\n    <div class=\"zen-top-nav__tabs-list\">\n      <a *ngFor=\"let tab of tabs\"\n         class=\"zen-top-nav__tab\"\n         [class.zen-top-nav__tab--active]=\"activeTab === tab.label\"\n         (click)=\"onTabClick(tab)\">\n        {{ tab.label }}\n      </a>\n    </div>\n    <div class=\"zen-top-nav__tabs-divider\"></div>\n  </div>\n</div>\n", styles: [".zen-top-nav{display:flex;flex-direction:column;width:100%;min-width:-moz-fit-content;min-width:fit-content;box-sizing:border-box;background-color:#101828}.zen-top-nav__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;border-bottom:1px solid rgba(255,255,255,.08)}.zen-top-nav--with-tabs .zen-top-nav__bar{border-bottom:none}.zen-top-nav__left{display:flex;align-items:center;gap:16px}.zen-top-nav__back{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;border:none;border-radius:8px;background:transparent;cursor:pointer;flex-shrink:0}.zen-top-nav__back:hover{background:rgba(255,255,255,.1)}.zen-top-nav__back-icon{display:inline-block;width:20px;height:20px}.zen-top-nav__submodules{display:flex;align-items:center;gap:4px}.zen-top-nav__breadcrumbs{display:flex;align-items:center;gap:12px;height:30px}.zen-top-nav__breadcrumb-item{display:flex;align-items:center;gap:4px;cursor:pointer;padding:8px;border-radius:8px;position:relative;transition:background-color .2s}.zen-top-nav__breadcrumb-item:hover{background:rgba(255,255,255,.1)}.zen-top-nav__breadcrumb-item:hover .zen-top-nav__breadcrumb-tooltip{display:block}.zen-top-nav__breadcrumb-tooltip{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:#344054;color:#fff;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:18px;padding:4px 8px;border-radius:6px;white-space:nowrap;z-index:10;pointer-events:none}.zen-top-nav__breadcrumb-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-bottom-color:#344054}.zen-top-nav__breadcrumb-icon{display:inline-block;width:20px;height:20px;flex-shrink:0}.zen-top-nav__breadcrumb-text{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;white-space:nowrap}.zen-top-nav__breadcrumb-chevron{display:inline-block;width:16px;height:16px;flex-shrink:0}.zen-top-nav__right{display:flex;align-items:center;gap:24px}.zen-top-nav__actions{display:flex;align-items:center;gap:8px}.zen-top-nav__tabs{display:flex;flex-direction:column;padding:12px 24px 0}.zen-top-nav__tabs-list{display:flex;gap:16px}.zen-top-nav__tab{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px 4px 11px;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#667085;cursor:pointer;text-decoration:none;border-bottom:2px solid transparent;transition:color .15s}.zen-top-nav__tab:hover{color:#d0d5dd}.zen-top-nav__tab--active{color:#105494;border-bottom-color:#105494}.zen-top-nav__tabs-divider{height:1px;background:#EAECF0}\n"] }]
         }], propDecorators: { breadcrumbs: [{
                 type: Input
             }], submoduleItems: [{

package/fesm2015/ng-zenduit.mjs

@@ -3145,11 +3145,24 @@ class ZenduSelectComponent {
             this.isOpen = false;
         });
     }
+    /**
+     * Handle Enter key on search input
+     */
+    onSearchEnter(event) {
+        var _a;
+        event.preventDefault();
+        if (this.enableAddNewOption && this.filteredOptions.length === 0 && ((_a = (this.searchText || this.searchInputValue)) === null || _a === void 0 ? void 0 : _a.trim())) {
+            this.handleAddNewOption();
+        }
+    }
     /**
      * Handle add new option
      */
     handleAddNewOption() {
-        this.addNewOption.emit({ value: this.searchText });
+        this.addNewOption.emit({ value: this.searchText || this.searchInputValue });
+        this.searchText = '';
+        this.searchInputValue = '';
+        this.filterOptions();
         this.hideDropDown(true);
     }
     /**
@@ -3268,10 +3281,10 @@ class ZenduSelectComponent {
     }
 }
 ZenduSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ZenduSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduSelectComponent, selector: "zen-select", inputs: { selectModel: "selectModel", options: "options", label: "label", supportingText: "supportingText", hintText: "hintText", placeholder: "placeholder", leadingType: "leadingType", leadingIcon: "leadingIcon", leadingAvatar: "leadingAvatar", leadingDotColor: "leadingDotColor", displayProp: "displayProp", idProp: "idProp", hasSearch: "hasSearch", isMultiselect: "isMultiselect", multiselect: "multiselect", hideSelectAll: "hideSelectAll", hideTreeSearch: "hideTreeSearch", required: "required", disabled: "disabled", error: "error", errorMessage: "errorMessage", destructive: "destructive", size: "size", returnOption: "returnOption", isTruncate: "isTruncate", enableAddNewOption: "enableAddNewOption", showDefaultAddOption: "showDefaultAddOption", newOptionText: "newOptionText", enableRemoveOption: "enableRemoveOption", removeOptionText: "removeOptionText", isLazyLoading: "isLazyLoading", lazyLoader: "lazyLoader", preferredOpenDirection: "preferredOpenDirection" }, outputs: { selectModelChange: "selectModelChange", addNewOption: "addNewOption", removeOption: "removeOption", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ZenduSelectOptionDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ZenduSelectValueDirective, descendants: true }, { propertyName: "buttonTemplate", first: true, predicate: ZenduSelectButtonDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"getStateClasses()\">\n  <!-- Label -->\n  <label class=\"app-select-label text text-sm text-weight-medium\" *ngIf=\"label\"\n         [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n    {{ label | translate }}\n    <span *ngIf=\"required\" class=\"required-indicator\">*</span>\n  </label>\n\n  <!-- Select Input -->\n  <div class=\"app-select-wrapper\">\n    <!-- Template Selection Based on Leading Type -->\n    <ng-container [ngSwitch]=\"leadingType\">\n      <!-- Default Select (no leading element) -->\n      <ng-container *ngSwitchCase=\"'default'\">\n        <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Icon Leading Select -->\n      <ng-container *ngSwitchCase=\"'icon'\">\n        <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Avatar Leading Select -->\n      <ng-container *ngSwitchCase=\"'avatar'\">\n        <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Dot Leading Select -->\n      <ng-container *ngSwitchCase=\"'dot'\">\n        <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Search Input Select -->\n      <ng-container *ngSwitchCase=\"'search'\">\n        <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n      </ng-container>\n    </ng-container>\n\n    <!-- Dropdown Menu -->\n    <div class=\"app-select-dropdown\" \n         [ngClass]=\"getDropdownDirectionClass()\"\n         *ngIf=\"isOpen\">\n        \n      <!-- Tree Mode: embed zen-groups inline -->\n      <ng-container *ngIf=\"isTreeMode && isMultiselect; else flatList\">\n        <zen-groups [inline]=\"true\"\n                    [dataSource]=\"$any(options)\"\n                    [filteredDataSource]=\"treeFilteredDataSource\"\n                    [hideSelectAll]=\"hideSelectAll\"\n                    [hideSearch]=\"hideTreeSearch\"\n                    [idProp]=\"idProp\"\n                    [displayProp]=\"displayProp\"\n                    [(isSelectedAll)]=\"isSelectedAll\"\n                    (isSelectedAllChange)=\"onTreeSelectAllChange($event)\"\n                    (checkedChange)=\"onTreeCheckedChange($event)\">\n        </zen-groups>\n      </ng-container>\n\n      <!-- Flat List Mode (default) -->\n      <ng-template #flatList>\n        <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n        <div class=\"app-select-search\" *ngIf=\"leadingType !== 'search' && hasSearch && !disabled\">\n          <zen-icon [name]=\"'search'\"\n                    [customColor]=\"'#667085'\">\n          </zen-icon>\n          <input type=\"text\"\n                 [(ngModel)]=\"searchText\"\n                 (ngModelChange)=\"onSearchChange()\"\n                 placeholder=\"Search\"\n                 class=\"app-select-search-input\">\n        </div>\n\n        <!-- Options List -->\n        <div class=\"app-select-options\">\n          <!-- Select All Option for Multiselect -->\n          <button *ngIf=\"isMultiselect && !hideSelectAll && filteredOptions.length > 0\"\n                  class=\"app-select-option select-all\"\n                  (click)=\"toggleSelectAll()\">\n            <zen-checkbox class=\"app-select-checkbox\"\n                          [checked]=\"isAllSelected()\"\n                          [disableValueChange]=\"true\"\n                          [label]=\"''\"\n                          size=\"sm\">\n            </zen-checkbox>\n            <span class=\"app-select-option-text\">\n              Select All\n            </span>\n          </button>\n\n          <div *ngIf=\"filteredOptions.length === 0\" class=\"app-select-no-options\">\n            No matching options found\n          </div>\n\n          <button *ngFor=\"let option of filteredOptions\"\n                  class=\"app-select-option\"\n                  [class.selected]=\"isSelected(option)\"\n                  (click)=\"selectOption(option)\">\n\n            <!-- Checkbox for Multiselect -->\n            <zen-checkbox class=\"app-select-checkbox\"\n                          *ngIf=\"isMultiselect\"\n                          [checked]=\"isSelected(option)\"\n                          [disableValueChange]=\"true\"\n                          [label]=\"''\"\n                          size=\"sm\">\n            </zen-checkbox>\n\n            <!-- Option Leading Element -->\n            <div class=\"app-select-option-leading\" *ngIf=\"leadingType !== 'default'\">\n              <ng-container [ngSwitch]=\"leadingType\">\n                <ng-container *ngSwitchCase=\"'icon'\">\n                  <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'avatar'\">\n                  <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'dot'\">\n                  <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n                </ng-container>\n              </ng-container>\n            </div>\n\n            <!-- Option Text -->\n            <div class=\"app-select-option-text-wrapper\">\n              <!-- Use custom template if provided -->\n              <ng-container *ngIf=\"!isMultiselect && optionTemplate; else defaultOptionText\">\n                <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n                             [ngTemplateOutletContext]=\"{ option: option }\">\n                </ng-template>\n              </ng-container>\n              <ng-template #defaultOptionText>\n                <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n                  {{ getName(option) | translate }}\n                </span>\n                <span class=\"app-select-option-secondary\" *ngIf=\"option.secondaryText\">\n                  {{ option.secondaryText }}\n                </span>\n              </ng-template>\n            </div>\n\n            <!-- Check Icon for Single Select -->\n            <zen-icon *ngIf=\"!isMultiselect && isSelected(option)\"\n                      class=\"app-select-option-check\"\n                      [name]=\"'check'\"\n                      [customColor]=\"'#136AB6'\">\n            </zen-icon>\n          </button>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n  \n  <!-- Hint text / Error message -->\n  <div *ngIf=\"(destructive && errorMessage) || hintText\" \n       class=\"app-select-hint text text-sm text-weight-regular\"\n       [ngClass]=\"{'destructive': destructive}\">\n    <i *ngIf=\"destructive\" class=\"material-icons-outlined hint-icon\">error_outline</i>\n    <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n  </div>\n</div>\n\n<!-- ============================================= -->\n<!-- MAIN SELECT INPUT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Default Select Template (No Leading Element) -->\n<ng-template #defaultSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Icon Select Template -->\n<ng-template #iconSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: getSelectedOption(), icon: leadingIcon }\"></ng-container>\n    </div>\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Avatar Select Template -->\n<ng-template #avatarSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: getSelectedOption(), avatar: leadingAvatar }\"></ng-container>\n    </div>\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Dot Select Template -->\n<ng-template #dotSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: getSelectedOption(), color: leadingDotColor }\"></ng-container>\n    </div>\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Search Input Template -->\n<ng-template #searchInputTemplate>\n  <div class=\"app-select-input app-select-search-input\"\n       [class.focused]=\"isOpen || searchFocused\"\n       [class.has-value]=\"!isModelEmpty()\">\n    \n    <!-- Search Icon -->\n    <zen-icon [name]=\"'search'\"\n              [customColor]=\"disabled ? '#9CA3AF' : '#667085'\">\n    </zen-icon>\n    \n    <!-- Search Input Field -->\n    <input type=\"text\"\n           class=\"app-select-search-field\"\n           [(ngModel)]=\"searchInputValue\"\n           (ngModelChange)=\"onSearchInputChange()\"\n           (focus)=\"onSearchFocus()\"\n           (blur)=\"onSearchBlur($event)\"\n           [placeholder]=\"selectedDisplay || placeholder\"\n           [disabled]=\"disabled\">\n  </div>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- SHARED COMPONENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Select Value Display -->\n<ng-template #selectValueDisplay>\n  <div class=\"app-select-value-wrapper\">\n    <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n      {{ selectedDisplay || placeholder | translate }}\n    </span>\n    <span class=\"app-select-secondary\" *ngIf=\"getSelectedSecondaryText() && !isModelEmpty()\">\n      {{ getSelectedSecondaryText() }}\n    </span>\n  </div>\n</ng-template>\n\n<!-- Dropdown Arrow -->\n<ng-template #dropdownArrow>\n  <zen-icon class=\"app-select-arrow\" \n            [class.rotated]=\"isOpen\" \n            [name]=\"'chevron-down'\"\n            [customColor]=\"'#667085'\">\n  </zen-icon>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- LEADING ELEMENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Icon Leading Element (with smart resolution) -->\n<ng-template #iconLeadingElement let-option=\"option\" let-icon=\"icon\">\n  <ng-container *ngIf=\"icon || option?.icon || option?.iconName\">\n    <ng-container *ngIf=\"getIconPath(option, icon) as iconPath\">\n      <!-- If icon contains / or . treat as SVG path -->\n      <ng-container *ngIf=\"(icon && (icon.includes('/') || icon.includes('.'))) || \n                           (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n                           (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.')))\">\n        <!-- Use img tag for Excel to preserve colors -->\n        <img *ngIf=\"iconPath.includes('excel')\" \n             [src]=\"iconPath\" \n             alt=\"\"\n             style=\"width: 20px; height: 20px;\">\n        <!-- Use zen-icon with src for other SVG files -->\n        <zen-icon *ngIf=\"!iconPath.includes('excel')\"\n                  [src]=\"iconPath\"\n                  [customColor]=\"'#667085'\">\n        </zen-icon>\n      </ng-container>\n      <!-- Otherwise treat as Material icon name or special cases -->\n      <ng-container *ngIf=\"!((icon && (icon.includes('/') || icon.includes('.'))) || \n                            (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n                            (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.'))))\">\n        <!-- Special case for Excel icon - use img to preserve colors -->\n        <img *ngIf=\"(icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')\"\n             src=\"assets/ng-zenduit/icons/excel.svg\"\n             alt=\"Excel\"\n             style=\"width: 20px; height: 20px;\">\n        <!-- Material icon names -->\n        <zen-icon *ngIf=\"(icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')\"\n                  [name]=\"icon || option?.icon || option?.iconName\"\n                  [customColor]=\"'#667085'\">\n        </zen-icon>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n  <div class=\"app-select-avatar\" *ngIf=\"avatar || option?.avatar\" >\n    <img [src]=\"avatar || option?.avatar\" alt=\"\">\n  </div>\n</ng-template>\n\n<!-- Dot Leading Element -->\n<ng-template #dotLeadingElement let-option=\"option\" let-color=\"color\">\n  <div class=\"app-select-dot\"\n       [style.background-color]=\"color || option?.dotColor || '#10B981'\">\n  </div>\n</ng-template>", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media (max-width: 768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}.app-select-container{width:100%;position:relative}.app-select-label{display:flex;align-items:center;gap:4px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.app-select-wrapper{position:relative;width:100%}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#FFFFFF;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;color:#101828;text-align:left;cursor:pointer;transition:all .2s ease}.app-select-input.app-select-search-input{cursor:text}.app-select-input.app-select-search-input .app-select-search-field{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;background:transparent;color:#101828;min-width:0}.app-select-input.app-select-search-input .app-select-search-field::placeholder{color:#667085}.app-select-input.app-select-search-input .app-select-search-field:disabled{cursor:not-allowed;color:#667085}.app-select-input:hover:not(:disabled){border-color:#d0d5dd}.app-select-input.focused,.app-select-input:focus{outline:none;border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.app-select-input:disabled{background:#F9FAFB;border-color:#d0d5dd;cursor:not-allowed;opacity:.6}.app-select-container.error .app-select-input:focus{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-leading,.app-select-option-leading{display:flex;align-items:center;flex-shrink:0}.app-select-avatar,.app-select-option-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}.app-select-avatar img,.app-select-option-avatar img{width:100%;height:100%;object-fit:cover}.app-select-avatar .avatar-placeholder,.app-select-option-avatar .avatar-placeholder{width:100%;height:100%;background:#F2F4F7;color:#667085;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0;font-weight:600;font-style:normal}.app-select-dot,.app-select-option-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.app-select-value-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-value-wrapper .app-select-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085}.app-select-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-value.placeholder{color:#667085}.app-select-secondary,.app-select-option-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085;white-space:nowrap;flex-shrink:0}.app-select-arrow{margin-left:auto;flex-shrink:0;transition:transform .2s ease}.app-select-arrow.rotated{transform:rotate(180deg)}.app-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:#FFFFFF;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-dropdown.dropdown-up{top:auto;bottom:calc(100% + 4px)}.app-select-dropdown.dropdown-down,.app-select-dropdown.dropdown-auto{top:calc(100% + 4px);bottom:auto}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search .app-select-search-input{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;color:#101828}.app-select-search .app-select-search-input::placeholder{color:#667085}.app-select-options{flex:1;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#D0D5DD;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#F9FAFB}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-arrow,.app-select-container.disabled .app-select-leading zen-icon,.app-select-container.disabled .app-select-search-input zen-icon,.app-select-container.disabled .app-select-secondary,.app-select-container.disabled .app-select-search-field{opacity:.6}.app-select-container.disabled .app-select-input,.app-select-container.disabled .app-select-search-input{background:#F9FAFB;cursor:not-allowed}.app-select-hint{display:flex;align-items:center;gap:4px;margin-top:6px;color:#667085}.app-select-hint .hint-icon{font-size:16px;color:#f04438}.app-select-hint.destructive{color:#f04438}.app-select-option.select-all{border-bottom:1px solid #F2F4F7;margin-bottom:4px;padding-bottom:14px}.app-select-option.add-new-option{color:#136ab6;font-weight:500}.app-select-option.add-new-option:hover{background:#EFF8FF}.app-select-option.remove-option{color:#f04438;font-weight:500}.app-select-option.remove-option:hover{background:#FEF3F2}.app-select-spinner{display:flex;justify-content:center;padding:16px}.app-select-spinner .spinner-small{width:20px;height:20px;border:2px solid #F2F4F7;border-top-color:#136ab6;border-radius:50%;animation:spin .6s linear infinite}.app-select-load-more{padding:8px 14px}.app-select-load-more .app-select-load-more-btn{width:100%;padding:8px 16px;background:#FFFFFF;border:1px solid #D0D5DD;border-radius:6px;color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0;font-weight:500;font-style:normal;cursor:pointer;transition:all .15s ease}.app-select-load-more .app-select-load-more-btn:hover{background:#F9FAFB;border-color:#667085}@keyframes spin{to{transform:rotate(360deg)}}.app-select-dropdown ::ng-deep zen-groups .zen-groups-inline{display:flex;flex-direction:column;max-height:310px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree{flex:1;overflow-y:auto;padding:4px 0}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar{width:6px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-track{background:transparent}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-thumb{background:#D0D5DD;border-radius:3px}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox{padding:10px 14px;font-weight:400;font-size:14px;line-height:20px;color:#344054}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox:hover{background:#F9FAFB}.app-select-dropdown ::ng-deep zen-groups .select-all{border-bottom:none;margin-bottom:0;font-weight:500}.app-select-dropdown ::ng-deep zen-groups .tree-item[style*=padding-left]{padding-right:14px}.app-select-dropdown ::ng-deep zen-groups .tree-item-badge{background:#f1f7fe;color:#105494}.app-select-dropdown ::ng-deep zen-groups .checkbox-component .app-checkbox-label{font-weight:400;color:#344054}.app-select-dropdown ::ng-deep zen-groups .zen-groups-no-results{padding:32px 24px;text-align:center;color:#667085}@media (max-width: 640px){.app-select-dropdown{position:fixed;inset:auto 0 0;max-height:70vh;border-radius:16px 16px 0 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+ZenduSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduSelectComponent, selector: "zen-select", inputs: { selectModel: "selectModel", options: "options", label: "label", supportingText: "supportingText", hintText: "hintText", placeholder: "placeholder", leadingType: "leadingType", leadingIcon: "leadingIcon", leadingAvatar: "leadingAvatar", leadingDotColor: "leadingDotColor", displayProp: "displayProp", idProp: "idProp", hasSearch: "hasSearch", isMultiselect: "isMultiselect", multiselect: "multiselect", hideSelectAll: "hideSelectAll", hideTreeSearch: "hideTreeSearch", required: "required", disabled: "disabled", error: "error", errorMessage: "errorMessage", destructive: "destructive", size: "size", returnOption: "returnOption", isTruncate: "isTruncate", enableAddNewOption: "enableAddNewOption", showDefaultAddOption: "showDefaultAddOption", newOptionText: "newOptionText", enableRemoveOption: "enableRemoveOption", removeOptionText: "removeOptionText", isLazyLoading: "isLazyLoading", lazyLoader: "lazyLoader", preferredOpenDirection: "preferredOpenDirection" }, outputs: { selectModelChange: "selectModelChange", addNewOption: "addNewOption", removeOption: "removeOption", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ZenduSelectOptionDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ZenduSelectValueDirective, descendants: true }, { propertyName: "buttonTemplate", first: true, predicate: ZenduSelectButtonDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"getStateClasses()\">\n  <!-- Label -->\n  <label class=\"app-select-label text text-sm text-weight-medium\" *ngIf=\"label\"\n         [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n    {{ label | translate }}\n    <span *ngIf=\"required\" class=\"required-indicator\">*</span>\n  </label>\n\n  <!-- Select Input -->\n  <div class=\"app-select-wrapper\">\n    <!-- Template Selection Based on Leading Type -->\n    <ng-container [ngSwitch]=\"leadingType\">\n      <!-- Default Select (no leading element) -->\n      <ng-container *ngSwitchCase=\"'default'\">\n        <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Icon Leading Select -->\n      <ng-container *ngSwitchCase=\"'icon'\">\n        <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Avatar Leading Select -->\n      <ng-container *ngSwitchCase=\"'avatar'\">\n        <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Dot Leading Select -->\n      <ng-container *ngSwitchCase=\"'dot'\">\n        <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Search Input Select -->\n      <ng-container *ngSwitchCase=\"'search'\">\n        <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n      </ng-container>\n    </ng-container>\n\n    <!-- Dropdown Menu -->\n    <div class=\"app-select-dropdown\" \n         [ngClass]=\"getDropdownDirectionClass()\"\n         *ngIf=\"isOpen\">\n        \n      <!-- Tree Mode: embed zen-groups inline -->\n      <ng-container *ngIf=\"isTreeMode && isMultiselect; else flatList\">\n        <zen-groups [inline]=\"true\"\n                    [dataSource]=\"$any(options)\"\n                    [filteredDataSource]=\"treeFilteredDataSource\"\n                    [hideSelectAll]=\"hideSelectAll\"\n                    [hideSearch]=\"hideTreeSearch\"\n                    [idProp]=\"idProp\"\n                    [displayProp]=\"displayProp\"\n                    [(isSelectedAll)]=\"isSelectedAll\"\n                    (isSelectedAllChange)=\"onTreeSelectAllChange($event)\"\n                    (checkedChange)=\"onTreeCheckedChange($event)\">\n        </zen-groups>\n      </ng-container>\n\n      <!-- Flat List Mode (default) -->\n      <ng-template #flatList>\n        <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n        <div class=\"app-select-search\" *ngIf=\"leadingType !== 'search' && hasSearch && !disabled\">\n          <zen-icon [name]=\"'search'\"\n                    [customColor]=\"'#667085'\">\n          </zen-icon>\n          <input type=\"text\"\n                 [(ngModel)]=\"searchText\"\n                 (ngModelChange)=\"onSearchChange()\"\n                 (keydown.enter)=\"onSearchEnter($event)\"\n                 placeholder=\"Search\"\n                 class=\"app-select-search-input\">\n        </div>\n\n        <!-- Options List -->\n        <div class=\"app-select-options\">\n          <!-- Select All Option for Multiselect -->\n          <button *ngIf=\"isMultiselect && !hideSelectAll && filteredOptions.length > 0\"\n                  class=\"app-select-option select-all\"\n                  (click)=\"toggleSelectAll()\">\n            <zen-checkbox class=\"app-select-checkbox\"\n                          [checked]=\"isAllSelected()\"\n                          [disableValueChange]=\"true\"\n                          [label]=\"''\"\n                          size=\"sm\">\n            </zen-checkbox>\n            <span class=\"app-select-option-text\">\n              Select All\n            </span>\n          </button>\n\n          <!-- Add New Option -->\n          <button *ngIf=\"enableAddNewOption && (showDefaultAddOption || searchText)\"\n                  class=\"app-select-option add-new-option\"\n                  (click)=\"handleAddNewOption(); $event.stopPropagation()\">\n            <zen-icon [name]=\"'plus'\" [customColor]=\"'#136AB6'\"></zen-icon>\n            <span class=\"app-select-option-text\">\n              {{ (newOptionText || 'Add New Option') + (searchText ? ': \"' + searchText + '\"' : '') }}\n            </span>\n          </button>\n\n          <div *ngIf=\"filteredOptions.length === 0 && !enableAddNewOption\" class=\"app-select-no-options\">\n            No matching options found\n          </div>\n\n          <button *ngFor=\"let option of filteredOptions\"\n                  class=\"app-select-option\"\n                  [class.selected]=\"isSelected(option)\"\n                  (click)=\"selectOption(option)\">\n\n            <!-- Checkbox for Multiselect -->\n            <zen-checkbox class=\"app-select-checkbox\"\n                          *ngIf=\"isMultiselect\"\n                          [checked]=\"isSelected(option)\"\n                          [disableValueChange]=\"true\"\n                          [label]=\"''\"\n                          size=\"sm\">\n            </zen-checkbox>\n\n            <!-- Option Leading Element -->\n            <div class=\"app-select-option-leading\" *ngIf=\"leadingType !== 'default'\">\n              <ng-container [ngSwitch]=\"leadingType\">\n                <ng-container *ngSwitchCase=\"'icon'\">\n                  <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'avatar'\">\n                  <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'dot'\">\n                  <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n                </ng-container>\n              </ng-container>\n            </div>\n\n            <!-- Option Text -->\n            <div class=\"app-select-option-text-wrapper\">\n              <!-- Use custom template if provided -->\n              <ng-container *ngIf=\"!isMultiselect && optionTemplate; else defaultOptionText\">\n                <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n                             [ngTemplateOutletContext]=\"{ option: option }\">\n                </ng-template>\n              </ng-container>\n              <ng-template #defaultOptionText>\n                <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n                  {{ getName(option) | translate }}\n                </span>\n                <span class=\"app-select-option-secondary\" *ngIf=\"option.secondaryText\">\n                  {{ option.secondaryText }}\n                </span>\n              </ng-template>\n            </div>\n\n            <!-- Check Icon for Single Select -->\n            <zen-icon *ngIf=\"!isMultiselect && isSelected(option)\"\n                      class=\"app-select-option-check\"\n                      [name]=\"'check'\"\n                      [customColor]=\"'#136AB6'\">\n            </zen-icon>\n          </button>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n  \n  <!-- Hint text / Error message -->\n  <div *ngIf=\"(destructive && errorMessage) || hintText\" \n       class=\"app-select-hint text text-sm text-weight-regular\"\n       [ngClass]=\"{'destructive': destructive}\">\n    <i *ngIf=\"destructive\" class=\"material-icons-outlined hint-icon\">error_outline</i>\n    <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n  </div>\n</div>\n\n<!-- ============================================= -->\n<!-- MAIN SELECT INPUT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Default Select Template (No Leading Element) -->\n<ng-template #defaultSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Icon Select Template -->\n<ng-template #iconSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: getSelectedOption(), icon: leadingIcon }\"></ng-container>\n    </div>\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Avatar Select Template -->\n<ng-template #avatarSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: getSelectedOption(), avatar: leadingAvatar }\"></ng-container>\n    </div>\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Dot Select Template -->\n<ng-template #dotSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: getSelectedOption(), color: leadingDotColor }\"></ng-container>\n    </div>\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Search Input Template -->\n<ng-template #searchInputTemplate>\n  <div class=\"app-select-input app-select-search-input\"\n       [class.focused]=\"isOpen || searchFocused\"\n       [class.has-value]=\"!isModelEmpty()\">\n    \n    <!-- Search Icon -->\n    <zen-icon [name]=\"'search'\"\n              [customColor]=\"disabled ? '#9CA3AF' : '#667085'\">\n    </zen-icon>\n    \n    <!-- Search Input Field -->\n    <input type=\"text\"\n           class=\"app-select-search-field\"\n           [(ngModel)]=\"searchInputValue\"\n           (ngModelChange)=\"onSearchInputChange()\"\n           (keydown.enter)=\"onSearchEnter($event)\"\n           (focus)=\"onSearchFocus()\"\n           (blur)=\"onSearchBlur($event)\"\n           [placeholder]=\"selectedDisplay || placeholder\"\n           [disabled]=\"disabled\">\n  </div>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- SHARED COMPONENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Select Value Display -->\n<ng-template #selectValueDisplay>\n  <div class=\"app-select-value-wrapper\">\n    <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n      {{ selectedDisplay || placeholder | translate }}\n    </span>\n    <span class=\"app-select-secondary\" *ngIf=\"getSelectedSecondaryText() && !isModelEmpty()\">\n      {{ getSelectedSecondaryText() }}\n    </span>\n  </div>\n</ng-template>\n\n<!-- Dropdown Arrow -->\n<ng-template #dropdownArrow>\n  <zen-icon class=\"app-select-arrow\" \n            [class.rotated]=\"isOpen\" \n            [name]=\"'chevron-down'\"\n            [customColor]=\"'#667085'\">\n  </zen-icon>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- LEADING ELEMENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Icon Leading Element (with smart resolution) -->\n<ng-template #iconLeadingElement let-option=\"option\" let-icon=\"icon\">\n  <ng-container *ngIf=\"icon || option?.icon || option?.iconName\">\n    <ng-container *ngIf=\"getIconPath(option, icon) as iconPath\">\n      <!-- If icon contains / or . treat as SVG path -->\n      <ng-container *ngIf=\"(icon && (icon.includes('/') || icon.includes('.'))) || \n                           (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n                           (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.')))\">\n        <!-- Use img tag for Excel to preserve colors -->\n        <img *ngIf=\"iconPath.includes('excel')\" \n             [src]=\"iconPath\" \n             alt=\"\"\n             style=\"width: 20px; height: 20px;\">\n        <!-- Use zen-icon with src for other SVG files -->\n        <zen-icon *ngIf=\"!iconPath.includes('excel')\"\n                  [src]=\"iconPath\"\n                  [customColor]=\"'#667085'\">\n        </zen-icon>\n      </ng-container>\n      <!-- Otherwise treat as Material icon name or special cases -->\n      <ng-container *ngIf=\"!((icon && (icon.includes('/') || icon.includes('.'))) || \n                            (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n                            (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.'))))\">\n        <!-- Special case for Excel icon - use img to preserve colors -->\n        <img *ngIf=\"(icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')\"\n             src=\"assets/ng-zenduit/icons/excel.svg\"\n             alt=\"Excel\"\n             style=\"width: 20px; height: 20px;\">\n        <!-- Material icon names -->\n        <zen-icon *ngIf=\"(icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')\"\n                  [name]=\"icon || option?.icon || option?.iconName\"\n                  [customColor]=\"'#667085'\">\n        </zen-icon>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n  <div class=\"app-select-avatar\" *ngIf=\"avatar || option?.avatar\" >\n    <img [src]=\"avatar || option?.avatar\" alt=\"\">\n  </div>\n</ng-template>\n\n<!-- Dot Leading Element -->\n<ng-template #dotLeadingElement let-option=\"option\" let-color=\"color\">\n  <div class=\"app-select-dot\"\n       [style.background-color]=\"color || option?.dotColor || '#10B981'\">\n  </div>\n</ng-template>", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media (max-width: 768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}.app-select-container{width:100%;position:relative}.app-select-label{display:flex;align-items:center;gap:4px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.app-select-wrapper{position:relative;width:100%}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#FFFFFF;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;color:#101828;text-align:left;cursor:pointer;transition:all .2s ease}.app-select-input.app-select-search-input{cursor:text}.app-select-input.app-select-search-input .app-select-search-field{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;background:transparent;color:#101828;min-width:0}.app-select-input.app-select-search-input .app-select-search-field::placeholder{color:#667085}.app-select-input.app-select-search-input .app-select-search-field:disabled{cursor:not-allowed;color:#667085}.app-select-input:hover:not(:disabled){border-color:#d0d5dd}.app-select-input.focused,.app-select-input:focus{outline:none;border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.app-select-input:disabled{background:#F9FAFB;border-color:#d0d5dd;cursor:not-allowed;opacity:.6}.app-select-container.error .app-select-input:focus{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-leading,.app-select-option-leading{display:flex;align-items:center;flex-shrink:0}.app-select-avatar,.app-select-option-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}.app-select-avatar img,.app-select-option-avatar img{width:100%;height:100%;object-fit:cover}.app-select-avatar .avatar-placeholder,.app-select-option-avatar .avatar-placeholder{width:100%;height:100%;background:#F2F4F7;color:#667085;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0;font-weight:600;font-style:normal}.app-select-dot,.app-select-option-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.app-select-value-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-value-wrapper .app-select-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085}.app-select-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-value.placeholder{color:#667085}.app-select-secondary,.app-select-option-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085;white-space:nowrap;flex-shrink:0}.app-select-arrow{margin-left:auto;flex-shrink:0;transition:transform .2s ease}.app-select-arrow.rotated{transform:rotate(180deg)}.app-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:#FFFFFF;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-dropdown.dropdown-up{top:auto;bottom:calc(100% + 4px)}.app-select-dropdown.dropdown-down,.app-select-dropdown.dropdown-auto{top:calc(100% + 4px);bottom:auto}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search .app-select-search-input{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;color:#101828}.app-select-search .app-select-search-input::placeholder{color:#667085}.app-select-options{flex:1;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#D0D5DD;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#F9FAFB}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-arrow,.app-select-container.disabled .app-select-leading zen-icon,.app-select-container.disabled .app-select-search-input zen-icon,.app-select-container.disabled .app-select-secondary,.app-select-container.disabled .app-select-search-field{opacity:.6}.app-select-container.disabled .app-select-input,.app-select-container.disabled .app-select-search-input{background:#F9FAFB;cursor:not-allowed}.app-select-hint{display:flex;align-items:center;gap:4px;margin-top:6px;color:#667085}.app-select-hint .hint-icon{font-size:16px;color:#f04438}.app-select-hint.destructive{color:#f04438}.app-select-option.select-all{border-bottom:1px solid #F2F4F7;margin-bottom:4px;padding-bottom:14px}.app-select-option.add-new-option{color:#136ab6;font-weight:500}.app-select-option.add-new-option:hover{background:#EFF8FF}.app-select-option.remove-option{color:#f04438;font-weight:500}.app-select-option.remove-option:hover{background:#FEF3F2}.app-select-spinner{display:flex;justify-content:center;padding:16px}.app-select-spinner .spinner-small{width:20px;height:20px;border:2px solid #F2F4F7;border-top-color:#136ab6;border-radius:50%;animation:spin .6s linear infinite}.app-select-load-more{padding:8px 14px}.app-select-load-more .app-select-load-more-btn{width:100%;padding:8px 16px;background:#FFFFFF;border:1px solid #D0D5DD;border-radius:6px;color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0;font-weight:500;font-style:normal;cursor:pointer;transition:all .15s ease}.app-select-load-more .app-select-load-more-btn:hover{background:#F9FAFB;border-color:#667085}@keyframes spin{to{transform:rotate(360deg)}}.app-select-dropdown ::ng-deep zen-groups .zen-groups-inline{display:flex;flex-direction:column;max-height:310px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree{flex:1;overflow-y:auto;padding:4px 0}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar{width:6px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-track{background:transparent}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-thumb{background:#D0D5DD;border-radius:3px}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox{padding:10px 14px;font-weight:400;font-size:14px;line-height:20px;color:#344054}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox:hover{background:#F9FAFB}.app-select-dropdown ::ng-deep zen-groups .select-all{border-bottom:none;margin-bottom:0;font-weight:500}.app-select-dropdown ::ng-deep zen-groups .tree-item[style*=padding-left]{padding-right:14px}.app-select-dropdown ::ng-deep zen-groups .tree-item-badge{background:#f1f7fe;color:#105494}.app-select-dropdown ::ng-deep zen-groups .checkbox-component .app-checkbox-label{font-weight:400;color:#344054}.app-select-dropdown ::ng-deep zen-groups .zen-groups-no-results{padding:32px 24px;text-align:center;color:#667085}@media (max-width: 640px){.app-select-dropdown{position:fixed;inset:auto 0 0;max-height:70vh;border-radius:16px 16px 0 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'zen-select', template: "<div [class]=\"getStateClasses()\">\n  <!-- Label -->\n  <label class=\"app-select-label text text-sm text-weight-medium\" *ngIf=\"label\"\n         [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n    {{ label | translate }}\n    <span *ngIf=\"required\" class=\"required-indicator\">*</span>\n  </label>\n\n  <!-- Select Input -->\n  <div class=\"app-select-wrapper\">\n    <!-- Template Selection Based on Leading Type -->\n    <ng-container [ngSwitch]=\"leadingType\">\n      <!-- Default Select (no leading element) -->\n      <ng-container *ngSwitchCase=\"'default'\">\n        <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Icon Leading Select -->\n      <ng-container *ngSwitchCase=\"'icon'\">\n        <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Avatar Leading Select -->\n      <ng-container *ngSwitchCase=\"'avatar'\">\n        <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Dot Leading Select -->\n      <ng-container *ngSwitchCase=\"'dot'\">\n        <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Search Input Select -->\n      <ng-container *ngSwitchCase=\"'search'\">\n        <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n      </ng-container>\n    </ng-container>\n\n    <!-- Dropdown Menu -->\n    <div class=\"app-select-dropdown\" \n         [ngClass]=\"getDropdownDirectionClass()\"\n         *ngIf=\"isOpen\">\n        \n      <!-- Tree Mode: embed zen-groups inline -->\n      <ng-container *ngIf=\"isTreeMode && isMultiselect; else flatList\">\n        <zen-groups [inline]=\"true\"\n                    [dataSource]=\"$any(options)\"\n                    [filteredDataSource]=\"treeFilteredDataSource\"\n                    [hideSelectAll]=\"hideSelectAll\"\n                    [hideSearch]=\"hideTreeSearch\"\n                    [idProp]=\"idProp\"\n                    [displayProp]=\"displayProp\"\n                    [(isSelectedAll)]=\"isSelectedAll\"\n                    (isSelectedAllChange)=\"onTreeSelectAllChange($event)\"\n                    (checkedChange)=\"onTreeCheckedChange($event)\">\n        </zen-groups>\n      </ng-container>\n\n      <!-- Flat List Mode (default) -->\n      <ng-template #flatList>\n        <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n        <div class=\"app-select-search\" *ngIf=\"leadingType !== 'search' && hasSearch && !disabled\">\n          <zen-icon [name]=\"'search'\"\n                    [customColor]=\"'#667085'\">\n          </zen-icon>\n          <input type=\"text\"\n                 [(ngModel)]=\"searchText\"\n                 (ngModelChange)=\"onSearchChange()\"\n                 placeholder=\"Search\"\n                 class=\"app-select-search-input\">\n        </div>\n\n        <!-- Options List -->\n        <div class=\"app-select-options\">\n          <!-- Select All Option for Multiselect -->\n          <button *ngIf=\"isMultiselect && !hideSelectAll && filteredOptions.length > 0\"\n                  class=\"app-select-option select-all\"\n                  (click)=\"toggleSelectAll()\">\n            <zen-checkbox class=\"app-select-checkbox\"\n                          [checked]=\"isAllSelected()\"\n                          [disableValueChange]=\"true\"\n                          [label]=\"''\"\n                          size=\"sm\">\n            </zen-checkbox>\n            <span class=\"app-select-option-text\">\n              Select All\n            </span>\n          </button>\n\n          <div *ngIf=\"filteredOptions.length === 0\" class=\"app-select-no-options\">\n            No matching options found\n          </div>\n\n          <button *ngFor=\"let option of filteredOptions\"\n                  class=\"app-select-option\"\n                  [class.selected]=\"isSelected(option)\"\n                  (click)=\"selectOption(option)\">\n\n            <!-- Checkbox for Multiselect -->\n            <zen-checkbox class=\"app-select-checkbox\"\n                          *ngIf=\"isMultiselect\"\n                          [checked]=\"isSelected(option)\"\n                          [disableValueChange]=\"true\"\n                          [label]=\"''\"\n                          size=\"sm\">\n            </zen-checkbox>\n\n            <!-- Option Leading Element -->\n            <div class=\"app-select-option-leading\" *ngIf=\"leadingType !== 'default'\">\n              <ng-container [ngSwitch]=\"leadingType\">\n                <ng-container *ngSwitchCase=\"'icon'\">\n                  <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'avatar'\">\n                  <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'dot'\">\n                  <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n                </ng-container>\n              </ng-container>\n            </div>\n\n            <!-- Option Text -->\n            <div class=\"app-select-option-text-wrapper\">\n              <!-- Use custom template if provided -->\n              <ng-container *ngIf=\"!isMultiselect && optionTemplate; else defaultOptionText\">\n                <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n                             [ngTemplateOutletContext]=\"{ option: option }\">\n                </ng-template>\n              </ng-container>\n              <ng-template #defaultOptionText>\n                <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n                  {{ getName(option) | translate }}\n                </span>\n                <span class=\"app-select-option-secondary\" *ngIf=\"option.secondaryText\">\n                  {{ option.secondaryText }}\n                </span>\n              </ng-template>\n            </div>\n\n            <!-- Check Icon for Single Select -->\n            <zen-icon *ngIf=\"!isMultiselect && isSelected(option)\"\n                      class=\"app-select-option-check\"\n                      [name]=\"'check'\"\n                      [customColor]=\"'#136AB6'\">\n            </zen-icon>\n          </button>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n  \n  <!-- Hint text / Error message -->\n  <div *ngIf=\"(destructive && errorMessage) || hintText\" \n       class=\"app-select-hint text text-sm text-weight-regular\"\n       [ngClass]=\"{'destructive': destructive}\">\n    <i *ngIf=\"destructive\" class=\"material-icons-outlined hint-icon\">error_outline</i>\n    <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n  </div>\n</div>\n\n<!-- ============================================= -->\n<!-- MAIN SELECT INPUT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Default Select Template (No Leading Element) -->\n<ng-template #defaultSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Icon Select Template -->\n<ng-template #iconSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: getSelectedOption(), icon: leadingIcon }\"></ng-container>\n    </div>\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Avatar Select Template -->\n<ng-template #avatarSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: getSelectedOption(), avatar: leadingAvatar }\"></ng-container>\n    </div>\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Dot Select Template -->\n<ng-template #dotSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: getSelectedOption(), color: leadingDotColor }\"></ng-container>\n    </div>\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Search Input Template -->\n<ng-template #searchInputTemplate>\n  <div class=\"app-select-input app-select-search-input\"\n       [class.focused]=\"isOpen || searchFocused\"\n       [class.has-value]=\"!isModelEmpty()\">\n    \n    <!-- Search Icon -->\n    <zen-icon [name]=\"'search'\"\n              [customColor]=\"disabled ? '#9CA3AF' : '#667085'\">\n    </zen-icon>\n    \n    <!-- Search Input Field -->\n    <input type=\"text\"\n           class=\"app-select-search-field\"\n           [(ngModel)]=\"searchInputValue\"\n           (ngModelChange)=\"onSearchInputChange()\"\n           (focus)=\"onSearchFocus()\"\n           (blur)=\"onSearchBlur($event)\"\n           [placeholder]=\"selectedDisplay || placeholder\"\n           [disabled]=\"disabled\">\n  </div>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- SHARED COMPONENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Select Value Display -->\n<ng-template #selectValueDisplay>\n  <div class=\"app-select-value-wrapper\">\n    <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n      {{ selectedDisplay || placeholder | translate }}\n    </span>\n    <span class=\"app-select-secondary\" *ngIf=\"getSelectedSecondaryText() && !isModelEmpty()\">\n      {{ getSelectedSecondaryText() }}\n    </span>\n  </div>\n</ng-template>\n\n<!-- Dropdown Arrow -->\n<ng-template #dropdownArrow>\n  <zen-icon class=\"app-select-arrow\" \n            [class.rotated]=\"isOpen\" \n            [name]=\"'chevron-down'\"\n            [customColor]=\"'#667085'\">\n  </zen-icon>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- LEADING ELEMENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Icon Leading Element (with smart resolution) -->\n<ng-template #iconLeadingElement let-option=\"option\" let-icon=\"icon\">\n  <ng-container *ngIf=\"icon || option?.icon || option?.iconName\">\n    <ng-container *ngIf=\"getIconPath(option, icon) as iconPath\">\n      <!-- If icon contains / or . treat as SVG path -->\n      <ng-container *ngIf=\"(icon && (icon.includes('/') || icon.includes('.'))) || \n                           (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n                           (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.')))\">\n        <!-- Use img tag for Excel to preserve colors -->\n        <img *ngIf=\"iconPath.includes('excel')\" \n             [src]=\"iconPath\" \n             alt=\"\"\n             style=\"width: 20px; height: 20px;\">\n        <!-- Use zen-icon with src for other SVG files -->\n        <zen-icon *ngIf=\"!iconPath.includes('excel')\"\n                  [src]=\"iconPath\"\n                  [customColor]=\"'#667085'\">\n        </zen-icon>\n      </ng-container>\n      <!-- Otherwise treat as Material icon name or special cases -->\n      <ng-container *ngIf=\"!((icon && (icon.includes('/') || icon.includes('.'))) || \n                            (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n                            (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.'))))\">\n        <!-- Special case for Excel icon - use img to preserve colors -->\n        <img *ngIf=\"(icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')\"\n             src=\"assets/ng-zenduit/icons/excel.svg\"\n             alt=\"Excel\"\n             style=\"width: 20px; height: 20px;\">\n        <!-- Material icon names -->\n        <zen-icon *ngIf=\"(icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')\"\n                  [name]=\"icon || option?.icon || option?.iconName\"\n                  [customColor]=\"'#667085'\">\n        </zen-icon>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n  <div class=\"app-select-avatar\" *ngIf=\"avatar || option?.avatar\" >\n    <img [src]=\"avatar || option?.avatar\" alt=\"\">\n  </div>\n</ng-template>\n\n<!-- Dot Leading Element -->\n<ng-template #dotLeadingElement let-option=\"option\" let-color=\"color\">\n  <div class=\"app-select-dot\"\n       [style.background-color]=\"color || option?.dotColor || '#10B981'\">\n  </div>\n</ng-template>", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media (max-width: 768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}.app-select-container{width:100%;position:relative}.app-select-label{display:flex;align-items:center;gap:4px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.app-select-wrapper{position:relative;width:100%}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#FFFFFF;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;color:#101828;text-align:left;cursor:pointer;transition:all .2s ease}.app-select-input.app-select-search-input{cursor:text}.app-select-input.app-select-search-input .app-select-search-field{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;background:transparent;color:#101828;min-width:0}.app-select-input.app-select-search-input .app-select-search-field::placeholder{color:#667085}.app-select-input.app-select-search-input .app-select-search-field:disabled{cursor:not-allowed;color:#667085}.app-select-input:hover:not(:disabled){border-color:#d0d5dd}.app-select-input.focused,.app-select-input:focus{outline:none;border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.app-select-input:disabled{background:#F9FAFB;border-color:#d0d5dd;cursor:not-allowed;opacity:.6}.app-select-container.error .app-select-input:focus{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-leading,.app-select-option-leading{display:flex;align-items:center;flex-shrink:0}.app-select-avatar,.app-select-option-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}.app-select-avatar img,.app-select-option-avatar img{width:100%;height:100%;object-fit:cover}.app-select-avatar .avatar-placeholder,.app-select-option-avatar .avatar-placeholder{width:100%;height:100%;background:#F2F4F7;color:#667085;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0;font-weight:600;font-style:normal}.app-select-dot,.app-select-option-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.app-select-value-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-value-wrapper .app-select-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085}.app-select-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-value.placeholder{color:#667085}.app-select-secondary,.app-select-option-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085;white-space:nowrap;flex-shrink:0}.app-select-arrow{margin-left:auto;flex-shrink:0;transition:transform .2s ease}.app-select-arrow.rotated{transform:rotate(180deg)}.app-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:#FFFFFF;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-dropdown.dropdown-up{top:auto;bottom:calc(100% + 4px)}.app-select-dropdown.dropdown-down,.app-select-dropdown.dropdown-auto{top:calc(100% + 4px);bottom:auto}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search .app-select-search-input{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;color:#101828}.app-select-search .app-select-search-input::placeholder{color:#667085}.app-select-options{flex:1;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#D0D5DD;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#F9FAFB}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-arrow,.app-select-container.disabled .app-select-leading zen-icon,.app-select-container.disabled .app-select-search-input zen-icon,.app-select-container.disabled .app-select-secondary,.app-select-container.disabled .app-select-search-field{opacity:.6}.app-select-container.disabled .app-select-input,.app-select-container.disabled .app-select-search-input{background:#F9FAFB;cursor:not-allowed}.app-select-hint{display:flex;align-items:center;gap:4px;margin-top:6px;color:#667085}.app-select-hint .hint-icon{font-size:16px;color:#f04438}.app-select-hint.destructive{color:#f04438}.app-select-option.select-all{border-bottom:1px solid #F2F4F7;margin-bottom:4px;padding-bottom:14px}.app-select-option.add-new-option{color:#136ab6;font-weight:500}.app-select-option.add-new-option:hover{background:#EFF8FF}.app-select-option.remove-option{color:#f04438;font-weight:500}.app-select-option.remove-option:hover{background:#FEF3F2}.app-select-spinner{display:flex;justify-content:center;padding:16px}.app-select-spinner .spinner-small{width:20px;height:20px;border:2px solid #F2F4F7;border-top-color:#136ab6;border-radius:50%;animation:spin .6s linear infinite}.app-select-load-more{padding:8px 14px}.app-select-load-more .app-select-load-more-btn{width:100%;padding:8px 16px;background:#FFFFFF;border:1px solid #D0D5DD;border-radius:6px;color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0;font-weight:500;font-style:normal;cursor:pointer;transition:all .15s ease}.app-select-load-more .app-select-load-more-btn:hover{background:#F9FAFB;border-color:#667085}@keyframes spin{to{transform:rotate(360deg)}}.app-select-dropdown ::ng-deep zen-groups .zen-groups-inline{display:flex;flex-direction:column;max-height:310px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree{flex:1;overflow-y:auto;padding:4px 0}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar{width:6px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-track{background:transparent}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-thumb{background:#D0D5DD;border-radius:3px}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox{padding:10px 14px;font-weight:400;font-size:14px;line-height:20px;color:#344054}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox:hover{background:#F9FAFB}.app-select-dropdown ::ng-deep zen-groups .select-all{border-bottom:none;margin-bottom:0;font-weight:500}.app-select-dropdown ::ng-deep zen-groups .tree-item[style*=padding-left]{padding-right:14px}.app-select-dropdown ::ng-deep zen-groups .tree-item-badge{background:#f1f7fe;color:#105494}.app-select-dropdown ::ng-deep zen-groups .checkbox-component .app-checkbox-label{font-weight:400;color:#344054}.app-select-dropdown ::ng-deep zen-groups .zen-groups-no-results{padding:32px 24px;text-align:center;color:#667085}@media (max-width: 640px){.app-select-dropdown{position:fixed;inset:auto 0 0;max-height:70vh;border-radius:16px 16px 0 0}}\n"] }]
+            args: [{ selector: 'zen-select', template: "<div [class]=\"getStateClasses()\">\n  <!-- Label -->\n  <label class=\"app-select-label text text-sm text-weight-medium\" *ngIf=\"label\"\n         [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n    {{ label | translate }}\n    <span *ngIf=\"required\" class=\"required-indicator\">*</span>\n  </label>\n\n  <!-- Select Input -->\n  <div class=\"app-select-wrapper\">\n    <!-- Template Selection Based on Leading Type -->\n    <ng-container [ngSwitch]=\"leadingType\">\n      <!-- Default Select (no leading element) -->\n      <ng-container *ngSwitchCase=\"'default'\">\n        <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Icon Leading Select -->\n      <ng-container *ngSwitchCase=\"'icon'\">\n        <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Avatar Leading Select -->\n      <ng-container *ngSwitchCase=\"'avatar'\">\n        <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Dot Leading Select -->\n      <ng-container *ngSwitchCase=\"'dot'\">\n        <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n      </ng-container>\n      \n      <!-- Search Input Select -->\n      <ng-container *ngSwitchCase=\"'search'\">\n        <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n      </ng-container>\n    </ng-container>\n\n    <!-- Dropdown Menu -->\n    <div class=\"app-select-dropdown\" \n         [ngClass]=\"getDropdownDirectionClass()\"\n         *ngIf=\"isOpen\">\n        \n      <!-- Tree Mode: embed zen-groups inline -->\n      <ng-container *ngIf=\"isTreeMode && isMultiselect; else flatList\">\n        <zen-groups [inline]=\"true\"\n                    [dataSource]=\"$any(options)\"\n                    [filteredDataSource]=\"treeFilteredDataSource\"\n                    [hideSelectAll]=\"hideSelectAll\"\n                    [hideSearch]=\"hideTreeSearch\"\n                    [idProp]=\"idProp\"\n                    [displayProp]=\"displayProp\"\n                    [(isSelectedAll)]=\"isSelectedAll\"\n                    (isSelectedAllChange)=\"onTreeSelectAllChange($event)\"\n                    (checkedChange)=\"onTreeCheckedChange($event)\">\n        </zen-groups>\n      </ng-container>\n\n      <!-- Flat List Mode (default) -->\n      <ng-template #flatList>\n        <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n        <div class=\"app-select-search\" *ngIf=\"leadingType !== 'search' && hasSearch && !disabled\">\n          <zen-icon [name]=\"'search'\"\n                    [customColor]=\"'#667085'\">\n          </zen-icon>\n          <input type=\"text\"\n                 [(ngModel)]=\"searchText\"\n                 (ngModelChange)=\"onSearchChange()\"\n                 (keydown.enter)=\"onSearchEnter($event)\"\n                 placeholder=\"Search\"\n                 class=\"app-select-search-input\">\n        </div>\n\n        <!-- Options List -->\n        <div class=\"app-select-options\">\n          <!-- Select All Option for Multiselect -->\n          <button *ngIf=\"isMultiselect && !hideSelectAll && filteredOptions.length > 0\"\n                  class=\"app-select-option select-all\"\n                  (click)=\"toggleSelectAll()\">\n            <zen-checkbox class=\"app-select-checkbox\"\n                          [checked]=\"isAllSelected()\"\n                          [disableValueChange]=\"true\"\n                          [label]=\"''\"\n                          size=\"sm\">\n            </zen-checkbox>\n            <span class=\"app-select-option-text\">\n              Select All\n            </span>\n          </button>\n\n          <!-- Add New Option -->\n          <button *ngIf=\"enableAddNewOption && (showDefaultAddOption || searchText)\"\n                  class=\"app-select-option add-new-option\"\n                  (click)=\"handleAddNewOption(); $event.stopPropagation()\">\n            <zen-icon [name]=\"'plus'\" [customColor]=\"'#136AB6'\"></zen-icon>\n            <span class=\"app-select-option-text\">\n              {{ (newOptionText || 'Add New Option') + (searchText ? ': \"' + searchText + '\"' : '') }}\n            </span>\n          </button>\n\n          <div *ngIf=\"filteredOptions.length === 0 && !enableAddNewOption\" class=\"app-select-no-options\">\n            No matching options found\n          </div>\n\n          <button *ngFor=\"let option of filteredOptions\"\n                  class=\"app-select-option\"\n                  [class.selected]=\"isSelected(option)\"\n                  (click)=\"selectOption(option)\">\n\n            <!-- Checkbox for Multiselect -->\n            <zen-checkbox class=\"app-select-checkbox\"\n                          *ngIf=\"isMultiselect\"\n                          [checked]=\"isSelected(option)\"\n                          [disableValueChange]=\"true\"\n                          [label]=\"''\"\n                          size=\"sm\">\n            </zen-checkbox>\n\n            <!-- Option Leading Element -->\n            <div class=\"app-select-option-leading\" *ngIf=\"leadingType !== 'default'\">\n              <ng-container [ngSwitch]=\"leadingType\">\n                <ng-container *ngSwitchCase=\"'icon'\">\n                  <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'avatar'\">\n                  <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'dot'\">\n                  <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n                </ng-container>\n              </ng-container>\n            </div>\n\n            <!-- Option Text -->\n            <div class=\"app-select-option-text-wrapper\">\n              <!-- Use custom template if provided -->\n              <ng-container *ngIf=\"!isMultiselect && optionTemplate; else defaultOptionText\">\n                <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n                             [ngTemplateOutletContext]=\"{ option: option }\">\n                </ng-template>\n              </ng-container>\n              <ng-template #defaultOptionText>\n                <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n                  {{ getName(option) | translate }}\n                </span>\n                <span class=\"app-select-option-secondary\" *ngIf=\"option.secondaryText\">\n                  {{ option.secondaryText }}\n                </span>\n              </ng-template>\n            </div>\n\n            <!-- Check Icon for Single Select -->\n            <zen-icon *ngIf=\"!isMultiselect && isSelected(option)\"\n                      class=\"app-select-option-check\"\n                      [name]=\"'check'\"\n                      [customColor]=\"'#136AB6'\">\n            </zen-icon>\n          </button>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n  \n  <!-- Hint text / Error message -->\n  <div *ngIf=\"(destructive && errorMessage) || hintText\" \n       class=\"app-select-hint text text-sm text-weight-regular\"\n       [ngClass]=\"{'destructive': destructive}\">\n    <i *ngIf=\"destructive\" class=\"material-icons-outlined hint-icon\">error_outline</i>\n    <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n  </div>\n</div>\n\n<!-- ============================================= -->\n<!-- MAIN SELECT INPUT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Default Select Template (No Leading Element) -->\n<ng-template #defaultSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Icon Select Template -->\n<ng-template #iconSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: getSelectedOption(), icon: leadingIcon }\"></ng-container>\n    </div>\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Avatar Select Template -->\n<ng-template #avatarSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: getSelectedOption(), avatar: leadingAvatar }\"></ng-container>\n    </div>\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Dot Select Template -->\n<ng-template #dotSelectTemplate>\n  <button class=\"app-select-input\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleDropdown()\"\n          [class.focused]=\"isOpen\"\n          [class.has-value]=\"!isModelEmpty()\">\n    \n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: getSelectedOption(), color: leadingDotColor }\"></ng-container>\n    </div>\n    \n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Search Input Template -->\n<ng-template #searchInputTemplate>\n  <div class=\"app-select-input app-select-search-input\"\n       [class.focused]=\"isOpen || searchFocused\"\n       [class.has-value]=\"!isModelEmpty()\">\n    \n    <!-- Search Icon -->\n    <zen-icon [name]=\"'search'\"\n              [customColor]=\"disabled ? '#9CA3AF' : '#667085'\">\n    </zen-icon>\n    \n    <!-- Search Input Field -->\n    <input type=\"text\"\n           class=\"app-select-search-field\"\n           [(ngModel)]=\"searchInputValue\"\n           (ngModelChange)=\"onSearchInputChange()\"\n           (keydown.enter)=\"onSearchEnter($event)\"\n           (focus)=\"onSearchFocus()\"\n           (blur)=\"onSearchBlur($event)\"\n           [placeholder]=\"selectedDisplay || placeholder\"\n           [disabled]=\"disabled\">\n  </div>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- SHARED COMPONENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Select Value Display -->\n<ng-template #selectValueDisplay>\n  <div class=\"app-select-value-wrapper\">\n    <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n      {{ selectedDisplay || placeholder | translate }}\n    </span>\n    <span class=\"app-select-secondary\" *ngIf=\"getSelectedSecondaryText() && !isModelEmpty()\">\n      {{ getSelectedSecondaryText() }}\n    </span>\n  </div>\n</ng-template>\n\n<!-- Dropdown Arrow -->\n<ng-template #dropdownArrow>\n  <zen-icon class=\"app-select-arrow\" \n            [class.rotated]=\"isOpen\" \n            [name]=\"'chevron-down'\"\n            [customColor]=\"'#667085'\">\n  </zen-icon>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- LEADING ELEMENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Icon Leading Element (with smart resolution) -->\n<ng-template #iconLeadingElement let-option=\"option\" let-icon=\"icon\">\n  <ng-container *ngIf=\"icon || option?.icon || option?.iconName\">\n    <ng-container *ngIf=\"getIconPath(option, icon) as iconPath\">\n      <!-- If icon contains / or . treat as SVG path -->\n      <ng-container *ngIf=\"(icon && (icon.includes('/') || icon.includes('.'))) || \n                           (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n                           (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.')))\">\n        <!-- Use img tag for Excel to preserve colors -->\n        <img *ngIf=\"iconPath.includes('excel')\" \n             [src]=\"iconPath\" \n             alt=\"\"\n             style=\"width: 20px; height: 20px;\">\n        <!-- Use zen-icon with src for other SVG files -->\n        <zen-icon *ngIf=\"!iconPath.includes('excel')\"\n                  [src]=\"iconPath\"\n                  [customColor]=\"'#667085'\">\n        </zen-icon>\n      </ng-container>\n      <!-- Otherwise treat as Material icon name or special cases -->\n      <ng-container *ngIf=\"!((icon && (icon.includes('/') || icon.includes('.'))) || \n                            (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n                            (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.'))))\">\n        <!-- Special case for Excel icon - use img to preserve colors -->\n        <img *ngIf=\"(icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')\"\n             src=\"assets/ng-zenduit/icons/excel.svg\"\n             alt=\"Excel\"\n             style=\"width: 20px; height: 20px;\">\n        <!-- Material icon names -->\n        <zen-icon *ngIf=\"(icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')\"\n                  [name]=\"icon || option?.icon || option?.iconName\"\n                  [customColor]=\"'#667085'\">\n        </zen-icon>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n  <div class=\"app-select-avatar\" *ngIf=\"avatar || option?.avatar\" >\n    <img [src]=\"avatar || option?.avatar\" alt=\"\">\n  </div>\n</ng-template>\n\n<!-- Dot Leading Element -->\n<ng-template #dotLeadingElement let-option=\"option\" let-color=\"color\">\n  <div class=\"app-select-dot\"\n       [style.background-color]=\"color || option?.dotColor || '#10B981'\">\n  </div>\n</ng-template>", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media (max-width: 768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}.app-select-container{width:100%;position:relative}.app-select-label{display:flex;align-items:center;gap:4px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.app-select-wrapper{position:relative;width:100%}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#FFFFFF;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;color:#101828;text-align:left;cursor:pointer;transition:all .2s ease}.app-select-input.app-select-search-input{cursor:text}.app-select-input.app-select-search-input .app-select-search-field{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;background:transparent;color:#101828;min-width:0}.app-select-input.app-select-search-input .app-select-search-field::placeholder{color:#667085}.app-select-input.app-select-search-input .app-select-search-field:disabled{cursor:not-allowed;color:#667085}.app-select-input:hover:not(:disabled){border-color:#d0d5dd}.app-select-input.focused,.app-select-input:focus{outline:none;border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.app-select-input:disabled{background:#F9FAFB;border-color:#d0d5dd;cursor:not-allowed;opacity:.6}.app-select-container.error .app-select-input:focus{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-leading,.app-select-option-leading{display:flex;align-items:center;flex-shrink:0}.app-select-avatar,.app-select-option-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}.app-select-avatar img,.app-select-option-avatar img{width:100%;height:100%;object-fit:cover}.app-select-avatar .avatar-placeholder,.app-select-option-avatar .avatar-placeholder{width:100%;height:100%;background:#F2F4F7;color:#667085;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0;font-weight:600;font-style:normal}.app-select-dot,.app-select-option-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.app-select-value-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-value-wrapper .app-select-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085}.app-select-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-value.placeholder{color:#667085}.app-select-secondary,.app-select-option-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085;white-space:nowrap;flex-shrink:0}.app-select-arrow{margin-left:auto;flex-shrink:0;transition:transform .2s ease}.app-select-arrow.rotated{transform:rotate(180deg)}.app-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:#FFFFFF;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-dropdown.dropdown-up{top:auto;bottom:calc(100% + 4px)}.app-select-dropdown.dropdown-down,.app-select-dropdown.dropdown-auto{top:calc(100% + 4px);bottom:auto}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search .app-select-search-input{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;color:#101828}.app-select-search .app-select-search-input::placeholder{color:#667085}.app-select-options{flex:1;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#D0D5DD;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#F9FAFB}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-arrow,.app-select-container.disabled .app-select-leading zen-icon,.app-select-container.disabled .app-select-search-input zen-icon,.app-select-container.disabled .app-select-secondary,.app-select-container.disabled .app-select-search-field{opacity:.6}.app-select-container.disabled .app-select-input,.app-select-container.disabled .app-select-search-input{background:#F9FAFB;cursor:not-allowed}.app-select-hint{display:flex;align-items:center;gap:4px;margin-top:6px;color:#667085}.app-select-hint .hint-icon{font-size:16px;color:#f04438}.app-select-hint.destructive{color:#f04438}.app-select-option.select-all{border-bottom:1px solid #F2F4F7;margin-bottom:4px;padding-bottom:14px}.app-select-option.add-new-option{color:#136ab6;font-weight:500}.app-select-option.add-new-option:hover{background:#EFF8FF}.app-select-option.remove-option{color:#f04438;font-weight:500}.app-select-option.remove-option:hover{background:#FEF3F2}.app-select-spinner{display:flex;justify-content:center;padding:16px}.app-select-spinner .spinner-small{width:20px;height:20px;border:2px solid #F2F4F7;border-top-color:#136ab6;border-radius:50%;animation:spin .6s linear infinite}.app-select-load-more{padding:8px 14px}.app-select-load-more .app-select-load-more-btn{width:100%;padding:8px 16px;background:#FFFFFF;border:1px solid #D0D5DD;border-radius:6px;color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0;font-weight:500;font-style:normal;cursor:pointer;transition:all .15s ease}.app-select-load-more .app-select-load-more-btn:hover{background:#F9FAFB;border-color:#667085}@keyframes spin{to{transform:rotate(360deg)}}.app-select-dropdown ::ng-deep zen-groups .zen-groups-inline{display:flex;flex-direction:column;max-height:310px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree{flex:1;overflow-y:auto;padding:4px 0}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar{width:6px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-track{background:transparent}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-thumb{background:#D0D5DD;border-radius:3px}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox{padding:10px 14px;font-weight:400;font-size:14px;line-height:20px;color:#344054}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox:hover{background:#F9FAFB}.app-select-dropdown ::ng-deep zen-groups .select-all{border-bottom:none;margin-bottom:0;font-weight:500}.app-select-dropdown ::ng-deep zen-groups .tree-item[style*=padding-left]{padding-right:14px}.app-select-dropdown ::ng-deep zen-groups .tree-item-badge{background:#f1f7fe;color:#105494}.app-select-dropdown ::ng-deep zen-groups .checkbox-component .app-checkbox-label{font-weight:400;color:#344054}.app-select-dropdown ::ng-deep zen-groups .zen-groups-no-results{padding:32px 24px;text-align:center;color:#667085}@media (max-width: 640px){.app-select-dropdown{position:fixed;inset:auto 0 0;max-height:70vh;border-radius:16px 16px 0 0}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { selectModel: [{
                 type: Input
             }], selectModelChange: [{
@@ -9677,10 +9690,10 @@ class ZenTopNavComponent {
     }
 }
 ZenTopNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenTopNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZenTopNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenTopNavComponent, selector: "zen-top-nav", inputs: { breadcrumbs: "breadcrumbs", submoduleItems: "submoduleItems", activeSubmodule: "activeSubmodule", showBackButton: "showBackButton", profileData: "profileData", profileMenuItems: "profileMenuItems", showClarity: "showClarity", notificationCount: "notificationCount", tabs: "tabs", activeTab: "activeTab" }, outputs: { back: "back", breadcrumbClick: "breadcrumbClick", submoduleChange: "submoduleChange", tabChange: "tabChange", clarityClick: "clarityClick", notificationClick: "notificationClick", chatClick: "chatClick", profileMenuItemClick: "profileMenuItemClick" }, ngImport: i0, template: "<div class=\"zen-top-nav\" [class.zen-top-nav--with-tabs]=\"hasTabs\">\n  <!-- Main bar -->\n  <div class=\"zen-top-nav__bar\">\n    <!-- Left side -->\n    <div class=\"zen-top-nav__left\">\n      <!-- Back button -->\n      <button *ngIf=\"showBackButton\" class=\"zen-top-nav__back\" type=\"button\" (click)=\"onBack()\">\n        <zen-icon name=\"arrow-left\" [customColor]=\"'#667085'\"\n                  class=\"zen-top-nav__back-icon\"></zen-icon>\n      </button>\n\n      <!-- Option A: Submodule tabs -->\n      <div *ngIf=\"hasSubmodules\" class=\"zen-top-nav__submodules\">\n        <zen-submodule-item *ngFor=\"let item of submoduleItems\"\n                            [label]=\"item.label\"\n                            [icon]=\"item.icon\"\n                            [current]=\"activeSubmodule === (item.tag || item.label)\"\n                            (activate)=\"onSubmoduleClick(item)\">\n        </zen-submodule-item>\n      </div>\n\n      <!-- Option B: Breadcrumbs -->\n      <div *ngIf=\"!hasSubmodules && breadcrumbs.length\" class=\"zen-top-nav__breadcrumbs\">\n        <ng-container *ngFor=\"let crumb of breadcrumbs; let i = index; let last = last\">\n          <div class=\"zen-top-nav__breadcrumb-item\"\n               (click)=\"onBreadcrumbClick(crumb)\">\n            <zen-icon *ngIf=\"crumb.icon\"\n                      class=\"zen-top-nav__breadcrumb-icon\"\n                      [name]=\"crumb.icon\"\n                      [customColor]=\"getBreadcrumbColor(crumb, i)\"></zen-icon>\n            <span *ngIf=\"crumb.text\"\n                  class=\"zen-top-nav__breadcrumb-text\"\n                  [style.color]=\"getBreadcrumbColor(crumb, i)\">\n              {{ crumb.text }}\n            </span>\n            <div *ngIf=\"crumb.tooltip\" class=\"zen-top-nav__breadcrumb-tooltip\">{{ crumb.tooltip }}</div>\n          </div>\n          <zen-icon *ngIf=\"!last\"\n                    class=\"zen-top-nav__breadcrumb-chevron\"\n                    name=\"chevron-right\"\n                    [customColor]=\"'#667085'\"></zen-icon>\n        </ng-container>\n      </div>\n\n      <!-- Option C: Content projection for custom left content -->\n      <ng-content select=\"[topNavLeft]\"></ng-content>\n    </div>\n\n    <!-- Right side: Top menu items -->\n    <div class=\"zen-top-nav__right\">\n      <ng-content select=\"[topNavRight]\"></ng-content>\n      <zen-top-nav-item *ngIf=\"showClarity\"\n                        menu=\"clarity\"\n                        (activate)=\"clarityClick.emit()\"></zen-top-nav-item>\n      <div class=\"zen-top-nav__actions\">\n        <zen-top-nav-item menu=\"chat\"\n                          (activate)=\"chatClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"notification\"\n                          [badgeCount]=\"notificationCount\"\n                          (activate)=\"notificationClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"profile\"\n                          [profileData]=\"profileData\"\n                          [profileMenuItems]=\"profileMenuItems\"\n                          (profileMenuItemClick)=\"profileMenuItemClick.emit($event)\"></zen-top-nav-item>\n      </div>\n    </div>\n  </div>\n\n  <!-- Horizontal tabs (second row) -->\n  <div *ngIf=\"hasTabs\" class=\"zen-top-nav__tabs\">\n    <div class=\"zen-top-nav__tabs-list\">\n      <a *ngFor=\"let tab of tabs\"\n         class=\"zen-top-nav__tab\"\n         [class.zen-top-nav__tab--active]=\"activeTab === tab.label\"\n         (click)=\"onTabClick(tab)\">\n        {{ tab.label }}\n      </a>\n    </div>\n    <div class=\"zen-top-nav__tabs-divider\"></div>\n  </div>\n</div>\n", styles: [".zen-top-nav{display:flex;flex-direction:column;width:100%;box-sizing:border-box;background-color:#101828}.zen-top-nav__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;border-bottom:1px solid rgba(255,255,255,.08)}.zen-top-nav--with-tabs .zen-top-nav__bar{border-bottom:none}.zen-top-nav__left{display:flex;align-items:center;gap:16px}.zen-top-nav__back{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;border:none;border-radius:8px;background:transparent;cursor:pointer;flex-shrink:0}.zen-top-nav__back:hover{background:rgba(255,255,255,.1)}.zen-top-nav__back-icon{display:inline-block;width:20px;height:20px}.zen-top-nav__submodules{display:flex;align-items:center;gap:4px}.zen-top-nav__breadcrumbs{display:flex;align-items:center;gap:12px;height:30px}.zen-top-nav__breadcrumb-item{display:flex;align-items:center;gap:4px;cursor:pointer;padding:8px;border-radius:8px;position:relative;transition:background-color .2s}.zen-top-nav__breadcrumb-item:hover{background:rgba(255,255,255,.1)}.zen-top-nav__breadcrumb-item:hover .zen-top-nav__breadcrumb-tooltip{display:block}.zen-top-nav__breadcrumb-tooltip{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:#344054;color:#fff;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:18px;padding:4px 8px;border-radius:6px;white-space:nowrap;z-index:10;pointer-events:none}.zen-top-nav__breadcrumb-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-bottom-color:#344054}.zen-top-nav__breadcrumb-icon{display:inline-block;width:20px;height:20px;flex-shrink:0}.zen-top-nav__breadcrumb-text{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;white-space:nowrap}.zen-top-nav__breadcrumb-chevron{display:inline-block;width:16px;height:16px;flex-shrink:0}.zen-top-nav__right{display:flex;align-items:center;gap:24px}.zen-top-nav__actions{display:flex;align-items:center;gap:8px}.zen-top-nav__tabs{display:flex;flex-direction:column;padding:12px 24px 0}.zen-top-nav__tabs-list{display:flex;gap:16px}.zen-top-nav__tab{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px 4px 11px;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#667085;cursor:pointer;text-decoration:none;border-bottom:2px solid transparent;transition:color .15s}.zen-top-nav__tab:hover{color:#d0d5dd}.zen-top-nav__tab--active{color:#105494;border-bottom-color:#105494}.zen-top-nav__tabs-divider{height:1px;background:#EAECF0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenSubmoduleItemComponent, selector: "zen-submodule-item", inputs: ["label", "icon", "current"], outputs: ["activate"] }, { kind: "component", type: ZenTopNavItemComponent, selector: "zen-top-nav-item", inputs: ["menu", "state", "tooltipText", "badgeCount", "clarityLabel", "profileData", "profileMenuItems"], outputs: ["activate", "profileMenuItemClick"] }] });
+ZenTopNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenTopNavComponent, selector: "zen-top-nav", inputs: { breadcrumbs: "breadcrumbs", submoduleItems: "submoduleItems", activeSubmodule: "activeSubmodule", showBackButton: "showBackButton", profileData: "profileData", profileMenuItems: "profileMenuItems", showClarity: "showClarity", notificationCount: "notificationCount", tabs: "tabs", activeTab: "activeTab" }, outputs: { back: "back", breadcrumbClick: "breadcrumbClick", submoduleChange: "submoduleChange", tabChange: "tabChange", clarityClick: "clarityClick", notificationClick: "notificationClick", chatClick: "chatClick", profileMenuItemClick: "profileMenuItemClick" }, ngImport: i0, template: "<div class=\"zen-top-nav\" [class.zen-top-nav--with-tabs]=\"hasTabs\">\n  <!-- Main bar -->\n  <div class=\"zen-top-nav__bar\">\n    <!-- Left side -->\n    <div class=\"zen-top-nav__left\">\n      <!-- Back button -->\n      <button *ngIf=\"showBackButton\" class=\"zen-top-nav__back\" type=\"button\" (click)=\"onBack()\">\n        <zen-icon name=\"arrow-left\" [customColor]=\"'#667085'\"\n                  class=\"zen-top-nav__back-icon\"></zen-icon>\n      </button>\n\n      <!-- Option A: Submodule tabs -->\n      <div *ngIf=\"hasSubmodules\" class=\"zen-top-nav__submodules\">\n        <zen-submodule-item *ngFor=\"let item of submoduleItems\"\n                            [label]=\"item.label\"\n                            [icon]=\"item.icon\"\n                            [current]=\"activeSubmodule === (item.tag || item.label)\"\n                            (activate)=\"onSubmoduleClick(item)\">\n        </zen-submodule-item>\n      </div>\n\n      <!-- Option B: Breadcrumbs -->\n      <div *ngIf=\"!hasSubmodules && breadcrumbs.length\" class=\"zen-top-nav__breadcrumbs\">\n        <ng-container *ngFor=\"let crumb of breadcrumbs; let i = index; let last = last\">\n          <div class=\"zen-top-nav__breadcrumb-item\"\n               (click)=\"onBreadcrumbClick(crumb)\">\n            <zen-icon *ngIf=\"crumb.icon\"\n                      class=\"zen-top-nav__breadcrumb-icon\"\n                      [name]=\"crumb.icon\"\n                      [customColor]=\"getBreadcrumbColor(crumb, i)\"></zen-icon>\n            <span *ngIf=\"crumb.text\"\n                  class=\"zen-top-nav__breadcrumb-text\"\n                  [style.color]=\"getBreadcrumbColor(crumb, i)\">\n              {{ crumb.text }}\n            </span>\n            <div *ngIf=\"crumb.tooltip\" class=\"zen-top-nav__breadcrumb-tooltip\">{{ crumb.tooltip }}</div>\n          </div>\n          <zen-icon *ngIf=\"!last\"\n                    class=\"zen-top-nav__breadcrumb-chevron\"\n                    name=\"chevron-right\"\n                    [customColor]=\"'#667085'\"></zen-icon>\n        </ng-container>\n      </div>\n\n      <!-- Option C: Content projection for custom left content -->\n      <ng-content select=\"[topNavLeft]\"></ng-content>\n    </div>\n\n    <!-- Right side: Top menu items -->\n    <div class=\"zen-top-nav__right\">\n      <ng-content select=\"[topNavRight]\"></ng-content>\n      <zen-top-nav-item *ngIf=\"showClarity\"\n                        menu=\"clarity\"\n                        (activate)=\"clarityClick.emit()\"></zen-top-nav-item>\n      <div class=\"zen-top-nav__actions\">\n        <zen-top-nav-item menu=\"chat\"\n                          (activate)=\"chatClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"notification\"\n                          [badgeCount]=\"notificationCount\"\n                          (activate)=\"notificationClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"profile\"\n                          [profileData]=\"profileData\"\n                          [profileMenuItems]=\"profileMenuItems\"\n                          (profileMenuItemClick)=\"profileMenuItemClick.emit($event)\"></zen-top-nav-item>\n      </div>\n    </div>\n  </div>\n\n  <!-- Horizontal tabs (second row) -->\n  <div *ngIf=\"hasTabs\" class=\"zen-top-nav__tabs\">\n    <div class=\"zen-top-nav__tabs-list\">\n      <a *ngFor=\"let tab of tabs\"\n         class=\"zen-top-nav__tab\"\n         [class.zen-top-nav__tab--active]=\"activeTab === tab.label\"\n         (click)=\"onTabClick(tab)\">\n        {{ tab.label }}\n      </a>\n    </div>\n    <div class=\"zen-top-nav__tabs-divider\"></div>\n  </div>\n</div>\n", styles: [".zen-top-nav{display:flex;flex-direction:column;width:100%;min-width:-moz-fit-content;min-width:fit-content;box-sizing:border-box;background-color:#101828}.zen-top-nav__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;border-bottom:1px solid rgba(255,255,255,.08)}.zen-top-nav--with-tabs .zen-top-nav__bar{border-bottom:none}.zen-top-nav__left{display:flex;align-items:center;gap:16px}.zen-top-nav__back{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;border:none;border-radius:8px;background:transparent;cursor:pointer;flex-shrink:0}.zen-top-nav__back:hover{background:rgba(255,255,255,.1)}.zen-top-nav__back-icon{display:inline-block;width:20px;height:20px}.zen-top-nav__submodules{display:flex;align-items:center;gap:4px}.zen-top-nav__breadcrumbs{display:flex;align-items:center;gap:12px;height:30px}.zen-top-nav__breadcrumb-item{display:flex;align-items:center;gap:4px;cursor:pointer;padding:8px;border-radius:8px;position:relative;transition:background-color .2s}.zen-top-nav__breadcrumb-item:hover{background:rgba(255,255,255,.1)}.zen-top-nav__breadcrumb-item:hover .zen-top-nav__breadcrumb-tooltip{display:block}.zen-top-nav__breadcrumb-tooltip{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:#344054;color:#fff;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:18px;padding:4px 8px;border-radius:6px;white-space:nowrap;z-index:10;pointer-events:none}.zen-top-nav__breadcrumb-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-bottom-color:#344054}.zen-top-nav__breadcrumb-icon{display:inline-block;width:20px;height:20px;flex-shrink:0}.zen-top-nav__breadcrumb-text{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;white-space:nowrap}.zen-top-nav__breadcrumb-chevron{display:inline-block;width:16px;height:16px;flex-shrink:0}.zen-top-nav__right{display:flex;align-items:center;gap:24px}.zen-top-nav__actions{display:flex;align-items:center;gap:8px}.zen-top-nav__tabs{display:flex;flex-direction:column;padding:12px 24px 0}.zen-top-nav__tabs-list{display:flex;gap:16px}.zen-top-nav__tab{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px 4px 11px;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#667085;cursor:pointer;text-decoration:none;border-bottom:2px solid transparent;transition:color .15s}.zen-top-nav__tab:hover{color:#d0d5dd}.zen-top-nav__tab--active{color:#105494;border-bottom-color:#105494}.zen-top-nav__tabs-divider{height:1px;background:#EAECF0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenSubmoduleItemComponent, selector: "zen-submodule-item", inputs: ["label", "icon", "current"], outputs: ["activate"] }, { kind: "component", type: ZenTopNavItemComponent, selector: "zen-top-nav-item", inputs: ["menu", "state", "tooltipText", "badgeCount", "clarityLabel", "profileData", "profileMenuItems"], outputs: ["activate", "profileMenuItemClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenTopNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'zen-top-nav', template: "<div class=\"zen-top-nav\" [class.zen-top-nav--with-tabs]=\"hasTabs\">\n  <!-- Main bar -->\n  <div class=\"zen-top-nav__bar\">\n    <!-- Left side -->\n    <div class=\"zen-top-nav__left\">\n      <!-- Back button -->\n      <button *ngIf=\"showBackButton\" class=\"zen-top-nav__back\" type=\"button\" (click)=\"onBack()\">\n        <zen-icon name=\"arrow-left\" [customColor]=\"'#667085'\"\n                  class=\"zen-top-nav__back-icon\"></zen-icon>\n      </button>\n\n      <!-- Option A: Submodule tabs -->\n      <div *ngIf=\"hasSubmodules\" class=\"zen-top-nav__submodules\">\n        <zen-submodule-item *ngFor=\"let item of submoduleItems\"\n                            [label]=\"item.label\"\n                            [icon]=\"item.icon\"\n                            [current]=\"activeSubmodule === (item.tag || item.label)\"\n                            (activate)=\"onSubmoduleClick(item)\">\n        </zen-submodule-item>\n      </div>\n\n      <!-- Option B: Breadcrumbs -->\n      <div *ngIf=\"!hasSubmodules && breadcrumbs.length\" class=\"zen-top-nav__breadcrumbs\">\n        <ng-container *ngFor=\"let crumb of breadcrumbs; let i = index; let last = last\">\n          <div class=\"zen-top-nav__breadcrumb-item\"\n               (click)=\"onBreadcrumbClick(crumb)\">\n            <zen-icon *ngIf=\"crumb.icon\"\n                      class=\"zen-top-nav__breadcrumb-icon\"\n                      [name]=\"crumb.icon\"\n                      [customColor]=\"getBreadcrumbColor(crumb, i)\"></zen-icon>\n            <span *ngIf=\"crumb.text\"\n                  class=\"zen-top-nav__breadcrumb-text\"\n                  [style.color]=\"getBreadcrumbColor(crumb, i)\">\n              {{ crumb.text }}\n            </span>\n            <div *ngIf=\"crumb.tooltip\" class=\"zen-top-nav__breadcrumb-tooltip\">{{ crumb.tooltip }}</div>\n          </div>\n          <zen-icon *ngIf=\"!last\"\n                    class=\"zen-top-nav__breadcrumb-chevron\"\n                    name=\"chevron-right\"\n                    [customColor]=\"'#667085'\"></zen-icon>\n        </ng-container>\n      </div>\n\n      <!-- Option C: Content projection for custom left content -->\n      <ng-content select=\"[topNavLeft]\"></ng-content>\n    </div>\n\n    <!-- Right side: Top menu items -->\n    <div class=\"zen-top-nav__right\">\n      <ng-content select=\"[topNavRight]\"></ng-content>\n      <zen-top-nav-item *ngIf=\"showClarity\"\n                        menu=\"clarity\"\n                        (activate)=\"clarityClick.emit()\"></zen-top-nav-item>\n      <div class=\"zen-top-nav__actions\">\n        <zen-top-nav-item menu=\"chat\"\n                          (activate)=\"chatClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"notification\"\n                          [badgeCount]=\"notificationCount\"\n                          (activate)=\"notificationClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"profile\"\n                          [profileData]=\"profileData\"\n                          [profileMenuItems]=\"profileMenuItems\"\n                          (profileMenuItemClick)=\"profileMenuItemClick.emit($event)\"></zen-top-nav-item>\n      </div>\n    </div>\n  </div>\n\n  <!-- Horizontal tabs (second row) -->\n  <div *ngIf=\"hasTabs\" class=\"zen-top-nav__tabs\">\n    <div class=\"zen-top-nav__tabs-list\">\n      <a *ngFor=\"let tab of tabs\"\n         class=\"zen-top-nav__tab\"\n         [class.zen-top-nav__tab--active]=\"activeTab === tab.label\"\n         (click)=\"onTabClick(tab)\">\n        {{ tab.label }}\n      </a>\n    </div>\n    <div class=\"zen-top-nav__tabs-divider\"></div>\n  </div>\n</div>\n", styles: [".zen-top-nav{display:flex;flex-direction:column;width:100%;box-sizing:border-box;background-color:#101828}.zen-top-nav__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;border-bottom:1px solid rgba(255,255,255,.08)}.zen-top-nav--with-tabs .zen-top-nav__bar{border-bottom:none}.zen-top-nav__left{display:flex;align-items:center;gap:16px}.zen-top-nav__back{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;border:none;border-radius:8px;background:transparent;cursor:pointer;flex-shrink:0}.zen-top-nav__back:hover{background:rgba(255,255,255,.1)}.zen-top-nav__back-icon{display:inline-block;width:20px;height:20px}.zen-top-nav__submodules{display:flex;align-items:center;gap:4px}.zen-top-nav__breadcrumbs{display:flex;align-items:center;gap:12px;height:30px}.zen-top-nav__breadcrumb-item{display:flex;align-items:center;gap:4px;cursor:pointer;padding:8px;border-radius:8px;position:relative;transition:background-color .2s}.zen-top-nav__breadcrumb-item:hover{background:rgba(255,255,255,.1)}.zen-top-nav__breadcrumb-item:hover .zen-top-nav__breadcrumb-tooltip{display:block}.zen-top-nav__breadcrumb-tooltip{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:#344054;color:#fff;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:18px;padding:4px 8px;border-radius:6px;white-space:nowrap;z-index:10;pointer-events:none}.zen-top-nav__breadcrumb-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-bottom-color:#344054}.zen-top-nav__breadcrumb-icon{display:inline-block;width:20px;height:20px;flex-shrink:0}.zen-top-nav__breadcrumb-text{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;white-space:nowrap}.zen-top-nav__breadcrumb-chevron{display:inline-block;width:16px;height:16px;flex-shrink:0}.zen-top-nav__right{display:flex;align-items:center;gap:24px}.zen-top-nav__actions{display:flex;align-items:center;gap:8px}.zen-top-nav__tabs{display:flex;flex-direction:column;padding:12px 24px 0}.zen-top-nav__tabs-list{display:flex;gap:16px}.zen-top-nav__tab{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px 4px 11px;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#667085;cursor:pointer;text-decoration:none;border-bottom:2px solid transparent;transition:color .15s}.zen-top-nav__tab:hover{color:#d0d5dd}.zen-top-nav__tab--active{color:#105494;border-bottom-color:#105494}.zen-top-nav__tabs-divider{height:1px;background:#EAECF0}\n"] }]
+            args: [{ selector: 'zen-top-nav', template: "<div class=\"zen-top-nav\" [class.zen-top-nav--with-tabs]=\"hasTabs\">\n  <!-- Main bar -->\n  <div class=\"zen-top-nav__bar\">\n    <!-- Left side -->\n    <div class=\"zen-top-nav__left\">\n      <!-- Back button -->\n      <button *ngIf=\"showBackButton\" class=\"zen-top-nav__back\" type=\"button\" (click)=\"onBack()\">\n        <zen-icon name=\"arrow-left\" [customColor]=\"'#667085'\"\n                  class=\"zen-top-nav__back-icon\"></zen-icon>\n      </button>\n\n      <!-- Option A: Submodule tabs -->\n      <div *ngIf=\"hasSubmodules\" class=\"zen-top-nav__submodules\">\n        <zen-submodule-item *ngFor=\"let item of submoduleItems\"\n                            [label]=\"item.label\"\n                            [icon]=\"item.icon\"\n                            [current]=\"activeSubmodule === (item.tag || item.label)\"\n                            (activate)=\"onSubmoduleClick(item)\">\n        </zen-submodule-item>\n      </div>\n\n      <!-- Option B: Breadcrumbs -->\n      <div *ngIf=\"!hasSubmodules && breadcrumbs.length\" class=\"zen-top-nav__breadcrumbs\">\n        <ng-container *ngFor=\"let crumb of breadcrumbs; let i = index; let last = last\">\n          <div class=\"zen-top-nav__breadcrumb-item\"\n               (click)=\"onBreadcrumbClick(crumb)\">\n            <zen-icon *ngIf=\"crumb.icon\"\n                      class=\"zen-top-nav__breadcrumb-icon\"\n                      [name]=\"crumb.icon\"\n                      [customColor]=\"getBreadcrumbColor(crumb, i)\"></zen-icon>\n            <span *ngIf=\"crumb.text\"\n                  class=\"zen-top-nav__breadcrumb-text\"\n                  [style.color]=\"getBreadcrumbColor(crumb, i)\">\n              {{ crumb.text }}\n            </span>\n            <div *ngIf=\"crumb.tooltip\" class=\"zen-top-nav__breadcrumb-tooltip\">{{ crumb.tooltip }}</div>\n          </div>\n          <zen-icon *ngIf=\"!last\"\n                    class=\"zen-top-nav__breadcrumb-chevron\"\n                    name=\"chevron-right\"\n                    [customColor]=\"'#667085'\"></zen-icon>\n        </ng-container>\n      </div>\n\n      <!-- Option C: Content projection for custom left content -->\n      <ng-content select=\"[topNavLeft]\"></ng-content>\n    </div>\n\n    <!-- Right side: Top menu items -->\n    <div class=\"zen-top-nav__right\">\n      <ng-content select=\"[topNavRight]\"></ng-content>\n      <zen-top-nav-item *ngIf=\"showClarity\"\n                        menu=\"clarity\"\n                        (activate)=\"clarityClick.emit()\"></zen-top-nav-item>\n      <div class=\"zen-top-nav__actions\">\n        <zen-top-nav-item menu=\"chat\"\n                          (activate)=\"chatClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"notification\"\n                          [badgeCount]=\"notificationCount\"\n                          (activate)=\"notificationClick.emit()\"></zen-top-nav-item>\n        <zen-top-nav-item menu=\"profile\"\n                          [profileData]=\"profileData\"\n                          [profileMenuItems]=\"profileMenuItems\"\n                          (profileMenuItemClick)=\"profileMenuItemClick.emit($event)\"></zen-top-nav-item>\n      </div>\n    </div>\n  </div>\n\n  <!-- Horizontal tabs (second row) -->\n  <div *ngIf=\"hasTabs\" class=\"zen-top-nav__tabs\">\n    <div class=\"zen-top-nav__tabs-list\">\n      <a *ngFor=\"let tab of tabs\"\n         class=\"zen-top-nav__tab\"\n         [class.zen-top-nav__tab--active]=\"activeTab === tab.label\"\n         (click)=\"onTabClick(tab)\">\n        {{ tab.label }}\n      </a>\n    </div>\n    <div class=\"zen-top-nav__tabs-divider\"></div>\n  </div>\n</div>\n", styles: [".zen-top-nav{display:flex;flex-direction:column;width:100%;min-width:-moz-fit-content;min-width:fit-content;box-sizing:border-box;background-color:#101828}.zen-top-nav__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;border-bottom:1px solid rgba(255,255,255,.08)}.zen-top-nav--with-tabs .zen-top-nav__bar{border-bottom:none}.zen-top-nav__left{display:flex;align-items:center;gap:16px}.zen-top-nav__back{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;border:none;border-radius:8px;background:transparent;cursor:pointer;flex-shrink:0}.zen-top-nav__back:hover{background:rgba(255,255,255,.1)}.zen-top-nav__back-icon{display:inline-block;width:20px;height:20px}.zen-top-nav__submodules{display:flex;align-items:center;gap:4px}.zen-top-nav__breadcrumbs{display:flex;align-items:center;gap:12px;height:30px}.zen-top-nav__breadcrumb-item{display:flex;align-items:center;gap:4px;cursor:pointer;padding:8px;border-radius:8px;position:relative;transition:background-color .2s}.zen-top-nav__breadcrumb-item:hover{background:rgba(255,255,255,.1)}.zen-top-nav__breadcrumb-item:hover .zen-top-nav__breadcrumb-tooltip{display:block}.zen-top-nav__breadcrumb-tooltip{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:#344054;color:#fff;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:18px;padding:4px 8px;border-radius:6px;white-space:nowrap;z-index:10;pointer-events:none}.zen-top-nav__breadcrumb-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-bottom-color:#344054}.zen-top-nav__breadcrumb-icon{display:inline-block;width:20px;height:20px;flex-shrink:0}.zen-top-nav__breadcrumb-text{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;white-space:nowrap}.zen-top-nav__breadcrumb-chevron{display:inline-block;width:16px;height:16px;flex-shrink:0}.zen-top-nav__right{display:flex;align-items:center;gap:24px}.zen-top-nav__actions{display:flex;align-items:center;gap:8px}.zen-top-nav__tabs{display:flex;flex-direction:column;padding:12px 24px 0}.zen-top-nav__tabs-list{display:flex;gap:16px}.zen-top-nav__tab{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px 4px 11px;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#667085;cursor:pointer;text-decoration:none;border-bottom:2px solid transparent;transition:color .15s}.zen-top-nav__tab:hover{color:#d0d5dd}.zen-top-nav__tab--active{color:#105494;border-bottom-color:#105494}.zen-top-nav__tabs-divider{height:1px;background:#EAECF0}\n"] }]
         }], propDecorators: { breadcrumbs: [{
                 type: Input
             }], submoduleItems: [{