ng-zenduit 2.2.1 → 2.2.3

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 (4) hide show
  1. package/fesm2022/ng-zenduit.mjs +62 -7
  2. package/fesm2022/ng-zenduit.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/ng-zenduit.d.ts +13 -1
package/fesm2022/ng-zenduit.mjs CHANGED
@@ -2251,6 +2251,7 @@ class ZenButtonComponent {
2251
2251
  constructor() {
2252
2252
  this.variant = 'primary';
2253
2253
  this.buttonType = 'button';
2254
+ this.iconRotated = false;
2254
2255
  this.size = 'md';
2255
2256
  this.destructive = false;
2256
2257
  this.disabled = false;
@@ -2317,17 +2318,19 @@ class ZenButtonComponent {
2317
2318
  return this.icon || 'circle';
2318
2319
  }
2319
2320
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2320
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenButtonComponent, isStandalone: false, selector: "zen-button", inputs: { variant: "variant", buttonType: "buttonType", icon: "icon", size: "size", destructive: "destructive", disabled: "disabled", fullWidth: "fullWidth", type: "type" }, ngImport: i0, template: "<button\n [class]=\"buttonClasses\"\n [type]=\"type\"\n [disabled]=\"disabled\">\n\n <!-- Dot indicator -->\n @if (buttonType === 'button-dot') {\n <span class=\"button-dot\"></span>\n }\n\n <!-- Leading icon -->\n @if (buttonType === 'button-icon-leading' || isIconOnly) {\n <zen-icon\n [name]=\"getIconName()\"\n size=\"xs\"></zen-icon>\n }\n\n <!-- Button content -->\n @if (!isIconOnly) {\n <ng-content></ng-content>\n }\n\n <!-- Trailing icon -->\n @if (buttonType === 'button-icon-trailing') {\n <zen-icon\n [name]=\"getIconName()\"\n size=\"xs\"></zen-icon>\n }\n</button>", 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}}.button-2xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-2xl zen-icon{color:inherit;background-color:currentColor}.button-2xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-2xl:disabled{cursor:not-allowed}.button-2xl.full-width{width:100%;justify-content:center}.button-2xl.button-icon-only{padding:0;justify-content:center}.button-2xl{height:60px;padding:0 28px}.button-2xl.button-icon-only{width:60px;padding:0}.button-xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-xl zen-icon{color:inherit;background-color:currentColor}.button-xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-xl:disabled{cursor:not-allowed}.button-xl.full-width{width:100%;justify-content:center}.button-xl.button-icon-only{padding:0;justify-content:center}.button-xl{height:48px;padding:0 20px}.button-xl.button-icon-only{width:48px;padding:0}.button-lg{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-lg zen-icon{color:inherit;background-color:currentColor}.button-lg .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-lg:disabled{cursor:not-allowed}.button-lg.full-width{width:100%;justify-content:center}.button-lg.button-icon-only{padding:0;justify-content:center}.button-lg{height:44px;padding:0 18px}.button-lg.button-icon-only{width:44px;padding:0}.button-md{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-md zen-icon{color:inherit;background-color:currentColor}.button-md .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-md:disabled{cursor:not-allowed}.button-md.full-width{width:100%;justify-content:center}.button-md.button-icon-only{padding:0;justify-content:center}.button-md{height:40px;padding:0 16px}.button-md.button-icon-only{width:40px;padding:0}.button-sm{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-sm zen-icon{color:inherit;background-color:currentColor}.button-sm .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-sm:disabled{cursor:not-allowed}.button-sm.full-width{width:100%;justify-content:center}.button-sm.button-icon-only{padding:0;justify-content:center}.button-sm{height:36px;padding:0 14px}.button-sm.button-icon-only{width:36px;padding:0}.button-base{background:#136ab6;color:#fff;border:1px solid #136AB6;box-shadow:0 1px 2px #1018280d}.button-base:hover:not(:disabled){background:#105494;border-color:#105494}.button-base:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-base.destructive{background:#d92d20;border-color:#d92d20}.button-base.destructive:hover:not(:disabled){background:#b42318;border-color:#b42318}.button-base.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-base.destructive:disabled{background:#fecdca;border-color:#fecdca;color:#fff}.button-base:disabled{background:#c0ddf7;border-color:#c0ddf7;color:#fff}.button-secondary-gray{background:#fff;color:#344054;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d}.button-secondary-gray:hover:not(:disabled){background:#f9fafb;color:#1d2939}.button-secondary-gray:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.button-secondary-gray.destructive{color:#b42318}.button-secondary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-secondary-gray.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-gray.destructive:disabled{background:#fff;border-color:#eaecf0;color:#fda29b}.button-secondary-gray:disabled{background:#fff;border-color:#eaecf0;color:#d0d5dd}.button-secondary-color{background:#f1f7fe;color:#105494;border:1px solid #F1F7FE;box-shadow:0 1px 2px #1018280d}.button-secondary-color:hover:not(:disabled){background:#e3eefb;border-color:#e3eefb}.button-secondary-color:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-secondary-color.destructive{background:#fef3f2;color:#b42318;border-color:#fef3f2}.button-secondary-color.destructive:hover:not(:disabled){background:#fee4e2;border-color:#fee4e2}.button-secondary-color.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-color.destructive:disabled{background:#fffbfa;border-color:#fffbfa;color:#fda29b}.button-secondary-color:disabled{background:#fafdff;border-color:#fafdff;color:#88c1f1}.button-tertiary-gray{background:transparent;color:#667085;border:1px solid transparent}.button-tertiary-gray:hover:not(:disabled){background:#f9fafb;color:#475467}.button-tertiary-gray:focus:not(:disabled){outline:none;background:#f9fafb}.button-tertiary-gray.destructive{color:#b42318}.button-tertiary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-gray.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-gray.destructive:disabled{color:#fda29b}.button-tertiary-gray:disabled{color:#d0d5dd}.button-tertiary-color{background:transparent;color:#105494;border:1px solid transparent}.button-tertiary-color:hover:not(:disabled){background:#f1f7fe}.button-tertiary-color:focus:not(:disabled){outline:none;background:#f1f7fe}.button-tertiary-color.destructive{color:#b42318}.button-tertiary-color.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-color.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-color.destructive:disabled{color:#fda29b}.button-tertiary-color:disabled{color:#d0d5dd}.button-link-gray{background:transparent;color:#475467;border:none;text-decoration:none}.button-link-gray:hover:not(:disabled){color:#344054}.button-link-gray:focus:not(:disabled){outline:none}.button-link-gray.destructive{color:#b42318}.button-link-gray.destructive:hover:not(:disabled){color:#912018}.button-link-gray.destructive:disabled{color:#fda29b}.button-link-gray:disabled{color:#d0d5dd}.button-link-color{background:transparent;color:#105494;border:none;text-decoration:none}.button-link-color:hover:not(:disabled){color:#12497a}.button-link-color:focus:not(:disabled){outline:none}.button-link-color.destructive{color:#b42318}.button-link-color.destructive:hover:not(:disabled){color:#912018}.button-link-color.destructive:disabled{color:#fda29b}.button-link-color:disabled{color:#d0d5dd}\n"], dependencies: [{ kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
2321
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenButtonComponent, isStandalone: false, selector: "zen-button", inputs: { variant: "variant", buttonType: "buttonType", icon: "icon", iconRotated: "iconRotated", size: "size", destructive: "destructive", disabled: "disabled", fullWidth: "fullWidth", type: "type" }, ngImport: i0, template: "<button\n [class]=\"buttonClasses\"\n [type]=\"type\"\n [disabled]=\"disabled\">\n\n <!-- Dot indicator -->\n @if (buttonType === 'button-dot') {\n <span class=\"button-dot\"></span>\n }\n\n <!-- Leading icon -->\n @if (buttonType === 'button-icon-leading' || isIconOnly) {\n <zen-icon\n [name]=\"getIconName()\"\n [class.rotated]=\"iconRotated\"\n size=\"xs\"></zen-icon>\n }\n\n <!-- Button content -->\n @if (!isIconOnly) {\n <ng-content></ng-content>\n }\n\n <!-- Trailing icon -->\n @if (buttonType === 'button-icon-trailing') {\n <zen-icon\n [name]=\"getIconName()\"\n [class.rotated]=\"iconRotated\"\n size=\"xs\"></zen-icon>\n }\n</button>", 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}}.button-2xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-2xl zen-icon{color:inherit;background-color:currentColor;width:24px;height:24px}.button-2xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-2xl:disabled{cursor:not-allowed}.button-2xl.full-width{width:100%;justify-content:center}.button-2xl.button-icon-only{padding:0;justify-content:center}.button-2xl{height:60px;padding:0 28px}.button-2xl.button-icon-only{width:60px;padding:0}.button-xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-xl zen-icon{color:inherit;background-color:currentColor;width:24px;height:24px}.button-xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-xl:disabled{cursor:not-allowed}.button-xl.full-width{width:100%;justify-content:center}.button-xl.button-icon-only{padding:0;justify-content:center}.button-xl{height:48px;padding:0 20px}.button-xl.button-icon-only{width:48px;padding:0}.button-lg{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-lg zen-icon{color:inherit;background-color:currentColor;width:20px;height:20px}.button-lg .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-lg:disabled{cursor:not-allowed}.button-lg.full-width{width:100%;justify-content:center}.button-lg.button-icon-only{padding:0;justify-content:center}.button-lg{height:44px;padding:0 18px}.button-lg.button-icon-only{width:44px;padding:0}.button-md{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-md zen-icon{color:inherit;background-color:currentColor;width:20px;height:20px}.button-md .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-md:disabled{cursor:not-allowed}.button-md.full-width{width:100%;justify-content:center}.button-md.button-icon-only{padding:0;justify-content:center}.button-md{height:40px;padding:0 16px}.button-md.button-icon-only{width:40px;padding:0}.button-sm{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-sm zen-icon{color:inherit;background-color:currentColor;width:16px;height:16px}.button-sm .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-sm:disabled{cursor:not-allowed}.button-sm.full-width{width:100%;justify-content:center}.button-sm.button-icon-only{padding:0;justify-content:center}.button-sm{height:36px;padding:0 14px}.button-sm.button-icon-only{width:36px;padding:0}.button-base{background:#136ab6;color:#fff;border:1px solid #136AB6;box-shadow:0 1px 2px #1018280d}.button-base:hover:not(:disabled){background:#105494;border-color:#105494}.button-base:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-base.destructive{background:#d92d20;border-color:#d92d20}.button-base.destructive:hover:not(:disabled){background:#b42318;border-color:#b42318}.button-base.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-base.destructive:disabled{background:#fecdca;border-color:#fecdca;color:#fff}.button-base:disabled{background:#c0ddf7;border-color:#c0ddf7;color:#fff}.button-secondary-gray{background:#fff;color:#344054;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d}.button-secondary-gray:hover:not(:disabled){background:#f9fafb;color:#1d2939}.button-secondary-gray:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.button-secondary-gray.destructive{color:#b42318}.button-secondary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-secondary-gray.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-gray.destructive:disabled{background:#fff;border-color:#eaecf0;color:#fda29b}.button-secondary-gray:disabled{background:#fff;border-color:#eaecf0;color:#d0d5dd}.button-secondary-color{background:#f1f7fe;color:#105494;border:1px solid #F1F7FE;box-shadow:0 1px 2px #1018280d}.button-secondary-color:hover:not(:disabled){background:#e3eefb;border-color:#e3eefb}.button-secondary-color:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-secondary-color.destructive{background:#fef3f2;color:#b42318;border-color:#fef3f2}.button-secondary-color.destructive:hover:not(:disabled){background:#fee4e2;border-color:#fee4e2}.button-secondary-color.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-color.destructive:disabled{background:#fffbfa;border-color:#fffbfa;color:#fda29b}.button-secondary-color:disabled{background:#fafdff;border-color:#fafdff;color:#88c1f1}.button-tertiary-gray{background:transparent;color:#667085;border:1px solid transparent}.button-tertiary-gray:hover:not(:disabled){background:#f9fafb;color:#475467}.button-tertiary-gray:focus:not(:disabled){outline:none;background:#f9fafb}.button-tertiary-gray.destructive{color:#b42318}.button-tertiary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-gray.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-gray.destructive:disabled{color:#fda29b}.button-tertiary-gray:disabled{color:#d0d5dd}.button-tertiary-color{background:transparent;color:#105494;border:1px solid transparent}.button-tertiary-color:hover:not(:disabled){background:#f1f7fe}.button-tertiary-color:focus:not(:disabled){outline:none;background:#f1f7fe}.button-tertiary-color.destructive{color:#b42318}.button-tertiary-color.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-color.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-color.destructive:disabled{color:#fda29b}.button-tertiary-color:disabled{color:#d0d5dd}.button-link-gray{background:transparent;color:#475467;border:none;text-decoration:none}.button-link-gray:hover:not(:disabled){color:#344054}.button-link-gray:focus:not(:disabled){outline:none}.button-link-gray.destructive{color:#b42318}.button-link-gray.destructive:hover:not(:disabled){color:#912018}.button-link-gray.destructive:disabled{color:#fda29b}.button-link-gray:disabled{color:#d0d5dd}.button-link-color{background:transparent;color:#105494;border:none;text-decoration:none}.button-link-color:hover:not(:disabled){color:#12497a}.button-link-color:focus:not(:disabled){outline:none}.button-link-color.destructive{color:#b42318}.button-link-color.destructive:hover:not(:disabled){color:#912018}.button-link-color.destructive:disabled{color:#fda29b}.button-link-color:disabled{color:#d0d5dd}zen-icon{transition:transform .2s ease}zen-icon.rotated{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
2321
2322
  }
2322
2323
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenButtonComponent, decorators: [{
2323
2324
  type: Component,
2324
- args: [{ selector: 'zen-button', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<button\n [class]=\"buttonClasses\"\n [type]=\"type\"\n [disabled]=\"disabled\">\n\n <!-- Dot indicator -->\n @if (buttonType === 'button-dot') {\n <span class=\"button-dot\"></span>\n }\n\n <!-- Leading icon -->\n @if (buttonType === 'button-icon-leading' || isIconOnly) {\n <zen-icon\n [name]=\"getIconName()\"\n size=\"xs\"></zen-icon>\n }\n\n <!-- Button content -->\n @if (!isIconOnly) {\n <ng-content></ng-content>\n }\n\n <!-- Trailing icon -->\n @if (buttonType === 'button-icon-trailing') {\n <zen-icon\n [name]=\"getIconName()\"\n size=\"xs\"></zen-icon>\n }\n</button>", 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}}.button-2xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-2xl zen-icon{color:inherit;background-color:currentColor}.button-2xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-2xl:disabled{cursor:not-allowed}.button-2xl.full-width{width:100%;justify-content:center}.button-2xl.button-icon-only{padding:0;justify-content:center}.button-2xl{height:60px;padding:0 28px}.button-2xl.button-icon-only{width:60px;padding:0}.button-xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-xl zen-icon{color:inherit;background-color:currentColor}.button-xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-xl:disabled{cursor:not-allowed}.button-xl.full-width{width:100%;justify-content:center}.button-xl.button-icon-only{padding:0;justify-content:center}.button-xl{height:48px;padding:0 20px}.button-xl.button-icon-only{width:48px;padding:0}.button-lg{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-lg zen-icon{color:inherit;background-color:currentColor}.button-lg .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-lg:disabled{cursor:not-allowed}.button-lg.full-width{width:100%;justify-content:center}.button-lg.button-icon-only{padding:0;justify-content:center}.button-lg{height:44px;padding:0 18px}.button-lg.button-icon-only{width:44px;padding:0}.button-md{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-md zen-icon{color:inherit;background-color:currentColor}.button-md .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-md:disabled{cursor:not-allowed}.button-md.full-width{width:100%;justify-content:center}.button-md.button-icon-only{padding:0;justify-content:center}.button-md{height:40px;padding:0 16px}.button-md.button-icon-only{width:40px;padding:0}.button-sm{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-sm zen-icon{color:inherit;background-color:currentColor}.button-sm .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-sm:disabled{cursor:not-allowed}.button-sm.full-width{width:100%;justify-content:center}.button-sm.button-icon-only{padding:0;justify-content:center}.button-sm{height:36px;padding:0 14px}.button-sm.button-icon-only{width:36px;padding:0}.button-base{background:#136ab6;color:#fff;border:1px solid #136AB6;box-shadow:0 1px 2px #1018280d}.button-base:hover:not(:disabled){background:#105494;border-color:#105494}.button-base:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-base.destructive{background:#d92d20;border-color:#d92d20}.button-base.destructive:hover:not(:disabled){background:#b42318;border-color:#b42318}.button-base.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-base.destructive:disabled{background:#fecdca;border-color:#fecdca;color:#fff}.button-base:disabled{background:#c0ddf7;border-color:#c0ddf7;color:#fff}.button-secondary-gray{background:#fff;color:#344054;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d}.button-secondary-gray:hover:not(:disabled){background:#f9fafb;color:#1d2939}.button-secondary-gray:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.button-secondary-gray.destructive{color:#b42318}.button-secondary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-secondary-gray.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-gray.destructive:disabled{background:#fff;border-color:#eaecf0;color:#fda29b}.button-secondary-gray:disabled{background:#fff;border-color:#eaecf0;color:#d0d5dd}.button-secondary-color{background:#f1f7fe;color:#105494;border:1px solid #F1F7FE;box-shadow:0 1px 2px #1018280d}.button-secondary-color:hover:not(:disabled){background:#e3eefb;border-color:#e3eefb}.button-secondary-color:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-secondary-color.destructive{background:#fef3f2;color:#b42318;border-color:#fef3f2}.button-secondary-color.destructive:hover:not(:disabled){background:#fee4e2;border-color:#fee4e2}.button-secondary-color.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-color.destructive:disabled{background:#fffbfa;border-color:#fffbfa;color:#fda29b}.button-secondary-color:disabled{background:#fafdff;border-color:#fafdff;color:#88c1f1}.button-tertiary-gray{background:transparent;color:#667085;border:1px solid transparent}.button-tertiary-gray:hover:not(:disabled){background:#f9fafb;color:#475467}.button-tertiary-gray:focus:not(:disabled){outline:none;background:#f9fafb}.button-tertiary-gray.destructive{color:#b42318}.button-tertiary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-gray.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-gray.destructive:disabled{color:#fda29b}.button-tertiary-gray:disabled{color:#d0d5dd}.button-tertiary-color{background:transparent;color:#105494;border:1px solid transparent}.button-tertiary-color:hover:not(:disabled){background:#f1f7fe}.button-tertiary-color:focus:not(:disabled){outline:none;background:#f1f7fe}.button-tertiary-color.destructive{color:#b42318}.button-tertiary-color.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-color.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-color.destructive:disabled{color:#fda29b}.button-tertiary-color:disabled{color:#d0d5dd}.button-link-gray{background:transparent;color:#475467;border:none;text-decoration:none}.button-link-gray:hover:not(:disabled){color:#344054}.button-link-gray:focus:not(:disabled){outline:none}.button-link-gray.destructive{color:#b42318}.button-link-gray.destructive:hover:not(:disabled){color:#912018}.button-link-gray.destructive:disabled{color:#fda29b}.button-link-gray:disabled{color:#d0d5dd}.button-link-color{background:transparent;color:#105494;border:none;text-decoration:none}.button-link-color:hover:not(:disabled){color:#12497a}.button-link-color:focus:not(:disabled){outline:none}.button-link-color.destructive{color:#b42318}.button-link-color.destructive:hover:not(:disabled){color:#912018}.button-link-color.destructive:disabled{color:#fda29b}.button-link-color:disabled{color:#d0d5dd}\n"] }]
2325
+ args: [{ selector: 'zen-button', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<button\n [class]=\"buttonClasses\"\n [type]=\"type\"\n [disabled]=\"disabled\">\n\n <!-- Dot indicator -->\n @if (buttonType === 'button-dot') {\n <span class=\"button-dot\"></span>\n }\n\n <!-- Leading icon -->\n @if (buttonType === 'button-icon-leading' || isIconOnly) {\n <zen-icon\n [name]=\"getIconName()\"\n [class.rotated]=\"iconRotated\"\n size=\"xs\"></zen-icon>\n }\n\n <!-- Button content -->\n @if (!isIconOnly) {\n <ng-content></ng-content>\n }\n\n <!-- Trailing icon -->\n @if (buttonType === 'button-icon-trailing') {\n <zen-icon\n [name]=\"getIconName()\"\n [class.rotated]=\"iconRotated\"\n size=\"xs\"></zen-icon>\n }\n</button>", 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}}.button-2xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-2xl zen-icon{color:inherit;background-color:currentColor;width:24px;height:24px}.button-2xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-2xl:disabled{cursor:not-allowed}.button-2xl.full-width{width:100%;justify-content:center}.button-2xl.button-icon-only{padding:0;justify-content:center}.button-2xl{height:60px;padding:0 28px}.button-2xl.button-icon-only{width:60px;padding:0}.button-xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-xl zen-icon{color:inherit;background-color:currentColor;width:24px;height:24px}.button-xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-xl:disabled{cursor:not-allowed}.button-xl.full-width{width:100%;justify-content:center}.button-xl.button-icon-only{padding:0;justify-content:center}.button-xl{height:48px;padding:0 20px}.button-xl.button-icon-only{width:48px;padding:0}.button-lg{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-lg zen-icon{color:inherit;background-color:currentColor;width:20px;height:20px}.button-lg .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-lg:disabled{cursor:not-allowed}.button-lg.full-width{width:100%;justify-content:center}.button-lg.button-icon-only{padding:0;justify-content:center}.button-lg{height:44px;padding:0 18px}.button-lg.button-icon-only{width:44px;padding:0}.button-md{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-md zen-icon{color:inherit;background-color:currentColor;width:20px;height:20px}.button-md .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-md:disabled{cursor:not-allowed}.button-md.full-width{width:100%;justify-content:center}.button-md.button-icon-only{padding:0;justify-content:center}.button-md{height:40px;padding:0 16px}.button-md.button-icon-only{width:40px;padding:0}.button-sm{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-sm zen-icon{color:inherit;background-color:currentColor;width:16px;height:16px}.button-sm .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-sm:disabled{cursor:not-allowed}.button-sm.full-width{width:100%;justify-content:center}.button-sm.button-icon-only{padding:0;justify-content:center}.button-sm{height:36px;padding:0 14px}.button-sm.button-icon-only{width:36px;padding:0}.button-base{background:#136ab6;color:#fff;border:1px solid #136AB6;box-shadow:0 1px 2px #1018280d}.button-base:hover:not(:disabled){background:#105494;border-color:#105494}.button-base:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-base.destructive{background:#d92d20;border-color:#d92d20}.button-base.destructive:hover:not(:disabled){background:#b42318;border-color:#b42318}.button-base.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-base.destructive:disabled{background:#fecdca;border-color:#fecdca;color:#fff}.button-base:disabled{background:#c0ddf7;border-color:#c0ddf7;color:#fff}.button-secondary-gray{background:#fff;color:#344054;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d}.button-secondary-gray:hover:not(:disabled){background:#f9fafb;color:#1d2939}.button-secondary-gray:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.button-secondary-gray.destructive{color:#b42318}.button-secondary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-secondary-gray.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-gray.destructive:disabled{background:#fff;border-color:#eaecf0;color:#fda29b}.button-secondary-gray:disabled{background:#fff;border-color:#eaecf0;color:#d0d5dd}.button-secondary-color{background:#f1f7fe;color:#105494;border:1px solid #F1F7FE;box-shadow:0 1px 2px #1018280d}.button-secondary-color:hover:not(:disabled){background:#e3eefb;border-color:#e3eefb}.button-secondary-color:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-secondary-color.destructive{background:#fef3f2;color:#b42318;border-color:#fef3f2}.button-secondary-color.destructive:hover:not(:disabled){background:#fee4e2;border-color:#fee4e2}.button-secondary-color.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-color.destructive:disabled{background:#fffbfa;border-color:#fffbfa;color:#fda29b}.button-secondary-color:disabled{background:#fafdff;border-color:#fafdff;color:#88c1f1}.button-tertiary-gray{background:transparent;color:#667085;border:1px solid transparent}.button-tertiary-gray:hover:not(:disabled){background:#f9fafb;color:#475467}.button-tertiary-gray:focus:not(:disabled){outline:none;background:#f9fafb}.button-tertiary-gray.destructive{color:#b42318}.button-tertiary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-gray.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-gray.destructive:disabled{color:#fda29b}.button-tertiary-gray:disabled{color:#d0d5dd}.button-tertiary-color{background:transparent;color:#105494;border:1px solid transparent}.button-tertiary-color:hover:not(:disabled){background:#f1f7fe}.button-tertiary-color:focus:not(:disabled){outline:none;background:#f1f7fe}.button-tertiary-color.destructive{color:#b42318}.button-tertiary-color.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-color.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-color.destructive:disabled{color:#fda29b}.button-tertiary-color:disabled{color:#d0d5dd}.button-link-gray{background:transparent;color:#475467;border:none;text-decoration:none}.button-link-gray:hover:not(:disabled){color:#344054}.button-link-gray:focus:not(:disabled){outline:none}.button-link-gray.destructive{color:#b42318}.button-link-gray.destructive:hover:not(:disabled){color:#912018}.button-link-gray.destructive:disabled{color:#fda29b}.button-link-gray:disabled{color:#d0d5dd}.button-link-color{background:transparent;color:#105494;border:none;text-decoration:none}.button-link-color:hover:not(:disabled){color:#12497a}.button-link-color:focus:not(:disabled){outline:none}.button-link-color.destructive{color:#b42318}.button-link-color.destructive:hover:not(:disabled){color:#912018}.button-link-color.destructive:disabled{color:#fda29b}.button-link-color:disabled{color:#d0d5dd}zen-icon{transition:transform .2s ease}zen-icon.rotated{transform:rotate(180deg)}\n"] }]
2325
2326
  }], propDecorators: { variant: [{
2326
2327
  type: Input
2327
2328
  }], buttonType: [{
2328
2329
  type: Input
2329
2330
  }], icon: [{
2330
2331
  type: Input
2332
+ }], iconRotated: [{
2333
+ type: Input
2331
2334
  }], size: [{
2332
2335
  type: Input
2333
2336
  }], destructive: [{
@@ -3063,7 +3066,7 @@ class ZenduFilterComponent {
3063
3066
  return count;
3064
3067
  }
3065
3068
  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 }); }
3066
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduFilterComponent, isStandalone: false, selector: "zen-filter", inputs: { config: "config", filter: "filter", position: "position", resetBehavior: "resetBehavior", isVisible: "isVisible", customTrigger: "customTrigger", imageUrl: "imageUrl", label: "label", 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]=\"isApplied ? 'secondary' : 'secondary-gray'\"\n class=\"filter {{isApplied ? 'applied' : ''}}\">\n @if (imageUrl) {\n <zen-icon [src]=\"imageUrl\"\n ></zen-icon>\n }\n @if (!imageUrl) {\n <i class=\"filter-icon material-icons\"\n >filter_list</i>\n }\n @if (label) {\n <span>{{ label | translate }}</span>\n }\n </zen-button>\n }\n\n @if (customTrigger) {\n <ng-content></ng-content>\n }\n\n <div [hidden]=\"!isVisible\"\n class=\"action-menu menu-content\"\n [class.customTrigger]=\"customTrigger\"\n [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom }\">\n <div class=\"action-menu-header\">\n <zen-search-box [(text)]=\"searchText\"\n #searchBox\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"action-menu-body items-wrapper\"\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 <div>\n @if (isMenuIsVisible(item)) {\n <div class=\"menu-item\"\n >\n <!-- Divider between two filter -->\n @if (item.type === 'divider') {\n <div>\n <p class=\"filter-divider\"></p>\n </div>\n }\n <!-- Boolean toggle -->\n @if (item.type === 'toggle') {\n <div\n class=\"action-item toggle-row\">\n <div>{{item.title | translate}}</div>\n <zen-toggle-slide [(enabled)]=\"item.enabled\"></zen-toggle-slide>\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 <i class=\"material-icons expand-icon\"\n [ngClass]=\"{'active': item.expanded}\">expand_more</i>\n </button>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n <div class=\"action-item section-title\"\n >\n {{item.title | translate}}\n </div>\n }\n @if (item.expanded || item.disableCollapse) {\n <div>\n @switch (item.type) {\n <!-- Multiselect -->\n @case ('multiselect') {\n <div>\n <!-- Lazy loading mode -->\n @if (item.isLazyLoading) {\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n @if (item.canLoadMore && !item.isLoadingNow) {\n <div\n class=\"action-item\">\n <button (click)=\"loadMore(item, false)\"\n class=\"button-stroked full-width\">\n {{'Load More' | translate}}\n </button>\n </div>\n }\n @if (item.isLoadingNow) {\n <div\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n }\n }\n @if (!item.isLazyLoading && !hasTreeData(item)) {\n @if (!item.hideSelectAll) {\n <div class=\"action-item-checkbox ds-item select-all\">\n @if (item.dataSource.length === item.filteredDataSource.length) {\n <zen-checkbox\n [(checked)]=\"item.isSelectedAll\"\n [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n [label]=\"'Select All' | translate\"\n (checkedChange)=\"onSelectAll(item)\">\n </zen-checkbox>\n }\n </div>\n }\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n }\n <!-- Tree view mode -->\n @if (!item.isLazyLoading && hasTreeData(item)) {\n <zen-groups\n [dataSource]=\"item.dataSource\"\n [filteredDataSource]=\"item.filteredDataSource\"\n [hideSelectAll]=\"item.hideSelectAll\"\n [inline]=\"true\"\n [hideSearch]=\"true\"\n [(isSelectedAll)]=\"item.isSelectedAll\"\n (checkedChange)=\"checkChanged($event, item)\">\n </zen-groups>\n }\n </div>\n }\n <!-- Date range picker -->\n @case ('dateRange') {\n <div>\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=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n }\n }\n <!-- Default date range view -->\n @if (!item.dateRangeOptions?.length) {\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n }\n </div>\n }\n <!-- Date picker -->\n @case ('date') {\n <div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'Date' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.date\"\n [showTime]=\"item.showTime\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </div>\n }\n <!-- Number range -->\n @case ('numberRange') {\n <div\n class=\"filter-row number-range-row\">\n <div>\n <div class=\"lbl\">{{'Min' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.from\"\n type=\"number\" />\n </div>\n <div>\n <div class=\"lbl\">{{'Max' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.to\"\n type=\"number\" />\n </div>\n </div>\n }\n <!-- Radio -->\n @case ('radio') {\n <div>\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 </div>\n }\n </div>\n }\n </div>\n }\n @if (showNoFilterResult) {\n <span\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n }\n </div>\n\n <div class=\"action-menu-footer filter-footer\">\n @if (hasMultiselectItems) {\n <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n }\n <div class=\"filter-footer-actions\">\n <button (click)=\"reset()\"\n class=\"filter-btn-clear\"\n [class.has-selection]=\"selectedCount > 0 && hasMultiselectItems\">\n {{'Clear Filter' | translate}}\n </button>\n <button (click)=\"apply()\"\n class=\"filter-btn-apply\">\n {{'Apply' | translate}}\n </button>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .menu-content{width:360px;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:8px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:8px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .menu-content .items-wrapper{overflow-y:auto;max-height:calc(100vh - 407px);position:relative;padding:8px 0}.filters-component .menu-content .items-wrapper .action-item,.filters-component .menu-content .items-wrapper .action-item-checkbox,.filters-component .menu-content .items-wrapper .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0 24px}.filters-component .menu-content .items-wrapper .action-item:hover,.filters-component .menu-content .items-wrapper .action-item-checkbox:hover,.filters-component .menu-content .items-wrapper .action-item-radio:hover{background:transparent}.filters-component .menu-content .items-wrapper .expander-item{outline:none;border:none;display:flex;width:100%;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;padding:12px 24px}.filters-component .menu-content .items-wrapper .expander-item .expander-title{flex:1;text-align:left}.filters-component .menu-content .items-wrapper .expander-item.expanded,.filters-component .menu-content .items-wrapper .expander-item.active{background:transparent;color:#344054}.filters-component .menu-content .items-wrapper .expander-item:hover{background:transparent}.filters-component .menu-content .items-wrapper .expand-icon{transition:.3s;font-size:20px;color:#667085}.filters-component .menu-content .items-wrapper .expand-icon.active{transform:rotate(180deg)}.filters-component .menu-content .items-wrapper .ds-item{padding-left:32px}.filters-component .menu-content .items-wrapper .no-item,.filters-component .menu-content .items-wrapper .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 24px;font-weight:400;font-size:14px}.filters-component .menu-content .items-wrapper .select-all{font-weight:500}.filters-component .menu-content .items-wrapper .filter-row{padding:0 24px}.filters-component .menu-content .items-wrapper .filter-row:not(:last-of-type){margin-bottom:20px}.filters-component .menu-content .items-wrapper .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .menu-content .items-wrapper .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .menu-content .items-wrapper .number-range-row{display:flex;margin-left:32px;gap:16px;margin-bottom:10px}.filters-component .menu-content .items-wrapper .toggle-row{justify-content:space-between}.filters-component .filter-footer{justify-content:space-between;padding:16px 24px;border-top:1px solid #eaecf0}.filters-component .filter-footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-footer .filter-btn-clear{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:#fff;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#d0d5dd;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-clear:hover{background:#f9fafb;color:#98a2b3}.filters-component .filter-footer .filter-btn-clear.has-selection{border-color:#fda29b;color:#b42318}.filters-component .filter-footer .filter-btn-clear.has-selection:hover{background:#fef3f2;color:#912018}.filters-component .filter-footer .filter-btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:var(--color-primary, #2188d9);border:1px solid var(--color-primary, #2188d9);box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#fff;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-apply:hover{background:var(--color-blue-shade-1, #0d74c5);border-color:var(--color-blue-shade-1, #0d74c5)}.filters-component .section-title{font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;padding:12px 24px}.filters-component .section-title:hover{background:transparent}.filters-component .has-badge zen-checkbox{width:auto}.filters-component .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.hidden{display:none}: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.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.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { 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: ZenduToggleSlideComponent, selector: "zen-toggle-slide", inputs: ["enabled", "disabled"], outputs: ["enabledChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: ZenduDatepickerComponent, selector: "zen-datepicker", inputs: ["date", "showTime", "showSeconds", "showDate", "parentContainer", "containerClass", "minDate", "maxDate", "boxDesign", "highlightDays", "autoConfirm", "hint", "highlightError", "disabled", "readonly", "xPosition", "yPosition", "dispalyOverParent"], outputs: ["dateChange"] }, { 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: ZenButtonComponent, selector: "zen-button", inputs: ["variant", "buttonType", "icon", "size", "destructive", "disabled", "fullWidth", "type"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
3069
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduFilterComponent, isStandalone: false, selector: "zen-filter", inputs: { config: "config", filter: "filter", position: "position", resetBehavior: "resetBehavior", isVisible: "isVisible", customTrigger: "customTrigger", imageUrl: "imageUrl", label: "label", 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]=\"isApplied ? 'secondary' : 'secondary-gray'\"\n class=\"filter {{isApplied ? 'applied' : ''}}\">\n @if (imageUrl) {\n <zen-icon [src]=\"imageUrl\"\n ></zen-icon>\n }\n @if (!imageUrl) {\n <i class=\"filter-icon material-icons\"\n >filter_list</i>\n }\n @if (label) {\n <span>{{ label | translate }}</span>\n }\n </zen-button>\n }\n\n @if (customTrigger) {\n <ng-content></ng-content>\n }\n\n <div [hidden]=\"!isVisible\"\n class=\"action-menu menu-content\"\n [class.customTrigger]=\"customTrigger\"\n [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom }\">\n <div class=\"action-menu-header\">\n <zen-search-box [(text)]=\"searchText\"\n #searchBox\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"action-menu-body items-wrapper\"\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 <div>\n @if (isMenuIsVisible(item)) {\n <div class=\"menu-item\"\n >\n <!-- Divider between two filter -->\n @if (item.type === 'divider') {\n <div>\n <p class=\"filter-divider\"></p>\n </div>\n }\n <!-- Boolean toggle -->\n @if (item.type === 'toggle') {\n <div\n class=\"action-item toggle-row\">\n <div>{{item.title | translate}}</div>\n <zen-toggle-slide [(enabled)]=\"item.enabled\"></zen-toggle-slide>\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 <i class=\"material-icons expand-icon\"\n [ngClass]=\"{'active': item.expanded}\">expand_more</i>\n </button>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n <div class=\"action-item section-title\"\n >\n {{item.title | translate}}\n </div>\n }\n @if (item.expanded || item.disableCollapse) {\n <div>\n @switch (item.type) {\n <!-- Multiselect -->\n @case ('multiselect') {\n <div>\n <!-- Lazy loading mode -->\n @if (item.isLazyLoading) {\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n @if (item.canLoadMore && !item.isLoadingNow) {\n <div\n class=\"action-item\">\n <button (click)=\"loadMore(item, false)\"\n class=\"button-stroked full-width\">\n {{'Load More' | translate}}\n </button>\n </div>\n }\n @if (item.isLoadingNow) {\n <div\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n }\n }\n @if (!item.isLazyLoading && !hasTreeData(item)) {\n @if (!item.hideSelectAll) {\n <div class=\"action-item-checkbox ds-item select-all\">\n @if (item.dataSource.length === item.filteredDataSource.length) {\n <zen-checkbox\n [(checked)]=\"item.isSelectedAll\"\n [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n [label]=\"'Select All' | translate\"\n (checkedChange)=\"onSelectAll(item)\">\n </zen-checkbox>\n }\n </div>\n }\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n }\n <!-- Tree view mode -->\n @if (!item.isLazyLoading && hasTreeData(item)) {\n <zen-groups\n [dataSource]=\"item.dataSource\"\n [filteredDataSource]=\"item.filteredDataSource\"\n [hideSelectAll]=\"item.hideSelectAll\"\n [inline]=\"true\"\n [hideSearch]=\"true\"\n [(isSelectedAll)]=\"item.isSelectedAll\"\n (checkedChange)=\"checkChanged($event, item)\">\n </zen-groups>\n }\n </div>\n }\n <!-- Date range picker -->\n @case ('dateRange') {\n <div>\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=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n }\n }\n <!-- Default date range view -->\n @if (!item.dateRangeOptions?.length) {\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n }\n </div>\n }\n <!-- Date picker -->\n @case ('date') {\n <div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'Date' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.date\"\n [showTime]=\"item.showTime\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </div>\n }\n <!-- Number range -->\n @case ('numberRange') {\n <div\n class=\"filter-row number-range-row\">\n <div>\n <div class=\"lbl\">{{'Min' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.from\"\n type=\"number\" />\n </div>\n <div>\n <div class=\"lbl\">{{'Max' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.to\"\n type=\"number\" />\n </div>\n </div>\n }\n <!-- Radio -->\n @case ('radio') {\n <div>\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 </div>\n }\n </div>\n }\n </div>\n }\n @if (showNoFilterResult) {\n <span\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n }\n </div>\n\n <div class=\"action-menu-footer filter-footer\">\n @if (hasMultiselectItems) {\n <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n }\n <div class=\"filter-footer-actions\">\n <button (click)=\"reset()\"\n class=\"filter-btn-clear\"\n [class.has-selection]=\"selectedCount > 0 && hasMultiselectItems\">\n {{'Clear Filter' | translate}}\n </button>\n <button (click)=\"apply()\"\n class=\"filter-btn-apply\">\n {{'Apply' | translate}}\n </button>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .menu-content{width:360px;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:8px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:8px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .menu-content .items-wrapper{overflow-y:auto;max-height:calc(100vh - 407px);position:relative;padding:8px 0}.filters-component .menu-content .items-wrapper .action-item,.filters-component .menu-content .items-wrapper .action-item-checkbox,.filters-component .menu-content .items-wrapper .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0 24px}.filters-component .menu-content .items-wrapper .action-item:hover,.filters-component .menu-content .items-wrapper .action-item-checkbox:hover,.filters-component .menu-content .items-wrapper .action-item-radio:hover{background:transparent}.filters-component .menu-content .items-wrapper .expander-item{outline:none;border:none;display:flex;width:100%;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;padding:12px 24px}.filters-component .menu-content .items-wrapper .expander-item .expander-title{flex:1;text-align:left}.filters-component .menu-content .items-wrapper .expander-item.expanded,.filters-component .menu-content .items-wrapper .expander-item.active{background:transparent;color:#344054}.filters-component .menu-content .items-wrapper .expander-item:hover{background:transparent}.filters-component .menu-content .items-wrapper .expand-icon{transition:.3s;font-size:20px;color:#667085}.filters-component .menu-content .items-wrapper .expand-icon.active{transform:rotate(180deg)}.filters-component .menu-content .items-wrapper .ds-item{padding-left:32px}.filters-component .menu-content .items-wrapper .no-item,.filters-component .menu-content .items-wrapper .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 24px;font-weight:400;font-size:14px}.filters-component .menu-content .items-wrapper .select-all{font-weight:500}.filters-component .menu-content .items-wrapper .filter-row{padding:0 24px}.filters-component .menu-content .items-wrapper .filter-row:not(:last-of-type){margin-bottom:20px}.filters-component .menu-content .items-wrapper .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .menu-content .items-wrapper .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .menu-content .items-wrapper .number-range-row{display:flex;margin-left:32px;gap:16px;margin-bottom:10px}.filters-component .menu-content .items-wrapper .toggle-row{justify-content:space-between}.filters-component .filter-footer{justify-content:space-between;padding:16px 24px;border-top:1px solid #eaecf0}.filters-component .filter-footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-footer .filter-btn-clear{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:#fff;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#d0d5dd;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-clear:hover{background:#f9fafb;color:#98a2b3}.filters-component .filter-footer .filter-btn-clear.has-selection{border-color:#fda29b;color:#b42318}.filters-component .filter-footer .filter-btn-clear.has-selection:hover{background:#fef3f2;color:#912018}.filters-component .filter-footer .filter-btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:var(--color-primary, #2188d9);border:1px solid var(--color-primary, #2188d9);box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#fff;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-apply:hover{background:var(--color-blue-shade-1, #0d74c5);border-color:var(--color-blue-shade-1, #0d74c5)}.filters-component .section-title{font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;padding:12px 24px}.filters-component .section-title:hover{background:transparent}.filters-component .has-badge zen-checkbox{width:auto}.filters-component .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.hidden{display:none}: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.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.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { 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: ZenduToggleSlideComponent, selector: "zen-toggle-slide", inputs: ["enabled", "disabled"], outputs: ["enabledChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: ZenduDatepickerComponent, selector: "zen-datepicker", inputs: ["date", "showTime", "showSeconds", "showDate", "parentContainer", "containerClass", "minDate", "maxDate", "boxDesign", "highlightDays", "autoConfirm", "hint", "highlightError", "disabled", "readonly", "xPosition", "yPosition", "dispalyOverParent"], outputs: ["dateChange"] }, { 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: 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 }); }
3067
3070
  }
3068
3071
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFilterComponent, decorators: [{
3069
3072
  type: Component,
@@ -3593,9 +3596,44 @@ class ZenduSelectComponent {
3593
3596
  this.isOpen = !this.isOpen;
3594
3597
  if (this.isOpen) {
3595
3598
  this.searchText = '';
3596
- this.filterOptions();
3599
+ if (this.isLazyLoading) {
3600
+ // Load the first page (showing already-selected items on top) the first
3601
+ // time the dropdown is opened.
3602
+ if (!this.isLoadingNow && !this.filteredOptions?.length) {
3603
+ this.loadMore(true);
3604
+ }
3605
+ }
3606
+ else {
3607
+ this.filterOptions();
3608
+ }
3609
+ }
3610
+ }
3611
+ /**
3612
+ * Handle scroll on the options list — fetch the next page once the user
3613
+ * scrolls near the bottom (lazy loading only).
3614
+ */
3615
+ onOptionsScroll(event) {
3616
+ if (!this.isLazyLoading || this.isLoadingNow || !this.canLoadMore) {
3617
+ return;
3618
+ }
3619
+ const el = event.target;
3620
+ const threshold = 40;
3621
+ if (el.scrollHeight - el.scrollTop - el.clientHeight <= threshold) {
3622
+ this.loadMore(false);
3597
3623
  }
3598
3624
  }
3625
+ /**
3626
+ * Reset and re-fetch the first page when the search text changes in lazy
3627
+ * mode (debounced so we don't fire a request on every keystroke).
3628
+ */
3629
+ reloadLazySearch() {
3630
+ clearTimeout(this._searchDebounce);
3631
+ this._searchDebounce = setTimeout(() => {
3632
+ this.filteredOptions = [];
3633
+ this.canLoadMore = true;
3634
+ this.loadMore(false);
3635
+ }, 300);
3636
+ }
3599
3637
  /**
3600
3638
  * Handle option selection
3601
3639
  */
@@ -3883,6 +3921,11 @@ class ZenduSelectComponent {
3883
3921
  * Filter options based on search
3884
3922
  */
3885
3923
  filterOptions() {
3924
+ // In lazy mode the filteredOptions are managed by loadMore(), not derived
3925
+ // from the static options array — leave them untouched here.
3926
+ if (this.isLazyLoading) {
3927
+ return;
3928
+ }
3886
3929
  if (!this.searchText) {
3887
3930
  this.filteredOptions = [...this.options];
3888
3931
  return;
@@ -3897,10 +3940,18 @@ class ZenduSelectComponent {
3897
3940
  * Handle search input
3898
3941
  */
3899
3942
  onSearchChange() {
3943
+ if (this.isLazyLoading) {
3944
+ this.reloadLazySearch();
3945
+ return;
3946
+ }
3900
3947
  this.filterOptions();
3901
3948
  }
3902
3949
  clearSearch() {
3903
3950
  this.searchText = '';
3951
+ if (this.isLazyLoading) {
3952
+ this.reloadLazySearch();
3953
+ return;
3954
+ }
3904
3955
  this.filterOptions();
3905
3956
  }
3906
3957
  /**
@@ -3908,10 +3959,14 @@ class ZenduSelectComponent {
3908
3959
  */
3909
3960
  onSearchInputChange() {
3910
3961
  this.searchText = this.searchInputValue;
3911
- this.filterOptions();
3912
3962
  if (!this.isOpen && this.searchInputValue) {
3913
3963
  this.isOpen = true;
3914
3964
  }
3965
+ if (this.isLazyLoading) {
3966
+ this.reloadLazySearch();
3967
+ return;
3968
+ }
3969
+ this.filterOptions();
3915
3970
  }
3916
3971
  /**
3917
3972
  * Handle search input focus
@@ -4120,11 +4175,11 @@ class ZenduSelectComponent {
4120
4175
  this.isSelectedAll = this.options.every(opt => opt.checked);
4121
4176
  }
4122
4177
  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 }); }
4123
- 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\">\n <!-- Select All Option for Multiselect -->\n @if (isMultiselect && !hideSelectAll && 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) {\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 </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:#d0d5dd}.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;opacity:.6}.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-options{flex:1;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#f9fafb}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-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-secondary,.app-select-container.disabled .app-select-search-field{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 0}.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 14px;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[style*=padding-left]{padding-right:14px}.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 24px;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: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
4178
+ 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:#d0d5dd}.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;opacity:.6}.app-select-container.error .app-select-input:focus{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-leading,.app-select-option-leading{display:flex;align-items:center;flex-shrink:0}.app-select-avatar,.app-select-option-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}.app-select-avatar img,.app-select-option-avatar img{width:100%;height:100%;object-fit:cover}.app-select-avatar .avatar-placeholder,.app-select-option-avatar .avatar-placeholder{width:100%;height:100%;background:#f2f4f7;color:#667085;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0;font-weight:600;font-style:normal}.app-select-dot,.app-select-option-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.app-select-value-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-value-wrapper .app-select-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085}.app-select-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-value.placeholder{color:#667085}.app-select-secondary,.app-select-option-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085;white-space:nowrap;flex-shrink:0}.app-select-arrow{margin-left:auto;flex-shrink:0;transition:transform .2s ease}.app-select-arrow.rotated{transform:rotate(180deg)}.app-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-dropdown.dropdown-up{top:auto;bottom:calc(100% + 4px)}.app-select-dropdown.dropdown-down,.app-select-dropdown.dropdown-auto{top:calc(100% + 4px);bottom:auto}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search .app-select-search-input{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;color:#101828}.app-select-search .app-select-search-input::placeholder{color:#667085}.app-select-search .app-select-search-clear{cursor:pointer}.app-select-loading{display:flex;justify-content:center;align-items:center;padding:8px 0}.app-select-options{flex:1;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#f9fafb}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-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-secondary,.app-select-container.disabled .app-select-search-field{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 0}.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 14px;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[style*=padding-left]{padding-right:14px}.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 24px;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 }); }
4124
4179
  }
4125
4180
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectComponent, decorators: [{
4126
4181
  type: Component,
4127
- 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\">\n <!-- Select All Option for Multiselect -->\n @if (isMultiselect && !hideSelectAll && 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) {\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 </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:#d0d5dd}.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;opacity:.6}.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-options{flex:1;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#f9fafb}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-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-secondary,.app-select-container.disabled .app-select-search-field{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 0}.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 14px;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[style*=padding-left]{padding-right:14px}.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 24px;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"] }]
4182
+ 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:#d0d5dd}.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;opacity:.6}.app-select-container.error .app-select-input:focus{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-leading,.app-select-option-leading{display:flex;align-items:center;flex-shrink:0}.app-select-avatar,.app-select-option-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}.app-select-avatar img,.app-select-option-avatar img{width:100%;height:100%;object-fit:cover}.app-select-avatar .avatar-placeholder,.app-select-option-avatar .avatar-placeholder{width:100%;height:100%;background:#f2f4f7;color:#667085;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0;font-weight:600;font-style:normal}.app-select-dot,.app-select-option-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.app-select-value-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-value-wrapper .app-select-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085}.app-select-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-value.placeholder{color:#667085}.app-select-secondary,.app-select-option-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085;white-space:nowrap;flex-shrink:0}.app-select-arrow{margin-left:auto;flex-shrink:0;transition:transform .2s ease}.app-select-arrow.rotated{transform:rotate(180deg)}.app-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-dropdown.dropdown-up{top:auto;bottom:calc(100% + 4px)}.app-select-dropdown.dropdown-down,.app-select-dropdown.dropdown-auto{top:calc(100% + 4px);bottom:auto}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search .app-select-search-input{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;color:#101828}.app-select-search .app-select-search-input::placeholder{color:#667085}.app-select-search .app-select-search-clear{cursor:pointer}.app-select-loading{display:flex;justify-content:center;align-items:center;padding:8px 0}.app-select-options{flex:1;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#f9fafb}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-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-secondary,.app-select-container.disabled .app-select-search-field{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 0}.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 14px;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[style*=padding-left]{padding-right:14px}.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 24px;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"] }]
4128
4183
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectModel: [{
4129
4184
  type: Input
4130
4185
  }], selectModelChange: [{