ng-zenduit 2.3.6 → 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", 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", 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        [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            <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}\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        [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            <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}\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']
@@ -1054,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: [{
@@ -1164,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", "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", "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,
@@ -4257,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", "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", "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,
@@ -4379,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)
          */
@@ -4484,6 +4517,8 @@ class ZenduSelectComponent {
          * State tracking
          */
         this.isOpen = false;
+        this.helpTooltipAlign = 'center';
+        this.helpTooltipPlacement = 'above';
         this.searchText = '';
         this.searchInputValue = '';
         this.searchFocused = false;
@@ -4567,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;
@@ -5154,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 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 }); }
+    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 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"] }]
+            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: [{
@@ -5167,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: [{
@@ -5317,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,