ng-zenduit 2.3.2 → 2.3.4

package/fesm2022/ng-zenduit.mjs

@@ -3217,6 +3217,11 @@ class ZenduFilterComponent {
         // selection count. Read through hasActiveFilters in ngDoCheck().
         this.isApplied = false;
         this.lastAppliedFilter = {};
+        // Cached JSON of the default preset's filter object (getFilterObject of
+        // defaultFilter). Invariant between config/defaultFilter changes, so it's
+        // computed in ngOnChanges and reused each tick by ngDoCheck — avoiding a
+        // rebuild of the default object on every change-detection cycle.
+        this._defaultFilterSignature = null;
         // Plain fields (not getters) read directly in the template. Recomputed once
         // per change-detection cycle in ngDoCheck(), so the template's repeated reads
         // (badge condition, badge value, footer, trigger highlight) cost O(1) each
@@ -3225,6 +3230,11 @@ class ZenduFilterComponent {
         // ngDoCheck). Drives the in-menu footer counter, the Clear button and the
         // per-section dots — the editing surface, which reverts on cancel.
         this.selectedCount = 0;
+        // Whether the Clear / Reset button is disabled (recomputed each CD). In clear
+        // mode it's disabled when nothing is selected; in default mode (defaultFilter
+        // set) it's disabled only when the current selection already equals the
+        // default — so resetting to the default is always offered when state differs.
+        this.resetDisabled = true;
         // Count of the APPLIED filter (last committed via Apply / external sync /
         // init). Drives the trigger badge + highlight so the trigger reflects what is
         // actually filtering the data, not in-progress edits. Updated only in
@@ -3283,6 +3293,15 @@ class ZenduFilterComponent {
             this.updatePlacement(this.customPosition);
             this.focusSearchBox();
         }
+        // Cache the default preset's filter signature so ngDoCheck only diffs the
+        // (mutating) live state against it, instead of rebuilding the invariant
+        // default object every tick. Recomputed only when config / defaultFilter
+        // change, and after the config branch above has built the data sources.
+        if (changes.config || changes.defaultFilter) {
+            this._defaultFilterSignature = this.defaultFilter
+                ? JSON.stringify(this.getFilterObject(this.defaultFilter))
+                : null;
+        }
     }
     ngDoCheck() {
         // Recompute the cached badge count + trigger highlight once per change-
@@ -3292,6 +3311,13 @@ class ZenduFilterComponent {
         // calls across every binding.
         // Live (current panel) count for the footer / Clear / dots.
         this.selectedCount = this.computeSelectedCount();
+        // Clear/Reset button enablement. With a defaultFilter, the button resets TO
+        // that preset, so it's enabled whenever the current selection differs from
+        // the default (even when the current selection is empty). Without one, it
+        // clears, so it's disabled when nothing is selected.
+        this.resetDisabled = this.defaultFilter
+            ? JSON.stringify(this.getFilterObject()) === this._defaultFilterSignature
+            : this.selectedCount === 0;
         // Trigger highlight tracks the APPLIED state (appliedCount), not the live
         // edit, OR a host forcing it via isApplied (set internally by
         // updateAppliedState(), and externally through a ViewChild — e.g. users /
@@ -3589,6 +3615,12 @@ class ZenduFilterComponent {
             }
         }
     }
+    // Lets the whole toggle row act as the switch: clicking anywhere on the row
+    // flips the boolean. The inner zen-toggle stops click propagation so a direct
+    // click on the switch toggles once (via its own [(enabled)]) instead of twice.
+    toggleEnabled(item) {
+        item.enabled = !item.enabled;
+    }
     resetFilters() {
         let selectAll = this.resetBehavior === 'set_all';
         this.selectedDateRangeOptions = {};
@@ -3625,11 +3657,19 @@ class ZenduFilterComponent {
         }
     }
     restorePreviousApplied() {
+        this.applyFilterToItems(this.lastAppliedFilter);
+    }
+    /**
+     * Reflects a filter object onto the in-panel item state (checkboxes, radios,
+     * ranges, toggle/date) without emitting. Used to restore the last-applied
+     * filter and to reset the panel to a provided `defaultFilter`.
+     */
+    applyFilterToItems(source) {
         for (const item of this.config.items) {
             switch (item.type) {
                 case 'multiselect':
                     if (item.dataSource) {
-                        const selection = this.lastAppliedFilter[item.key];
+                        const selection = source[item.key];
                         for (const dataItem of item.dataSource) {
                             dataItem.checked = selection
                                 ? selection.includes(dataItem.id)
@@ -3647,30 +3687,33 @@ class ZenduFilterComponent {
                 case 'dateRange':
                     // Clone so editing item.dateRange.start/end doesn't mutate the shared
                     // snapshot (which would defeat a later cancel/revert).
-                    item.dateRange = this.lastAppliedFilter[item.key]
-                        ? Util.clone(this.lastAppliedFilter[item.key])
+                    item.dateRange = source[item.key]
+                        ? Util.clone(source[item.key])
                         : { start: null, end: null };
                     break;
                 case 'numberRange':
                     // Clone — same aliasing concern as dateRange above.
-                    item.numberRange = this.lastAppliedFilter[item.key]
-                        ? Util.clone(this.lastAppliedFilter[item.key])
+                    item.numberRange = source[item.key]
+                        ? Util.clone(source[item.key])
                         : {};
                     break;
                 case 'toggle':
                     // Restore the toggle's own state (was wrongly writing item.dateRange,
                     // so toggles never reverted on cancel and kept counting).
-                    item.enabled = this.lastAppliedFilter[item.key];
+                    item.enabled = source[item.key];
                     break;
                 case 'date':
-                    item.date = this.lastAppliedFilter[item.key];
+                    item.date = source[item.key];
                     break;
                 case 'radio':
-                    // Restore the radio SELECTION to the last applied value; never touch
+                    // Restore the radio SELECTION to the source value; never touch
                     // selectedRadio — that's the immutable default resetFilters() resets to
                     // (overwriting it here broke Clear Filter and the active-count default).
+                    // When the source omits this key (e.g. a partial defaultFilter), fall
+                    // back to the config default so a radio group is never left with
+                    // nothing selected.
                     if (item.radioOptions) {
-                        const appliedId = this.lastAppliedFilter[item.key];
+                        const appliedId = source[item.key] ?? item.selectedRadio;
                         item.radioOptions.forEach((o) => (o.selected = o.id === appliedId));
                     }
                     break;
@@ -3678,7 +3721,14 @@ class ZenduFilterComponent {
         }
     }
     reset() {
-        this.resetFilters();
+        if (this.defaultFilter) {
+            // Reset to the provided default preset instead of emptying everything.
+            this.applyFilterToItems(this.defaultFilter);
+        }
+        else {
+            // No default: clear (or select-all, per resetBehavior) as before.
+            this.resetFilters();
+        }
         this.filter = this.getFilterObject();
         this.resetedFilter = this.getFilterObject();
         this.resetLazyLoadingSources(false);
@@ -3752,42 +3802,63 @@ class ZenduFilterComponent {
             wrapperClass.scrollTo({ top: 0, behavior: 'auto' });
         }
     }
-    getFilterObject() {
+    /**
+     * Builds a filter object from the config items. By default it reads the live
+     * in-panel state; pass `source` (another filter object) to derive the SAME-
+     * shaped object from that source instead — used to compare the current
+     * selection against a default preset without duplicating the per-type rules.
+     */
+    getFilterObject(source) {
+        const live = !source;
         const filter = {};
         for (const item of this.config.items) {
             switch (item.type) {
                 case 'multiselect':
                     if (item.dataSource && item.dataSource.length) {
-                        const checkedIds = item.dataSource
-                            .filter((i) => i.checked)
-                            .map((i) => i.id);
+                        const checkedIds = live
+                            ? item.dataSource.filter((i) => i.checked).map((i) => i.id)
+                            : item.dataSource
+                                .filter((i) => Array.isArray(source[item.key]) &&
+                                source[item.key].includes(i.id))
+                                .map((i) => i.id);
                         if (checkedIds.length) {
                             filter[item.key] = checkedIds;
                         }
                     }
                     break;
-                case 'dateRange':
-                    if (item.dateRange && item.dateRange.start && item.dateRange.end) {
-                        filter[item.key] = item.dateRange;
+                case 'dateRange': {
+                    const range = live ? item.dateRange : source[item.key];
+                    if (range && range.start && range.end) {
+                        filter[item.key] = range;
                     }
                     break;
-                case 'numberRange':
-                    if (item.numberRange &&
-                        typeof item?.numberRange?.from === 'number' &&
-                        typeof item?.numberRange?.to === 'number') {
-                        filter[item.key] = item.numberRange;
+                }
+                case 'numberRange': {
+                    const range = live ? item.numberRange : source[item.key];
+                    if (range &&
+                        typeof range.from === 'number' &&
+                        typeof range.to === 'number') {
+                        filter[item.key] = range;
                     }
                     break;
+                }
                 case 'toggle':
-                    filter[item.key] = item.enabled || false;
+                    filter[item.key] = (live ? item.enabled : source[item.key]) || false;
                     break;
-                case 'date':
-                    if (item.date) {
-                        filter[item.key] = item.date;
+                case 'date': {
+                    const date = live ? item.date : source[item.key];
+                    if (date) {
+                        filter[item.key] = date;
                     }
                     break;
+                }
                 case 'radio':
-                    filter[item.key] = item.radioOptions.find((ro) => ro.selected)?.id;
+                    // Source side falls back to the config default when the key is
+                    // omitted, mirroring applyFilterToItems() so a partial default
+                    // compares equal to the state it actually produces.
+                    filter[item.key] = live
+                        ? item.radioOptions.find((ro) => ro.selected)?.id
+                        : (source[item.key] ?? item.selectedRadio);
                     break;
             }
         }
@@ -3817,6 +3888,15 @@ class ZenduFilterComponent {
         }
         // For tree items, zen-groups handles cascade internally
     }
+    // Lets a click anywhere on a multiselect row toggle its checkbox. Needed for
+    // badge rows, where the visible label is a separate styled span and the
+    // checkbox itself carries no clickable text. The inner zen-checkbox stops
+    // click propagation, so a direct click on it toggles once via its own
+    // [(checked)] instead of being toggled again here.
+    toggleDsItem(dsItem, item) {
+        dsItem.checked = !dsItem.checked;
+        this.checkChanged(dsItem, item);
+    }
     toggle() {
         this.isVisible = !this.isVisible;
         this.updatePlacement(this.customPosition);
@@ -4067,11 +4147,11 @@ class ZenduFilterComponent {
         return count;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFilterComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduFilterComponent, isStandalone: false, selector: "zen-filter", inputs: { config: "config", filter: "filter", position: "position", resetBehavior: "resetBehavior", isVisible: "isVisible", customTrigger: "customTrigger", imageUrl: "imageUrl", label: "label", triggerVariant: "triggerVariant", showOptions: "showOptions", customOptions: "customOptions", wrapperBodyClass: "wrapperBodyClass", customPosition: "customPosition" }, outputs: { filterChange: "filterChange", isVisibleChange: "isVisibleChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:resize": "windowSizeHandling()", "window:scroll": "windowScroll()", "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "_componentElement", first: true, predicate: ["mainComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"filters-component\"\n  #mainComponent\n  click-out=\"isVisible && hide()\">\n\n  @if (!customTrigger) {\n    <zen-button (click)=\"toggle()\"\n      [variant]=\"hasActiveFilters ? 'secondary' : 'secondary-gray'\"\n      class=\"filter {{hasActiveFilters ? 'applied' : ''}} {{triggerVariant === 'icon-only' ? 'icon-only' : ''}}\">\n      @if (imageUrl) {\n        <zen-icon [src]=\"imageUrl\"\n        ></zen-icon>\n      }\n      @if (!imageUrl) {\n        <zen-icon class=\"filter-icon\"\n        name=\"filter\"></zen-icon>\n      }\n      @if (triggerVariant !== 'icon-only') {\n        <span class=\"filter-label\">{{ (label || 'Filter') | translate }}</span>\n        @if (appliedCount > 0) {\n          <span class=\"filter-count-badge\">{{ appliedCount }}</span>\n        }\n      }\n    </zen-button>\n    <!-- Icon-only mode: count rendered as a corner badge overlapping the\n         button's top-right (sibling of the button so it isn't clipped). -->\n    @if (triggerVariant === 'icon-only' && appliedCount > 0) {\n      <span class=\"filter-icon-badge\">{{ appliedCount }}</span>\n    }\n  }\n\n  @if (customTrigger) {\n    <ng-content></ng-content>\n  }\n\n  <div [hidden]=\"!isVisible\"\n    class=\"filter-menu menu-content\"\n    [class.customTrigger]=\"customTrigger\"\n    [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom, 'max-height': menuMaxHeight }\">\n    <div class=\"filter-menu__header\">\n      <zen-search-box [(text)]=\"searchText\"\n        #searchBox\n      (textChange)=\"searchTextChanged()\"></zen-search-box>\n    </div>\n\n    <div class=\"filter-menu__body\"\n      ngClass=\"{{wrapperBodyClass}}\">\n      @if (errorMessage.length) {\n        @for (item of errorMessage; track item) {\n          <li\n          class=\"error-msg\">{{item | translate }}</li>\n        }\n      }\n\n      @for (item of config.items; track item) {\n          @if (isMenuIsVisible(item)) {\n            <div class=\"menu-item\"\n              >\n              <!-- Divider between two filter -->\n              @if (item.type === 'divider') {\n                <p class=\"filter-divider\"></p>\n              }\n              <!-- Boolean toggle -->\n              @if (item.type === 'toggle') {\n                <div\n                  class=\"action-item toggle-row\">\n                  <div>{{item.title | translate}}</div>\n                  <zen-toggle [(enabled)]=\"item.enabled\"></zen-toggle>\n                </div>\n              }\n              @if (item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse) {\n                <button class=\"action-item expander-item\"\n                  (click)=\"toggleItem(item)\">\n                  <span class=\"expander-title\">{{item.title | translate}}</span>\n                  <span class=\"expander-indicator\">\n                    @if (isItemFiltered(item)) {\n                      <span class=\"filter-section-dot\"></span>\n                    }\n                    <zen-icon class=\"expand-icon\"\n                      name=\"chevron-down\"\n                    [class.active]=\"item.expanded\"></zen-icon>\n                  </span>\n                </button>\n              }\n              @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n                <div class=\"action-item section-title\"\n                  >\n                  <span class=\"expander-title\">{{item.title | translate}}</span>\n                  @if (isItemFiltered(item)) {\n                    <span class=\"filter-section-dot\"></span>\n                  }\n                </div>\n              }\n              @if (item.expanded || item.disableCollapse) {\n                @switch (item.type) {\n                    <!-- Multiselect -->\n                    @case ('multiselect') {\n                      <div class=\"menu-item__content\">\n                        <!-- Lazy loading mode -->\n                        @if (item.isLazyLoading) {\n                          @for (dsItem of item.filteredDataSource; track dsItem) {\n                            <div\n                              class=\"action-item-checkbox ds-item\"\n                              [class.has-badge]=\"dsItem.badgeBgColor\">\n                              <zen-checkbox [(checked)]=\"dsItem.checked\"\n                                [imageUrl]=\"dsItem.imageUrl\"\n                                (checkedChange)=\"checkChanged(dsItem, item)\"\n                              [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n                              @if (dsItem.badgeBgColor) {\n                                <span\n                                  class=\"filter-item-badge\"\n                                  [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n                                  {{ dsItem.name?.toString() | translate }}\n                                </span>\n                              }\n                            </div>\n                          }\n                          @if (item.canLoadMore && !item.isLoadingNow) {\n                            <div\n                              class=\"action-item\">\n                              <zen-button variant=\"secondary-gray\"\n                                size=\"sm\"\n                                [fullWidth]=\"true\"\n                                (click)=\"loadMore(item, false)\">\n                                {{'Load More' | translate}}\n                              </zen-button>\n                            </div>\n                          }\n                          @if (item.isLoadingNow) {\n                            <div\n                              class=\"loader-more-spinner\">\n                              <zen-spinner size=\"small\"></zen-spinner>\n                            </div>\n                          }\n                        }\n                        @if (!item.isLazyLoading && !hasTreeData(item)) {\n                          @if (!item.hideSelectAll) {\n                            <div class=\"action-item-checkbox ds-item select-all\">\n                              @if (item.dataSource.length === item.filteredDataSource.length) {\n                                <zen-checkbox\n                                  [(checked)]=\"item.isSelectedAll\"\n                                  [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n                                  [label]=\"'Select All' | translate\"\n                                  (checkedChange)=\"onSelectAll(item)\">\n                                </zen-checkbox>\n                              }\n                            </div>\n                          }\n                          @for (dsItem of item.filteredDataSource; track dsItem) {\n                            <div\n                              class=\"action-item-checkbox ds-item\"\n                              [class.has-badge]=\"dsItem.badgeBgColor\">\n                              <zen-checkbox [(checked)]=\"dsItem.checked\"\n                                [imageUrl]=\"dsItem.imageUrl\"\n                                (checkedChange)=\"checkChanged(dsItem, item)\"\n                              [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n                              @if (dsItem.badgeBgColor) {\n                                <span\n                                  class=\"filter-item-badge\"\n                                  [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n                                  {{ dsItem.name?.toString() | translate }}\n                                </span>\n                              }\n                            </div>\n                          }\n                        }\n                        <!-- Tree view mode -->\n                        @if (!item.isLazyLoading && hasTreeData(item)) {\n                          <zen-groups\n                            [dataSource]=\"item.dataSource\"\n                            [filteredDataSource]=\"item.filteredDataSource\"\n                            [hideSelectAll]=\"item.hideSelectAll\"\n                            [inline]=\"true\"\n                            [hideSearch]=\"true\"\n                            [(isSelectedAll)]=\"item.isSelectedAll\"\n                            (checkedChange)=\"checkChanged($event, item)\">\n                          </zen-groups>\n                        }\n                      </div>\n                    }\n                    <!-- Date range picker -->\n                    @case ('dateRange') {\n                      <div class=\"menu-item__content\">\n                        <!--  Options date range view  -->\n                        @if (item.dateRangeOptions?.length) {\n                          @for (option of item.dateRangeOptions; track option) {\n                            <div class=\"action-item-radio ds-item\">\n                              <zen-radio [value]=\"option.name\"\n                                [label]=\"option.name | translate\"\n                                [name]=\"item.key\"\n                                [selected]=\"selectedDateRangeOptions[item.key] === option.name\"\n                              (radioChange)=\"handleDateRangeOptionClick(item, option)\"></zen-radio>\n                            </div>\n                          }\n                          <div class=\"action-item-radio ds-item\">\n                            <zen-radio [value]=\"'Custom'\"\n                              [label]=\"'Custom' | translate\"\n                              [name]=\"item.key\"\n                              [selected]=\"selectedDateRangeOptions[item.key] === 'Custom'\"\n                            (radioChange)=\"handleCustomDateRangeClick(item)\"></zen-radio>\n                          </div>\n                          @if (selectedDateRangeOptions[item.key] === 'Custom') {\n                            <div class=\"filter-date-fields\">\n                              <div class=\"ds-item filter-row\">\n                                <div class=\"lbl\">{{'From' | translate}}:</div>\n                                <zen-date-picker-dropdown\n                                  type=\"single\"\n                                  [(date)]=\"item.dateRange.start\"\n                                  [timePicker]=\"item.showTime\">\n                                </zen-date-picker-dropdown>\n                              </div>\n                              <div class=\"ds-item filter-row\">\n                                <div class=\"lbl\">{{'To' | translate}}:</div>\n                                <zen-date-picker-dropdown\n                                  type=\"single\"\n                                  [date]=\"item.dateRange.end\"\n                                  [timePicker]=\"item.showTime\"\n                                  (dateChange)=\"handleEndDateChange(item, $event)\">\n                                </zen-date-picker-dropdown>\n                              </div>\n                            </div>\n                          }\n                        }\n                        <!--  Default date range view  -->\n                        @if (!item.dateRangeOptions?.length) {\n                          <div class=\"filter-date-fields\">\n                            <div class=\"ds-item filter-row\">\n                              <div class=\"lbl\">{{'From' | translate}}:</div>\n                              <zen-date-picker-dropdown\n                                type=\"single\"\n                                [(date)]=\"item.dateRange.start\"\n                                [timePicker]=\"item.showTime\">\n                              </zen-date-picker-dropdown>\n                            </div>\n                            <div class=\"ds-item filter-row\">\n                              <div class=\"lbl\">{{'To' | translate}}:</div>\n                              <zen-date-picker-dropdown\n                                type=\"single\"\n                                [date]=\"item.dateRange.end\"\n                                [timePicker]=\"item.showTime\"\n                                (dateChange)=\"handleEndDateChange(item, $event)\">\n                              </zen-date-picker-dropdown>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    }\n                    <!-- Date picker -->\n                    @case ('date') {\n                      <div class=\"filter-row menu-item__content\">\n                        <div class=\"lbl\">{{'Date' | translate}}:</div>\n                        <zen-date-picker-dropdown\n                          type=\"single\"\n                          [(date)]=\"item.date\"\n                          [timePicker]=\"item.showTime\">\n                        </zen-date-picker-dropdown>\n                      </div>\n                    }\n                    <!-- Number range -->\n                    @case ('numberRange') {\n                      <div\n                        class=\"filter-row number-range-row menu-item__content\">\n                        <zen-input type=\"number\"\n                          size=\"sm\"\n                          [label]=\"'Min' | translate\"\n                          [(ngModel)]=\"item.numberRange.from\"></zen-input>\n                        <zen-input type=\"number\"\n                          size=\"sm\"\n                          [label]=\"'Max' | translate\"\n                          [(ngModel)]=\"item.numberRange.to\"></zen-input>\n                      </div>\n                    }\n                    <!-- Radio -->\n                    @case ('radio') {\n                      <div class=\"menu-item__content\">\n                        @for (option of item.radioOptions; track option) {\n                          <div\n                            class=\"action-item-radio ds-item\">\n                            <zen-radio [value]=\"option.id\"\n                              [label]=\"option.name | translate\"\n                              [name]=\"item.key\"\n                              [imageUrl]=\"option.imageUrl\"\n                              [selected]=\"option.selected\"\n                              (radioChange)=\"radioChanged($event, item)\"\n                            [disabled]=\"option.disabled\"></zen-radio>\n                          </div>\n                        }\n                      </div>\n                    }\n                  }\n              }\n            </div>\n          }\n      }\n      @if (showNoFilterResult) {\n        <span\n        class=\"no-item\">{{'No Results Found' | translate}}..</span>\n      }\n    </div>\n\n    <div class=\"filter-menu__footer\">\n      <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n      <div class=\"filter-footer-actions\">\n        <zen-button variant=\"secondary-gray\"\n          [destructive]=\"selectedCount > 0\"\n          [disabled]=\"selectedCount === 0\"\n          (click)=\"reset()\">\n          {{'Clear Filter' | translate}}\n        </zen-button>\n        <zen-button variant=\"primary\"\n          (click)=\"apply()\">\n          {{'Apply' | translate}}\n        </zen-button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .menu-content{width:400px;white-space:initial;position:fixed}.filters-component .menu-content.absolute{position:absolute;inset:auto}.filters-component .menu-content.dropdown-left{right:0}.filters-component .menu-content.dropdown-right{left:0}.filters-component .menu-content.dropdown-top{bottom:100%;margin-bottom:12px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:12px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .filter-menu{display:flex;flex-direction:column;background:#fff;border-radius:8px;border:1px solid #eaecf0;overflow:hidden;z-index:10;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.filters-component .filter-menu[hidden]{display:none}.filters-component .filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filters-component .filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filters-component .filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:24px;padding:8px 16px 24px}.filters-component .filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .menu-item__content{padding-left:8px}.filters-component .filter-menu__body .action-item,.filters-component .filter-menu__body .action-item-checkbox,.filters-component .filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filters-component .filter-menu__body .action-item:hover,.filters-component .filter-menu__body .action-item:focus-within,.filters-component .filter-menu__body .action-item-checkbox:hover,.filters-component .filter-menu__body .action-item-checkbox:focus-within,.filters-component .filter-menu__body .action-item-radio:hover,.filters-component .filter-menu__body .action-item-radio:focus-within{background:transparent}.filters-component .filter-menu__body .action-item-checkbox:first-child,.filters-component .filter-menu__body .action-item-radio:first-child{margin-top:-8px}.filters-component .filter-menu__body .action-item-checkbox:last-child,.filters-component .filter-menu__body .action-item-radio:last-child{margin-bottom:-8px}.filters-component .filter-menu__body .expander-item{outline:none;border:none;display:flex;width:100%;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;padding:0}.filters-component .filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filters-component .filter-menu__body .expander-item.expanded,.filters-component .filter-menu__body .expander-item.active{background:transparent;color:#344054}.filters-component .filter-menu__body .expander-item:hover{background:transparent}.filters-component .filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filters-component .filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filters-component .filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filters-component .filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filters-component .filter-menu__body .no-item,.filters-component .filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filters-component .filter-menu__body .select-all{font-weight:500}.filters-component .filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .number-range-row{display:flex;gap:16px}.filters-component .filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filters-component .filter-menu__body .toggle-row{justify-content:space-between}.filters-component .filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.filters-component .filter-menu__body .section-title{display:flex;align-items:center;gap:6px;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;padding:0}.filters-component .filter-menu__body .section-title:hover{background:transparent}.filters-component .filter-menu__body .has-badge zen-checkbox{width:auto}.filters-component .filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .filter-menu__body .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.filters-component .filter-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:2px 8px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:12px;line-height:18px;white-space:nowrap;box-sizing:border-box}.filters-component .filter-icon-badge{position:absolute;top:-4px;right:-7px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:1.5px 6px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:9px;line-height:13.5px;text-align:center;white-space:nowrap;box-sizing:border-box;pointer-events:none;z-index:11}.filters-component .filter zen-icon{width:20px;height:20px;background-color:#344054}.filters-component .filter.applied zen-icon{background-color:#136ab6}.filters-component .filter.applied .filter-label{color:#136ab6}.hidden{display:none}:host ::ng-deep .filter.applied button{border-color:#88c1f1!important}:host ::ng-deep .filter.icon-only button{padding:10px!important}:host ::ng-deep zen-radio label{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: ZenduToggleComponent, selector: "zen-toggle", inputs: ["enabled", "size", "disabled", "label", "supportingText"], outputs: ["enabledChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduRadioButtonComponent, selector: "zen-radio", inputs: ["selected", "label", "value", "name", "disabled", "imageUrl", "size", "supportingText"], outputs: ["radioChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "component", type: ZenduDatePickerDropdownComponent, selector: "zen-date-picker-dropdown", inputs: ["type", "date", "startDate", "endDate", "presets", "minDate", "maxDate", "disabled", "dateMarkers", "placeholder", "mobileBreakpoint", "timePicker", "autoApply", "hideTrigger"], outputs: ["dateChange", "startDateChange", "endDateChange", "rangeChange"] }, { kind: "component", type: ZenduInputComponent, selector: "zen-input", inputs: ["type", "variant", "placeholder", "label", "hintText", "leadingIcon", "helpIcon", "helpTooltip", "destructive", "errorMessage", "disabled", "required", "maxLength", "minLength", "pattern", "autocomplete", "name", "id", "leadingDropdownOptions", "leadingDropdownValue", "leadingDropdownPlaceholder", "trailingDropdownOptions", "trailingDropdownValue", "trailingDropdownPlaceholder", "leadingText", "trailingText", "multiline", "rows", "resizable", "size", "showCharacterCount", "phoneMaxLength", "phone", "width"], outputs: ["valueChange", "inputFocus", "inputBlur", "inputKeydown", "inputKeyup", "leadingDropdownChange", "leadingDropdownValueChange", "trailingDropdownChange", "trailingDropdownValueChange", "helpIconClick", "phoneChange", "validChange", "leadingIconClick"] }, { kind: "component", type: ZenButtonComponent, selector: "zen-button", inputs: ["variant", "buttonType", "icon", "iconRotated", "size", "destructive", "disabled", "fullWidth", "type"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduFilterComponent, isStandalone: false, selector: "zen-filter", inputs: { config: "config", filter: "filter", position: "position", resetBehavior: "resetBehavior", defaultFilter: "defaultFilter", isVisible: "isVisible", customTrigger: "customTrigger", imageUrl: "imageUrl", label: "label", triggerVariant: "triggerVariant", showOptions: "showOptions", customOptions: "customOptions", wrapperBodyClass: "wrapperBodyClass", customPosition: "customPosition" }, outputs: { filterChange: "filterChange", isVisibleChange: "isVisibleChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:resize": "windowSizeHandling()", "window:scroll": "windowScroll()", "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "_componentElement", first: true, predicate: ["mainComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"filters-component\"\n  #mainComponent\n  click-out=\"isVisible && hide()\">\n\n  @if (!customTrigger) {\n    <zen-button (click)=\"toggle()\"\n      [variant]=\"hasActiveFilters ? 'secondary' : 'secondary-gray'\"\n      class=\"filter {{hasActiveFilters ? 'applied' : ''}} {{triggerVariant === 'icon-only' ? 'icon-only' : ''}}\">\n      @if (imageUrl) {\n        <zen-icon [src]=\"imageUrl\"\n        ></zen-icon>\n      }\n      @if (!imageUrl) {\n        <zen-icon class=\"filter-icon\"\n        name=\"filter\"></zen-icon>\n      }\n      @if (triggerVariant !== 'icon-only') {\n        <span class=\"filter-label\">{{ (label || 'Filter') | translate }}</span>\n        @if (appliedCount > 0) {\n          <span class=\"filter-count-badge\">{{ appliedCount }}</span>\n        }\n      }\n    </zen-button>\n    <!-- Icon-only mode: count rendered as a corner badge overlapping the\n         button's top-right (sibling of the button so it isn't clipped). -->\n    @if (triggerVariant === 'icon-only' && appliedCount > 0) {\n      <span class=\"filter-icon-badge\">{{ appliedCount }}</span>\n    }\n  }\n\n  @if (customTrigger) {\n    <ng-content></ng-content>\n  }\n\n  <div [hidden]=\"!isVisible\"\n    class=\"filter-menu menu-content\"\n    [class.customTrigger]=\"customTrigger\"\n    [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom, 'max-height': menuMaxHeight }\">\n    <div class=\"filter-menu__header\">\n      <zen-search-box [(text)]=\"searchText\"\n        #searchBox\n      (textChange)=\"searchTextChanged()\"></zen-search-box>\n    </div>\n\n    <div class=\"filter-menu__body\"\n      ngClass=\"{{wrapperBodyClass}}\">\n      @if (errorMessage.length) {\n        @for (item of errorMessage; track item) {\n          <li\n          class=\"error-msg\">{{item | translate }}</li>\n        }\n      }\n\n      @for (item of config.items; track item) {\n          @if (isMenuIsVisible(item)) {\n            <div [class]=\"'menu-item menu-item--' + item.type\">\n              <!-- Divider between two filter -->\n              @if (item.type === 'divider') {\n                <p class=\"filter-divider\"></p>\n              }\n              <!-- Boolean toggle -->\n              @if (item.type === 'toggle') {\n                <div\n                  class=\"action-item toggle-row\"\n                  (click)=\"toggleEnabled(item)\">\n                  <div>{{item.title | translate}}</div>\n                  <zen-toggle [(enabled)]=\"item.enabled\"\n                    (click)=\"$event.stopPropagation()\"></zen-toggle>\n                </div>\n              }\n              @if (item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse) {\n                <button class=\"action-item expander-item\"\n                  (click)=\"toggleItem(item)\">\n                  <span class=\"expander-title\">{{item.title | translate}}</span>\n                  <span class=\"expander-indicator\">\n                    @if (isItemFiltered(item)) {\n                      <span class=\"filter-section-dot\"></span>\n                    }\n                    <zen-icon class=\"expand-icon\"\n                      name=\"chevron-down\"\n                    [class.active]=\"item.expanded\"></zen-icon>\n                  </span>\n                </button>\n              }\n              @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n                <div class=\"action-item section-title\"\n                  >\n                  <span class=\"expander-title\">{{item.title | translate}}</span>\n                  @if (isItemFiltered(item)) {\n                    <span class=\"filter-section-dot\"></span>\n                  }\n                </div>\n              }\n              @if (item.expanded || item.disableCollapse) {\n                @switch (item.type) {\n                    <!-- Multiselect -->\n                    @case ('multiselect') {\n                      <div class=\"menu-item__content\">\n                        <!-- Lazy loading mode -->\n                        @if (item.isLazyLoading) {\n                          @for (dsItem of item.filteredDataSource; track dsItem) {\n                            <div\n                              class=\"action-item-checkbox ds-item\"\n                              [class.has-badge]=\"dsItem.badgeBgColor\"\n                              (click)=\"toggleDsItem(dsItem, item)\">\n                              <zen-checkbox [(checked)]=\"dsItem.checked\"\n                                [imageUrl]=\"dsItem.imageUrl\"\n                                (checkedChange)=\"checkChanged(dsItem, item)\"\n                                (click)=\"$event.stopPropagation()\"\n                              [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n                              @if (dsItem.badgeBgColor) {\n                                <span\n                                  class=\"filter-item-badge\"\n                                  [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n                                  {{ dsItem.name?.toString() | translate }}\n                                </span>\n                              }\n                            </div>\n                          }\n                          @if (item.canLoadMore && !item.isLoadingNow) {\n                            <div\n                              class=\"action-item\">\n                              <zen-button variant=\"secondary-gray\"\n                                size=\"sm\"\n                                [fullWidth]=\"true\"\n                                (click)=\"loadMore(item, false)\">\n                                {{'Load More' | translate}}\n                              </zen-button>\n                            </div>\n                          }\n                          @if (item.isLoadingNow) {\n                            <div\n                              class=\"loader-more-spinner\">\n                              <zen-spinner size=\"small\"></zen-spinner>\n                            </div>\n                          }\n                        }\n                        @if (!item.isLazyLoading && !hasTreeData(item)) {\n                          @if (!item.hideSelectAll) {\n                            <div class=\"action-item-checkbox ds-item select-all\">\n                              @if (item.dataSource.length === item.filteredDataSource.length) {\n                                <zen-checkbox\n                                  [(checked)]=\"item.isSelectedAll\"\n                                  [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n                                  [label]=\"'Select All' | translate\"\n                                  (checkedChange)=\"onSelectAll(item)\">\n                                </zen-checkbox>\n                              }\n                            </div>\n                          }\n                          @for (dsItem of item.filteredDataSource; track dsItem) {\n                            <div\n                              class=\"action-item-checkbox ds-item\"\n                              [class.has-badge]=\"dsItem.badgeBgColor\"\n                              (click)=\"toggleDsItem(dsItem, item)\">\n                              <zen-checkbox [(checked)]=\"dsItem.checked\"\n                                [imageUrl]=\"dsItem.imageUrl\"\n                                (checkedChange)=\"checkChanged(dsItem, item)\"\n                                (click)=\"$event.stopPropagation()\"\n                              [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n                              @if (dsItem.badgeBgColor) {\n                                <span\n                                  class=\"filter-item-badge\"\n                                  [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n                                  {{ dsItem.name?.toString() | translate }}\n                                </span>\n                              }\n                            </div>\n                          }\n                        }\n                        <!-- Tree view mode -->\n                        @if (!item.isLazyLoading && hasTreeData(item)) {\n                          <zen-groups\n                            [dataSource]=\"item.dataSource\"\n                            [filteredDataSource]=\"item.filteredDataSource\"\n                            [hideSelectAll]=\"item.hideSelectAll\"\n                            [inline]=\"true\"\n                            [hideSearch]=\"true\"\n                            [(isSelectedAll)]=\"item.isSelectedAll\"\n                            (checkedChange)=\"checkChanged($event, item)\">\n                          </zen-groups>\n                        }\n                      </div>\n                    }\n                    <!-- Date range picker -->\n                    @case ('dateRange') {\n                      <div class=\"menu-item__content\">\n                        <!--  Options date range view  -->\n                        @if (item.dateRangeOptions?.length) {\n                          @for (option of item.dateRangeOptions; track option) {\n                            <div class=\"action-item-radio ds-item\">\n                              <zen-radio [value]=\"option.name\"\n                                [label]=\"option.name | translate\"\n                                [name]=\"item.key\"\n                                [selected]=\"selectedDateRangeOptions[item.key] === option.name\"\n                              (radioChange)=\"handleDateRangeOptionClick(item, option)\"></zen-radio>\n                            </div>\n                          }\n                          <div class=\"action-item-radio ds-item\">\n                            <zen-radio [value]=\"'Custom'\"\n                              [label]=\"'Custom' | translate\"\n                              [name]=\"item.key\"\n                              [selected]=\"selectedDateRangeOptions[item.key] === 'Custom'\"\n                            (radioChange)=\"handleCustomDateRangeClick(item)\"></zen-radio>\n                          </div>\n                          @if (selectedDateRangeOptions[item.key] === 'Custom') {\n                            <div class=\"filter-date-fields\">\n                              <div class=\"ds-item filter-row\">\n                                <div class=\"lbl\">{{'From' | translate}}:</div>\n                                <zen-date-picker-dropdown\n                                  type=\"single\"\n                                  [(date)]=\"item.dateRange.start\"\n                                  [timePicker]=\"item.showTime\">\n                                </zen-date-picker-dropdown>\n                              </div>\n                              <div class=\"ds-item filter-row\">\n                                <div class=\"lbl\">{{'To' | translate}}:</div>\n                                <zen-date-picker-dropdown\n                                  type=\"single\"\n                                  [date]=\"item.dateRange.end\"\n                                  [timePicker]=\"item.showTime\"\n                                  (dateChange)=\"handleEndDateChange(item, $event)\">\n                                </zen-date-picker-dropdown>\n                              </div>\n                            </div>\n                          }\n                        }\n                        <!--  Default date range view  -->\n                        @if (!item.dateRangeOptions?.length) {\n                          <div class=\"filter-date-fields\">\n                            <div class=\"ds-item filter-row\">\n                              <div class=\"lbl\">{{'From' | translate}}:</div>\n                              <zen-date-picker-dropdown\n                                type=\"single\"\n                                [(date)]=\"item.dateRange.start\"\n                                [timePicker]=\"item.showTime\">\n                              </zen-date-picker-dropdown>\n                            </div>\n                            <div class=\"ds-item filter-row\">\n                              <div class=\"lbl\">{{'To' | translate}}:</div>\n                              <zen-date-picker-dropdown\n                                type=\"single\"\n                                [date]=\"item.dateRange.end\"\n                                [timePicker]=\"item.showTime\"\n                                (dateChange)=\"handleEndDateChange(item, $event)\">\n                              </zen-date-picker-dropdown>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    }\n                    <!-- Date picker -->\n                    @case ('date') {\n                      <div class=\"filter-row menu-item__content\">\n                        <zen-date-picker-dropdown\n                          type=\"single\"\n                          [(date)]=\"item.date\"\n                          [timePicker]=\"item.showTime\">\n                        </zen-date-picker-dropdown>\n                      </div>\n                    }\n                    <!-- Number range -->\n                    @case ('numberRange') {\n                      <div\n                        class=\"filter-row number-range-row menu-item__content\">\n                        <zen-input type=\"number\"\n                          size=\"sm\"\n                          [label]=\"'Min' | translate\"\n                          [(ngModel)]=\"item.numberRange.from\"></zen-input>\n                        <zen-input type=\"number\"\n                          size=\"sm\"\n                          [label]=\"'Max' | translate\"\n                          [(ngModel)]=\"item.numberRange.to\"></zen-input>\n                      </div>\n                    }\n                    <!-- Radio -->\n                    @case ('radio') {\n                      <div class=\"menu-item__content\">\n                        @for (option of item.radioOptions; track option) {\n                          <div\n                            class=\"action-item-radio ds-item\">\n                            <zen-radio [value]=\"option.id\"\n                              [label]=\"option.name | translate\"\n                              [name]=\"item.key\"\n                              [imageUrl]=\"option.imageUrl\"\n                              [selected]=\"option.selected\"\n                              (radioChange)=\"radioChanged($event, item)\"\n                            [disabled]=\"option.disabled\"></zen-radio>\n                          </div>\n                        }\n                      </div>\n                    }\n                  }\n              }\n            </div>\n          }\n      }\n      @if (showNoFilterResult) {\n        <span\n        class=\"no-item\">{{'No Results Found' | translate}}..</span>\n      }\n    </div>\n\n    <div class=\"filter-menu__footer\">\n      <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n      <div class=\"filter-footer-actions\">\n        <zen-button variant=\"secondary-gray\"\n          [destructive]=\"true\"\n          [disabled]=\"resetDisabled\"\n          (click)=\"reset()\">\n          {{ (defaultFilter ? 'Reset Default' : 'Clear All') | translate }}\n        </zen-button>\n        <zen-button variant=\"primary\"\n          (click)=\"apply()\">\n          {{'Apply' | translate}}\n        </zen-button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .menu-content{width:400px;white-space:initial;position:fixed}.filters-component .menu-content.absolute{position:absolute;inset:auto}.filters-component .menu-content.dropdown-left{right:0}.filters-component .menu-content.dropdown-right{left:0}.filters-component .menu-content.dropdown-top{bottom:100%;margin-bottom:12px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:12px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .filter-menu{display:flex;flex-direction:column;background:#fff;border-radius:8px;border:1px solid #eaecf0;overflow:hidden;z-index:10;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.filters-component .filter-menu[hidden]{display:none}.filters-component .filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filters-component .filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filters-component .filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.filters-component .filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .menu-item.menu-item--multiselect,.filters-component .filter-menu__body .menu-item.menu-item--radio{gap:0}.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:first-child,.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:first-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:first-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-radio:first-child{margin-top:0}.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:last-child,.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:last-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:last-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-radio:last-child{margin-bottom:0}.filters-component .filter-menu__body .menu-item__content{padding-left:8px}.filters-component .filter-menu__body .action-item,.filters-component .filter-menu__body .action-item-checkbox,.filters-component .filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filters-component .filter-menu__body .action-item:focus-within,.filters-component .filter-menu__body .action-item-checkbox:focus-within,.filters-component .filter-menu__body .action-item-radio:focus-within{background:transparent}.filters-component .filter-menu__body .action-item:hover{background:transparent}.filters-component .filter-menu__body .action-item-checkbox,.filters-component .filter-menu__body .action-item-radio{margin-left:-8px;margin-right:0;padding-left:8px;padding-right:8px;border-radius:6px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .action-item-checkbox:hover,.filters-component .filter-menu__body .action-item-radio:hover{background:#f9fafb}.filters-component .filter-menu__body .action-item-checkbox ::ng-deep .checkbox-component,.filters-component .filter-menu__body .action-item-radio ::ng-deep .radio-component{padding-top:10px;padding-bottom:10px}.filters-component .filter-menu__body .action-item-checkbox:first-child,.filters-component .filter-menu__body .action-item-radio:first-child{margin-top:-10px}.filters-component .filter-menu__body .action-item-checkbox:last-child,.filters-component .filter-menu__body .action-item-radio:last-child{margin-bottom:-4px}.filters-component .filter-menu__body .expander-item{outline:none;border:none;display:flex;width:auto;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filters-component .filter-menu__body .expander-item.expanded,.filters-component .filter-menu__body .expander-item.active{background:transparent;color:#344054}.filters-component .filter-menu__body .expander-item:hover{background:#f9fafb}.filters-component .filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filters-component .filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filters-component .filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filters-component .filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filters-component .filter-menu__body .no-item,.filters-component .filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filters-component .filter-menu__body .select-all{font-weight:500}.filters-component .filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .number-range-row{display:flex;gap:16px}.filters-component .filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filters-component .filter-menu__body .toggle-row{justify-content:space-between;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .toggle-row zen-toggle{display:flex;align-items:center}.filters-component .filter-menu__body .toggle-row:hover{background:#f9fafb}.filters-component .filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled){background-color:#eaecf0}.filters-component .filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled).zen-toggle--active{background-color:#105494}.filters-component .filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.filters-component .filter-menu__body .section-title{display:flex;align-items:center;gap:6px;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;margin:0 -16px;padding:10px 16px;transition:background-color .15s ease}.filters-component .filter-menu__body .section-title:hover{background:#f9fafb}.filters-component .filter-menu__body .has-badge zen-checkbox{width:auto}.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox{background:#e3eefb;border-color:#136ab6}.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-checked,.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.filters-component .filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .filter-menu__body .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.filters-component .filter-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:2px 8px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:12px;line-height:18px;white-space:nowrap;box-sizing:border-box}.filters-component .filter-icon-badge{position:absolute;top:-4px;right:-7px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:1.5px 6px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:9px;line-height:13.5px;text-align:center;white-space:nowrap;box-sizing:border-box;pointer-events:none}.filters-component .filter zen-icon{width:20px;height:20px;background-color:#344054}.filters-component .filter.applied zen-icon{background-color:#136ab6}.filters-component .filter.applied .filter-label{color:#136ab6}.hidden{display:none}:host ::ng-deep .filter.applied button{border-color:#88c1f1!important}:host ::ng-deep .filter.icon-only button{padding:10px!important}:host ::ng-deep zen-radio label{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: ZenduToggleComponent, selector: "zen-toggle", inputs: ["enabled", "size", "disabled", "label", "supportingText"], outputs: ["enabledChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduRadioButtonComponent, selector: "zen-radio", inputs: ["selected", "label", "value", "name", "disabled", "imageUrl", "size", "supportingText"], outputs: ["radioChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "component", type: ZenduDatePickerDropdownComponent, selector: "zen-date-picker-dropdown", inputs: ["type", "date", "startDate", "endDate", "presets", "minDate", "maxDate", "disabled", "dateMarkers", "placeholder", "mobileBreakpoint", "timePicker", "autoApply", "hideTrigger"], outputs: ["dateChange", "startDateChange", "endDateChange", "rangeChange"] }, { kind: "component", type: ZenduInputComponent, selector: "zen-input", inputs: ["type", "variant", "placeholder", "label", "hintText", "leadingIcon", "helpIcon", "helpTooltip", "destructive", "errorMessage", "disabled", "required", "maxLength", "minLength", "pattern", "autocomplete", "name", "id", "leadingDropdownOptions", "leadingDropdownValue", "leadingDropdownPlaceholder", "trailingDropdownOptions", "trailingDropdownValue", "trailingDropdownPlaceholder", "leadingText", "trailingText", "multiline", "rows", "resizable", "size", "showCharacterCount", "phoneMaxLength", "phone", "width"], outputs: ["valueChange", "inputFocus", "inputBlur", "inputKeydown", "inputKeyup", "leadingDropdownChange", "leadingDropdownValueChange", "trailingDropdownChange", "trailingDropdownValueChange", "helpIconClick", "phoneChange", "validChange", "leadingIconClick"] }, { kind: "component", type: ZenButtonComponent, selector: "zen-button", inputs: ["variant", "buttonType", "icon", "iconRotated", "size", "destructive", "disabled", "fullWidth", "type"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'zen-filter', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"filters-component\"\n  #mainComponent\n  click-out=\"isVisible && hide()\">\n\n  @if (!customTrigger) {\n    <zen-button (click)=\"toggle()\"\n      [variant]=\"hasActiveFilters ? 'secondary' : 'secondary-gray'\"\n      class=\"filter {{hasActiveFilters ? 'applied' : ''}} {{triggerVariant === 'icon-only' ? 'icon-only' : ''}}\">\n      @if (imageUrl) {\n        <zen-icon [src]=\"imageUrl\"\n        ></zen-icon>\n      }\n      @if (!imageUrl) {\n        <zen-icon class=\"filter-icon\"\n        name=\"filter\"></zen-icon>\n      }\n      @if (triggerVariant !== 'icon-only') {\n        <span class=\"filter-label\">{{ (label || 'Filter') | translate }}</span>\n        @if (appliedCount > 0) {\n          <span class=\"filter-count-badge\">{{ appliedCount }}</span>\n        }\n      }\n    </zen-button>\n    <!-- Icon-only mode: count rendered as a corner badge overlapping the\n         button's top-right (sibling of the button so it isn't clipped). -->\n    @if (triggerVariant === 'icon-only' && appliedCount > 0) {\n      <span class=\"filter-icon-badge\">{{ appliedCount }}</span>\n    }\n  }\n\n  @if (customTrigger) {\n    <ng-content></ng-content>\n  }\n\n  <div [hidden]=\"!isVisible\"\n    class=\"filter-menu menu-content\"\n    [class.customTrigger]=\"customTrigger\"\n    [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom, 'max-height': menuMaxHeight }\">\n    <div class=\"filter-menu__header\">\n      <zen-search-box [(text)]=\"searchText\"\n        #searchBox\n      (textChange)=\"searchTextChanged()\"></zen-search-box>\n    </div>\n\n    <div class=\"filter-menu__body\"\n      ngClass=\"{{wrapperBodyClass}}\">\n      @if (errorMessage.length) {\n        @for (item of errorMessage; track item) {\n          <li\n          class=\"error-msg\">{{item | translate }}</li>\n        }\n      }\n\n      @for (item of config.items; track item) {\n          @if (isMenuIsVisible(item)) {\n            <div class=\"menu-item\"\n              >\n              <!-- Divider between two filter -->\n              @if (item.type === 'divider') {\n                <p class=\"filter-divider\"></p>\n              }\n              <!-- Boolean toggle -->\n              @if (item.type === 'toggle') {\n                <div\n                  class=\"action-item toggle-row\">\n                  <div>{{item.title | translate}}</div>\n                  <zen-toggle [(enabled)]=\"item.enabled\"></zen-toggle>\n                </div>\n              }\n              @if (item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse) {\n                <button class=\"action-item expander-item\"\n                  (click)=\"toggleItem(item)\">\n                  <span class=\"expander-title\">{{item.title | translate}}</span>\n                  <span class=\"expander-indicator\">\n                    @if (isItemFiltered(item)) {\n                      <span class=\"filter-section-dot\"></span>\n                    }\n                    <zen-icon class=\"expand-icon\"\n                      name=\"chevron-down\"\n                    [class.active]=\"item.expanded\"></zen-icon>\n                  </span>\n                </button>\n              }\n              @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n                <div class=\"action-item section-title\"\n                  >\n                  <span class=\"expander-title\">{{item.title | translate}}</span>\n                  @if (isItemFiltered(item)) {\n                    <span class=\"filter-section-dot\"></span>\n                  }\n                </div>\n              }\n              @if (item.expanded || item.disableCollapse) {\n                @switch (item.type) {\n                    <!-- Multiselect -->\n                    @case ('multiselect') {\n                      <div class=\"menu-item__content\">\n                        <!-- Lazy loading mode -->\n                        @if (item.isLazyLoading) {\n                          @for (dsItem of item.filteredDataSource; track dsItem) {\n                            <div\n                              class=\"action-item-checkbox ds-item\"\n                              [class.has-badge]=\"dsItem.badgeBgColor\">\n                              <zen-checkbox [(checked)]=\"dsItem.checked\"\n                                [imageUrl]=\"dsItem.imageUrl\"\n                                (checkedChange)=\"checkChanged(dsItem, item)\"\n                              [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n                              @if (dsItem.badgeBgColor) {\n                                <span\n                                  class=\"filter-item-badge\"\n                                  [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n                                  {{ dsItem.name?.toString() | translate }}\n                                </span>\n                              }\n                            </div>\n                          }\n                          @if (item.canLoadMore && !item.isLoadingNow) {\n                            <div\n                              class=\"action-item\">\n                              <zen-button variant=\"secondary-gray\"\n                                size=\"sm\"\n                                [fullWidth]=\"true\"\n                                (click)=\"loadMore(item, false)\">\n                                {{'Load More' | translate}}\n                              </zen-button>\n                            </div>\n                          }\n                          @if (item.isLoadingNow) {\n                            <div\n                              class=\"loader-more-spinner\">\n                              <zen-spinner size=\"small\"></zen-spinner>\n                            </div>\n                          }\n                        }\n                        @if (!item.isLazyLoading && !hasTreeData(item)) {\n                          @if (!item.hideSelectAll) {\n                            <div class=\"action-item-checkbox ds-item select-all\">\n                              @if (item.dataSource.length === item.filteredDataSource.length) {\n                                <zen-checkbox\n                                  [(checked)]=\"item.isSelectedAll\"\n                                  [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n                                  [label]=\"'Select All' | translate\"\n                                  (checkedChange)=\"onSelectAll(item)\">\n                                </zen-checkbox>\n                              }\n                            </div>\n                          }\n                          @for (dsItem of item.filteredDataSource; track dsItem) {\n                            <div\n                              class=\"action-item-checkbox ds-item\"\n                              [class.has-badge]=\"dsItem.badgeBgColor\">\n                              <zen-checkbox [(checked)]=\"dsItem.checked\"\n                                [imageUrl]=\"dsItem.imageUrl\"\n                                (checkedChange)=\"checkChanged(dsItem, item)\"\n                              [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n                              @if (dsItem.badgeBgColor) {\n                                <span\n                                  class=\"filter-item-badge\"\n                                  [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n                                  {{ dsItem.name?.toString() | translate }}\n                                </span>\n                              }\n                            </div>\n                          }\n                        }\n                        <!-- Tree view mode -->\n                        @if (!item.isLazyLoading && hasTreeData(item)) {\n                          <zen-groups\n                            [dataSource]=\"item.dataSource\"\n                            [filteredDataSource]=\"item.filteredDataSource\"\n                            [hideSelectAll]=\"item.hideSelectAll\"\n                            [inline]=\"true\"\n                            [hideSearch]=\"true\"\n                            [(isSelectedAll)]=\"item.isSelectedAll\"\n                            (checkedChange)=\"checkChanged($event, item)\">\n                          </zen-groups>\n                        }\n                      </div>\n                    }\n                    <!-- Date range picker -->\n                    @case ('dateRange') {\n                      <div class=\"menu-item__content\">\n                        <!--  Options date range view  -->\n                        @if (item.dateRangeOptions?.length) {\n                          @for (option of item.dateRangeOptions; track option) {\n                            <div class=\"action-item-radio ds-item\">\n                              <zen-radio [value]=\"option.name\"\n                                [label]=\"option.name | translate\"\n                                [name]=\"item.key\"\n                                [selected]=\"selectedDateRangeOptions[item.key] === option.name\"\n                              (radioChange)=\"handleDateRangeOptionClick(item, option)\"></zen-radio>\n                            </div>\n                          }\n                          <div class=\"action-item-radio ds-item\">\n                            <zen-radio [value]=\"'Custom'\"\n                              [label]=\"'Custom' | translate\"\n                              [name]=\"item.key\"\n                              [selected]=\"selectedDateRangeOptions[item.key] === 'Custom'\"\n                            (radioChange)=\"handleCustomDateRangeClick(item)\"></zen-radio>\n                          </div>\n                          @if (selectedDateRangeOptions[item.key] === 'Custom') {\n                            <div class=\"filter-date-fields\">\n                              <div class=\"ds-item filter-row\">\n                                <div class=\"lbl\">{{'From' | translate}}:</div>\n                                <zen-date-picker-dropdown\n                                  type=\"single\"\n                                  [(date)]=\"item.dateRange.start\"\n                                  [timePicker]=\"item.showTime\">\n                                </zen-date-picker-dropdown>\n                              </div>\n                              <div class=\"ds-item filter-row\">\n                                <div class=\"lbl\">{{'To' | translate}}:</div>\n                                <zen-date-picker-dropdown\n                                  type=\"single\"\n                                  [date]=\"item.dateRange.end\"\n                                  [timePicker]=\"item.showTime\"\n                                  (dateChange)=\"handleEndDateChange(item, $event)\">\n                                </zen-date-picker-dropdown>\n                              </div>\n                            </div>\n                          }\n                        }\n                        <!--  Default date range view  -->\n                        @if (!item.dateRangeOptions?.length) {\n                          <div class=\"filter-date-fields\">\n                            <div class=\"ds-item filter-row\">\n                              <div class=\"lbl\">{{'From' | translate}}:</div>\n                              <zen-date-picker-dropdown\n                                type=\"single\"\n                                [(date)]=\"item.dateRange.start\"\n                                [timePicker]=\"item.showTime\">\n                              </zen-date-picker-dropdown>\n                            </div>\n                            <div class=\"ds-item filter-row\">\n                              <div class=\"lbl\">{{'To' | translate}}:</div>\n                              <zen-date-picker-dropdown\n                                type=\"single\"\n                                [date]=\"item.dateRange.end\"\n                                [timePicker]=\"item.showTime\"\n                                (dateChange)=\"handleEndDateChange(item, $event)\">\n                              </zen-date-picker-dropdown>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    }\n                    <!-- Date picker -->\n                    @case ('date') {\n                      <div class=\"filter-row menu-item__content\">\n                        <div class=\"lbl\">{{'Date' | translate}}:</div>\n                        <zen-date-picker-dropdown\n                          type=\"single\"\n                          [(date)]=\"item.date\"\n                          [timePicker]=\"item.showTime\">\n                        </zen-date-picker-dropdown>\n                      </div>\n                    }\n                    <!-- Number range -->\n                    @case ('numberRange') {\n                      <div\n                        class=\"filter-row number-range-row menu-item__content\">\n                        <zen-input type=\"number\"\n                          size=\"sm\"\n                          [label]=\"'Min' | translate\"\n                          [(ngModel)]=\"item.numberRange.from\"></zen-input>\n                        <zen-input type=\"number\"\n                          size=\"sm\"\n                          [label]=\"'Max' | translate\"\n                          [(ngModel)]=\"item.numberRange.to\"></zen-input>\n                      </div>\n                    }\n                    <!-- Radio -->\n                    @case ('radio') {\n                      <div class=\"menu-item__content\">\n                        @for (option of item.radioOptions; track option) {\n                          <div\n                            class=\"action-item-radio ds-item\">\n                            <zen-radio [value]=\"option.id\"\n                              [label]=\"option.name | translate\"\n                              [name]=\"item.key\"\n                              [imageUrl]=\"option.imageUrl\"\n                              [selected]=\"option.selected\"\n                              (radioChange)=\"radioChanged($event, item)\"\n                            [disabled]=\"option.disabled\"></zen-radio>\n                          </div>\n                        }\n                      </div>\n                    }\n                  }\n              }\n            </div>\n          }\n      }\n      @if (showNoFilterResult) {\n        <span\n        class=\"no-item\">{{'No Results Found' | translate}}..</span>\n      }\n    </div>\n\n    <div class=\"filter-menu__footer\">\n      <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n      <div class=\"filter-footer-actions\">\n        <zen-button variant=\"secondary-gray\"\n          [destructive]=\"selectedCount > 0\"\n          [disabled]=\"selectedCount === 0\"\n          (click)=\"reset()\">\n          {{'Clear Filter' | translate}}\n        </zen-button>\n        <zen-button variant=\"primary\"\n          (click)=\"apply()\">\n          {{'Apply' | translate}}\n        </zen-button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .menu-content{width:400px;white-space:initial;position:fixed}.filters-component .menu-content.absolute{position:absolute;inset:auto}.filters-component .menu-content.dropdown-left{right:0}.filters-component .menu-content.dropdown-right{left:0}.filters-component .menu-content.dropdown-top{bottom:100%;margin-bottom:12px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:12px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .filter-menu{display:flex;flex-direction:column;background:#fff;border-radius:8px;border:1px solid #eaecf0;overflow:hidden;z-index:10;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.filters-component .filter-menu[hidden]{display:none}.filters-component .filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filters-component .filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filters-component .filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:24px;padding:8px 16px 24px}.filters-component .filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .menu-item__content{padding-left:8px}.filters-component .filter-menu__body .action-item,.filters-component .filter-menu__body .action-item-checkbox,.filters-component .filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filters-component .filter-menu__body .action-item:hover,.filters-component .filter-menu__body .action-item:focus-within,.filters-component .filter-menu__body .action-item-checkbox:hover,.filters-component .filter-menu__body .action-item-checkbox:focus-within,.filters-component .filter-menu__body .action-item-radio:hover,.filters-component .filter-menu__body .action-item-radio:focus-within{background:transparent}.filters-component .filter-menu__body .action-item-checkbox:first-child,.filters-component .filter-menu__body .action-item-radio:first-child{margin-top:-8px}.filters-component .filter-menu__body .action-item-checkbox:last-child,.filters-component .filter-menu__body .action-item-radio:last-child{margin-bottom:-8px}.filters-component .filter-menu__body .expander-item{outline:none;border:none;display:flex;width:100%;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;padding:0}.filters-component .filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filters-component .filter-menu__body .expander-item.expanded,.filters-component .filter-menu__body .expander-item.active{background:transparent;color:#344054}.filters-component .filter-menu__body .expander-item:hover{background:transparent}.filters-component .filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filters-component .filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filters-component .filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filters-component .filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filters-component .filter-menu__body .no-item,.filters-component .filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filters-component .filter-menu__body .select-all{font-weight:500}.filters-component .filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .number-range-row{display:flex;gap:16px}.filters-component .filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filters-component .filter-menu__body .toggle-row{justify-content:space-between}.filters-component .filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.filters-component .filter-menu__body .section-title{display:flex;align-items:center;gap:6px;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;padding:0}.filters-component .filter-menu__body .section-title:hover{background:transparent}.filters-component .filter-menu__body .has-badge zen-checkbox{width:auto}.filters-component .filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .filter-menu__body .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.filters-component .filter-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:2px 8px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:12px;line-height:18px;white-space:nowrap;box-sizing:border-box}.filters-component .filter-icon-badge{position:absolute;top:-4px;right:-7px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:1.5px 6px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:9px;line-height:13.5px;text-align:center;white-space:nowrap;box-sizing:border-box;pointer-events:none;z-index:11}.filters-component .filter zen-icon{width:20px;height:20px;background-color:#344054}.filters-component .filter.applied zen-icon{background-color:#136ab6}.filters-component .filter.applied .filter-label{color:#136ab6}.hidden{display:none}:host ::ng-deep .filter.applied button{border-color:#88c1f1!important}:host ::ng-deep .filter.icon-only button{padding:10px!important}:host ::ng-deep zen-radio label{margin:0}\n"] }]
+            args: [{ selector: 'zen-filter', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"filters-component\"\n  #mainComponent\n  click-out=\"isVisible && hide()\">\n\n  @if (!customTrigger) {\n    <zen-button (click)=\"toggle()\"\n      [variant]=\"hasActiveFilters ? 'secondary' : 'secondary-gray'\"\n      class=\"filter {{hasActiveFilters ? 'applied' : ''}} {{triggerVariant === 'icon-only' ? 'icon-only' : ''}}\">\n      @if (imageUrl) {\n        <zen-icon [src]=\"imageUrl\"\n        ></zen-icon>\n      }\n      @if (!imageUrl) {\n        <zen-icon class=\"filter-icon\"\n        name=\"filter\"></zen-icon>\n      }\n      @if (triggerVariant !== 'icon-only') {\n        <span class=\"filter-label\">{{ (label || 'Filter') | translate }}</span>\n        @if (appliedCount > 0) {\n          <span class=\"filter-count-badge\">{{ appliedCount }}</span>\n        }\n      }\n    </zen-button>\n    <!-- Icon-only mode: count rendered as a corner badge overlapping the\n         button's top-right (sibling of the button so it isn't clipped). -->\n    @if (triggerVariant === 'icon-only' && appliedCount > 0) {\n      <span class=\"filter-icon-badge\">{{ appliedCount }}</span>\n    }\n  }\n\n  @if (customTrigger) {\n    <ng-content></ng-content>\n  }\n\n  <div [hidden]=\"!isVisible\"\n    class=\"filter-menu menu-content\"\n    [class.customTrigger]=\"customTrigger\"\n    [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom, 'max-height': menuMaxHeight }\">\n    <div class=\"filter-menu__header\">\n      <zen-search-box [(text)]=\"searchText\"\n        #searchBox\n      (textChange)=\"searchTextChanged()\"></zen-search-box>\n    </div>\n\n    <div class=\"filter-menu__body\"\n      ngClass=\"{{wrapperBodyClass}}\">\n      @if (errorMessage.length) {\n        @for (item of errorMessage; track item) {\n          <li\n          class=\"error-msg\">{{item | translate }}</li>\n        }\n      }\n\n      @for (item of config.items; track item) {\n          @if (isMenuIsVisible(item)) {\n            <div [class]=\"'menu-item menu-item--' + item.type\">\n              <!-- Divider between two filter -->\n              @if (item.type === 'divider') {\n                <p class=\"filter-divider\"></p>\n              }\n              <!-- Boolean toggle -->\n              @if (item.type === 'toggle') {\n                <div\n                  class=\"action-item toggle-row\"\n                  (click)=\"toggleEnabled(item)\">\n                  <div>{{item.title | translate}}</div>\n                  <zen-toggle [(enabled)]=\"item.enabled\"\n                    (click)=\"$event.stopPropagation()\"></zen-toggle>\n                </div>\n              }\n              @if (item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse) {\n                <button class=\"action-item expander-item\"\n                  (click)=\"toggleItem(item)\">\n                  <span class=\"expander-title\">{{item.title | translate}}</span>\n                  <span class=\"expander-indicator\">\n                    @if (isItemFiltered(item)) {\n                      <span class=\"filter-section-dot\"></span>\n                    }\n                    <zen-icon class=\"expand-icon\"\n                      name=\"chevron-down\"\n                    [class.active]=\"item.expanded\"></zen-icon>\n                  </span>\n                </button>\n              }\n              @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n                <div class=\"action-item section-title\"\n                  >\n                  <span class=\"expander-title\">{{item.title | translate}}</span>\n                  @if (isItemFiltered(item)) {\n                    <span class=\"filter-section-dot\"></span>\n                  }\n                </div>\n              }\n              @if (item.expanded || item.disableCollapse) {\n                @switch (item.type) {\n                    <!-- Multiselect -->\n                    @case ('multiselect') {\n                      <div class=\"menu-item__content\">\n                        <!-- Lazy loading mode -->\n                        @if (item.isLazyLoading) {\n                          @for (dsItem of item.filteredDataSource; track dsItem) {\n                            <div\n                              class=\"action-item-checkbox ds-item\"\n                              [class.has-badge]=\"dsItem.badgeBgColor\"\n                              (click)=\"toggleDsItem(dsItem, item)\">\n                              <zen-checkbox [(checked)]=\"dsItem.checked\"\n                                [imageUrl]=\"dsItem.imageUrl\"\n                                (checkedChange)=\"checkChanged(dsItem, item)\"\n                                (click)=\"$event.stopPropagation()\"\n                              [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n                              @if (dsItem.badgeBgColor) {\n                                <span\n                                  class=\"filter-item-badge\"\n                                  [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n                                  {{ dsItem.name?.toString() | translate }}\n                                </span>\n                              }\n                            </div>\n                          }\n                          @if (item.canLoadMore && !item.isLoadingNow) {\n                            <div\n                              class=\"action-item\">\n                              <zen-button variant=\"secondary-gray\"\n                                size=\"sm\"\n                                [fullWidth]=\"true\"\n                                (click)=\"loadMore(item, false)\">\n                                {{'Load More' | translate}}\n                              </zen-button>\n                            </div>\n                          }\n                          @if (item.isLoadingNow) {\n                            <div\n                              class=\"loader-more-spinner\">\n                              <zen-spinner size=\"small\"></zen-spinner>\n                            </div>\n                          }\n                        }\n                        @if (!item.isLazyLoading && !hasTreeData(item)) {\n                          @if (!item.hideSelectAll) {\n                            <div class=\"action-item-checkbox ds-item select-all\">\n                              @if (item.dataSource.length === item.filteredDataSource.length) {\n                                <zen-checkbox\n                                  [(checked)]=\"item.isSelectedAll\"\n                                  [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n                                  [label]=\"'Select All' | translate\"\n                                  (checkedChange)=\"onSelectAll(item)\">\n                                </zen-checkbox>\n                              }\n                            </div>\n                          }\n                          @for (dsItem of item.filteredDataSource; track dsItem) {\n                            <div\n                              class=\"action-item-checkbox ds-item\"\n                              [class.has-badge]=\"dsItem.badgeBgColor\"\n                              (click)=\"toggleDsItem(dsItem, item)\">\n                              <zen-checkbox [(checked)]=\"dsItem.checked\"\n                                [imageUrl]=\"dsItem.imageUrl\"\n                                (checkedChange)=\"checkChanged(dsItem, item)\"\n                                (click)=\"$event.stopPropagation()\"\n                              [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n                              @if (dsItem.badgeBgColor) {\n                                <span\n                                  class=\"filter-item-badge\"\n                                  [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n                                  {{ dsItem.name?.toString() | translate }}\n                                </span>\n                              }\n                            </div>\n                          }\n                        }\n                        <!-- Tree view mode -->\n                        @if (!item.isLazyLoading && hasTreeData(item)) {\n                          <zen-groups\n                            [dataSource]=\"item.dataSource\"\n                            [filteredDataSource]=\"item.filteredDataSource\"\n                            [hideSelectAll]=\"item.hideSelectAll\"\n                            [inline]=\"true\"\n                            [hideSearch]=\"true\"\n                            [(isSelectedAll)]=\"item.isSelectedAll\"\n                            (checkedChange)=\"checkChanged($event, item)\">\n                          </zen-groups>\n                        }\n                      </div>\n                    }\n                    <!-- Date range picker -->\n                    @case ('dateRange') {\n                      <div class=\"menu-item__content\">\n                        <!--  Options date range view  -->\n                        @if (item.dateRangeOptions?.length) {\n                          @for (option of item.dateRangeOptions; track option) {\n                            <div class=\"action-item-radio ds-item\">\n                              <zen-radio [value]=\"option.name\"\n                                [label]=\"option.name | translate\"\n                                [name]=\"item.key\"\n                                [selected]=\"selectedDateRangeOptions[item.key] === option.name\"\n                              (radioChange)=\"handleDateRangeOptionClick(item, option)\"></zen-radio>\n                            </div>\n                          }\n                          <div class=\"action-item-radio ds-item\">\n                            <zen-radio [value]=\"'Custom'\"\n                              [label]=\"'Custom' | translate\"\n                              [name]=\"item.key\"\n                              [selected]=\"selectedDateRangeOptions[item.key] === 'Custom'\"\n                            (radioChange)=\"handleCustomDateRangeClick(item)\"></zen-radio>\n                          </div>\n                          @if (selectedDateRangeOptions[item.key] === 'Custom') {\n                            <div class=\"filter-date-fields\">\n                              <div class=\"ds-item filter-row\">\n                                <div class=\"lbl\">{{'From' | translate}}:</div>\n                                <zen-date-picker-dropdown\n                                  type=\"single\"\n                                  [(date)]=\"item.dateRange.start\"\n                                  [timePicker]=\"item.showTime\">\n                                </zen-date-picker-dropdown>\n                              </div>\n                              <div class=\"ds-item filter-row\">\n                                <div class=\"lbl\">{{'To' | translate}}:</div>\n                                <zen-date-picker-dropdown\n                                  type=\"single\"\n                                  [date]=\"item.dateRange.end\"\n                                  [timePicker]=\"item.showTime\"\n                                  (dateChange)=\"handleEndDateChange(item, $event)\">\n                                </zen-date-picker-dropdown>\n                              </div>\n                            </div>\n                          }\n                        }\n                        <!--  Default date range view  -->\n                        @if (!item.dateRangeOptions?.length) {\n                          <div class=\"filter-date-fields\">\n                            <div class=\"ds-item filter-row\">\n                              <div class=\"lbl\">{{'From' | translate}}:</div>\n                              <zen-date-picker-dropdown\n                                type=\"single\"\n                                [(date)]=\"item.dateRange.start\"\n                                [timePicker]=\"item.showTime\">\n                              </zen-date-picker-dropdown>\n                            </div>\n                            <div class=\"ds-item filter-row\">\n                              <div class=\"lbl\">{{'To' | translate}}:</div>\n                              <zen-date-picker-dropdown\n                                type=\"single\"\n                                [date]=\"item.dateRange.end\"\n                                [timePicker]=\"item.showTime\"\n                                (dateChange)=\"handleEndDateChange(item, $event)\">\n                              </zen-date-picker-dropdown>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    }\n                    <!-- Date picker -->\n                    @case ('date') {\n                      <div class=\"filter-row menu-item__content\">\n                        <zen-date-picker-dropdown\n                          type=\"single\"\n                          [(date)]=\"item.date\"\n                          [timePicker]=\"item.showTime\">\n                        </zen-date-picker-dropdown>\n                      </div>\n                    }\n                    <!-- Number range -->\n                    @case ('numberRange') {\n                      <div\n                        class=\"filter-row number-range-row menu-item__content\">\n                        <zen-input type=\"number\"\n                          size=\"sm\"\n                          [label]=\"'Min' | translate\"\n                          [(ngModel)]=\"item.numberRange.from\"></zen-input>\n                        <zen-input type=\"number\"\n                          size=\"sm\"\n                          [label]=\"'Max' | translate\"\n                          [(ngModel)]=\"item.numberRange.to\"></zen-input>\n                      </div>\n                    }\n                    <!-- Radio -->\n                    @case ('radio') {\n                      <div class=\"menu-item__content\">\n                        @for (option of item.radioOptions; track option) {\n                          <div\n                            class=\"action-item-radio ds-item\">\n                            <zen-radio [value]=\"option.id\"\n                              [label]=\"option.name | translate\"\n                              [name]=\"item.key\"\n                              [imageUrl]=\"option.imageUrl\"\n                              [selected]=\"option.selected\"\n                              (radioChange)=\"radioChanged($event, item)\"\n                            [disabled]=\"option.disabled\"></zen-radio>\n                          </div>\n                        }\n                      </div>\n                    }\n                  }\n              }\n            </div>\n          }\n      }\n      @if (showNoFilterResult) {\n        <span\n        class=\"no-item\">{{'No Results Found' | translate}}..</span>\n      }\n    </div>\n\n    <div class=\"filter-menu__footer\">\n      <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n      <div class=\"filter-footer-actions\">\n        <zen-button variant=\"secondary-gray\"\n          [destructive]=\"true\"\n          [disabled]=\"resetDisabled\"\n          (click)=\"reset()\">\n          {{ (defaultFilter ? 'Reset Default' : 'Clear All') | translate }}\n        </zen-button>\n        <zen-button variant=\"primary\"\n          (click)=\"apply()\">\n          {{'Apply' | translate}}\n        </zen-button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .menu-content{width:400px;white-space:initial;position:fixed}.filters-component .menu-content.absolute{position:absolute;inset:auto}.filters-component .menu-content.dropdown-left{right:0}.filters-component .menu-content.dropdown-right{left:0}.filters-component .menu-content.dropdown-top{bottom:100%;margin-bottom:12px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:12px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .filter-menu{display:flex;flex-direction:column;background:#fff;border-radius:8px;border:1px solid #eaecf0;overflow:hidden;z-index:10;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.filters-component .filter-menu[hidden]{display:none}.filters-component .filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filters-component .filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filters-component .filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.filters-component .filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .menu-item.menu-item--multiselect,.filters-component .filter-menu__body .menu-item.menu-item--radio{gap:0}.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:first-child,.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:first-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:first-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-radio:first-child{margin-top:0}.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:last-child,.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:last-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:last-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-radio:last-child{margin-bottom:0}.filters-component .filter-menu__body .menu-item__content{padding-left:8px}.filters-component .filter-menu__body .action-item,.filters-component .filter-menu__body .action-item-checkbox,.filters-component .filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filters-component .filter-menu__body .action-item:focus-within,.filters-component .filter-menu__body .action-item-checkbox:focus-within,.filters-component .filter-menu__body .action-item-radio:focus-within{background:transparent}.filters-component .filter-menu__body .action-item:hover{background:transparent}.filters-component .filter-menu__body .action-item-checkbox,.filters-component .filter-menu__body .action-item-radio{margin-left:-8px;margin-right:0;padding-left:8px;padding-right:8px;border-radius:6px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .action-item-checkbox:hover,.filters-component .filter-menu__body .action-item-radio:hover{background:#f9fafb}.filters-component .filter-menu__body .action-item-checkbox ::ng-deep .checkbox-component,.filters-component .filter-menu__body .action-item-radio ::ng-deep .radio-component{padding-top:10px;padding-bottom:10px}.filters-component .filter-menu__body .action-item-checkbox:first-child,.filters-component .filter-menu__body .action-item-radio:first-child{margin-top:-10px}.filters-component .filter-menu__body .action-item-checkbox:last-child,.filters-component .filter-menu__body .action-item-radio:last-child{margin-bottom:-4px}.filters-component .filter-menu__body .expander-item{outline:none;border:none;display:flex;width:auto;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filters-component .filter-menu__body .expander-item.expanded,.filters-component .filter-menu__body .expander-item.active{background:transparent;color:#344054}.filters-component .filter-menu__body .expander-item:hover{background:#f9fafb}.filters-component .filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filters-component .filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filters-component .filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filters-component .filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filters-component .filter-menu__body .no-item,.filters-component .filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filters-component .filter-menu__body .select-all{font-weight:500}.filters-component .filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .number-range-row{display:flex;gap:16px}.filters-component .filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filters-component .filter-menu__body .toggle-row{justify-content:space-between;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .toggle-row zen-toggle{display:flex;align-items:center}.filters-component .filter-menu__body .toggle-row:hover{background:#f9fafb}.filters-component .filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled){background-color:#eaecf0}.filters-component .filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled).zen-toggle--active{background-color:#105494}.filters-component .filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.filters-component .filter-menu__body .section-title{display:flex;align-items:center;gap:6px;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;margin:0 -16px;padding:10px 16px;transition:background-color .15s ease}.filters-component .filter-menu__body .section-title:hover{background:#f9fafb}.filters-component .filter-menu__body .has-badge zen-checkbox{width:auto}.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox{background:#e3eefb;border-color:#136ab6}.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-checked,.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.filters-component .filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .filter-menu__body .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.filters-component .filter-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:2px 8px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:12px;line-height:18px;white-space:nowrap;box-sizing:border-box}.filters-component .filter-icon-badge{position:absolute;top:-4px;right:-7px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:1.5px 6px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:9px;line-height:13.5px;text-align:center;white-space:nowrap;box-sizing:border-box;pointer-events:none}.filters-component .filter zen-icon{width:20px;height:20px;background-color:#344054}.filters-component .filter.applied zen-icon{background-color:#136ab6}.filters-component .filter.applied .filter-label{color:#136ab6}.hidden{display:none}:host ::ng-deep .filter.applied button{border-color:#88c1f1!important}:host ::ng-deep .filter.icon-only button{padding:10px!important}:host ::ng-deep zen-radio label{margin:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { config: [{
                 type: Input
             }], filter: [{
@@ -4080,6 +4160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                 type: Input
             }], resetBehavior: [{
                 type: Input
+            }], defaultFilter: [{
+                type: Input
             }], filterChange: [{
                 type: Output
             }], isVisible: [{
@@ -4962,11 +5044,11 @@ class ZenduSelectComponent {
         this.isSelectedAll = this.options.every(opt => opt.checked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduSelectComponent, isStandalone: false, 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  @if (label) {\n    <label class=\"app-select-label text text-sm text-weight-medium\"\n      [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n      {{ label | translate }}\n      @if (required) {\n        <span class=\"required-indicator\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Select Input -->\n  <div class=\"app-select-wrapper\">\n    <!-- Custom Trigger Template (overrides built-in trigger) -->\n    @if (buttonTemplate) {\n      <div\n        class=\"app-select-custom-trigger\"\n        (click)=\"toggleDropdown()\">\n        <ng-template [ngTemplateOutlet]=\"buttonTemplate.template\"\n          [ngTemplateOutletContext]=\"{ isOpen: isOpen, selected: getSelectedOption(), display: selectedDisplay, disabled: disabled }\">\n        </ng-template>\n      </div>\n    }\n\n    <!-- Built-in Trigger (when no custom button template provided) -->\n    @if (!buttonTemplate) {\n      @switch (leadingType) {\n        <!-- Default Select (no leading element) -->\n        @case ('default') {\n          <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n        }\n        <!-- Icon Leading Select -->\n        @case ('icon') {\n          <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n        }\n        <!-- Avatar Leading Select -->\n        @case ('avatar') {\n          <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n        }\n        <!-- Dot Leading Select -->\n        @case ('dot') {\n          <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n        }\n        <!-- Search Input Select -->\n        @case ('search') {\n          <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n        }\n      }\n    }\n\n    <!-- Dropdown Menu -->\n    @if (isOpen) {\n      <div class=\"app-select-dropdown\"\n        [ngClass]=\"getDropdownDirectionClass()\"\n        >\n        <!-- Tree Mode: embed zen-groups inline -->\n        @if (isTreeMode && isMultiselect) {\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        } @else {\n          <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n          @if (leadingType !== 'search' && hasSearch && !disabled) {\n            <div class=\"app-select-search\">\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              @if (searchText) {\n                <zen-icon\n                  class=\"app-select-search-clear\"\n                  [name]=\"'x'\"\n                  [customColor]=\"'#667085'\"\n                  (click)=\"clearSearch(); $event.stopPropagation()\">\n                </zen-icon>\n              }\n            </div>\n          }\n          <!-- Options List -->\n          <div class=\"app-select-options\" (scroll)=\"onOptionsScroll($event)\">\n            <!-- Select All Option for Multiselect -->\n            @if (isMultiselect && !hideSelectAll && !isLazyLoading && filteredOptions.length > 0) {\n              <button\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            @if (enableAddNewOption && (showDefaultAddOption || searchText)) {\n              <button\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            <!-- Remove Option -->\n            @if (enableRemoveOption) {\n              <button\n                class=\"app-select-option remove-option\"\n                (click)=\"handleRemoveOption(); $event.stopPropagation()\">\n                <zen-icon [name]=\"'user-x'\" [customColor]=\"'#344054'\"></zen-icon>\n                <span class=\"app-select-option-text\">\n                  {{ removeOptionText || 'Remove' }}\n                </span>\n              </button>\n            }\n            @if (filteredOptions.length === 0 && !enableAddNewOption && !isLoadingNow) {\n              <div class=\"app-select-no-options\">\n                No matching options found\n              </div>\n            }\n            @for (option of filteredOptions; track option) {\n              <button\n                class=\"app-select-option\"\n                [class.selected]=\"isSelected(option)\"\n                (click)=\"selectOption(option)\">\n                <!-- Checkbox for Multiselect -->\n                @if (isMultiselect) {\n                  <zen-checkbox class=\"app-select-checkbox\"\n                    [checked]=\"isSelected(option)\"\n                    [disableValueChange]=\"true\"\n                    [label]=\"''\"\n                    size=\"sm\">\n                  </zen-checkbox>\n                }\n                <!-- Option Leading Element -->\n                @if (leadingType !== 'default') {\n                  <div class=\"app-select-option-leading\">\n                    @switch (leadingType) {\n                      @case ('icon') {\n                        <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('avatar') {\n                        <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('dot') {\n                        <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                    }\n                  </div>\n                }\n                <!-- Option Text -->\n                <div class=\"app-select-option-text-wrapper\">\n                  <!-- Use custom template if provided -->\n                  @if (!isMultiselect && optionTemplate) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n                      [ngTemplateOutletContext]=\"{ option: option }\">\n                    </ng-template>\n                  } @else {\n                    <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n                      {{ getName(option) | translate }}\n                    </span>\n                    @if (option.secondaryText) {\n                      <span class=\"app-select-option-secondary\">\n                        {{ option.secondaryText }}\n                      </span>\n                    }\n                  }\n                </div>\n                <!-- Check Icon for Single Select -->\n                @if (!isMultiselect && isSelected(option)) {\n                  <zen-icon\n                    class=\"app-select-option-check\"\n                    [name]=\"'check'\"\n                    [customColor]=\"'#136AB6'\">\n                  </zen-icon>\n                }\n              </button>\n            }\n            <!-- Lazy loading spinner -->\n            @if (isLazyLoading && isLoadingNow) {\n              <div class=\"app-select-loading\">\n                <zen-spinner size=\"small\"></zen-spinner>\n              </div>\n            }\n          </div>\n        }\n        <!-- Flat List Mode (default) -->\n      </div>\n    }\n  </div>\n\n  <!-- Hint text / Error message -->\n  @if ((destructive && errorMessage) || hintText) {\n    <div\n      class=\"app-select-hint text text-sm text-weight-regular\"\n      [ngClass]=\"{'destructive': destructive}\">\n      @if (destructive) {\n        <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n      }\n      <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n    </div>\n  }\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    @if (valueTemplate && !isModelEmpty()) {\n      <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n        [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n      </ng-template>\n    } @else {\n      <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n        {{ selectedDisplay || placeholder | translate }}\n      </span>\n      @if (getSelectedSecondaryText() && !isModelEmpty()) {\n        <span class=\"app-select-secondary\">\n          {{ getSelectedSecondaryText() }}\n        </span>\n      }\n    }\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  @if (icon || option?.icon || option?.iconName) {\n    @if (getIconPath(option, icon); as iconPath) {\n      <!-- If icon contains / or . treat as SVG path -->\n      @if ((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        @if (iconPath.includes('excel')) {\n          <img\n            [src]=\"iconPath\"\n            alt=\"\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Use zen-icon with src for other SVG files -->\n        @if (!iconPath.includes('excel')) {\n          <zen-icon\n            [src]=\"iconPath\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n      <!-- Otherwise treat as Material icon name or special cases -->\n      @if (!((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        @if ((icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')) {\n          <img\n            src=\"assets/ng-zenduit/icons/excel.svg\"\n            alt=\"Excel\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Material icon names -->\n        @if ((icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')) {\n          <zen-icon\n            [name]=\"icon || option?.icon || option?.iconName\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n    }\n  }\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n  @if (avatar || option?.avatar) {\n    <div class=\"app-select-avatar\" >\n      <img [src]=\"avatar || option?.avatar\" alt=\"\">\n    </div>\n  }\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-custom-trigger{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#fff;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:#98a2b3}.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}.app-select-container.error .app-select-input:hover:not(:disabled){border-color:#f97066}.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:#fff;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-search .app-select-search-clear{cursor:pointer}.app-select-loading{display:flex;justify-content:center;align-items:center;padding:8px 0}.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-secondary,.app-select-container.disabled .app-select-search-field{color:#667085}.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-dot{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{background:#f9fafb;color:#344054}.app-select-option.remove-option .app-select-option-text{color:#344054}.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:#fff;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 14px}.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 0;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-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 0;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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduSelectComponent, isStandalone: false, 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  @if (label) {\n    <label class=\"app-select-label text text-sm text-weight-medium\"\n      [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n      {{ label | translate }}\n      @if (required) {\n        <span class=\"required-indicator\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Select Input -->\n  <div class=\"app-select-wrapper\">\n    <!-- Custom Trigger Template (overrides built-in trigger) -->\n    @if (buttonTemplate) {\n      <div\n        class=\"app-select-custom-trigger\"\n        (click)=\"toggleDropdown()\">\n        <ng-template [ngTemplateOutlet]=\"buttonTemplate.template\"\n          [ngTemplateOutletContext]=\"{ isOpen: isOpen, selected: getSelectedOption(), display: selectedDisplay, disabled: disabled }\">\n        </ng-template>\n      </div>\n    }\n\n    <!-- Built-in Trigger (when no custom button template provided) -->\n    @if (!buttonTemplate) {\n      @switch (leadingType) {\n        <!-- Default Select (no leading element) -->\n        @case ('default') {\n          <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n        }\n        <!-- Icon Leading Select -->\n        @case ('icon') {\n          <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n        }\n        <!-- Avatar Leading Select -->\n        @case ('avatar') {\n          <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n        }\n        <!-- Dot Leading Select -->\n        @case ('dot') {\n          <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n        }\n        <!-- Search Input Select -->\n        @case ('search') {\n          <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n        }\n      }\n    }\n\n    <!-- Dropdown Menu -->\n    @if (isOpen) {\n      <div class=\"app-select-dropdown\"\n        [ngClass]=\"getDropdownDirectionClass()\"\n        >\n        <!-- Tree Mode: embed zen-groups inline -->\n        @if (isTreeMode && isMultiselect) {\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        } @else {\n          <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n          @if (leadingType !== 'search' && hasSearch && !disabled) {\n            <div class=\"app-select-search\">\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              @if (searchText) {\n                <zen-icon\n                  class=\"app-select-search-clear\"\n                  [name]=\"'x'\"\n                  [customColor]=\"'#667085'\"\n                  (click)=\"clearSearch(); $event.stopPropagation()\">\n                </zen-icon>\n              }\n            </div>\n          }\n          <!-- Options List -->\n          <div class=\"app-select-options\" (scroll)=\"onOptionsScroll($event)\">\n            <!-- Select All Option for Multiselect -->\n            @if (isMultiselect && !hideSelectAll && !isLazyLoading && filteredOptions.length > 0) {\n              <button\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            @if (enableAddNewOption && (showDefaultAddOption || searchText)) {\n              <button\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            <!-- Remove Option -->\n            @if (enableRemoveOption) {\n              <button\n                class=\"app-select-option remove-option\"\n                (click)=\"handleRemoveOption(); $event.stopPropagation()\">\n                <zen-icon [name]=\"'user-x'\" [customColor]=\"'#344054'\"></zen-icon>\n                <span class=\"app-select-option-text\">\n                  {{ removeOptionText || 'Remove' }}\n                </span>\n              </button>\n            }\n            @if (filteredOptions.length === 0 && !enableAddNewOption && !isLoadingNow) {\n              <div class=\"app-select-no-options\">\n                No matching options found\n              </div>\n            }\n            @for (option of filteredOptions; track option) {\n              <button\n                class=\"app-select-option\"\n                [class.selected]=\"isSelected(option)\"\n                (click)=\"selectOption(option)\">\n                <!-- Checkbox for Multiselect -->\n                @if (isMultiselect) {\n                  <zen-checkbox class=\"app-select-checkbox\"\n                    [checked]=\"isSelected(option)\"\n                    [disableValueChange]=\"true\"\n                    [label]=\"''\"\n                    size=\"sm\">\n                  </zen-checkbox>\n                }\n                <!-- Option Leading Element -->\n                @if (leadingType !== 'default') {\n                  <div class=\"app-select-option-leading\">\n                    @switch (leadingType) {\n                      @case ('icon') {\n                        <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('avatar') {\n                        <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('dot') {\n                        <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                    }\n                  </div>\n                }\n                <!-- Option Text -->\n                <div class=\"app-select-option-text-wrapper\">\n                  <!-- Use custom template if provided -->\n                  @if (!isMultiselect && optionTemplate) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n                      [ngTemplateOutletContext]=\"{ option: option }\">\n                    </ng-template>\n                  } @else {\n                    <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n                      {{ getName(option) | translate }}\n                    </span>\n                    @if (option.secondaryText) {\n                      <span class=\"app-select-option-secondary\">\n                        {{ option.secondaryText }}\n                      </span>\n                    }\n                  }\n                </div>\n                <!-- Check Icon for Single Select -->\n                @if (!isMultiselect && isSelected(option)) {\n                  <zen-icon\n                    class=\"app-select-option-check\"\n                    [name]=\"'check'\"\n                    [customColor]=\"'#136AB6'\">\n                  </zen-icon>\n                }\n              </button>\n            }\n            <!-- Lazy loading spinner -->\n            @if (isLazyLoading && isLoadingNow) {\n              <div class=\"app-select-loading\">\n                <zen-spinner size=\"small\"></zen-spinner>\n              </div>\n            }\n          </div>\n        }\n        <!-- Flat List Mode (default) -->\n      </div>\n    }\n  </div>\n\n  <!-- Hint text / Error message -->\n  @if ((destructive && errorMessage) || hintText) {\n    <div\n      class=\"app-select-hint text text-sm text-weight-regular\"\n      [ngClass]=\"{'destructive': destructive}\">\n      @if (destructive) {\n        <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n      }\n      <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n    </div>\n  }\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    @if (valueTemplate && !isModelEmpty()) {\n      <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n        [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n      </ng-template>\n    } @else {\n      <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n        {{ selectedDisplay || placeholder | translate }}\n      </span>\n      @if (getSelectedSecondaryText() && !isModelEmpty()) {\n        <span class=\"app-select-secondary\">\n          {{ getSelectedSecondaryText() }}\n        </span>\n      }\n    }\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  @if (icon || option?.icon || option?.iconName) {\n    @if (getIconPath(option, icon); as iconPath) {\n      <!-- If icon contains / or . treat as SVG path -->\n      @if ((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        @if (iconPath.includes('excel')) {\n          <img\n            [src]=\"iconPath\"\n            alt=\"\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Use zen-icon with src for other SVG files -->\n        @if (!iconPath.includes('excel')) {\n          <zen-icon\n            [src]=\"iconPath\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n      <!-- Otherwise treat as Material icon name or special cases -->\n      @if (!((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        @if ((icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')) {\n          <img\n            src=\"assets/ng-zenduit/icons/excel.svg\"\n            alt=\"Excel\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Material icon names -->\n        @if ((icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')) {\n          <zen-icon\n            [name]=\"icon || option?.icon || option?.iconName\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n    }\n  }\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n  @if (avatar || option?.avatar) {\n    <div class=\"app-select-avatar\" >\n      <img [src]=\"avatar || option?.avatar\" alt=\"\">\n    </div>\n  }\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-custom-trigger{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#fff;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:#98a2b3}.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}.app-select-container.error .app-select-input:hover:not(:disabled){border-color:#f97066}.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:#fff;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-search .app-select-search-clear{cursor:pointer}.app-select-loading{display:flex;justify-content:center;align-items:center;padding:8px 0}.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.size-sm .app-select-option{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-secondary,.app-select-container.disabled .app-select-search-field{color:#667085}.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-dot{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{background:#f9fafb;color:#344054}.app-select-option.remove-option .app-select-option-text{color:#344054}.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:#fff;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 14px}.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 0;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-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 0;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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'zen-select', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div [class]=\"getStateClasses()\">\n  <!-- Label -->\n  @if (label) {\n    <label class=\"app-select-label text text-sm text-weight-medium\"\n      [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n      {{ label | translate }}\n      @if (required) {\n        <span class=\"required-indicator\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Select Input -->\n  <div class=\"app-select-wrapper\">\n    <!-- Custom Trigger Template (overrides built-in trigger) -->\n    @if (buttonTemplate) {\n      <div\n        class=\"app-select-custom-trigger\"\n        (click)=\"toggleDropdown()\">\n        <ng-template [ngTemplateOutlet]=\"buttonTemplate.template\"\n          [ngTemplateOutletContext]=\"{ isOpen: isOpen, selected: getSelectedOption(), display: selectedDisplay, disabled: disabled }\">\n        </ng-template>\n      </div>\n    }\n\n    <!-- Built-in Trigger (when no custom button template provided) -->\n    @if (!buttonTemplate) {\n      @switch (leadingType) {\n        <!-- Default Select (no leading element) -->\n        @case ('default') {\n          <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n        }\n        <!-- Icon Leading Select -->\n        @case ('icon') {\n          <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n        }\n        <!-- Avatar Leading Select -->\n        @case ('avatar') {\n          <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n        }\n        <!-- Dot Leading Select -->\n        @case ('dot') {\n          <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n        }\n        <!-- Search Input Select -->\n        @case ('search') {\n          <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n        }\n      }\n    }\n\n    <!-- Dropdown Menu -->\n    @if (isOpen) {\n      <div class=\"app-select-dropdown\"\n        [ngClass]=\"getDropdownDirectionClass()\"\n        >\n        <!-- Tree Mode: embed zen-groups inline -->\n        @if (isTreeMode && isMultiselect) {\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        } @else {\n          <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n          @if (leadingType !== 'search' && hasSearch && !disabled) {\n            <div class=\"app-select-search\">\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              @if (searchText) {\n                <zen-icon\n                  class=\"app-select-search-clear\"\n                  [name]=\"'x'\"\n                  [customColor]=\"'#667085'\"\n                  (click)=\"clearSearch(); $event.stopPropagation()\">\n                </zen-icon>\n              }\n            </div>\n          }\n          <!-- Options List -->\n          <div class=\"app-select-options\" (scroll)=\"onOptionsScroll($event)\">\n            <!-- Select All Option for Multiselect -->\n            @if (isMultiselect && !hideSelectAll && !isLazyLoading && filteredOptions.length > 0) {\n              <button\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            @if (enableAddNewOption && (showDefaultAddOption || searchText)) {\n              <button\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            <!-- Remove Option -->\n            @if (enableRemoveOption) {\n              <button\n                class=\"app-select-option remove-option\"\n                (click)=\"handleRemoveOption(); $event.stopPropagation()\">\n                <zen-icon [name]=\"'user-x'\" [customColor]=\"'#344054'\"></zen-icon>\n                <span class=\"app-select-option-text\">\n                  {{ removeOptionText || 'Remove' }}\n                </span>\n              </button>\n            }\n            @if (filteredOptions.length === 0 && !enableAddNewOption && !isLoadingNow) {\n              <div class=\"app-select-no-options\">\n                No matching options found\n              </div>\n            }\n            @for (option of filteredOptions; track option) {\n              <button\n                class=\"app-select-option\"\n                [class.selected]=\"isSelected(option)\"\n                (click)=\"selectOption(option)\">\n                <!-- Checkbox for Multiselect -->\n                @if (isMultiselect) {\n                  <zen-checkbox class=\"app-select-checkbox\"\n                    [checked]=\"isSelected(option)\"\n                    [disableValueChange]=\"true\"\n                    [label]=\"''\"\n                    size=\"sm\">\n                  </zen-checkbox>\n                }\n                <!-- Option Leading Element -->\n                @if (leadingType !== 'default') {\n                  <div class=\"app-select-option-leading\">\n                    @switch (leadingType) {\n                      @case ('icon') {\n                        <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('avatar') {\n                        <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('dot') {\n                        <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                    }\n                  </div>\n                }\n                <!-- Option Text -->\n                <div class=\"app-select-option-text-wrapper\">\n                  <!-- Use custom template if provided -->\n                  @if (!isMultiselect && optionTemplate) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n                      [ngTemplateOutletContext]=\"{ option: option }\">\n                    </ng-template>\n                  } @else {\n                    <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n                      {{ getName(option) | translate }}\n                    </span>\n                    @if (option.secondaryText) {\n                      <span class=\"app-select-option-secondary\">\n                        {{ option.secondaryText }}\n                      </span>\n                    }\n                  }\n                </div>\n                <!-- Check Icon for Single Select -->\n                @if (!isMultiselect && isSelected(option)) {\n                  <zen-icon\n                    class=\"app-select-option-check\"\n                    [name]=\"'check'\"\n                    [customColor]=\"'#136AB6'\">\n                  </zen-icon>\n                }\n              </button>\n            }\n            <!-- Lazy loading spinner -->\n            @if (isLazyLoading && isLoadingNow) {\n              <div class=\"app-select-loading\">\n                <zen-spinner size=\"small\"></zen-spinner>\n              </div>\n            }\n          </div>\n        }\n        <!-- Flat List Mode (default) -->\n      </div>\n    }\n  </div>\n\n  <!-- Hint text / Error message -->\n  @if ((destructive && errorMessage) || hintText) {\n    <div\n      class=\"app-select-hint text text-sm text-weight-regular\"\n      [ngClass]=\"{'destructive': destructive}\">\n      @if (destructive) {\n        <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n      }\n      <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n    </div>\n  }\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    @if (valueTemplate && !isModelEmpty()) {\n      <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n        [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n      </ng-template>\n    } @else {\n      <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n        {{ selectedDisplay || placeholder | translate }}\n      </span>\n      @if (getSelectedSecondaryText() && !isModelEmpty()) {\n        <span class=\"app-select-secondary\">\n          {{ getSelectedSecondaryText() }}\n        </span>\n      }\n    }\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  @if (icon || option?.icon || option?.iconName) {\n    @if (getIconPath(option, icon); as iconPath) {\n      <!-- If icon contains / or . treat as SVG path -->\n      @if ((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        @if (iconPath.includes('excel')) {\n          <img\n            [src]=\"iconPath\"\n            alt=\"\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Use zen-icon with src for other SVG files -->\n        @if (!iconPath.includes('excel')) {\n          <zen-icon\n            [src]=\"iconPath\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n      <!-- Otherwise treat as Material icon name or special cases -->\n      @if (!((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        @if ((icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')) {\n          <img\n            src=\"assets/ng-zenduit/icons/excel.svg\"\n            alt=\"Excel\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Material icon names -->\n        @if ((icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')) {\n          <zen-icon\n            [name]=\"icon || option?.icon || option?.iconName\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n    }\n  }\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n  @if (avatar || option?.avatar) {\n    <div class=\"app-select-avatar\" >\n      <img [src]=\"avatar || option?.avatar\" alt=\"\">\n    </div>\n  }\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-custom-trigger{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#fff;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:#98a2b3}.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}.app-select-container.error .app-select-input:hover:not(:disabled){border-color:#f97066}.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:#fff;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-search .app-select-search-clear{cursor:pointer}.app-select-loading{display:flex;justify-content:center;align-items:center;padding:8px 0}.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-secondary,.app-select-container.disabled .app-select-search-field{color:#667085}.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-dot{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{background:#f9fafb;color:#344054}.app-select-option.remove-option .app-select-option-text{color:#344054}.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:#fff;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 14px}.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 0;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-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 0;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', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div [class]=\"getStateClasses()\">\n  <!-- Label -->\n  @if (label) {\n    <label class=\"app-select-label text text-sm text-weight-medium\"\n      [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n      {{ label | translate }}\n      @if (required) {\n        <span class=\"required-indicator\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Select Input -->\n  <div class=\"app-select-wrapper\">\n    <!-- Custom Trigger Template (overrides built-in trigger) -->\n    @if (buttonTemplate) {\n      <div\n        class=\"app-select-custom-trigger\"\n        (click)=\"toggleDropdown()\">\n        <ng-template [ngTemplateOutlet]=\"buttonTemplate.template\"\n          [ngTemplateOutletContext]=\"{ isOpen: isOpen, selected: getSelectedOption(), display: selectedDisplay, disabled: disabled }\">\n        </ng-template>\n      </div>\n    }\n\n    <!-- Built-in Trigger (when no custom button template provided) -->\n    @if (!buttonTemplate) {\n      @switch (leadingType) {\n        <!-- Default Select (no leading element) -->\n        @case ('default') {\n          <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n        }\n        <!-- Icon Leading Select -->\n        @case ('icon') {\n          <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n        }\n        <!-- Avatar Leading Select -->\n        @case ('avatar') {\n          <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n        }\n        <!-- Dot Leading Select -->\n        @case ('dot') {\n          <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n        }\n        <!-- Search Input Select -->\n        @case ('search') {\n          <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n        }\n      }\n    }\n\n    <!-- Dropdown Menu -->\n    @if (isOpen) {\n      <div class=\"app-select-dropdown\"\n        [ngClass]=\"getDropdownDirectionClass()\"\n        >\n        <!-- Tree Mode: embed zen-groups inline -->\n        @if (isTreeMode && isMultiselect) {\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        } @else {\n          <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n          @if (leadingType !== 'search' && hasSearch && !disabled) {\n            <div class=\"app-select-search\">\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              @if (searchText) {\n                <zen-icon\n                  class=\"app-select-search-clear\"\n                  [name]=\"'x'\"\n                  [customColor]=\"'#667085'\"\n                  (click)=\"clearSearch(); $event.stopPropagation()\">\n                </zen-icon>\n              }\n            </div>\n          }\n          <!-- Options List -->\n          <div class=\"app-select-options\" (scroll)=\"onOptionsScroll($event)\">\n            <!-- Select All Option for Multiselect -->\n            @if (isMultiselect && !hideSelectAll && !isLazyLoading && filteredOptions.length > 0) {\n              <button\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            @if (enableAddNewOption && (showDefaultAddOption || searchText)) {\n              <button\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            <!-- Remove Option -->\n            @if (enableRemoveOption) {\n              <button\n                class=\"app-select-option remove-option\"\n                (click)=\"handleRemoveOption(); $event.stopPropagation()\">\n                <zen-icon [name]=\"'user-x'\" [customColor]=\"'#344054'\"></zen-icon>\n                <span class=\"app-select-option-text\">\n                  {{ removeOptionText || 'Remove' }}\n                </span>\n              </button>\n            }\n            @if (filteredOptions.length === 0 && !enableAddNewOption && !isLoadingNow) {\n              <div class=\"app-select-no-options\">\n                No matching options found\n              </div>\n            }\n            @for (option of filteredOptions; track option) {\n              <button\n                class=\"app-select-option\"\n                [class.selected]=\"isSelected(option)\"\n                (click)=\"selectOption(option)\">\n                <!-- Checkbox for Multiselect -->\n                @if (isMultiselect) {\n                  <zen-checkbox class=\"app-select-checkbox\"\n                    [checked]=\"isSelected(option)\"\n                    [disableValueChange]=\"true\"\n                    [label]=\"''\"\n                    size=\"sm\">\n                  </zen-checkbox>\n                }\n                <!-- Option Leading Element -->\n                @if (leadingType !== 'default') {\n                  <div class=\"app-select-option-leading\">\n                    @switch (leadingType) {\n                      @case ('icon') {\n                        <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('avatar') {\n                        <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('dot') {\n                        <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                    }\n                  </div>\n                }\n                <!-- Option Text -->\n                <div class=\"app-select-option-text-wrapper\">\n                  <!-- Use custom template if provided -->\n                  @if (!isMultiselect && optionTemplate) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n                      [ngTemplateOutletContext]=\"{ option: option }\">\n                    </ng-template>\n                  } @else {\n                    <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n                      {{ getName(option) | translate }}\n                    </span>\n                    @if (option.secondaryText) {\n                      <span class=\"app-select-option-secondary\">\n                        {{ option.secondaryText }}\n                      </span>\n                    }\n                  }\n                </div>\n                <!-- Check Icon for Single Select -->\n                @if (!isMultiselect && isSelected(option)) {\n                  <zen-icon\n                    class=\"app-select-option-check\"\n                    [name]=\"'check'\"\n                    [customColor]=\"'#136AB6'\">\n                  </zen-icon>\n                }\n              </button>\n            }\n            <!-- Lazy loading spinner -->\n            @if (isLazyLoading && isLoadingNow) {\n              <div class=\"app-select-loading\">\n                <zen-spinner size=\"small\"></zen-spinner>\n              </div>\n            }\n          </div>\n        }\n        <!-- Flat List Mode (default) -->\n      </div>\n    }\n  </div>\n\n  <!-- Hint text / Error message -->\n  @if ((destructive && errorMessage) || hintText) {\n    <div\n      class=\"app-select-hint text text-sm text-weight-regular\"\n      [ngClass]=\"{'destructive': destructive}\">\n      @if (destructive) {\n        <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n      }\n      <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n    </div>\n  }\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    @if (valueTemplate && !isModelEmpty()) {\n      <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n        [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n      </ng-template>\n    } @else {\n      <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n        {{ selectedDisplay || placeholder | translate }}\n      </span>\n      @if (getSelectedSecondaryText() && !isModelEmpty()) {\n        <span class=\"app-select-secondary\">\n          {{ getSelectedSecondaryText() }}\n        </span>\n      }\n    }\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  @if (icon || option?.icon || option?.iconName) {\n    @if (getIconPath(option, icon); as iconPath) {\n      <!-- If icon contains / or . treat as SVG path -->\n      @if ((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        @if (iconPath.includes('excel')) {\n          <img\n            [src]=\"iconPath\"\n            alt=\"\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Use zen-icon with src for other SVG files -->\n        @if (!iconPath.includes('excel')) {\n          <zen-icon\n            [src]=\"iconPath\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n      <!-- Otherwise treat as Material icon name or special cases -->\n      @if (!((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        @if ((icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')) {\n          <img\n            src=\"assets/ng-zenduit/icons/excel.svg\"\n            alt=\"Excel\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Material icon names -->\n        @if ((icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')) {\n          <zen-icon\n            [name]=\"icon || option?.icon || option?.iconName\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n    }\n  }\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n  @if (avatar || option?.avatar) {\n    <div class=\"app-select-avatar\" >\n      <img [src]=\"avatar || option?.avatar\" alt=\"\">\n    </div>\n  }\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-custom-trigger{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#fff;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:#98a2b3}.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}.app-select-container.error .app-select-input:hover:not(:disabled){border-color:#f97066}.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:#fff;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-search .app-select-search-clear{cursor:pointer}.app-select-loading{display:flex;justify-content:center;align-items:center;padding:8px 0}.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.size-sm .app-select-option{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-secondary,.app-select-container.disabled .app-select-search-field{color:#667085}.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-dot{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{background:#f9fafb;color:#344054}.app-select-option.remove-option .app-select-option-text{color:#344054}.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:#fff;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 14px}.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 0;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-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 0;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: () => [{ type: i0.ElementRef }], propDecorators: { selectModel: [{
                 type: Input
             }], selectModelChange: [{
@@ -7979,12 +8061,12 @@ class ZenduTimepickerComponent {
             const m = this.formatNum(this.value.minutes);
             const s = this.formatNum(this.value.seconds);
             if (!this.showHours) {
-                return this.showSeconds ? `${m}.${s} ${this.value.period || 'AM'}` : `${m} ${this.value.period || 'AM'}`;
+                return this.showSeconds ? `${m}:${s} ${this.value.period || 'AM'}` : `${m} ${this.value.period || 'AM'}`;
             }
             if (this.showSeconds) {
-                return `${h}.${m}.${s} ${this.value.period || 'AM'}`;
+                return `${h}:${m}:${s} ${this.value.period || 'AM'}`;
             }
-            return `${h}.${m} ${this.value.period || 'AM'}`;
+            return `${h}:${m} ${this.value.period || 'AM'}`;
         }
         // Duration mode
         const parts = [];