ng-zenduit 2.3.4 → 2.3.7

package/fesm2022/ng-zenduit.mjs

@@ -441,11 +441,11 @@ class ZenduInputComponent {
          */
         this.leadingIcon = '';
         /**
-         * Show help icon with tooltip
+         * Show help icon. The tooltip is shown on hover / keyboard focus.
          */
         this.helpIcon = false;
         /**
-         * Tooltip text for help icon
+         * Tooltip text for the help icon (shown on hover / focus).
          */
         this.helpTooltip = 'This is a tooltip';
         /**
@@ -584,10 +584,6 @@ class ZenduInputComponent {
          * Trailing dropdown value change event (for two-way binding)
          */
         this.trailingDropdownValueChange = new EventEmitter();
-        /**
-         * Help icon click event
-         */
-        this.helpIconClick = new EventEmitter();
         /**
          * Phone change event
          */
@@ -603,7 +599,8 @@ class ZenduInputComponent {
         // Internal properties
         this.value = '';
         this.isFocused = false;
-        this.showHelpTooltip = false;
+        this.helpTooltipAlign = 'center';
+        this.helpTooltipPlacement = 'above';
         this.leadingDropdownOpen = false;
         this.trailingDropdownOpen = false;
         // Phone input properties
@@ -737,9 +734,37 @@ class ZenduInputComponent {
             this.leadingDropdownOpen = false;
         }
     }
-    onHelpIconClick(event) {
-        this.showHelpTooltip = !this.showHelpTooltip;
-        this.helpIconClick.emit(event);
+    /**
+     * Position the help tooltip so it never overflows the viewport. Horizontally:
+     * anchored to the icon's right edge near the right border, to its left edge near
+     * the left border, otherwise centered. Vertically: above by default, flipped
+     * below when there isn't room above and there's more room below (e.g. an icon
+     * near the top of the viewport). Computed from the icon rect synchronously
+     * (before paint) so the tooltip appears in its final spot without a flicker.
+     */
+    updateHelpTooltipPlacement(event) {
+        const icon = event.currentTarget;
+        if (!icon) {
+            return;
+        }
+        const rect = icon.getBoundingClientRect();
+        const margin = 8;
+        const iconCenter = rect.left + rect.width / 2;
+        const halfMaxWidth = 130;
+        if (iconCenter + halfMaxWidth > window.innerWidth - margin) {
+            this.helpTooltipAlign = 'end';
+        }
+        else if (iconCenter - halfMaxWidth < margin) {
+            this.helpTooltipAlign = 'start';
+        }
+        else {
+            this.helpTooltipAlign = 'center';
+        }
+        const estimatedHeight = 56;
+        const spaceAbove = rect.top;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        this.helpTooltipPlacement =
+            spaceAbove < estimatedHeight + margin && spaceBelow > spaceAbove ? 'below' : 'above';
     }
     closeDropdowns() {
         this.leadingDropdownOpen = false;
@@ -939,13 +964,13 @@ class ZenduInputComponent {
         this.focusInput();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduInputComponent, isStandalone: false, selector: "zen-input", inputs: { type: "type", variant: "variant", placeholder: "placeholder", label: "label", hintText: "hintText", leadingIcon: "leadingIcon", helpIcon: "helpIcon", helpTooltip: "helpTooltip", destructive: "destructive", errorMessage: "errorMessage", disabled: "disabled", required: "required", maxLength: "maxLength", minLength: "minLength", pattern: "pattern", autocomplete: "autocomplete", name: "name", id: "id", leadingDropdownOptions: "leadingDropdownOptions", leadingDropdownValue: "leadingDropdownValue", leadingDropdownPlaceholder: "leadingDropdownPlaceholder", trailingDropdownOptions: "trailingDropdownOptions", trailingDropdownValue: "trailingDropdownValue", trailingDropdownPlaceholder: "trailingDropdownPlaceholder", leadingText: "leadingText", trailingText: "trailingText", multiline: ["multiline", "multiline", booleanAttribute], rows: ["rows", "rows", numberAttribute], resizable: ["resizable", "resizable", booleanAttribute], size: "size", showCharacterCount: "showCharacterCount", phoneMaxLength: "phoneMaxLength", phone: "phone", width: "width" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", inputKeydown: "inputKeydown", inputKeyup: "inputKeyup", leadingDropdownChange: "leadingDropdownChange", leadingDropdownValueChange: "leadingDropdownValueChange", trailingDropdownChange: "trailingDropdownChange", trailingDropdownValueChange: "trailingDropdownValueChange", helpIconClick: "helpIconClick", phoneChange: "phoneChange", validChange: "validChange", leadingIconClick: "leadingIconClick" }, host: { properties: { "class.zen-input-wrapper": "this.hostClass" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduInputComponent, isStandalone: false, selector: "zen-input", inputs: { type: "type", variant: "variant", placeholder: "placeholder", label: "label", hintText: "hintText", leadingIcon: "leadingIcon", helpIcon: "helpIcon", helpTooltip: "helpTooltip", destructive: "destructive", errorMessage: "errorMessage", disabled: "disabled", required: "required", maxLength: "maxLength", minLength: "minLength", pattern: "pattern", min: "min", max: "max", step: "step", autocomplete: "autocomplete", name: "name", id: "id", leadingDropdownOptions: "leadingDropdownOptions", leadingDropdownValue: "leadingDropdownValue", leadingDropdownPlaceholder: "leadingDropdownPlaceholder", trailingDropdownOptions: "trailingDropdownOptions", trailingDropdownValue: "trailingDropdownValue", trailingDropdownPlaceholder: "trailingDropdownPlaceholder", leadingText: "leadingText", trailingText: "trailingText", multiline: ["multiline", "multiline", booleanAttribute], rows: ["rows", "rows", numberAttribute], resizable: ["resizable", "resizable", booleanAttribute], size: "size", showCharacterCount: "showCharacterCount", phoneMaxLength: "phoneMaxLength", phone: "phone", width: "width" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", inputKeydown: "inputKeydown", inputKeyup: "inputKeyup", leadingDropdownChange: "leadingDropdownChange", leadingDropdownValueChange: "leadingDropdownValueChange", trailingDropdownChange: "trailingDropdownChange", trailingDropdownValueChange: "trailingDropdownValueChange", phoneChange: "phoneChange", validChange: "validChange", leadingIconClick: "leadingIconClick" }, host: { properties: { "class.zen-input-wrapper": "this.hostClass" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ZenduInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-input-container\" [ngClass]=\"inputClasses\">\n  <!-- Label -->\n  @if (showLabel) {\n    <label\n      [for]=\"id\"\n      class=\"zen-input-label text text-sm text-weight-medium\"\n      [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n      {{ label | translate }}\n      @if (required) {\n        <span class=\"required-indicator\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input wrapper -->\n  <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n    <!-- Leading icon -->\n    @if (leadingIcon && variant === 'default' && !multiline) {\n      <i\n        class=\"material-icons zen-input-leading-icon\"\n        (click)=\"onLeadingIconClick($event)\">\n        {{ leadingIcon }}\n      </i>\n    }\n\n    <!-- Leading dropdown -->\n    @if (variant === 'leading-dropdown') {\n      <div\n        class=\"zen-input-leading-dropdown\">\n        <button type=\"button\"\n          class=\"zen-dropdown-trigger\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleLeadingDropdown(); $event.stopPropagation()\">\n          <span class=\"dropdown-label\">{{ getLeadingDropdownLabel() }}</span>\n          <i class=\"material-icons dropdown-icon\">expand_more</i>\n        </button>\n        @if (leadingDropdownOpen) {\n          <div class=\"zen-dropdown-menu\"\n            [ngClass]=\"{'open': leadingDropdownOpen}\">\n            @for (option of leadingDropdownOptions; track option) {\n              <button\n                type=\"button\"\n                class=\"zen-dropdown-option\"\n                [ngClass]=\"{'selected': option.value === leadingDropdownValue}\"\n                (click)=\"onLeadingDropdownChange(option.value); $event.stopPropagation()\">\n                @if (option.icon) {\n                  <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n                }\n                {{ option.label | translate }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Leading text -->\n    @if (variant === 'leading-text') {\n      <span\n        class=\"zen-input-leading-text text text-md text-weight-regular\">\n        {{ leadingText }}\n      </span>\n    }\n\n    <!-- Payment card icon -->\n    @if (variant === 'payment') {\n      <div\n        class=\"zen-payment-card-icon\">\n        <i class=\"material-icons card-icon\">payment</i>\n      </div>\n    }\n\n    <!-- Input content based on type -->\n    @if (type === 'tel') {\n      <ng-container *ngTemplateOutlet=\"phoneInputTemplate\"></ng-container>\n    } @else if (multiline) {\n      <textarea #inputElement\n        [id]=\"id\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [rows]=\"rows\"\n        [autocomplete]=\"autocomplete\"\n        class=\"zen-input-field text text-md text-weight-regular\"\n        (input)=\"onInputChange($event)\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\"></textarea>\n    } @else {\n      <input #inputElement\n        [type]=\"type\"\n        [id]=\"id\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [pattern]=\"pattern\"\n        [autocomplete]=\"autocomplete\"\n        class=\"zen-input-field text text-md text-weight-regular\"\n        [ngClass]=\"{'zen-payment-field': variant === 'payment'}\"\n        (input)=\"onInputChange($event)\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\" />\n    }\n\n    <!-- Multiline footer: help icon (left), then character count + resize handle (right).\n         Only rendered when it has content so an empty textarea keeps a full-height\n         scrollbar and symmetric padding (see the no-footer rule in SCSS). -->\n    @if (multiline && (resizable || helpIcon || showCharacterCount)) {\n      <div class=\"zen-textarea-footer\">\n        @if (helpIcon) {\n          <div class=\"zen-input-trailing-container\">\n            <button\n              type=\"button\"\n              class=\"zen-help-icon\"\n              [disabled]=\"disabled\"\n              (click)=\"onHelpIconClick($event); $event.stopPropagation()\">\n              <i class=\"material-icons-outlined\">help_outline</i>\n              @if (showHelpTooltip) {\n                <div class=\"zen-help-tooltip\"\n                  (click)=\"$event.stopPropagation()\">\n                  <div class=\"tooltip-content\">\n                    {{ helpTooltip | translate }}\n                  </div>\n                  <div class=\"tooltip-arrow\"></div>\n                </div>\n              }\n            </button>\n          </div>\n        }\n        <div class=\"zen-textarea-footer-end\">\n          @if (showCharacterCount) {\n            <span class=\"zen-character-count text text-sm text-weight-regular\">\n              {{ characterCount }}\n            </span>\n          }\n          @if (resizable) {\n            <span\n              class=\"zen-textarea-resize-handle\"\n              [class.disabled]=\"disabled\"\n              title=\"Drag to resize\"\n              (pointerdown)=\"onResizeStart($event)\"\n              (click)=\"$event.stopPropagation()\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M17.5 5.5 5.5 17.5M17.5 12.5 12.5 17.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n              </svg>\n            </span>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Default input template -->\n\n    <!-- Trailing elements container \u2014 render only when it has content, so a plain\n         input (e.g. number) doesn't reserve trailing space or shift its spinner. -->\n    @if (\n      variant === 'trailing-text' ||\n      (showCharacterCount && !helpIcon && variant === 'default' && !multiline) ||\n      (helpIcon && variant !== 'trailing-dropdown' && !multiline) ||\n      variant === 'trailing-dropdown'\n    ) {\n    <div class=\"zen-input-trailing-container\">\n      <!-- Trailing text -->\n      @if (variant === 'trailing-text') {\n        <span\n          class=\"zen-input-trailing-text text text-md text-weight-regular\">\n          {{ trailingText }}\n        </span>\n      }\n\n      <!-- Character counter -->\n      @if (showCharacterCount && !helpIcon && variant === 'default' && !multiline) {\n        <span\n          class=\"zen-character-count text text-sm text-weight-regular\">\n          {{ characterCount }}\n        </span>\n      }\n\n      <!-- Help icon -->\n      @if (helpIcon && variant !== 'trailing-dropdown' && !multiline) {\n        <button\n          type=\"button\"\n          class=\"zen-help-icon\"\n          [disabled]=\"disabled\"\n          (click)=\"onHelpIconClick($event); $event.stopPropagation()\">\n          <i class=\"material-icons-outlined\">help_outline</i>\n          <!-- Help tooltip -->\n          @if (showHelpTooltip) {\n            <div class=\"zen-help-tooltip\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tooltip-content\">\n                {{ helpTooltip | translate }}\n              </div>\n              <div class=\"tooltip-arrow\"></div>\n            </div>\n          }\n        </button>\n      }\n\n      <!-- Trailing dropdown -->\n      @if (variant === 'trailing-dropdown') {\n        <div\n          class=\"zen-input-trailing-dropdown\">\n          <button type=\"button\"\n            class=\"zen-dropdown-trigger\"\n            [disabled]=\"disabled\"\n            (click)=\"toggleTrailingDropdown(); $event.stopPropagation()\">\n            <span class=\"dropdown-label\">{{ getTrailingDropdownLabel() }}</span>\n            <i class=\"material-icons dropdown-icon\">expand_more</i>\n          </button>\n          @if (trailingDropdownOpen) {\n            <div class=\"zen-dropdown-menu dropdown-menu-right\"\n              [ngClass]=\"{'open': trailingDropdownOpen}\">\n              @for (option of trailingDropdownOptions; track option) {\n                <button\n                  type=\"button\"\n                  class=\"zen-dropdown-option\"\n                  [ngClass]=\"{'selected': option.value === trailingDropdownValue}\"\n                  (click)=\"onTrailingDropdownChange(option.value); $event.stopPropagation()\">\n                  @if (option.icon) {\n                    <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n                  }\n                  {{ option.label | translate }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    }\n  </div>\n\n  <!-- Hint text / Error message -->\n  @if (showHintText) {\n    <div\n      class=\"zen-input-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      {{ displayHintText | translate }}\n    </div>\n  }\n\n  <!-- Phone Country Dropdown (for tel type) -->\n  @if (type === 'tel' && isPhoneDropdownExpanded) {\n    <div\n      class=\"zen-phone-dropdown-menu\">\n      <div class=\"zen-phone-dropdown-list\">\n        <!-- Countries List -->\n        @for (country of countryList; track country) {\n          <button type=\"button\"\n            class=\"zen-phone-dropdown-item\"\n            [ngClass]=\"{'active': selectedCountry.countryName === country.countryName}\"\n            (click)=\"onCountryChanged(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 | translate }}</span>\n            <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n          </button>\n        }\n        <!-- Custom Country -->\n        <button type=\"button\"\n          class=\"zen-phone-dropdown-item\"\n          [ngClass]=\"{'active': selectedCountry.countryName === customCountry.countryName}\"\n          (click)=\"onCountryChanged(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 | translate }}</span>\n          <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n\n<!-- Phone Input Template -->\n<ng-template #phoneInputTemplate>\n  <!-- Phone country selector -->\n  <div class=\"zen-phone-country-select\">\n    <img class=\"zen-phone-country-flag\"\n      [src]=\"selectedCountry.flag\"\n      [alt]=\"selectedCountry.countryName\">\n    <span class=\"zen-phone-code\">{{ selectedCountry.countryCallingCode }}</span>\n    <button type=\"button\"\n      class=\"zen-phone-dropdown-btn\"\n      [disabled]=\"disabled\"\n      (click)=\"togglePhoneDropdown(); $event.stopPropagation()\">\n      <i class=\"material-icons zen-phone-expand-icon\"\n      [ngClass]=\"{'active': isPhoneDropdownExpanded}\">expand_more</i>\n    </button>\n  </div>\n\n  <!-- Phone input field -->\n  <input #inputElement\n    type=\"text\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [value]=\"phoneText\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [attr.maxlength]=\"phoneMaxLength\"\n    [attr.minlength]=\"minLength\"\n    [autocomplete]=\"autocomplete\"\n    class=\"zen-input-field text text-md text-weight-regular\"\n    (input)=\"onInputChange($event)\"\n    (focus)=\"onInputFocus($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (keyup)=\"onKeyup($event)\" />\n</ng-template>\n\n<!-- Click outside handler for dropdowns -->\n@if (leadingDropdownOpen || trailingDropdownOpen || isPhoneDropdownExpanded) {\n  <div\n    class=\"zen-dropdown-backdrop\"\n  (click)=\"closeDropdowns(); hidePhoneDropdown()\"></div>\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-label{color:#344054;display:flex;align-items:center;gap:4px}.zen-input-container .zen-input-label .required-indicator{color:#f04438}.zen-input-container .zen-input-label.disabled{color:#667085}.zen-input-container .zen-input-label.destructive{color:#344054}.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:not(.disabled){border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon{font-size:20px;color:#98a2b3;flex-shrink:0;cursor:pointer;transition:color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon:hover{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{position:relative;flex-shrink:0;margin-right:4px}.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 .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.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-leading-text{color:#667085;flex-shrink:0;padding-right:4px}.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:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container{display:flex;align-items:center;gap:8px;flex-shrink:0}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-text{color:#667085;flex-shrink:0;padding-left:4px}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-character-count{color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon{position:relative;display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;cursor:pointer}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon i{font-size:16px;color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:hover:not(:disabled) i{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:disabled{cursor:not-allowed}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:disabled i{color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip{position:absolute;bottom:calc(100% + 8px);right:50%;transform:translate(50%);z-index:1000;white-space:nowrap}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip .tooltip-content{background:#101828;color:#fff;padding:8px 12px;border-radius:8px;font-family:Inter,sans-serif;font-size:12px;line-height:18px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;max-width:200px;white-space:normal}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .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}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown{position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;border-left:1px solid #D0D5DD;padding:0 0 0 8px;margin-left:4px;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.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:200px;max-height:240px;overflow-y:auto;z-index:100;padding:4px}.zen-input-container .zen-dropdown-menu.dropdown-menu-right{left:auto;right:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 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 .option-icon{font-size:20px;color:#98a2b3}.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;font-weight:500}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .option-icon{color:#136ab6}.zen-input-container .zen-input-hint{display:flex;align-items:center;gap:4px;color:#667085}.zen-input-container .zen-input-hint .hint-icon{font-size:16px;color:#f04438}.zen-input-container .zen-input-hint.destructive{color:#f04438}.zen-input-container.focused .zen-input-field-wrapper{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container.focused .zen-input-field-wrapper.destructive{border-color:#fda29b;box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.zen-input-container.filled .zen-input-field-wrapper{background:#fff}.zen-input-container.disabled .zen-input-field-wrapper{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.zen-input-container.disabled .zen-input-field-wrapper:hover{border-color:#d0d5dd}.zen-input-container.destructive .zen-input-field-wrapper{border-color:#fda29b}.zen-input-container.destructive .zen-input-field-wrapper:hover:not(.disabled){border-color:#f97066}.zen-input-container.multiline .zen-input-field-wrapper{flex-direction:column;align-items:stretch;min-height:auto;gap:0;padding:0}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field{flex:0 0 auto;box-sizing:border-box;width:100%;resize:none;min-height:80px;padding:10px 6px 0 14px;font-family:inherit;line-height:24px;scrollbar-gutter:stable}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar{width:8px}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-track{background:transparent;border:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-thumb{background:#d0d5dd;border:none;border-radius:4px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer{display:flex;align-items:center;gap:8px;padding:0 14px 10px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer-end{display:flex;align-items:center;gap:8px;margin-left:auto}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle{display:inline-flex;align-items:center;justify-content:center;color:#98a2b3;cursor:ns-resize;touch-action:none;transition:color .2s ease}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle svg{display:block}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle:hover{color:#475467}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle.disabled{color:#d0d5dd;cursor:not-allowed;pointer-events:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-character-count{color:#98a2b3}.zen-input-container.multiline .zen-input-field-wrapper:not(:has(.zen-textarea-footer)) .zen-input-field{padding-bottom:10px}.zen-input-container.size-sm .zen-input-label{font-size:12px;line-height:18px}.zen-input-container.size-sm .zen-input-field-wrapper{padding:8px 12px;min-height:36px;box-sizing:border-box}.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-field,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-leading-text,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-trailing-text{font-size:14px;line-height:20px}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-input-field{font-family:Courier New,Courier,monospace}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #F2F4F7;border-radius:4px;width:34px;height:24px;flex-shrink:0}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon .card-icon{font-size:16px;color:#4285f4;line-height:1}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon zen-icon{font-size:16px;color:#98a2b3;line-height:1}.zen-input-container.variant-input-field .zen-input-field-wrapper{padding:12px 14px;min-height:48px}.zen-phone-country-select{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-phone-country-select .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-phone-country-select .zen-phone-code{color:#344054;font-family:Inter,sans-serif;font-size:14px;font-weight:500;min-width:max-content}.zen-phone-country-select .zen-phone-dropdown-btn{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.zen-phone-country-select .zen-phone-dropdown-btn:disabled{cursor:not-allowed;opacity:.5}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon.active{transform:rotate(180deg)}.zen-phone-country-select .zen-phone-dropdown-btn:hover:not(:disabled) .zen-phone-expand-icon{color:#475467}.zen-phone-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}.zen-phone-dropdown-menu .zen-phone-dropdown-list{padding:4px}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s ease;font-family:Inter,sans-serif;font-size:14px;text-align:left;color:#344054}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-name{flex:1;min-width:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item:hover{background:#f9fafb}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active{background:#f1f7fe;color:#105494}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active .zen-phone-country-code{color:#136ab6}.zen-payment-field{font-family:Courier New,Courier,monospace!important;letter-spacing:1px}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-input-container\" [ngClass]=\"inputClasses\">\n  <!-- Label -->\n  @if (showLabel) {\n    <label\n      [for]=\"id\"\n      class=\"zen-input-label text text-sm text-weight-medium\"\n      [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n      {{ label | translate }}\n      @if (required) {\n        <span class=\"required-indicator\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input wrapper -->\n  <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n    <!-- Leading icon -->\n    @if (leadingIcon && variant === 'default' && !multiline) {\n      <i\n        class=\"material-icons zen-input-leading-icon\"\n        (click)=\"onLeadingIconClick($event)\">\n        {{ leadingIcon }}\n      </i>\n    }\n\n    <!-- Leading dropdown -->\n    @if (variant === 'leading-dropdown') {\n      <div\n        class=\"zen-input-leading-dropdown\">\n        <button type=\"button\"\n          class=\"zen-dropdown-trigger\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleLeadingDropdown(); $event.stopPropagation()\">\n          <span class=\"dropdown-label\">{{ getLeadingDropdownLabel() }}</span>\n          <i class=\"material-icons dropdown-icon\">expand_more</i>\n        </button>\n        @if (leadingDropdownOpen) {\n          <div class=\"zen-dropdown-menu\"\n            [ngClass]=\"{'open': leadingDropdownOpen}\">\n            @for (option of leadingDropdownOptions; track option) {\n              <button\n                type=\"button\"\n                class=\"zen-dropdown-option\"\n                [ngClass]=\"{'selected': option.value === leadingDropdownValue}\"\n                (click)=\"onLeadingDropdownChange(option.value); $event.stopPropagation()\">\n                @if (option.icon) {\n                  <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n                }\n                {{ option.label | translate }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Leading text -->\n    @if (variant === 'leading-text') {\n      <span\n        class=\"zen-input-leading-text text text-md text-weight-regular\">\n        {{ leadingText }}\n      </span>\n    }\n\n    <!-- Payment card icon -->\n    @if (variant === 'payment') {\n      <div\n        class=\"zen-payment-card-icon\">\n        <i class=\"material-icons card-icon\">payment</i>\n      </div>\n    }\n\n    <!-- Input content based on type -->\n    @if (type === 'tel') {\n      <ng-container *ngTemplateOutlet=\"phoneInputTemplate\"></ng-container>\n    } @else if (multiline) {\n      <textarea #inputElement\n        [id]=\"id\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [rows]=\"rows\"\n        [autocomplete]=\"autocomplete\"\n        class=\"zen-input-field text text-md text-weight-regular\"\n        (input)=\"onInputChange($event)\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\"></textarea>\n    } @else {\n      <input #inputElement\n        [type]=\"type\"\n        [id]=\"id\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.step]=\"step\"\n        [pattern]=\"pattern\"\n        [autocomplete]=\"autocomplete\"\n        class=\"zen-input-field text text-md text-weight-regular\"\n        [ngClass]=\"{'zen-payment-field': variant === 'payment'}\"\n        (input)=\"onInputChange($event)\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\" />\n    }\n\n    <!-- Multiline footer: help icon (left), then character count + resize handle (right).\n         Only rendered when it has content so an empty textarea keeps a full-height\n         scrollbar and symmetric padding (see the no-footer rule in SCSS). -->\n    @if (multiline && (resizable || helpIcon || showCharacterCount)) {\n      <div class=\"zen-textarea-footer\">\n        @if (helpIcon) {\n          <div class=\"zen-input-trailing-container\">\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              <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\">\n                  {{ helpTooltip | translate }}\n                </div>\n                <div class=\"tooltip-arrow\"></div>\n              </div>\n            </span>\n          </div>\n        }\n        <div class=\"zen-textarea-footer-end\">\n          @if (showCharacterCount) {\n            <span class=\"zen-character-count text text-sm text-weight-regular\">\n              {{ characterCount }}\n            </span>\n          }\n          @if (resizable) {\n            <span\n              class=\"zen-textarea-resize-handle\"\n              [class.disabled]=\"disabled\"\n              title=\"Drag to resize\"\n              (pointerdown)=\"onResizeStart($event)\"\n              (click)=\"$event.stopPropagation()\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M17.5 5.5 5.5 17.5M17.5 12.5 12.5 17.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n              </svg>\n            </span>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Default input template -->\n\n    <!-- Trailing elements container \u2014 render only when it has content, so a plain\n         input (e.g. number) doesn't reserve trailing space or shift its spinner. -->\n    @if (\n      variant === 'trailing-text' ||\n      (showCharacterCount && !helpIcon && variant === 'default' && !multiline) ||\n      (helpIcon && variant !== 'trailing-dropdown' && !multiline) ||\n      variant === 'trailing-dropdown'\n    ) {\n    <div class=\"zen-input-trailing-container\">\n      <!-- Trailing text -->\n      @if (variant === 'trailing-text') {\n        <span\n          class=\"zen-input-trailing-text text text-md text-weight-regular\">\n          {{ trailingText }}\n        </span>\n      }\n\n      <!-- Character counter -->\n      @if (showCharacterCount && !helpIcon && variant === 'default' && !multiline) {\n        <span\n          class=\"zen-character-count text text-sm text-weight-regular\">\n          {{ characterCount }}\n        </span>\n      }\n\n      <!-- Help icon -->\n      @if (helpIcon && variant !== 'trailing-dropdown' && !multiline) {\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          <!-- Help tooltip (shown on hover / focus) -->\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\">\n              {{ helpTooltip | translate }}\n            </div>\n            <div class=\"tooltip-arrow\"></div>\n          </div>\n        </span>\n      }\n\n      <!-- Trailing dropdown -->\n      @if (variant === 'trailing-dropdown') {\n        <div\n          class=\"zen-input-trailing-dropdown\">\n          <button type=\"button\"\n            class=\"zen-dropdown-trigger\"\n            [disabled]=\"disabled\"\n            (click)=\"toggleTrailingDropdown(); $event.stopPropagation()\">\n            <span class=\"dropdown-label\">{{ getTrailingDropdownLabel() }}</span>\n            <i class=\"material-icons dropdown-icon\">expand_more</i>\n          </button>\n          @if (trailingDropdownOpen) {\n            <div class=\"zen-dropdown-menu dropdown-menu-right\"\n              [ngClass]=\"{'open': trailingDropdownOpen}\">\n              @for (option of trailingDropdownOptions; track option) {\n                <button\n                  type=\"button\"\n                  class=\"zen-dropdown-option\"\n                  [ngClass]=\"{'selected': option.value === trailingDropdownValue}\"\n                  (click)=\"onTrailingDropdownChange(option.value); $event.stopPropagation()\">\n                  @if (option.icon) {\n                    <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n                  }\n                  {{ option.label | translate }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    }\n  </div>\n\n  <!-- Hint text / Error message -->\n  @if (showHintText) {\n    <div\n      class=\"zen-input-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      {{ displayHintText | translate }}\n    </div>\n  }\n\n  <!-- Phone Country Dropdown (for tel type) -->\n  @if (type === 'tel' && isPhoneDropdownExpanded) {\n    <div\n      class=\"zen-phone-dropdown-menu\">\n      <div class=\"zen-phone-dropdown-list\">\n        <!-- Countries List -->\n        @for (country of countryList; track country) {\n          <button type=\"button\"\n            class=\"zen-phone-dropdown-item\"\n            [ngClass]=\"{'active': selectedCountry.countryName === country.countryName}\"\n            (click)=\"onCountryChanged(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 | translate }}</span>\n            <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n          </button>\n        }\n        <!-- Custom Country -->\n        <button type=\"button\"\n          class=\"zen-phone-dropdown-item\"\n          [ngClass]=\"{'active': selectedCountry.countryName === customCountry.countryName}\"\n          (click)=\"onCountryChanged(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 | translate }}</span>\n          <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n\n<!-- Phone Input Template -->\n<ng-template #phoneInputTemplate>\n  <!-- Phone country selector -->\n  <div class=\"zen-phone-country-select\">\n    <img class=\"zen-phone-country-flag\"\n      [src]=\"selectedCountry.flag\"\n      [alt]=\"selectedCountry.countryName\">\n    <span class=\"zen-phone-code\">{{ selectedCountry.countryCallingCode }}</span>\n    <button type=\"button\"\n      class=\"zen-phone-dropdown-btn\"\n      [disabled]=\"disabled\"\n      (click)=\"togglePhoneDropdown(); $event.stopPropagation()\">\n      <i class=\"material-icons zen-phone-expand-icon\"\n      [ngClass]=\"{'active': isPhoneDropdownExpanded}\">expand_more</i>\n    </button>\n  </div>\n\n  <!-- Phone input field -->\n  <input #inputElement\n    type=\"text\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [value]=\"phoneText\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [attr.maxlength]=\"phoneMaxLength\"\n    [attr.minlength]=\"minLength\"\n    [autocomplete]=\"autocomplete\"\n    class=\"zen-input-field text text-md text-weight-regular\"\n    (input)=\"onInputChange($event)\"\n    (focus)=\"onInputFocus($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (keyup)=\"onKeyup($event)\" />\n</ng-template>\n\n<!-- Click outside handler for dropdowns -->\n@if (leadingDropdownOpen || trailingDropdownOpen || isPhoneDropdownExpanded) {\n  <div\n    class=\"zen-dropdown-backdrop\"\n  (click)=\"closeDropdowns(); hidePhoneDropdown()\"></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-label{color:#344054;display:flex;align-items:center;gap:4px}.zen-input-container .zen-input-label .required-indicator{color:#f04438}.zen-input-container .zen-input-label.disabled{color:#667085}.zen-input-container .zen-input-label.destructive{color:#344054}.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:not(.disabled){border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon{font-size:20px;color:#98a2b3;flex-shrink:0;cursor:pointer;transition:color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon:hover{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{position:relative;flex-shrink:0;margin-right:4px}.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 .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.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-leading-text{color:#667085;flex-shrink:0;padding-right:4px}.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:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container{display:flex;align-items:center;gap:8px;flex-shrink:0}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-text{color:#667085;flex-shrink:0;padding-left:4px}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-character-count{color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;cursor:help;outline:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon i{font-size:16px;color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):hover i,.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):focus-visible i{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon.disabled{cursor:not-allowed}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon.disabled i{color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):hover .zen-help-tooltip,.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):focus-visible .zen-help-tooltip{display:block}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .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}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-start{left:-6px;right:auto;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-start .tooltip-arrow{left:8px;right:auto;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-end{left:auto;right:-6px;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-end .tooltip-arrow{left:auto;right:8px;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.place-below{top:calc(100% + 8px);bottom:auto}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.place-below .tooltip-arrow{top:-6px;bottom:auto;border-top:none;border-bottom:6px solid #101828}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .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}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .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}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown{position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;border-left:1px solid #D0D5DD;padding:0 0 0 8px;margin-left:4px;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.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:200px;max-height:240px;overflow-y:auto;z-index:100;padding:4px}.zen-input-container .zen-dropdown-menu.dropdown-menu-right{left:auto;right:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 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 .option-icon{font-size:20px;color:#98a2b3}.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;font-weight:500}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .option-icon{color:#136ab6}.zen-input-container .zen-input-hint{display:flex;align-items:center;gap:4px;color:#667085}.zen-input-container .zen-input-hint .hint-icon{font-size:16px;color:#f04438}.zen-input-container .zen-input-hint.destructive{color:#f04438}.zen-input-container.focused .zen-input-field-wrapper{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container.focused .zen-input-field-wrapper.destructive{border-color:#fda29b;box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.zen-input-container.filled .zen-input-field-wrapper{background:#fff}.zen-input-container.disabled .zen-input-field-wrapper{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.zen-input-container.disabled .zen-input-field-wrapper:hover{border-color:#d0d5dd}.zen-input-container.destructive .zen-input-field-wrapper{border-color:#fda29b}.zen-input-container.destructive .zen-input-field-wrapper:hover:not(.disabled){border-color:#f97066}.zen-input-container.multiline .zen-input-field-wrapper{flex-direction:column;align-items:stretch;min-height:auto;gap:0;padding:0}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field{flex:0 0 auto;box-sizing:border-box;width:100%;resize:none;min-height:80px;padding:10px 6px 0 14px;font-family:inherit;line-height:24px;scrollbar-gutter:stable}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar{width:8px}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-track{background:transparent;border:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-thumb{background:#d0d5dd;border:none;border-radius:4px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer{display:flex;align-items:center;gap:8px;padding:0 14px 10px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer-end{display:flex;align-items:center;gap:8px;margin-left:auto}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle{display:inline-flex;align-items:center;justify-content:center;color:#98a2b3;cursor:ns-resize;touch-action:none;transition:color .2s ease}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle svg{display:block}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle:hover{color:#475467}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle.disabled{color:#d0d5dd;cursor:not-allowed;pointer-events:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-character-count{color:#98a2b3}.zen-input-container.multiline .zen-input-field-wrapper:not(:has(.zen-textarea-footer)) .zen-input-field{padding-bottom:10px}.zen-input-container.size-sm .zen-input-label{font-size:12px;line-height:18px}.zen-input-container.size-sm .zen-input-field-wrapper{padding:8px 12px;min-height:36px;box-sizing:border-box}.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-field,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-leading-text,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-trailing-text{font-size:14px;line-height:20px}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-input-field{font-family:Courier New,Courier,monospace}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #F2F4F7;border-radius:4px;width:34px;height:24px;flex-shrink:0}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon .card-icon{font-size:16px;color:#4285f4;line-height:1}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon zen-icon{font-size:16px;color:#98a2b3;line-height:1}.zen-input-container.variant-input-field .zen-input-field-wrapper{padding:12px 14px;min-height:48px}.zen-phone-country-select{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-phone-country-select .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-phone-country-select .zen-phone-code{color:#344054;font-family:Inter,sans-serif;font-size:14px;font-weight:500;min-width:max-content}.zen-phone-country-select .zen-phone-dropdown-btn{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.zen-phone-country-select .zen-phone-dropdown-btn:disabled{cursor:not-allowed;opacity:.5}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon.active{transform:rotate(180deg)}.zen-phone-country-select .zen-phone-dropdown-btn:hover:not(:disabled) .zen-phone-expand-icon{color:#475467}.zen-phone-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}.zen-phone-dropdown-menu .zen-phone-dropdown-list{padding:4px}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s ease;font-family:Inter,sans-serif;font-size:14px;text-align:left;color:#344054}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-name{flex:1;min-width:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item:hover{background:#f9fafb}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active{background:#f1f7fe;color:#105494}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active .zen-phone-country-code{color:#136ab6}.zen-payment-field{font-family:Courier New,Courier,monospace!important;letter-spacing:1px}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduInputComponent, decorators: [{
             type: Component,
@@ -955,7 +980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                             useExisting: forwardRef(() => ZenduInputComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-input-container\" [ngClass]=\"inputClasses\">\n  <!-- Label -->\n  @if (showLabel) {\n    <label\n      [for]=\"id\"\n      class=\"zen-input-label text text-sm text-weight-medium\"\n      [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n      {{ label | translate }}\n      @if (required) {\n        <span class=\"required-indicator\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input wrapper -->\n  <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n    <!-- Leading icon -->\n    @if (leadingIcon && variant === 'default' && !multiline) {\n      <i\n        class=\"material-icons zen-input-leading-icon\"\n        (click)=\"onLeadingIconClick($event)\">\n        {{ leadingIcon }}\n      </i>\n    }\n\n    <!-- Leading dropdown -->\n    @if (variant === 'leading-dropdown') {\n      <div\n        class=\"zen-input-leading-dropdown\">\n        <button type=\"button\"\n          class=\"zen-dropdown-trigger\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleLeadingDropdown(); $event.stopPropagation()\">\n          <span class=\"dropdown-label\">{{ getLeadingDropdownLabel() }}</span>\n          <i class=\"material-icons dropdown-icon\">expand_more</i>\n        </button>\n        @if (leadingDropdownOpen) {\n          <div class=\"zen-dropdown-menu\"\n            [ngClass]=\"{'open': leadingDropdownOpen}\">\n            @for (option of leadingDropdownOptions; track option) {\n              <button\n                type=\"button\"\n                class=\"zen-dropdown-option\"\n                [ngClass]=\"{'selected': option.value === leadingDropdownValue}\"\n                (click)=\"onLeadingDropdownChange(option.value); $event.stopPropagation()\">\n                @if (option.icon) {\n                  <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n                }\n                {{ option.label | translate }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Leading text -->\n    @if (variant === 'leading-text') {\n      <span\n        class=\"zen-input-leading-text text text-md text-weight-regular\">\n        {{ leadingText }}\n      </span>\n    }\n\n    <!-- Payment card icon -->\n    @if (variant === 'payment') {\n      <div\n        class=\"zen-payment-card-icon\">\n        <i class=\"material-icons card-icon\">payment</i>\n      </div>\n    }\n\n    <!-- Input content based on type -->\n    @if (type === 'tel') {\n      <ng-container *ngTemplateOutlet=\"phoneInputTemplate\"></ng-container>\n    } @else if (multiline) {\n      <textarea #inputElement\n        [id]=\"id\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [rows]=\"rows\"\n        [autocomplete]=\"autocomplete\"\n        class=\"zen-input-field text text-md text-weight-regular\"\n        (input)=\"onInputChange($event)\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\"></textarea>\n    } @else {\n      <input #inputElement\n        [type]=\"type\"\n        [id]=\"id\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [pattern]=\"pattern\"\n        [autocomplete]=\"autocomplete\"\n        class=\"zen-input-field text text-md text-weight-regular\"\n        [ngClass]=\"{'zen-payment-field': variant === 'payment'}\"\n        (input)=\"onInputChange($event)\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\" />\n    }\n\n    <!-- Multiline footer: help icon (left), then character count + resize handle (right).\n         Only rendered when it has content so an empty textarea keeps a full-height\n         scrollbar and symmetric padding (see the no-footer rule in SCSS). -->\n    @if (multiline && (resizable || helpIcon || showCharacterCount)) {\n      <div class=\"zen-textarea-footer\">\n        @if (helpIcon) {\n          <div class=\"zen-input-trailing-container\">\n            <button\n              type=\"button\"\n              class=\"zen-help-icon\"\n              [disabled]=\"disabled\"\n              (click)=\"onHelpIconClick($event); $event.stopPropagation()\">\n              <i class=\"material-icons-outlined\">help_outline</i>\n              @if (showHelpTooltip) {\n                <div class=\"zen-help-tooltip\"\n                  (click)=\"$event.stopPropagation()\">\n                  <div class=\"tooltip-content\">\n                    {{ helpTooltip | translate }}\n                  </div>\n                  <div class=\"tooltip-arrow\"></div>\n                </div>\n              }\n            </button>\n          </div>\n        }\n        <div class=\"zen-textarea-footer-end\">\n          @if (showCharacterCount) {\n            <span class=\"zen-character-count text text-sm text-weight-regular\">\n              {{ characterCount }}\n            </span>\n          }\n          @if (resizable) {\n            <span\n              class=\"zen-textarea-resize-handle\"\n              [class.disabled]=\"disabled\"\n              title=\"Drag to resize\"\n              (pointerdown)=\"onResizeStart($event)\"\n              (click)=\"$event.stopPropagation()\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M17.5 5.5 5.5 17.5M17.5 12.5 12.5 17.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n              </svg>\n            </span>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Default input template -->\n\n    <!-- Trailing elements container \u2014 render only when it has content, so a plain\n         input (e.g. number) doesn't reserve trailing space or shift its spinner. -->\n    @if (\n      variant === 'trailing-text' ||\n      (showCharacterCount && !helpIcon && variant === 'default' && !multiline) ||\n      (helpIcon && variant !== 'trailing-dropdown' && !multiline) ||\n      variant === 'trailing-dropdown'\n    ) {\n    <div class=\"zen-input-trailing-container\">\n      <!-- Trailing text -->\n      @if (variant === 'trailing-text') {\n        <span\n          class=\"zen-input-trailing-text text text-md text-weight-regular\">\n          {{ trailingText }}\n        </span>\n      }\n\n      <!-- Character counter -->\n      @if (showCharacterCount && !helpIcon && variant === 'default' && !multiline) {\n        <span\n          class=\"zen-character-count text text-sm text-weight-regular\">\n          {{ characterCount }}\n        </span>\n      }\n\n      <!-- Help icon -->\n      @if (helpIcon && variant !== 'trailing-dropdown' && !multiline) {\n        <button\n          type=\"button\"\n          class=\"zen-help-icon\"\n          [disabled]=\"disabled\"\n          (click)=\"onHelpIconClick($event); $event.stopPropagation()\">\n          <i class=\"material-icons-outlined\">help_outline</i>\n          <!-- Help tooltip -->\n          @if (showHelpTooltip) {\n            <div class=\"zen-help-tooltip\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tooltip-content\">\n                {{ helpTooltip | translate }}\n              </div>\n              <div class=\"tooltip-arrow\"></div>\n            </div>\n          }\n        </button>\n      }\n\n      <!-- Trailing dropdown -->\n      @if (variant === 'trailing-dropdown') {\n        <div\n          class=\"zen-input-trailing-dropdown\">\n          <button type=\"button\"\n            class=\"zen-dropdown-trigger\"\n            [disabled]=\"disabled\"\n            (click)=\"toggleTrailingDropdown(); $event.stopPropagation()\">\n            <span class=\"dropdown-label\">{{ getTrailingDropdownLabel() }}</span>\n            <i class=\"material-icons dropdown-icon\">expand_more</i>\n          </button>\n          @if (trailingDropdownOpen) {\n            <div class=\"zen-dropdown-menu dropdown-menu-right\"\n              [ngClass]=\"{'open': trailingDropdownOpen}\">\n              @for (option of trailingDropdownOptions; track option) {\n                <button\n                  type=\"button\"\n                  class=\"zen-dropdown-option\"\n                  [ngClass]=\"{'selected': option.value === trailingDropdownValue}\"\n                  (click)=\"onTrailingDropdownChange(option.value); $event.stopPropagation()\">\n                  @if (option.icon) {\n                    <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n                  }\n                  {{ option.label | translate }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    }\n  </div>\n\n  <!-- Hint text / Error message -->\n  @if (showHintText) {\n    <div\n      class=\"zen-input-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      {{ displayHintText | translate }}\n    </div>\n  }\n\n  <!-- Phone Country Dropdown (for tel type) -->\n  @if (type === 'tel' && isPhoneDropdownExpanded) {\n    <div\n      class=\"zen-phone-dropdown-menu\">\n      <div class=\"zen-phone-dropdown-list\">\n        <!-- Countries List -->\n        @for (country of countryList; track country) {\n          <button type=\"button\"\n            class=\"zen-phone-dropdown-item\"\n            [ngClass]=\"{'active': selectedCountry.countryName === country.countryName}\"\n            (click)=\"onCountryChanged(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 | translate }}</span>\n            <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n          </button>\n        }\n        <!-- Custom Country -->\n        <button type=\"button\"\n          class=\"zen-phone-dropdown-item\"\n          [ngClass]=\"{'active': selectedCountry.countryName === customCountry.countryName}\"\n          (click)=\"onCountryChanged(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 | translate }}</span>\n          <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n\n<!-- Phone Input Template -->\n<ng-template #phoneInputTemplate>\n  <!-- Phone country selector -->\n  <div class=\"zen-phone-country-select\">\n    <img class=\"zen-phone-country-flag\"\n      [src]=\"selectedCountry.flag\"\n      [alt]=\"selectedCountry.countryName\">\n    <span class=\"zen-phone-code\">{{ selectedCountry.countryCallingCode }}</span>\n    <button type=\"button\"\n      class=\"zen-phone-dropdown-btn\"\n      [disabled]=\"disabled\"\n      (click)=\"togglePhoneDropdown(); $event.stopPropagation()\">\n      <i class=\"material-icons zen-phone-expand-icon\"\n      [ngClass]=\"{'active': isPhoneDropdownExpanded}\">expand_more</i>\n    </button>\n  </div>\n\n  <!-- Phone input field -->\n  <input #inputElement\n    type=\"text\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [value]=\"phoneText\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [attr.maxlength]=\"phoneMaxLength\"\n    [attr.minlength]=\"minLength\"\n    [autocomplete]=\"autocomplete\"\n    class=\"zen-input-field text text-md text-weight-regular\"\n    (input)=\"onInputChange($event)\"\n    (focus)=\"onInputFocus($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (keyup)=\"onKeyup($event)\" />\n</ng-template>\n\n<!-- Click outside handler for dropdowns -->\n@if (leadingDropdownOpen || trailingDropdownOpen || isPhoneDropdownExpanded) {\n  <div\n    class=\"zen-dropdown-backdrop\"\n  (click)=\"closeDropdowns(); hidePhoneDropdown()\"></div>\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-label{color:#344054;display:flex;align-items:center;gap:4px}.zen-input-container .zen-input-label .required-indicator{color:#f04438}.zen-input-container .zen-input-label.disabled{color:#667085}.zen-input-container .zen-input-label.destructive{color:#344054}.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:not(.disabled){border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon{font-size:20px;color:#98a2b3;flex-shrink:0;cursor:pointer;transition:color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon:hover{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{position:relative;flex-shrink:0;margin-right:4px}.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 .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.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-leading-text{color:#667085;flex-shrink:0;padding-right:4px}.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:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container{display:flex;align-items:center;gap:8px;flex-shrink:0}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-text{color:#667085;flex-shrink:0;padding-left:4px}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-character-count{color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon{position:relative;display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;cursor:pointer}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon i{font-size:16px;color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:hover:not(:disabled) i{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:disabled{cursor:not-allowed}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:disabled i{color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip{position:absolute;bottom:calc(100% + 8px);right:50%;transform:translate(50%);z-index:1000;white-space:nowrap}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip .tooltip-content{background:#101828;color:#fff;padding:8px 12px;border-radius:8px;font-family:Inter,sans-serif;font-size:12px;line-height:18px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;max-width:200px;white-space:normal}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .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}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown{position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;border-left:1px solid #D0D5DD;padding:0 0 0 8px;margin-left:4px;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.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:200px;max-height:240px;overflow-y:auto;z-index:100;padding:4px}.zen-input-container .zen-dropdown-menu.dropdown-menu-right{left:auto;right:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 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 .option-icon{font-size:20px;color:#98a2b3}.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;font-weight:500}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .option-icon{color:#136ab6}.zen-input-container .zen-input-hint{display:flex;align-items:center;gap:4px;color:#667085}.zen-input-container .zen-input-hint .hint-icon{font-size:16px;color:#f04438}.zen-input-container .zen-input-hint.destructive{color:#f04438}.zen-input-container.focused .zen-input-field-wrapper{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container.focused .zen-input-field-wrapper.destructive{border-color:#fda29b;box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.zen-input-container.filled .zen-input-field-wrapper{background:#fff}.zen-input-container.disabled .zen-input-field-wrapper{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.zen-input-container.disabled .zen-input-field-wrapper:hover{border-color:#d0d5dd}.zen-input-container.destructive .zen-input-field-wrapper{border-color:#fda29b}.zen-input-container.destructive .zen-input-field-wrapper:hover:not(.disabled){border-color:#f97066}.zen-input-container.multiline .zen-input-field-wrapper{flex-direction:column;align-items:stretch;min-height:auto;gap:0;padding:0}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field{flex:0 0 auto;box-sizing:border-box;width:100%;resize:none;min-height:80px;padding:10px 6px 0 14px;font-family:inherit;line-height:24px;scrollbar-gutter:stable}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar{width:8px}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-track{background:transparent;border:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-thumb{background:#d0d5dd;border:none;border-radius:4px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer{display:flex;align-items:center;gap:8px;padding:0 14px 10px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer-end{display:flex;align-items:center;gap:8px;margin-left:auto}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle{display:inline-flex;align-items:center;justify-content:center;color:#98a2b3;cursor:ns-resize;touch-action:none;transition:color .2s ease}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle svg{display:block}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle:hover{color:#475467}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle.disabled{color:#d0d5dd;cursor:not-allowed;pointer-events:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-character-count{color:#98a2b3}.zen-input-container.multiline .zen-input-field-wrapper:not(:has(.zen-textarea-footer)) .zen-input-field{padding-bottom:10px}.zen-input-container.size-sm .zen-input-label{font-size:12px;line-height:18px}.zen-input-container.size-sm .zen-input-field-wrapper{padding:8px 12px;min-height:36px;box-sizing:border-box}.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-field,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-leading-text,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-trailing-text{font-size:14px;line-height:20px}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-input-field{font-family:Courier New,Courier,monospace}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #F2F4F7;border-radius:4px;width:34px;height:24px;flex-shrink:0}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon .card-icon{font-size:16px;color:#4285f4;line-height:1}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon zen-icon{font-size:16px;color:#98a2b3;line-height:1}.zen-input-container.variant-input-field .zen-input-field-wrapper{padding:12px 14px;min-height:48px}.zen-phone-country-select{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-phone-country-select .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-phone-country-select .zen-phone-code{color:#344054;font-family:Inter,sans-serif;font-size:14px;font-weight:500;min-width:max-content}.zen-phone-country-select .zen-phone-dropdown-btn{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.zen-phone-country-select .zen-phone-dropdown-btn:disabled{cursor:not-allowed;opacity:.5}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon.active{transform:rotate(180deg)}.zen-phone-country-select .zen-phone-dropdown-btn:hover:not(:disabled) .zen-phone-expand-icon{color:#475467}.zen-phone-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}.zen-phone-dropdown-menu .zen-phone-dropdown-list{padding:4px}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s ease;font-family:Inter,sans-serif;font-size:14px;text-align:left;color:#344054}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-name{flex:1;min-width:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item:hover{background:#f9fafb}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active{background:#f1f7fe;color:#105494}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active .zen-phone-country-code{color:#136ab6}.zen-payment-field{font-family:Courier New,Courier,monospace!important;letter-spacing:1px}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-input-container\" [ngClass]=\"inputClasses\">\n  <!-- Label -->\n  @if (showLabel) {\n    <label\n      [for]=\"id\"\n      class=\"zen-input-label text text-sm text-weight-medium\"\n      [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n      {{ label | translate }}\n      @if (required) {\n        <span class=\"required-indicator\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input wrapper -->\n  <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n    <!-- Leading icon -->\n    @if (leadingIcon && variant === 'default' && !multiline) {\n      <i\n        class=\"material-icons zen-input-leading-icon\"\n        (click)=\"onLeadingIconClick($event)\">\n        {{ leadingIcon }}\n      </i>\n    }\n\n    <!-- Leading dropdown -->\n    @if (variant === 'leading-dropdown') {\n      <div\n        class=\"zen-input-leading-dropdown\">\n        <button type=\"button\"\n          class=\"zen-dropdown-trigger\"\n          [disabled]=\"disabled\"\n          (click)=\"toggleLeadingDropdown(); $event.stopPropagation()\">\n          <span class=\"dropdown-label\">{{ getLeadingDropdownLabel() }}</span>\n          <i class=\"material-icons dropdown-icon\">expand_more</i>\n        </button>\n        @if (leadingDropdownOpen) {\n          <div class=\"zen-dropdown-menu\"\n            [ngClass]=\"{'open': leadingDropdownOpen}\">\n            @for (option of leadingDropdownOptions; track option) {\n              <button\n                type=\"button\"\n                class=\"zen-dropdown-option\"\n                [ngClass]=\"{'selected': option.value === leadingDropdownValue}\"\n                (click)=\"onLeadingDropdownChange(option.value); $event.stopPropagation()\">\n                @if (option.icon) {\n                  <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n                }\n                {{ option.label | translate }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Leading text -->\n    @if (variant === 'leading-text') {\n      <span\n        class=\"zen-input-leading-text text text-md text-weight-regular\">\n        {{ leadingText }}\n      </span>\n    }\n\n    <!-- Payment card icon -->\n    @if (variant === 'payment') {\n      <div\n        class=\"zen-payment-card-icon\">\n        <i class=\"material-icons card-icon\">payment</i>\n      </div>\n    }\n\n    <!-- Input content based on type -->\n    @if (type === 'tel') {\n      <ng-container *ngTemplateOutlet=\"phoneInputTemplate\"></ng-container>\n    } @else if (multiline) {\n      <textarea #inputElement\n        [id]=\"id\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [rows]=\"rows\"\n        [autocomplete]=\"autocomplete\"\n        class=\"zen-input-field text text-md text-weight-regular\"\n        (input)=\"onInputChange($event)\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\"></textarea>\n    } @else {\n      <input #inputElement\n        [type]=\"type\"\n        [id]=\"id\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.step]=\"step\"\n        [pattern]=\"pattern\"\n        [autocomplete]=\"autocomplete\"\n        class=\"zen-input-field text text-md text-weight-regular\"\n        [ngClass]=\"{'zen-payment-field': variant === 'payment'}\"\n        (input)=\"onInputChange($event)\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\" />\n    }\n\n    <!-- Multiline footer: help icon (left), then character count + resize handle (right).\n         Only rendered when it has content so an empty textarea keeps a full-height\n         scrollbar and symmetric padding (see the no-footer rule in SCSS). -->\n    @if (multiline && (resizable || helpIcon || showCharacterCount)) {\n      <div class=\"zen-textarea-footer\">\n        @if (helpIcon) {\n          <div class=\"zen-input-trailing-container\">\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              <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\">\n                  {{ helpTooltip | translate }}\n                </div>\n                <div class=\"tooltip-arrow\"></div>\n              </div>\n            </span>\n          </div>\n        }\n        <div class=\"zen-textarea-footer-end\">\n          @if (showCharacterCount) {\n            <span class=\"zen-character-count text text-sm text-weight-regular\">\n              {{ characterCount }}\n            </span>\n          }\n          @if (resizable) {\n            <span\n              class=\"zen-textarea-resize-handle\"\n              [class.disabled]=\"disabled\"\n              title=\"Drag to resize\"\n              (pointerdown)=\"onResizeStart($event)\"\n              (click)=\"$event.stopPropagation()\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M17.5 5.5 5.5 17.5M17.5 12.5 12.5 17.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n              </svg>\n            </span>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Default input template -->\n\n    <!-- Trailing elements container \u2014 render only when it has content, so a plain\n         input (e.g. number) doesn't reserve trailing space or shift its spinner. -->\n    @if (\n      variant === 'trailing-text' ||\n      (showCharacterCount && !helpIcon && variant === 'default' && !multiline) ||\n      (helpIcon && variant !== 'trailing-dropdown' && !multiline) ||\n      variant === 'trailing-dropdown'\n    ) {\n    <div class=\"zen-input-trailing-container\">\n      <!-- Trailing text -->\n      @if (variant === 'trailing-text') {\n        <span\n          class=\"zen-input-trailing-text text text-md text-weight-regular\">\n          {{ trailingText }}\n        </span>\n      }\n\n      <!-- Character counter -->\n      @if (showCharacterCount && !helpIcon && variant === 'default' && !multiline) {\n        <span\n          class=\"zen-character-count text text-sm text-weight-regular\">\n          {{ characterCount }}\n        </span>\n      }\n\n      <!-- Help icon -->\n      @if (helpIcon && variant !== 'trailing-dropdown' && !multiline) {\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          <!-- Help tooltip (shown on hover / focus) -->\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\">\n              {{ helpTooltip | translate }}\n            </div>\n            <div class=\"tooltip-arrow\"></div>\n          </div>\n        </span>\n      }\n\n      <!-- Trailing dropdown -->\n      @if (variant === 'trailing-dropdown') {\n        <div\n          class=\"zen-input-trailing-dropdown\">\n          <button type=\"button\"\n            class=\"zen-dropdown-trigger\"\n            [disabled]=\"disabled\"\n            (click)=\"toggleTrailingDropdown(); $event.stopPropagation()\">\n            <span class=\"dropdown-label\">{{ getTrailingDropdownLabel() }}</span>\n            <i class=\"material-icons dropdown-icon\">expand_more</i>\n          </button>\n          @if (trailingDropdownOpen) {\n            <div class=\"zen-dropdown-menu dropdown-menu-right\"\n              [ngClass]=\"{'open': trailingDropdownOpen}\">\n              @for (option of trailingDropdownOptions; track option) {\n                <button\n                  type=\"button\"\n                  class=\"zen-dropdown-option\"\n                  [ngClass]=\"{'selected': option.value === trailingDropdownValue}\"\n                  (click)=\"onTrailingDropdownChange(option.value); $event.stopPropagation()\">\n                  @if (option.icon) {\n                    <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n                  }\n                  {{ option.label | translate }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    }\n  </div>\n\n  <!-- Hint text / Error message -->\n  @if (showHintText) {\n    <div\n      class=\"zen-input-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      {{ displayHintText | translate }}\n    </div>\n  }\n\n  <!-- Phone Country Dropdown (for tel type) -->\n  @if (type === 'tel' && isPhoneDropdownExpanded) {\n    <div\n      class=\"zen-phone-dropdown-menu\">\n      <div class=\"zen-phone-dropdown-list\">\n        <!-- Countries List -->\n        @for (country of countryList; track country) {\n          <button type=\"button\"\n            class=\"zen-phone-dropdown-item\"\n            [ngClass]=\"{'active': selectedCountry.countryName === country.countryName}\"\n            (click)=\"onCountryChanged(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 | translate }}</span>\n            <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n          </button>\n        }\n        <!-- Custom Country -->\n        <button type=\"button\"\n          class=\"zen-phone-dropdown-item\"\n          [ngClass]=\"{'active': selectedCountry.countryName === customCountry.countryName}\"\n          (click)=\"onCountryChanged(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 | translate }}</span>\n          <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n\n<!-- Phone Input Template -->\n<ng-template #phoneInputTemplate>\n  <!-- Phone country selector -->\n  <div class=\"zen-phone-country-select\">\n    <img class=\"zen-phone-country-flag\"\n      [src]=\"selectedCountry.flag\"\n      [alt]=\"selectedCountry.countryName\">\n    <span class=\"zen-phone-code\">{{ selectedCountry.countryCallingCode }}</span>\n    <button type=\"button\"\n      class=\"zen-phone-dropdown-btn\"\n      [disabled]=\"disabled\"\n      (click)=\"togglePhoneDropdown(); $event.stopPropagation()\">\n      <i class=\"material-icons zen-phone-expand-icon\"\n      [ngClass]=\"{'active': isPhoneDropdownExpanded}\">expand_more</i>\n    </button>\n  </div>\n\n  <!-- Phone input field -->\n  <input #inputElement\n    type=\"text\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [value]=\"phoneText\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [attr.maxlength]=\"phoneMaxLength\"\n    [attr.minlength]=\"minLength\"\n    [autocomplete]=\"autocomplete\"\n    class=\"zen-input-field text text-md text-weight-regular\"\n    (input)=\"onInputChange($event)\"\n    (focus)=\"onInputFocus($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (keyup)=\"onKeyup($event)\" />\n</ng-template>\n\n<!-- Click outside handler for dropdowns -->\n@if (leadingDropdownOpen || trailingDropdownOpen || isPhoneDropdownExpanded) {\n  <div\n    class=\"zen-dropdown-backdrop\"\n  (click)=\"closeDropdowns(); hidePhoneDropdown()\"></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-label{color:#344054;display:flex;align-items:center;gap:4px}.zen-input-container .zen-input-label .required-indicator{color:#f04438}.zen-input-container .zen-input-label.disabled{color:#667085}.zen-input-container .zen-input-label.destructive{color:#344054}.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:not(.disabled){border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon{font-size:20px;color:#98a2b3;flex-shrink:0;cursor:pointer;transition:color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon:hover{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{position:relative;flex-shrink:0;margin-right:4px}.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 .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.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-leading-text{color:#667085;flex-shrink:0;padding-right:4px}.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:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container{display:flex;align-items:center;gap:8px;flex-shrink:0}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-text{color:#667085;flex-shrink:0;padding-left:4px}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-character-count{color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;cursor:help;outline:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon i{font-size:16px;color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):hover i,.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):focus-visible i{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon.disabled{cursor:not-allowed}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon.disabled i{color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):hover .zen-help-tooltip,.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):focus-visible .zen-help-tooltip{display:block}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .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}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-start{left:-6px;right:auto;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-start .tooltip-arrow{left:8px;right:auto;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-end{left:auto;right:-6px;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-end .tooltip-arrow{left:auto;right:8px;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.place-below{top:calc(100% + 8px);bottom:auto}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.place-below .tooltip-arrow{top:-6px;bottom:auto;border-top:none;border-bottom:6px solid #101828}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .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}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .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}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown{position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;border-left:1px solid #D0D5DD;padding:0 0 0 8px;margin-left:4px;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.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:200px;max-height:240px;overflow-y:auto;z-index:100;padding:4px}.zen-input-container .zen-dropdown-menu.dropdown-menu-right{left:auto;right:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 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 .option-icon{font-size:20px;color:#98a2b3}.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;font-weight:500}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .option-icon{color:#136ab6}.zen-input-container .zen-input-hint{display:flex;align-items:center;gap:4px;color:#667085}.zen-input-container .zen-input-hint .hint-icon{font-size:16px;color:#f04438}.zen-input-container .zen-input-hint.destructive{color:#f04438}.zen-input-container.focused .zen-input-field-wrapper{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container.focused .zen-input-field-wrapper.destructive{border-color:#fda29b;box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.zen-input-container.filled .zen-input-field-wrapper{background:#fff}.zen-input-container.disabled .zen-input-field-wrapper{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.zen-input-container.disabled .zen-input-field-wrapper:hover{border-color:#d0d5dd}.zen-input-container.destructive .zen-input-field-wrapper{border-color:#fda29b}.zen-input-container.destructive .zen-input-field-wrapper:hover:not(.disabled){border-color:#f97066}.zen-input-container.multiline .zen-input-field-wrapper{flex-direction:column;align-items:stretch;min-height:auto;gap:0;padding:0}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field{flex:0 0 auto;box-sizing:border-box;width:100%;resize:none;min-height:80px;padding:10px 6px 0 14px;font-family:inherit;line-height:24px;scrollbar-gutter:stable}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar{width:8px}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-track{background:transparent;border:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-thumb{background:#d0d5dd;border:none;border-radius:4px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer{display:flex;align-items:center;gap:8px;padding:0 14px 10px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer-end{display:flex;align-items:center;gap:8px;margin-left:auto}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle{display:inline-flex;align-items:center;justify-content:center;color:#98a2b3;cursor:ns-resize;touch-action:none;transition:color .2s ease}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle svg{display:block}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle:hover{color:#475467}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle.disabled{color:#d0d5dd;cursor:not-allowed;pointer-events:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-character-count{color:#98a2b3}.zen-input-container.multiline .zen-input-field-wrapper:not(:has(.zen-textarea-footer)) .zen-input-field{padding-bottom:10px}.zen-input-container.size-sm .zen-input-label{font-size:12px;line-height:18px}.zen-input-container.size-sm .zen-input-field-wrapper{padding:8px 12px;min-height:36px;box-sizing:border-box}.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-field,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-leading-text,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-trailing-text{font-size:14px;line-height:20px}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-input-field{font-family:Courier New,Courier,monospace}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #F2F4F7;border-radius:4px;width:34px;height:24px;flex-shrink:0}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon .card-icon{font-size:16px;color:#4285f4;line-height:1}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon zen-icon{font-size:16px;color:#98a2b3;line-height:1}.zen-input-container.variant-input-field .zen-input-field-wrapper{padding:12px 14px;min-height:48px}.zen-phone-country-select{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-phone-country-select .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-phone-country-select .zen-phone-code{color:#344054;font-family:Inter,sans-serif;font-size:14px;font-weight:500;min-width:max-content}.zen-phone-country-select .zen-phone-dropdown-btn{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.zen-phone-country-select .zen-phone-dropdown-btn:disabled{cursor:not-allowed;opacity:.5}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon.active{transform:rotate(180deg)}.zen-phone-country-select .zen-phone-dropdown-btn:hover:not(:disabled) .zen-phone-expand-icon{color:#475467}.zen-phone-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}.zen-phone-dropdown-menu .zen-phone-dropdown-list{padding:4px}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s ease;font-family:Inter,sans-serif;font-size:14px;text-align:left;color:#344054}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-name{flex:1;min-width:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item:hover{background:#f9fafb}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active{background:#f1f7fe;color:#105494}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active .zen-phone-country-code{color:#136ab6}.zen-payment-field{font-family:Courier New,Courier,monospace!important;letter-spacing:1px}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"] }]
         }], propDecorators: { inputElement: [{
                 type: ViewChild,
                 args: ['inputElement']
@@ -989,6 +1014,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                 type: Input
             }], pattern: [{
                 type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
             }], autocomplete: [{
                 type: Input
             }], name: [{
@@ -1048,8 +1079,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                 type: Output
             }], trailingDropdownValueChange: [{
                 type: Output
-            }], helpIconClick: [{
-                type: Output
             }], phoneChange: [{
                 type: Output
             }], validChange: [{
@@ -1158,7 +1187,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", "autocomplete", "name", "id", "leadingDropdownOptions", "leadingDropdownValue", "leadingDropdownPlaceholder", "trailingDropdownOptions", "trailingDropdownValue", "trailingDropdownPlaceholder", "leadingText", "trailingText", "multiline", "rows", "resizable", "size", "showCharacterCount", "phoneMaxLength", "phone", "width"], outputs: ["valueChange", "inputFocus", "inputBlur", "inputKeydown", "inputKeyup", "leadingDropdownChange", "leadingDropdownValueChange", "trailingDropdownChange", "trailingDropdownValueChange", "helpIconClick", "phoneChange", "validChange", "leadingIconClick"] }, { kind: "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: 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSearchBoxComponent, decorators: [{
             type: Component,
@@ -2426,6 +2455,15 @@ class ZenduDatePickerDropdownComponent {
          * element, so an external control (e.g. a select) can drive it via open().
          */
         this.hideTrigger = false;
+        /** Field label rendered above the trigger. Pass an already-translated
+         *  string (e.g. `[label]="'Select Date' | translate"`) — not translated
+         *  internally. */
+        this.label = '';
+        /** Adds a red `*` to the label. */
+        this.required = false;
+        /** Trigger height: `md` (40px, default, matches the md button) or `form`
+         *  (46px, to sit flush in a 46px-tall form field row). */
+        this.size = 'md';
         this.mobile = false;
         this.isOpen = false;
         this.dropdownStyle = {};
@@ -2446,12 +2484,18 @@ class ZenduDatePickerDropdownComponent {
         this._appliedPresetLabel = null;
         this._appliedPresetStartTime = null;
         this._appliedPresetEndTime = null;
-        // Time picker state
+        // Time picker state (start date, and single-date mode)
         this._hours = 12;
         this._minutes = 0;
         this._period = 'AM';
         this._hoursDisplay = '12';
         this._minutesDisplay = '00';
+        // Time picker state for the range end date
+        this._endHours = 12;
+        this._endMinutes = 0;
+        this._endPeriod = 'AM';
+        this._endHoursDisplay = '12';
+        this._endMinutesDisplay = '00';
         this.defaultPresets = [
             {
                 label: 'Today',
@@ -2629,7 +2673,13 @@ class ZenduDatePickerDropdownComponent {
             ? this._appliedPresetLabel
             : null;
         if (this.timePicker) {
-            this.initTimeFromDate(this.type === 'single' ? this.date : this.startDate);
+            if (this.type === 'single') {
+                this.initTimeFromDate(this.date, 'start');
+            }
+            else {
+                this.initTimeFromDate(this.startDate, 'start');
+                this.initTimeFromDate(this.endDate, 'end');
+            }
         }
         if (this.type === 'single') {
             this.leftCurrentSlot = this._selectedDate ? new Date(this._selectedDate) : new Date();
@@ -2776,127 +2826,204 @@ class ZenduDatePickerDropdownComponent {
     formatNum(n) {
         return n < 10 ? '0' + n : '' + n;
     }
-    incrementHours() {
-        this._hours = this._hours >= 12 ? 1 : this._hours + 1;
-        this._hoursDisplay = this.formatNum(this._hours);
+    incrementHours(target = 'start') {
+        if (target === 'end') {
+            this._endHours = this._endHours >= 12 ? 1 : this._endHours + 1;
+            this._endHoursDisplay = this.formatNum(this._endHours);
+        }
+        else {
+            this._hours = this._hours >= 12 ? 1 : this._hours + 1;
+            this._hoursDisplay = this.formatNum(this._hours);
+        }
     }
-    decrementHours() {
-        this._hours = this._hours <= 1 ? 12 : this._hours - 1;
-        this._hoursDisplay = this.formatNum(this._hours);
+    decrementHours(target = 'start') {
+        if (target === 'end') {
+            this._endHours = this._endHours <= 1 ? 12 : this._endHours - 1;
+            this._endHoursDisplay = this.formatNum(this._endHours);
+        }
+        else {
+            this._hours = this._hours <= 1 ? 12 : this._hours - 1;
+            this._hoursDisplay = this.formatNum(this._hours);
+        }
     }
-    incrementMinutes() {
-        this._minutes = this._minutes >= 59 ? 0 : this._minutes + 1;
-        this._minutesDisplay = this.formatNum(this._minutes);
+    incrementMinutes(target = 'start') {
+        if (target === 'end') {
+            this._endMinutes = this._endMinutes >= 59 ? 0 : this._endMinutes + 1;
+            this._endMinutesDisplay = this.formatNum(this._endMinutes);
+        }
+        else {
+            this._minutes = this._minutes >= 59 ? 0 : this._minutes + 1;
+            this._minutesDisplay = this.formatNum(this._minutes);
+        }
     }
-    decrementMinutes() {
-        this._minutes = this._minutes <= 0 ? 59 : this._minutes - 1;
-        this._minutesDisplay = this.formatNum(this._minutes);
+    decrementMinutes(target = 'start') {
+        if (target === 'end') {
+            this._endMinutes = this._endMinutes <= 0 ? 59 : this._endMinutes - 1;
+            this._endMinutesDisplay = this.formatNum(this._endMinutes);
+        }
+        else {
+            this._minutes = this._minutes <= 0 ? 59 : this._minutes - 1;
+            this._minutesDisplay = this.formatNum(this._minutes);
+        }
     }
-    onHoursInput(event) {
+    onHoursInput(event, target = 'start') {
         const input = event.target;
         const raw = input.value.replace(/\D/g, '');
         if (raw === '') {
-            this._hours = 1;
-            this._hoursDisplay = '';
+            if (target === 'end') {
+                this._endHours = 1;
+                this._endHoursDisplay = '';
+            }
+            else {
+                this._hours = 1;
+                this._hoursDisplay = '';
+            }
             return;
         }
         const val = parseInt(raw, 10);
         if (val >= 1 && val <= 12) {
-            this._hours = val;
-            this._hoursDisplay = raw;
+            if (target === 'end') {
+                this._endHours = val;
+                this._endHoursDisplay = raw;
+            }
+            else {
+                this._hours = val;
+                this._hoursDisplay = raw;
+            }
         }
         else {
-            input.value = this._hoursDisplay;
+            input.value = target === 'end' ? this._endHoursDisplay : this._hoursDisplay;
         }
     }
-    onMinutesInput(event) {
+    onMinutesInput(event, target = 'start') {
         const input = event.target;
         const raw = input.value.replace(/\D/g, '');
         if (raw === '') {
-            this._minutes = 0;
-            this._minutesDisplay = '';
+            if (target === 'end') {
+                this._endMinutes = 0;
+                this._endMinutesDisplay = '';
+            }
+            else {
+                this._minutes = 0;
+                this._minutesDisplay = '';
+            }
             return;
         }
         const val = parseInt(raw, 10);
         if (val >= 0 && val <= 59) {
-            this._minutes = val;
-            this._minutesDisplay = raw;
+            if (target === 'end') {
+                this._endMinutes = val;
+                this._endMinutesDisplay = raw;
+            }
+            else {
+                this._minutes = val;
+                this._minutesDisplay = raw;
+            }
         }
         else {
-            input.value = this._minutesDisplay;
+            input.value = target === 'end' ? this._endMinutesDisplay : this._minutesDisplay;
         }
     }
-    clampHours() {
-        this._hours = Math.max(1, Math.min(12, this._hours));
-        this._hoursDisplay = this.formatNum(this._hours);
+    clampHours(target = 'start') {
+        if (target === 'end') {
+            this._endHours = Math.max(1, Math.min(12, this._endHours));
+            this._endHoursDisplay = this.formatNum(this._endHours);
+        }
+        else {
+            this._hours = Math.max(1, Math.min(12, this._hours));
+            this._hoursDisplay = this.formatNum(this._hours);
+        }
     }
-    clampMinutes() {
-        this._minutes = Math.max(0, Math.min(59, this._minutes));
-        this._minutesDisplay = this.formatNum(this._minutes);
+    clampMinutes(target = 'start') {
+        if (target === 'end') {
+            this._endMinutes = Math.max(0, Math.min(59, this._endMinutes));
+            this._endMinutesDisplay = this.formatNum(this._endMinutes);
+        }
+        else {
+            this._minutes = Math.max(0, Math.min(59, this._minutes));
+            this._minutesDisplay = this.formatNum(this._minutes);
+        }
     }
     onTimeFocus(event) {
         const input = event.target;
         input.select();
     }
-    onTimeKeydown(event, type) {
+    onTimeKeydown(event, type, target = 'start') {
         if (event.key === 'ArrowUp') {
             event.preventDefault();
             if (type === 'hours')
-                this.incrementHours();
+                this.incrementHours(target);
             else
-                this.incrementMinutes();
+                this.incrementMinutes(target);
         }
         else if (event.key === 'ArrowDown') {
             event.preventDefault();
             if (type === 'hours')
-                this.decrementHours();
+                this.decrementHours(target);
             else
-                this.decrementMinutes();
+                this.decrementMinutes(target);
         }
     }
-    setPeriod(period) {
-        this._period = period;
+    setPeriod(period, target = 'start') {
+        if (target === 'end') {
+            this._endPeriod = period;
+        }
+        else {
+            this._period = period;
+        }
     }
-    applyTimeToDate(date) {
+    applyTimeToDate(date, target = 'start') {
         const result = new Date(date);
-        let hours = this._hours;
-        if (this._period === 'AM' && hours === 12) {
+        let hours = target === 'end' ? this._endHours : this._hours;
+        const minutes = target === 'end' ? this._endMinutes : this._minutes;
+        const period = target === 'end' ? this._endPeriod : this._period;
+        if (period === 'AM' && hours === 12) {
             hours = 0;
         }
-        else if (this._period === 'PM' && hours !== 12) {
+        else if (period === 'PM' && hours !== 12) {
             hours += 12;
         }
-        result.setHours(hours, this._minutes, 0, 0);
+        result.setHours(hours, minutes, 0, 0);
         return result;
     }
-    initTimeFromDate(date) {
-        if (!date) {
-            this._hours = 12;
-            this._minutes = 0;
-            this._period = 'AM';
-        }
-        else {
-            let h = date.getHours();
-            this._minutes = date.getMinutes();
+    initTimeFromDate(date, target = 'start') {
+        let hours = 12;
+        let minutes = 0;
+        let period = 'AM';
+        if (date) {
+            const h = date.getHours();
+            minutes = date.getMinutes();
             if (h === 0) {
-                this._hours = 12;
-                this._period = 'AM';
+                hours = 12;
+                period = 'AM';
             }
             else if (h < 12) {
-                this._hours = h;
-                this._period = 'AM';
+                hours = h;
+                period = 'AM';
             }
             else if (h === 12) {
-                this._hours = 12;
-                this._period = 'PM';
+                hours = 12;
+                period = 'PM';
             }
             else {
-                this._hours = h - 12;
-                this._period = 'PM';
+                hours = h - 12;
+                period = 'PM';
             }
         }
-        this._hoursDisplay = this.formatNum(this._hours);
-        this._minutesDisplay = this.formatNum(this._minutes);
+        if (target === 'end') {
+            this._endHours = hours;
+            this._endMinutes = minutes;
+            this._endPeriod = period;
+            this._endHoursDisplay = this.formatNum(hours);
+            this._endMinutesDisplay = this.formatNum(minutes);
+        }
+        else {
+            this._hours = hours;
+            this._minutes = minutes;
+            this._period = period;
+            this._hoursDisplay = this.formatNum(hours);
+            this._minutesDisplay = this.formatNum(minutes);
+        }
     }
     apply() {
         if (this.type === 'single') {
@@ -2910,13 +3037,13 @@ class ZenduDatePickerDropdownComponent {
         else {
             if (this._selectedStart) {
                 this.startDate = this.timePicker
-                    ? this.applyTimeToDate(this._selectedStart)
+                    ? this.applyTimeToDate(this._selectedStart, 'start')
                     : new Date(this._selectedStart);
                 this.startDateChange.emit(this.startDate);
             }
             if (this._selectedEnd) {
                 this.endDate = this.timePicker
-                    ? this.applyTimeToDate(this._selectedEnd)
+                    ? this.applyTimeToDate(this._selectedEnd, 'end')
                     : new Date(this._selectedEnd);
                 this.endDateChange.emit(this.endDate);
             }
@@ -3040,11 +3167,11 @@ class ZenduDatePickerDropdownComponent {
         return moment(day.date).isSame(moment(this._selectedEnd), 'day');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatePickerDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i2.TranslateService }, { token: ZEN_DATE_PICKER_DEFAULT_PRESETS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduDatePickerDropdownComponent, isStandalone: false, selector: "zen-date-picker-dropdown", inputs: { type: "type", date: "date", startDate: "startDate", endDate: "endDate", presets: "presets", minDate: "minDate", maxDate: "maxDate", disabled: "disabled", dateMarkers: "dateMarkers", placeholder: "placeholder", mobileBreakpoint: "mobileBreakpoint", timePicker: "timePicker", autoApply: "autoApply", hideTrigger: "hideTrigger" }, outputs: { dateChange: "dateChange", startDateChange: "startDateChange", endDateChange: "endDateChange", rangeChange: "rangeChange" }, host: { listeners: { "window:resize": "onResize()", "window:mousedown": "outsideHandling($event)" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-dpd\">\n  <!-- Trigger Button -->\n  @if (!hideTrigger) {\n    <button class=\"dropdown-trigger\"\n      #triggerBtn\n      [disabled]=\"disabled\"\n      [class.active]=\"isOpen\"\n      [class.has-value]=\"hasValue\"\n      (click)=\"toggle()\">\n      <zen-icon class=\"trigger-icon\"\n        src=\"assets/ng-zenduit/icons/calendar.svg\">\n      </zen-icon>\n      <span class=\"trigger-label\">{{ triggerLabel }}</span>\n    </button>\n  }\n\n  <!-- Dropdown Panel -->\n  @if (isOpen) {\n    <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n      <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n      @if (type === 'range' && !mobile) {\n        <!-- Presets sidebar -->\n        <div class=\"presets-sidebar\">\n          @for (preset of activePresets; track preset) {\n            <div class=\"preset-item\"\n              [class.active]=\"_activePreset === preset.label\"\n              (click)=\"selectPreset(preset)\">\n              {{ preset.label | translate }}\n            </div>\n          }\n        </div>\n        <div class=\"sidebar-divider\"></div>\n        <!-- Calendars + bottom panel -->\n        <div class=\"calendars-container\">\n          <div class=\"dual-calendars\">\n            <!-- Left calendar -->\n            <div class=\"calendar-panel\">\n              <div class=\"calendar-content\">\n                <div class=\"month-header\">\n                  <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                  </button>\n                  <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                  <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n              </div>\n            </div>\n            <div class=\"calendar-divider\"></div>\n            <!-- Right calendar -->\n            <div class=\"calendar-panel\">\n              <div class=\"calendar-content\">\n                <div class=\"month-header\">\n                  <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                  </button>\n                  <span class=\"month-title\">{{ rightDaysTitle }}</span>\n                  <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n              </div>\n            </div>\n          </div>\n          <!-- Time Picker -->\n          @if (timePicker) {\n            <div class=\"bottom-divider\"></div>\n            <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n          }\n          <div class=\"bottom-divider\"></div>\n          <!-- Bottom panel: inputs (or legend) + actions -->\n          <div class=\"bottom-panel\">\n            @if (legendMarkers.length) {\n              <div class=\"marker-legend\">\n                @for (m of legendMarkers; track m) {\n                  <div class=\"legend-item\">\n                    <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                    <span class=\"legend-title\">{{ m.title | translate }}</span>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"input-fields\">\n                <div class=\"date-input\">\n                  <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                    {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n                  </span>\n                </div>\n                <span class=\"date-separator\">&ndash;</span>\n                <div class=\"date-input\">\n                  <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n                    {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n                  </span>\n                </div>\n              </div>\n            }\n            <div class=\"actions\">\n              <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n              <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n      @if (type === 'range' && mobile) {\n        <div class=\"single-calendar-container\">\n          <div class=\"calendar-content\">\n            <div class=\"month-header\">\n              <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n              </button>\n              <span class=\"month-title\">{{ leftDaysTitle }}</span>\n              <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n              </button>\n            </div>\n            <!-- Range inputs -->\n            <div class=\"mobile-range-inputs\">\n              <div class=\"date-input compact\">\n                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                  {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n                </span>\n              </div>\n              <span class=\"date-separator\">&ndash;</span>\n              <div class=\"date-input compact\">\n                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n                  {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n                </span>\n              </div>\n            </div>\n            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n          </div>\n          <!-- Time Picker -->\n          @if (timePicker) {\n            <div class=\"bottom-divider\"></div>\n            <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n          }\n          @if (legendMarkers.length) {\n            <div class=\"marker-legend standalone\">\n              @for (m of legendMarkers; track m) {\n                <div class=\"legend-item\">\n                  <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                  <span class=\"legend-title\">{{ m.title | translate }}</span>\n                </div>\n              }\n            </div>\n          }\n          <div class=\"bottom-divider\"></div>\n          <div class=\"bottom-panel compact\">\n            <div class=\"actions full-width\">\n              <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n              <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- SINGLE DATE: single calendar + input + today button -->\n      @if (type === 'single') {\n        <div class=\"single-calendar-container\">\n          <div class=\"calendar-content\">\n            <div class=\"month-header\">\n              <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n              </button>\n              <span class=\"month-title\">{{ leftDaysTitle }}</span>\n              <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n              </button>\n            </div>\n            <!-- Date input + Today button -->\n            <div class=\"single-actions-row\">\n              <div class=\"date-input flex-1\">\n                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n                  {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n                </span>\n              </div>\n              <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n            </div>\n            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n          </div>\n          <!-- Time Picker -->\n          @if (timePicker) {\n            <div class=\"bottom-divider\"></div>\n            <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n          }\n          @if (legendMarkers.length) {\n            <div class=\"marker-legend standalone single\">\n              @for (m of legendMarkers; track m) {\n                <div class=\"legend-item\">\n                  <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                  <span class=\"legend-title\">{{ m.title | translate }}</span>\n                </div>\n              }\n            </div>\n          }\n          @if (!autoApply) {\n            <div class=\"bottom-divider\"></div>\n            <div class=\"bottom-panel compact\">\n              <div class=\"actions full-width\">\n                <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection>\n  <div class=\"time-picker-container\">\n    <div class=\"time-picker-content\">\n      <span class=\"time-picker-label\">{{ 'Select a time' | translate }}</span>\n      <div class=\"time-picker-row\">\n        <div class=\"time-fields\">\n          <!-- Hours -->\n          <div class=\"time-input-group\">\n            <div class=\"time-input-box\">\n              <input class=\"time-input\"\n                type=\"text\"\n                aria-label=\"Hours\"\n                inputmode=\"numeric\"\n                autocomplete=\"off\"\n                [value]=\"_hoursDisplay\"\n                (input)=\"onHoursInput($event)\"\n                (focus)=\"onTimeFocus($event)\"\n                (blur)=\"clampHours()\"\n                (keydown)=\"onTimeKeydown($event, 'hours')\"\n                maxlength=\"2\" />\n              <div class=\"time-arrows\">\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours()\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                </button>\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours()\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                </button>\n              </div>\n            </div>\n            <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n          </div>\n\n          <!-- Colon separator -->\n          <div class=\"time-colon\">:</div>\n\n          <!-- Minutes -->\n          <div class=\"time-input-group\">\n            <div class=\"time-input-box\">\n              <input class=\"time-input\"\n                type=\"text\"\n                aria-label=\"Minutes\"\n                inputmode=\"numeric\"\n                autocomplete=\"off\"\n                [value]=\"_minutesDisplay\"\n                (input)=\"onMinutesInput($event)\"\n                (focus)=\"onTimeFocus($event)\"\n                (blur)=\"clampMinutes()\"\n                (keydown)=\"onTimeKeydown($event, 'minutes')\"\n                maxlength=\"2\" />\n              <div class=\"time-arrows\">\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes()\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                </button>\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes()\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                </button>\n              </div>\n            </div>\n            <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n          </div>\n        </div>\n\n        <!-- AM/PM toggle -->\n        <div class=\"time-period-toggle\">\n          <button class=\"time-period-btn\"\n            [class.active]=\"_period === 'AM'\"\n            (click)=\"setPeriod('AM')\">\n            AM\n          </button>\n          <button class=\"time-period-btn\"\n            [class.active]=\"_period === 'PM'\"\n            (click)=\"setPeriod('PM')\">\n            PM\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n  <div class=\"dates-grid\">\n    <!-- Week day headers -->\n    <div class=\"week-header\">\n      @for (wd of weekDays; track wd) {\n        <div class=\"cell header-cell\">{{ wd | translate }}</div>\n      }\n    </div>\n    <!-- Day rows -->\n    @for (row of dayRows; track row) {\n      <div class=\"day-row\">\n        @for (day of row.days; track day) {\n          <div class=\"cell day-cell\"\n            [class.outside]=\"day.isOutside\"\n            [class.selected]=\"day.selected\"\n            [class.today]=\"isToday(day)\"\n            [class.disabled]=\"day.isDisabled\"\n            [class.in-range]=\"isInRange(day)\"\n            [class.range-start]=\"isRangeStart(day)\"\n            [class.range-end]=\"isRangeEnd(day)\"\n            (click)=\"selectDay(day)\">\n            <span class=\"day-number\">{{ day.lbl }}</span>\n            @if (day.markerColors?.length) {\n              <div class=\"marker-dots\">\n                @for (c of day.markerColors; track c) {\n                  <span class=\"marker-dot\"\n                  [style.background]=\"c || null\"></span>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start;width:280px}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { 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: ZenduDatePickerDropdownComponent, isStandalone: false, selector: "zen-date-picker-dropdown", inputs: { type: "type", date: "date", startDate: "startDate", endDate: "endDate", presets: "presets", minDate: "minDate", maxDate: "maxDate", disabled: "disabled", dateMarkers: "dateMarkers", placeholder: "placeholder", mobileBreakpoint: "mobileBreakpoint", timePicker: "timePicker", autoApply: "autoApply", hideTrigger: "hideTrigger", label: "label", required: "required", size: "size" }, outputs: { dateChange: "dateChange", startDateChange: "startDateChange", endDateChange: "endDateChange", rangeChange: "rangeChange" }, host: { listeners: { "window:resize": "onResize()", "window:mousedown": "outsideHandling($event)" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-dpd\">\n  <!-- Field label -->\n  @if (label) {\n    <label class=\"zen-dpd-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"zen-dpd-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger Button -->\n  @if (!hideTrigger) {\n    <button class=\"dropdown-trigger\"\n      #triggerBtn\n      [class.size-form]=\"size === 'form'\"\n      [disabled]=\"disabled\"\n      [class.active]=\"isOpen\"\n      [class.has-value]=\"hasValue\"\n      (click)=\"toggle()\">\n      <zen-icon class=\"trigger-icon\"\n        src=\"assets/ng-zenduit/icons/calendar.svg\">\n      </zen-icon>\n      <span class=\"trigger-label\">{{ triggerLabel }}</span>\n    </button>\n  }\n\n  <!-- Dropdown Panel -->\n  @if (isOpen) {\n    <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n      <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n      @if (type === 'range' && !mobile) {\n        <!-- Presets sidebar -->\n        <div class=\"presets-sidebar\">\n          @for (preset of activePresets; track preset) {\n            <div class=\"preset-item\"\n              [class.active]=\"_activePreset === preset.label\"\n              (click)=\"selectPreset(preset)\">\n              {{ preset.label | translate }}\n            </div>\n          }\n        </div>\n        <div class=\"sidebar-divider\"></div>\n        <!-- Calendars + bottom panel -->\n        <div class=\"calendars-container\">\n          <div class=\"dual-calendars\">\n            <!-- Left calendar -->\n            <div class=\"calendar-panel\">\n              <div class=\"calendar-content\">\n                <div class=\"month-header\">\n                  <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                  </button>\n                  <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                  <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n              </div>\n            </div>\n            <div class=\"calendar-divider\"></div>\n            <!-- Right calendar -->\n            <div class=\"calendar-panel\">\n              <div class=\"calendar-content\">\n                <div class=\"month-header\">\n                  <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                  </button>\n                  <span class=\"month-title\">{{ rightDaysTitle }}</span>\n                  <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n              </div>\n            </div>\n          </div>\n          <!-- Time Picker (start + end, side by side) -->\n          @if (timePicker) {\n            <div class=\"bottom-divider\"></div>\n            <div class=\"time-pickers-dual\">\n              <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n              <div class=\"time-pickers-divider\"></div>\n              <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n            </div>\n          }\n          <div class=\"bottom-divider\"></div>\n          <!-- Bottom panel: inputs (or legend) + actions -->\n          <div class=\"bottom-panel\">\n            @if (legendMarkers.length) {\n              <div class=\"marker-legend\">\n                @for (m of legendMarkers; track m) {\n                  <div class=\"legend-item\">\n                    <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                    <span class=\"legend-title\">{{ m.title | translate }}</span>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"input-fields\">\n                <div class=\"date-input\">\n                  <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                    {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n                  </span>\n                </div>\n                <span class=\"date-separator\">&ndash;</span>\n                <div class=\"date-input\">\n                  <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n                    {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n                  </span>\n                </div>\n              </div>\n            }\n            <div class=\"actions\">\n              <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n              <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n      @if (type === 'range' && mobile) {\n        <div class=\"single-calendar-container\">\n          <div class=\"calendar-content\">\n            <div class=\"month-header\">\n              <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n              </button>\n              <span class=\"month-title\">{{ leftDaysTitle }}</span>\n              <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n              </button>\n            </div>\n            <!-- Range inputs -->\n            <div class=\"mobile-range-inputs\">\n              <div class=\"date-input compact\">\n                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                  {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n                </span>\n              </div>\n              <span class=\"date-separator\">&ndash;</span>\n              <div class=\"date-input compact\">\n                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n                  {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n                </span>\n              </div>\n            </div>\n            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n          </div>\n          <!-- Time Picker (start + end, side by side) -->\n          @if (timePicker) {\n            <div class=\"bottom-divider\"></div>\n            <div class=\"time-pickers-dual\">\n              <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n              <div class=\"time-pickers-divider\"></div>\n              <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n            </div>\n          }\n          @if (legendMarkers.length) {\n            <div class=\"marker-legend standalone\">\n              @for (m of legendMarkers; track m) {\n                <div class=\"legend-item\">\n                  <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                  <span class=\"legend-title\">{{ m.title | translate }}</span>\n                </div>\n              }\n            </div>\n          }\n          <div class=\"bottom-divider\"></div>\n          <div class=\"bottom-panel compact\">\n            <div class=\"actions full-width\">\n              <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n              <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- SINGLE DATE: single calendar + input + today button -->\n      @if (type === 'single') {\n        <div class=\"single-calendar-container\">\n          <div class=\"calendar-content\">\n            <div class=\"month-header\">\n              <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n              </button>\n              <span class=\"month-title\">{{ leftDaysTitle }}</span>\n              <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n              </button>\n            </div>\n            <!-- Date input + Today button -->\n            <div class=\"single-actions-row\">\n              <div class=\"date-input flex-1\">\n                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n                  {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n                </span>\n              </div>\n              <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n            </div>\n            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n          </div>\n          <!-- Time Picker -->\n          @if (timePicker) {\n            <div class=\"bottom-divider\"></div>\n            <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start' }\"></ng-container>\n          }\n          @if (legendMarkers.length) {\n            <div class=\"marker-legend standalone single\">\n              @for (m of legendMarkers; track m) {\n                <div class=\"legend-item\">\n                  <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                  <span class=\"legend-title\">{{ m.title | translate }}</span>\n                </div>\n              }\n            </div>\n          }\n          @if (!autoApply) {\n            <div class=\"bottom-divider\"></div>\n            <div class=\"bottom-panel compact\">\n              <div class=\"actions full-width\">\n                <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection let-target=\"target\" let-label=\"label\">\n  <div class=\"time-picker-container\">\n    <div class=\"time-picker-content\">\n      <span class=\"time-picker-label\">{{ (label || 'Select a time') | translate }}</span>\n      <div class=\"time-picker-row\">\n        <div class=\"time-fields\">\n          <!-- Hours -->\n          <div class=\"time-input-group\">\n            <div class=\"time-input-box\">\n              <input class=\"time-input\"\n                type=\"text\"\n                aria-label=\"Hours\"\n                inputmode=\"numeric\"\n                autocomplete=\"off\"\n                [value]=\"target === 'end' ? _endHoursDisplay : _hoursDisplay\"\n                (input)=\"onHoursInput($event, target)\"\n                (focus)=\"onTimeFocus($event)\"\n                (blur)=\"clampHours(target)\"\n                (keydown)=\"onTimeKeydown($event, 'hours', target)\"\n                maxlength=\"2\" />\n              <div class=\"time-arrows\">\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours(target)\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                </button>\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours(target)\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                </button>\n              </div>\n            </div>\n            <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n          </div>\n\n          <!-- Colon separator -->\n          <div class=\"time-colon\">:</div>\n\n          <!-- Minutes -->\n          <div class=\"time-input-group\">\n            <div class=\"time-input-box\">\n              <input class=\"time-input\"\n                type=\"text\"\n                aria-label=\"Minutes\"\n                inputmode=\"numeric\"\n                autocomplete=\"off\"\n                [value]=\"target === 'end' ? _endMinutesDisplay : _minutesDisplay\"\n                (input)=\"onMinutesInput($event, target)\"\n                (focus)=\"onTimeFocus($event)\"\n                (blur)=\"clampMinutes(target)\"\n                (keydown)=\"onTimeKeydown($event, 'minutes', target)\"\n                maxlength=\"2\" />\n              <div class=\"time-arrows\">\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes(target)\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                </button>\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes(target)\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                </button>\n              </div>\n            </div>\n            <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n          </div>\n        </div>\n\n        <!-- AM/PM toggle -->\n        <div class=\"time-period-toggle\">\n          <button class=\"time-period-btn\"\n            [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'AM'\"\n            (click)=\"setPeriod('AM', target)\">\n            AM\n          </button>\n          <button class=\"time-period-btn\"\n            [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'PM'\"\n            (click)=\"setPeriod('PM', target)\">\n            PM\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n  <div class=\"dates-grid\">\n    <!-- Week day headers -->\n    <div class=\"week-header\">\n      @for (wd of weekDays; track wd) {\n        <div class=\"cell header-cell\">{{ wd | translate }}</div>\n      }\n    </div>\n    <!-- Day rows -->\n    @for (row of dayRows; track row) {\n      <div class=\"day-row\">\n        @for (day of row.days; track day) {\n          <div class=\"cell day-cell\"\n            [class.outside]=\"day.isOutside\"\n            [class.selected]=\"day.selected\"\n            [class.today]=\"isToday(day)\"\n            [class.disabled]=\"day.isDisabled\"\n            [class.in-range]=\"isInRange(day)\"\n            [class.range-start]=\"isRangeStart(day)\"\n            [class.range-end]=\"isRangeEnd(day)\"\n            (click)=\"selectDay(day)\">\n            <span class=\"day-number\">{{ day.lbl }}</span>\n            @if (day.markerColors?.length) {\n              <div class=\"marker-dots\">\n                @for (c of day.markerColors; track c) {\n                  <span class=\"marker-dot\"\n                  [style.background]=\"c || null\"></span>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.zen-dpd-label{display:block;margin-bottom:6px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054}.zen-dpd-label .zen-dpd-required{color:#f04438}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.dropdown-trigger.size-form{height:46px}.dropdown-trigger{box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start;width:280px}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-pickers-dual{display:flex;align-items:stretch}.time-pickers-dual>.time-picker-container{box-sizing:border-box;min-width:0}.time-pickers-dual>.time-picker-container:first-child{flex:0 0 328px;width:328px}.time-pickers-dual>.time-picker-container:last-child{flex:1 1 auto}.time-pickers-divider{width:1px;min-width:1px;background:#eaecf0;align-self:stretch;flex-shrink:0}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.calendars-container:has(.time-pickers-dual) .bottom-panel{column-gap:16px}.calendars-container:has(.time-pickers-dual) .bottom-panel .input-fields,.calendars-container:has(.time-pickers-dual) .bottom-panel .actions{flex-shrink:0}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatePickerDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'zen-date-picker-dropdown', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-dpd\">\n  <!-- Trigger Button -->\n  @if (!hideTrigger) {\n    <button class=\"dropdown-trigger\"\n      #triggerBtn\n      [disabled]=\"disabled\"\n      [class.active]=\"isOpen\"\n      [class.has-value]=\"hasValue\"\n      (click)=\"toggle()\">\n      <zen-icon class=\"trigger-icon\"\n        src=\"assets/ng-zenduit/icons/calendar.svg\">\n      </zen-icon>\n      <span class=\"trigger-label\">{{ triggerLabel }}</span>\n    </button>\n  }\n\n  <!-- Dropdown Panel -->\n  @if (isOpen) {\n    <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n      <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n      @if (type === 'range' && !mobile) {\n        <!-- Presets sidebar -->\n        <div class=\"presets-sidebar\">\n          @for (preset of activePresets; track preset) {\n            <div class=\"preset-item\"\n              [class.active]=\"_activePreset === preset.label\"\n              (click)=\"selectPreset(preset)\">\n              {{ preset.label | translate }}\n            </div>\n          }\n        </div>\n        <div class=\"sidebar-divider\"></div>\n        <!-- Calendars + bottom panel -->\n        <div class=\"calendars-container\">\n          <div class=\"dual-calendars\">\n            <!-- Left calendar -->\n            <div class=\"calendar-panel\">\n              <div class=\"calendar-content\">\n                <div class=\"month-header\">\n                  <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                  </button>\n                  <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                  <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n              </div>\n            </div>\n            <div class=\"calendar-divider\"></div>\n            <!-- Right calendar -->\n            <div class=\"calendar-panel\">\n              <div class=\"calendar-content\">\n                <div class=\"month-header\">\n                  <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                  </button>\n                  <span class=\"month-title\">{{ rightDaysTitle }}</span>\n                  <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n              </div>\n            </div>\n          </div>\n          <!-- Time Picker -->\n          @if (timePicker) {\n            <div class=\"bottom-divider\"></div>\n            <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n          }\n          <div class=\"bottom-divider\"></div>\n          <!-- Bottom panel: inputs (or legend) + actions -->\n          <div class=\"bottom-panel\">\n            @if (legendMarkers.length) {\n              <div class=\"marker-legend\">\n                @for (m of legendMarkers; track m) {\n                  <div class=\"legend-item\">\n                    <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                    <span class=\"legend-title\">{{ m.title | translate }}</span>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"input-fields\">\n                <div class=\"date-input\">\n                  <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                    {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n                  </span>\n                </div>\n                <span class=\"date-separator\">&ndash;</span>\n                <div class=\"date-input\">\n                  <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n                    {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n                  </span>\n                </div>\n              </div>\n            }\n            <div class=\"actions\">\n              <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n              <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n      @if (type === 'range' && mobile) {\n        <div class=\"single-calendar-container\">\n          <div class=\"calendar-content\">\n            <div class=\"month-header\">\n              <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n              </button>\n              <span class=\"month-title\">{{ leftDaysTitle }}</span>\n              <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n              </button>\n            </div>\n            <!-- Range inputs -->\n            <div class=\"mobile-range-inputs\">\n              <div class=\"date-input compact\">\n                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                  {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n                </span>\n              </div>\n              <span class=\"date-separator\">&ndash;</span>\n              <div class=\"date-input compact\">\n                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n                  {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n                </span>\n              </div>\n            </div>\n            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n          </div>\n          <!-- Time Picker -->\n          @if (timePicker) {\n            <div class=\"bottom-divider\"></div>\n            <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n          }\n          @if (legendMarkers.length) {\n            <div class=\"marker-legend standalone\">\n              @for (m of legendMarkers; track m) {\n                <div class=\"legend-item\">\n                  <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                  <span class=\"legend-title\">{{ m.title | translate }}</span>\n                </div>\n              }\n            </div>\n          }\n          <div class=\"bottom-divider\"></div>\n          <div class=\"bottom-panel compact\">\n            <div class=\"actions full-width\">\n              <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n              <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- SINGLE DATE: single calendar + input + today button -->\n      @if (type === 'single') {\n        <div class=\"single-calendar-container\">\n          <div class=\"calendar-content\">\n            <div class=\"month-header\">\n              <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n              </button>\n              <span class=\"month-title\">{{ leftDaysTitle }}</span>\n              <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n              </button>\n            </div>\n            <!-- Date input + Today button -->\n            <div class=\"single-actions-row\">\n              <div class=\"date-input flex-1\">\n                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n                  {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n                </span>\n              </div>\n              <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n            </div>\n            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n          </div>\n          <!-- Time Picker -->\n          @if (timePicker) {\n            <div class=\"bottom-divider\"></div>\n            <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n          }\n          @if (legendMarkers.length) {\n            <div class=\"marker-legend standalone single\">\n              @for (m of legendMarkers; track m) {\n                <div class=\"legend-item\">\n                  <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                  <span class=\"legend-title\">{{ m.title | translate }}</span>\n                </div>\n              }\n            </div>\n          }\n          @if (!autoApply) {\n            <div class=\"bottom-divider\"></div>\n            <div class=\"bottom-panel compact\">\n              <div class=\"actions full-width\">\n                <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection>\n  <div class=\"time-picker-container\">\n    <div class=\"time-picker-content\">\n      <span class=\"time-picker-label\">{{ 'Select a time' | translate }}</span>\n      <div class=\"time-picker-row\">\n        <div class=\"time-fields\">\n          <!-- Hours -->\n          <div class=\"time-input-group\">\n            <div class=\"time-input-box\">\n              <input class=\"time-input\"\n                type=\"text\"\n                aria-label=\"Hours\"\n                inputmode=\"numeric\"\n                autocomplete=\"off\"\n                [value]=\"_hoursDisplay\"\n                (input)=\"onHoursInput($event)\"\n                (focus)=\"onTimeFocus($event)\"\n                (blur)=\"clampHours()\"\n                (keydown)=\"onTimeKeydown($event, 'hours')\"\n                maxlength=\"2\" />\n              <div class=\"time-arrows\">\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours()\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                </button>\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours()\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                </button>\n              </div>\n            </div>\n            <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n          </div>\n\n          <!-- Colon separator -->\n          <div class=\"time-colon\">:</div>\n\n          <!-- Minutes -->\n          <div class=\"time-input-group\">\n            <div class=\"time-input-box\">\n              <input class=\"time-input\"\n                type=\"text\"\n                aria-label=\"Minutes\"\n                inputmode=\"numeric\"\n                autocomplete=\"off\"\n                [value]=\"_minutesDisplay\"\n                (input)=\"onMinutesInput($event)\"\n                (focus)=\"onTimeFocus($event)\"\n                (blur)=\"clampMinutes()\"\n                (keydown)=\"onTimeKeydown($event, 'minutes')\"\n                maxlength=\"2\" />\n              <div class=\"time-arrows\">\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes()\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                </button>\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes()\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                </button>\n              </div>\n            </div>\n            <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n          </div>\n        </div>\n\n        <!-- AM/PM toggle -->\n        <div class=\"time-period-toggle\">\n          <button class=\"time-period-btn\"\n            [class.active]=\"_period === 'AM'\"\n            (click)=\"setPeriod('AM')\">\n            AM\n          </button>\n          <button class=\"time-period-btn\"\n            [class.active]=\"_period === 'PM'\"\n            (click)=\"setPeriod('PM')\">\n            PM\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n  <div class=\"dates-grid\">\n    <!-- Week day headers -->\n    <div class=\"week-header\">\n      @for (wd of weekDays; track wd) {\n        <div class=\"cell header-cell\">{{ wd | translate }}</div>\n      }\n    </div>\n    <!-- Day rows -->\n    @for (row of dayRows; track row) {\n      <div class=\"day-row\">\n        @for (day of row.days; track day) {\n          <div class=\"cell day-cell\"\n            [class.outside]=\"day.isOutside\"\n            [class.selected]=\"day.selected\"\n            [class.today]=\"isToday(day)\"\n            [class.disabled]=\"day.isDisabled\"\n            [class.in-range]=\"isInRange(day)\"\n            [class.range-start]=\"isRangeStart(day)\"\n            [class.range-end]=\"isRangeEnd(day)\"\n            (click)=\"selectDay(day)\">\n            <span class=\"day-number\">{{ day.lbl }}</span>\n            @if (day.markerColors?.length) {\n              <div class=\"marker-dots\">\n                @for (c of day.markerColors; track c) {\n                  <span class=\"marker-dot\"\n                  [style.background]=\"c || null\"></span>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start;width:280px}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+            args: [{ selector: 'zen-date-picker-dropdown', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-dpd\">\n  <!-- Field label -->\n  @if (label) {\n    <label class=\"zen-dpd-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"zen-dpd-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger Button -->\n  @if (!hideTrigger) {\n    <button class=\"dropdown-trigger\"\n      #triggerBtn\n      [class.size-form]=\"size === 'form'\"\n      [disabled]=\"disabled\"\n      [class.active]=\"isOpen\"\n      [class.has-value]=\"hasValue\"\n      (click)=\"toggle()\">\n      <zen-icon class=\"trigger-icon\"\n        src=\"assets/ng-zenduit/icons/calendar.svg\">\n      </zen-icon>\n      <span class=\"trigger-label\">{{ triggerLabel }}</span>\n    </button>\n  }\n\n  <!-- Dropdown Panel -->\n  @if (isOpen) {\n    <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n      <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n      @if (type === 'range' && !mobile) {\n        <!-- Presets sidebar -->\n        <div class=\"presets-sidebar\">\n          @for (preset of activePresets; track preset) {\n            <div class=\"preset-item\"\n              [class.active]=\"_activePreset === preset.label\"\n              (click)=\"selectPreset(preset)\">\n              {{ preset.label | translate }}\n            </div>\n          }\n        </div>\n        <div class=\"sidebar-divider\"></div>\n        <!-- Calendars + bottom panel -->\n        <div class=\"calendars-container\">\n          <div class=\"dual-calendars\">\n            <!-- Left calendar -->\n            <div class=\"calendar-panel\">\n              <div class=\"calendar-content\">\n                <div class=\"month-header\">\n                  <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                  </button>\n                  <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                  <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n              </div>\n            </div>\n            <div class=\"calendar-divider\"></div>\n            <!-- Right calendar -->\n            <div class=\"calendar-panel\">\n              <div class=\"calendar-content\">\n                <div class=\"month-header\">\n                  <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                  </button>\n                  <span class=\"month-title\">{{ rightDaysTitle }}</span>\n                  <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n              </div>\n            </div>\n          </div>\n          <!-- Time Picker (start + end, side by side) -->\n          @if (timePicker) {\n            <div class=\"bottom-divider\"></div>\n            <div class=\"time-pickers-dual\">\n              <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n              <div class=\"time-pickers-divider\"></div>\n              <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n            </div>\n          }\n          <div class=\"bottom-divider\"></div>\n          <!-- Bottom panel: inputs (or legend) + actions -->\n          <div class=\"bottom-panel\">\n            @if (legendMarkers.length) {\n              <div class=\"marker-legend\">\n                @for (m of legendMarkers; track m) {\n                  <div class=\"legend-item\">\n                    <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                    <span class=\"legend-title\">{{ m.title | translate }}</span>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"input-fields\">\n                <div class=\"date-input\">\n                  <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                    {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n                  </span>\n                </div>\n                <span class=\"date-separator\">&ndash;</span>\n                <div class=\"date-input\">\n                  <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n                    {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n                  </span>\n                </div>\n              </div>\n            }\n            <div class=\"actions\">\n              <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n              <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n      @if (type === 'range' && mobile) {\n        <div class=\"single-calendar-container\">\n          <div class=\"calendar-content\">\n            <div class=\"month-header\">\n              <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n              </button>\n              <span class=\"month-title\">{{ leftDaysTitle }}</span>\n              <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n              </button>\n            </div>\n            <!-- Range inputs -->\n            <div class=\"mobile-range-inputs\">\n              <div class=\"date-input compact\">\n                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                  {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n                </span>\n              </div>\n              <span class=\"date-separator\">&ndash;</span>\n              <div class=\"date-input compact\">\n                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n                  {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n                </span>\n              </div>\n            </div>\n            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n          </div>\n          <!-- Time Picker (start + end, side by side) -->\n          @if (timePicker) {\n            <div class=\"bottom-divider\"></div>\n            <div class=\"time-pickers-dual\">\n              <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n              <div class=\"time-pickers-divider\"></div>\n              <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n            </div>\n          }\n          @if (legendMarkers.length) {\n            <div class=\"marker-legend standalone\">\n              @for (m of legendMarkers; track m) {\n                <div class=\"legend-item\">\n                  <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                  <span class=\"legend-title\">{{ m.title | translate }}</span>\n                </div>\n              }\n            </div>\n          }\n          <div class=\"bottom-divider\"></div>\n          <div class=\"bottom-panel compact\">\n            <div class=\"actions full-width\">\n              <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n              <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- SINGLE DATE: single calendar + input + today button -->\n      @if (type === 'single') {\n        <div class=\"single-calendar-container\">\n          <div class=\"calendar-content\">\n            <div class=\"month-header\">\n              <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n              </button>\n              <span class=\"month-title\">{{ leftDaysTitle }}</span>\n              <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n              </button>\n            </div>\n            <!-- Date input + Today button -->\n            <div class=\"single-actions-row\">\n              <div class=\"date-input flex-1\">\n                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n                  {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n                </span>\n              </div>\n              <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n            </div>\n            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n          </div>\n          <!-- Time Picker -->\n          @if (timePicker) {\n            <div class=\"bottom-divider\"></div>\n            <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start' }\"></ng-container>\n          }\n          @if (legendMarkers.length) {\n            <div class=\"marker-legend standalone single\">\n              @for (m of legendMarkers; track m) {\n                <div class=\"legend-item\">\n                  <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                  <span class=\"legend-title\">{{ m.title | translate }}</span>\n                </div>\n              }\n            </div>\n          }\n          @if (!autoApply) {\n            <div class=\"bottom-divider\"></div>\n            <div class=\"bottom-panel compact\">\n              <div class=\"actions full-width\">\n                <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection let-target=\"target\" let-label=\"label\">\n  <div class=\"time-picker-container\">\n    <div class=\"time-picker-content\">\n      <span class=\"time-picker-label\">{{ (label || 'Select a time') | translate }}</span>\n      <div class=\"time-picker-row\">\n        <div class=\"time-fields\">\n          <!-- Hours -->\n          <div class=\"time-input-group\">\n            <div class=\"time-input-box\">\n              <input class=\"time-input\"\n                type=\"text\"\n                aria-label=\"Hours\"\n                inputmode=\"numeric\"\n                autocomplete=\"off\"\n                [value]=\"target === 'end' ? _endHoursDisplay : _hoursDisplay\"\n                (input)=\"onHoursInput($event, target)\"\n                (focus)=\"onTimeFocus($event)\"\n                (blur)=\"clampHours(target)\"\n                (keydown)=\"onTimeKeydown($event, 'hours', target)\"\n                maxlength=\"2\" />\n              <div class=\"time-arrows\">\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours(target)\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                </button>\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours(target)\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                </button>\n              </div>\n            </div>\n            <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n          </div>\n\n          <!-- Colon separator -->\n          <div class=\"time-colon\">:</div>\n\n          <!-- Minutes -->\n          <div class=\"time-input-group\">\n            <div class=\"time-input-box\">\n              <input class=\"time-input\"\n                type=\"text\"\n                aria-label=\"Minutes\"\n                inputmode=\"numeric\"\n                autocomplete=\"off\"\n                [value]=\"target === 'end' ? _endMinutesDisplay : _minutesDisplay\"\n                (input)=\"onMinutesInput($event, target)\"\n                (focus)=\"onTimeFocus($event)\"\n                (blur)=\"clampMinutes(target)\"\n                (keydown)=\"onTimeKeydown($event, 'minutes', target)\"\n                maxlength=\"2\" />\n              <div class=\"time-arrows\">\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes(target)\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                </button>\n                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes(target)\">\n                  <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                </button>\n              </div>\n            </div>\n            <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n          </div>\n        </div>\n\n        <!-- AM/PM toggle -->\n        <div class=\"time-period-toggle\">\n          <button class=\"time-period-btn\"\n            [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'AM'\"\n            (click)=\"setPeriod('AM', target)\">\n            AM\n          </button>\n          <button class=\"time-period-btn\"\n            [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'PM'\"\n            (click)=\"setPeriod('PM', target)\">\n            PM\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n  <div class=\"dates-grid\">\n    <!-- Week day headers -->\n    <div class=\"week-header\">\n      @for (wd of weekDays; track wd) {\n        <div class=\"cell header-cell\">{{ wd | translate }}</div>\n      }\n    </div>\n    <!-- Day rows -->\n    @for (row of dayRows; track row) {\n      <div class=\"day-row\">\n        @for (day of row.days; track day) {\n          <div class=\"cell day-cell\"\n            [class.outside]=\"day.isOutside\"\n            [class.selected]=\"day.selected\"\n            [class.today]=\"isToday(day)\"\n            [class.disabled]=\"day.isDisabled\"\n            [class.in-range]=\"isInRange(day)\"\n            [class.range-start]=\"isRangeStart(day)\"\n            [class.range-end]=\"isRangeEnd(day)\"\n            (click)=\"selectDay(day)\">\n            <span class=\"day-number\">{{ day.lbl }}</span>\n            @if (day.markerColors?.length) {\n              <div class=\"marker-dots\">\n                @for (c of day.markerColors; track c) {\n                  <span class=\"marker-dot\"\n                  [style.background]=\"c || null\"></span>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.zen-dpd-label{display:block;margin-bottom:6px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054}.zen-dpd-label .zen-dpd-required{color:#f04438}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.dropdown-trigger.size-form{height:46px}.dropdown-trigger{box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start;width:280px}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-pickers-dual{display:flex;align-items:stretch}.time-pickers-dual>.time-picker-container{box-sizing:border-box;min-width:0}.time-pickers-dual>.time-picker-container:first-child{flex:0 0 328px;width:328px}.time-pickers-dual>.time-picker-container:last-child{flex:1 1 auto}.time-pickers-divider{width:1px;min-width:1px;background:#eaecf0;align-self:stretch;flex-shrink:0}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.calendars-container:has(.time-pickers-dual) .bottom-panel{column-gap:16px}.calendars-container:has(.time-pickers-dual) .bottom-panel .input-fields,.calendars-container:has(.time-pickers-dual) .bottom-panel .actions{flex-shrink:0}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.TranslateService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -3086,6 +3213,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                 type: Input
             }], hideTrigger: [{
                 type: Input
+            }], label: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], size: [{
+                type: Input
             }], triggerBtn: [{
                 type: ViewChild,
                 args: ['triggerBtn']
@@ -4147,7 +4280,7 @@ 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduToggleComponent, selector: "zen-toggle", inputs: ["enabled", "size", "disabled", "label", "supportingText"], outputs: ["enabledChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduRadioButtonComponent, selector: "zen-radio", inputs: ["selected", "label", "value", "name", "disabled", "imageUrl", "size", "supportingText"], outputs: ["radioChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "component", type: ZenduDatePickerDropdownComponent, selector: "zen-date-picker-dropdown", inputs: ["type", "date", "startDate", "endDate", "presets", "minDate", "maxDate", "disabled", "dateMarkers", "placeholder", "mobileBreakpoint", "timePicker", "autoApply", "hideTrigger"], outputs: ["dateChange", "startDateChange", "endDateChange", "rangeChange"] }, { kind: "component", type: ZenduInputComponent, selector: "zen-input", inputs: ["type", "variant", "placeholder", "label", "hintText", "leadingIcon", "helpIcon", "helpTooltip", "destructive", "errorMessage", "disabled", "required", "maxLength", "minLength", "pattern", "autocomplete", "name", "id", "leadingDropdownOptions", "leadingDropdownValue", "leadingDropdownPlaceholder", "trailingDropdownOptions", "trailingDropdownValue", "trailingDropdownPlaceholder", "leadingText", "trailingText", "multiline", "rows", "resizable", "size", "showCharacterCount", "phoneMaxLength", "phone", "width"], outputs: ["valueChange", "inputFocus", "inputBlur", "inputKeydown", "inputKeyup", "leadingDropdownChange", "leadingDropdownValueChange", "trailingDropdownChange", "trailingDropdownValueChange", "helpIconClick", "phoneChange", "validChange", "leadingIconClick"] }, { kind: "component", type: ZenButtonComponent, selector: "zen-button", inputs: ["variant", "buttonType", "icon", "iconRotated", "size", "destructive", "disabled", "fullWidth", "type"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduFilterComponent, isStandalone: false, selector: "zen-filter", inputs: { config: "config", filter: "filter", position: "position", resetBehavior: "resetBehavior", defaultFilter: "defaultFilter", isVisible: "isVisible", customTrigger: "customTrigger", imageUrl: "imageUrl", label: "label", triggerVariant: "triggerVariant", showOptions: "showOptions", customOptions: "customOptions", wrapperBodyClass: "wrapperBodyClass", customPosition: "customPosition" }, outputs: { filterChange: "filterChange", isVisibleChange: "isVisibleChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:resize": "windowSizeHandling()", "window:scroll": "windowScroll()", "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "_componentElement", first: true, predicate: ["mainComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"filters-component\"\n  #mainComponent\n  click-out=\"isVisible && hide()\">\n\n  @if (!customTrigger) {\n    <zen-button (click)=\"toggle()\"\n      [variant]=\"hasActiveFilters ? 'secondary' : 'secondary-gray'\"\n      class=\"filter {{hasActiveFilters ? 'applied' : ''}} {{triggerVariant === 'icon-only' ? 'icon-only' : ''}}\">\n      @if (imageUrl) {\n        <zen-icon [src]=\"imageUrl\"\n        ></zen-icon>\n      }\n      @if (!imageUrl) {\n        <zen-icon class=\"filter-icon\"\n        name=\"filter\"></zen-icon>\n      }\n      @if (triggerVariant !== 'icon-only') {\n        <span class=\"filter-label\">{{ (label || 'Filter') | translate }}</span>\n        @if (appliedCount > 0) {\n          <span class=\"filter-count-badge\">{{ appliedCount }}</span>\n        }\n      }\n    </zen-button>\n    <!-- Icon-only mode: count rendered as a corner badge overlapping the\n         button's top-right (sibling of the button so it isn't clipped). -->\n    @if (triggerVariant === 'icon-only' && appliedCount > 0) {\n      <span class=\"filter-icon-badge\">{{ appliedCount }}</span>\n    }\n  }\n\n  @if (customTrigger) {\n    <ng-content></ng-content>\n  }\n\n  <div [hidden]=\"!isVisible\"\n    class=\"filter-menu menu-content\"\n    [class.customTrigger]=\"customTrigger\"\n    [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom, 'max-height': menuMaxHeight }\">\n    <div class=\"filter-menu__header\">\n      <zen-search-box [(text)]=\"searchText\"\n        #searchBox\n      (textChange)=\"searchTextChanged()\"></zen-search-box>\n    </div>\n\n    <div class=\"filter-menu__body\"\n      ngClass=\"{{wrapperBodyClass}}\">\n      @if (errorMessage.length) {\n        @for (item of errorMessage; track item) {\n          <li\n          class=\"error-msg\">{{item | translate }}</li>\n        }\n      }\n\n      @for (item of config.items; track item) {\n          @if (isMenuIsVisible(item)) {\n            <div [class]=\"'menu-item menu-item--' + item.type\">\n              <!-- Divider between two filter -->\n              @if (item.type === 'divider') {\n                <p class=\"filter-divider\"></p>\n              }\n              <!-- Boolean toggle -->\n              @if (item.type === 'toggle') {\n                <div\n                  class=\"action-item toggle-row\"\n                  (click)=\"toggleEnabled(item)\">\n                  <div>{{item.title | translate}}</div>\n                  <zen-toggle [(enabled)]=\"item.enabled\"\n                    (click)=\"$event.stopPropagation()\"></zen-toggle>\n                </div>\n              }\n              @if (item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse) {\n                <button class=\"action-item expander-item\"\n                  (click)=\"toggleItem(item)\">\n                  <span class=\"expander-title\">{{item.title | translate}}</span>\n                  <span class=\"expander-indicator\">\n                    @if (isItemFiltered(item)) {\n                      <span class=\"filter-section-dot\"></span>\n                    }\n                    <zen-icon class=\"expand-icon\"\n                      name=\"chevron-down\"\n                    [class.active]=\"item.expanded\"></zen-icon>\n                  </span>\n                </button>\n              }\n              @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n                <div class=\"action-item section-title\"\n                  >\n                  <span class=\"expander-title\">{{item.title | translate}}</span>\n                  @if (isItemFiltered(item)) {\n                    <span class=\"filter-section-dot\"></span>\n                  }\n                </div>\n              }\n              @if (item.expanded || item.disableCollapse) {\n                @switch (item.type) {\n                    <!-- Multiselect -->\n                    @case ('multiselect') {\n                      <div class=\"menu-item__content\">\n                        <!-- Lazy loading mode -->\n                        @if (item.isLazyLoading) {\n                          @for (dsItem of item.filteredDataSource; track dsItem) {\n                            <div\n                              class=\"action-item-checkbox ds-item\"\n                              [class.has-badge]=\"dsItem.badgeBgColor\"\n                              (click)=\"toggleDsItem(dsItem, item)\">\n                              <zen-checkbox [(checked)]=\"dsItem.checked\"\n                                [imageUrl]=\"dsItem.imageUrl\"\n                                (checkedChange)=\"checkChanged(dsItem, item)\"\n                                (click)=\"$event.stopPropagation()\"\n                              [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n                              @if (dsItem.badgeBgColor) {\n                                <span\n                                  class=\"filter-item-badge\"\n                                  [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n                                  {{ dsItem.name?.toString() | translate }}\n                                </span>\n                              }\n                            </div>\n                          }\n                          @if (item.canLoadMore && !item.isLoadingNow) {\n                            <div\n                              class=\"action-item\">\n                              <zen-button variant=\"secondary-gray\"\n                                size=\"sm\"\n                                [fullWidth]=\"true\"\n                                (click)=\"loadMore(item, false)\">\n                                {{'Load More' | translate}}\n                              </zen-button>\n                            </div>\n                          }\n                          @if (item.isLoadingNow) {\n                            <div\n                              class=\"loader-more-spinner\">\n                              <zen-spinner size=\"small\"></zen-spinner>\n                            </div>\n                          }\n                        }\n                        @if (!item.isLazyLoading && !hasTreeData(item)) {\n                          @if (!item.hideSelectAll) {\n                            <div class=\"action-item-checkbox ds-item select-all\">\n                              @if (item.dataSource.length === item.filteredDataSource.length) {\n                                <zen-checkbox\n                                  [(checked)]=\"item.isSelectedAll\"\n                                  [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n                                  [label]=\"'Select All' | translate\"\n                                  (checkedChange)=\"onSelectAll(item)\">\n                                </zen-checkbox>\n                              }\n                            </div>\n                          }\n                          @for (dsItem of item.filteredDataSource; track dsItem) {\n                            <div\n                              class=\"action-item-checkbox ds-item\"\n                              [class.has-badge]=\"dsItem.badgeBgColor\"\n                              (click)=\"toggleDsItem(dsItem, item)\">\n                              <zen-checkbox [(checked)]=\"dsItem.checked\"\n                                [imageUrl]=\"dsItem.imageUrl\"\n                                (checkedChange)=\"checkChanged(dsItem, item)\"\n                                (click)=\"$event.stopPropagation()\"\n                              [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n                              @if (dsItem.badgeBgColor) {\n                                <span\n                                  class=\"filter-item-badge\"\n                                  [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n                                  {{ dsItem.name?.toString() | translate }}\n                                </span>\n                              }\n                            </div>\n                          }\n                        }\n                        <!-- Tree view mode -->\n                        @if (!item.isLazyLoading && hasTreeData(item)) {\n                          <zen-groups\n                            [dataSource]=\"item.dataSource\"\n                            [filteredDataSource]=\"item.filteredDataSource\"\n                            [hideSelectAll]=\"item.hideSelectAll\"\n                            [inline]=\"true\"\n                            [hideSearch]=\"true\"\n                            [(isSelectedAll)]=\"item.isSelectedAll\"\n                            (checkedChange)=\"checkChanged($event, item)\">\n                          </zen-groups>\n                        }\n                      </div>\n                    }\n                    <!-- Date range picker -->\n                    @case ('dateRange') {\n                      <div class=\"menu-item__content\">\n                        <!--  Options date range view  -->\n                        @if (item.dateRangeOptions?.length) {\n                          @for (option of item.dateRangeOptions; track option) {\n                            <div class=\"action-item-radio ds-item\">\n                              <zen-radio [value]=\"option.name\"\n                                [label]=\"option.name | translate\"\n                                [name]=\"item.key\"\n                                [selected]=\"selectedDateRangeOptions[item.key] === option.name\"\n                              (radioChange)=\"handleDateRangeOptionClick(item, option)\"></zen-radio>\n                            </div>\n                          }\n                          <div class=\"action-item-radio ds-item\">\n                            <zen-radio [value]=\"'Custom'\"\n                              [label]=\"'Custom' | translate\"\n                              [name]=\"item.key\"\n                              [selected]=\"selectedDateRangeOptions[item.key] === 'Custom'\"\n                            (radioChange)=\"handleCustomDateRangeClick(item)\"></zen-radio>\n                          </div>\n                          @if (selectedDateRangeOptions[item.key] === 'Custom') {\n                            <div class=\"filter-date-fields\">\n                              <div class=\"ds-item filter-row\">\n                                <div class=\"lbl\">{{'From' | translate}}:</div>\n                                <zen-date-picker-dropdown\n                                  type=\"single\"\n                                  [(date)]=\"item.dateRange.start\"\n                                  [timePicker]=\"item.showTime\">\n                                </zen-date-picker-dropdown>\n                              </div>\n                              <div class=\"ds-item filter-row\">\n                                <div class=\"lbl\">{{'To' | translate}}:</div>\n                                <zen-date-picker-dropdown\n                                  type=\"single\"\n                                  [date]=\"item.dateRange.end\"\n                                  [timePicker]=\"item.showTime\"\n                                  (dateChange)=\"handleEndDateChange(item, $event)\">\n                                </zen-date-picker-dropdown>\n                              </div>\n                            </div>\n                          }\n                        }\n                        <!--  Default date range view  -->\n                        @if (!item.dateRangeOptions?.length) {\n                          <div class=\"filter-date-fields\">\n                            <div class=\"ds-item filter-row\">\n                              <div class=\"lbl\">{{'From' | translate}}:</div>\n                              <zen-date-picker-dropdown\n                                type=\"single\"\n                                [(date)]=\"item.dateRange.start\"\n                                [timePicker]=\"item.showTime\">\n                              </zen-date-picker-dropdown>\n                            </div>\n                            <div class=\"ds-item filter-row\">\n                              <div class=\"lbl\">{{'To' | translate}}:</div>\n                              <zen-date-picker-dropdown\n                                type=\"single\"\n                                [date]=\"item.dateRange.end\"\n                                [timePicker]=\"item.showTime\"\n                                (dateChange)=\"handleEndDateChange(item, $event)\">\n                              </zen-date-picker-dropdown>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    }\n                    <!-- Date picker -->\n                    @case ('date') {\n                      <div class=\"filter-row menu-item__content\">\n                        <zen-date-picker-dropdown\n                          type=\"single\"\n                          [(date)]=\"item.date\"\n                          [timePicker]=\"item.showTime\">\n                        </zen-date-picker-dropdown>\n                      </div>\n                    }\n                    <!-- Number range -->\n                    @case ('numberRange') {\n                      <div\n                        class=\"filter-row number-range-row menu-item__content\">\n                        <zen-input type=\"number\"\n                          size=\"sm\"\n                          [label]=\"'Min' | translate\"\n                          [(ngModel)]=\"item.numberRange.from\"></zen-input>\n                        <zen-input type=\"number\"\n                          size=\"sm\"\n                          [label]=\"'Max' | translate\"\n                          [(ngModel)]=\"item.numberRange.to\"></zen-input>\n                      </div>\n                    }\n                    <!-- Radio -->\n                    @case ('radio') {\n                      <div class=\"menu-item__content\">\n                        @for (option of item.radioOptions; track option) {\n                          <div\n                            class=\"action-item-radio ds-item\">\n                            <zen-radio [value]=\"option.id\"\n                              [label]=\"option.name | translate\"\n                              [name]=\"item.key\"\n                              [imageUrl]=\"option.imageUrl\"\n                              [selected]=\"option.selected\"\n                              (radioChange)=\"radioChanged($event, item)\"\n                            [disabled]=\"option.disabled\"></zen-radio>\n                          </div>\n                        }\n                      </div>\n                    }\n                  }\n              }\n            </div>\n          }\n      }\n      @if (showNoFilterResult) {\n        <span\n        class=\"no-item\">{{'No Results Found' | translate}}..</span>\n      }\n    </div>\n\n    <div class=\"filter-menu__footer\">\n      <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n      <div class=\"filter-footer-actions\">\n        <zen-button variant=\"secondary-gray\"\n          [destructive]=\"true\"\n          [disabled]=\"resetDisabled\"\n          (click)=\"reset()\">\n          {{ (defaultFilter ? 'Reset Default' : 'Clear All') | translate }}\n        </zen-button>\n        <zen-button variant=\"primary\"\n          (click)=\"apply()\">\n          {{'Apply' | translate}}\n        </zen-button>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .menu-content{width:400px;white-space:initial;position:fixed}.filters-component .menu-content.absolute{position:absolute;inset:auto}.filters-component .menu-content.dropdown-left{right:0}.filters-component .menu-content.dropdown-right{left:0}.filters-component .menu-content.dropdown-top{bottom:100%;margin-bottom:12px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:12px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .filter-menu{display:flex;flex-direction:column;background:#fff;border-radius:8px;border:1px solid #eaecf0;overflow:hidden;z-index:10;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.filters-component .filter-menu[hidden]{display:none}.filters-component .filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filters-component .filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filters-component .filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.filters-component .filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .menu-item.menu-item--multiselect,.filters-component .filter-menu__body .menu-item.menu-item--radio{gap:0}.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:first-child,.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:first-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:first-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-radio:first-child{margin-top:0}.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:last-child,.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:last-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:last-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-radio:last-child{margin-bottom:0}.filters-component .filter-menu__body .menu-item__content{padding-left:8px}.filters-component .filter-menu__body .action-item,.filters-component .filter-menu__body .action-item-checkbox,.filters-component .filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filters-component .filter-menu__body .action-item:focus-within,.filters-component .filter-menu__body .action-item-checkbox:focus-within,.filters-component .filter-menu__body .action-item-radio:focus-within{background:transparent}.filters-component .filter-menu__body .action-item:hover{background:transparent}.filters-component .filter-menu__body .action-item-checkbox,.filters-component .filter-menu__body .action-item-radio{margin-left:-8px;margin-right:0;padding-left:8px;padding-right:8px;border-radius:6px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .action-item-checkbox:hover,.filters-component .filter-menu__body .action-item-radio:hover{background:#f9fafb}.filters-component .filter-menu__body .action-item-checkbox ::ng-deep .checkbox-component,.filters-component .filter-menu__body .action-item-radio ::ng-deep .radio-component{padding-top:10px;padding-bottom:10px}.filters-component .filter-menu__body .action-item-checkbox:first-child,.filters-component .filter-menu__body .action-item-radio:first-child{margin-top:-10px}.filters-component .filter-menu__body .action-item-checkbox:last-child,.filters-component .filter-menu__body .action-item-radio:last-child{margin-bottom:-4px}.filters-component .filter-menu__body .expander-item{outline:none;border:none;display:flex;width:auto;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filters-component .filter-menu__body .expander-item.expanded,.filters-component .filter-menu__body .expander-item.active{background:transparent;color:#344054}.filters-component .filter-menu__body .expander-item:hover{background:#f9fafb}.filters-component .filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filters-component .filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filters-component .filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filters-component .filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filters-component .filter-menu__body .no-item,.filters-component .filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filters-component .filter-menu__body .select-all{font-weight:500}.filters-component .filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .number-range-row{display:flex;gap:16px}.filters-component .filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filters-component .filter-menu__body .toggle-row{justify-content:space-between;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .toggle-row zen-toggle{display:flex;align-items:center}.filters-component .filter-menu__body .toggle-row:hover{background:#f9fafb}.filters-component .filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled){background-color:#eaecf0}.filters-component .filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled).zen-toggle--active{background-color:#105494}.filters-component .filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.filters-component .filter-menu__body .section-title{display:flex;align-items:center;gap:6px;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;margin:0 -16px;padding:10px 16px;transition:background-color .15s ease}.filters-component .filter-menu__body .section-title:hover{background:#f9fafb}.filters-component .filter-menu__body .has-badge zen-checkbox{width:auto}.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox{background:#e3eefb;border-color:#136ab6}.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-checked,.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.filters-component .filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .filter-menu__body .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.filters-component .filter-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:2px 8px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:12px;line-height:18px;white-space:nowrap;box-sizing:border-box}.filters-component .filter-icon-badge{position:absolute;top:-4px;right:-7px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:1.5px 6px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:9px;line-height:13.5px;text-align:center;white-space:nowrap;box-sizing:border-box;pointer-events:none}.filters-component .filter zen-icon{width:20px;height:20px;background-color:#344054}.filters-component .filter.applied zen-icon{background-color:#136ab6}.filters-component .filter.applied .filter-label{color:#136ab6}.hidden{display:none}:host ::ng-deep .filter.applied button{border-color:#88c1f1!important}:host ::ng-deep .filter.icon-only button{padding:10px!important}:host ::ng-deep zen-radio label{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduToggleComponent, selector: "zen-toggle", inputs: ["enabled", "size", "disabled", "label", "supportingText"], outputs: ["enabledChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduRadioButtonComponent, selector: "zen-radio", inputs: ["selected", "label", "value", "name", "disabled", "imageUrl", "size", "supportingText"], outputs: ["radioChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "component", type: ZenduDatePickerDropdownComponent, selector: "zen-date-picker-dropdown", inputs: ["type", "date", "startDate", "endDate", "presets", "minDate", "maxDate", "disabled", "dateMarkers", "placeholder", "mobileBreakpoint", "timePicker", "autoApply", "hideTrigger", "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,
@@ -4269,6 +4402,16 @@ class ZenduSelectComponent {
          * List of options
          */
         this.options = [];
+        /**
+         * Show a help icon next to the label. On hover/keyboard-focus it reveals a
+         * self-contained tooltip with `helpTooltip` (the library does not depend on
+         * Angular Material).
+         */
+        this.helpIcon = false;
+        /**
+         * Tooltip text shown on hover/focus of the label help icon. Translated.
+         */
+        this.helpTooltip = '';
         /**
          * Hint text (shown below select)
          */
@@ -4374,6 +4517,8 @@ class ZenduSelectComponent {
          * State tracking
          */
         this.isOpen = false;
+        this.helpTooltipAlign = 'center';
+        this.helpTooltipPlacement = 'above';
         this.searchText = '';
         this.searchInputValue = '';
         this.searchFocused = false;
@@ -4457,6 +4602,38 @@ class ZenduSelectComponent {
     /**
      * Toggle dropdown
      */
+    /**
+     * Position the help tooltip so it never overflows the viewport. Horizontally:
+     * anchored to the icon's right edge near the right border, to its left edge near
+     * the left border, otherwise centered. Vertically: above by default, flipped
+     * below when there isn't room above and there's more room below (the label-row
+     * icon sits high in the layout). Computed from the icon rect synchronously
+     * (before paint) so the tooltip appears in its final spot without a flicker.
+     */
+    updateHelpTooltipPlacement(event) {
+        const icon = event.currentTarget;
+        if (!icon) {
+            return;
+        }
+        const rect = icon.getBoundingClientRect();
+        const margin = 8;
+        const iconCenter = rect.left + rect.width / 2;
+        const halfMaxWidth = 130;
+        if (iconCenter + halfMaxWidth > window.innerWidth - margin) {
+            this.helpTooltipAlign = 'end';
+        }
+        else if (iconCenter - halfMaxWidth < margin) {
+            this.helpTooltipAlign = 'start';
+        }
+        else {
+            this.helpTooltipAlign = 'center';
+        }
+        const estimatedHeight = 56;
+        const spaceAbove = rect.top;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        this.helpTooltipPlacement =
+            spaceAbove < estimatedHeight + margin && spaceBelow > spaceAbove ? 'below' : 'above';
+    }
     toggleDropdown() {
         if (this.disabled)
             return;
@@ -5044,11 +5221,11 @@ class ZenduSelectComponent {
         this.isSelectedAll = this.options.every(opt => opt.checked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduSelectComponent, isStandalone: false, selector: "zen-select", inputs: { selectModel: "selectModel", options: "options", label: "label", supportingText: "supportingText", hintText: "hintText", placeholder: "placeholder", leadingType: "leadingType", leadingIcon: "leadingIcon", leadingAvatar: "leadingAvatar", leadingDotColor: "leadingDotColor", displayProp: "displayProp", idProp: "idProp", hasSearch: "hasSearch", isMultiselect: "isMultiselect", multiselect: "multiselect", hideSelectAll: "hideSelectAll", hideTreeSearch: "hideTreeSearch", required: "required", disabled: "disabled", error: "error", errorMessage: "errorMessage", destructive: "destructive", size: "size", returnOption: "returnOption", isTruncate: "isTruncate", enableAddNewOption: "enableAddNewOption", showDefaultAddOption: "showDefaultAddOption", newOptionText: "newOptionText", enableRemoveOption: "enableRemoveOption", removeOptionText: "removeOptionText", isLazyLoading: "isLazyLoading", lazyLoader: "lazyLoader", preferredOpenDirection: "preferredOpenDirection" }, outputs: { selectModelChange: "selectModelChange", addNewOption: "addNewOption", removeOption: "removeOption", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ZenduSelectOptionDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ZenduSelectValueDirective, descendants: true }, { propertyName: "buttonTemplate", first: true, predicate: ZenduSelectButtonDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"getStateClasses()\">\n  <!-- Label -->\n  @if (label) {\n    <label class=\"app-select-label text text-sm text-weight-medium\"\n      [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n      {{ label | translate }}\n      @if (required) {\n        <span class=\"required-indicator\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Select Input -->\n  <div class=\"app-select-wrapper\">\n    <!-- Custom Trigger Template (overrides built-in trigger) -->\n    @if (buttonTemplate) {\n      <div\n        class=\"app-select-custom-trigger\"\n        (click)=\"toggleDropdown()\">\n        <ng-template [ngTemplateOutlet]=\"buttonTemplate.template\"\n          [ngTemplateOutletContext]=\"{ isOpen: isOpen, selected: getSelectedOption(), display: selectedDisplay, disabled: disabled }\">\n        </ng-template>\n      </div>\n    }\n\n    <!-- Built-in Trigger (when no custom button template provided) -->\n    @if (!buttonTemplate) {\n      @switch (leadingType) {\n        <!-- Default Select (no leading element) -->\n        @case ('default') {\n          <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n        }\n        <!-- Icon Leading Select -->\n        @case ('icon') {\n          <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n        }\n        <!-- Avatar Leading Select -->\n        @case ('avatar') {\n          <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n        }\n        <!-- Dot Leading Select -->\n        @case ('dot') {\n          <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n        }\n        <!-- Search Input Select -->\n        @case ('search') {\n          <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n        }\n      }\n    }\n\n    <!-- Dropdown Menu -->\n    @if (isOpen) {\n      <div class=\"app-select-dropdown\"\n        [ngClass]=\"getDropdownDirectionClass()\"\n        >\n        <!-- Tree Mode: embed zen-groups inline -->\n        @if (isTreeMode && isMultiselect) {\n          <zen-groups [inline]=\"true\"\n            [dataSource]=\"$any(options)\"\n            [filteredDataSource]=\"treeFilteredDataSource\"\n            [hideSelectAll]=\"hideSelectAll\"\n            [hideSearch]=\"hideTreeSearch\"\n            [idProp]=\"idProp\"\n            [displayProp]=\"displayProp\"\n            [(isSelectedAll)]=\"isSelectedAll\"\n            (isSelectedAllChange)=\"onTreeSelectAllChange($event)\"\n            (checkedChange)=\"onTreeCheckedChange($event)\">\n          </zen-groups>\n        } @else {\n          <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n          @if (leadingType !== 'search' && hasSearch && !disabled) {\n            <div class=\"app-select-search\">\n              <zen-icon [name]=\"'search'\"\n                [customColor]=\"'#667085'\">\n              </zen-icon>\n              <input type=\"text\"\n                [(ngModel)]=\"searchText\"\n                (ngModelChange)=\"onSearchChange()\"\n                (keydown.enter)=\"onSearchEnter($event)\"\n                placeholder=\"Search\"\n                class=\"app-select-search-input\">\n              @if (searchText) {\n                <zen-icon\n                  class=\"app-select-search-clear\"\n                  [name]=\"'x'\"\n                  [customColor]=\"'#667085'\"\n                  (click)=\"clearSearch(); $event.stopPropagation()\">\n                </zen-icon>\n              }\n            </div>\n          }\n          <!-- Options List -->\n          <div class=\"app-select-options\" (scroll)=\"onOptionsScroll($event)\">\n            <!-- Select All Option for Multiselect -->\n            @if (isMultiselect && !hideSelectAll && !isLazyLoading && filteredOptions.length > 0) {\n              <button\n                class=\"app-select-option select-all\"\n                (click)=\"toggleSelectAll()\">\n                <zen-checkbox class=\"app-select-checkbox\"\n                  [checked]=\"isAllSelected()\"\n                  [disableValueChange]=\"true\"\n                  [label]=\"''\"\n                  size=\"sm\">\n                </zen-checkbox>\n                <span class=\"app-select-option-text\">\n                  Select All\n                </span>\n              </button>\n            }\n            <!-- Add New Option -->\n            @if (enableAddNewOption && (showDefaultAddOption || searchText)) {\n              <button\n                class=\"app-select-option add-new-option\"\n                (click)=\"handleAddNewOption(); $event.stopPropagation()\">\n                <zen-icon [name]=\"'plus'\" [customColor]=\"'#136AB6'\"></zen-icon>\n                <span class=\"app-select-option-text\">\n                  {{ (newOptionText || 'Add New Option') + (searchText ? ': \"' + searchText + '\"' : '') }}\n                </span>\n              </button>\n            }\n            <!-- Remove Option -->\n            @if (enableRemoveOption) {\n              <button\n                class=\"app-select-option remove-option\"\n                (click)=\"handleRemoveOption(); $event.stopPropagation()\">\n                <zen-icon [name]=\"'user-x'\" [customColor]=\"'#344054'\"></zen-icon>\n                <span class=\"app-select-option-text\">\n                  {{ removeOptionText || 'Remove' }}\n                </span>\n              </button>\n            }\n            @if (filteredOptions.length === 0 && !enableAddNewOption && !isLoadingNow) {\n              <div class=\"app-select-no-options\">\n                No matching options found\n              </div>\n            }\n            @for (option of filteredOptions; track option) {\n              <button\n                class=\"app-select-option\"\n                [class.selected]=\"isSelected(option)\"\n                (click)=\"selectOption(option)\">\n                <!-- Checkbox for Multiselect -->\n                @if (isMultiselect) {\n                  <zen-checkbox class=\"app-select-checkbox\"\n                    [checked]=\"isSelected(option)\"\n                    [disableValueChange]=\"true\"\n                    [label]=\"''\"\n                    size=\"sm\">\n                  </zen-checkbox>\n                }\n                <!-- Option Leading Element -->\n                @if (leadingType !== 'default') {\n                  <div class=\"app-select-option-leading\">\n                    @switch (leadingType) {\n                      @case ('icon') {\n                        <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('avatar') {\n                        <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('dot') {\n                        <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                    }\n                  </div>\n                }\n                <!-- Option Text -->\n                <div class=\"app-select-option-text-wrapper\">\n                  <!-- Use custom template if provided -->\n                  @if (!isMultiselect && optionTemplate) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n                      [ngTemplateOutletContext]=\"{ option: option }\">\n                    </ng-template>\n                  } @else {\n                    <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n                      {{ getName(option) | translate }}\n                    </span>\n                    @if (option.secondaryText) {\n                      <span class=\"app-select-option-secondary\">\n                        {{ option.secondaryText }}\n                      </span>\n                    }\n                  }\n                </div>\n                <!-- Check Icon for Single Select -->\n                @if (!isMultiselect && isSelected(option)) {\n                  <zen-icon\n                    class=\"app-select-option-check\"\n                    [name]=\"'check'\"\n                    [customColor]=\"'#136AB6'\">\n                  </zen-icon>\n                }\n              </button>\n            }\n            <!-- Lazy loading spinner -->\n            @if (isLazyLoading && isLoadingNow) {\n              <div class=\"app-select-loading\">\n                <zen-spinner size=\"small\"></zen-spinner>\n              </div>\n            }\n          </div>\n        }\n        <!-- Flat List Mode (default) -->\n      </div>\n    }\n  </div>\n\n  <!-- Hint text / Error message -->\n  @if ((destructive && errorMessage) || hintText) {\n    <div\n      class=\"app-select-hint text text-sm text-weight-regular\"\n      [ngClass]=\"{'destructive': destructive}\">\n      @if (destructive) {\n        <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n      }\n      <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n    </div>\n  }\n</div>\n\n<!-- ============================================= -->\n<!-- MAIN SELECT INPUT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Default Select Template (No Leading Element) -->\n<ng-template #defaultSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Icon Select Template -->\n<ng-template #iconSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: getSelectedOption(), icon: leadingIcon }\"></ng-container>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Avatar Select Template -->\n<ng-template #avatarSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: getSelectedOption(), avatar: leadingAvatar }\"></ng-container>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Dot Select Template -->\n<ng-template #dotSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: getSelectedOption(), color: leadingDotColor }\"></ng-container>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Search Input Template -->\n<ng-template #searchInputTemplate>\n  <div class=\"app-select-input app-select-search-input\"\n    [class.focused]=\"isOpen || searchFocused\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <!-- Search Icon -->\n    <zen-icon [name]=\"'search'\"\n      [customColor]=\"disabled ? '#9CA3AF' : '#667085'\">\n    </zen-icon>\n\n    <!-- Search Input Field -->\n    <input type=\"text\"\n      class=\"app-select-search-field\"\n      [(ngModel)]=\"searchInputValue\"\n      (ngModelChange)=\"onSearchInputChange()\"\n      (keydown.enter)=\"onSearchEnter($event)\"\n      (focus)=\"onSearchFocus()\"\n      (blur)=\"onSearchBlur($event)\"\n      [placeholder]=\"selectedDisplay || placeholder\"\n      [disabled]=\"disabled\">\n  </div>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- SHARED COMPONENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Select Value Display -->\n<ng-template #selectValueDisplay>\n  <div class=\"app-select-value-wrapper\">\n    @if (valueTemplate && !isModelEmpty()) {\n      <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n        [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n      </ng-template>\n    } @else {\n      <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n        {{ selectedDisplay || placeholder | translate }}\n      </span>\n      @if (getSelectedSecondaryText() && !isModelEmpty()) {\n        <span class=\"app-select-secondary\">\n          {{ getSelectedSecondaryText() }}\n        </span>\n      }\n    }\n  </div>\n</ng-template>\n\n<!-- Dropdown Arrow -->\n<ng-template #dropdownArrow>\n  <zen-icon class=\"app-select-arrow\"\n    [class.rotated]=\"isOpen\"\n    [name]=\"'chevron-down'\"\n    [customColor]=\"'#667085'\">\n  </zen-icon>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- LEADING ELEMENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Icon Leading Element (with smart resolution) -->\n<ng-template #iconLeadingElement let-option=\"option\" let-icon=\"icon\">\n  @if (icon || option?.icon || option?.iconName) {\n    @if (getIconPath(option, icon); as iconPath) {\n      <!-- If icon contains / or . treat as SVG path -->\n      @if ((icon && (icon.includes('/') || icon.includes('.'))) ||\n        (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n        (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.')))) {\n        <!-- Use img tag for Excel to preserve colors -->\n        @if (iconPath.includes('excel')) {\n          <img\n            [src]=\"iconPath\"\n            alt=\"\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Use zen-icon with src for other SVG files -->\n        @if (!iconPath.includes('excel')) {\n          <zen-icon\n            [src]=\"iconPath\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n      <!-- Otherwise treat as Material icon name or special cases -->\n      @if (!((icon && (icon.includes('/') || icon.includes('.'))) ||\n        (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n        (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.'))))) {\n        <!-- Special case for Excel icon - use img to preserve colors -->\n        @if ((icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')) {\n          <img\n            src=\"assets/ng-zenduit/icons/excel.svg\"\n            alt=\"Excel\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Material icon names -->\n        @if ((icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')) {\n          <zen-icon\n            [name]=\"icon || option?.icon || option?.iconName\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n    }\n  }\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n  @if (avatar || option?.avatar) {\n    <div class=\"app-select-avatar\" >\n      <img [src]=\"avatar || option?.avatar\" alt=\"\">\n    </div>\n  }\n</ng-template>\n\n<!-- Dot Leading Element -->\n<ng-template #dotLeadingElement let-option=\"option\" let-color=\"color\">\n  <div class=\"app-select-dot\"\n    [style.background-color]=\"color || option?.dotColor || '#10B981'\">\n  </div>\n</ng-template>", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}.app-select-container{width:100%;position:relative}.app-select-label{display:flex;align-items:center;gap:4px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.app-select-wrapper{position:relative;width:100%}.app-select-custom-trigger{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;color:#101828;text-align:left;cursor:pointer;transition:all .2s ease}.app-select-input.app-select-search-input{cursor:text}.app-select-input.app-select-search-input .app-select-search-field{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;background:transparent;color:#101828;min-width:0}.app-select-input.app-select-search-input .app-select-search-field::placeholder{color:#667085}.app-select-input.app-select-search-input .app-select-search-field:disabled{cursor:not-allowed;color:#667085}.app-select-input:hover:not(:disabled){border-color:#98a2b3}.app-select-input.focused,.app-select-input:focus{outline:none;border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.app-select-input:disabled{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.app-select-container.error .app-select-input:hover:not(:disabled){border-color:#f97066}.app-select-container.error .app-select-input:focus{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-leading,.app-select-option-leading{display:flex;align-items:center;flex-shrink:0}.app-select-avatar,.app-select-option-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}.app-select-avatar img,.app-select-option-avatar img{width:100%;height:100%;object-fit:cover}.app-select-avatar .avatar-placeholder,.app-select-option-avatar .avatar-placeholder{width:100%;height:100%;background:#f2f4f7;color:#667085;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0;font-weight:600;font-style:normal}.app-select-dot,.app-select-option-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.app-select-value-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-value-wrapper .app-select-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085}.app-select-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-value.placeholder{color:#667085}.app-select-secondary,.app-select-option-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085;white-space:nowrap;flex-shrink:0}.app-select-arrow{margin-left:auto;flex-shrink:0;transition:transform .2s ease}.app-select-arrow.rotated{transform:rotate(180deg)}.app-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-dropdown.dropdown-up{top:auto;bottom:calc(100% + 4px)}.app-select-dropdown.dropdown-down,.app-select-dropdown.dropdown-auto{top:calc(100% + 4px);bottom:auto}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search .app-select-search-input{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;color:#101828}.app-select-search .app-select-search-input::placeholder{color:#667085}.app-select-search .app-select-search-clear{cursor:pointer}.app-select-loading{display:flex;justify-content:center;align-items:center;padding:8px 0}.app-select-options{flex:1;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#f9fafb}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.size-sm .app-select-option{padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-secondary,.app-select-container.disabled .app-select-search-field{color:#667085}.app-select-container.disabled .app-select-arrow,.app-select-container.disabled .app-select-leading zen-icon,.app-select-container.disabled .app-select-search-input zen-icon,.app-select-container.disabled .app-select-dot{opacity:.6}.app-select-container.disabled .app-select-input,.app-select-container.disabled .app-select-search-input{background:#f9fafb;cursor:not-allowed}.app-select-hint{display:flex;align-items:center;gap:4px;margin-top:6px;color:#667085}.app-select-hint .hint-icon{font-size:16px;color:#f04438}.app-select-hint.destructive{color:#f04438}.app-select-option.select-all{border-bottom:1px solid #F2F4F7;margin-bottom:4px;padding-bottom:14px}.app-select-option.add-new-option{color:#136ab6;font-weight:500}.app-select-option.add-new-option:hover{background:#eff8ff}.app-select-option.remove-option{background:#f9fafb;color:#344054}.app-select-option.remove-option .app-select-option-text{color:#344054}.app-select-spinner{display:flex;justify-content:center;padding:16px}.app-select-spinner .spinner-small{width:20px;height:20px;border:2px solid #F2F4F7;border-top-color:#136ab6;border-radius:50%;animation:spin .6s linear infinite}.app-select-load-more{padding:8px 14px}.app-select-load-more .app-select-load-more-btn{width:100%;padding:8px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:6px;color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0;font-weight:500;font-style:normal;cursor:pointer;transition:all .15s ease}.app-select-load-more .app-select-load-more-btn:hover{background:#f9fafb;border-color:#667085}@keyframes spin{to{transform:rotate(360deg)}}.app-select-dropdown ::ng-deep zen-groups .zen-groups-inline{display:flex;flex-direction:column;max-height:310px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree{flex:1;overflow-y:auto;padding:4px 14px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar{width:6px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-track{background:transparent}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox{padding:10px 0;font-weight:400;font-size:14px;line-height:20px;color:#344054}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox:hover{background:#f9fafb}.app-select-dropdown ::ng-deep zen-groups .select-all{border-bottom:none;margin-bottom:0;font-weight:500}.app-select-dropdown ::ng-deep zen-groups .tree-item-badge{background:#f1f7fe;color:#105494}.app-select-dropdown ::ng-deep zen-groups .checkbox-component .app-checkbox-label{font-weight:400;color:#344054}.app-select-dropdown ::ng-deep zen-groups .zen-groups-no-results{padding:32px 0;text-align:center;color:#667085}@media(max-width:640px){.app-select-dropdown{position:fixed;inset:auto 0 0;max-height:70vh;border-radius:16px 16px 0 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    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" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ZenduSelectOptionDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ZenduSelectValueDirective, descendants: true }, { propertyName: "buttonTemplate", first: true, predicate: ZenduSelectButtonDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"getStateClasses()\">\n  <!-- Label -->\n  @if (label) {\n    <label class=\"app-select-label text text-sm text-weight-medium\"\n      [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n      {{ label | translate }}\n      @if (required) {\n        <span class=\"required-indicator\">*</span>\n      }\n      @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\">\n    <!-- Custom Trigger Template (overrides built-in trigger) -->\n    @if (buttonTemplate) {\n      <div\n        class=\"app-select-custom-trigger\"\n        (click)=\"toggleDropdown()\">\n        <ng-template [ngTemplateOutlet]=\"buttonTemplate.template\"\n          [ngTemplateOutletContext]=\"{ isOpen: isOpen, selected: getSelectedOption(), display: selectedDisplay, disabled: disabled }\">\n        </ng-template>\n      </div>\n    }\n\n    <!-- Built-in Trigger (when no custom button template provided) -->\n    @if (!buttonTemplate) {\n      @switch (leadingType) {\n        <!-- Default Select (no leading element) -->\n        @case ('default') {\n          <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n        }\n        <!-- Icon Leading Select -->\n        @case ('icon') {\n          <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n        }\n        <!-- Avatar Leading Select -->\n        @case ('avatar') {\n          <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n        }\n        <!-- Dot Leading Select -->\n        @case ('dot') {\n          <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n        }\n        <!-- Search Input Select -->\n        @case ('search') {\n          <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n        }\n      }\n    }\n\n    <!-- Dropdown Menu -->\n    @if (isOpen) {\n      <div class=\"app-select-dropdown\"\n        [ngClass]=\"getDropdownDirectionClass()\"\n        >\n        <!-- Tree Mode: embed zen-groups inline -->\n        @if (isTreeMode && isMultiselect) {\n          <zen-groups [inline]=\"true\"\n            [dataSource]=\"$any(options)\"\n            [filteredDataSource]=\"treeFilteredDataSource\"\n            [hideSelectAll]=\"hideSelectAll\"\n            [hideSearch]=\"hideTreeSearch\"\n            [idProp]=\"idProp\"\n            [displayProp]=\"displayProp\"\n            [(isSelectedAll)]=\"isSelectedAll\"\n            (isSelectedAllChange)=\"onTreeSelectAllChange($event)\"\n            (checkedChange)=\"onTreeCheckedChange($event)\">\n          </zen-groups>\n        } @else {\n          <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n          @if (leadingType !== 'search' && hasSearch && !disabled) {\n            <div class=\"app-select-search\">\n              <zen-icon [name]=\"'search'\"\n                [customColor]=\"'#667085'\">\n              </zen-icon>\n              <input type=\"text\"\n                [(ngModel)]=\"searchText\"\n                (ngModelChange)=\"onSearchChange()\"\n                (keydown.enter)=\"onSearchEnter($event)\"\n                placeholder=\"Search\"\n                class=\"app-select-search-input\">\n              @if (searchText) {\n                <zen-icon\n                  class=\"app-select-search-clear\"\n                  [name]=\"'x'\"\n                  [customColor]=\"'#667085'\"\n                  (click)=\"clearSearch(); $event.stopPropagation()\">\n                </zen-icon>\n              }\n            </div>\n          }\n          <!-- Options List -->\n          <div class=\"app-select-options\" (scroll)=\"onOptionsScroll($event)\">\n            <!-- Select All Option for Multiselect -->\n            @if (isMultiselect && !hideSelectAll && !isLazyLoading && filteredOptions.length > 0) {\n              <button\n                class=\"app-select-option select-all\"\n                (click)=\"toggleSelectAll()\">\n                <zen-checkbox class=\"app-select-checkbox\"\n                  [checked]=\"isAllSelected()\"\n                  [disableValueChange]=\"true\"\n                  [label]=\"''\"\n                  size=\"sm\">\n                </zen-checkbox>\n                <span class=\"app-select-option-text\">\n                  Select All\n                </span>\n              </button>\n            }\n            <!-- Add New Option -->\n            @if (enableAddNewOption && (showDefaultAddOption || searchText)) {\n              <button\n                class=\"app-select-option add-new-option\"\n                (click)=\"handleAddNewOption(); $event.stopPropagation()\">\n                <zen-icon [name]=\"'plus'\" [customColor]=\"'#136AB6'\"></zen-icon>\n                <span class=\"app-select-option-text\">\n                  {{ (newOptionText || 'Add New Option') + (searchText ? ': \"' + searchText + '\"' : '') }}\n                </span>\n              </button>\n            }\n            <!-- Remove Option -->\n            @if (enableRemoveOption) {\n              <button\n                class=\"app-select-option remove-option\"\n                (click)=\"handleRemoveOption(); $event.stopPropagation()\">\n                <zen-icon [name]=\"'user-x'\" [customColor]=\"'#344054'\"></zen-icon>\n                <span class=\"app-select-option-text\">\n                  {{ removeOptionText || 'Remove' }}\n                </span>\n              </button>\n            }\n            @if (filteredOptions.length === 0 && !enableAddNewOption && !isLoadingNow) {\n              <div class=\"app-select-no-options\">\n                No matching options found\n              </div>\n            }\n            @for (option of filteredOptions; track option) {\n              <button\n                class=\"app-select-option\"\n                [class.selected]=\"isSelected(option)\"\n                (click)=\"selectOption(option)\">\n                <!-- Checkbox for Multiselect -->\n                @if (isMultiselect) {\n                  <zen-checkbox class=\"app-select-checkbox\"\n                    [checked]=\"isSelected(option)\"\n                    [disableValueChange]=\"true\"\n                    [label]=\"''\"\n                    size=\"sm\">\n                  </zen-checkbox>\n                }\n                <!-- Option Leading Element -->\n                @if (leadingType !== 'default') {\n                  <div class=\"app-select-option-leading\">\n                    @switch (leadingType) {\n                      @case ('icon') {\n                        <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('avatar') {\n                        <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('dot') {\n                        <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                    }\n                  </div>\n                }\n                <!-- Option Text -->\n                <div class=\"app-select-option-text-wrapper\">\n                  <!-- Use custom template if provided -->\n                  @if (!isMultiselect && optionTemplate) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n                      [ngTemplateOutletContext]=\"{ option: option }\">\n                    </ng-template>\n                  } @else {\n                    <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n                      {{ getName(option) | translate }}\n                    </span>\n                    @if (option.secondaryText) {\n                      <span class=\"app-select-option-secondary\">\n                        {{ option.secondaryText }}\n                      </span>\n                    }\n                  }\n                </div>\n                <!-- Check Icon for Single Select -->\n                @if (!isMultiselect && isSelected(option)) {\n                  <zen-icon\n                    class=\"app-select-option-check\"\n                    [name]=\"'check'\"\n                    [customColor]=\"'#136AB6'\">\n                  </zen-icon>\n                }\n              </button>\n            }\n            <!-- Lazy loading spinner -->\n            @if (isLazyLoading && isLoadingNow) {\n              <div class=\"app-select-loading\">\n                <zen-spinner size=\"small\"></zen-spinner>\n              </div>\n            }\n          </div>\n        }\n        <!-- Flat List Mode (default) -->\n      </div>\n    }\n  </div>\n\n  <!-- Hint text / Error message -->\n  @if ((destructive && errorMessage) || hintText) {\n    <div\n      class=\"app-select-hint text text-sm text-weight-regular\"\n      [ngClass]=\"{'destructive': destructive}\">\n      @if (destructive) {\n        <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n      }\n      <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n    </div>\n  }\n</div>\n\n<!-- ============================================= -->\n<!-- MAIN SELECT INPUT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Default Select Template (No Leading Element) -->\n<ng-template #defaultSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Icon Select Template -->\n<ng-template #iconSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: getSelectedOption(), icon: leadingIcon }\"></ng-container>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Avatar Select Template -->\n<ng-template #avatarSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: getSelectedOption(), avatar: leadingAvatar }\"></ng-container>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Dot Select Template -->\n<ng-template #dotSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: getSelectedOption(), color: leadingDotColor }\"></ng-container>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Search Input Template -->\n<ng-template #searchInputTemplate>\n  <div class=\"app-select-input app-select-search-input\"\n    [class.focused]=\"isOpen || searchFocused\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <!-- Search Icon -->\n    <zen-icon [name]=\"'search'\"\n      [customColor]=\"disabled ? '#9CA3AF' : '#667085'\">\n    </zen-icon>\n\n    <!-- Search Input Field -->\n    <input type=\"text\"\n      class=\"app-select-search-field\"\n      [(ngModel)]=\"searchInputValue\"\n      (ngModelChange)=\"onSearchInputChange()\"\n      (keydown.enter)=\"onSearchEnter($event)\"\n      (focus)=\"onSearchFocus()\"\n      (blur)=\"onSearchBlur($event)\"\n      [placeholder]=\"selectedDisplay || placeholder\"\n      [disabled]=\"disabled\">\n  </div>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- SHARED COMPONENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Select Value Display -->\n<ng-template #selectValueDisplay>\n  <div class=\"app-select-value-wrapper\">\n    @if (valueTemplate && !isModelEmpty()) {\n      <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n        [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n      </ng-template>\n    } @else {\n      <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n        {{ selectedDisplay || placeholder | translate }}\n      </span>\n      @if (getSelectedSecondaryText() && !isModelEmpty()) {\n        <span class=\"app-select-secondary\">\n          {{ getSelectedSecondaryText() }}\n        </span>\n      }\n    }\n  </div>\n</ng-template>\n\n<!-- Dropdown Arrow -->\n<ng-template #dropdownArrow>\n  <zen-icon class=\"app-select-arrow\"\n    [class.rotated]=\"isOpen\"\n    [name]=\"'chevron-down'\"\n    [customColor]=\"'#667085'\">\n  </zen-icon>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- LEADING ELEMENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Icon Leading Element (with smart resolution) -->\n<ng-template #iconLeadingElement let-option=\"option\" let-icon=\"icon\">\n  @if (icon || option?.icon || option?.iconName) {\n    @if (getIconPath(option, icon); as iconPath) {\n      <!-- If icon contains / or . treat as SVG path -->\n      @if ((icon && (icon.includes('/') || icon.includes('.'))) ||\n        (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n        (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.')))) {\n        <!-- Use img tag for Excel to preserve colors -->\n        @if (iconPath.includes('excel')) {\n          <img\n            [src]=\"iconPath\"\n            alt=\"\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Use zen-icon with src for other SVG files -->\n        @if (!iconPath.includes('excel')) {\n          <zen-icon\n            [src]=\"iconPath\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n      <!-- Otherwise treat as Material icon name or special cases -->\n      @if (!((icon && (icon.includes('/') || icon.includes('.'))) ||\n        (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n        (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.'))))) {\n        <!-- Special case for Excel icon - use img to preserve colors -->\n        @if ((icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')) {\n          <img\n            src=\"assets/ng-zenduit/icons/excel.svg\"\n            alt=\"Excel\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Material icon names -->\n        @if ((icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')) {\n          <zen-icon\n            [name]=\"icon || option?.icon || option?.iconName\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n    }\n  }\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n  @if (avatar || option?.avatar) {\n    <div class=\"app-select-avatar\" >\n      <img [src]=\"avatar || option?.avatar\" alt=\"\">\n    </div>\n  }\n</ng-template>\n\n<!-- Dot Leading Element -->\n<ng-template #dotLeadingElement let-option=\"option\" let-color=\"color\">\n  <div class=\"app-select-dot\"\n    [style.background-color]=\"color || option?.dotColor || '#10B981'\">\n  </div>\n</ng-template>", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}.app-select-container{width:100%;position:relative}.app-select-label{display:flex;align-items:center;gap: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{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-dropdown.dropdown-up{top:auto;bottom:calc(100% + 4px)}.app-select-dropdown.dropdown-down,.app-select-dropdown.dropdown-auto{top:calc(100% + 4px);bottom:auto}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search 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;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#f9fafb}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.size-sm .app-select-option{padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-secondary,.app-select-container.disabled .app-select-search-field{color:#667085}.app-select-container.disabled .app-select-arrow,.app-select-container.disabled .app-select-leading zen-icon,.app-select-container.disabled .app-select-search-input zen-icon,.app-select-container.disabled .app-select-dot{opacity:.6}.app-select-container.disabled .app-select-input,.app-select-container.disabled .app-select-search-input{background:#f9fafb;cursor:not-allowed}.app-select-hint{display:flex;align-items:center;gap:4px;margin-top:6px;color:#667085}.app-select-hint .hint-icon{font-size:16px;color:#f04438}.app-select-hint.destructive{color:#f04438}.app-select-option.select-all{border-bottom:1px solid #F2F4F7;margin-bottom:4px;padding-bottom:14px}.app-select-option.add-new-option{color:#136ab6;font-weight:500}.app-select-option.add-new-option:hover{background:#eff8ff}.app-select-option.remove-option{background:#f9fafb;color:#344054}.app-select-option.remove-option .app-select-option-text{color:#344054}.app-select-spinner{display:flex;justify-content:center;padding:16px}.app-select-spinner .spinner-small{width:20px;height:20px;border:2px solid #F2F4F7;border-top-color:#136ab6;border-radius:50%;animation:spin .6s linear infinite}.app-select-load-more{padding:8px 14px}.app-select-load-more .app-select-load-more-btn{width:100%;padding:8px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:6px;color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0;font-weight:500;font-style:normal;cursor:pointer;transition:all .15s ease}.app-select-load-more .app-select-load-more-btn:hover{background:#f9fafb;border-color:#667085}@keyframes spin{to{transform:rotate(360deg)}}.app-select-dropdown ::ng-deep zen-groups .zen-groups-inline{display:flex;flex-direction:column;max-height:310px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree{flex:1;overflow-y:auto;padding:4px 14px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar{width:6px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-track{background:transparent}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox{padding:10px 0;font-weight:400;font-size:14px;line-height:20px;color:#344054}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox:hover{background:#f9fafb}.app-select-dropdown ::ng-deep zen-groups .select-all{border-bottom:none;margin-bottom:0;font-weight:500}.app-select-dropdown ::ng-deep zen-groups .tree-item-badge{background:#f1f7fe;color:#105494}.app-select-dropdown ::ng-deep zen-groups .checkbox-component .app-checkbox-label{font-weight:400;color:#344054}.app-select-dropdown ::ng-deep zen-groups .zen-groups-no-results{padding:32px 0;text-align:center;color:#667085}@media(max-width:640px){.app-select-dropdown{position:fixed;inset:auto 0 0;max-height:70vh;border-radius:16px 16px 0 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'zen-select', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div [class]=\"getStateClasses()\">\n  <!-- Label -->\n  @if (label) {\n    <label class=\"app-select-label text text-sm text-weight-medium\"\n      [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n      {{ label | translate }}\n      @if (required) {\n        <span class=\"required-indicator\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Select Input -->\n  <div class=\"app-select-wrapper\">\n    <!-- Custom Trigger Template (overrides built-in trigger) -->\n    @if (buttonTemplate) {\n      <div\n        class=\"app-select-custom-trigger\"\n        (click)=\"toggleDropdown()\">\n        <ng-template [ngTemplateOutlet]=\"buttonTemplate.template\"\n          [ngTemplateOutletContext]=\"{ isOpen: isOpen, selected: getSelectedOption(), display: selectedDisplay, disabled: disabled }\">\n        </ng-template>\n      </div>\n    }\n\n    <!-- Built-in Trigger (when no custom button template provided) -->\n    @if (!buttonTemplate) {\n      @switch (leadingType) {\n        <!-- Default Select (no leading element) -->\n        @case ('default') {\n          <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n        }\n        <!-- Icon Leading Select -->\n        @case ('icon') {\n          <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n        }\n        <!-- Avatar Leading Select -->\n        @case ('avatar') {\n          <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n        }\n        <!-- Dot Leading Select -->\n        @case ('dot') {\n          <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n        }\n        <!-- Search Input Select -->\n        @case ('search') {\n          <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n        }\n      }\n    }\n\n    <!-- Dropdown Menu -->\n    @if (isOpen) {\n      <div class=\"app-select-dropdown\"\n        [ngClass]=\"getDropdownDirectionClass()\"\n        >\n        <!-- Tree Mode: embed zen-groups inline -->\n        @if (isTreeMode && isMultiselect) {\n          <zen-groups [inline]=\"true\"\n            [dataSource]=\"$any(options)\"\n            [filteredDataSource]=\"treeFilteredDataSource\"\n            [hideSelectAll]=\"hideSelectAll\"\n            [hideSearch]=\"hideTreeSearch\"\n            [idProp]=\"idProp\"\n            [displayProp]=\"displayProp\"\n            [(isSelectedAll)]=\"isSelectedAll\"\n            (isSelectedAllChange)=\"onTreeSelectAllChange($event)\"\n            (checkedChange)=\"onTreeCheckedChange($event)\">\n          </zen-groups>\n        } @else {\n          <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n          @if (leadingType !== 'search' && hasSearch && !disabled) {\n            <div class=\"app-select-search\">\n              <zen-icon [name]=\"'search'\"\n                [customColor]=\"'#667085'\">\n              </zen-icon>\n              <input type=\"text\"\n                [(ngModel)]=\"searchText\"\n                (ngModelChange)=\"onSearchChange()\"\n                (keydown.enter)=\"onSearchEnter($event)\"\n                placeholder=\"Search\"\n                class=\"app-select-search-input\">\n              @if (searchText) {\n                <zen-icon\n                  class=\"app-select-search-clear\"\n                  [name]=\"'x'\"\n                  [customColor]=\"'#667085'\"\n                  (click)=\"clearSearch(); $event.stopPropagation()\">\n                </zen-icon>\n              }\n            </div>\n          }\n          <!-- Options List -->\n          <div class=\"app-select-options\" (scroll)=\"onOptionsScroll($event)\">\n            <!-- Select All Option for Multiselect -->\n            @if (isMultiselect && !hideSelectAll && !isLazyLoading && filteredOptions.length > 0) {\n              <button\n                class=\"app-select-option select-all\"\n                (click)=\"toggleSelectAll()\">\n                <zen-checkbox class=\"app-select-checkbox\"\n                  [checked]=\"isAllSelected()\"\n                  [disableValueChange]=\"true\"\n                  [label]=\"''\"\n                  size=\"sm\">\n                </zen-checkbox>\n                <span class=\"app-select-option-text\">\n                  Select All\n                </span>\n              </button>\n            }\n            <!-- Add New Option -->\n            @if (enableAddNewOption && (showDefaultAddOption || searchText)) {\n              <button\n                class=\"app-select-option add-new-option\"\n                (click)=\"handleAddNewOption(); $event.stopPropagation()\">\n                <zen-icon [name]=\"'plus'\" [customColor]=\"'#136AB6'\"></zen-icon>\n                <span class=\"app-select-option-text\">\n                  {{ (newOptionText || 'Add New Option') + (searchText ? ': \"' + searchText + '\"' : '') }}\n                </span>\n              </button>\n            }\n            <!-- Remove Option -->\n            @if (enableRemoveOption) {\n              <button\n                class=\"app-select-option remove-option\"\n                (click)=\"handleRemoveOption(); $event.stopPropagation()\">\n                <zen-icon [name]=\"'user-x'\" [customColor]=\"'#344054'\"></zen-icon>\n                <span class=\"app-select-option-text\">\n                  {{ removeOptionText || 'Remove' }}\n                </span>\n              </button>\n            }\n            @if (filteredOptions.length === 0 && !enableAddNewOption && !isLoadingNow) {\n              <div class=\"app-select-no-options\">\n                No matching options found\n              </div>\n            }\n            @for (option of filteredOptions; track option) {\n              <button\n                class=\"app-select-option\"\n                [class.selected]=\"isSelected(option)\"\n                (click)=\"selectOption(option)\">\n                <!-- Checkbox for Multiselect -->\n                @if (isMultiselect) {\n                  <zen-checkbox class=\"app-select-checkbox\"\n                    [checked]=\"isSelected(option)\"\n                    [disableValueChange]=\"true\"\n                    [label]=\"''\"\n                    size=\"sm\">\n                  </zen-checkbox>\n                }\n                <!-- Option Leading Element -->\n                @if (leadingType !== 'default') {\n                  <div class=\"app-select-option-leading\">\n                    @switch (leadingType) {\n                      @case ('icon') {\n                        <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('avatar') {\n                        <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('dot') {\n                        <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                    }\n                  </div>\n                }\n                <!-- Option Text -->\n                <div class=\"app-select-option-text-wrapper\">\n                  <!-- Use custom template if provided -->\n                  @if (!isMultiselect && optionTemplate) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n                      [ngTemplateOutletContext]=\"{ option: option }\">\n                    </ng-template>\n                  } @else {\n                    <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n                      {{ getName(option) | translate }}\n                    </span>\n                    @if (option.secondaryText) {\n                      <span class=\"app-select-option-secondary\">\n                        {{ option.secondaryText }}\n                      </span>\n                    }\n                  }\n                </div>\n                <!-- Check Icon for Single Select -->\n                @if (!isMultiselect && isSelected(option)) {\n                  <zen-icon\n                    class=\"app-select-option-check\"\n                    [name]=\"'check'\"\n                    [customColor]=\"'#136AB6'\">\n                  </zen-icon>\n                }\n              </button>\n            }\n            <!-- Lazy loading spinner -->\n            @if (isLazyLoading && isLoadingNow) {\n              <div class=\"app-select-loading\">\n                <zen-spinner size=\"small\"></zen-spinner>\n              </div>\n            }\n          </div>\n        }\n        <!-- Flat List Mode (default) -->\n      </div>\n    }\n  </div>\n\n  <!-- Hint text / Error message -->\n  @if ((destructive && errorMessage) || hintText) {\n    <div\n      class=\"app-select-hint text text-sm text-weight-regular\"\n      [ngClass]=\"{'destructive': destructive}\">\n      @if (destructive) {\n        <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n      }\n      <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n    </div>\n  }\n</div>\n\n<!-- ============================================= -->\n<!-- MAIN SELECT INPUT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Default Select Template (No Leading Element) -->\n<ng-template #defaultSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Icon Select Template -->\n<ng-template #iconSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: getSelectedOption(), icon: leadingIcon }\"></ng-container>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Avatar Select Template -->\n<ng-template #avatarSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: getSelectedOption(), avatar: leadingAvatar }\"></ng-container>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Dot Select Template -->\n<ng-template #dotSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: getSelectedOption(), color: leadingDotColor }\"></ng-container>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Search Input Template -->\n<ng-template #searchInputTemplate>\n  <div class=\"app-select-input app-select-search-input\"\n    [class.focused]=\"isOpen || searchFocused\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <!-- Search Icon -->\n    <zen-icon [name]=\"'search'\"\n      [customColor]=\"disabled ? '#9CA3AF' : '#667085'\">\n    </zen-icon>\n\n    <!-- Search Input Field -->\n    <input type=\"text\"\n      class=\"app-select-search-field\"\n      [(ngModel)]=\"searchInputValue\"\n      (ngModelChange)=\"onSearchInputChange()\"\n      (keydown.enter)=\"onSearchEnter($event)\"\n      (focus)=\"onSearchFocus()\"\n      (blur)=\"onSearchBlur($event)\"\n      [placeholder]=\"selectedDisplay || placeholder\"\n      [disabled]=\"disabled\">\n  </div>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- SHARED COMPONENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Select Value Display -->\n<ng-template #selectValueDisplay>\n  <div class=\"app-select-value-wrapper\">\n    @if (valueTemplate && !isModelEmpty()) {\n      <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n        [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n      </ng-template>\n    } @else {\n      <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n        {{ selectedDisplay || placeholder | translate }}\n      </span>\n      @if (getSelectedSecondaryText() && !isModelEmpty()) {\n        <span class=\"app-select-secondary\">\n          {{ getSelectedSecondaryText() }}\n        </span>\n      }\n    }\n  </div>\n</ng-template>\n\n<!-- Dropdown Arrow -->\n<ng-template #dropdownArrow>\n  <zen-icon class=\"app-select-arrow\"\n    [class.rotated]=\"isOpen\"\n    [name]=\"'chevron-down'\"\n    [customColor]=\"'#667085'\">\n  </zen-icon>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- LEADING ELEMENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Icon Leading Element (with smart resolution) -->\n<ng-template #iconLeadingElement let-option=\"option\" let-icon=\"icon\">\n  @if (icon || option?.icon || option?.iconName) {\n    @if (getIconPath(option, icon); as iconPath) {\n      <!-- If icon contains / or . treat as SVG path -->\n      @if ((icon && (icon.includes('/') || icon.includes('.'))) ||\n        (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n        (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.')))) {\n        <!-- Use img tag for Excel to preserve colors -->\n        @if (iconPath.includes('excel')) {\n          <img\n            [src]=\"iconPath\"\n            alt=\"\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Use zen-icon with src for other SVG files -->\n        @if (!iconPath.includes('excel')) {\n          <zen-icon\n            [src]=\"iconPath\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n      <!-- Otherwise treat as Material icon name or special cases -->\n      @if (!((icon && (icon.includes('/') || icon.includes('.'))) ||\n        (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n        (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.'))))) {\n        <!-- Special case for Excel icon - use img to preserve colors -->\n        @if ((icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')) {\n          <img\n            src=\"assets/ng-zenduit/icons/excel.svg\"\n            alt=\"Excel\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Material icon names -->\n        @if ((icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')) {\n          <zen-icon\n            [name]=\"icon || option?.icon || option?.iconName\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n    }\n  }\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n  @if (avatar || option?.avatar) {\n    <div class=\"app-select-avatar\" >\n      <img [src]=\"avatar || option?.avatar\" alt=\"\">\n    </div>\n  }\n</ng-template>\n\n<!-- Dot Leading Element -->\n<ng-template #dotLeadingElement let-option=\"option\" let-color=\"color\">\n  <div class=\"app-select-dot\"\n    [style.background-color]=\"color || option?.dotColor || '#10B981'\">\n  </div>\n</ng-template>", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}.app-select-container{width:100%;position:relative}.app-select-label{display:flex;align-items:center;gap:4px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.app-select-wrapper{position:relative;width:100%}.app-select-custom-trigger{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;color:#101828;text-align:left;cursor:pointer;transition:all .2s ease}.app-select-input.app-select-search-input{cursor:text}.app-select-input.app-select-search-input .app-select-search-field{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;background:transparent;color:#101828;min-width:0}.app-select-input.app-select-search-input .app-select-search-field::placeholder{color:#667085}.app-select-input.app-select-search-input .app-select-search-field:disabled{cursor:not-allowed;color:#667085}.app-select-input:hover:not(:disabled){border-color:#98a2b3}.app-select-input.focused,.app-select-input:focus{outline:none;border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.app-select-input:disabled{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.app-select-container.error .app-select-input:hover:not(:disabled){border-color:#f97066}.app-select-container.error .app-select-input:focus{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-leading,.app-select-option-leading{display:flex;align-items:center;flex-shrink:0}.app-select-avatar,.app-select-option-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}.app-select-avatar img,.app-select-option-avatar img{width:100%;height:100%;object-fit:cover}.app-select-avatar .avatar-placeholder,.app-select-option-avatar .avatar-placeholder{width:100%;height:100%;background:#f2f4f7;color:#667085;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0;font-weight:600;font-style:normal}.app-select-dot,.app-select-option-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.app-select-value-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-value-wrapper .app-select-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085}.app-select-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-value.placeholder{color:#667085}.app-select-secondary,.app-select-option-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085;white-space:nowrap;flex-shrink:0}.app-select-arrow{margin-left:auto;flex-shrink:0;transition:transform .2s ease}.app-select-arrow.rotated{transform:rotate(180deg)}.app-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-dropdown.dropdown-up{top:auto;bottom:calc(100% + 4px)}.app-select-dropdown.dropdown-down,.app-select-dropdown.dropdown-auto{top:calc(100% + 4px);bottom:auto}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search .app-select-search-input{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;color:#101828}.app-select-search .app-select-search-input::placeholder{color:#667085}.app-select-search .app-select-search-clear{cursor:pointer}.app-select-loading{display:flex;justify-content:center;align-items:center;padding:8px 0}.app-select-options{flex:1;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#f9fafb}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.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"] }]
+            args: [{ selector: 'zen-select', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div [class]=\"getStateClasses()\">\n  <!-- Label -->\n  @if (label) {\n    <label class=\"app-select-label text text-sm text-weight-medium\"\n      [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n      {{ label | translate }}\n      @if (required) {\n        <span class=\"required-indicator\">*</span>\n      }\n      @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\">\n    <!-- Custom Trigger Template (overrides built-in trigger) -->\n    @if (buttonTemplate) {\n      <div\n        class=\"app-select-custom-trigger\"\n        (click)=\"toggleDropdown()\">\n        <ng-template [ngTemplateOutlet]=\"buttonTemplate.template\"\n          [ngTemplateOutletContext]=\"{ isOpen: isOpen, selected: getSelectedOption(), display: selectedDisplay, disabled: disabled }\">\n        </ng-template>\n      </div>\n    }\n\n    <!-- Built-in Trigger (when no custom button template provided) -->\n    @if (!buttonTemplate) {\n      @switch (leadingType) {\n        <!-- Default Select (no leading element) -->\n        @case ('default') {\n          <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n        }\n        <!-- Icon Leading Select -->\n        @case ('icon') {\n          <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n        }\n        <!-- Avatar Leading Select -->\n        @case ('avatar') {\n          <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n        }\n        <!-- Dot Leading Select -->\n        @case ('dot') {\n          <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n        }\n        <!-- Search Input Select -->\n        @case ('search') {\n          <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n        }\n      }\n    }\n\n    <!-- Dropdown Menu -->\n    @if (isOpen) {\n      <div class=\"app-select-dropdown\"\n        [ngClass]=\"getDropdownDirectionClass()\"\n        >\n        <!-- Tree Mode: embed zen-groups inline -->\n        @if (isTreeMode && isMultiselect) {\n          <zen-groups [inline]=\"true\"\n            [dataSource]=\"$any(options)\"\n            [filteredDataSource]=\"treeFilteredDataSource\"\n            [hideSelectAll]=\"hideSelectAll\"\n            [hideSearch]=\"hideTreeSearch\"\n            [idProp]=\"idProp\"\n            [displayProp]=\"displayProp\"\n            [(isSelectedAll)]=\"isSelectedAll\"\n            (isSelectedAllChange)=\"onTreeSelectAllChange($event)\"\n            (checkedChange)=\"onTreeCheckedChange($event)\">\n          </zen-groups>\n        } @else {\n          <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n          @if (leadingType !== 'search' && hasSearch && !disabled) {\n            <div class=\"app-select-search\">\n              <zen-icon [name]=\"'search'\"\n                [customColor]=\"'#667085'\">\n              </zen-icon>\n              <input type=\"text\"\n                [(ngModel)]=\"searchText\"\n                (ngModelChange)=\"onSearchChange()\"\n                (keydown.enter)=\"onSearchEnter($event)\"\n                placeholder=\"Search\"\n                class=\"app-select-search-input\">\n              @if (searchText) {\n                <zen-icon\n                  class=\"app-select-search-clear\"\n                  [name]=\"'x'\"\n                  [customColor]=\"'#667085'\"\n                  (click)=\"clearSearch(); $event.stopPropagation()\">\n                </zen-icon>\n              }\n            </div>\n          }\n          <!-- Options List -->\n          <div class=\"app-select-options\" (scroll)=\"onOptionsScroll($event)\">\n            <!-- Select All Option for Multiselect -->\n            @if (isMultiselect && !hideSelectAll && !isLazyLoading && filteredOptions.length > 0) {\n              <button\n                class=\"app-select-option select-all\"\n                (click)=\"toggleSelectAll()\">\n                <zen-checkbox class=\"app-select-checkbox\"\n                  [checked]=\"isAllSelected()\"\n                  [disableValueChange]=\"true\"\n                  [label]=\"''\"\n                  size=\"sm\">\n                </zen-checkbox>\n                <span class=\"app-select-option-text\">\n                  Select All\n                </span>\n              </button>\n            }\n            <!-- Add New Option -->\n            @if (enableAddNewOption && (showDefaultAddOption || searchText)) {\n              <button\n                class=\"app-select-option add-new-option\"\n                (click)=\"handleAddNewOption(); $event.stopPropagation()\">\n                <zen-icon [name]=\"'plus'\" [customColor]=\"'#136AB6'\"></zen-icon>\n                <span class=\"app-select-option-text\">\n                  {{ (newOptionText || 'Add New Option') + (searchText ? ': \"' + searchText + '\"' : '') }}\n                </span>\n              </button>\n            }\n            <!-- Remove Option -->\n            @if (enableRemoveOption) {\n              <button\n                class=\"app-select-option remove-option\"\n                (click)=\"handleRemoveOption(); $event.stopPropagation()\">\n                <zen-icon [name]=\"'user-x'\" [customColor]=\"'#344054'\"></zen-icon>\n                <span class=\"app-select-option-text\">\n                  {{ removeOptionText || 'Remove' }}\n                </span>\n              </button>\n            }\n            @if (filteredOptions.length === 0 && !enableAddNewOption && !isLoadingNow) {\n              <div class=\"app-select-no-options\">\n                No matching options found\n              </div>\n            }\n            @for (option of filteredOptions; track option) {\n              <button\n                class=\"app-select-option\"\n                [class.selected]=\"isSelected(option)\"\n                (click)=\"selectOption(option)\">\n                <!-- Checkbox for Multiselect -->\n                @if (isMultiselect) {\n                  <zen-checkbox class=\"app-select-checkbox\"\n                    [checked]=\"isSelected(option)\"\n                    [disableValueChange]=\"true\"\n                    [label]=\"''\"\n                    size=\"sm\">\n                  </zen-checkbox>\n                }\n                <!-- Option Leading Element -->\n                @if (leadingType !== 'default') {\n                  <div class=\"app-select-option-leading\">\n                    @switch (leadingType) {\n                      @case ('icon') {\n                        <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('avatar') {\n                        <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                      @case ('dot') {\n                        <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n                      }\n                    }\n                  </div>\n                }\n                <!-- Option Text -->\n                <div class=\"app-select-option-text-wrapper\">\n                  <!-- Use custom template if provided -->\n                  @if (!isMultiselect && optionTemplate) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n                      [ngTemplateOutletContext]=\"{ option: option }\">\n                    </ng-template>\n                  } @else {\n                    <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n                      {{ getName(option) | translate }}\n                    </span>\n                    @if (option.secondaryText) {\n                      <span class=\"app-select-option-secondary\">\n                        {{ option.secondaryText }}\n                      </span>\n                    }\n                  }\n                </div>\n                <!-- Check Icon for Single Select -->\n                @if (!isMultiselect && isSelected(option)) {\n                  <zen-icon\n                    class=\"app-select-option-check\"\n                    [name]=\"'check'\"\n                    [customColor]=\"'#136AB6'\">\n                  </zen-icon>\n                }\n              </button>\n            }\n            <!-- Lazy loading spinner -->\n            @if (isLazyLoading && isLoadingNow) {\n              <div class=\"app-select-loading\">\n                <zen-spinner size=\"small\"></zen-spinner>\n              </div>\n            }\n          </div>\n        }\n        <!-- Flat List Mode (default) -->\n      </div>\n    }\n  </div>\n\n  <!-- Hint text / Error message -->\n  @if ((destructive && errorMessage) || hintText) {\n    <div\n      class=\"app-select-hint text text-sm text-weight-regular\"\n      [ngClass]=\"{'destructive': destructive}\">\n      @if (destructive) {\n        <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n      }\n      <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n    </div>\n  }\n</div>\n\n<!-- ============================================= -->\n<!-- MAIN SELECT INPUT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Default Select Template (No Leading Element) -->\n<ng-template #defaultSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Icon Select Template -->\n<ng-template #iconSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: getSelectedOption(), icon: leadingIcon }\"></ng-container>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Avatar Select Template -->\n<ng-template #avatarSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: getSelectedOption(), avatar: leadingAvatar }\"></ng-container>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Dot Select Template -->\n<ng-template #dotSelectTemplate>\n  <button class=\"app-select-input\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    [class.focused]=\"isOpen\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <div class=\"app-select-leading\">\n      <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: getSelectedOption(), color: leadingDotColor }\"></ng-container>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n  </button>\n</ng-template>\n\n<!-- Search Input Template -->\n<ng-template #searchInputTemplate>\n  <div class=\"app-select-input app-select-search-input\"\n    [class.focused]=\"isOpen || searchFocused\"\n    [class.has-value]=\"!isModelEmpty()\">\n\n    <!-- Search Icon -->\n    <zen-icon [name]=\"'search'\"\n      [customColor]=\"disabled ? '#9CA3AF' : '#667085'\">\n    </zen-icon>\n\n    <!-- Search Input Field -->\n    <input type=\"text\"\n      class=\"app-select-search-field\"\n      [(ngModel)]=\"searchInputValue\"\n      (ngModelChange)=\"onSearchInputChange()\"\n      (keydown.enter)=\"onSearchEnter($event)\"\n      (focus)=\"onSearchFocus()\"\n      (blur)=\"onSearchBlur($event)\"\n      [placeholder]=\"selectedDisplay || placeholder\"\n      [disabled]=\"disabled\">\n  </div>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- SHARED COMPONENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Select Value Display -->\n<ng-template #selectValueDisplay>\n  <div class=\"app-select-value-wrapper\">\n    @if (valueTemplate && !isModelEmpty()) {\n      <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n        [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n      </ng-template>\n    } @else {\n      <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n        {{ selectedDisplay || placeholder | translate }}\n      </span>\n      @if (getSelectedSecondaryText() && !isModelEmpty()) {\n        <span class=\"app-select-secondary\">\n          {{ getSelectedSecondaryText() }}\n        </span>\n      }\n    }\n  </div>\n</ng-template>\n\n<!-- Dropdown Arrow -->\n<ng-template #dropdownArrow>\n  <zen-icon class=\"app-select-arrow\"\n    [class.rotated]=\"isOpen\"\n    [name]=\"'chevron-down'\"\n    [customColor]=\"'#667085'\">\n  </zen-icon>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- LEADING ELEMENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Icon Leading Element (with smart resolution) -->\n<ng-template #iconLeadingElement let-option=\"option\" let-icon=\"icon\">\n  @if (icon || option?.icon || option?.iconName) {\n    @if (getIconPath(option, icon); as iconPath) {\n      <!-- If icon contains / or . treat as SVG path -->\n      @if ((icon && (icon.includes('/') || icon.includes('.'))) ||\n        (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n        (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.')))) {\n        <!-- Use img tag for Excel to preserve colors -->\n        @if (iconPath.includes('excel')) {\n          <img\n            [src]=\"iconPath\"\n            alt=\"\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Use zen-icon with src for other SVG files -->\n        @if (!iconPath.includes('excel')) {\n          <zen-icon\n            [src]=\"iconPath\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n      <!-- Otherwise treat as Material icon name or special cases -->\n      @if (!((icon && (icon.includes('/') || icon.includes('.'))) ||\n        (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n        (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.'))))) {\n        <!-- Special case for Excel icon - use img to preserve colors -->\n        @if ((icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')) {\n          <img\n            src=\"assets/ng-zenduit/icons/excel.svg\"\n            alt=\"Excel\"\n            style=\"width: 20px; height: 20px;\">\n        }\n        <!-- Material icon names -->\n        @if ((icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')) {\n          <zen-icon\n            [name]=\"icon || option?.icon || option?.iconName\"\n            [customColor]=\"'#667085'\">\n          </zen-icon>\n        }\n      }\n    }\n  }\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n  @if (avatar || option?.avatar) {\n    <div class=\"app-select-avatar\" >\n      <img [src]=\"avatar || option?.avatar\" alt=\"\">\n    </div>\n  }\n</ng-template>\n\n<!-- Dot Leading Element -->\n<ng-template #dotLeadingElement let-option=\"option\" let-color=\"color\">\n  <div class=\"app-select-dot\"\n    [style.background-color]=\"color || option?.dotColor || '#10B981'\">\n  </div>\n</ng-template>", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}.app-select-container{width:100%;position:relative}.app-select-label{display:flex;align-items:center;gap: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{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-dropdown.dropdown-up{top:auto;bottom:calc(100% + 4px)}.app-select-dropdown.dropdown-down,.app-select-dropdown.dropdown-auto{top:calc(100% + 4px);bottom:auto}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search 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;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#f9fafb}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.size-sm .app-select-option{padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-secondary,.app-select-container.disabled .app-select-search-field{color:#667085}.app-select-container.disabled .app-select-arrow,.app-select-container.disabled .app-select-leading zen-icon,.app-select-container.disabled .app-select-search-input zen-icon,.app-select-container.disabled .app-select-dot{opacity:.6}.app-select-container.disabled .app-select-input,.app-select-container.disabled .app-select-search-input{background:#f9fafb;cursor:not-allowed}.app-select-hint{display:flex;align-items:center;gap:4px;margin-top:6px;color:#667085}.app-select-hint .hint-icon{font-size:16px;color:#f04438}.app-select-hint.destructive{color:#f04438}.app-select-option.select-all{border-bottom:1px solid #F2F4F7;margin-bottom:4px;padding-bottom:14px}.app-select-option.add-new-option{color:#136ab6;font-weight:500}.app-select-option.add-new-option:hover{background:#eff8ff}.app-select-option.remove-option{background:#f9fafb;color:#344054}.app-select-option.remove-option .app-select-option-text{color:#344054}.app-select-spinner{display:flex;justify-content:center;padding:16px}.app-select-spinner .spinner-small{width:20px;height:20px;border:2px solid #F2F4F7;border-top-color:#136ab6;border-radius:50%;animation:spin .6s linear infinite}.app-select-load-more{padding:8px 14px}.app-select-load-more .app-select-load-more-btn{width:100%;padding:8px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:6px;color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0;font-weight:500;font-style:normal;cursor:pointer;transition:all .15s ease}.app-select-load-more .app-select-load-more-btn:hover{background:#f9fafb;border-color:#667085}@keyframes spin{to{transform:rotate(360deg)}}.app-select-dropdown ::ng-deep zen-groups .zen-groups-inline{display:flex;flex-direction:column;max-height:310px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree{flex:1;overflow-y:auto;padding:4px 14px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar{width:6px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-track{background:transparent}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox{padding:10px 0;font-weight:400;font-size:14px;line-height:20px;color:#344054}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox:hover{background:#f9fafb}.app-select-dropdown ::ng-deep zen-groups .select-all{border-bottom:none;margin-bottom:0;font-weight:500}.app-select-dropdown ::ng-deep zen-groups .tree-item-badge{background:#f1f7fe;color:#105494}.app-select-dropdown ::ng-deep zen-groups .checkbox-component .app-checkbox-label{font-weight:400;color:#344054}.app-select-dropdown ::ng-deep zen-groups .zen-groups-no-results{padding:32px 0;text-align:center;color:#667085}@media(max-width:640px){.app-select-dropdown{position:fixed;inset:auto 0 0;max-height:70vh;border-radius:16px 16px 0 0}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectModel: [{
                 type: Input
             }], selectModelChange: [{
@@ -5057,6 +5234,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                 type: Input
             }], label: [{
                 type: Input
+            }], helpIcon: [{
+                type: Input
+            }], helpTooltip: [{
+                type: Input
             }], supportingText: [{
                 type: Input
             }], hintText: [{
@@ -5207,7 +5388,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", "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"], 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,