ng-zenduit 2.3.3 → 2.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/fesm2022/ng-zenduit.mjs +187 -77
  2. package/fesm2022/ng-zenduit.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/styles/common-form.scss +3 -12
  5. package/types/ng-zenduit.d.ts +43 -12
package/fesm2022/ng-zenduit.mjs CHANGED
@@ -939,13 +939,13 @@ class ZenduInputComponent {
939
939
  this.focusInput();
940
940
  }
941
941
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
942
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduInputComponent, isStandalone: false, selector: "zen-input", inputs: { type: "type", variant: "variant", placeholder: "placeholder", label: "label", hintText: "hintText", leadingIcon: "leadingIcon", helpIcon: "helpIcon", helpTooltip: "helpTooltip", destructive: "destructive", errorMessage: "errorMessage", disabled: "disabled", required: "required", maxLength: "maxLength", minLength: "minLength", pattern: "pattern", autocomplete: "autocomplete", name: "name", id: "id", leadingDropdownOptions: "leadingDropdownOptions", leadingDropdownValue: "leadingDropdownValue", leadingDropdownPlaceholder: "leadingDropdownPlaceholder", trailingDropdownOptions: "trailingDropdownOptions", trailingDropdownValue: "trailingDropdownValue", trailingDropdownPlaceholder: "trailingDropdownPlaceholder", leadingText: "leadingText", trailingText: "trailingText", multiline: ["multiline", "multiline", booleanAttribute], rows: ["rows", "rows", numberAttribute], resizable: ["resizable", "resizable", booleanAttribute], size: "size", showCharacterCount: "showCharacterCount", phoneMaxLength: "phoneMaxLength", phone: "phone", width: "width" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", inputKeydown: "inputKeydown", inputKeyup: "inputKeyup", leadingDropdownChange: "leadingDropdownChange", leadingDropdownValueChange: "leadingDropdownValueChange", trailingDropdownChange: "trailingDropdownChange", trailingDropdownValueChange: "trailingDropdownValueChange", helpIconClick: "helpIconClick", phoneChange: "phoneChange", validChange: "validChange", leadingIconClick: "leadingIconClick" }, host: { properties: { "class.zen-input-wrapper": "this.hostClass" } }, providers: [
942
+ 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: [
943
943
  {
944
944
  provide: NG_VALUE_ACCESSOR,
945
945
  useExisting: forwardRef(() => ZenduInputComponent),
946
946
  multi: true
947
947
  }
948
- ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-input-container\" [ngClass]=\"inputClasses\">\n <!-- Label -->\n @if (showLabel) {\n <label\n [for]=\"id\"\n class=\"zen-input-label text text-sm text-weight-medium\"\n [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n {{ label | translate }}\n @if (required) {\n <span class=\"required-indicator\">*</span>\n }\n </label>\n }\n\n <!-- Input wrapper -->\n <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n <!-- Leading icon -->\n @if (leadingIcon && variant === 'default' && !multiline) {\n <i\n class=\"material-icons zen-input-leading-icon\"\n (click)=\"onLeadingIconClick($event)\">\n {{ leadingIcon }}\n </i>\n }\n\n <!-- Leading dropdown -->\n @if (variant === 'leading-dropdown') {\n <div\n class=\"zen-input-leading-dropdown\">\n <button type=\"button\"\n class=\"zen-dropdown-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggleLeadingDropdown(); $event.stopPropagation()\">\n <span class=\"dropdown-label\">{{ getLeadingDropdownLabel() }}</span>\n <i class=\"material-icons dropdown-icon\">expand_more</i>\n </button>\n @if (leadingDropdownOpen) {\n <div class=\"zen-dropdown-menu\"\n [ngClass]=\"{'open': leadingDropdownOpen}\">\n @for (option of leadingDropdownOptions; track option) {\n <button\n type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': option.value === leadingDropdownValue}\"\n (click)=\"onLeadingDropdownChange(option.value); $event.stopPropagation()\">\n @if (option.icon) {\n <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n }\n {{ option.label | translate }}\n </button>\n }\n </div>\n }\n </div>\n }\n\n <!-- Leading text -->\n @if (variant === 'leading-text') {\n <span\n class=\"zen-input-leading-text text text-md text-weight-regular\">\n {{ leadingText }}\n </span>\n }\n\n <!-- Payment card icon -->\n @if (variant === 'payment') {\n <div\n class=\"zen-payment-card-icon\">\n <i class=\"material-icons card-icon\">payment</i>\n </div>\n }\n\n <!-- Input content based on type -->\n @if (type === 'tel') {\n <ng-container *ngTemplateOutlet=\"phoneInputTemplate\"></ng-container>\n } @else if (multiline) {\n <textarea #inputElement\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [rows]=\"rows\"\n [autocomplete]=\"autocomplete\"\n class=\"zen-input-field text text-md text-weight-regular\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"></textarea>\n } @else {\n <input #inputElement\n [type]=\"type\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n class=\"zen-input-field text text-md text-weight-regular\"\n [ngClass]=\"{'zen-payment-field': variant === 'payment'}\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\" />\n }\n\n <!-- Multiline footer: help icon (left), then character count + resize handle (right).\n Only rendered when it has content so an empty textarea keeps a full-height\n scrollbar and symmetric padding (see the no-footer rule in SCSS). -->\n @if (multiline && (resizable || helpIcon || showCharacterCount)) {\n <div class=\"zen-textarea-footer\">\n @if (helpIcon) {\n <div class=\"zen-input-trailing-container\">\n <button\n type=\"button\"\n class=\"zen-help-icon\"\n [disabled]=\"disabled\"\n (click)=\"onHelpIconClick($event); $event.stopPropagation()\">\n <i class=\"material-icons-outlined\">help_outline</i>\n @if (showHelpTooltip) {\n <div class=\"zen-help-tooltip\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tooltip-content\">\n {{ helpTooltip | translate }}\n </div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n }\n </button>\n </div>\n }\n <div class=\"zen-textarea-footer-end\">\n @if (showCharacterCount) {\n <span class=\"zen-character-count text text-sm text-weight-regular\">\n {{ characterCount }}\n </span>\n }\n @if (resizable) {\n <span\n class=\"zen-textarea-resize-handle\"\n [class.disabled]=\"disabled\"\n title=\"Drag to resize\"\n (pointerdown)=\"onResizeStart($event)\"\n (click)=\"$event.stopPropagation()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M17.5 5.5 5.5 17.5M17.5 12.5 12.5 17.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n }\n </div>\n </div>\n }\n\n <!-- Default input template -->\n\n <!-- Trailing elements container \u2014 render only when it has content, so a plain\n input (e.g. number) doesn't reserve trailing space or shift its spinner. -->\n @if (\n variant === 'trailing-text' ||\n (showCharacterCount && !helpIcon && variant === 'default' && !multiline) ||\n (helpIcon && variant !== 'trailing-dropdown' && !multiline) ||\n variant === 'trailing-dropdown'\n ) {\n <div class=\"zen-input-trailing-container\">\n <!-- Trailing text -->\n @if (variant === 'trailing-text') {\n <span\n class=\"zen-input-trailing-text text text-md text-weight-regular\">\n {{ trailingText }}\n </span>\n }\n\n <!-- Character counter -->\n @if (showCharacterCount && !helpIcon && variant === 'default' && !multiline) {\n <span\n class=\"zen-character-count text text-sm text-weight-regular\">\n {{ characterCount }}\n </span>\n }\n\n <!-- Help icon -->\n @if (helpIcon && variant !== 'trailing-dropdown' && !multiline) {\n <button\n type=\"button\"\n class=\"zen-help-icon\"\n [disabled]=\"disabled\"\n (click)=\"onHelpIconClick($event); $event.stopPropagation()\">\n <i class=\"material-icons-outlined\">help_outline</i>\n <!-- Help tooltip -->\n @if (showHelpTooltip) {\n <div class=\"zen-help-tooltip\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tooltip-content\">\n {{ helpTooltip | translate }}\n </div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n }\n </button>\n }\n\n <!-- Trailing dropdown -->\n @if (variant === 'trailing-dropdown') {\n <div\n class=\"zen-input-trailing-dropdown\">\n <button type=\"button\"\n class=\"zen-dropdown-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggleTrailingDropdown(); $event.stopPropagation()\">\n <span class=\"dropdown-label\">{{ getTrailingDropdownLabel() }}</span>\n <i class=\"material-icons dropdown-icon\">expand_more</i>\n </button>\n @if (trailingDropdownOpen) {\n <div class=\"zen-dropdown-menu dropdown-menu-right\"\n [ngClass]=\"{'open': trailingDropdownOpen}\">\n @for (option of trailingDropdownOptions; track option) {\n <button\n type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': option.value === trailingDropdownValue}\"\n (click)=\"onTrailingDropdownChange(option.value); $event.stopPropagation()\">\n @if (option.icon) {\n <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n }\n {{ option.label | translate }}\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Hint text / Error message -->\n @if (showHintText) {\n <div\n class=\"zen-input-hint text text-sm text-weight-regular\"\n [ngClass]=\"{'destructive': destructive}\">\n @if (destructive) {\n <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n }\n {{ displayHintText | translate }}\n </div>\n }\n\n <!-- Phone Country Dropdown (for tel type) -->\n @if (type === 'tel' && isPhoneDropdownExpanded) {\n <div\n class=\"zen-phone-dropdown-menu\">\n <div class=\"zen-phone-dropdown-list\">\n <!-- Countries List -->\n @for (country of countryList; track country) {\n <button type=\"button\"\n class=\"zen-phone-dropdown-item\"\n [ngClass]=\"{'active': selectedCountry.countryName === country.countryName}\"\n (click)=\"onCountryChanged(country)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"country.flag\"\n [alt]=\"country.countryName\">\n <span class=\"zen-phone-country-name\">{{ country.countryName | translate }}</span>\n <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n </button>\n }\n <!-- Custom Country -->\n <button type=\"button\"\n class=\"zen-phone-dropdown-item\"\n [ngClass]=\"{'active': selectedCountry.countryName === customCountry.countryName}\"\n (click)=\"onCountryChanged(customCountry)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"customCountry.flag\"\n [alt]=\"customCountry.countryName\">\n <span class=\"zen-phone-country-name\">{{ customCountry.countryName | translate }}</span>\n <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n </button>\n </div>\n </div>\n }\n</div>\n\n<!-- Phone Input Template -->\n<ng-template #phoneInputTemplate>\n <!-- Phone country selector -->\n <div class=\"zen-phone-country-select\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"selectedCountry.flag\"\n [alt]=\"selectedCountry.countryName\">\n <span class=\"zen-phone-code\">{{ selectedCountry.countryCallingCode }}</span>\n <button type=\"button\"\n class=\"zen-phone-dropdown-btn\"\n [disabled]=\"disabled\"\n (click)=\"togglePhoneDropdown(); $event.stopPropagation()\">\n <i class=\"material-icons zen-phone-expand-icon\"\n [ngClass]=\"{'active': isPhoneDropdownExpanded}\">expand_more</i>\n </button>\n </div>\n\n <!-- Phone input field -->\n <input #inputElement\n type=\"text\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"phoneText\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.maxlength]=\"phoneMaxLength\"\n [attr.minlength]=\"minLength\"\n [autocomplete]=\"autocomplete\"\n class=\"zen-input-field text text-md text-weight-regular\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\" />\n</ng-template>\n\n<!-- Click outside handler for dropdowns -->\n@if (leadingDropdownOpen || trailingDropdownOpen || isPhoneDropdownExpanded) {\n <div\n class=\"zen-dropdown-backdrop\"\n (click)=\"closeDropdowns(); hidePhoneDropdown()\"></div>\n}", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-label{color:#344054;display:flex;align-items:center;gap:4px}.zen-input-container .zen-input-label .required-indicator{color:#f04438}.zen-input-container .zen-input-label.disabled{color:#667085}.zen-input-container .zen-input-label.destructive{color:#344054}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover:not(.disabled){border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon{font-size:20px;color:#98a2b3;flex-shrink:0;cursor:pointer;transition:color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon:hover{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{position:relative;flex-shrink:0;margin-right:4px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-leading-text{color:#667085;flex-shrink:0;padding-right:4px}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container{display:flex;align-items:center;gap:8px;flex-shrink:0}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-text{color:#667085;flex-shrink:0;padding-left:4px}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-character-count{color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon{position:relative;display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;cursor:pointer}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon i{font-size:16px;color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:hover:not(:disabled) i{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:disabled{cursor:not-allowed}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:disabled i{color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip{position:absolute;bottom:calc(100% + 8px);right:50%;transform:translate(50%);z-index:1000;white-space:nowrap}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip .tooltip-content{background:#101828;color:#fff;padding:8px 12px;border-radius:8px;font-family:Inter,sans-serif;font-size:12px;line-height:18px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;max-width:200px;white-space:normal}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip .tooltip-arrow{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #101828}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown{position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;border-left:1px solid #D0D5DD;padding:0 0 0 8px;margin-left:4px;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:200px;max-height:240px;overflow-y:auto;z-index:100;padding:4px}.zen-input-container .zen-dropdown-menu.dropdown-menu-right{left:auto;right:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .option-icon{font-size:20px;color:#98a2b3}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494;font-weight:500}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .option-icon{color:#136ab6}.zen-input-container .zen-input-hint{display:flex;align-items:center;gap:4px;color:#667085}.zen-input-container .zen-input-hint .hint-icon{font-size:16px;color:#f04438}.zen-input-container .zen-input-hint.destructive{color:#f04438}.zen-input-container.focused .zen-input-field-wrapper{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container.focused .zen-input-field-wrapper.destructive{border-color:#fda29b;box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.zen-input-container.filled .zen-input-field-wrapper{background:#fff}.zen-input-container.disabled .zen-input-field-wrapper{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.zen-input-container.disabled .zen-input-field-wrapper:hover{border-color:#d0d5dd}.zen-input-container.destructive .zen-input-field-wrapper{border-color:#fda29b}.zen-input-container.destructive .zen-input-field-wrapper:hover:not(.disabled){border-color:#f97066}.zen-input-container.multiline .zen-input-field-wrapper{flex-direction:column;align-items:stretch;min-height:auto;gap:0;padding:0}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field{flex:0 0 auto;box-sizing:border-box;width:100%;resize:none;min-height:80px;padding:10px 6px 0 14px;font-family:inherit;line-height:24px;scrollbar-gutter:stable}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar{width:8px}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-track{background:transparent;border:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-thumb{background:#d0d5dd;border:none;border-radius:4px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer{display:flex;align-items:center;gap:8px;padding:0 14px 10px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer-end{display:flex;align-items:center;gap:8px;margin-left:auto}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle{display:inline-flex;align-items:center;justify-content:center;color:#98a2b3;cursor:ns-resize;touch-action:none;transition:color .2s ease}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle svg{display:block}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle:hover{color:#475467}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle.disabled{color:#d0d5dd;cursor:not-allowed;pointer-events:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-character-count{color:#98a2b3}.zen-input-container.multiline .zen-input-field-wrapper:not(:has(.zen-textarea-footer)) .zen-input-field{padding-bottom:10px}.zen-input-container.size-sm .zen-input-label{font-size:12px;line-height:18px}.zen-input-container.size-sm .zen-input-field-wrapper{padding:8px 12px;min-height:36px;box-sizing:border-box}.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-field,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-leading-text,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-trailing-text{font-size:14px;line-height:20px}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-input-field{font-family:Courier New,Courier,monospace}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #F2F4F7;border-radius:4px;width:34px;height:24px;flex-shrink:0}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon .card-icon{font-size:16px;color:#4285f4;line-height:1}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon zen-icon{font-size:16px;color:#98a2b3;line-height:1}.zen-input-container.variant-input-field .zen-input-field-wrapper{padding:12px 14px;min-height:48px}.zen-phone-country-select{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-phone-country-select .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-phone-country-select .zen-phone-code{color:#344054;font-family:Inter,sans-serif;font-size:14px;font-weight:500;min-width:max-content}.zen-phone-country-select .zen-phone-dropdown-btn{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.zen-phone-country-select .zen-phone-dropdown-btn:disabled{cursor:not-allowed;opacity:.5}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon.active{transform:rotate(180deg)}.zen-phone-country-select .zen-phone-dropdown-btn:hover:not(:disabled) .zen-phone-expand-icon{color:#475467}.zen-phone-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100}.zen-phone-dropdown-menu .zen-phone-dropdown-list{padding:4px}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s ease;font-family:Inter,sans-serif;font-size:14px;text-align:left;color:#344054}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-name{flex:1;min-width:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item:hover{background:#f9fafb}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active{background:#f1f7fe;color:#105494}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active .zen-phone-country-code{color:#136ab6}.zen-payment-field{font-family:Courier New,Courier,monospace!important;letter-spacing:1px}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
948
+ ], 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 }); }
949
949
  }
950
950
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduInputComponent, decorators: [{
951
951
  type: Component,
@@ -955,7 +955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
955
955
  useExisting: forwardRef(() => ZenduInputComponent),
956
956
  multi: true
957
957
  }
958
- ], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-input-container\" [ngClass]=\"inputClasses\">\n <!-- Label -->\n @if (showLabel) {\n <label\n [for]=\"id\"\n class=\"zen-input-label text text-sm text-weight-medium\"\n [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n {{ label | translate }}\n @if (required) {\n <span class=\"required-indicator\">*</span>\n }\n </label>\n }\n\n <!-- Input wrapper -->\n <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n <!-- Leading icon -->\n @if (leadingIcon && variant === 'default' && !multiline) {\n <i\n class=\"material-icons zen-input-leading-icon\"\n (click)=\"onLeadingIconClick($event)\">\n {{ leadingIcon }}\n </i>\n }\n\n <!-- Leading dropdown -->\n @if (variant === 'leading-dropdown') {\n <div\n class=\"zen-input-leading-dropdown\">\n <button type=\"button\"\n class=\"zen-dropdown-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggleLeadingDropdown(); $event.stopPropagation()\">\n <span class=\"dropdown-label\">{{ getLeadingDropdownLabel() }}</span>\n <i class=\"material-icons dropdown-icon\">expand_more</i>\n </button>\n @if (leadingDropdownOpen) {\n <div class=\"zen-dropdown-menu\"\n [ngClass]=\"{'open': leadingDropdownOpen}\">\n @for (option of leadingDropdownOptions; track option) {\n <button\n type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': option.value === leadingDropdownValue}\"\n (click)=\"onLeadingDropdownChange(option.value); $event.stopPropagation()\">\n @if (option.icon) {\n <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n }\n {{ option.label | translate }}\n </button>\n }\n </div>\n }\n </div>\n }\n\n <!-- Leading text -->\n @if (variant === 'leading-text') {\n <span\n class=\"zen-input-leading-text text text-md text-weight-regular\">\n {{ leadingText }}\n </span>\n }\n\n <!-- Payment card icon -->\n @if (variant === 'payment') {\n <div\n class=\"zen-payment-card-icon\">\n <i class=\"material-icons card-icon\">payment</i>\n </div>\n }\n\n <!-- Input content based on type -->\n @if (type === 'tel') {\n <ng-container *ngTemplateOutlet=\"phoneInputTemplate\"></ng-container>\n } @else if (multiline) {\n <textarea #inputElement\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [rows]=\"rows\"\n [autocomplete]=\"autocomplete\"\n class=\"zen-input-field text text-md text-weight-regular\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"></textarea>\n } @else {\n <input #inputElement\n [type]=\"type\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n class=\"zen-input-field text text-md text-weight-regular\"\n [ngClass]=\"{'zen-payment-field': variant === 'payment'}\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\" />\n }\n\n <!-- Multiline footer: help icon (left), then character count + resize handle (right).\n Only rendered when it has content so an empty textarea keeps a full-height\n scrollbar and symmetric padding (see the no-footer rule in SCSS). -->\n @if (multiline && (resizable || helpIcon || showCharacterCount)) {\n <div class=\"zen-textarea-footer\">\n @if (helpIcon) {\n <div class=\"zen-input-trailing-container\">\n <button\n type=\"button\"\n class=\"zen-help-icon\"\n [disabled]=\"disabled\"\n (click)=\"onHelpIconClick($event); $event.stopPropagation()\">\n <i class=\"material-icons-outlined\">help_outline</i>\n @if (showHelpTooltip) {\n <div class=\"zen-help-tooltip\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tooltip-content\">\n {{ helpTooltip | translate }}\n </div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n }\n </button>\n </div>\n }\n <div class=\"zen-textarea-footer-end\">\n @if (showCharacterCount) {\n <span class=\"zen-character-count text text-sm text-weight-regular\">\n {{ characterCount }}\n </span>\n }\n @if (resizable) {\n <span\n class=\"zen-textarea-resize-handle\"\n [class.disabled]=\"disabled\"\n title=\"Drag to resize\"\n (pointerdown)=\"onResizeStart($event)\"\n (click)=\"$event.stopPropagation()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M17.5 5.5 5.5 17.5M17.5 12.5 12.5 17.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n }\n </div>\n </div>\n }\n\n <!-- Default input template -->\n\n <!-- Trailing elements container \u2014 render only when it has content, so a plain\n input (e.g. number) doesn't reserve trailing space or shift its spinner. -->\n @if (\n variant === 'trailing-text' ||\n (showCharacterCount && !helpIcon && variant === 'default' && !multiline) ||\n (helpIcon && variant !== 'trailing-dropdown' && !multiline) ||\n variant === 'trailing-dropdown'\n ) {\n <div class=\"zen-input-trailing-container\">\n <!-- Trailing text -->\n @if (variant === 'trailing-text') {\n <span\n class=\"zen-input-trailing-text text text-md text-weight-regular\">\n {{ trailingText }}\n </span>\n }\n\n <!-- Character counter -->\n @if (showCharacterCount && !helpIcon && variant === 'default' && !multiline) {\n <span\n class=\"zen-character-count text text-sm text-weight-regular\">\n {{ characterCount }}\n </span>\n }\n\n <!-- Help icon -->\n @if (helpIcon && variant !== 'trailing-dropdown' && !multiline) {\n <button\n type=\"button\"\n class=\"zen-help-icon\"\n [disabled]=\"disabled\"\n (click)=\"onHelpIconClick($event); $event.stopPropagation()\">\n <i class=\"material-icons-outlined\">help_outline</i>\n <!-- Help tooltip -->\n @if (showHelpTooltip) {\n <div class=\"zen-help-tooltip\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tooltip-content\">\n {{ helpTooltip | translate }}\n </div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n }\n </button>\n }\n\n <!-- Trailing dropdown -->\n @if (variant === 'trailing-dropdown') {\n <div\n class=\"zen-input-trailing-dropdown\">\n <button type=\"button\"\n class=\"zen-dropdown-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggleTrailingDropdown(); $event.stopPropagation()\">\n <span class=\"dropdown-label\">{{ getTrailingDropdownLabel() }}</span>\n <i class=\"material-icons dropdown-icon\">expand_more</i>\n </button>\n @if (trailingDropdownOpen) {\n <div class=\"zen-dropdown-menu dropdown-menu-right\"\n [ngClass]=\"{'open': trailingDropdownOpen}\">\n @for (option of trailingDropdownOptions; track option) {\n <button\n type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': option.value === trailingDropdownValue}\"\n (click)=\"onTrailingDropdownChange(option.value); $event.stopPropagation()\">\n @if (option.icon) {\n <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n }\n {{ option.label | translate }}\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Hint text / Error message -->\n @if (showHintText) {\n <div\n class=\"zen-input-hint text text-sm text-weight-regular\"\n [ngClass]=\"{'destructive': destructive}\">\n @if (destructive) {\n <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n }\n {{ displayHintText | translate }}\n </div>\n }\n\n <!-- Phone Country Dropdown (for tel type) -->\n @if (type === 'tel' && isPhoneDropdownExpanded) {\n <div\n class=\"zen-phone-dropdown-menu\">\n <div class=\"zen-phone-dropdown-list\">\n <!-- Countries List -->\n @for (country of countryList; track country) {\n <button type=\"button\"\n class=\"zen-phone-dropdown-item\"\n [ngClass]=\"{'active': selectedCountry.countryName === country.countryName}\"\n (click)=\"onCountryChanged(country)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"country.flag\"\n [alt]=\"country.countryName\">\n <span class=\"zen-phone-country-name\">{{ country.countryName | translate }}</span>\n <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n </button>\n }\n <!-- Custom Country -->\n <button type=\"button\"\n class=\"zen-phone-dropdown-item\"\n [ngClass]=\"{'active': selectedCountry.countryName === customCountry.countryName}\"\n (click)=\"onCountryChanged(customCountry)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"customCountry.flag\"\n [alt]=\"customCountry.countryName\">\n <span class=\"zen-phone-country-name\">{{ customCountry.countryName | translate }}</span>\n <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n </button>\n </div>\n </div>\n }\n</div>\n\n<!-- Phone Input Template -->\n<ng-template #phoneInputTemplate>\n <!-- Phone country selector -->\n <div class=\"zen-phone-country-select\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"selectedCountry.flag\"\n [alt]=\"selectedCountry.countryName\">\n <span class=\"zen-phone-code\">{{ selectedCountry.countryCallingCode }}</span>\n <button type=\"button\"\n class=\"zen-phone-dropdown-btn\"\n [disabled]=\"disabled\"\n (click)=\"togglePhoneDropdown(); $event.stopPropagation()\">\n <i class=\"material-icons zen-phone-expand-icon\"\n [ngClass]=\"{'active': isPhoneDropdownExpanded}\">expand_more</i>\n </button>\n </div>\n\n <!-- Phone input field -->\n <input #inputElement\n type=\"text\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"phoneText\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.maxlength]=\"phoneMaxLength\"\n [attr.minlength]=\"minLength\"\n [autocomplete]=\"autocomplete\"\n class=\"zen-input-field text text-md text-weight-regular\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\" />\n</ng-template>\n\n<!-- Click outside handler for dropdowns -->\n@if (leadingDropdownOpen || trailingDropdownOpen || isPhoneDropdownExpanded) {\n <div\n class=\"zen-dropdown-backdrop\"\n (click)=\"closeDropdowns(); hidePhoneDropdown()\"></div>\n}", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-label{color:#344054;display:flex;align-items:center;gap:4px}.zen-input-container .zen-input-label .required-indicator{color:#f04438}.zen-input-container .zen-input-label.disabled{color:#667085}.zen-input-container .zen-input-label.destructive{color:#344054}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover:not(.disabled){border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon{font-size:20px;color:#98a2b3;flex-shrink:0;cursor:pointer;transition:color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon:hover{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{position:relative;flex-shrink:0;margin-right:4px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-leading-text{color:#667085;flex-shrink:0;padding-right:4px}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container{display:flex;align-items:center;gap:8px;flex-shrink:0}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-text{color:#667085;flex-shrink:0;padding-left:4px}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-character-count{color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon{position:relative;display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;cursor:pointer}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon i{font-size:16px;color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:hover:not(:disabled) i{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:disabled{cursor:not-allowed}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:disabled i{color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip{position:absolute;bottom:calc(100% + 8px);right:50%;transform:translate(50%);z-index:1000;white-space:nowrap}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip .tooltip-content{background:#101828;color:#fff;padding:8px 12px;border-radius:8px;font-family:Inter,sans-serif;font-size:12px;line-height:18px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;max-width:200px;white-space:normal}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip .tooltip-arrow{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #101828}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown{position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;border-left:1px solid #D0D5DD;padding:0 0 0 8px;margin-left:4px;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:200px;max-height:240px;overflow-y:auto;z-index:100;padding:4px}.zen-input-container .zen-dropdown-menu.dropdown-menu-right{left:auto;right:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .option-icon{font-size:20px;color:#98a2b3}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494;font-weight:500}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .option-icon{color:#136ab6}.zen-input-container .zen-input-hint{display:flex;align-items:center;gap:4px;color:#667085}.zen-input-container .zen-input-hint .hint-icon{font-size:16px;color:#f04438}.zen-input-container .zen-input-hint.destructive{color:#f04438}.zen-input-container.focused .zen-input-field-wrapper{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container.focused .zen-input-field-wrapper.destructive{border-color:#fda29b;box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.zen-input-container.filled .zen-input-field-wrapper{background:#fff}.zen-input-container.disabled .zen-input-field-wrapper{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.zen-input-container.disabled .zen-input-field-wrapper:hover{border-color:#d0d5dd}.zen-input-container.destructive .zen-input-field-wrapper{border-color:#fda29b}.zen-input-container.destructive .zen-input-field-wrapper:hover:not(.disabled){border-color:#f97066}.zen-input-container.multiline .zen-input-field-wrapper{flex-direction:column;align-items:stretch;min-height:auto;gap:0;padding:0}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field{flex:0 0 auto;box-sizing:border-box;width:100%;resize:none;min-height:80px;padding:10px 6px 0 14px;font-family:inherit;line-height:24px;scrollbar-gutter:stable}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar{width:8px}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-track{background:transparent;border:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-thumb{background:#d0d5dd;border:none;border-radius:4px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer{display:flex;align-items:center;gap:8px;padding:0 14px 10px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer-end{display:flex;align-items:center;gap:8px;margin-left:auto}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle{display:inline-flex;align-items:center;justify-content:center;color:#98a2b3;cursor:ns-resize;touch-action:none;transition:color .2s ease}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle svg{display:block}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle:hover{color:#475467}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle.disabled{color:#d0d5dd;cursor:not-allowed;pointer-events:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-character-count{color:#98a2b3}.zen-input-container.multiline .zen-input-field-wrapper:not(:has(.zen-textarea-footer)) .zen-input-field{padding-bottom:10px}.zen-input-container.size-sm .zen-input-label{font-size:12px;line-height:18px}.zen-input-container.size-sm .zen-input-field-wrapper{padding:8px 12px;min-height:36px;box-sizing:border-box}.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-field,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-leading-text,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-trailing-text{font-size:14px;line-height:20px}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-input-field{font-family:Courier New,Courier,monospace}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #F2F4F7;border-radius:4px;width:34px;height:24px;flex-shrink:0}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon .card-icon{font-size:16px;color:#4285f4;line-height:1}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon zen-icon{font-size:16px;color:#98a2b3;line-height:1}.zen-input-container.variant-input-field .zen-input-field-wrapper{padding:12px 14px;min-height:48px}.zen-phone-country-select{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-phone-country-select .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-phone-country-select .zen-phone-code{color:#344054;font-family:Inter,sans-serif;font-size:14px;font-weight:500;min-width:max-content}.zen-phone-country-select .zen-phone-dropdown-btn{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.zen-phone-country-select .zen-phone-dropdown-btn:disabled{cursor:not-allowed;opacity:.5}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon.active{transform:rotate(180deg)}.zen-phone-country-select .zen-phone-dropdown-btn:hover:not(:disabled) .zen-phone-expand-icon{color:#475467}.zen-phone-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100}.zen-phone-dropdown-menu .zen-phone-dropdown-list{padding:4px}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s ease;font-family:Inter,sans-serif;font-size:14px;text-align:left;color:#344054}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-name{flex:1;min-width:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item:hover{background:#f9fafb}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active{background:#f1f7fe;color:#105494}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active .zen-phone-country-code{color:#136ab6}.zen-payment-field{font-family:Courier New,Courier,monospace!important;letter-spacing:1px}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"] }]
958
+ ], 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"] }]
959
959
  }], propDecorators: { inputElement: [{
960
960
  type: ViewChild,
961
961
  args: ['inputElement']
@@ -989,6 +989,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
989
989
  type: Input
990
990
  }], pattern: [{
991
991
  type: Input
992
+ }], min: [{
993
+ type: Input
994
+ }], max: [{
995
+ type: Input
996
+ }], step: [{
997
+ type: Input
992
998
  }], autocomplete: [{
993
999
  type: Input
994
1000
  }], name: [{
@@ -1158,7 +1164,7 @@ class ZenduSearchBoxComponent {
1158
1164
  return null;
1159
1165
  }
1160
1166
  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 }); }
1161
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduSearchBoxComponent, isStandalone: false, selector: "zen-search-box", inputs: { text: "text", delay: "delay", autoFocus: "autoFocus", disabled: "disabled", placeholder: "placeholder" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div class=\"search-box-component\"\n [class.has-text]=\"text\">\n <zen-input [(ngModel)]=\"text\"\n [placeholder]=\"placeholder | translate\"\n [disabled]=\"disabled\"\n leadingIcon=\"search\"\n autocomplete=\"off\"\n (ngModelChange)=\"onChange()\">\n </zen-input>\n @if (text) {\n <i class=\"material-icons close-icon\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"clear(); $event.stopPropagation()\">close</i>\n }\n</div>\n", styles: [".search-box-component{position:relative;width:100%}.search-box-component ::ng-deep .zen-input-field-wrapper{height:40px!important;min-height:auto!important;padding:8px 14px!important}.search-box-component.has-text ::ng-deep .zen-input-field{padding-right:24px}.search-box-component .close-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);color:#828282;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1}\n"], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduInputComponent, selector: "zen-input", inputs: ["type", "variant", "placeholder", "label", "hintText", "leadingIcon", "helpIcon", "helpTooltip", "destructive", "errorMessage", "disabled", "required", "maxLength", "minLength", "pattern", "autocomplete", "name", "id", "leadingDropdownOptions", "leadingDropdownValue", "leadingDropdownPlaceholder", "trailingDropdownOptions", "trailingDropdownValue", "trailingDropdownPlaceholder", "leadingText", "trailingText", "multiline", "rows", "resizable", "size", "showCharacterCount", "phoneMaxLength", "phone", "width"], outputs: ["valueChange", "inputFocus", "inputBlur", "inputKeydown", "inputKeyup", "leadingDropdownChange", "leadingDropdownValueChange", "trailingDropdownChange", "trailingDropdownValueChange", "helpIconClick", "phoneChange", "validChange", "leadingIconClick"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
1167
+ 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 }); }
1162
1168
  }
1163
1169
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSearchBoxComponent, decorators: [{
1164
1170
  type: Component,
@@ -2426,6 +2432,15 @@ class ZenduDatePickerDropdownComponent {
2426
2432
  * element, so an external control (e.g. a select) can drive it via open().
2427
2433
  */
2428
2434
  this.hideTrigger = false;
2435
+ /** Field label rendered above the trigger. Pass an already-translated
2436
+ * string (e.g. `[label]="'Select Date' | translate"`) — not translated
2437
+ * internally. */
2438
+ this.label = '';
2439
+ /** Adds a red `*` to the label. */
2440
+ this.required = false;
2441
+ /** Trigger height: `md` (40px, default, matches the md button) or `form`
2442
+ * (46px, to sit flush in a 46px-tall form field row). */
2443
+ this.size = 'md';
2429
2444
  this.mobile = false;
2430
2445
  this.isOpen = false;
2431
2446
  this.dropdownStyle = {};
@@ -2446,12 +2461,18 @@ class ZenduDatePickerDropdownComponent {
2446
2461
  this._appliedPresetLabel = null;
2447
2462
  this._appliedPresetStartTime = null;
2448
2463
  this._appliedPresetEndTime = null;
2449
- // Time picker state
2464
+ // Time picker state (start date, and single-date mode)
2450
2465
  this._hours = 12;
2451
2466
  this._minutes = 0;
2452
2467
  this._period = 'AM';
2453
2468
  this._hoursDisplay = '12';
2454
2469
  this._minutesDisplay = '00';
2470
+ // Time picker state for the range end date
2471
+ this._endHours = 12;
2472
+ this._endMinutes = 0;
2473
+ this._endPeriod = 'AM';
2474
+ this._endHoursDisplay = '12';
2475
+ this._endMinutesDisplay = '00';
2455
2476
  this.defaultPresets = [
2456
2477
  {
2457
2478
  label: 'Today',
@@ -2629,7 +2650,13 @@ class ZenduDatePickerDropdownComponent {
2629
2650
  ? this._appliedPresetLabel
2630
2651
  : null;
2631
2652
  if (this.timePicker) {
2632
- this.initTimeFromDate(this.type === 'single' ? this.date : this.startDate);
2653
+ if (this.type === 'single') {
2654
+ this.initTimeFromDate(this.date, 'start');
2655
+ }
2656
+ else {
2657
+ this.initTimeFromDate(this.startDate, 'start');
2658
+ this.initTimeFromDate(this.endDate, 'end');
2659
+ }
2633
2660
  }
2634
2661
  if (this.type === 'single') {
2635
2662
  this.leftCurrentSlot = this._selectedDate ? new Date(this._selectedDate) : new Date();
@@ -2776,127 +2803,204 @@ class ZenduDatePickerDropdownComponent {
2776
2803
  formatNum(n) {
2777
2804
  return n < 10 ? '0' + n : '' + n;
2778
2805
  }
2779
- incrementHours() {
2780
- this._hours = this._hours >= 12 ? 1 : this._hours + 1;
2781
- this._hoursDisplay = this.formatNum(this._hours);
2806
+ incrementHours(target = 'start') {
2807
+ if (target === 'end') {
2808
+ this._endHours = this._endHours >= 12 ? 1 : this._endHours + 1;
2809
+ this._endHoursDisplay = this.formatNum(this._endHours);
2810
+ }
2811
+ else {
2812
+ this._hours = this._hours >= 12 ? 1 : this._hours + 1;
2813
+ this._hoursDisplay = this.formatNum(this._hours);
2814
+ }
2782
2815
  }
2783
- decrementHours() {
2784
- this._hours = this._hours <= 1 ? 12 : this._hours - 1;
2785
- this._hoursDisplay = this.formatNum(this._hours);
2816
+ decrementHours(target = 'start') {
2817
+ if (target === 'end') {
2818
+ this._endHours = this._endHours <= 1 ? 12 : this._endHours - 1;
2819
+ this._endHoursDisplay = this.formatNum(this._endHours);
2820
+ }
2821
+ else {
2822
+ this._hours = this._hours <= 1 ? 12 : this._hours - 1;
2823
+ this._hoursDisplay = this.formatNum(this._hours);
2824
+ }
2786
2825
  }
2787
- incrementMinutes() {
2788
- this._minutes = this._minutes >= 59 ? 0 : this._minutes + 1;
2789
- this._minutesDisplay = this.formatNum(this._minutes);
2826
+ incrementMinutes(target = 'start') {
2827
+ if (target === 'end') {
2828
+ this._endMinutes = this._endMinutes >= 59 ? 0 : this._endMinutes + 1;
2829
+ this._endMinutesDisplay = this.formatNum(this._endMinutes);
2830
+ }
2831
+ else {
2832
+ this._minutes = this._minutes >= 59 ? 0 : this._minutes + 1;
2833
+ this._minutesDisplay = this.formatNum(this._minutes);
2834
+ }
2790
2835
  }
2791
- decrementMinutes() {
2792
- this._minutes = this._minutes <= 0 ? 59 : this._minutes - 1;
2793
- this._minutesDisplay = this.formatNum(this._minutes);
2836
+ decrementMinutes(target = 'start') {
2837
+ if (target === 'end') {
2838
+ this._endMinutes = this._endMinutes <= 0 ? 59 : this._endMinutes - 1;
2839
+ this._endMinutesDisplay = this.formatNum(this._endMinutes);
2840
+ }
2841
+ else {
2842
+ this._minutes = this._minutes <= 0 ? 59 : this._minutes - 1;
2843
+ this._minutesDisplay = this.formatNum(this._minutes);
2844
+ }
2794
2845
  }
2795
- onHoursInput(event) {
2846
+ onHoursInput(event, target = 'start') {
2796
2847
  const input = event.target;
2797
2848
  const raw = input.value.replace(/\D/g, '');
2798
2849
  if (raw === '') {
2799
- this._hours = 1;
2800
- this._hoursDisplay = '';
2850
+ if (target === 'end') {
2851
+ this._endHours = 1;
2852
+ this._endHoursDisplay = '';
2853
+ }
2854
+ else {
2855
+ this._hours = 1;
2856
+ this._hoursDisplay = '';
2857
+ }
2801
2858
  return;
2802
2859
  }
2803
2860
  const val = parseInt(raw, 10);
2804
2861
  if (val >= 1 && val <= 12) {
2805
- this._hours = val;
2806
- this._hoursDisplay = raw;
2862
+ if (target === 'end') {
2863
+ this._endHours = val;
2864
+ this._endHoursDisplay = raw;
2865
+ }
2866
+ else {
2867
+ this._hours = val;
2868
+ this._hoursDisplay = raw;
2869
+ }
2807
2870
  }
2808
2871
  else {
2809
- input.value = this._hoursDisplay;
2872
+ input.value = target === 'end' ? this._endHoursDisplay : this._hoursDisplay;
2810
2873
  }
2811
2874
  }
2812
- onMinutesInput(event) {
2875
+ onMinutesInput(event, target = 'start') {
2813
2876
  const input = event.target;
2814
2877
  const raw = input.value.replace(/\D/g, '');
2815
2878
  if (raw === '') {
2816
- this._minutes = 0;
2817
- this._minutesDisplay = '';
2879
+ if (target === 'end') {
2880
+ this._endMinutes = 0;
2881
+ this._endMinutesDisplay = '';
2882
+ }
2883
+ else {
2884
+ this._minutes = 0;
2885
+ this._minutesDisplay = '';
2886
+ }
2818
2887
  return;
2819
2888
  }
2820
2889
  const val = parseInt(raw, 10);
2821
2890
  if (val >= 0 && val <= 59) {
2822
- this._minutes = val;
2823
- this._minutesDisplay = raw;
2891
+ if (target === 'end') {
2892
+ this._endMinutes = val;
2893
+ this._endMinutesDisplay = raw;
2894
+ }
2895
+ else {
2896
+ this._minutes = val;
2897
+ this._minutesDisplay = raw;
2898
+ }
2824
2899
  }
2825
2900
  else {
2826
- input.value = this._minutesDisplay;
2901
+ input.value = target === 'end' ? this._endMinutesDisplay : this._minutesDisplay;
2827
2902
  }
2828
2903
  }
2829
- clampHours() {
2830
- this._hours = Math.max(1, Math.min(12, this._hours));
2831
- this._hoursDisplay = this.formatNum(this._hours);
2904
+ clampHours(target = 'start') {
2905
+ if (target === 'end') {
2906
+ this._endHours = Math.max(1, Math.min(12, this._endHours));
2907
+ this._endHoursDisplay = this.formatNum(this._endHours);
2908
+ }
2909
+ else {
2910
+ this._hours = Math.max(1, Math.min(12, this._hours));
2911
+ this._hoursDisplay = this.formatNum(this._hours);
2912
+ }
2832
2913
  }
2833
- clampMinutes() {
2834
- this._minutes = Math.max(0, Math.min(59, this._minutes));
2835
- this._minutesDisplay = this.formatNum(this._minutes);
2914
+ clampMinutes(target = 'start') {
2915
+ if (target === 'end') {
2916
+ this._endMinutes = Math.max(0, Math.min(59, this._endMinutes));
2917
+ this._endMinutesDisplay = this.formatNum(this._endMinutes);
2918
+ }
2919
+ else {
2920
+ this._minutes = Math.max(0, Math.min(59, this._minutes));
2921
+ this._minutesDisplay = this.formatNum(this._minutes);
2922
+ }
2836
2923
  }
2837
2924
  onTimeFocus(event) {
2838
2925
  const input = event.target;
2839
2926
  input.select();
2840
2927
  }
2841
- onTimeKeydown(event, type) {
2928
+ onTimeKeydown(event, type, target = 'start') {
2842
2929
  if (event.key === 'ArrowUp') {
2843
2930
  event.preventDefault();
2844
2931
  if (type === 'hours')
2845
- this.incrementHours();
2932
+ this.incrementHours(target);
2846
2933
  else
2847
- this.incrementMinutes();
2934
+ this.incrementMinutes(target);
2848
2935
  }
2849
2936
  else if (event.key === 'ArrowDown') {
2850
2937
  event.preventDefault();
2851
2938
  if (type === 'hours')
2852
- this.decrementHours();
2939
+ this.decrementHours(target);
2853
2940
  else
2854
- this.decrementMinutes();
2941
+ this.decrementMinutes(target);
2855
2942
  }
2856
2943
  }
2857
- setPeriod(period) {
2858
- this._period = period;
2944
+ setPeriod(period, target = 'start') {
2945
+ if (target === 'end') {
2946
+ this._endPeriod = period;
2947
+ }
2948
+ else {
2949
+ this._period = period;
2950
+ }
2859
2951
  }
2860
- applyTimeToDate(date) {
2952
+ applyTimeToDate(date, target = 'start') {
2861
2953
  const result = new Date(date);
2862
- let hours = this._hours;
2863
- if (this._period === 'AM' && hours === 12) {
2954
+ let hours = target === 'end' ? this._endHours : this._hours;
2955
+ const minutes = target === 'end' ? this._endMinutes : this._minutes;
2956
+ const period = target === 'end' ? this._endPeriod : this._period;
2957
+ if (period === 'AM' && hours === 12) {
2864
2958
  hours = 0;
2865
2959
  }
2866
- else if (this._period === 'PM' && hours !== 12) {
2960
+ else if (period === 'PM' && hours !== 12) {
2867
2961
  hours += 12;
2868
2962
  }
2869
- result.setHours(hours, this._minutes, 0, 0);
2963
+ result.setHours(hours, minutes, 0, 0);
2870
2964
  return result;
2871
2965
  }
2872
- initTimeFromDate(date) {
2873
- if (!date) {
2874
- this._hours = 12;
2875
- this._minutes = 0;
2876
- this._period = 'AM';
2877
- }
2878
- else {
2879
- let h = date.getHours();
2880
- this._minutes = date.getMinutes();
2966
+ initTimeFromDate(date, target = 'start') {
2967
+ let hours = 12;
2968
+ let minutes = 0;
2969
+ let period = 'AM';
2970
+ if (date) {
2971
+ const h = date.getHours();
2972
+ minutes = date.getMinutes();
2881
2973
  if (h === 0) {
2882
- this._hours = 12;
2883
- this._period = 'AM';
2974
+ hours = 12;
2975
+ period = 'AM';
2884
2976
  }
2885
2977
  else if (h < 12) {
2886
- this._hours = h;
2887
- this._period = 'AM';
2978
+ hours = h;
2979
+ period = 'AM';
2888
2980
  }
2889
2981
  else if (h === 12) {
2890
- this._hours = 12;
2891
- this._period = 'PM';
2982
+ hours = 12;
2983
+ period = 'PM';
2892
2984
  }
2893
2985
  else {
2894
- this._hours = h - 12;
2895
- this._period = 'PM';
2986
+ hours = h - 12;
2987
+ period = 'PM';
2896
2988
  }
2897
2989
  }
2898
- this._hoursDisplay = this.formatNum(this._hours);
2899
- this._minutesDisplay = this.formatNum(this._minutes);
2990
+ if (target === 'end') {
2991
+ this._endHours = hours;
2992
+ this._endMinutes = minutes;
2993
+ this._endPeriod = period;
2994
+ this._endHoursDisplay = this.formatNum(hours);
2995
+ this._endMinutesDisplay = this.formatNum(minutes);
2996
+ }
2997
+ else {
2998
+ this._hours = hours;
2999
+ this._minutes = minutes;
3000
+ this._period = period;
3001
+ this._hoursDisplay = this.formatNum(hours);
3002
+ this._minutesDisplay = this.formatNum(minutes);
3003
+ }
2900
3004
  }
2901
3005
  apply() {
2902
3006
  if (this.type === 'single') {
@@ -2910,13 +3014,13 @@ class ZenduDatePickerDropdownComponent {
2910
3014
  else {
2911
3015
  if (this._selectedStart) {
2912
3016
  this.startDate = this.timePicker
2913
- ? this.applyTimeToDate(this._selectedStart)
3017
+ ? this.applyTimeToDate(this._selectedStart, 'start')
2914
3018
  : new Date(this._selectedStart);
2915
3019
  this.startDateChange.emit(this.startDate);
2916
3020
  }
2917
3021
  if (this._selectedEnd) {
2918
3022
  this.endDate = this.timePicker
2919
- ? this.applyTimeToDate(this._selectedEnd)
3023
+ ? this.applyTimeToDate(this._selectedEnd, 'end')
2920
3024
  : new Date(this._selectedEnd);
2921
3025
  this.endDateChange.emit(this.endDate);
2922
3026
  }
@@ -3040,11 +3144,11 @@ class ZenduDatePickerDropdownComponent {
3040
3144
  return moment(day.date).isSame(moment(this._selectedEnd), 'day');
3041
3145
  }
3042
3146
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatePickerDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i2.TranslateService }, { token: ZEN_DATE_PICKER_DEFAULT_PRESETS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
3043
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduDatePickerDropdownComponent, isStandalone: false, selector: "zen-date-picker-dropdown", inputs: { type: "type", date: "date", startDate: "startDate", endDate: "endDate", presets: "presets", minDate: "minDate", maxDate: "maxDate", disabled: "disabled", dateMarkers: "dateMarkers", placeholder: "placeholder", mobileBreakpoint: "mobileBreakpoint", timePicker: "timePicker", autoApply: "autoApply", hideTrigger: "hideTrigger" }, outputs: { dateChange: "dateChange", startDateChange: "startDateChange", endDateChange: "endDateChange", rangeChange: "rangeChange" }, host: { listeners: { "window:resize": "onResize()", "window:mousedown": "outsideHandling($event)" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-dpd\">\n <!-- Trigger Button -->\n @if (!hideTrigger) {\n <button class=\"dropdown-trigger\"\n #triggerBtn\n [disabled]=\"disabled\"\n [class.active]=\"isOpen\"\n [class.has-value]=\"hasValue\"\n (click)=\"toggle()\">\n <zen-icon class=\"trigger-icon\"\n src=\"assets/ng-zenduit/icons/calendar.svg\">\n </zen-icon>\n <span class=\"trigger-label\">{{ triggerLabel }}</span>\n </button>\n }\n\n <!-- Dropdown Panel -->\n @if (isOpen) {\n <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n @if (type === 'range' && !mobile) {\n <!-- Presets sidebar -->\n <div class=\"presets-sidebar\">\n @for (preset of activePresets; track preset) {\n <div class=\"preset-item\"\n [class.active]=\"_activePreset === preset.label\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label | translate }}\n </div>\n }\n </div>\n <div class=\"sidebar-divider\"></div>\n <!-- Calendars + bottom panel -->\n <div class=\"calendars-container\">\n <div class=\"dual-calendars\">\n <!-- Left calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n </div>\n <div class=\"calendar-divider\"></div>\n <!-- Right calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ rightDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n </div>\n </div>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n }\n <div class=\"bottom-divider\"></div>\n <!-- Bottom panel: inputs (or legend) + actions -->\n <div class=\"bottom-panel\">\n @if (legendMarkers.length) {\n <div class=\"marker-legend\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"input-fields\">\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n </span>\n </div>\n </div>\n }\n <div class=\"actions\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n @if (type === 'range' && mobile) {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Range inputs -->\n <div class=\"mobile-range-inputs\">\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n </span>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- SINGLE DATE: single calendar + input + today button -->\n @if (type === 'single') {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Date input + Today button -->\n <div class=\"single-actions-row\">\n <div class=\"date-input flex-1\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n </span>\n </div>\n <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone single\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n @if (!autoApply) {\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection>\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-label\">{{ 'Select a time' | translate }}</span>\n <div class=\"time-picker-row\">\n <div class=\"time-fields\">\n <!-- Hours -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"_hoursDisplay\"\n (input)=\"onHoursInput($event)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours()\"\n (keydown)=\"onTimeKeydown($event, 'hours')\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n </div>\n\n <!-- Colon separator -->\n <div class=\"time-colon\">:</div>\n\n <!-- Minutes -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"_minutesDisplay\"\n (input)=\"onMinutesInput($event)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes()\"\n (keydown)=\"onTimeKeydown($event, 'minutes')\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n </div>\n </div>\n\n <!-- AM/PM toggle -->\n <div class=\"time-period-toggle\">\n <button class=\"time-period-btn\"\n [class.active]=\"_period === 'AM'\"\n (click)=\"setPeriod('AM')\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"_period === 'PM'\"\n (click)=\"setPeriod('PM')\">\n PM\n </button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n <div class=\"dates-grid\">\n <!-- Week day headers -->\n <div class=\"week-header\">\n @for (wd of weekDays; track wd) {\n <div class=\"cell header-cell\">{{ wd | translate }}</div>\n }\n </div>\n <!-- Day rows -->\n @for (row of dayRows; track row) {\n <div class=\"day-row\">\n @for (day of row.days; track day) {\n <div class=\"cell day-cell\"\n [class.outside]=\"day.isOutside\"\n [class.selected]=\"day.selected\"\n [class.today]=\"isToday(day)\"\n [class.disabled]=\"day.isDisabled\"\n [class.in-range]=\"isInRange(day)\"\n [class.range-start]=\"isRangeStart(day)\"\n [class.range-end]=\"isRangeEnd(day)\"\n (click)=\"selectDay(day)\">\n <span class=\"day-number\">{{ day.lbl }}</span>\n @if (day.markerColors?.length) {\n <div class=\"marker-dots\">\n @for (c of day.markerColors; track c) {\n <span class=\"marker-dot\"\n [style.background]=\"c || null\"></span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start;width:280px}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
3147
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduDatePickerDropdownComponent, isStandalone: false, selector: "zen-date-picker-dropdown", inputs: { type: "type", date: "date", startDate: "startDate", endDate: "endDate", presets: "presets", minDate: "minDate", maxDate: "maxDate", disabled: "disabled", dateMarkers: "dateMarkers", placeholder: "placeholder", mobileBreakpoint: "mobileBreakpoint", timePicker: "timePicker", autoApply: "autoApply", hideTrigger: "hideTrigger", label: "label", required: "required", size: "size" }, outputs: { dateChange: "dateChange", startDateChange: "startDateChange", endDateChange: "endDateChange", rangeChange: "rangeChange" }, host: { listeners: { "window:resize": "onResize()", "window:mousedown": "outsideHandling($event)" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-dpd\">\n <!-- Field label -->\n @if (label) {\n <label class=\"zen-dpd-label\">\n {{ label }}\n @if (required) {\n <span class=\"zen-dpd-required\">*</span>\n }\n </label>\n }\n\n <!-- Trigger Button -->\n @if (!hideTrigger) {\n <button class=\"dropdown-trigger\"\n #triggerBtn\n [class.size-form]=\"size === 'form'\"\n [disabled]=\"disabled\"\n [class.active]=\"isOpen\"\n [class.has-value]=\"hasValue\"\n (click)=\"toggle()\">\n <zen-icon class=\"trigger-icon\"\n src=\"assets/ng-zenduit/icons/calendar.svg\">\n </zen-icon>\n <span class=\"trigger-label\">{{ triggerLabel }}</span>\n </button>\n }\n\n <!-- Dropdown Panel -->\n @if (isOpen) {\n <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n @if (type === 'range' && !mobile) {\n <!-- Presets sidebar -->\n <div class=\"presets-sidebar\">\n @for (preset of activePresets; track preset) {\n <div class=\"preset-item\"\n [class.active]=\"_activePreset === preset.label\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label | translate }}\n </div>\n }\n </div>\n <div class=\"sidebar-divider\"></div>\n <!-- Calendars + bottom panel -->\n <div class=\"calendars-container\">\n <div class=\"dual-calendars\">\n <!-- Left calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n </div>\n <div class=\"calendar-divider\"></div>\n <!-- Right calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ rightDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n </div>\n </div>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <!-- Bottom panel: inputs (or legend) + actions -->\n <div class=\"bottom-panel\">\n @if (legendMarkers.length) {\n <div class=\"marker-legend\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"input-fields\">\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n </span>\n </div>\n </div>\n }\n <div class=\"actions\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n @if (type === 'range' && mobile) {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Range inputs -->\n <div class=\"mobile-range-inputs\">\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n </span>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- SINGLE DATE: single calendar + input + today button -->\n @if (type === 'single') {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Date input + Today button -->\n <div class=\"single-actions-row\">\n <div class=\"date-input flex-1\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n </span>\n </div>\n <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start' }\"></ng-container>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone single\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n @if (!autoApply) {\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection let-target=\"target\" let-label=\"label\">\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-label\">{{ (label || 'Select a time') | translate }}</span>\n <div class=\"time-picker-row\">\n <div class=\"time-fields\">\n <!-- Hours -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endHoursDisplay : _hoursDisplay\"\n (input)=\"onHoursInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours(target)\"\n (keydown)=\"onTimeKeydown($event, 'hours', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n </div>\n\n <!-- Colon separator -->\n <div class=\"time-colon\">:</div>\n\n <!-- Minutes -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endMinutesDisplay : _minutesDisplay\"\n (input)=\"onMinutesInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes(target)\"\n (keydown)=\"onTimeKeydown($event, 'minutes', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n </div>\n </div>\n\n <!-- AM/PM toggle -->\n <div class=\"time-period-toggle\">\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'AM'\"\n (click)=\"setPeriod('AM', target)\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'PM'\"\n (click)=\"setPeriod('PM', target)\">\n PM\n </button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n <div class=\"dates-grid\">\n <!-- Week day headers -->\n <div class=\"week-header\">\n @for (wd of weekDays; track wd) {\n <div class=\"cell header-cell\">{{ wd | translate }}</div>\n }\n </div>\n <!-- Day rows -->\n @for (row of dayRows; track row) {\n <div class=\"day-row\">\n @for (day of row.days; track day) {\n <div class=\"cell day-cell\"\n [class.outside]=\"day.isOutside\"\n [class.selected]=\"day.selected\"\n [class.today]=\"isToday(day)\"\n [class.disabled]=\"day.isDisabled\"\n [class.in-range]=\"isInRange(day)\"\n [class.range-start]=\"isRangeStart(day)\"\n [class.range-end]=\"isRangeEnd(day)\"\n (click)=\"selectDay(day)\">\n <span class=\"day-number\">{{ day.lbl }}</span>\n @if (day.markerColors?.length) {\n <div class=\"marker-dots\">\n @for (c of day.markerColors; track c) {\n <span class=\"marker-dot\"\n [style.background]=\"c || null\"></span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.zen-dpd-label{display:block;margin-bottom:6px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054}.zen-dpd-label .zen-dpd-required{color:#f04438}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.dropdown-trigger.size-form{height:46px}.dropdown-trigger{box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start;width:280px}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-pickers-dual{display:flex;align-items:stretch}.time-pickers-dual>.time-picker-container{box-sizing:border-box;min-width:0}.time-pickers-dual>.time-picker-container:first-child{flex:0 0 328px;width:328px}.time-pickers-dual>.time-picker-container:last-child{flex:1 1 auto}.time-pickers-divider{width:1px;min-width:1px;background:#eaecf0;align-self:stretch;flex-shrink:0}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.calendars-container:has(.time-pickers-dual) .bottom-panel{column-gap:16px}.calendars-container:has(.time-pickers-dual) .bottom-panel .input-fields,.calendars-container:has(.time-pickers-dual) .bottom-panel .actions{flex-shrink:0}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
3044
3148
  }
3045
3149
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatePickerDropdownComponent, decorators: [{
3046
3150
  type: Component,
3047
- args: [{ selector: 'zen-date-picker-dropdown', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-dpd\">\n <!-- Trigger Button -->\n @if (!hideTrigger) {\n <button class=\"dropdown-trigger\"\n #triggerBtn\n [disabled]=\"disabled\"\n [class.active]=\"isOpen\"\n [class.has-value]=\"hasValue\"\n (click)=\"toggle()\">\n <zen-icon class=\"trigger-icon\"\n src=\"assets/ng-zenduit/icons/calendar.svg\">\n </zen-icon>\n <span class=\"trigger-label\">{{ triggerLabel }}</span>\n </button>\n }\n\n <!-- Dropdown Panel -->\n @if (isOpen) {\n <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n @if (type === 'range' && !mobile) {\n <!-- Presets sidebar -->\n <div class=\"presets-sidebar\">\n @for (preset of activePresets; track preset) {\n <div class=\"preset-item\"\n [class.active]=\"_activePreset === preset.label\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label | translate }}\n </div>\n }\n </div>\n <div class=\"sidebar-divider\"></div>\n <!-- Calendars + bottom panel -->\n <div class=\"calendars-container\">\n <div class=\"dual-calendars\">\n <!-- Left calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n </div>\n <div class=\"calendar-divider\"></div>\n <!-- Right calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ rightDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n </div>\n </div>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n }\n <div class=\"bottom-divider\"></div>\n <!-- Bottom panel: inputs (or legend) + actions -->\n <div class=\"bottom-panel\">\n @if (legendMarkers.length) {\n <div class=\"marker-legend\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"input-fields\">\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n </span>\n </div>\n </div>\n }\n <div class=\"actions\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n @if (type === 'range' && mobile) {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Range inputs -->\n <div class=\"mobile-range-inputs\">\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n </span>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- SINGLE DATE: single calendar + input + today button -->\n @if (type === 'single') {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Date input + Today button -->\n <div class=\"single-actions-row\">\n <div class=\"date-input flex-1\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n </span>\n </div>\n <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone single\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n @if (!autoApply) {\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection>\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-label\">{{ 'Select a time' | translate }}</span>\n <div class=\"time-picker-row\">\n <div class=\"time-fields\">\n <!-- Hours -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"_hoursDisplay\"\n (input)=\"onHoursInput($event)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours()\"\n (keydown)=\"onTimeKeydown($event, 'hours')\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n </div>\n\n <!-- Colon separator -->\n <div class=\"time-colon\">:</div>\n\n <!-- Minutes -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"_minutesDisplay\"\n (input)=\"onMinutesInput($event)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes()\"\n (keydown)=\"onTimeKeydown($event, 'minutes')\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n </div>\n </div>\n\n <!-- AM/PM toggle -->\n <div class=\"time-period-toggle\">\n <button class=\"time-period-btn\"\n [class.active]=\"_period === 'AM'\"\n (click)=\"setPeriod('AM')\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"_period === 'PM'\"\n (click)=\"setPeriod('PM')\">\n PM\n </button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n <div class=\"dates-grid\">\n <!-- Week day headers -->\n <div class=\"week-header\">\n @for (wd of weekDays; track wd) {\n <div class=\"cell header-cell\">{{ wd | translate }}</div>\n }\n </div>\n <!-- Day rows -->\n @for (row of dayRows; track row) {\n <div class=\"day-row\">\n @for (day of row.days; track day) {\n <div class=\"cell day-cell\"\n [class.outside]=\"day.isOutside\"\n [class.selected]=\"day.selected\"\n [class.today]=\"isToday(day)\"\n [class.disabled]=\"day.isDisabled\"\n [class.in-range]=\"isInRange(day)\"\n [class.range-start]=\"isRangeStart(day)\"\n [class.range-end]=\"isRangeEnd(day)\"\n (click)=\"selectDay(day)\">\n <span class=\"day-number\">{{ day.lbl }}</span>\n @if (day.markerColors?.length) {\n <div class=\"marker-dots\">\n @for (c of day.markerColors; track c) {\n <span class=\"marker-dot\"\n [style.background]=\"c || null\"></span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start;width:280px}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"] }]
3151
+ args: [{ selector: 'zen-date-picker-dropdown', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-dpd\">\n <!-- Field label -->\n @if (label) {\n <label class=\"zen-dpd-label\">\n {{ label }}\n @if (required) {\n <span class=\"zen-dpd-required\">*</span>\n }\n </label>\n }\n\n <!-- Trigger Button -->\n @if (!hideTrigger) {\n <button class=\"dropdown-trigger\"\n #triggerBtn\n [class.size-form]=\"size === 'form'\"\n [disabled]=\"disabled\"\n [class.active]=\"isOpen\"\n [class.has-value]=\"hasValue\"\n (click)=\"toggle()\">\n <zen-icon class=\"trigger-icon\"\n src=\"assets/ng-zenduit/icons/calendar.svg\">\n </zen-icon>\n <span class=\"trigger-label\">{{ triggerLabel }}</span>\n </button>\n }\n\n <!-- Dropdown Panel -->\n @if (isOpen) {\n <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n @if (type === 'range' && !mobile) {\n <!-- Presets sidebar -->\n <div class=\"presets-sidebar\">\n @for (preset of activePresets; track preset) {\n <div class=\"preset-item\"\n [class.active]=\"_activePreset === preset.label\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label | translate }}\n </div>\n }\n </div>\n <div class=\"sidebar-divider\"></div>\n <!-- Calendars + bottom panel -->\n <div class=\"calendars-container\">\n <div class=\"dual-calendars\">\n <!-- Left calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n </div>\n <div class=\"calendar-divider\"></div>\n <!-- Right calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ rightDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n </div>\n </div>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <!-- Bottom panel: inputs (or legend) + actions -->\n <div class=\"bottom-panel\">\n @if (legendMarkers.length) {\n <div class=\"marker-legend\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"input-fields\">\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n </span>\n </div>\n </div>\n }\n <div class=\"actions\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n @if (type === 'range' && mobile) {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Range inputs -->\n <div class=\"mobile-range-inputs\">\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n </span>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- SINGLE DATE: single calendar + input + today button -->\n @if (type === 'single') {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Date input + Today button -->\n <div class=\"single-actions-row\">\n <div class=\"date-input flex-1\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n </span>\n </div>\n <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start' }\"></ng-container>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone single\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n @if (!autoApply) {\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection let-target=\"target\" let-label=\"label\">\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-label\">{{ (label || 'Select a time') | translate }}</span>\n <div class=\"time-picker-row\">\n <div class=\"time-fields\">\n <!-- Hours -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endHoursDisplay : _hoursDisplay\"\n (input)=\"onHoursInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours(target)\"\n (keydown)=\"onTimeKeydown($event, 'hours', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n </div>\n\n <!-- Colon separator -->\n <div class=\"time-colon\">:</div>\n\n <!-- Minutes -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endMinutesDisplay : _minutesDisplay\"\n (input)=\"onMinutesInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes(target)\"\n (keydown)=\"onTimeKeydown($event, 'minutes', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n </div>\n </div>\n\n <!-- AM/PM toggle -->\n <div class=\"time-period-toggle\">\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'AM'\"\n (click)=\"setPeriod('AM', target)\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'PM'\"\n (click)=\"setPeriod('PM', target)\">\n PM\n </button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n <div class=\"dates-grid\">\n <!-- Week day headers -->\n <div class=\"week-header\">\n @for (wd of weekDays; track wd) {\n <div class=\"cell header-cell\">{{ wd | translate }}</div>\n }\n </div>\n <!-- Day rows -->\n @for (row of dayRows; track row) {\n <div class=\"day-row\">\n @for (day of row.days; track day) {\n <div class=\"cell day-cell\"\n [class.outside]=\"day.isOutside\"\n [class.selected]=\"day.selected\"\n [class.today]=\"isToday(day)\"\n [class.disabled]=\"day.isDisabled\"\n [class.in-range]=\"isInRange(day)\"\n [class.range-start]=\"isRangeStart(day)\"\n [class.range-end]=\"isRangeEnd(day)\"\n (click)=\"selectDay(day)\">\n <span class=\"day-number\">{{ day.lbl }}</span>\n @if (day.markerColors?.length) {\n <div class=\"marker-dots\">\n @for (c of day.markerColors; track c) {\n <span class=\"marker-dot\"\n [style.background]=\"c || null\"></span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.zen-dpd-label{display:block;margin-bottom:6px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054}.zen-dpd-label .zen-dpd-required{color:#f04438}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.dropdown-trigger.size-form{height:46px}.dropdown-trigger{box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start;width:280px}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-pickers-dual{display:flex;align-items:stretch}.time-pickers-dual>.time-picker-container{box-sizing:border-box;min-width:0}.time-pickers-dual>.time-picker-container:first-child{flex:0 0 328px;width:328px}.time-pickers-dual>.time-picker-container:last-child{flex:1 1 auto}.time-pickers-divider{width:1px;min-width:1px;background:#eaecf0;align-self:stretch;flex-shrink:0}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.calendars-container:has(.time-pickers-dual) .bottom-panel{column-gap:16px}.calendars-container:has(.time-pickers-dual) .bottom-panel .input-fields,.calendars-container:has(.time-pickers-dual) .bottom-panel .actions{flex-shrink:0}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"] }]
3048
3152
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.TranslateService }, { type: undefined, decorators: [{
3049
3153
  type: Optional
3050
3154
  }, {
@@ -3086,6 +3190,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
3086
3190
  type: Input
3087
3191
  }], hideTrigger: [{
3088
3192
  type: Input
3193
+ }], label: [{
3194
+ type: Input
3195
+ }], required: [{
3196
+ type: Input
3197
+ }], size: [{
3198
+ type: Input
3089
3199
  }], triggerBtn: [{
3090
3200
  type: ViewChild,
3091
3201
  args: ['triggerBtn']
@@ -4147,7 +4257,7 @@ class ZenduFilterComponent {
4147
4257
  return count;
4148
4258
  }
4149
4259
  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 }); }
4150
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduFilterComponent, isStandalone: false, selector: "zen-filter", inputs: { config: "config", filter: "filter", position: "position", resetBehavior: "resetBehavior", defaultFilter: "defaultFilter", isVisible: "isVisible", customTrigger: "customTrigger", imageUrl: "imageUrl", label: "label", triggerVariant: "triggerVariant", showOptions: "showOptions", customOptions: "customOptions", wrapperBodyClass: "wrapperBodyClass", customPosition: "customPosition" }, outputs: { filterChange: "filterChange", isVisibleChange: "isVisibleChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:resize": "windowSizeHandling()", "window:scroll": "windowScroll()", "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "_componentElement", first: true, predicate: ["mainComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"filters-component\"\n #mainComponent\n click-out=\"isVisible && hide()\">\n\n @if (!customTrigger) {\n <zen-button (click)=\"toggle()\"\n [variant]=\"hasActiveFilters ? 'secondary' : 'secondary-gray'\"\n class=\"filter {{hasActiveFilters ? 'applied' : ''}} {{triggerVariant === 'icon-only' ? 'icon-only' : ''}}\">\n @if (imageUrl) {\n <zen-icon [src]=\"imageUrl\"\n ></zen-icon>\n }\n @if (!imageUrl) {\n <zen-icon class=\"filter-icon\"\n name=\"filter\"></zen-icon>\n }\n @if (triggerVariant !== 'icon-only') {\n <span class=\"filter-label\">{{ (label || 'Filter') | translate }}</span>\n @if (appliedCount > 0) {\n <span class=\"filter-count-badge\">{{ appliedCount }}</span>\n }\n }\n </zen-button>\n <!-- Icon-only mode: count rendered as a corner badge overlapping the\n button's top-right (sibling of the button so it isn't clipped). -->\n @if (triggerVariant === 'icon-only' && appliedCount > 0) {\n <span class=\"filter-icon-badge\">{{ appliedCount }}</span>\n }\n }\n\n @if (customTrigger) {\n <ng-content></ng-content>\n }\n\n <div [hidden]=\"!isVisible\"\n class=\"filter-menu menu-content\"\n [class.customTrigger]=\"customTrigger\"\n [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom, 'max-height': menuMaxHeight }\">\n <div class=\"filter-menu__header\">\n <zen-search-box [(text)]=\"searchText\"\n #searchBox\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"filter-menu__body\"\n ngClass=\"{{wrapperBodyClass}}\">\n @if (errorMessage.length) {\n @for (item of errorMessage; track item) {\n <li\n class=\"error-msg\">{{item | translate }}</li>\n }\n }\n\n @for (item of config.items; track item) {\n @if (isMenuIsVisible(item)) {\n <div [class]=\"'menu-item menu-item--' + item.type\">\n <!-- Divider between two filter -->\n @if (item.type === 'divider') {\n <p class=\"filter-divider\"></p>\n }\n <!-- Boolean toggle -->\n @if (item.type === 'toggle') {\n <div\n class=\"action-item toggle-row\"\n (click)=\"toggleEnabled(item)\">\n <div>{{item.title | translate}}</div>\n <zen-toggle [(enabled)]=\"item.enabled\"\n (click)=\"$event.stopPropagation()\"></zen-toggle>\n </div>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse) {\n <button class=\"action-item expander-item\"\n (click)=\"toggleItem(item)\">\n <span class=\"expander-title\">{{item.title | translate}}</span>\n <span class=\"expander-indicator\">\n @if (isItemFiltered(item)) {\n <span class=\"filter-section-dot\"></span>\n }\n <zen-icon class=\"expand-icon\"\n name=\"chevron-down\"\n [class.active]=\"item.expanded\"></zen-icon>\n </span>\n </button>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n <div class=\"action-item section-title\"\n >\n <span class=\"expander-title\">{{item.title | translate}}</span>\n @if (isItemFiltered(item)) {\n <span class=\"filter-section-dot\"></span>\n }\n </div>\n }\n @if (item.expanded || item.disableCollapse) {\n @switch (item.type) {\n <!-- Multiselect -->\n @case ('multiselect') {\n <div class=\"menu-item__content\">\n <!-- Lazy loading mode -->\n @if (item.isLazyLoading) {\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\"\n (click)=\"toggleDsItem(dsItem, item)\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n (click)=\"$event.stopPropagation()\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n @if (item.canLoadMore && !item.isLoadingNow) {\n <div\n class=\"action-item\">\n <zen-button variant=\"secondary-gray\"\n size=\"sm\"\n [fullWidth]=\"true\"\n (click)=\"loadMore(item, false)\">\n {{'Load More' | translate}}\n </zen-button>\n </div>\n }\n @if (item.isLoadingNow) {\n <div\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n }\n }\n @if (!item.isLazyLoading && !hasTreeData(item)) {\n @if (!item.hideSelectAll) {\n <div class=\"action-item-checkbox ds-item select-all\">\n @if (item.dataSource.length === item.filteredDataSource.length) {\n <zen-checkbox\n [(checked)]=\"item.isSelectedAll\"\n [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n [label]=\"'Select All' | translate\"\n (checkedChange)=\"onSelectAll(item)\">\n </zen-checkbox>\n }\n </div>\n }\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\"\n (click)=\"toggleDsItem(dsItem, item)\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n (click)=\"$event.stopPropagation()\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n }\n <!-- Tree view mode -->\n @if (!item.isLazyLoading && hasTreeData(item)) {\n <zen-groups\n [dataSource]=\"item.dataSource\"\n [filteredDataSource]=\"item.filteredDataSource\"\n [hideSelectAll]=\"item.hideSelectAll\"\n [inline]=\"true\"\n [hideSearch]=\"true\"\n [(isSelectedAll)]=\"item.isSelectedAll\"\n (checkedChange)=\"checkChanged($event, item)\">\n </zen-groups>\n }\n </div>\n }\n <!-- Date range picker -->\n @case ('dateRange') {\n <div class=\"menu-item__content\">\n <!-- Options date range view -->\n @if (item.dateRangeOptions?.length) {\n @for (option of item.dateRangeOptions; track option) {\n <div class=\"action-item-radio ds-item\">\n <zen-radio [value]=\"option.name\"\n [label]=\"option.name | translate\"\n [name]=\"item.key\"\n [selected]=\"selectedDateRangeOptions[item.key] === option.name\"\n (radioChange)=\"handleDateRangeOptionClick(item, option)\"></zen-radio>\n </div>\n }\n <div class=\"action-item-radio ds-item\">\n <zen-radio [value]=\"'Custom'\"\n [label]=\"'Custom' | translate\"\n [name]=\"item.key\"\n [selected]=\"selectedDateRangeOptions[item.key] === 'Custom'\"\n (radioChange)=\"handleCustomDateRangeClick(item)\"></zen-radio>\n </div>\n @if (selectedDateRangeOptions[item.key] === 'Custom') {\n <div class=\"filter-date-fields\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.dateRange.start\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [date]=\"item.dateRange.end\"\n [timePicker]=\"item.showTime\"\n (dateChange)=\"handleEndDateChange(item, $event)\">\n </zen-date-picker-dropdown>\n </div>\n </div>\n }\n }\n <!-- Default date range view -->\n @if (!item.dateRangeOptions?.length) {\n <div class=\"filter-date-fields\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.dateRange.start\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [date]=\"item.dateRange.end\"\n [timePicker]=\"item.showTime\"\n (dateChange)=\"handleEndDateChange(item, $event)\">\n </zen-date-picker-dropdown>\n </div>\n </div>\n }\n </div>\n }\n <!-- Date picker -->\n @case ('date') {\n <div class=\"filter-row menu-item__content\">\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.date\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n }\n <!-- Number range -->\n @case ('numberRange') {\n <div\n class=\"filter-row number-range-row menu-item__content\">\n <zen-input type=\"number\"\n size=\"sm\"\n [label]=\"'Min' | translate\"\n [(ngModel)]=\"item.numberRange.from\"></zen-input>\n <zen-input type=\"number\"\n size=\"sm\"\n [label]=\"'Max' | translate\"\n [(ngModel)]=\"item.numberRange.to\"></zen-input>\n </div>\n }\n <!-- Radio -->\n @case ('radio') {\n <div class=\"menu-item__content\">\n @for (option of item.radioOptions; track option) {\n <div\n class=\"action-item-radio ds-item\">\n <zen-radio [value]=\"option.id\"\n [label]=\"option.name | translate\"\n [name]=\"item.key\"\n [imageUrl]=\"option.imageUrl\"\n [selected]=\"option.selected\"\n (radioChange)=\"radioChanged($event, item)\"\n [disabled]=\"option.disabled\"></zen-radio>\n </div>\n }\n </div>\n }\n }\n }\n </div>\n }\n }\n @if (showNoFilterResult) {\n <span\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n }\n </div>\n\n <div class=\"filter-menu__footer\">\n <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n <div class=\"filter-footer-actions\">\n <zen-button variant=\"secondary-gray\"\n [destructive]=\"true\"\n [disabled]=\"resetDisabled\"\n (click)=\"reset()\">\n {{ (defaultFilter ? 'Reset Default' : 'Clear All') | translate }}\n </zen-button>\n <zen-button variant=\"primary\"\n (click)=\"apply()\">\n {{'Apply' | translate}}\n </zen-button>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .menu-content{width:400px;white-space:initial;position:fixed}.filters-component .menu-content.absolute{position:absolute;inset:auto}.filters-component .menu-content.dropdown-left{right:0}.filters-component .menu-content.dropdown-right{left:0}.filters-component .menu-content.dropdown-top{bottom:100%;margin-bottom:12px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:12px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .filter-menu{display:flex;flex-direction:column;background:#fff;border-radius:8px;border:1px solid #eaecf0;overflow:hidden;z-index:10;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.filters-component .filter-menu[hidden]{display:none}.filters-component .filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filters-component .filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filters-component .filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.filters-component .filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .menu-item.menu-item--multiselect,.filters-component .filter-menu__body .menu-item.menu-item--radio{gap:0}.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:first-child,.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:first-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:first-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-radio:first-child{margin-top:0}.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:last-child,.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:last-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:last-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-radio:last-child{margin-bottom:0}.filters-component .filter-menu__body .menu-item__content{padding-left:8px}.filters-component .filter-menu__body .action-item,.filters-component .filter-menu__body .action-item-checkbox,.filters-component .filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filters-component .filter-menu__body .action-item:focus-within,.filters-component .filter-menu__body .action-item-checkbox:focus-within,.filters-component .filter-menu__body .action-item-radio:focus-within{background:transparent}.filters-component .filter-menu__body .action-item:hover{background:transparent}.filters-component .filter-menu__body .action-item-checkbox,.filters-component .filter-menu__body .action-item-radio{margin-left:-8px;margin-right:0;padding-left:8px;padding-right:8px;border-radius:6px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .action-item-checkbox:hover,.filters-component .filter-menu__body .action-item-radio:hover{background:#f9fafb}.filters-component .filter-menu__body .action-item-checkbox ::ng-deep .checkbox-component,.filters-component .filter-menu__body .action-item-radio ::ng-deep .radio-component{padding-top:10px;padding-bottom:10px}.filters-component .filter-menu__body .action-item-checkbox:first-child,.filters-component .filter-menu__body .action-item-radio:first-child{margin-top:-10px}.filters-component .filter-menu__body .action-item-checkbox:last-child,.filters-component .filter-menu__body .action-item-radio:last-child{margin-bottom:-4px}.filters-component .filter-menu__body .expander-item{outline:none;border:none;display:flex;width:auto;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filters-component .filter-menu__body .expander-item.expanded,.filters-component .filter-menu__body .expander-item.active{background:transparent;color:#344054}.filters-component .filter-menu__body .expander-item:hover{background:#f9fafb}.filters-component .filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filters-component .filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filters-component .filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filters-component .filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filters-component .filter-menu__body .no-item,.filters-component .filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filters-component .filter-menu__body .select-all{font-weight:500}.filters-component .filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .number-range-row{display:flex;gap:16px}.filters-component .filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filters-component .filter-menu__body .toggle-row{justify-content:space-between;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .toggle-row zen-toggle{display:flex;align-items:center}.filters-component .filter-menu__body .toggle-row:hover{background:#f9fafb}.filters-component .filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled){background-color:#eaecf0}.filters-component .filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled).zen-toggle--active{background-color:#105494}.filters-component .filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.filters-component .filter-menu__body .section-title{display:flex;align-items:center;gap:6px;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;margin:0 -16px;padding:10px 16px;transition:background-color .15s ease}.filters-component .filter-menu__body .section-title:hover{background:#f9fafb}.filters-component .filter-menu__body .has-badge zen-checkbox{width:auto}.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox{background:#e3eefb;border-color:#136ab6}.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-checked,.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.filters-component .filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .filter-menu__body .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.filters-component .filter-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:2px 8px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:12px;line-height:18px;white-space:nowrap;box-sizing:border-box}.filters-component .filter-icon-badge{position:absolute;top:-4px;right:-7px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:1.5px 6px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:9px;line-height:13.5px;text-align:center;white-space:nowrap;box-sizing:border-box;pointer-events:none}.filters-component .filter zen-icon{width:20px;height:20px;background-color:#344054}.filters-component .filter.applied zen-icon{background-color:#136ab6}.filters-component .filter.applied .filter-label{color:#136ab6}.hidden{display:none}:host ::ng-deep .filter.applied button{border-color:#88c1f1!important}:host ::ng-deep .filter.icon-only button{padding:10px!important}:host ::ng-deep zen-radio label{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduToggleComponent, selector: "zen-toggle", inputs: ["enabled", "size", "disabled", "label", "supportingText"], outputs: ["enabledChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduRadioButtonComponent, selector: "zen-radio", inputs: ["selected", "label", "value", "name", "disabled", "imageUrl", "size", "supportingText"], outputs: ["radioChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "component", type: ZenduDatePickerDropdownComponent, selector: "zen-date-picker-dropdown", inputs: ["type", "date", "startDate", "endDate", "presets", "minDate", "maxDate", "disabled", "dateMarkers", "placeholder", "mobileBreakpoint", "timePicker", "autoApply", "hideTrigger"], outputs: ["dateChange", "startDateChange", "endDateChange", "rangeChange"] }, { kind: "component", type: ZenduInputComponent, selector: "zen-input", inputs: ["type", "variant", "placeholder", "label", "hintText", "leadingIcon", "helpIcon", "helpTooltip", "destructive", "errorMessage", "disabled", "required", "maxLength", "minLength", "pattern", "autocomplete", "name", "id", "leadingDropdownOptions", "leadingDropdownValue", "leadingDropdownPlaceholder", "trailingDropdownOptions", "trailingDropdownValue", "trailingDropdownPlaceholder", "leadingText", "trailingText", "multiline", "rows", "resizable", "size", "showCharacterCount", "phoneMaxLength", "phone", "width"], outputs: ["valueChange", "inputFocus", "inputBlur", "inputKeydown", "inputKeyup", "leadingDropdownChange", "leadingDropdownValueChange", "trailingDropdownChange", "trailingDropdownValueChange", "helpIconClick", "phoneChange", "validChange", "leadingIconClick"] }, { kind: "component", type: ZenButtonComponent, selector: "zen-button", inputs: ["variant", "buttonType", "icon", "iconRotated", "size", "destructive", "disabled", "fullWidth", "type"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
4260
+ 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 }); }
4151
4261
  }
4152
4262
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFilterComponent, decorators: [{
4153
4263
  type: Component,
@@ -5044,11 +5154,11 @@ class ZenduSelectComponent {
5044
5154
  this.isSelectedAll = this.options.every(opt => opt.checked);
5045
5155
  }
5046
5156
  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 }); }
5047
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduSelectComponent, isStandalone: false, selector: "zen-select", inputs: { selectModel: "selectModel", options: "options", label: "label", supportingText: "supportingText", hintText: "hintText", placeholder: "placeholder", leadingType: "leadingType", leadingIcon: "leadingIcon", leadingAvatar: "leadingAvatar", leadingDotColor: "leadingDotColor", displayProp: "displayProp", idProp: "idProp", hasSearch: "hasSearch", isMultiselect: "isMultiselect", multiselect: "multiselect", hideSelectAll: "hideSelectAll", hideTreeSearch: "hideTreeSearch", required: "required", disabled: "disabled", error: "error", errorMessage: "errorMessage", destructive: "destructive", size: "size", returnOption: "returnOption", isTruncate: "isTruncate", enableAddNewOption: "enableAddNewOption", showDefaultAddOption: "showDefaultAddOption", newOptionText: "newOptionText", enableRemoveOption: "enableRemoveOption", removeOptionText: "removeOptionText", isLazyLoading: "isLazyLoading", lazyLoader: "lazyLoader", preferredOpenDirection: "preferredOpenDirection" }, outputs: { selectModelChange: "selectModelChange", addNewOption: "addNewOption", removeOption: "removeOption", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ZenduSelectOptionDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ZenduSelectValueDirective, descendants: true }, { propertyName: "buttonTemplate", first: true, predicate: ZenduSelectButtonDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"getStateClasses()\">\n <!-- Label -->\n @if (label) {\n <label class=\"app-select-label text text-sm text-weight-medium\"\n [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n {{ label | translate }}\n @if (required) {\n <span class=\"required-indicator\">*</span>\n }\n </label>\n }\n\n <!-- Select Input -->\n <div class=\"app-select-wrapper\">\n <!-- Custom Trigger Template (overrides built-in trigger) -->\n @if (buttonTemplate) {\n <div\n class=\"app-select-custom-trigger\"\n (click)=\"toggleDropdown()\">\n <ng-template [ngTemplateOutlet]=\"buttonTemplate.template\"\n [ngTemplateOutletContext]=\"{ isOpen: isOpen, selected: getSelectedOption(), display: selectedDisplay, disabled: disabled }\">\n </ng-template>\n </div>\n }\n\n <!-- Built-in Trigger (when no custom button template provided) -->\n @if (!buttonTemplate) {\n @switch (leadingType) {\n <!-- Default Select (no leading element) -->\n @case ('default') {\n <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n }\n <!-- Icon Leading Select -->\n @case ('icon') {\n <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n }\n <!-- Avatar Leading Select -->\n @case ('avatar') {\n <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n }\n <!-- Dot Leading Select -->\n @case ('dot') {\n <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n }\n <!-- Search Input Select -->\n @case ('search') {\n <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n }\n }\n }\n\n <!-- Dropdown Menu -->\n @if (isOpen) {\n <div class=\"app-select-dropdown\"\n [ngClass]=\"getDropdownDirectionClass()\"\n >\n <!-- Tree Mode: embed zen-groups inline -->\n @if (isTreeMode && isMultiselect) {\n <zen-groups [inline]=\"true\"\n [dataSource]=\"$any(options)\"\n [filteredDataSource]=\"treeFilteredDataSource\"\n [hideSelectAll]=\"hideSelectAll\"\n [hideSearch]=\"hideTreeSearch\"\n [idProp]=\"idProp\"\n [displayProp]=\"displayProp\"\n [(isSelectedAll)]=\"isSelectedAll\"\n (isSelectedAllChange)=\"onTreeSelectAllChange($event)\"\n (checkedChange)=\"onTreeCheckedChange($event)\">\n </zen-groups>\n } @else {\n <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n @if (leadingType !== 'search' && hasSearch && !disabled) {\n <div class=\"app-select-search\">\n <zen-icon [name]=\"'search'\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n <input type=\"text\"\n [(ngModel)]=\"searchText\"\n (ngModelChange)=\"onSearchChange()\"\n (keydown.enter)=\"onSearchEnter($event)\"\n placeholder=\"Search\"\n class=\"app-select-search-input\">\n @if (searchText) {\n <zen-icon\n class=\"app-select-search-clear\"\n [name]=\"'x'\"\n [customColor]=\"'#667085'\"\n (click)=\"clearSearch(); $event.stopPropagation()\">\n </zen-icon>\n }\n </div>\n }\n <!-- Options List -->\n <div class=\"app-select-options\" (scroll)=\"onOptionsScroll($event)\">\n <!-- Select All Option for Multiselect -->\n @if (isMultiselect && !hideSelectAll && !isLazyLoading && filteredOptions.length > 0) {\n <button\n class=\"app-select-option select-all\"\n (click)=\"toggleSelectAll()\">\n <zen-checkbox class=\"app-select-checkbox\"\n [checked]=\"isAllSelected()\"\n [disableValueChange]=\"true\"\n [label]=\"''\"\n size=\"sm\">\n </zen-checkbox>\n <span class=\"app-select-option-text\">\n Select All\n </span>\n </button>\n }\n <!-- Add New Option -->\n @if (enableAddNewOption && (showDefaultAddOption || searchText)) {\n <button\n class=\"app-select-option add-new-option\"\n (click)=\"handleAddNewOption(); $event.stopPropagation()\">\n <zen-icon [name]=\"'plus'\" [customColor]=\"'#136AB6'\"></zen-icon>\n <span class=\"app-select-option-text\">\n {{ (newOptionText || 'Add New Option') + (searchText ? ': \"' + searchText + '\"' : '') }}\n </span>\n </button>\n }\n <!-- Remove Option -->\n @if (enableRemoveOption) {\n <button\n class=\"app-select-option remove-option\"\n (click)=\"handleRemoveOption(); $event.stopPropagation()\">\n <zen-icon [name]=\"'user-x'\" [customColor]=\"'#344054'\"></zen-icon>\n <span class=\"app-select-option-text\">\n {{ removeOptionText || 'Remove' }}\n </span>\n </button>\n }\n @if (filteredOptions.length === 0 && !enableAddNewOption && !isLoadingNow) {\n <div class=\"app-select-no-options\">\n No matching options found\n </div>\n }\n @for (option of filteredOptions; track option) {\n <button\n class=\"app-select-option\"\n [class.selected]=\"isSelected(option)\"\n (click)=\"selectOption(option)\">\n <!-- Checkbox for Multiselect -->\n @if (isMultiselect) {\n <zen-checkbox class=\"app-select-checkbox\"\n [checked]=\"isSelected(option)\"\n [disableValueChange]=\"true\"\n [label]=\"''\"\n size=\"sm\">\n </zen-checkbox>\n }\n <!-- Option Leading Element -->\n @if (leadingType !== 'default') {\n <div class=\"app-select-option-leading\">\n @switch (leadingType) {\n @case ('icon') {\n <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n }\n @case ('avatar') {\n <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n }\n @case ('dot') {\n <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n }\n }\n </div>\n }\n <!-- Option Text -->\n <div class=\"app-select-option-text-wrapper\">\n <!-- Use custom template if provided -->\n @if (!isMultiselect && optionTemplate) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: option }\">\n </ng-template>\n } @else {\n <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n {{ getName(option) | translate }}\n </span>\n @if (option.secondaryText) {\n <span class=\"app-select-option-secondary\">\n {{ option.secondaryText }}\n </span>\n }\n }\n </div>\n <!-- Check Icon for Single Select -->\n @if (!isMultiselect && isSelected(option)) {\n <zen-icon\n class=\"app-select-option-check\"\n [name]=\"'check'\"\n [customColor]=\"'#136AB6'\">\n </zen-icon>\n }\n </button>\n }\n <!-- Lazy loading spinner -->\n @if (isLazyLoading && isLoadingNow) {\n <div class=\"app-select-loading\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n }\n </div>\n }\n <!-- Flat List Mode (default) -->\n </div>\n }\n </div>\n\n <!-- Hint text / Error message -->\n @if ((destructive && errorMessage) || hintText) {\n <div\n class=\"app-select-hint text text-sm text-weight-regular\"\n [ngClass]=\"{'destructive': destructive}\">\n @if (destructive) {\n <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n }\n <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n </div>\n }\n</div>\n\n<!-- ============================================= -->\n<!-- MAIN SELECT INPUT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Default Select Template (No Leading Element) -->\n<ng-template #defaultSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Icon Select Template -->\n<ng-template #iconSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: getSelectedOption(), icon: leadingIcon }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Avatar Select Template -->\n<ng-template #avatarSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: getSelectedOption(), avatar: leadingAvatar }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Dot Select Template -->\n<ng-template #dotSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: getSelectedOption(), color: leadingDotColor }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Search Input Template -->\n<ng-template #searchInputTemplate>\n <div class=\"app-select-input app-select-search-input\"\n [class.focused]=\"isOpen || searchFocused\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <!-- Search Icon -->\n <zen-icon [name]=\"'search'\"\n [customColor]=\"disabled ? '#9CA3AF' : '#667085'\">\n </zen-icon>\n\n <!-- Search Input Field -->\n <input type=\"text\"\n class=\"app-select-search-field\"\n [(ngModel)]=\"searchInputValue\"\n (ngModelChange)=\"onSearchInputChange()\"\n (keydown.enter)=\"onSearchEnter($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur($event)\"\n [placeholder]=\"selectedDisplay || placeholder\"\n [disabled]=\"disabled\">\n </div>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- SHARED COMPONENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Select Value Display -->\n<ng-template #selectValueDisplay>\n <div class=\"app-select-value-wrapper\">\n @if (valueTemplate && !isModelEmpty()) {\n <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n </ng-template>\n } @else {\n <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n {{ selectedDisplay || placeholder | translate }}\n </span>\n @if (getSelectedSecondaryText() && !isModelEmpty()) {\n <span class=\"app-select-secondary\">\n {{ getSelectedSecondaryText() }}\n </span>\n }\n }\n </div>\n</ng-template>\n\n<!-- Dropdown Arrow -->\n<ng-template #dropdownArrow>\n <zen-icon class=\"app-select-arrow\"\n [class.rotated]=\"isOpen\"\n [name]=\"'chevron-down'\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- LEADING ELEMENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Icon Leading Element (with smart resolution) -->\n<ng-template #iconLeadingElement let-option=\"option\" let-icon=\"icon\">\n @if (icon || option?.icon || option?.iconName) {\n @if (getIconPath(option, icon); as iconPath) {\n <!-- If icon contains / or . treat as SVG path -->\n @if ((icon && (icon.includes('/') || icon.includes('.'))) ||\n (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.')))) {\n <!-- Use img tag for Excel to preserve colors -->\n @if (iconPath.includes('excel')) {\n <img\n [src]=\"iconPath\"\n alt=\"\"\n style=\"width: 20px; height: 20px;\">\n }\n <!-- Use zen-icon with src for other SVG files -->\n @if (!iconPath.includes('excel')) {\n <zen-icon\n [src]=\"iconPath\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n }\n }\n <!-- Otherwise treat as Material icon name or special cases -->\n @if (!((icon && (icon.includes('/') || icon.includes('.'))) ||\n (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.'))))) {\n <!-- Special case for Excel icon - use img to preserve colors -->\n @if ((icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')) {\n <img\n src=\"assets/ng-zenduit/icons/excel.svg\"\n alt=\"Excel\"\n style=\"width: 20px; height: 20px;\">\n }\n <!-- Material icon names -->\n @if ((icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')) {\n <zen-icon\n [name]=\"icon || option?.icon || option?.iconName\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n }\n }\n }\n }\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n @if (avatar || option?.avatar) {\n <div class=\"app-select-avatar\" >\n <img [src]=\"avatar || option?.avatar\" alt=\"\">\n </div>\n }\n</ng-template>\n\n<!-- Dot Leading Element -->\n<ng-template #dotLeadingElement let-option=\"option\" let-color=\"color\">\n <div class=\"app-select-dot\"\n [style.background-color]=\"color || option?.dotColor || '#10B981'\">\n </div>\n</ng-template>", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}.app-select-container{width:100%;position:relative}.app-select-label{display:flex;align-items:center;gap:4px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.app-select-wrapper{position:relative;width:100%}.app-select-custom-trigger{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;color:#101828;text-align:left;cursor:pointer;transition:all .2s ease}.app-select-input.app-select-search-input{cursor:text}.app-select-input.app-select-search-input .app-select-search-field{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;background:transparent;color:#101828;min-width:0}.app-select-input.app-select-search-input .app-select-search-field::placeholder{color:#667085}.app-select-input.app-select-search-input .app-select-search-field:disabled{cursor:not-allowed;color:#667085}.app-select-input:hover:not(:disabled){border-color:#98a2b3}.app-select-input.focused,.app-select-input:focus{outline:none;border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.app-select-input:disabled{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.app-select-container.error .app-select-input:hover:not(:disabled){border-color:#f97066}.app-select-container.error .app-select-input:focus{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-leading,.app-select-option-leading{display:flex;align-items:center;flex-shrink:0}.app-select-avatar,.app-select-option-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}.app-select-avatar img,.app-select-option-avatar img{width:100%;height:100%;object-fit:cover}.app-select-avatar .avatar-placeholder,.app-select-option-avatar .avatar-placeholder{width:100%;height:100%;background:#f2f4f7;color:#667085;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0;font-weight:600;font-style:normal}.app-select-dot,.app-select-option-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.app-select-value-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-value-wrapper .app-select-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085}.app-select-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-value.placeholder{color:#667085}.app-select-secondary,.app-select-option-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085;white-space:nowrap;flex-shrink:0}.app-select-arrow{margin-left:auto;flex-shrink:0;transition:transform .2s ease}.app-select-arrow.rotated{transform:rotate(180deg)}.app-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-dropdown.dropdown-up{top:auto;bottom:calc(100% + 4px)}.app-select-dropdown.dropdown-down,.app-select-dropdown.dropdown-auto{top:calc(100% + 4px);bottom:auto}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search .app-select-search-input{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;color:#101828}.app-select-search .app-select-search-input::placeholder{color:#667085}.app-select-search .app-select-search-clear{cursor:pointer}.app-select-loading{display:flex;justify-content:center;align-items:center;padding:8px 0}.app-select-options{flex:1;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#f9fafb}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.size-sm .app-select-option{padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-secondary,.app-select-container.disabled .app-select-search-field{color:#667085}.app-select-container.disabled .app-select-arrow,.app-select-container.disabled .app-select-leading zen-icon,.app-select-container.disabled .app-select-search-input zen-icon,.app-select-container.disabled .app-select-dot{opacity:.6}.app-select-container.disabled .app-select-input,.app-select-container.disabled .app-select-search-input{background:#f9fafb;cursor:not-allowed}.app-select-hint{display:flex;align-items:center;gap:4px;margin-top:6px;color:#667085}.app-select-hint .hint-icon{font-size:16px;color:#f04438}.app-select-hint.destructive{color:#f04438}.app-select-option.select-all{border-bottom:1px solid #F2F4F7;margin-bottom:4px;padding-bottom:14px}.app-select-option.add-new-option{color:#136ab6;font-weight:500}.app-select-option.add-new-option:hover{background:#eff8ff}.app-select-option.remove-option{background:#f9fafb;color:#344054}.app-select-option.remove-option .app-select-option-text{color:#344054}.app-select-spinner{display:flex;justify-content:center;padding:16px}.app-select-spinner .spinner-small{width:20px;height:20px;border:2px solid #F2F4F7;border-top-color:#136ab6;border-radius:50%;animation:spin .6s linear infinite}.app-select-load-more{padding:8px 14px}.app-select-load-more .app-select-load-more-btn{width:100%;padding:8px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:6px;color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0;font-weight:500;font-style:normal;cursor:pointer;transition:all .15s ease}.app-select-load-more .app-select-load-more-btn:hover{background:#f9fafb;border-color:#667085}@keyframes spin{to{transform:rotate(360deg)}}.app-select-dropdown ::ng-deep zen-groups .zen-groups-inline{display:flex;flex-direction:column;max-height:310px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree{flex:1;overflow-y:auto;padding:4px 14px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar{width:6px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-track{background:transparent}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox{padding:10px 0;font-weight:400;font-size:14px;line-height:20px;color:#344054}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox:hover{background:#f9fafb}.app-select-dropdown ::ng-deep zen-groups .select-all{border-bottom:none;margin-bottom:0;font-weight:500}.app-select-dropdown ::ng-deep zen-groups .tree-item-badge{background:#f1f7fe;color:#105494}.app-select-dropdown ::ng-deep zen-groups .checkbox-component .app-checkbox-label{font-weight:400;color:#344054}.app-select-dropdown ::ng-deep zen-groups .zen-groups-no-results{padding:32px 0;text-align:center;color:#667085}@media(max-width:640px){.app-select-dropdown{position:fixed;inset:auto 0 0;max-height:70vh;border-radius:16px 16px 0 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
5157
+ 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 }); }
5048
5158
  }
5049
5159
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectComponent, decorators: [{
5050
5160
  type: Component,
5051
- args: [{ selector: 'zen-select', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div [class]=\"getStateClasses()\">\n <!-- Label -->\n @if (label) {\n <label class=\"app-select-label text text-sm text-weight-medium\"\n [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n {{ label | translate }}\n @if (required) {\n <span class=\"required-indicator\">*</span>\n }\n </label>\n }\n\n <!-- Select Input -->\n <div class=\"app-select-wrapper\">\n <!-- Custom Trigger Template (overrides built-in trigger) -->\n @if (buttonTemplate) {\n <div\n class=\"app-select-custom-trigger\"\n (click)=\"toggleDropdown()\">\n <ng-template [ngTemplateOutlet]=\"buttonTemplate.template\"\n [ngTemplateOutletContext]=\"{ isOpen: isOpen, selected: getSelectedOption(), display: selectedDisplay, disabled: disabled }\">\n </ng-template>\n </div>\n }\n\n <!-- Built-in Trigger (when no custom button template provided) -->\n @if (!buttonTemplate) {\n @switch (leadingType) {\n <!-- Default Select (no leading element) -->\n @case ('default') {\n <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n }\n <!-- Icon Leading Select -->\n @case ('icon') {\n <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n }\n <!-- Avatar Leading Select -->\n @case ('avatar') {\n <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n }\n <!-- Dot Leading Select -->\n @case ('dot') {\n <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n }\n <!-- Search Input Select -->\n @case ('search') {\n <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n }\n }\n }\n\n <!-- Dropdown Menu -->\n @if (isOpen) {\n <div class=\"app-select-dropdown\"\n [ngClass]=\"getDropdownDirectionClass()\"\n >\n <!-- Tree Mode: embed zen-groups inline -->\n @if (isTreeMode && isMultiselect) {\n <zen-groups [inline]=\"true\"\n [dataSource]=\"$any(options)\"\n [filteredDataSource]=\"treeFilteredDataSource\"\n [hideSelectAll]=\"hideSelectAll\"\n [hideSearch]=\"hideTreeSearch\"\n [idProp]=\"idProp\"\n [displayProp]=\"displayProp\"\n [(isSelectedAll)]=\"isSelectedAll\"\n (isSelectedAllChange)=\"onTreeSelectAllChange($event)\"\n (checkedChange)=\"onTreeCheckedChange($event)\">\n </zen-groups>\n } @else {\n <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n @if (leadingType !== 'search' && hasSearch && !disabled) {\n <div class=\"app-select-search\">\n <zen-icon [name]=\"'search'\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n <input type=\"text\"\n [(ngModel)]=\"searchText\"\n (ngModelChange)=\"onSearchChange()\"\n (keydown.enter)=\"onSearchEnter($event)\"\n placeholder=\"Search\"\n class=\"app-select-search-input\">\n @if (searchText) {\n <zen-icon\n class=\"app-select-search-clear\"\n [name]=\"'x'\"\n [customColor]=\"'#667085'\"\n (click)=\"clearSearch(); $event.stopPropagation()\">\n </zen-icon>\n }\n </div>\n }\n <!-- Options List -->\n <div class=\"app-select-options\" (scroll)=\"onOptionsScroll($event)\">\n <!-- Select All Option for Multiselect -->\n @if (isMultiselect && !hideSelectAll && !isLazyLoading && filteredOptions.length > 0) {\n <button\n class=\"app-select-option select-all\"\n (click)=\"toggleSelectAll()\">\n <zen-checkbox class=\"app-select-checkbox\"\n [checked]=\"isAllSelected()\"\n [disableValueChange]=\"true\"\n [label]=\"''\"\n size=\"sm\">\n </zen-checkbox>\n <span class=\"app-select-option-text\">\n Select All\n </span>\n </button>\n }\n <!-- Add New Option -->\n @if (enableAddNewOption && (showDefaultAddOption || searchText)) {\n <button\n class=\"app-select-option add-new-option\"\n (click)=\"handleAddNewOption(); $event.stopPropagation()\">\n <zen-icon [name]=\"'plus'\" [customColor]=\"'#136AB6'\"></zen-icon>\n <span class=\"app-select-option-text\">\n {{ (newOptionText || 'Add New Option') + (searchText ? ': \"' + searchText + '\"' : '') }}\n </span>\n </button>\n }\n <!-- Remove Option -->\n @if (enableRemoveOption) {\n <button\n class=\"app-select-option remove-option\"\n (click)=\"handleRemoveOption(); $event.stopPropagation()\">\n <zen-icon [name]=\"'user-x'\" [customColor]=\"'#344054'\"></zen-icon>\n <span class=\"app-select-option-text\">\n {{ removeOptionText || 'Remove' }}\n </span>\n </button>\n }\n @if (filteredOptions.length === 0 && !enableAddNewOption && !isLoadingNow) {\n <div class=\"app-select-no-options\">\n No matching options found\n </div>\n }\n @for (option of filteredOptions; track option) {\n <button\n class=\"app-select-option\"\n [class.selected]=\"isSelected(option)\"\n (click)=\"selectOption(option)\">\n <!-- Checkbox for Multiselect -->\n @if (isMultiselect) {\n <zen-checkbox class=\"app-select-checkbox\"\n [checked]=\"isSelected(option)\"\n [disableValueChange]=\"true\"\n [label]=\"''\"\n size=\"sm\">\n </zen-checkbox>\n }\n <!-- Option Leading Element -->\n @if (leadingType !== 'default') {\n <div class=\"app-select-option-leading\">\n @switch (leadingType) {\n @case ('icon') {\n <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n }\n @case ('avatar') {\n <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n }\n @case ('dot') {\n <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n }\n }\n </div>\n }\n <!-- Option Text -->\n <div class=\"app-select-option-text-wrapper\">\n <!-- Use custom template if provided -->\n @if (!isMultiselect && optionTemplate) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: option }\">\n </ng-template>\n } @else {\n <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n {{ getName(option) | translate }}\n </span>\n @if (option.secondaryText) {\n <span class=\"app-select-option-secondary\">\n {{ option.secondaryText }}\n </span>\n }\n }\n </div>\n <!-- Check Icon for Single Select -->\n @if (!isMultiselect && isSelected(option)) {\n <zen-icon\n class=\"app-select-option-check\"\n [name]=\"'check'\"\n [customColor]=\"'#136AB6'\">\n </zen-icon>\n }\n </button>\n }\n <!-- Lazy loading spinner -->\n @if (isLazyLoading && isLoadingNow) {\n <div class=\"app-select-loading\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n }\n </div>\n }\n <!-- Flat List Mode (default) -->\n </div>\n }\n </div>\n\n <!-- Hint text / Error message -->\n @if ((destructive && errorMessage) || hintText) {\n <div\n class=\"app-select-hint text text-sm text-weight-regular\"\n [ngClass]=\"{'destructive': destructive}\">\n @if (destructive) {\n <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n }\n <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n </div>\n }\n</div>\n\n<!-- ============================================= -->\n<!-- MAIN SELECT INPUT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Default Select Template (No Leading Element) -->\n<ng-template #defaultSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Icon Select Template -->\n<ng-template #iconSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: getSelectedOption(), icon: leadingIcon }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Avatar Select Template -->\n<ng-template #avatarSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: getSelectedOption(), avatar: leadingAvatar }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Dot Select Template -->\n<ng-template #dotSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: getSelectedOption(), color: leadingDotColor }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Search Input Template -->\n<ng-template #searchInputTemplate>\n <div class=\"app-select-input app-select-search-input\"\n [class.focused]=\"isOpen || searchFocused\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <!-- Search Icon -->\n <zen-icon [name]=\"'search'\"\n [customColor]=\"disabled ? '#9CA3AF' : '#667085'\">\n </zen-icon>\n\n <!-- Search Input Field -->\n <input type=\"text\"\n class=\"app-select-search-field\"\n [(ngModel)]=\"searchInputValue\"\n (ngModelChange)=\"onSearchInputChange()\"\n (keydown.enter)=\"onSearchEnter($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur($event)\"\n [placeholder]=\"selectedDisplay || placeholder\"\n [disabled]=\"disabled\">\n </div>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- SHARED COMPONENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Select Value Display -->\n<ng-template #selectValueDisplay>\n <div class=\"app-select-value-wrapper\">\n @if (valueTemplate && !isModelEmpty()) {\n <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n </ng-template>\n } @else {\n <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n {{ selectedDisplay || placeholder | translate }}\n </span>\n @if (getSelectedSecondaryText() && !isModelEmpty()) {\n <span class=\"app-select-secondary\">\n {{ getSelectedSecondaryText() }}\n </span>\n }\n }\n </div>\n</ng-template>\n\n<!-- Dropdown Arrow -->\n<ng-template #dropdownArrow>\n <zen-icon class=\"app-select-arrow\"\n [class.rotated]=\"isOpen\"\n [name]=\"'chevron-down'\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- LEADING ELEMENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Icon Leading Element (with smart resolution) -->\n<ng-template #iconLeadingElement let-option=\"option\" let-icon=\"icon\">\n @if (icon || option?.icon || option?.iconName) {\n @if (getIconPath(option, icon); as iconPath) {\n <!-- If icon contains / or . treat as SVG path -->\n @if ((icon && (icon.includes('/') || icon.includes('.'))) ||\n (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.')))) {\n <!-- Use img tag for Excel to preserve colors -->\n @if (iconPath.includes('excel')) {\n <img\n [src]=\"iconPath\"\n alt=\"\"\n style=\"width: 20px; height: 20px;\">\n }\n <!-- Use zen-icon with src for other SVG files -->\n @if (!iconPath.includes('excel')) {\n <zen-icon\n [src]=\"iconPath\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n }\n }\n <!-- Otherwise treat as Material icon name or special cases -->\n @if (!((icon && (icon.includes('/') || icon.includes('.'))) ||\n (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.'))))) {\n <!-- Special case for Excel icon - use img to preserve colors -->\n @if ((icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')) {\n <img\n src=\"assets/ng-zenduit/icons/excel.svg\"\n alt=\"Excel\"\n style=\"width: 20px; height: 20px;\">\n }\n <!-- Material icon names -->\n @if ((icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')) {\n <zen-icon\n [name]=\"icon || option?.icon || option?.iconName\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n }\n }\n }\n }\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n @if (avatar || option?.avatar) {\n <div class=\"app-select-avatar\" >\n <img [src]=\"avatar || option?.avatar\" alt=\"\">\n </div>\n }\n</ng-template>\n\n<!-- Dot Leading Element -->\n<ng-template #dotLeadingElement let-option=\"option\" let-color=\"color\">\n <div class=\"app-select-dot\"\n [style.background-color]=\"color || option?.dotColor || '#10B981'\">\n </div>\n</ng-template>", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}.app-select-container{width:100%;position:relative}.app-select-label{display:flex;align-items:center;gap:4px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.app-select-wrapper{position:relative;width:100%}.app-select-custom-trigger{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;color:#101828;text-align:left;cursor:pointer;transition:all .2s ease}.app-select-input.app-select-search-input{cursor:text}.app-select-input.app-select-search-input .app-select-search-field{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;background:transparent;color:#101828;min-width:0}.app-select-input.app-select-search-input .app-select-search-field::placeholder{color:#667085}.app-select-input.app-select-search-input .app-select-search-field:disabled{cursor:not-allowed;color:#667085}.app-select-input:hover:not(:disabled){border-color:#98a2b3}.app-select-input.focused,.app-select-input:focus{outline:none;border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.app-select-input:disabled{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.app-select-container.error .app-select-input:hover:not(:disabled){border-color:#f97066}.app-select-container.error .app-select-input:focus{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-leading,.app-select-option-leading{display:flex;align-items:center;flex-shrink:0}.app-select-avatar,.app-select-option-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}.app-select-avatar img,.app-select-option-avatar img{width:100%;height:100%;object-fit:cover}.app-select-avatar .avatar-placeholder,.app-select-option-avatar .avatar-placeholder{width:100%;height:100%;background:#f2f4f7;color:#667085;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0;font-weight:600;font-style:normal}.app-select-dot,.app-select-option-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.app-select-value-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-value-wrapper .app-select-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085}.app-select-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-value.placeholder{color:#667085}.app-select-secondary,.app-select-option-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085;white-space:nowrap;flex-shrink:0}.app-select-arrow{margin-left:auto;flex-shrink:0;transition:transform .2s ease}.app-select-arrow.rotated{transform:rotate(180deg)}.app-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-dropdown.dropdown-up{top:auto;bottom:calc(100% + 4px)}.app-select-dropdown.dropdown-down,.app-select-dropdown.dropdown-auto{top:calc(100% + 4px);bottom:auto}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search .app-select-search-input{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;color:#101828}.app-select-search .app-select-search-input::placeholder{color:#667085}.app-select-search .app-select-search-clear{cursor:pointer}.app-select-loading{display:flex;justify-content:center;align-items:center;padding:8px 0}.app-select-options{flex:1;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#f9fafb}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.size-sm .app-select-option{padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-secondary,.app-select-container.disabled .app-select-search-field{color:#667085}.app-select-container.disabled .app-select-arrow,.app-select-container.disabled .app-select-leading zen-icon,.app-select-container.disabled .app-select-search-input zen-icon,.app-select-container.disabled .app-select-dot{opacity:.6}.app-select-container.disabled .app-select-input,.app-select-container.disabled .app-select-search-input{background:#f9fafb;cursor:not-allowed}.app-select-hint{display:flex;align-items:center;gap:4px;margin-top:6px;color:#667085}.app-select-hint .hint-icon{font-size:16px;color:#f04438}.app-select-hint.destructive{color:#f04438}.app-select-option.select-all{border-bottom:1px solid #F2F4F7;margin-bottom:4px;padding-bottom:14px}.app-select-option.add-new-option{color:#136ab6;font-weight:500}.app-select-option.add-new-option:hover{background:#eff8ff}.app-select-option.remove-option{background:#f9fafb;color:#344054}.app-select-option.remove-option .app-select-option-text{color:#344054}.app-select-spinner{display:flex;justify-content:center;padding:16px}.app-select-spinner .spinner-small{width:20px;height:20px;border:2px solid #F2F4F7;border-top-color:#136ab6;border-radius:50%;animation:spin .6s linear infinite}.app-select-load-more{padding:8px 14px}.app-select-load-more .app-select-load-more-btn{width:100%;padding:8px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:6px;color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0;font-weight:500;font-style:normal;cursor:pointer;transition:all .15s ease}.app-select-load-more .app-select-load-more-btn:hover{background:#f9fafb;border-color:#667085}@keyframes spin{to{transform:rotate(360deg)}}.app-select-dropdown ::ng-deep zen-groups .zen-groups-inline{display:flex;flex-direction:column;max-height:310px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree{flex:1;overflow-y:auto;padding:4px 14px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar{width:6px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-track{background:transparent}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox{padding:10px 0;font-weight:400;font-size:14px;line-height:20px;color:#344054}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox:hover{background:#f9fafb}.app-select-dropdown ::ng-deep zen-groups .select-all{border-bottom:none;margin-bottom:0;font-weight:500}.app-select-dropdown ::ng-deep zen-groups .tree-item-badge{background:#f1f7fe;color:#105494}.app-select-dropdown ::ng-deep zen-groups .checkbox-component .app-checkbox-label{font-weight:400;color:#344054}.app-select-dropdown ::ng-deep zen-groups .zen-groups-no-results{padding:32px 0;text-align:center;color:#667085}@media(max-width:640px){.app-select-dropdown{position:fixed;inset:auto 0 0;max-height:70vh;border-radius:16px 16px 0 0}}\n"] }]
5161
+ 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"] }]
5052
5162
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectModel: [{
5053
5163
  type: Input
5054
5164
  }], selectModelChange: [{
@@ -8061,12 +8171,12 @@ class ZenduTimepickerComponent {
8061
8171
  const m = this.formatNum(this.value.minutes);
8062
8172
  const s = this.formatNum(this.value.seconds);
8063
8173
  if (!this.showHours) {
8064
- return this.showSeconds ? `${m}.${s} ${this.value.period || 'AM'}` : `${m} ${this.value.period || 'AM'}`;
8174
+ return this.showSeconds ? `${m}:${s} ${this.value.period || 'AM'}` : `${m} ${this.value.period || 'AM'}`;
8065
8175
  }
8066
8176
  if (this.showSeconds) {
8067
- return `${h}.${m}.${s} ${this.value.period || 'AM'}`;
8177
+ return `${h}:${m}:${s} ${this.value.period || 'AM'}`;
8068
8178
  }
8069
- return `${h}.${m} ${this.value.period || 'AM'}`;
8179
+ return `${h}:${m} ${this.value.period || 'AM'}`;
8070
8180
  }
8071
8181
  // Duration mode
8072
8182
  const parts = [];