ng-zenduit 2.3.9 → 2.3.12

package/fesm2022/ng-zenduit.mjs

@@ -8,9 +8,9 @@ import { Subject, BehaviorSubject, Subscription, fromEvent } from 'rxjs';
 import { filter, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i2$2 from '@angular/cdk/drag-drop';
+import * as i2$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { PhoneNumberUtil } from 'google-libphonenumber';
 import * as i2 from '@ngx-translate/core';
@@ -192,7 +192,7 @@ class ZenduOverlayService {
         const offsetY = config.offsetY ?? DEFAULT_OFFSET_Y;
         const positionStrategy = this._overlay.position()
             .flexibleConnectedTo(originEl)
-            .withPositions(this._positions(offsetY))
+            .withPositions(config.positions ?? this._positions(offsetY))
             .withPush(true)
             .withFlexibleDimensions(true)
             .withGrowAfterOpen(true)
@@ -1371,7 +1371,7 @@ class ZenduSearchBoxComponent {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSearchBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduSearchBoxComponent, isStandalone: false, selector: "zen-search-box", inputs: { text: "text", delay: "delay", autoFocus: "autoFocus", disabled: "disabled", placeholder: "placeholder" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div class=\"search-box-component\"\n  [class.has-text]=\"text\">\n  <zen-input [(ngModel)]=\"text\"\n    [placeholder]=\"placeholder | translate\"\n    [disabled]=\"disabled\"\n    leadingIcon=\"search\"\n    autocomplete=\"off\"\n    (ngModelChange)=\"onChange()\">\n  </zen-input>\n  @if (text) {\n    <i class=\"material-icons close-icon\"\n      (mousedown)=\"$event.stopPropagation()\"\n    (click)=\"clear(); $event.stopPropagation()\">close</i>\n  }\n</div>\n", styles: [".search-box-component{position:relative;width:100%}.search-box-component ::ng-deep .zen-input-field-wrapper{height:40px!important;min-height:auto!important;padding:8px 14px!important}.search-box-component.has-text ::ng-deep .zen-input-field{padding-right:24px}.search-box-component .close-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);color:#828282;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1}\n"], dependencies: [{ 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: ZenduInputComponent, selector: "zen-input", inputs: ["type", "variant", "placeholder", "label", "hintText", "leadingIcon", "helpIcon", "helpTooltip", "destructive", "errorMessage", "disabled", "required", "maxLength", "minLength", "pattern", "min", "max", "step", "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", "phoneChange", "validChange", "leadingIconClick"] }, { 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: ZenduSearchBoxComponent, isStandalone: false, selector: "zen-search-box", inputs: { text: "text", delay: "delay", autoFocus: "autoFocus", disabled: "disabled", placeholder: "placeholder" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div class=\"search-box-component\"\n  [class.has-text]=\"text\">\n  <zen-input [(ngModel)]=\"text\"\n    [placeholder]=\"placeholder | translate\"\n    [disabled]=\"disabled\"\n    leadingIcon=\"search\"\n    autocomplete=\"off\"\n    (ngModelChange)=\"onChange()\">\n  </zen-input>\n  @if (text) {\n    <i class=\"material-icons close-icon\"\n      (mousedown)=\"$event.stopPropagation()\"\n    (click)=\"clear(); $event.stopPropagation()\">close</i>\n  }\n</div>\n", styles: [".search-box-component{position:relative;width:100%}.search-box-component ::ng-deep .zen-input-field-wrapper{height:40px!important;min-height:auto!important;padding:8px 14px!important}.search-box-component.has-text ::ng-deep .zen-input-field{padding-right:24px}.search-box-component .close-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);color:#828282;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1}\n"], dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduInputComponent, selector: "zen-input", inputs: ["type", "variant", "placeholder", "label", "hintText", "leadingIcon", "helpIcon", "helpTooltip", "destructive", "errorMessage", "disabled", "required", "maxLength", "minLength", "pattern", "min", "max", "step", "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", "phoneChange", "validChange", "leadingIconClick"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSearchBoxComponent, decorators: [{
             type: Component,
@@ -1482,7 +1482,7 @@ class ZenduColumnConfigurationComponent {
             .includes(this.searchText.trim().toLowerCase()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduColumnConfigurationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduColumnConfigurationComponent, isStandalone: false, selector: "zen-column-configuration", inputs: { configuration: "configuration", defaultConfiguration: "defaultConfiguration", dropdownPosition: "dropdownPosition" }, outputs: { configurationChange: "configurationChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-config-component\">\n  <button class=\"button-basic button-icon\"\n    [ngClass]=\"{ 'active': showPanel }\"\n    (click)=\"togglePanel()\">\n    <i class=\"material-icons\">view_column</i>\n  </button>\n\n  @if (showPanel) {\n    <div\n      class=\"action-menu column-config-menu\"\n      [ngClass]=\"{'right': dropdownPosition === 'right'}\">\n      <div class=\"action-menu-header\">\n        <div class=\"title\">Manage Columns</div>\n        <zen-search-box [(text)]=\"searchText\"\n        (textChange)=\"filterItems()\"></zen-search-box>\n      </div>\n      <div class=\"action-menu-body dnd-container\"\n        cdkDropList\n        (cdkDropListDropped)=\"onDrop($event)\">\n        @for (config of filteredColumnsConfiguration; track config) {\n          <div\n            class=\"action-item-checkbox drag-item\"\n            cdkDrag>\n            <zen-checkbox class=\"flex-1\"\n              [(checked)]=\"config.isVisible\"\n            [label]=\"config.displayName\"></zen-checkbox>\n            <i class=\"material-icons drag-icon\">drag_handle</i>\n          </div>\n        }\n      </div>\n      <div class=\"action-menu-footer\">\n        <button (click)=\"reset()\"\n          type=\"button\"\n        class=\"button-stroked full-width\">Reset</button>\n        <button (click)=\"apply()\"\n          type=\"button\"\n        class=\"button-flat full-width\">Apply</button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".column-config-component{display:inline-block;position:relative}.column-config-component .column-config-menu{top:115%;width:300px}.column-config-component .column-config-menu.right{right:0}.column-config-component .column-config-menu .dnd-container{max-height:218px;overflow-y:auto}.column-config-component .column-config-menu .dnd-container .drag-item{justify-content:space-between}.column-config-component .column-config-menu .dnd-container .drag-item .drag-icon{cursor:move;color:#b8b9bc}.column-config-component .column-config-menu .dnd-container .dndDraggingSource{display:none}.column-config-component .column-config-menu .dnd-container .dndPlaceholder{background-color:#b8b9bc;display:block;min-height:40px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduColumnConfigurationComponent, isStandalone: false, selector: "zen-column-configuration", inputs: { configuration: "configuration", defaultConfiguration: "defaultConfiguration", dropdownPosition: "dropdownPosition" }, outputs: { configurationChange: "configurationChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-config-component\">\n  <button class=\"button-basic button-icon\"\n    [ngClass]=\"{ 'active': showPanel }\"\n    (click)=\"togglePanel()\">\n    <i class=\"material-icons\">view_column</i>\n  </button>\n\n  @if (showPanel) {\n    <div\n      class=\"action-menu column-config-menu\"\n      [ngClass]=\"{'right': dropdownPosition === 'right'}\">\n      <div class=\"action-menu-header\">\n        <div class=\"title\">Manage Columns</div>\n        <zen-search-box [(text)]=\"searchText\"\n        (textChange)=\"filterItems()\"></zen-search-box>\n      </div>\n      <div class=\"action-menu-body dnd-container\"\n        cdkDropList\n        (cdkDropListDropped)=\"onDrop($event)\">\n        @for (config of filteredColumnsConfiguration; track config) {\n          <div\n            class=\"action-item-checkbox drag-item\"\n            cdkDrag>\n            <zen-checkbox class=\"flex-1\"\n              [(checked)]=\"config.isVisible\"\n            [label]=\"config.displayName\"></zen-checkbox>\n            <i class=\"material-icons drag-icon\">drag_handle</i>\n          </div>\n        }\n      </div>\n      <div class=\"action-menu-footer\">\n        <button (click)=\"reset()\"\n          type=\"button\"\n        class=\"button-stroked full-width\">Reset</button>\n        <button (click)=\"apply()\"\n          type=\"button\"\n        class=\"button-flat full-width\">Apply</button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".column-config-component{display:inline-block;position:relative}.column-config-component .column-config-menu{top:115%;width:300px}.column-config-component .column-config-menu.right{right:0}.column-config-component .column-config-menu .dnd-container{max-height:218px;overflow-y:auto}.column-config-component .column-config-menu .dnd-container .drag-item{justify-content:space-between}.column-config-component .column-config-menu .dnd-container .drag-item .drag-icon{cursor:move;color:#b8b9bc}.column-config-component .column-config-menu .dnd-container .dndDraggingSource{display:none}.column-config-component .column-config-menu .dnd-container .dndPlaceholder{background-color:#b8b9bc;display:block;min-height:40px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduColumnConfigurationComponent, decorators: [{
             type: Component,
@@ -2104,7 +2104,7 @@ class ZenduDatepickerComponent {
         this.updateDays();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatepickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduDatepickerComponent, isStandalone: false, selector: "zen-datepicker", inputs: { date: "date", showTime: "showTime", showSeconds: "showSeconds", showDate: "showDate", parentContainer: "parentContainer", containerClass: "containerClass", minDate: "minDate", maxDate: "maxDate", boxDesign: "boxDesign", highlightDays: "highlightDays", autoConfirm: "autoConfirm", hint: "hint", highlightError: "highlightError", disabled: "disabled", readonly: "readonly", xPosition: "xPosition", yPosition: "yPosition", dispalyOverParent: "dispalyOverParent" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:scroll": "scroll()" } }, viewQueries: [{ propertyName: "dateMenu", first: true, predicate: ["dateMenu"], descendants: true }, { propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dateMenuTemplate", first: true, predicate: ["dateMenuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"date-component\">\n  <!-- Material design datepicker toggle -->\n  @if (!boxDesign) {\n    <button class=\"date-toggle\"\n      #triggerButton\n      [disabled]=\"disabled || readonly\"\n      (click)=\"togglePicker()\"\n      [ngClass]=\"{'active': isPickerVisible,'error': highlightError,'readonly': readonly}\">\n      <div class=\"date-content\">\n        <!-- date placeholder -->\n        @if (!date && showDate && !showTime) {\n          <div class=\"date-placeholder\"\n            >\n            {{\"Select Date\" | translate}}\n          </div>\n        }\n        @if (!date && showTime && !showDate) {\n          <div class=\"date-placeholder\"\n            >\n            {{\"Select Time\" | translate}}\n          </div>\n        }\n        @if (!date && showTime && showDate && showTime) {\n          <div class=\"date-placeholder\"\n            >\n            {{\"Select Date & Time\" | translate}}\n          </div>\n        }\n        <!-- Selected datetime -->\n        @if (date) {\n          <div>\n            @if (showDate) {\n              <span>{{formattedDate()}}</span>\n            }\n            @if (showTime) {\n              <span>&nbsp;{{formattedTime()}}</span>\n            }\n          </div>\n        }\n      </div>\n      <!-- Datepicker icon, depends on picker type -->\n      <zen-icon class=\"date-icon\"\n        [src]=\"getIcon()\"\n        [ngClass]=\"{'filled': date}\">\n      </zen-icon>\n    </button>\n  }\n\n  <!-- Box design datepicker toggle -->\n  @if (boxDesign) {\n    <button class=\"date-toggle new-box-design\"\n      #triggerButton\n      [disabled]=\"disabled || readonly\"\n      (click)=\"togglePicker()\"\n      [ngClass]=\"{'active': isPickerVisible,'error': highlightError,'readonly': readonly}\">\n      <!-- Datepicker icon, depends on picker type -->\n      <zen-icon class=\"date-icon\"\n        [src]=\"getIcon()\"\n        [ngClass]=\"{'filled': date}\">\n      </zen-icon>\n      <div class=\"date-content new-box-design\">\n        <!-- date placeholder -->\n        @if (!date && showDate && !showTime) {\n          <div class=\"date-placeholder\"\n            >\n            {{\"Select Date\" | translate}}\n          </div>\n        }\n        @if (!date && showTime && !showDate) {\n          <div class=\"date-placeholder\"\n            >\n            {{\"Select Time\" | translate}}\n          </div>\n        }\n        @if (!date && showTime && showDate && showTime) {\n          <div class=\"date-placeholder\"\n            >\n            {{\"Select Date & Time\" | translate}}\n          </div>\n        }\n        <!-- Selected datetime -->\n        @if (date) {\n          <div>\n            @if (showDate) {\n              <span>{{formattedDate()}}</span>\n            }\n            @if (showTime) {\n              <span>&nbsp;{{formattedTime()}}</span>\n            }\n          </div>\n        }\n      </div>\n    </button>\n  }\n\n  <!-- Datepicker popup -->\n  <ng-container *ngTemplateOutlet=\"dateMenuTemplate\">\n  </ng-container>\n\n  <ng-template #dateMenuTemplate>\n    @if (isPickerVisible) {\n      <div #dateMenu\n        class=\"date-menu\"\n        [ngClass]=\"{ 'right': right, 'bottom': bottom }\">\n        <div class=\"date-modal\">\n          @if (showDate) {\n            <div class=\"days-toolbar\">\n              <i (click)=\"prevMonth()\"\n              class=\"material-icons\">navigate_before</i>\n              <span class=\"title\"\n              (click)=\"showMonthPicker()\">{{daysTitle}}</span>\n              <i (click)=\"nextMonth()\"\n              class=\"material-icons\">navigate_next</i>\n            </div>\n            <div class=\"days-container\">\n              <div class=\"week-days\">\n                @for (weekDay of weekDays; track weekDay) {\n                  <div\n                    class=\"week-day\">\n                    {{weekDay | translate}}\n                  </div>\n                }\n              </div>\n              @for (row of dayRows; track row) {\n                <div\n                  class=\"day-row\">\n                  @for (day of row.days; track day) {\n                    <div\n                      (click)=\"selectDay(day)\"\n                      class=\"day-item\"\n                      [class.ousideRange]=\"day.isOutside\"\n                      [class.selected]=\"day.selected\"\n                      [class.disabledDay]=\"day.isDisabled\">\n                      {{day.lbl | translate}}\n                      @if (day.isHighlighted) {\n                        <zen-icon\n                          class=\"highlight-icon\"\n                        src=\"assets/ng-zenduit/icons/play.svg\"></zen-icon>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (showTime) {\n            <div\n              class=\"time-container\">\n              <div class=\"time-lbl\">\n                {{\"Select Time\" | translate}}:\n              </div>\n              <div class=\"time-picker\">\n                <div class=\"input-wrapper\">\n                  <div class=\"time-button\" (click)=\"hourUp()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                  </div>\n                  <input [(ngModel)]=\"hour\"\n                    (ngModelChange)=\"timeChanged()\" />\n                  <div class=\"time-button\" (click)=\"hourDown()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                  </div>\n                </div>\n                <span>:</span>\n                <div class=\"input-wrapper\">\n                  <div class=\"time-button\" (click)=\"minUp()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                  </div>\n                  <input [(ngModel)]=\"min\"\n                    (ngModelChange)=\"timeChanged()\" />\n                  <div class=\"time-button\" (click)=\"minDown()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                  </div>\n                </div>\n                @if (showSeconds) {\n                  <span>:</span>\n                }\n                @if (showSeconds) {\n                  <div class=\"input-wrapper\">\n                    <div class=\"time-button\" (click)=\"secUp()\">\n                      <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                    </div>\n                    <input [(ngModel)]=\"sec\"\n                      (ngModelChange)=\"timeChanged()\" />\n                    <div class=\"time-button\" (click)=\"secDown()\">\n                      <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                    </div>\n                  </div>\n                }\n                <div class=\"am-pm-picker\">\n                  <div class=\"main\"\n                    (click)=\"toggleTime()\">\n                    {{(isPM ? 'PM' : 'AM') | translate}}\n                  </div>\n                  <div class=\"sub\"\n                    (click)=\"toggleTime()\">\n                    {{(isPM ? 'AM' : 'PM') | translate}}\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n          @if (hint) {\n            <div class=\"hint\"\n              >\n              <div class=\"hint-description\">\n                {{hint.description | translate}}\n              </div>\n              <div class=\"hint-date\"\n                (click)=\"selectHintDate(hint.date)\">\n                {{hint.maskText | translate}}\n              </div>\n            </div>\n          }\n          @if (!autoConfirm || showTime) {\n            <div class=\"footer\"\n              >\n              @if (date) {\n                <button\n                  (click)=\"clear()\"\n                  class=\"button-stroked\">\n                  {{\"Clear\" | translate}}\n                </button>\n              }\n              @if (!date) {\n                <button\n                  (click)=\"cancel()\"\n                  class=\"button-stroked\">\n                  {{\"Cancel\" | translate}}\n                </button>\n              }\n              <button [disabled]=\"!_dateToSet\"\n                (click)=\"apply()\"\n                class=\"button-flat\">\n                {{\"Apply\" | translate}}\n              </button>\n            </div>\n          }\n          @if (monthPickerVisible) {\n            <div class=\"month-picker\">\n              <div class=\"days-toolbar\">\n                <i (click)=\"prevYear()\"\n                class=\"material-icons\">navigate_before</i>\n                <span class=\"title\"\n                (click)=\"showYearPicker()\">{{ currentSlot | date: 'yyyy' }}</span>\n                <i (click)=\"nextYear()\"\n                class=\"material-icons\">navigate_next</i>\n              </div>\n              <div class=\"months-container\">\n                @for (month of months; track month; let index = $index) {\n                  <div class=\"month-item\"\n                    (click)=\"selectMonth(index)\">\n                    {{ month | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n          @if (yearPickerVisible) {\n            <div class=\"month-picker\">\n              <div class=\"days-toolbar\">\n                <i (click)=\"prevYearGroup()\"\n                class=\"material-icons\">navigate_before</i>\n                <span class=\"title\"\n                (click)=\"showYearPicker()\">{{ currentSlot | date: 'yyyy' }}</span>\n                <i (click)=\"nextYearGroup()\"\n                class=\"material-icons\">navigate_next</i>\n              </div>\n              <div class=\"months-container\">\n                @for (year of years; track year) {\n                  <div class=\"month-item\"\n                    (click)=\"selectYear(year)\">\n                    {{ year }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n        <div class=\"date-modal-extra-space\"></div>\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: [".date-component{width:100%;position:relative}.date-component .date-toggle{display:flex;align-items:center;justify-content:space-between;position:relative;gap:9px;transition:.3s;width:100%;background:var(--color-white-primary, #ffffff);appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:1px solid var(--color-white-tint-4, #d6d6d8);padding:0 0 8px;font-size:14px;font-style:normal;font-weight:400;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.date-component .date-toggle.new-box-design{border:1px solid var(--color-white-tint-1, #f2f2f2);border-radius:2px;padding:6px 12px;gap:4px!important}.date-component .date-toggle:hover .date-placeholder{color:var(--color-grey-shade-2, #828282)}.date-component .date-toggle:hover .date-icon{background-color:var(--color-grey-shade-2, #828282)}.date-component .date-toggle:focus,.date-component .date-toggle.active{border-color:var(--color-blue-primary, #2188d9)}.date-component .date-toggle:focus .date-icon,.date-component .date-toggle.active .date-icon{background-color:var(--color-blue-primary, #2188d9)!important}.date-component .date-toggle[disabled]{cursor:not-allowed;border-color:var(--color-white-tint-3, #e0e0e0)}.date-component .date-toggle[disabled] .date-content{color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle[disabled] .date-icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.readonly{cursor:default;border-color:var(--color-white-tint-3, #e0e0e0)}.date-component .date-toggle.readonly .date-content{color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.readonly .date-icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.error{border-color:var(--color-error-primary, #dc3e33)}.date-component .date-toggle.error .date-icon{background-color:var(--color-error-primary, #dc3e33)!important}.date-component .date-toggle.error .date-content.new-box-design{color:var(--color-error-primary, #dc3e33)!important}.date-component .date-content{flex:1;font-size:16px;text-align:left;height:18px;min-width:30px;color:var(--color-grey-primary, #4f4f4f);white-space:nowrap;transition:.3s}.date-component .date-content .date-placeholder{transition:.3s;color:var(--color-white-tint-6, #bebebe)}.date-component .date-content.new-box-design{color:var(--color-grey-shade-2, #828282)}.date-component .date-icon{width:24px;height:24px;background-color:var(--color-white-tint-6, #bebebe);transition:.3s}.date-component .date-icon.filled{background-color:var(--color-grey-shade-2, #828282)}.date-component .date-menu{position:absolute;visibility:hidden}.date-component .time-container{display:flex;padding:16px 24px;justify-content:space-between;border-bottom:1px solid #f2f2f2;align-items:center}.date-component .time-container .time-lbl{font-weight:500;font-size:14px;color:var(--color-grey-primary, #4f4f4f);white-space:nowrap}.date-component .time-container .time-picker{display:flex;align-items:center;gap:7px}.date-component .time-container .time-picker .input-wrapper{display:flex;flex-direction:column;align-items:center}.date-component .time-container .time-picker .input-wrapper .time-button{display:flex;width:100%;align-items:center;justify-content:center;cursor:pointer;transition:.3s;border-radius:2px;overflow:hidden;height:18px}.date-component .time-container .time-picker .input-wrapper .time-button:hover{background-color:var(--color-blue-tint-1, #f4f9fd)}.date-component .time-container .time-picker .input-wrapper .time-button:hover zen-icon{background:var(--color-blue-primary, #2188d9)}.date-component .time-container .time-picker .input-wrapper zen-icon{background-color:var(--color-grey-shade-2, #828282);width:16px;height:16px;transition:.3s}.date-component .time-container .time-picker .input-wrapper input{width:30px;height:25px;text-align:center;border:1px solid var(--color-white-tint-1, #f2f2f2)}.date-component .time-container .time-picker .input-wrapper input:focus{outline:none;border-color:var(--color-blue-primary, #2188d9)}.date-component .time-container .time-picker .input-wrapper input{font-weight:400;font-size:14px;color:var(--color-grey-primary, #4f4f4f);border-radius:2px}.date-component .time-container .time-picker .am-pm-picker{font-weight:400;font-size:14px;padding-top:18px;cursor:pointer}.date-component .time-container .time-picker .am-pm-picker .main{color:var(--color-grey-primary, #4f4f4f)}.date-component .time-container .time-picker .am-pm-picker .sub{color:var(--color-white-tint-4, #d6d6d8)}.date-component .hint{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px 24px;border-bottom:1px solid #ECECED;font-style:normal;font-weight:400;font-size:14px;line-height:130%;color:#4f4f4f}.date-component .hint .hint-date{cursor:pointer;text-decoration-line:underline}.date-component .footer{display:flex;justify-content:end;gap:16px;padding:16px 24px}.date-component .month-picker{position:absolute;inset:0;background:#fff}.date-component .month-picker .months-container{display:flex;flex-wrap:wrap;justify-content:space-between;padding:10px 20px}.date-component .month-picker .months-container .month-item{display:inline-flex;align-items:center;justify-content:center;height:50px;width:30%;cursor:pointer;color:var(--color-grey-shade-2, #828282);border-radius:4px}.date-component .month-picker .months-container .month-item:hover{color:#fff;background-color:var(--color-blue-primary, #2188d9)}.date-component .right{right:0}.date-component .bottom{bottom:42px}.date-menu{width:320px;background:transparent;z-index:1200}.date-menu .date-modal{border-radius:8px;width:320px;overflow-y:auto;white-space:initial;background:#fff;box-shadow:0 2px 4px -1px #00000008,0 4px 5px #0000003d,0 1px 10px #0000001a}.date-menu .date-modal-extra-space{height:10px;margin:0 0 -10px;background:transparent}.date-menu .days-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 34px}.date-menu .days-toolbar .material-icons{color:#333;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none}.date-menu .days-toolbar .title{font-size:14px;font-weight:500;color:var(--color-grey-primary, #4f4f4f);cursor:pointer}.date-menu .days-container{border-bottom:1px solid #f2f2f2;padding:0 24px}.date-menu .days-container .week-days{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--color-grey-primary, #4f4f4f);font-weight:500;margin-bottom:8px;cursor:default}.date-menu .days-container .week-days .week-day{width:39px;text-align:center}.date-menu .days-container .day-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:400;color:var(--color-grey-primary, #4f4f4f)}.date-menu .days-container .day-row .day-item{position:relative;width:39px;height:39px;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:4px}.date-menu .days-container .day-row .day-item .highlight-icon{position:absolute;right:0;height:14px;width:14px;background-color:#5cbb3a}.date-menu .days-container .day-row .day-item:hover{background:var(--color-blue-tint-1, #f4f9fd);color:var(--color-blue-primary, #2188d9)}.date-menu .days-container .day-row .day-item.selected{background:var(--color-primary, #2188d9);color:#fff}.date-menu .days-container .day-row .day-item.selected .highlight-icon{background-color:#fff}.date-menu .days-container .day-row .day-item.ousideRange{color:#b8b9bc}.date-menu .days-container .day-row .day-item.disabledDay{color:#b8b9bc;cursor:not-allowed!important}.date-menu .footer{display:flex;justify-content:end;gap:16px;padding:16px 24px}::ng-deep .custom-backdrop{position:absolute;top:0;left:0;width:100vw;height:100vh}::ng-deep .cdk-overlay-pane.custom-overlay{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { 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: ZenduDatepickerComponent, isStandalone: false, selector: "zen-datepicker", inputs: { date: "date", showTime: "showTime", showSeconds: "showSeconds", showDate: "showDate", parentContainer: "parentContainer", containerClass: "containerClass", minDate: "minDate", maxDate: "maxDate", boxDesign: "boxDesign", highlightDays: "highlightDays", autoConfirm: "autoConfirm", hint: "hint", highlightError: "highlightError", disabled: "disabled", readonly: "readonly", xPosition: "xPosition", yPosition: "yPosition", dispalyOverParent: "dispalyOverParent" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:scroll": "scroll()" } }, viewQueries: [{ propertyName: "dateMenu", first: true, predicate: ["dateMenu"], descendants: true }, { propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dateMenuTemplate", first: true, predicate: ["dateMenuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"date-component\">\n  <!-- Material design datepicker toggle -->\n  @if (!boxDesign) {\n    <button class=\"date-toggle\"\n      #triggerButton\n      [disabled]=\"disabled || readonly\"\n      (click)=\"togglePicker()\"\n      [ngClass]=\"{'active': isPickerVisible,'error': highlightError,'readonly': readonly}\">\n      <div class=\"date-content\">\n        <!-- date placeholder -->\n        @if (!date && showDate && !showTime) {\n          <div class=\"date-placeholder\"\n            >\n            {{\"Select Date\" | translate}}\n          </div>\n        }\n        @if (!date && showTime && !showDate) {\n          <div class=\"date-placeholder\"\n            >\n            {{\"Select Time\" | translate}}\n          </div>\n        }\n        @if (!date && showTime && showDate && showTime) {\n          <div class=\"date-placeholder\"\n            >\n            {{\"Select Date & Time\" | translate}}\n          </div>\n        }\n        <!-- Selected datetime -->\n        @if (date) {\n          <div>\n            @if (showDate) {\n              <span>{{formattedDate()}}</span>\n            }\n            @if (showTime) {\n              <span>&nbsp;{{formattedTime()}}</span>\n            }\n          </div>\n        }\n      </div>\n      <!-- Datepicker icon, depends on picker type -->\n      <zen-icon class=\"date-icon\"\n        [src]=\"getIcon()\"\n        [ngClass]=\"{'filled': date}\">\n      </zen-icon>\n    </button>\n  }\n\n  <!-- Box design datepicker toggle -->\n  @if (boxDesign) {\n    <button class=\"date-toggle new-box-design\"\n      #triggerButton\n      [disabled]=\"disabled || readonly\"\n      (click)=\"togglePicker()\"\n      [ngClass]=\"{'active': isPickerVisible,'error': highlightError,'readonly': readonly}\">\n      <!-- Datepicker icon, depends on picker type -->\n      <zen-icon class=\"date-icon\"\n        [src]=\"getIcon()\"\n        [ngClass]=\"{'filled': date}\">\n      </zen-icon>\n      <div class=\"date-content new-box-design\">\n        <!-- date placeholder -->\n        @if (!date && showDate && !showTime) {\n          <div class=\"date-placeholder\"\n            >\n            {{\"Select Date\" | translate}}\n          </div>\n        }\n        @if (!date && showTime && !showDate) {\n          <div class=\"date-placeholder\"\n            >\n            {{\"Select Time\" | translate}}\n          </div>\n        }\n        @if (!date && showTime && showDate && showTime) {\n          <div class=\"date-placeholder\"\n            >\n            {{\"Select Date & Time\" | translate}}\n          </div>\n        }\n        <!-- Selected datetime -->\n        @if (date) {\n          <div>\n            @if (showDate) {\n              <span>{{formattedDate()}}</span>\n            }\n            @if (showTime) {\n              <span>&nbsp;{{formattedTime()}}</span>\n            }\n          </div>\n        }\n      </div>\n    </button>\n  }\n\n  <!-- Datepicker popup -->\n  <ng-container *ngTemplateOutlet=\"dateMenuTemplate\">\n  </ng-container>\n\n  <ng-template #dateMenuTemplate>\n    @if (isPickerVisible) {\n      <div #dateMenu\n        class=\"date-menu\"\n        [ngClass]=\"{ 'right': right, 'bottom': bottom }\">\n        <div class=\"date-modal\">\n          @if (showDate) {\n            <div class=\"days-toolbar\">\n              <i (click)=\"prevMonth()\"\n              class=\"material-icons\">navigate_before</i>\n              <span class=\"title\"\n              (click)=\"showMonthPicker()\">{{daysTitle}}</span>\n              <i (click)=\"nextMonth()\"\n              class=\"material-icons\">navigate_next</i>\n            </div>\n            <div class=\"days-container\">\n              <div class=\"week-days\">\n                @for (weekDay of weekDays; track weekDay) {\n                  <div\n                    class=\"week-day\">\n                    {{weekDay | translate}}\n                  </div>\n                }\n              </div>\n              @for (row of dayRows; track row) {\n                <div\n                  class=\"day-row\">\n                  @for (day of row.days; track day) {\n                    <div\n                      (click)=\"selectDay(day)\"\n                      class=\"day-item\"\n                      [class.ousideRange]=\"day.isOutside\"\n                      [class.selected]=\"day.selected\"\n                      [class.disabledDay]=\"day.isDisabled\">\n                      {{day.lbl | translate}}\n                      @if (day.isHighlighted) {\n                        <zen-icon\n                          class=\"highlight-icon\"\n                        src=\"assets/ng-zenduit/icons/play.svg\"></zen-icon>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (showTime) {\n            <div\n              class=\"time-container\">\n              <div class=\"time-lbl\">\n                {{\"Select Time\" | translate}}:\n              </div>\n              <div class=\"time-picker\">\n                <div class=\"input-wrapper\">\n                  <div class=\"time-button\" (click)=\"hourUp()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                  </div>\n                  <input [(ngModel)]=\"hour\"\n                    (ngModelChange)=\"timeChanged()\" />\n                  <div class=\"time-button\" (click)=\"hourDown()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                  </div>\n                </div>\n                <span>:</span>\n                <div class=\"input-wrapper\">\n                  <div class=\"time-button\" (click)=\"minUp()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                  </div>\n                  <input [(ngModel)]=\"min\"\n                    (ngModelChange)=\"timeChanged()\" />\n                  <div class=\"time-button\" (click)=\"minDown()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                  </div>\n                </div>\n                @if (showSeconds) {\n                  <span>:</span>\n                }\n                @if (showSeconds) {\n                  <div class=\"input-wrapper\">\n                    <div class=\"time-button\" (click)=\"secUp()\">\n                      <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                    </div>\n                    <input [(ngModel)]=\"sec\"\n                      (ngModelChange)=\"timeChanged()\" />\n                    <div class=\"time-button\" (click)=\"secDown()\">\n                      <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                    </div>\n                  </div>\n                }\n                <div class=\"am-pm-picker\">\n                  <div class=\"main\"\n                    (click)=\"toggleTime()\">\n                    {{(isPM ? 'PM' : 'AM') | translate}}\n                  </div>\n                  <div class=\"sub\"\n                    (click)=\"toggleTime()\">\n                    {{(isPM ? 'AM' : 'PM') | translate}}\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n          @if (hint) {\n            <div class=\"hint\"\n              >\n              <div class=\"hint-description\">\n                {{hint.description | translate}}\n              </div>\n              <div class=\"hint-date\"\n                (click)=\"selectHintDate(hint.date)\">\n                {{hint.maskText | translate}}\n              </div>\n            </div>\n          }\n          @if (!autoConfirm || showTime) {\n            <div class=\"footer\"\n              >\n              @if (date) {\n                <button\n                  (click)=\"clear()\"\n                  class=\"button-stroked\">\n                  {{\"Clear\" | translate}}\n                </button>\n              }\n              @if (!date) {\n                <button\n                  (click)=\"cancel()\"\n                  class=\"button-stroked\">\n                  {{\"Cancel\" | translate}}\n                </button>\n              }\n              <button [disabled]=\"!_dateToSet\"\n                (click)=\"apply()\"\n                class=\"button-flat\">\n                {{\"Apply\" | translate}}\n              </button>\n            </div>\n          }\n          @if (monthPickerVisible) {\n            <div class=\"month-picker\">\n              <div class=\"days-toolbar\">\n                <i (click)=\"prevYear()\"\n                class=\"material-icons\">navigate_before</i>\n                <span class=\"title\"\n                (click)=\"showYearPicker()\">{{ currentSlot | date: 'yyyy' }}</span>\n                <i (click)=\"nextYear()\"\n                class=\"material-icons\">navigate_next</i>\n              </div>\n              <div class=\"months-container\">\n                @for (month of months; track month; let index = $index) {\n                  <div class=\"month-item\"\n                    (click)=\"selectMonth(index)\">\n                    {{ month | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n          @if (yearPickerVisible) {\n            <div class=\"month-picker\">\n              <div class=\"days-toolbar\">\n                <i (click)=\"prevYearGroup()\"\n                class=\"material-icons\">navigate_before</i>\n                <span class=\"title\"\n                (click)=\"showYearPicker()\">{{ currentSlot | date: 'yyyy' }}</span>\n                <i (click)=\"nextYearGroup()\"\n                class=\"material-icons\">navigate_next</i>\n              </div>\n              <div class=\"months-container\">\n                @for (year of years; track year) {\n                  <div class=\"month-item\"\n                    (click)=\"selectYear(year)\">\n                    {{ year }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n        <div class=\"date-modal-extra-space\"></div>\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: [".date-component{width:100%;position:relative}.date-component .date-toggle{display:flex;align-items:center;justify-content:space-between;position:relative;gap:9px;transition:.3s;width:100%;background:var(--color-white-primary, #ffffff);appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:1px solid var(--color-white-tint-4, #d6d6d8);padding:0 0 8px;font-size:14px;font-style:normal;font-weight:400;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.date-component .date-toggle.new-box-design{border:1px solid var(--color-white-tint-1, #f2f2f2);border-radius:2px;padding:6px 12px;gap:4px!important}.date-component .date-toggle:hover .date-placeholder{color:var(--color-grey-shade-2, #828282)}.date-component .date-toggle:hover .date-icon{background-color:var(--color-grey-shade-2, #828282)}.date-component .date-toggle:focus,.date-component .date-toggle.active{border-color:var(--color-blue-primary, #2188d9)}.date-component .date-toggle:focus .date-icon,.date-component .date-toggle.active .date-icon{background-color:var(--color-blue-primary, #2188d9)!important}.date-component .date-toggle[disabled]{cursor:not-allowed;border-color:var(--color-white-tint-3, #e0e0e0)}.date-component .date-toggle[disabled] .date-content{color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle[disabled] .date-icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.readonly{cursor:default;border-color:var(--color-white-tint-3, #e0e0e0)}.date-component .date-toggle.readonly .date-content{color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.readonly .date-icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.error{border-color:var(--color-error-primary, #dc3e33)}.date-component .date-toggle.error .date-icon{background-color:var(--color-error-primary, #dc3e33)!important}.date-component .date-toggle.error .date-content.new-box-design{color:var(--color-error-primary, #dc3e33)!important}.date-component .date-content{flex:1;font-size:16px;text-align:left;height:18px;min-width:30px;color:var(--color-grey-primary, #4f4f4f);white-space:nowrap;transition:.3s}.date-component .date-content .date-placeholder{transition:.3s;color:var(--color-white-tint-6, #bebebe)}.date-component .date-content.new-box-design{color:var(--color-grey-shade-2, #828282)}.date-component .date-icon{width:24px;height:24px;background-color:var(--color-white-tint-6, #bebebe);transition:.3s}.date-component .date-icon.filled{background-color:var(--color-grey-shade-2, #828282)}.date-component .date-menu{position:absolute;visibility:hidden}.date-component .time-container{display:flex;padding:16px 24px;justify-content:space-between;border-bottom:1px solid #f2f2f2;align-items:center}.date-component .time-container .time-lbl{font-weight:500;font-size:14px;color:var(--color-grey-primary, #4f4f4f);white-space:nowrap}.date-component .time-container .time-picker{display:flex;align-items:center;gap:7px}.date-component .time-container .time-picker .input-wrapper{display:flex;flex-direction:column;align-items:center}.date-component .time-container .time-picker .input-wrapper .time-button{display:flex;width:100%;align-items:center;justify-content:center;cursor:pointer;transition:.3s;border-radius:2px;overflow:hidden;height:18px}.date-component .time-container .time-picker .input-wrapper .time-button:hover{background-color:var(--color-blue-tint-1, #f4f9fd)}.date-component .time-container .time-picker .input-wrapper .time-button:hover zen-icon{background:var(--color-blue-primary, #2188d9)}.date-component .time-container .time-picker .input-wrapper zen-icon{background-color:var(--color-grey-shade-2, #828282);width:16px;height:16px;transition:.3s}.date-component .time-container .time-picker .input-wrapper input{width:30px;height:25px;text-align:center;border:1px solid var(--color-white-tint-1, #f2f2f2)}.date-component .time-container .time-picker .input-wrapper input:focus{outline:none;border-color:var(--color-blue-primary, #2188d9)}.date-component .time-container .time-picker .input-wrapper input{font-weight:400;font-size:14px;color:var(--color-grey-primary, #4f4f4f);border-radius:2px}.date-component .time-container .time-picker .am-pm-picker{font-weight:400;font-size:14px;padding-top:18px;cursor:pointer}.date-component .time-container .time-picker .am-pm-picker .main{color:var(--color-grey-primary, #4f4f4f)}.date-component .time-container .time-picker .am-pm-picker .sub{color:var(--color-white-tint-4, #d6d6d8)}.date-component .hint{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px 24px;border-bottom:1px solid #ECECED;font-style:normal;font-weight:400;font-size:14px;line-height:130%;color:#4f4f4f}.date-component .hint .hint-date{cursor:pointer;text-decoration-line:underline}.date-component .footer{display:flex;justify-content:end;gap:16px;padding:16px 24px}.date-component .month-picker{position:absolute;inset:0;background:#fff}.date-component .month-picker .months-container{display:flex;flex-wrap:wrap;justify-content:space-between;padding:10px 20px}.date-component .month-picker .months-container .month-item{display:inline-flex;align-items:center;justify-content:center;height:50px;width:30%;cursor:pointer;color:var(--color-grey-shade-2, #828282);border-radius:4px}.date-component .month-picker .months-container .month-item:hover{color:#fff;background-color:var(--color-blue-primary, #2188d9)}.date-component .right{right:0}.date-component .bottom{bottom:42px}.date-menu{width:320px;background:transparent;z-index:1200}.date-menu .date-modal{border-radius:8px;width:320px;overflow-y:auto;white-space:initial;background:#fff;box-shadow:0 2px 4px -1px #00000008,0 4px 5px #0000003d,0 1px 10px #0000001a}.date-menu .date-modal-extra-space{height:10px;margin:0 0 -10px;background:transparent}.date-menu .days-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 34px}.date-menu .days-toolbar .material-icons{color:#333;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none}.date-menu .days-toolbar .title{font-size:14px;font-weight:500;color:var(--color-grey-primary, #4f4f4f);cursor:pointer}.date-menu .days-container{border-bottom:1px solid #f2f2f2;padding:0 24px}.date-menu .days-container .week-days{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--color-grey-primary, #4f4f4f);font-weight:500;margin-bottom:8px;cursor:default}.date-menu .days-container .week-days .week-day{width:39px;text-align:center}.date-menu .days-container .day-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:400;color:var(--color-grey-primary, #4f4f4f)}.date-menu .days-container .day-row .day-item{position:relative;width:39px;height:39px;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:4px}.date-menu .days-container .day-row .day-item .highlight-icon{position:absolute;right:0;height:14px;width:14px;background-color:#5cbb3a}.date-menu .days-container .day-row .day-item:hover{background:var(--color-blue-tint-1, #f4f9fd);color:var(--color-blue-primary, #2188d9)}.date-menu .days-container .day-row .day-item.selected{background:var(--color-primary, #2188d9);color:#fff}.date-menu .days-container .day-row .day-item.selected .highlight-icon{background-color:#fff}.date-menu .days-container .day-row .day-item.ousideRange{color:#b8b9bc}.date-menu .days-container .day-row .day-item.disabledDay{color:#b8b9bc;cursor:not-allowed!important}.date-menu .footer{display:flex;justify-content:end;gap:16px;padding:16px 24px}::ng-deep .custom-backdrop{position:absolute;top:0;left:0;width:100vw;height:100vh}::ng-deep .cdk-overlay-pane.custom-overlay{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatepickerComponent, decorators: [{
             type: Component,
@@ -2842,19 +2842,21 @@ class ZenduDatePickerDropdownComponent {
         return !!(this.startDate && this.endDate);
     }
     get formattedSelectedDate() {
-        return this._selectedDate ? this.formatDate(this._selectedDate) : '';
+        // Date only — the time is edited in the time-picker section below, so
+        // repeating it here would overflow the narrow input box.
+        return this._selectedDate ? this.formatDate(this._selectedDate, false) : '';
     }
     get formattedStartDate() {
-        return this._selectedStart ? this.formatDate(this._selectedStart) : '';
+        return this._selectedStart ? this.formatDate(this._selectedStart, false) : '';
     }
     get formattedEndDate() {
-        return this._selectedEnd ? this.formatDate(this._selectedEnd) : '';
+        return this._selectedEnd ? this.formatDate(this._selectedEnd, false) : '';
     }
-    formatDate(date) {
+    formatDate(date, includeTime = true) {
         const enMonth = moment(date).format('MMM');
         const translatedMonth = this._translate.instant(enMonth);
         let formatted = moment(date).format('MMM D, YYYY').replace(enMonth, translatedMonth);
-        if (this.timePicker) {
+        if (includeTime && this.timePicker) {
             formatted += ' ' + this.formatTime(date);
         }
         return formatted;
@@ -2924,17 +2926,18 @@ class ZenduDatePickerDropdownComponent {
         // dual calendars have laid out.
         const rect = anchorEl.getBoundingClientRect();
         const viewportHeight = window.innerHeight;
+        const cb = this.containingBlockRect();
         const spaceBelow = viewportHeight - rect.bottom - PANEL_GAP - VIEWPORT_MARGIN;
         const spaceAbove = rect.top - PANEL_GAP - VIEWPORT_MARGIN;
         this.dropdownStyle = spaceBelow >= spaceAbove
             ? {
-                left: `${rect.left}px`,
-                top: `${rect.bottom + PANEL_GAP}px`,
+                left: `${rect.left - cb.left}px`,
+                top: `${rect.bottom + PANEL_GAP - cb.top}px`,
                 'max-height': `${Math.max(MIN_PANEL_HEIGHT, spaceBelow)}px`
             }
             : {
-                left: `${rect.left}px`,
-                bottom: `${viewportHeight - rect.top + PANEL_GAP}px`,
+                left: `${rect.left - cb.left}px`,
+                bottom: `${cb.bottom - rect.top + PANEL_GAP}px`,
                 'max-height': `${Math.max(MIN_PANEL_HEIGHT, spaceAbove)}px`
             };
         // Measure AFTER the calendars render. The dual-calendar range layout is
@@ -2962,22 +2965,54 @@ class ZenduDatePickerDropdownComponent {
         const panelHeight = panelEl.scrollHeight;
         const spaceBelow = viewportHeight - rect.bottom - PANEL_GAP - VIEWPORT_MARGIN;
         const spaceAbove = rect.top - PANEL_GAP - VIEWPORT_MARGIN;
+        const cb = this.containingBlockRect();
         const style = {};
-        // Horizontal: keep the panel fully on-screen.
-        style['left'] = `${Math.max(VIEWPORT_MARGIN, Math.min(rect.left, viewportWidth - panelWidth - VIEWPORT_MARGIN))}px`;
+        // Horizontal: keep the panel fully on-screen (computed in viewport
+        // space), then offset into the panel's containing block.
+        const desiredLeft = Math.max(VIEWPORT_MARGIN, Math.min(rect.left, viewportWidth - panelWidth - VIEWPORT_MARGIN));
+        style['left'] = `${desiredLeft - cb.left}px`;
         // Vertical: open below when it fits or there is more room below,
         // otherwise above. Always cap max-height to the available space so the
         // footer stays reachable via the panel's internal scroll.
         if (panelHeight <= spaceBelow || spaceBelow >= spaceAbove) {
-            style['top'] = `${rect.bottom + PANEL_GAP}px`;
+            style['top'] = `${rect.bottom + PANEL_GAP - cb.top}px`;
             style['max-height'] = `${Math.max(MIN_PANEL_HEIGHT, spaceBelow)}px`;
         }
         else {
-            style['bottom'] = `${viewportHeight - rect.top + PANEL_GAP}px`;
+            style['bottom'] = `${cb.bottom - rect.top + PANEL_GAP}px`;
             style['max-height'] = `${Math.max(MIN_PANEL_HEIGHT, spaceAbove)}px`;
         }
         this.dropdownStyle = style;
     }
+    /**
+     * The panel is `position: fixed`, so its coordinates are viewport-relative
+     * ONLY when no ancestor establishes a containing block. Inside a CDK
+     * overlay pane (e.g. when this picker sits in a `zen-filter`), the pane is
+     * `transform`ed and becomes the containing block, so `fixed` is measured
+     * from the pane, not the viewport — which detaches the panel from its
+     * trigger. Return that containing block's viewport rect so the
+     * viewport-space coordinates above can be offset into the panel's actual
+     * coordinate space; falls back to the viewport when nothing transforms.
+     */
+    containingBlockRect() {
+        let node = this._element.nativeElement.parentElement;
+        while (node) {
+            const s = getComputedStyle(node);
+            const establishesContainingBlock = (s.transform && s.transform !== 'none') ||
+                (s.perspective && s.perspective !== 'none') ||
+                (s.filter && s.filter !== 'none') ||
+                s.willChange === 'transform' ||
+                (s.contain
+                    ? /\b(paint|layout|strict|content)\b/.test(s.contain)
+                    : false);
+            if (establishesContainingBlock) {
+                const r = node.getBoundingClientRect();
+                return { left: r.left, top: r.top, bottom: r.bottom };
+            }
+            node = node.parentElement;
+        }
+        return { left: 0, top: 0, bottom: window.innerHeight };
+    }
     /**
      * Anchor to the trigger button, or to the host element when the trigger is
      * hidden (an external control drives the popup).
@@ -3603,16 +3638,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
             }] } });
 
 class ZenduFilterComponent {
-    constructor(renderer) {
-        this.renderer = renderer;
+    set isVisible(open) {
+        open = !!open;
+        if (open === this._isVisible) {
+            return;
+        }
+        this._isVisible = open;
+        if (open) {
+            this._openOverlay();
+        }
+        else {
+            this._closeOverlay();
+        }
+    }
+    get isVisible() {
+        return this._isVisible;
+    }
+    constructor(overlay, viewContainerRef) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
         this.config = { items: [] };
         this.position = 'right';
         this.resetBehavior = 'clear';
         this.filterChange = new EventEmitter();
-        this.isVisible = false;
+        /**
+         * Open/closed state and the single source of truth for the panel. Assigning it
+         * attaches/detaches the CDK overlay panel, so every existing open/close path
+         * (toggle, hide, apply, external `[(isVisible)]` binding) stays correct without
+         * touching each call site — mirrors zen-select's `isOpen`.
+         */
+        this._isVisible = false;
         this.isVisibleChange = new EventEmitter();
         this.customTrigger = false;
         this.triggerVariant = 'default';
+        /**
+         * @deprecated Obsolete since the panel moved to the CDK overlay
+         * (ZenduOverlayService), which owns positioning. Kept for back-compat so
+         * existing `[customPosition]` bindings keep compiling; it no longer has any
+         * effect. Use `position` to steer the preferred side.
+         */
         this.customPosition = 'fixed';
         this.searchText = '';
         // Forces the trigger highlight on. Set internally by updateAppliedState() and
@@ -3644,13 +3708,94 @@ class ZenduFilterComponent {
         // updateAppliedState() and on config init — never during live editing.
         this.appliedCount = 0;
         this.hasActiveFilters = false;
-        this.menuLeft = '0px';
-        this.menuRight = '0px';
-        this.menuTop = '0px';
-        this.menuBottom = '0px';
-        this.menuMaxHeight = 'none';
         this.errorMessage = [];
         this.selectedDateRangeOptions = {};
+        this._panelRef = null;
+    }
+    ngAfterViewInit() {
+        // Honour an initial `[isVisible]="true"` binding: the input setter may have
+        // run before the view (and thus the trigger/panel refs) existed, so open
+        // here once they're available.
+        if (this._isVisible && !this._panelRef) {
+            this._openOverlay();
+        }
+    }
+    ngOnDestroy() {
+        this._closeOverlay();
+    }
+    /**
+     * Open the filter panel in a CDK overlay anchored to the trigger. The overlay
+     * owns viewport-aware positioning (flip up/down, push into view, clamp +
+     * internal scroll) and renders at the body level, so the panel is never
+     * clipped by an ancestor's `overflow` or by the viewport edge. Mirrors
+     * zen-select's `_openOverlay`.
+     */
+    _openOverlay() {
+        if (this._panelRef || !this._componentElement || !this.filterPanel) {
+            return;
+        }
+        this._panelRef = this.overlay.openConnectedPanel({
+            origin: this._componentElement,
+            content: this.filterPanel,
+            viewContainerRef: this.viewContainerRef,
+            // The panel has its own fixed width (.filter-menu); let it size to content
+            // and the overlay's flexible dimensions clamp it on small viewports.
+            width: 'auto',
+            scrollBehavior: 'reposition',
+            positions: this._buildConnectedPositions(),
+        });
+        // Outside click / Escape / detach → close AND restore the last-applied
+        // filter (cancel-edit), matching the old outside-click behaviour. Closing
+        // via Apply/toggle goes through `_closeOverlay()` directly, which the
+        // service does not report as a close, so those paths never restore.
+        this._panelRef.closed.subscribe(() => {
+            this.hide();
+            this.restorePreviousApplied();
+        });
+        this.focusSearchBox();
+    }
+    _closeOverlay() {
+        this._panelRef?.close();
+        this._panelRef = null;
+    }
+    /**
+     * Map the `position` input ('left' | 'right' | 'top' | 'bottom' | 'auto', or
+     * combinations) to CDK connected positions in preference order. The requested
+     * side comes first; the remaining three are fallbacks so the panel always
+     * fits. 'left' aligns the panel's right edge to the trigger (opens leftward),
+     * 'right' aligns its left edge (opens rightward); 'auto' picks the side with
+     * more room. `withPush` + flexible dimensions still clamp into the viewport.
+     */
+    _buildConnectedPositions() {
+        const GAP = 4;
+        const rect = this._componentElement?.nativeElement.getBoundingClientRect();
+        const wantsTop = this.position.includes('top');
+        const wantsBottom = this.position.includes('bottom');
+        const openUp = wantsTop
+            ? true
+            : wantsBottom
+                ? false
+                : // 'auto' / unspecified: open up only when the trigger sits low.
+                    Boolean(rect && rect.top > window.innerHeight / 2);
+        const wantsLeft = this.position.includes('left');
+        const wantsRight = this.position.includes('right');
+        const alignEnd = wantsLeft
+            ? true
+            : wantsRight
+                ? false
+                : // 'auto' / unspecified: right-align (open leftward) only near the right edge.
+                    Boolean(rect && rect.left > window.innerWidth / 2);
+        const xPref = alignEnd ? 'end' : 'start';
+        const xAlt = alignEnd ? 'start' : 'end';
+        const below = (x) => ({
+            originX: x, originY: 'bottom', overlayX: x, overlayY: 'top', offsetY: GAP,
+        });
+        const above = (x) => ({
+            originX: x, originY: 'top', overlayX: x, overlayY: 'bottom', offsetY: -GAP,
+        });
+        return openUp
+            ? [above(xPref), above(xAlt), below(xPref), below(xAlt)]
+            : [below(xPref), below(xAlt), above(xPref), above(xAlt)];
     }
     ngOnChanges(changes) {
         if (changes.config && changes.config.currentValue) {
@@ -3692,10 +3837,6 @@ class ZenduFilterComponent {
             // recorded but never shown as checked.
             this.syncFromFilter(changes.filter.currentValue);
         }
-        if (changes.isVisible && changes.isVisible.currentValue) {
-            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
@@ -3727,59 +3868,21 @@ class ZenduFilterComponent {
         // facial-ai pages drive the trigger highlight that way).
         this.hasActiveFilters = this.isApplied || this.appliedCount > 0;
     }
-    outsideHandling(event) {
-        if (!this.isVisible) {
-            return;
-        }
-        const target = event.target;
-        if (!document.body.contains(target)) {
-            // element not in the DOM
-            return;
-        }
-        if (this._componentElement.nativeElement.contains(target)) {
-            return;
-        }
-        // hide the menu for outside click
-        this.hide();
-        // restore values
-        this.restorePreviousApplied();
-    }
-    windowSizeHandling() {
-        if (!this.isVisible) {
-            return;
-        }
-        this.updatePlacement(this.customPosition);
-    }
-    windowScroll() {
-        if (!this.isVisible) {
-            return;
-        }
-        this.updatePlacement(this.customPosition);
-    }
-    onWindowKeyDown(event) {
-        if (!this.isVisible) {
+    /**
+     * Focus the panel's search box when it opens. The panel renders in the overlay
+     * at body level, so it isn't reachable via `@ViewChild`; zen-search-box also
+     * self-focuses on init (`autoFocus`), and we nudge the rendered input directly
+     * as a fallback once the overlay has attached.
+     */
+    focusSearchBox() {
+        const panelEl = this._panelRef?.overlayRef.overlayElement;
+        if (!panelEl) {
             return;
         }
-        if (event.key === 'ArrowUp' ||
-            event.key === 'ArrowDown' ||
-            event.key === 'PageUp' ||
-            event.key === 'PageDown' ||
-            event.key === 'Home' ||
-            event.key === 'End') {
-            const target = event.target;
-            if (!document.body.contains(target)) {
-                return;
-            }
-            if (this._componentElement.nativeElement.contains(target) &&
-                !target.classList.contains('button-stroked')) {
-                return;
-            }
-            this.hide();
-            this.restorePreviousApplied();
-        }
-    }
-    focusSearchBox() {
-        this.searchBox.doFocus();
+        setTimeout(() => {
+            const input = panelEl.querySelector('input');
+            input?.focus();
+        });
     }
     isMenuIsVisible(item) {
         if (item.isLazyLoading) {
@@ -4301,9 +4404,9 @@ class ZenduFilterComponent {
         this.checkChanged(dsItem, item);
     }
     toggle() {
+        // Assigning isVisible opens/closes the overlay (and focuses the search box)
+        // via the setter; no manual placement/focus needed here.
         this.isVisible = !this.isVisible;
-        this.updatePlacement(this.customPosition);
-        this.focusSearchBox();
         if (this.isVisible) {
             this.resetLazyLoadingSources(true);
         }
@@ -4327,111 +4430,6 @@ class ZenduFilterComponent {
         }
         return true;
     }
-    updatePlacement(pos = 'fixed') {
-        const host = this._componentElement.nativeElement;
-        const container = host.querySelector('.menu-content');
-        if (!container)
-            return;
-        const rect = pos === 'fixed'
-            ? host.getBoundingClientRect()
-            : container.getBoundingClientRect();
-        const left = rect.left;
-        const right = rect.right;
-        // VIEWPORT_GAP: min space between the panel and the viewport edge.
-        // OPEN_GAP: space between the trigger and the panel when it opens (design guide).
-        const VIEWPORT_GAP = 16;
-        const OPEN_GAP = 12;
-        const hostRect = host.getBoundingClientRect();
-        if (pos === 'absolute') {
-            this.renderer.addClass(container, 'absolute');
-            this.renderer.removeStyle(container, 'inset');
-        }
-        else {
-            this.renderer.removeClass(container, 'absolute');
-        }
-        if (pos === 'fixed') {
-            if (this.position.includes('auto')) {
-                const horizontalPosition = this.getHorizontalPosition();
-                this.menuRight =
-                    horizontalPosition === 'left'
-                        ? `${window.innerWidth - right}px`
-                        : 'unset';
-                this.menuLeft = horizontalPosition === 'right' ? `${left}px` : 'unset';
-            }
-            else if (this.position.includes('left')) {
-                this.menuRight = `${window.innerWidth - right}px`;
-                this.menuLeft = 'unset';
-            }
-            else {
-                this.menuLeft = `${left}px`;
-                this.menuRight = 'unset';
-            }
-            // Anchor vertically, then cap max-height to the space available from that
-            // anchor to the opposite viewport edge (minus the gap). Measuring from the
-            // real panel anchor — not the trigger — keeps the bottom/top gap exact.
-            let openDownTopY = null;
-            let openUpBottomY = null;
-            if (this.position.includes('auto')) {
-                if (this.getVerticalPosition() === 'bottom') {
-                    openDownTopY = hostRect.bottom + OPEN_GAP;
-                }
-                else {
-                    openUpBottomY = hostRect.top - OPEN_GAP;
-                }
-            }
-            else if (this.position.includes('top')) {
-                openUpBottomY = hostRect.top - OPEN_GAP;
-            }
-            else {
-                openDownTopY = hostRect.bottom + OPEN_GAP;
-            }
-            if (openDownTopY !== null) {
-                this.menuTop = `${openDownTopY}px`;
-                this.menuBottom = 'unset';
-                this.menuMaxHeight = `${Math.max(160, window.innerHeight - openDownTopY - VIEWPORT_GAP)}px`;
-            }
-            else {
-                const bottomY = openUpBottomY ?? window.innerHeight;
-                this.menuTop = 'unset';
-                this.menuBottom = `${window.innerHeight - bottomY}px`;
-                this.menuMaxHeight = `${Math.max(160, bottomY - VIEWPORT_GAP)}px`;
-            }
-        }
-        else {
-            let verticalClass = '';
-            let horizontalClass = '';
-            if (this.position.includes('auto')) {
-                horizontalClass = this.getHorizontalPosition();
-                verticalClass = this.getVerticalPosition();
-            }
-            else {
-                horizontalClass = this.position.includes('left') ? 'left' : 'right';
-                verticalClass = this.position.includes('top') ? 'top' : 'bottom';
-            }
-            [
-                'dropdown-left',
-                'dropdown-right',
-                'dropdown-top',
-                'dropdown-bottom',
-            ].forEach((c) => this.renderer.removeClass(container, c));
-            this.renderer.addClass(container, `dropdown-${horizontalClass}`);
-            this.renderer.addClass(container, `dropdown-${verticalClass}`);
-            // Absolute panel opens OPEN_GAP from the trigger (dropdown margin); cap it
-            // the same way so it also keeps the 16px gap from the viewport edge.
-            this.menuMaxHeight =
-                verticalClass === 'top'
-                    ? `${Math.max(160, hostRect.top - OPEN_GAP - VIEWPORT_GAP)}px`
-                    : `${Math.max(160, window.innerHeight - (hostRect.bottom + OPEN_GAP) - VIEWPORT_GAP)}px`;
-        }
-    }
-    getVerticalPosition() {
-        const top = this._componentElement.nativeElement.getBoundingClientRect().top;
-        return top > window.innerHeight / 2 ? 'top' : 'bottom';
-    }
-    getHorizontalPosition() {
-        const left = this._componentElement.nativeElement.getBoundingClientRect().left;
-        return left > window.innerWidth / 2 ? 'left' : 'right';
-    }
     getDefaultDateRangeOptions() {
         return [
             {
@@ -4549,13 +4547,13 @@ 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", 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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", "label", "required", "size"], 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", "min", "max", "step", "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", "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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFilterComponent, deps: [{ token: ZenduOverlayService }, { token: i0.ViewContainerRef }], 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", 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" }, viewQueries: [{ propertyName: "_componentElement", first: true, predicate: ["mainComponent"], descendants: true }, { propertyName: "filterPanel", first: true, predicate: ["filterPanel"], 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  <!-- Filter panel (rendered into a CDK overlay via ZenduOverlayService;\n       positioning/flip/clamping is handled there, not with absolute CSS) -->\n  <ng-template #filterPanel>\n    <div class=\"filter-menu\"\n      [class.customTrigger]=\"customTrigger\">\n    <div class=\"filter-menu__header\">\n      <zen-search-box [(text)]=\"searchText\"\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  </ng-template>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filter-menu{width:400px;max-width:100%;white-space:initial;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}.filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filter-menu__body .menu-item.menu-item--multiselect,.filter-menu__body .menu-item.menu-item--radio{gap:0}.filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:first-child,.filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:first-child,.filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:first-child,.filter-menu__body .menu-item.menu-item--radio .action-item-radio:first-child{margin-top:0}.filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:last-child,.filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:last-child,.filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:last-child,.filter-menu__body .menu-item.menu-item--radio .action-item-radio:last-child{margin-bottom:0}.filter-menu__body .menu-item__content{padding-left:8px}.filter-menu__body .action-item,.filter-menu__body .action-item-checkbox,.filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filter-menu__body .action-item:focus-within,.filter-menu__body .action-item-checkbox:focus-within,.filter-menu__body .action-item-radio:focus-within{background:transparent}.filter-menu__body .action-item:hover{background:transparent}.filter-menu__body .action-item-checkbox,.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}.filter-menu__body .action-item-checkbox:hover,.filter-menu__body .action-item-radio:hover{background:#f9fafb}.filter-menu__body .action-item-checkbox ::ng-deep .checkbox-component,.filter-menu__body .action-item-radio ::ng-deep .radio-component{padding-top:10px;padding-bottom:10px}.filter-menu__body .action-item-checkbox:first-child,.filter-menu__body .action-item-radio:first-child{margin-top:-10px}.filter-menu__body .action-item-checkbox:last-child,.filter-menu__body .action-item-radio:last-child{margin-bottom:-4px}.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}.filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filter-menu__body .expander-item.expanded,.filter-menu__body .expander-item.active{background:transparent;color:#344054}.filter-menu__body .expander-item:hover{background:#f9fafb}.filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filter-menu__body .no-item,.filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filter-menu__body .select-all{font-weight:500}.filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filter-menu__body .number-range-row{display:flex;gap:16px}.filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filter-menu__body .toggle-row{justify-content:space-between;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .toggle-row zen-toggle{display:flex;align-items:center}.filter-menu__body .toggle-row:hover{background:#f9fafb}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled){background-color:#eaecf0}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled).zen-toggle--active{background-color:#105494}.filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.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}.filter-menu__body .section-title:hover{background:#f9fafb}.filter-menu__body .has-badge zen-checkbox{width:auto}.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox{background:#e3eefb;border-color:#136ab6}.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-checked,.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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", "label", "required", "size"], 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", "min", "max", "step", "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", "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 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: [{
+            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  <!-- Filter panel (rendered into a CDK overlay via ZenduOverlayService;\n       positioning/flip/clamping is handled there, not with absolute CSS) -->\n  <ng-template #filterPanel>\n    <div class=\"filter-menu\"\n      [class.customTrigger]=\"customTrigger\">\n    <div class=\"filter-menu__header\">\n      <zen-search-box [(text)]=\"searchText\"\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  </ng-template>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filter-menu{width:400px;max-width:100%;white-space:initial;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}.filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filter-menu__body .menu-item.menu-item--multiselect,.filter-menu__body .menu-item.menu-item--radio{gap:0}.filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:first-child,.filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:first-child,.filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:first-child,.filter-menu__body .menu-item.menu-item--radio .action-item-radio:first-child{margin-top:0}.filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:last-child,.filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:last-child,.filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:last-child,.filter-menu__body .menu-item.menu-item--radio .action-item-radio:last-child{margin-bottom:0}.filter-menu__body .menu-item__content{padding-left:8px}.filter-menu__body .action-item,.filter-menu__body .action-item-checkbox,.filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filter-menu__body .action-item:focus-within,.filter-menu__body .action-item-checkbox:focus-within,.filter-menu__body .action-item-radio:focus-within{background:transparent}.filter-menu__body .action-item:hover{background:transparent}.filter-menu__body .action-item-checkbox,.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}.filter-menu__body .action-item-checkbox:hover,.filter-menu__body .action-item-radio:hover{background:#f9fafb}.filter-menu__body .action-item-checkbox ::ng-deep .checkbox-component,.filter-menu__body .action-item-radio ::ng-deep .radio-component{padding-top:10px;padding-bottom:10px}.filter-menu__body .action-item-checkbox:first-child,.filter-menu__body .action-item-radio:first-child{margin-top:-10px}.filter-menu__body .action-item-checkbox:last-child,.filter-menu__body .action-item-radio:last-child{margin-bottom:-4px}.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}.filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filter-menu__body .expander-item.expanded,.filter-menu__body .expander-item.active{background:transparent;color:#344054}.filter-menu__body .expander-item:hover{background:#f9fafb}.filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filter-menu__body .no-item,.filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filter-menu__body .select-all{font-weight:500}.filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filter-menu__body .number-range-row{display:flex;gap:16px}.filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filter-menu__body .toggle-row{justify-content:space-between;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .toggle-row zen-toggle{display:flex;align-items:center}.filter-menu__body .toggle-row:hover{background:#f9fafb}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled){background-color:#eaecf0}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled).zen-toggle--active{background-color:#105494}.filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.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}.filter-menu__body .section-title:hover{background:#f9fafb}.filter-menu__body .has-badge zen-checkbox{width:auto}.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox{background:#e3eefb;border-color:#136ab6}.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-checked,.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.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: ZenduOverlayService }, { type: i0.ViewContainerRef }], propDecorators: { config: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -4587,24 +4585,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                 type: Input
             }], customPosition: [{
                 type: Input
-            }], searchBox: [{
-                type: ViewChild,
-                args: ['searchBox', { static: false }]
             }], _componentElement: [{
                 type: ViewChild,
                 args: ['mainComponent', { static: false }]
-            }], outsideHandling: [{
-                type: HostListener,
-                args: ['window:mousedown', ['$event']]
-            }], windowSizeHandling: [{
-                type: HostListener,
-                args: ['window:resize', []]
-            }], windowScroll: [{
-                type: HostListener,
-                args: ['window:scroll', []]
-            }], onWindowKeyDown: [{
-                type: HostListener,
-                args: ['window:keydown', ['$event']]
+            }], filterPanel: [{
+                type: ViewChild,
+                args: ['filterPanel', { static: false }]
             }] } });
 
 class ZenduSelectOptionDirective {
@@ -4839,6 +4825,8 @@ class ZenduSelectComponent {
             content: this.dropdownPanel,
             viewContainerRef: this.viewContainerRef,
             width: 'origin',
+            minWidth: this.panelMinWidth,
+            panelClass: this.panelClass,
             scrollBehavior: 'reposition'
         });
         // Outside click / Escape / detach → close (and emit, as a user action).
@@ -5511,7 +5499,7 @@ 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 }, { token: ZenduOverlayService }, { token: i0.ViewContainerRef }], 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", helpIcon: "helpIcon", helpTooltip: "helpTooltip", 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" }, 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 }], viewQueries: [{ propertyName: "selectWrapper", first: true, predicate: ["selectWrapper"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], 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      @if (helpIcon) {\n        <span\n          class=\"zen-help-icon\"\n          role=\"img\"\n          [class.disabled]=\"disabled\"\n          [attr.tabindex]=\"disabled ? -1 : 0\"\n          [attr.aria-label]=\"helpTooltip | translate\"\n          (mouseenter)=\"updateHelpTooltipPlacement($event)\"\n          (focus)=\"updateHelpTooltipPlacement($event)\">\n          <i class=\"material-icons-outlined\">help_outline</i>\n          <!-- Shown on hover/focus via CSS \u2014 no click state. -->\n          <div\n            class=\"zen-help-tooltip\"\n            [class.align-start]=\"helpTooltipAlign === 'start'\"\n            [class.align-end]=\"helpTooltipAlign === 'end'\"\n            [class.place-below]=\"helpTooltipPlacement === 'below'\">\n            <div class=\"tooltip-content\">{{ helpTooltip | translate }}</div>\n            <div class=\"tooltip-arrow\"></div>\n          </div>\n        </span>\n      }\n    </label>\n  }\n\n  <!-- Select Input -->\n  <div class=\"app-select-wrapper\" #selectWrapper>\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 (rendered into a CDK overlay via ZenduOverlayService;\n         positioning/flip/clamping is handled there, not with absolute CSS) -->\n    <ng-template #dropdownPanel>\n      <div class=\"app-select-dropdown\">\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    </ng-template>\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:8px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.app-select-label .zen-help-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;cursor:help;outline:none}.app-select-label .zen-help-icon i{font-size:20px;color:#98a2b3}.app-select-label .zen-help-icon:not(.disabled):hover i,.app-select-label .zen-help-icon:not(.disabled):focus-visible i{color:#475467}.app-select-label .zen-help-icon.disabled{cursor:not-allowed}.app-select-label .zen-help-icon.disabled i{color:#d0d5dd}.app-select-label .zen-help-icon:not(.disabled):hover .zen-help-tooltip,.app-select-label .zen-help-icon:not(.disabled):focus-visible .zen-help-tooltip{display:block}.app-select-label .zen-help-icon .zen-help-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);right:50%;transform:translate(50%);z-index:1000;white-space:nowrap}.app-select-label .zen-help-icon .zen-help-tooltip.align-start{left:-6px;right:auto;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-start .tooltip-arrow{left:8px;right:auto;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-end{left:auto;right:-6px;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-end .tooltip-arrow{left:auto;right:8px;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.place-below{top:calc(100% + 8px);bottom:auto}.app-select-label .zen-help-icon .zen-help-tooltip.place-below .tooltip-arrow{top:-6px;bottom:auto;border-top:none;border-bottom:6px solid #101828}.app-select-label .zen-help-icon .zen-help-tooltip .tooltip-content{background:#101828;color:#fff;padding:6px 10px;border-radius:6px;font-family:Inter,sans-serif;font-size:12px;line-height:16px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;width:max-content;max-width:260px;white-space:normal;text-align:left}.app-select-label .zen-help-icon .zen-help-tooltip .tooltip-arrow{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #101828}.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{width:100%;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-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search zen-icon{flex-shrink:0;width:20px;height:20px}.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;min-height:0;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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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", helpIcon: "helpIcon", helpTooltip: "helpTooltip", 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", panelClass: "panelClass", panelMinWidth: "panelMinWidth" }, outputs: { selectModelChange: "selectModelChange", addNewOption: "addNewOption", removeOption: "removeOption", closed: "closed" }, 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 }], viewQueries: [{ propertyName: "selectWrapper", first: true, predicate: ["selectWrapper"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], 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      @if (helpIcon) {\n        <span\n          class=\"zen-help-icon\"\n          role=\"img\"\n          [class.disabled]=\"disabled\"\n          [attr.tabindex]=\"disabled ? -1 : 0\"\n          [attr.aria-label]=\"helpTooltip | translate\"\n          (mouseenter)=\"updateHelpTooltipPlacement($event)\"\n          (focus)=\"updateHelpTooltipPlacement($event)\">\n          <i class=\"material-icons-outlined\">help_outline</i>\n          <!-- Shown on hover/focus via CSS \u2014 no click state. -->\n          <div\n            class=\"zen-help-tooltip\"\n            [class.align-start]=\"helpTooltipAlign === 'start'\"\n            [class.align-end]=\"helpTooltipAlign === 'end'\"\n            [class.place-below]=\"helpTooltipPlacement === 'below'\">\n            <div class=\"tooltip-content\">{{ helpTooltip | translate }}</div>\n            <div class=\"tooltip-arrow\"></div>\n          </div>\n        </span>\n      }\n    </label>\n  }\n\n  <!-- Select Input -->\n  <div class=\"app-select-wrapper\" #selectWrapper>\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 (rendered into a CDK overlay via ZenduOverlayService;\n         positioning/flip/clamping is handled there, not with absolute CSS) -->\n    <ng-template #dropdownPanel>\n      <div class=\"app-select-dropdown\">\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    </ng-template>\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:8px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.app-select-label .zen-help-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;cursor:help;outline:none}.app-select-label .zen-help-icon i{font-size:20px;color:#98a2b3}.app-select-label .zen-help-icon:not(.disabled):hover i,.app-select-label .zen-help-icon:not(.disabled):focus-visible i{color:#475467}.app-select-label .zen-help-icon.disabled{cursor:not-allowed}.app-select-label .zen-help-icon.disabled i{color:#d0d5dd}.app-select-label .zen-help-icon:not(.disabled):hover .zen-help-tooltip,.app-select-label .zen-help-icon:not(.disabled):focus-visible .zen-help-tooltip{display:block}.app-select-label .zen-help-icon .zen-help-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);right:50%;transform:translate(50%);z-index:1000;white-space:nowrap}.app-select-label .zen-help-icon .zen-help-tooltip.align-start{left:-6px;right:auto;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-start .tooltip-arrow{left:8px;right:auto;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-end{left:auto;right:-6px;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-end .tooltip-arrow{left:auto;right:8px;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.place-below{top:calc(100% + 8px);bottom:auto}.app-select-label .zen-help-icon .zen-help-tooltip.place-below .tooltip-arrow{top:-6px;bottom:auto;border-top:none;border-bottom:6px solid #101828}.app-select-label .zen-help-icon .zen-help-tooltip .tooltip-content{background:#101828;color:#fff;padding:6px 10px;border-radius:6px;font-family:Inter,sans-serif;font-size:12px;line-height:16px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;width:max-content;max-width:260px;white-space:normal;text-align:left}.app-select-label .zen-help-icon .zen-help-tooltip .tooltip-arrow{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #101828}.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{width:100%;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-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search zen-icon{flex-shrink:0;width:20px;height:20px}.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;min-height:0;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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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,
@@ -5590,6 +5578,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                 type: Input
             }], preferredOpenDirection: [{
                 type: Input
+            }], panelClass: [{
+                type: Input
+            }], panelMinWidth: [{
+                type: Input
             }], removeOption: [{
                 type: Output
             }], closed: [{
@@ -5681,7 +5673,7 @@ class ZenduPaginationBarComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPaginationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduPaginationBarComponent, isStandalone: false, selector: "zen-pagination-bar", inputs: { page: "page", perPage: "perPage", count: "count", perPageOptions: "perPageOptions" }, outputs: { pageChange: "pageChange", perPageChange: "perPageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-component\">\n  <p class=\"results-text\">\n    {{ \"Showing\" | translate }} {{ rangeStart }} - {{ rangeEnd }}\n    {{ \"of\" | translate }} {{ count }} {{ \"results\" | translate }}\n  </p>\n\n  <div class=\"page-navigation\">\n    <zen-button\n      buttonType=\"button-icon-only\"\n      variant=\"tertiary-gray\"\n      size=\"md\"\n      icon=\"chevron-left\"\n      [disabled]=\"page <= 1\"\n      (click)=\"goToPage(page - 1)\">\n    </zen-button>\n\n    <div class=\"pages\">\n      @for (item of pages; track item; let i = $index) {\n        @if (item.kind === 'page') {\n          <button\n            type=\"button\"\n            class=\"page-btn\"\n            [class.is-active]=\"item.active\"\n            (click)=\"goToPage(item.page)\">\n            {{ item.page }}\n          </button>\n        }\n        @if (item.kind === 'ellipsis') {\n          <span class=\"page-ellipsis\">\u2026</span>\n        }\n      }\n    </div>\n\n    <zen-button\n      buttonType=\"button-icon-only\"\n      variant=\"tertiary-gray\"\n      size=\"md\"\n      icon=\"chevron-right\"\n      [disabled]=\"page >= totalPages\"\n      (click)=\"goToPage(page + 1)\">\n    </zen-button>\n  </div>\n\n  <div class=\"rows-per-page\">\n    <span class=\"rows-label\">{{ \"Rows per page\" | translate }}</span>\n    <zen-select\n      size=\"sm\"\n      [options]=\"perPageOptions\"\n      [(selectModel)]=\"perPage\"\n      (selectModelChange)=\"onPerPageChange($event)\"\n      preferredOpenDirection=\"up\">\n    </zen-select>\n  </div>\n</div>\n", styles: [".pagination-component{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid #EAECF0;padding:11px 24px 16px;font-family:Inter,sans-serif}.pagination-component .results-text{justify-self:start;margin:0;font-size:14px;line-height:20px;color:#667085;white-space:nowrap}.pagination-component .page-navigation{justify-self:center;display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .rows-per-page{justify-self:end;display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .rows-per-page .rows-label{font-size:14px;font-weight:500;line-height:20px;color:#344054;white-space:nowrap}.pagination-component .rows-per-page zen-select{min-width:80px}.pagination-component .pages{display:flex;flex-direction:row;align-items:center;gap:2px}.pagination-component .page-btn,.pagination-component .page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;color:#667085;background:transparent;border:0;padding:0;box-sizing:border-box}.pagination-component .page-btn{cursor:pointer;transition:background-color .1s,color .1s}.pagination-component .page-btn:hover:not(.is-active){background:#f9fafb}.pagination-component .page-btn.is-active{background:#f1f7fe;color:#136ab6;cursor:default}.pagination-component .page-ellipsis{cursor:default}\n"], dependencies: [{ kind: "component", type: ZenduSelectComponent, selector: "zen-select", inputs: ["selectModel", "options", "label", "helpIcon", "helpTooltip", "supportingText", "hintText", "placeholder", "leadingType", "leadingIcon", "leadingAvatar", "leadingDotColor", "displayProp", "idProp", "hasSearch", "isMultiselect", "multiselect", "hideSelectAll", "hideTreeSearch", "required", "disabled", "error", "errorMessage", "destructive", "size", "returnOption", "isTruncate", "enableAddNewOption", "showDefaultAddOption", "newOptionText", "enableRemoveOption", "removeOptionText", "isLazyLoading", "lazyLoader", "preferredOpenDirection"], outputs: ["selectModelChange", "addNewOption", "removeOption", "closed"] }, { 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: ZenduPaginationBarComponent, isStandalone: false, selector: "zen-pagination-bar", inputs: { page: "page", perPage: "perPage", count: "count", perPageOptions: "perPageOptions" }, outputs: { pageChange: "pageChange", perPageChange: "perPageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-component\">\n  <p class=\"results-text\">\n    {{ \"Showing\" | translate }} {{ rangeStart }} - {{ rangeEnd }}\n    {{ \"of\" | translate }} {{ count }} {{ \"results\" | translate }}\n  </p>\n\n  <div class=\"page-navigation\">\n    <zen-button\n      buttonType=\"button-icon-only\"\n      variant=\"tertiary-gray\"\n      size=\"md\"\n      icon=\"chevron-left\"\n      [disabled]=\"page <= 1\"\n      (click)=\"goToPage(page - 1)\">\n    </zen-button>\n\n    <div class=\"pages\">\n      @for (item of pages; track item; let i = $index) {\n        @if (item.kind === 'page') {\n          <button\n            type=\"button\"\n            class=\"page-btn\"\n            [class.is-active]=\"item.active\"\n            (click)=\"goToPage(item.page)\">\n            {{ item.page }}\n          </button>\n        }\n        @if (item.kind === 'ellipsis') {\n          <span class=\"page-ellipsis\">\u2026</span>\n        }\n      }\n    </div>\n\n    <zen-button\n      buttonType=\"button-icon-only\"\n      variant=\"tertiary-gray\"\n      size=\"md\"\n      icon=\"chevron-right\"\n      [disabled]=\"page >= totalPages\"\n      (click)=\"goToPage(page + 1)\">\n    </zen-button>\n  </div>\n\n  <div class=\"rows-per-page\">\n    <span class=\"rows-label\">{{ \"Rows per page\" | translate }}</span>\n    <zen-select\n      size=\"sm\"\n      [options]=\"perPageOptions\"\n      [(selectModel)]=\"perPage\"\n      (selectModelChange)=\"onPerPageChange($event)\"\n      preferredOpenDirection=\"up\">\n    </zen-select>\n  </div>\n</div>\n", styles: [".pagination-component{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid #EAECF0;padding:11px 24px 16px;font-family:Inter,sans-serif}.pagination-component .results-text{justify-self:start;margin:0;font-size:14px;line-height:20px;color:#667085;white-space:nowrap}.pagination-component .page-navigation{justify-self:center;display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .rows-per-page{justify-self:end;display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .rows-per-page .rows-label{font-size:14px;font-weight:500;line-height:20px;color:#344054;white-space:nowrap}.pagination-component .rows-per-page zen-select{min-width:80px}.pagination-component .pages{display:flex;flex-direction:row;align-items:center;gap:2px}.pagination-component .page-btn,.pagination-component .page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;color:#667085;background:transparent;border:0;padding:0;box-sizing:border-box}.pagination-component .page-btn{cursor:pointer;transition:background-color .1s,color .1s}.pagination-component .page-btn:hover:not(.is-active){background:#f9fafb}.pagination-component .page-btn.is-active{background:#f1f7fe;color:#136ab6;cursor:default}.pagination-component .page-ellipsis{cursor:default}\n"], dependencies: [{ kind: "component", type: ZenduSelectComponent, selector: "zen-select", inputs: ["selectModel", "options", "label", "helpIcon", "helpTooltip", "supportingText", "hintText", "placeholder", "leadingType", "leadingIcon", "leadingAvatar", "leadingDotColor", "displayProp", "idProp", "hasSearch", "isMultiselect", "multiselect", "hideSelectAll", "hideTreeSearch", "required", "disabled", "error", "errorMessage", "destructive", "size", "returnOption", "isTruncate", "enableAddNewOption", "showDefaultAddOption", "newOptionText", "enableRemoveOption", "removeOptionText", "isLazyLoading", "lazyLoader", "preferredOpenDirection", "panelClass", "panelMinWidth"], outputs: ["selectModelChange", "addNewOption", "removeOption", "closed"] }, { 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: ZenduPaginationBarComponent, decorators: [{
             type: Component,
@@ -5824,7 +5816,7 @@ class ZenduPhoneInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduPhoneInputComponent, isStandalone: false, selector: "zen-phone-input", inputs: { phone: "phone", maxLength: "maxLength", disabled: "disabled", width: "width" }, outputs: { phoneChange: "phoneChange", validChange: "validChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-input-container\" [style.width]=\"width\">\n  <!-- Input wrapper -->\n  <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n    <!-- Leading dropdown: Country selector -->\n    <div class=\"zen-input-leading-dropdown\">\n      <button type=\"button\"\n        class=\"zen-dropdown-trigger\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle(); $event.stopPropagation()\">\n        <img class=\"zen-phone-country-flag\"\n          [src]=\"selectedCountry.flag\"\n          [alt]=\"selectedCountry.countryName\">\n        <span class=\"dropdown-label\">{{ selectedCountry.countryCallingCode }}</span>\n        <i class=\"material-icons dropdown-icon\"\n        [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n      </button>\n    </div>\n\n    <!-- Phone input field -->\n    <input #input\n      class=\"zen-input-field text text-md text-weight-regular\"\n      type=\"text\"\n      [(ngModel)]=\"phoneText\"\n      (ngModelChange)=\"phoneChanged(input)\"\n      (click)=\"isExpanded = false\"\n      [disabled]=\"disabled\"\n      country-code=\"selectedCountry.countryCode\"\n      [maxlength]=\"maxLength\">\n  </div>\n\n  <!-- Country dropdown menu -->\n  @if (isExpanded) {\n    <div class=\"zen-dropdown-menu\"\n      [ngClass]=\"{'open': isExpanded}\">\n      <!-- Countries List -->\n      @for (country of countryList; track country) {\n        <button type=\"button\"\n          class=\"zen-dropdown-option\"\n          [ngClass]=\"{'selected': selectedCountry.countryName === country.countryName}\"\n          (click)=\"countryChanged(country)\">\n          <img class=\"zen-phone-country-flag\"\n            [src]=\"country.flag\"\n            [alt]=\"country.countryName\">\n          <span class=\"zen-phone-country-name\">{{ country.countryName }}</span>\n          <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n        </button>\n      }\n      <!-- Custom Country -->\n      <button type=\"button\"\n        class=\"zen-dropdown-option\"\n        [ngClass]=\"{'selected': selectedCountry.countryName === customCountry.countryName}\"\n        (click)=\"countryChanged(customCountry)\">\n        <img class=\"zen-phone-country-flag\"\n          [src]=\"customCountry.flag\"\n          [alt]=\"customCountry.countryName\">\n        <span class=\"zen-phone-country-name\">{{ customCountry.countryName }}</span>\n        <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n      </button>\n    </div>\n  }\n</div>\n\n<!-- Click outside handler for dropdown -->\n@if (isExpanded) {\n  <div\n    class=\"zen-dropdown-backdrop\"\n  (click)=\"hideDropDown()\"></div>\n}\n", 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}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover{border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper:focus-within{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-label{font-weight:500;font-size:14px;min-width:max-content}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon.active{transform:rotate(180deg)}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100;padding:4px;width:100%;box-sizing:border-box}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-name{flex:1;min-width:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .zen-phone-country-code{color:#136ab6}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduPhoneInputComponent, isStandalone: false, selector: "zen-phone-input", inputs: { phone: "phone", maxLength: "maxLength", disabled: "disabled", width: "width" }, outputs: { phoneChange: "phoneChange", validChange: "validChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-input-container\" [style.width]=\"width\">\n  <!-- Input wrapper -->\n  <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n    <!-- Leading dropdown: Country selector -->\n    <div class=\"zen-input-leading-dropdown\">\n      <button type=\"button\"\n        class=\"zen-dropdown-trigger\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle(); $event.stopPropagation()\">\n        <img class=\"zen-phone-country-flag\"\n          [src]=\"selectedCountry.flag\"\n          [alt]=\"selectedCountry.countryName\">\n        <span class=\"dropdown-label\">{{ selectedCountry.countryCallingCode }}</span>\n        <i class=\"material-icons dropdown-icon\"\n        [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n      </button>\n    </div>\n\n    <!-- Phone input field -->\n    <input #input\n      class=\"zen-input-field text text-md text-weight-regular\"\n      type=\"text\"\n      [(ngModel)]=\"phoneText\"\n      (ngModelChange)=\"phoneChanged(input)\"\n      (click)=\"isExpanded = false\"\n      [disabled]=\"disabled\"\n      country-code=\"selectedCountry.countryCode\"\n      [maxlength]=\"maxLength\">\n  </div>\n\n  <!-- Country dropdown menu -->\n  @if (isExpanded) {\n    <div class=\"zen-dropdown-menu\"\n      [ngClass]=\"{'open': isExpanded}\">\n      <!-- Countries List -->\n      @for (country of countryList; track country) {\n        <button type=\"button\"\n          class=\"zen-dropdown-option\"\n          [ngClass]=\"{'selected': selectedCountry.countryName === country.countryName}\"\n          (click)=\"countryChanged(country)\">\n          <img class=\"zen-phone-country-flag\"\n            [src]=\"country.flag\"\n            [alt]=\"country.countryName\">\n          <span class=\"zen-phone-country-name\">{{ country.countryName }}</span>\n          <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n        </button>\n      }\n      <!-- Custom Country -->\n      <button type=\"button\"\n        class=\"zen-dropdown-option\"\n        [ngClass]=\"{'selected': selectedCountry.countryName === customCountry.countryName}\"\n        (click)=\"countryChanged(customCountry)\">\n        <img class=\"zen-phone-country-flag\"\n          [src]=\"customCountry.flag\"\n          [alt]=\"customCountry.countryName\">\n        <span class=\"zen-phone-country-name\">{{ customCountry.countryName }}</span>\n        <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n      </button>\n    </div>\n  }\n</div>\n\n<!-- Click outside handler for dropdown -->\n@if (isExpanded) {\n  <div\n    class=\"zen-dropdown-backdrop\"\n  (click)=\"hideDropDown()\"></div>\n}\n", 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}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover{border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper:focus-within{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-label{font-weight:500;font-size:14px;min-width:max-content}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon.active{transform:rotate(180deg)}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100;padding:4px;width:100%;box-sizing:border-box}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-name{flex:1;min-width:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .zen-phone-country-code{color:#136ab6}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPhoneInputComponent, decorators: [{
             type: Component,
@@ -7225,7 +7217,7 @@ class ZenduFileUpload {
         this.clear();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduFileUpload, isStandalone: false, selector: "zen-file-upload", inputs: { fileTypes: "fileTypes", uploadState: "uploadState" }, outputs: { uploadFile: "uploadFile", uploadCancelled: "uploadCancelled" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" } }, ngImport: i0, template: "<div class=\"component\">\n  <div class=\"title\">\n    @if (uploadState != 'done') {\n      <span>Upload File</span>\n    }\n    @if (uploadState == 'done') {\n      <span>Uploaded File</span>\n    }\n  </div>\n  @if (uploadState != 'done') {\n    <div class=\"drop-area\"\n      [class.dragover]=\"isFileDragover\"\n      >\n      @if (!isFileSelected) {\n        <div class=\"box\"\n          >\n          <div>\n            <zen-icon class=\"doc-icon\"\n            src=\"https://storage.googleapis.com/ng-zenduit/icon/document.svg\"></zen-icon>\n          </div>\n          <div>\n            <div>Drag and Drop Here</div>\n            <div>or</div>\n            <span class=\"browse\"\n            (click)=\"fileIp.click()\">Browse</span>\n            <form><input type=\"file\"\n              [accept]=\"fileTypes\"\n              #fileIp\n            (change)=\"onFileInput($event)\" /></form>\n          </div>\n        </div>\n      }\n      @if (isFileSelected) {\n        <!-- File selected state -->\n        @if (uploadState == '') {\n          <div class=\"box-selected-file\">\n            <div class=\"close-wrapper\">\n              <zen-icon (click)=\"clear()\"\n                class=\"close-icon\"\n              src=\"https://storage.googleapis.com/ng-zenduit/icon/cross.svg\"></zen-icon>\n            </div>\n            <div>\n              <zen-icon class=\"img-icon\"\n              src=\"https://storage.googleapis.com/ng-zenduit/icon/image.svg\"></zen-icon>\n            </div>\n            <div class=\"filename\">\n              {{filename}}\n            </div>\n          </div>\n        }\n        <!-- Uploading state -->\n        @if (uploadState == 'uploading') {\n          <div class=\"box-file-uploading\">\n            <div class=\"file-description\">\n              <zen-icon class=\"img-icon-sm\"\n              src=\"https://storage.googleapis.com/ng-zenduit/icon/image-sm.svg\"></zen-icon>\n              <div>{{filename}}</div>\n            </div>\n            <div class=\"progress\">\n              <div class=\"progress-bar-value\"></div>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  }\n\n\n  <!-- Uploading done -->\n  @if (uploadState == 'done') {\n    <div\n      class=\"box-upload-done\">\n      <div class=\"file-description\">\n        <zen-icon class=\"img-icon\"\n        src=\"https://storage.googleapis.com/ng-zenduit/icon/image.svg\"></zen-icon>\n        <div class=\"filename\">{{filename}}</div>\n        <div class=\"close-btn\">\n          <zen-icon (click)=\"clear()\"\n            class=\"close-icon\"\n          src=\"https://storage.googleapis.com/ng-zenduit/icon/cross.svg\"></zen-icon>\n        </div>\n      </div>\n    </div>\n  }\n\n  <div class=\"btn-upload-wrapper\">\n\n    @if (uploadState == '') {\n      <button\n        (click)=\"uploadNow()\"\n        class=\"button-flat full-width\"\n        [disabled]=\"!isFileSelected\">\n        Upload Now\n      </button>\n    }\n\n    @if (uploadState == 'uploading') {\n      <button\n        (click)=\"cancelUploading()\"\n        class=\"button-alert full-width\"\n        [disabled]=\"!isFileSelected\">\n        Cancel\n      </button>\n    }\n  </div>\n\n</div>\n", styles: [".component{border-radius:4px;border:1px solid var(--color-white-tint-3, #e0e0e0);padding:24px;box-sizing:border-box;font-family:Roboto;width:100%;height:100%}.component .title{font-size:16px;font-style:normal;font-weight:500;margin-bottom:16px}.component .drop-area{border-radius:4px;border:1px dashed var(--color-white-tint-3, #e0e0e0);min-width:100px;margin-bottom:16px}.component .drop-area input[type=file]{display:none}.component .drop-area .box{padding:26px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400}.component .drop-area .box .browse{color:var(--color-primary, #2188d9);font-style:normal;font-weight:500;line-height:130%;letter-spacing:.28px;text-decoration:underline;cursor:pointer}.component .drop-area .doc-icon{width:28px;height:28px;background-color:var(--color-grey-primary, #4f4f4f)}.component .drop-area.dragover{border:1px dashed var(--color-primary, #2188d9)}.component .drop-area.dragover .doc-icon{background-color:var(--color-primary, #2188d9)}.component .drop-area .box-selected-file{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;margin:8px}.component .drop-area .box-selected-file .img-icon{background-color:var(--color-grey-primary, #4f4f4f);width:52px;height:52px}.component .drop-area .box-selected-file .close-wrapper{width:100%;display:flex;justify-content:end;margin-bottom:8px}.component .drop-area .box-selected-file .close-wrapper .close-icon{background-color:var(--color-error-primary, #dc3e33);cursor:pointer}.component .drop-area .box-selected-file .filename{color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400;margin-bottom:30px}.component .drop-area .box-file-uploading{padding:56px 28px;box-sizing:border-box}.component .drop-area .box-file-uploading .file-description{display:flex;align-items:center;gap:8px;font-size:14px;font-style:normal;font-weight:400;margin-bottom:5px}.component .drop-area .box-file-uploading .file-description .img-icon-sm{background-color:var(--color-grey-primary, #4f4f4f);width:28px;height:28px}.component .drop-area .box-file-uploading .progress{border-radius:4px;background-color:var(--color-white-tint-3, #e0e0e0);width:100%;height:5px;overflow:hidden}.component .drop-area .box-file-uploading .progress .progress-bar-value{width:100%;height:100%;background-color:var(--color-primary, #2188d9);animation:indeterminateAnimation 1s infinite linear;transform-origin:0% 50%}.component .box-upload-done .file-description{display:flex;align-items:center;gap:4px;font-size:14px;font-style:normal;font-weight:400}.component .box-upload-done .file-description .filename{flex:1}.component .box-upload-done .file-description .close-icon{background-color:var(--color-error-primary, #dc3e33);cursor:pointer}.component .box-upload-done .file-description .img-icon{background-color:var(--color-grey-primary, #4f4f4f);width:52px;height:52px}.component .btn-upload-wrapper button{width:100%}@keyframes indeterminateAnimation{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}\n"], dependencies: [{ kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduFileUpload, isStandalone: false, selector: "zen-file-upload", inputs: { fileTypes: "fileTypes", uploadState: "uploadState" }, outputs: { uploadFile: "uploadFile", uploadCancelled: "uploadCancelled" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" } }, ngImport: i0, template: "<div class=\"component\">\n  <div class=\"title\">\n    @if (uploadState != 'done') {\n      <span>Upload File</span>\n    }\n    @if (uploadState == 'done') {\n      <span>Uploaded File</span>\n    }\n  </div>\n  @if (uploadState != 'done') {\n    <div class=\"drop-area\"\n      [class.dragover]=\"isFileDragover\"\n      >\n      @if (!isFileSelected) {\n        <div class=\"box\"\n          >\n          <div>\n            <zen-icon class=\"doc-icon\"\n            src=\"https://storage.googleapis.com/ng-zenduit/icon/document.svg\"></zen-icon>\n          </div>\n          <div>\n            <div>Drag and Drop Here</div>\n            <div>or</div>\n            <span class=\"browse\"\n            (click)=\"fileIp.click()\">Browse</span>\n            <form><input type=\"file\"\n              [accept]=\"fileTypes\"\n              #fileIp\n            (change)=\"onFileInput($event)\" /></form>\n          </div>\n        </div>\n      }\n      @if (isFileSelected) {\n        <!-- File selected state -->\n        @if (uploadState == '') {\n          <div class=\"box-selected-file\">\n            <div class=\"close-wrapper\">\n              <zen-icon (click)=\"clear()\"\n                class=\"close-icon\"\n              src=\"https://storage.googleapis.com/ng-zenduit/icon/cross.svg\"></zen-icon>\n            </div>\n            <div>\n              <zen-icon class=\"img-icon\"\n              src=\"https://storage.googleapis.com/ng-zenduit/icon/image.svg\"></zen-icon>\n            </div>\n            <div class=\"filename\">\n              {{filename}}\n            </div>\n          </div>\n        }\n        <!-- Uploading state -->\n        @if (uploadState == 'uploading') {\n          <div class=\"box-file-uploading\">\n            <div class=\"file-description\">\n              <zen-icon class=\"img-icon-sm\"\n              src=\"https://storage.googleapis.com/ng-zenduit/icon/image-sm.svg\"></zen-icon>\n              <div>{{filename}}</div>\n            </div>\n            <div class=\"progress\">\n              <div class=\"progress-bar-value\"></div>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  }\n\n\n  <!-- Uploading done -->\n  @if (uploadState == 'done') {\n    <div\n      class=\"box-upload-done\">\n      <div class=\"file-description\">\n        <zen-icon class=\"img-icon\"\n        src=\"https://storage.googleapis.com/ng-zenduit/icon/image.svg\"></zen-icon>\n        <div class=\"filename\">{{filename}}</div>\n        <div class=\"close-btn\">\n          <zen-icon (click)=\"clear()\"\n            class=\"close-icon\"\n          src=\"https://storage.googleapis.com/ng-zenduit/icon/cross.svg\"></zen-icon>\n        </div>\n      </div>\n    </div>\n  }\n\n  <div class=\"btn-upload-wrapper\">\n\n    @if (uploadState == '') {\n      <button\n        (click)=\"uploadNow()\"\n        class=\"button-flat full-width\"\n        [disabled]=\"!isFileSelected\">\n        Upload Now\n      </button>\n    }\n\n    @if (uploadState == 'uploading') {\n      <button\n        (click)=\"cancelUploading()\"\n        class=\"button-alert full-width\"\n        [disabled]=\"!isFileSelected\">\n        Cancel\n      </button>\n    }\n  </div>\n\n</div>\n", styles: [".component{border-radius:4px;border:1px solid var(--color-white-tint-3, #e0e0e0);padding:24px;box-sizing:border-box;font-family:Roboto;width:100%;height:100%}.component .title{font-size:16px;font-style:normal;font-weight:500;margin-bottom:16px}.component .drop-area{border-radius:4px;border:1px dashed var(--color-white-tint-3, #e0e0e0);min-width:100px;margin-bottom:16px}.component .drop-area input[type=file]{display:none}.component .drop-area .box{padding:26px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400}.component .drop-area .box .browse{color:var(--color-primary, #2188d9);font-style:normal;font-weight:500;line-height:130%;letter-spacing:.28px;text-decoration:underline;cursor:pointer}.component .drop-area .doc-icon{width:28px;height:28px;background-color:var(--color-grey-primary, #4f4f4f)}.component .drop-area.dragover{border:1px dashed var(--color-primary, #2188d9)}.component .drop-area.dragover .doc-icon{background-color:var(--color-primary, #2188d9)}.component .drop-area .box-selected-file{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;margin:8px}.component .drop-area .box-selected-file .img-icon{background-color:var(--color-grey-primary, #4f4f4f);width:52px;height:52px}.component .drop-area .box-selected-file .close-wrapper{width:100%;display:flex;justify-content:end;margin-bottom:8px}.component .drop-area .box-selected-file .close-wrapper .close-icon{background-color:var(--color-error-primary, #dc3e33);cursor:pointer}.component .drop-area .box-selected-file .filename{color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400;margin-bottom:30px}.component .drop-area .box-file-uploading{padding:56px 28px;box-sizing:border-box}.component .drop-area .box-file-uploading .file-description{display:flex;align-items:center;gap:8px;font-size:14px;font-style:normal;font-weight:400;margin-bottom:5px}.component .drop-area .box-file-uploading .file-description .img-icon-sm{background-color:var(--color-grey-primary, #4f4f4f);width:28px;height:28px}.component .drop-area .box-file-uploading .progress{border-radius:4px;background-color:var(--color-white-tint-3, #e0e0e0);width:100%;height:5px;overflow:hidden}.component .drop-area .box-file-uploading .progress .progress-bar-value{width:100%;height:100%;background-color:var(--color-primary, #2188d9);animation:indeterminateAnimation 1s infinite linear;transform-origin:0% 50%}.component .box-upload-done .file-description{display:flex;align-items:center;gap:4px;font-size:14px;font-style:normal;font-weight:400}.component .box-upload-done .file-description .filename{flex:1}.component .box-upload-done .file-description .close-icon{background-color:var(--color-error-primary, #dc3e33);cursor:pointer}.component .box-upload-done .file-description .img-icon{background-color:var(--color-grey-primary, #4f4f4f);width:52px;height:52px}.component .btn-upload-wrapper button{width:100%}@keyframes indeterminateAnimation{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}\n"], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFileUpload, decorators: [{
             type: Component,
@@ -7487,7 +7479,7 @@ class ZenduLocationSearch {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduLocationSearch, deps: [{ token: GeocodingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduLocationSearch, isStandalone: false, selector: "zen-location-search", inputs: { apiKey: "apiKey", address: "address", displaySearchIcon: "displaySearchIcon", materialStyle: "materialStyle", placeholder: "placeholder", disabled: "disabled", customStyles: "customStyles" }, outputs: { addressChange: "addressChange", onSelect: "onSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"component\">\n\n  <div class=\"search-input-wrapper\"\n    [class.boundaries]=\"!materialStyle\">\n    @if (displaySearchIcon) {\n      <zen-icon src=\"https://storage.googleapis.com/ng-zenduit/icon/search.svg\"\n        class=\"search-icon\"\n      [style]=\"{'background-color': customStyles.color}\"></zen-icon>\n    }\n\n    <input type=\"text\"\n      class=\"material-input\"\n      [style]=\"customStyles\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"address\"\n      [ngClass]=\"{'no-icon': !displaySearchIcon}\"\n      (ngModelChange)='addressChanged($event)'>\n  </div>\n\n  @if (address) {\n    <div class=\"search-list\"\n      [class.boundaries]=\"!materialStyle\"\n      appClickOutside\n      (clickOutside)=\"addressList = [];\">\n      @if (addressList.length || isSearching) {\n        <ul class=\"search-item-list\"\n          >\n          @if (isSearching) {\n            <li>Searching</li>\n          }\n          @if (!isSearching) {\n            <div>\n              @for (address of addressList; track address) {\n                <li\n                  (click)=\"selectAddress(address)\">\n                  {{address.name}}\n                </li>\n              }\n            </div>\n          }\n        </ul>\n      }\n    </div>\n  }\n</div>\n", styles: [".component,.component .search-input-wrapper{position:relative}.component .search-input-wrapper .search-icon{position:absolute;left:4px;background-color:var(--color-white-tint-6, #bebebe)}.component .search-input-wrapper .material-input{padding-left:38px}.component .search-input-wrapper .material-input.no-icon{padding-left:8px}.component .search-input-wrapper .material-input.no-icon::placeholder{font-size:14px}.component .search-input-wrapper.boundaries .material-input{border:1px solid var(--color-white-tint-4, #d6d6d8);padding-top:8px;border-radius:4px;height:40px;font-style:normal;font-weight:400;font-size:14px;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.component .search-input-wrapper.boundaries .material-input:hover{border-color:#b8b9bc}.component .search-input-wrapper.boundaries .material-input:focus-within{box-shadow:0 0 2px 2px #2188d94d}.component .search-input-wrapper.boundaries .search-icon{top:8px;left:8px}.component .search-list{position:absolute;top:40px;left:16px;z-index:1;min-width:278px;max-width:420px;box-shadow:0 4px 10px #060c1b26;background:#fff}.component .search-list.boundaries{top:45px}.component .search-list ul.search-item-list{list-style-type:none;max-width:420px;max-height:30vh;overflow-y:scroll;overflow-x:inherit;margin:0;padding:5px 10px}.component .search-list ul.search-item-list li{background-color:#fff;padding:5px 10px;align-items:flex-start;color:#828282;cursor:pointer;width:100%;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px}.component .search-list ul.search-item-list li:hover{text-decoration:none;background-color:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduLocationSearch, isStandalone: false, selector: "zen-location-search", inputs: { apiKey: "apiKey", address: "address", displaySearchIcon: "displaySearchIcon", materialStyle: "materialStyle", placeholder: "placeholder", disabled: "disabled", customStyles: "customStyles" }, outputs: { addressChange: "addressChange", onSelect: "onSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"component\">\n\n  <div class=\"search-input-wrapper\"\n    [class.boundaries]=\"!materialStyle\">\n    @if (displaySearchIcon) {\n      <zen-icon src=\"https://storage.googleapis.com/ng-zenduit/icon/search.svg\"\n        class=\"search-icon\"\n      [style]=\"{'background-color': customStyles.color}\"></zen-icon>\n    }\n\n    <input type=\"text\"\n      class=\"material-input\"\n      [style]=\"customStyles\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"address\"\n      [ngClass]=\"{'no-icon': !displaySearchIcon}\"\n      (ngModelChange)='addressChanged($event)'>\n  </div>\n\n  @if (address) {\n    <div class=\"search-list\"\n      [class.boundaries]=\"!materialStyle\"\n      appClickOutside\n      (clickOutside)=\"addressList = [];\">\n      @if (addressList.length || isSearching) {\n        <ul class=\"search-item-list\"\n          >\n          @if (isSearching) {\n            <li>Searching</li>\n          }\n          @if (!isSearching) {\n            <div>\n              @for (address of addressList; track address) {\n                <li\n                  (click)=\"selectAddress(address)\">\n                  {{address.name}}\n                </li>\n              }\n            </div>\n          }\n        </ul>\n      }\n    </div>\n  }\n</div>\n", styles: [".component,.component .search-input-wrapper{position:relative}.component .search-input-wrapper .search-icon{position:absolute;left:4px;background-color:var(--color-white-tint-6, #bebebe)}.component .search-input-wrapper .material-input{padding-left:38px}.component .search-input-wrapper .material-input.no-icon{padding-left:8px}.component .search-input-wrapper .material-input.no-icon::placeholder{font-size:14px}.component .search-input-wrapper.boundaries .material-input{border:1px solid var(--color-white-tint-4, #d6d6d8);padding-top:8px;border-radius:4px;height:40px;font-style:normal;font-weight:400;font-size:14px;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.component .search-input-wrapper.boundaries .material-input:hover{border-color:#b8b9bc}.component .search-input-wrapper.boundaries .material-input:focus-within{box-shadow:0 0 2px 2px #2188d94d}.component .search-input-wrapper.boundaries .search-icon{top:8px;left:8px}.component .search-list{position:absolute;top:40px;left:16px;z-index:1;min-width:278px;max-width:420px;box-shadow:0 4px 10px #060c1b26;background:#fff}.component .search-list.boundaries{top:45px}.component .search-list ul.search-item-list{list-style-type:none;max-width:420px;max-height:30vh;overflow-y:scroll;overflow-x:inherit;margin:0;padding:5px 10px}.component .search-list ul.search-item-list li{background-color:#fff;padding:5px 10px;align-items:flex-start;color:#828282;cursor:pointer;width:100%;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px}.component .search-list ul.search-item-list li:hover{text-decoration:none;background-color:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduLocationSearch, decorators: [{
             type: Component,