ng-zenduit 2.2.1 → 2.2.4
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.
- package/fesm2022/ng-zenduit.mjs +299 -225
- package/fesm2022/ng-zenduit.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ng-zenduit.d.ts +19 -2
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,
|
|
@@ -3116,224 +3119,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
3116
3119
|
args: ['window:keydown', ['$event']]
|
|
3117
3120
|
}] } });
|
|
3118
3121
|
|
|
3119
|
-
class ZenduPaginationBarComponent {
|
|
3120
|
-
constructor() {
|
|
3121
|
-
this.page = 1;
|
|
3122
|
-
this.perPage = 10;
|
|
3123
|
-
this.count = 0;
|
|
3124
|
-
this.pageChange = new EventEmitter();
|
|
3125
|
-
this.totalPages = 1;
|
|
3126
|
-
this.pages = [];
|
|
3127
|
-
}
|
|
3128
|
-
ngOnChanges(changes) {
|
|
3129
|
-
if (changes['count'] || changes['perPage'] || changes['page']) {
|
|
3130
|
-
this.recalculate();
|
|
3131
|
-
}
|
|
3132
|
-
}
|
|
3133
|
-
goToPage(target) {
|
|
3134
|
-
const clamped = Math.min(Math.max(1, target), this.totalPages);
|
|
3135
|
-
if (clamped === this.page) {
|
|
3136
|
-
return;
|
|
3137
|
-
}
|
|
3138
|
-
this.page = clamped;
|
|
3139
|
-
this.recalculate();
|
|
3140
|
-
this.pageChange.emit(this.page);
|
|
3141
|
-
}
|
|
3142
|
-
recalculate() {
|
|
3143
|
-
this.totalPages = Math.max(1, Math.ceil((this.count || 0) / (this.perPage || 1)));
|
|
3144
|
-
this.pages = this.buildPages(this.page, this.totalPages);
|
|
3145
|
-
}
|
|
3146
|
-
buildPages(current, total) {
|
|
3147
|
-
const result = [];
|
|
3148
|
-
const push = (p) => result.push({ kind: 'page', page: p, active: p === current });
|
|
3149
|
-
if (total <= 7) {
|
|
3150
|
-
for (let i = 1; i <= total; i++) {
|
|
3151
|
-
push(i);
|
|
3152
|
-
}
|
|
3153
|
-
return result;
|
|
3154
|
-
}
|
|
3155
|
-
const window = new Set([1, total, current - 1, current, current + 1]);
|
|
3156
|
-
if (current <= 3) {
|
|
3157
|
-
window.add(2).add(3);
|
|
3158
|
-
}
|
|
3159
|
-
if (current >= total - 2) {
|
|
3160
|
-
window.add(total - 1).add(total - 2);
|
|
3161
|
-
}
|
|
3162
|
-
const sorted = Array.from(window)
|
|
3163
|
-
.filter((p) => p >= 1 && p <= total)
|
|
3164
|
-
.sort((a, b) => a - b);
|
|
3165
|
-
let prev = 0;
|
|
3166
|
-
for (const p of sorted) {
|
|
3167
|
-
if (p - prev > 1) {
|
|
3168
|
-
result.push({ kind: 'ellipsis' });
|
|
3169
|
-
}
|
|
3170
|
-
push(p);
|
|
3171
|
-
prev = p;
|
|
3172
|
-
}
|
|
3173
|
-
return result;
|
|
3174
|
-
}
|
|
3175
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPaginationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3176
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduPaginationBarComponent, isStandalone: false, selector: "zen-pagination-bar", inputs: { page: "page", perPage: "perPage", count: "count" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-component\">\n <button type=\"button\"\n class=\"nav-btn\"\n [disabled]=\"page <= 1\"\n (click)=\"goToPage(page - 1)\">\n <zen-icon class=\"nav-icon\" src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n <span>{{ \"Previous\" | translate }}</span>\n </button>\n\n <div class=\"pages\">\n @for (item of pages; track item; let i = $index) {\n @if (item.kind === 'page') {\n <button\n type=\"button\"\n class=\"page-btn\"\n [class.is-active]=\"item.active\"\n (click)=\"goToPage(item.page)\">\n {{ item.page }}\n </button>\n }\n @if (item.kind === 'ellipsis') {\n <span class=\"page-ellipsis\">\u2026</span>\n }\n }\n </div>\n\n <button type=\"button\"\n class=\"nav-btn\"\n [disabled]=\"page >= totalPages\"\n (click)=\"goToPage(page + 1)\">\n <span>{{ \"Next\" | translate }}</span>\n <zen-icon class=\"nav-icon\" src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n</div>\n", styles: [".pagination-component{display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-top:1px solid #EAECF0;padding:11px 24px 16px;font-family:Inter,sans-serif}.pagination-component .nav-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:pointer;transition:background-color .1s}.pagination-component .nav-btn:hover:not(:disabled){background:#f9fafb}.pagination-component .nav-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-component .nav-btn .nav-icon{width:20px;height:20px;background-color:#344054}.pagination-component .pages{display:flex;flex-direction:row;align-items:center;gap:2px}.pagination-component .page-btn,.pagination-component .page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;color:#667085;background:transparent;border:0;padding:0;box-sizing:border-box}.pagination-component .page-btn{cursor:pointer;transition:background-color .1s,color .1s}.pagination-component .page-btn:hover:not(.is-active){background:#f9fafb}.pagination-component .page-btn.is-active{background:#f1f7fe;color:#136ab6;cursor:default}.pagination-component .page-ellipsis{cursor:default}\n"], dependencies: [{ kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
3177
|
-
}
|
|
3178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPaginationBarComponent, decorators: [{
|
|
3179
|
-
type: Component,
|
|
3180
|
-
args: [{ selector: 'zen-pagination-bar', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"pagination-component\">\n <button type=\"button\"\n class=\"nav-btn\"\n [disabled]=\"page <= 1\"\n (click)=\"goToPage(page - 1)\">\n <zen-icon class=\"nav-icon\" src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n <span>{{ \"Previous\" | translate }}</span>\n </button>\n\n <div class=\"pages\">\n @for (item of pages; track item; let i = $index) {\n @if (item.kind === 'page') {\n <button\n type=\"button\"\n class=\"page-btn\"\n [class.is-active]=\"item.active\"\n (click)=\"goToPage(item.page)\">\n {{ item.page }}\n </button>\n }\n @if (item.kind === 'ellipsis') {\n <span class=\"page-ellipsis\">\u2026</span>\n }\n }\n </div>\n\n <button type=\"button\"\n class=\"nav-btn\"\n [disabled]=\"page >= totalPages\"\n (click)=\"goToPage(page + 1)\">\n <span>{{ \"Next\" | translate }}</span>\n <zen-icon class=\"nav-icon\" src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n</div>\n", styles: [".pagination-component{display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-top:1px solid #EAECF0;padding:11px 24px 16px;font-family:Inter,sans-serif}.pagination-component .nav-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:pointer;transition:background-color .1s}.pagination-component .nav-btn:hover:not(:disabled){background:#f9fafb}.pagination-component .nav-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-component .nav-btn .nav-icon{width:20px;height:20px;background-color:#344054}.pagination-component .pages{display:flex;flex-direction:row;align-items:center;gap:2px}.pagination-component .page-btn,.pagination-component .page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;color:#667085;background:transparent;border:0;padding:0;box-sizing:border-box}.pagination-component .page-btn{cursor:pointer;transition:background-color .1s,color .1s}.pagination-component .page-btn:hover:not(.is-active){background:#f9fafb}.pagination-component .page-btn.is-active{background:#f1f7fe;color:#136ab6;cursor:default}.pagination-component .page-ellipsis{cursor:default}\n"] }]
|
|
3181
|
-
}], propDecorators: { page: [{
|
|
3182
|
-
type: Input
|
|
3183
|
-
}], perPage: [{
|
|
3184
|
-
type: Input
|
|
3185
|
-
}], count: [{
|
|
3186
|
-
type: Input
|
|
3187
|
-
}], pageChange: [{
|
|
3188
|
-
type: Output
|
|
3189
|
-
}] } });
|
|
3190
|
-
|
|
3191
|
-
class ZenduPhoneInputComponent {
|
|
3192
|
-
constructor() {
|
|
3193
|
-
this.maxLength = 12;
|
|
3194
|
-
this.phoneChange = new EventEmitter();
|
|
3195
|
-
this.validChange = new EventEmitter();
|
|
3196
|
-
this.disabled = false;
|
|
3197
|
-
this.phoneText = "";
|
|
3198
|
-
this.countryList = [
|
|
3199
|
-
{
|
|
3200
|
-
countryCode: "US",
|
|
3201
|
-
countryName: "America",
|
|
3202
|
-
countryCallingCode: "+1",
|
|
3203
|
-
flag: "https://storage.googleapis.com/zenduit-icons/Flags/USA.svg"
|
|
3204
|
-
},
|
|
3205
|
-
{
|
|
3206
|
-
countryCode: "CA",
|
|
3207
|
-
countryName: "Canada",
|
|
3208
|
-
countryCallingCode: "+1",
|
|
3209
|
-
flag: "https://storage.googleapis.com/zenduit-icons/Flags/Canada.svg"
|
|
3210
|
-
},
|
|
3211
|
-
{
|
|
3212
|
-
countryCode: "MX",
|
|
3213
|
-
countryName: "Mexico",
|
|
3214
|
-
countryCallingCode: "+52",
|
|
3215
|
-
flag: "https://storage.googleapis.com/zenduit-icons/Flags/Mexico.svg"
|
|
3216
|
-
}
|
|
3217
|
-
];
|
|
3218
|
-
this.customCountry = {
|
|
3219
|
-
countryCode: "",
|
|
3220
|
-
countryName: "Custom",
|
|
3221
|
-
countryCallingCode: "",
|
|
3222
|
-
flag: "https://storage.googleapis.com/zenduit-icons/Flags/Custom.svg"
|
|
3223
|
-
};
|
|
3224
|
-
this.isExpanded = false;
|
|
3225
|
-
this.selectedCountry = this.countryList[1];
|
|
3226
|
-
}
|
|
3227
|
-
ngOnInit() {
|
|
3228
|
-
this.parseNumber();
|
|
3229
|
-
}
|
|
3230
|
-
ngOnChanges(changes) {
|
|
3231
|
-
if (changes["phone"] && (!this.selectedCountry || !this.selectedCountry.countryCode)) {
|
|
3232
|
-
this.parseNumber();
|
|
3233
|
-
}
|
|
3234
|
-
}
|
|
3235
|
-
parseNumber() {
|
|
3236
|
-
try {
|
|
3237
|
-
this.phoneText = this.phone || '';
|
|
3238
|
-
if (this.phone) {
|
|
3239
|
-
const countryFromList = this.countryList.find(country => this.phone.startsWith(country.countryCallingCode) || `+${this.phone}`.startsWith(country.countryCallingCode));
|
|
3240
|
-
if (countryFromList) {
|
|
3241
|
-
this.selectedCountry = countryFromList || this.customCountry;
|
|
3242
|
-
const phoneNumberUtil = PhoneNumberUtil.getInstance();
|
|
3243
|
-
const parsedPhone = phoneNumberUtil.parse(this.phone || "", 'US');
|
|
3244
|
-
setTimeout(() => {
|
|
3245
|
-
if (this.phoneText.startsWith('+')) {
|
|
3246
|
-
this.phoneText = this.phoneText.replace(`+${parsedPhone.getCountryCode()}`, "");
|
|
3247
|
-
}
|
|
3248
|
-
else if (this.phoneText.startsWith(parsedPhone.getCountryCode())) {
|
|
3249
|
-
this.phoneText = this.phoneText.replace(parsedPhone.getCountryCode(), "");
|
|
3250
|
-
}
|
|
3251
|
-
this.phoneChanged();
|
|
3252
|
-
});
|
|
3253
|
-
}
|
|
3254
|
-
else {
|
|
3255
|
-
this.selectedCountry = this.customCountry;
|
|
3256
|
-
}
|
|
3257
|
-
}
|
|
3258
|
-
else {
|
|
3259
|
-
this.selectedCountry = this.customCountry;
|
|
3260
|
-
}
|
|
3261
|
-
}
|
|
3262
|
-
catch (err) {
|
|
3263
|
-
console.warn(`Can't parse phone: ${this.phone}`, err);
|
|
3264
|
-
this.selectedCountry = this.customCountry;
|
|
3265
|
-
}
|
|
3266
|
-
}
|
|
3267
|
-
countryChanged(country) {
|
|
3268
|
-
this.isExpanded = false;
|
|
3269
|
-
this.selectedCountry = country;
|
|
3270
|
-
this.phoneChanged();
|
|
3271
|
-
}
|
|
3272
|
-
phoneChanged(input) {
|
|
3273
|
-
// allow + in custom country
|
|
3274
|
-
let custom = false;
|
|
3275
|
-
if (this.selectedCountry === this.customCountry && this.phoneText.includes('+')) {
|
|
3276
|
-
custom = true;
|
|
3277
|
-
}
|
|
3278
|
-
const phoneText = (this.phoneText || '').replace(/\D/g, '');
|
|
3279
|
-
this.phoneText = custom ? `+${phoneText}` : phoneText;
|
|
3280
|
-
if (input && input.value !== this.phoneText) {
|
|
3281
|
-
input.value = this.phoneText;
|
|
3282
|
-
}
|
|
3283
|
-
const fullNumber = `${this.selectedCountry.countryCallingCode}${this.phoneText}`;
|
|
3284
|
-
if (this.phone !== fullNumber) {
|
|
3285
|
-
this.phoneChange.emit(fullNumber);
|
|
3286
|
-
}
|
|
3287
|
-
const phoneNumberUtil = PhoneNumberUtil.getInstance();
|
|
3288
|
-
if (this.selectedCountry === this.customCountry) {
|
|
3289
|
-
this.validChange.emit(true);
|
|
3290
|
-
}
|
|
3291
|
-
else {
|
|
3292
|
-
try {
|
|
3293
|
-
this.validChange.emit(phoneNumberUtil.isValidNumber(phoneNumberUtil.parseAndKeepRawInput(fullNumber)));
|
|
3294
|
-
}
|
|
3295
|
-
catch {
|
|
3296
|
-
this.validChange.emit(false);
|
|
3297
|
-
}
|
|
3298
|
-
}
|
|
3299
|
-
}
|
|
3300
|
-
hideDropDown() {
|
|
3301
|
-
this.isExpanded = false;
|
|
3302
|
-
}
|
|
3303
|
-
toggle() {
|
|
3304
|
-
if (this.disabled) {
|
|
3305
|
-
return;
|
|
3306
|
-
}
|
|
3307
|
-
this.isExpanded = !this.isExpanded;
|
|
3308
|
-
}
|
|
3309
|
-
focusInput() {
|
|
3310
|
-
if (this.inputElement) {
|
|
3311
|
-
this.inputElement.nativeElement.focus();
|
|
3312
|
-
}
|
|
3313
|
-
}
|
|
3314
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3315
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduPhoneInputComponent, isStandalone: false, selector: "zen-phone-input", inputs: { phone: "phone", maxLength: "maxLength", disabled: "disabled", width: "width" }, outputs: { phoneChange: "phoneChange", validChange: "validChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-input-container\" [style.width]=\"width\">\n <!-- Input wrapper -->\n <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n <!-- Leading dropdown: Country selector -->\n <div class=\"zen-input-leading-dropdown\">\n <button type=\"button\"\n class=\"zen-dropdown-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggle(); $event.stopPropagation()\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"selectedCountry.flag\"\n [alt]=\"selectedCountry.countryName\">\n <span class=\"dropdown-label\">{{ selectedCountry.countryCallingCode }}</span>\n <i class=\"material-icons dropdown-icon\"\n [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n </button>\n </div>\n\n <!-- Phone input field -->\n <input #input\n class=\"zen-input-field text text-md text-weight-regular\"\n type=\"text\"\n [(ngModel)]=\"phoneText\"\n (ngModelChange)=\"phoneChanged(input)\"\n (click)=\"isExpanded = false\"\n [disabled]=\"disabled\"\n country-code=\"selectedCountry.countryCode\"\n [maxlength]=\"maxLength\">\n </div>\n\n <!-- Country dropdown menu -->\n @if (isExpanded) {\n <div class=\"zen-dropdown-menu\"\n [ngClass]=\"{'open': isExpanded}\">\n <!-- Countries List -->\n @for (country of countryList; track country) {\n <button type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': selectedCountry.countryName === country.countryName}\"\n (click)=\"countryChanged(country)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"country.flag\"\n [alt]=\"country.countryName\">\n <span class=\"zen-phone-country-name\">{{ country.countryName }}</span>\n <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n </button>\n }\n <!-- Custom Country -->\n <button type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': selectedCountry.countryName === customCountry.countryName}\"\n (click)=\"countryChanged(customCountry)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"customCountry.flag\"\n [alt]=\"customCountry.countryName\">\n <span class=\"zen-phone-country-name\">{{ customCountry.countryName }}</span>\n <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n </button>\n </div>\n }\n</div>\n\n<!-- Click outside handler for dropdown -->\n@if (isExpanded) {\n <div\n class=\"zen-dropdown-backdrop\"\n (click)=\"hideDropDown()\"></div>\n}\n", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover{border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper:focus-within{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-label{font-weight:500;font-size:14px;min-width:max-content}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon.active{transform:rotate(180deg)}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100;padding:4px;width:100%;box-sizing:border-box}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-name{flex:1;min-width:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .zen-phone-country-code{color:#136ab6}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
3316
|
-
}
|
|
3317
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPhoneInputComponent, decorators: [{
|
|
3318
|
-
type: Component,
|
|
3319
|
-
args: [{ selector: 'zen-phone-input', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-input-container\" [style.width]=\"width\">\n <!-- Input wrapper -->\n <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n <!-- Leading dropdown: Country selector -->\n <div class=\"zen-input-leading-dropdown\">\n <button type=\"button\"\n class=\"zen-dropdown-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggle(); $event.stopPropagation()\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"selectedCountry.flag\"\n [alt]=\"selectedCountry.countryName\">\n <span class=\"dropdown-label\">{{ selectedCountry.countryCallingCode }}</span>\n <i class=\"material-icons dropdown-icon\"\n [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n </button>\n </div>\n\n <!-- Phone input field -->\n <input #input\n class=\"zen-input-field text text-md text-weight-regular\"\n type=\"text\"\n [(ngModel)]=\"phoneText\"\n (ngModelChange)=\"phoneChanged(input)\"\n (click)=\"isExpanded = false\"\n [disabled]=\"disabled\"\n country-code=\"selectedCountry.countryCode\"\n [maxlength]=\"maxLength\">\n </div>\n\n <!-- Country dropdown menu -->\n @if (isExpanded) {\n <div class=\"zen-dropdown-menu\"\n [ngClass]=\"{'open': isExpanded}\">\n <!-- Countries List -->\n @for (country of countryList; track country) {\n <button type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': selectedCountry.countryName === country.countryName}\"\n (click)=\"countryChanged(country)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"country.flag\"\n [alt]=\"country.countryName\">\n <span class=\"zen-phone-country-name\">{{ country.countryName }}</span>\n <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n </button>\n }\n <!-- Custom Country -->\n <button type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': selectedCountry.countryName === customCountry.countryName}\"\n (click)=\"countryChanged(customCountry)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"customCountry.flag\"\n [alt]=\"customCountry.countryName\">\n <span class=\"zen-phone-country-name\">{{ customCountry.countryName }}</span>\n <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n </button>\n </div>\n }\n</div>\n\n<!-- Click outside handler for dropdown -->\n@if (isExpanded) {\n <div\n class=\"zen-dropdown-backdrop\"\n (click)=\"hideDropDown()\"></div>\n}\n", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover{border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper:focus-within{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-label{font-weight:500;font-size:14px;min-width:max-content}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon.active{transform:rotate(180deg)}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100;padding:4px;width:100%;box-sizing:border-box}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-name{flex:1;min-width:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .zen-phone-country-code{color:#136ab6}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"] }]
|
|
3320
|
-
}], ctorParameters: () => [], propDecorators: { inputElement: [{
|
|
3321
|
-
type: ViewChild,
|
|
3322
|
-
args: ['input']
|
|
3323
|
-
}], phone: [{
|
|
3324
|
-
type: Input
|
|
3325
|
-
}], maxLength: [{
|
|
3326
|
-
type: Input
|
|
3327
|
-
}], phoneChange: [{
|
|
3328
|
-
type: Output
|
|
3329
|
-
}], validChange: [{
|
|
3330
|
-
type: Output
|
|
3331
|
-
}], disabled: [{
|
|
3332
|
-
type: Input
|
|
3333
|
-
}], width: [{
|
|
3334
|
-
type: Input
|
|
3335
|
-
}] } });
|
|
3336
|
-
|
|
3337
3122
|
class ZenduSelectOptionDirective {
|
|
3338
3123
|
constructor(template) {
|
|
3339
3124
|
this.template = template;
|
|
@@ -3593,9 +3378,44 @@ class ZenduSelectComponent {
|
|
|
3593
3378
|
this.isOpen = !this.isOpen;
|
|
3594
3379
|
if (this.isOpen) {
|
|
3595
3380
|
this.searchText = '';
|
|
3596
|
-
this.
|
|
3381
|
+
if (this.isLazyLoading) {
|
|
3382
|
+
// Load the first page (showing already-selected items on top) the first
|
|
3383
|
+
// time the dropdown is opened.
|
|
3384
|
+
if (!this.isLoadingNow && !this.filteredOptions?.length) {
|
|
3385
|
+
this.loadMore(true);
|
|
3386
|
+
}
|
|
3387
|
+
}
|
|
3388
|
+
else {
|
|
3389
|
+
this.filterOptions();
|
|
3390
|
+
}
|
|
3391
|
+
}
|
|
3392
|
+
}
|
|
3393
|
+
/**
|
|
3394
|
+
* Handle scroll on the options list — fetch the next page once the user
|
|
3395
|
+
* scrolls near the bottom (lazy loading only).
|
|
3396
|
+
*/
|
|
3397
|
+
onOptionsScroll(event) {
|
|
3398
|
+
if (!this.isLazyLoading || this.isLoadingNow || !this.canLoadMore) {
|
|
3399
|
+
return;
|
|
3400
|
+
}
|
|
3401
|
+
const el = event.target;
|
|
3402
|
+
const threshold = 40;
|
|
3403
|
+
if (el.scrollHeight - el.scrollTop - el.clientHeight <= threshold) {
|
|
3404
|
+
this.loadMore(false);
|
|
3597
3405
|
}
|
|
3598
3406
|
}
|
|
3407
|
+
/**
|
|
3408
|
+
* Reset and re-fetch the first page when the search text changes in lazy
|
|
3409
|
+
* mode (debounced so we don't fire a request on every keystroke).
|
|
3410
|
+
*/
|
|
3411
|
+
reloadLazySearch() {
|
|
3412
|
+
clearTimeout(this._searchDebounce);
|
|
3413
|
+
this._searchDebounce = setTimeout(() => {
|
|
3414
|
+
this.filteredOptions = [];
|
|
3415
|
+
this.canLoadMore = true;
|
|
3416
|
+
this.loadMore(false);
|
|
3417
|
+
}, 300);
|
|
3418
|
+
}
|
|
3599
3419
|
/**
|
|
3600
3420
|
* Handle option selection
|
|
3601
3421
|
*/
|
|
@@ -3883,6 +3703,11 @@ class ZenduSelectComponent {
|
|
|
3883
3703
|
* Filter options based on search
|
|
3884
3704
|
*/
|
|
3885
3705
|
filterOptions() {
|
|
3706
|
+
// In lazy mode the filteredOptions are managed by loadMore(), not derived
|
|
3707
|
+
// from the static options array — leave them untouched here.
|
|
3708
|
+
if (this.isLazyLoading) {
|
|
3709
|
+
return;
|
|
3710
|
+
}
|
|
3886
3711
|
if (!this.searchText) {
|
|
3887
3712
|
this.filteredOptions = [...this.options];
|
|
3888
3713
|
return;
|
|
@@ -3897,10 +3722,18 @@ class ZenduSelectComponent {
|
|
|
3897
3722
|
* Handle search input
|
|
3898
3723
|
*/
|
|
3899
3724
|
onSearchChange() {
|
|
3725
|
+
if (this.isLazyLoading) {
|
|
3726
|
+
this.reloadLazySearch();
|
|
3727
|
+
return;
|
|
3728
|
+
}
|
|
3900
3729
|
this.filterOptions();
|
|
3901
3730
|
}
|
|
3902
3731
|
clearSearch() {
|
|
3903
3732
|
this.searchText = '';
|
|
3733
|
+
if (this.isLazyLoading) {
|
|
3734
|
+
this.reloadLazySearch();
|
|
3735
|
+
return;
|
|
3736
|
+
}
|
|
3904
3737
|
this.filterOptions();
|
|
3905
3738
|
}
|
|
3906
3739
|
/**
|
|
@@ -3908,10 +3741,14 @@ class ZenduSelectComponent {
|
|
|
3908
3741
|
*/
|
|
3909
3742
|
onSearchInputChange() {
|
|
3910
3743
|
this.searchText = this.searchInputValue;
|
|
3911
|
-
this.filterOptions();
|
|
3912
3744
|
if (!this.isOpen && this.searchInputValue) {
|
|
3913
3745
|
this.isOpen = true;
|
|
3914
3746
|
}
|
|
3747
|
+
if (this.isLazyLoading) {
|
|
3748
|
+
this.reloadLazySearch();
|
|
3749
|
+
return;
|
|
3750
|
+
}
|
|
3751
|
+
this.filterOptions();
|
|
3915
3752
|
}
|
|
3916
3753
|
/**
|
|
3917
3754
|
* Handle search input focus
|
|
@@ -4021,6 +3858,8 @@ class ZenduSelectComponent {
|
|
|
4021
3858
|
*/
|
|
4022
3859
|
getStateClasses() {
|
|
4023
3860
|
const classes = ['app-select-container'];
|
|
3861
|
+
if (this.size)
|
|
3862
|
+
classes.push(`size-${this.size}`);
|
|
4024
3863
|
if (this.isOpen)
|
|
4025
3864
|
classes.push('open');
|
|
4026
3865
|
if (this.disabled)
|
|
@@ -4120,11 +3959,11 @@ class ZenduSelectComponent {
|
|
|
4120
3959
|
this.isSelectedAll = this.options.every(opt => opt.checked);
|
|
4121
3960
|
}
|
|
4122
3961
|
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 }); }
|
|
3962
|
+
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
3963
|
}
|
|
4125
3964
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectComponent, decorators: [{
|
|
4126
3965
|
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"] }]
|
|
3966
|
+
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
3967
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectModel: [{
|
|
4129
3968
|
type: Input
|
|
4130
3969
|
}], selectModelChange: [{
|
|
@@ -4213,6 +4052,241 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
4213
4052
|
args: ['document:click', ['$event']]
|
|
4214
4053
|
}] } });
|
|
4215
4054
|
|
|
4055
|
+
class ZenduPaginationBarComponent {
|
|
4056
|
+
constructor() {
|
|
4057
|
+
this.page = 1;
|
|
4058
|
+
this.perPage = 10;
|
|
4059
|
+
this.count = 0;
|
|
4060
|
+
this.perPageOptions = [10, 20, 30, 40, 50];
|
|
4061
|
+
this.pageChange = new EventEmitter();
|
|
4062
|
+
this.perPageChange = new EventEmitter();
|
|
4063
|
+
this.totalPages = 1;
|
|
4064
|
+
this.pages = [];
|
|
4065
|
+
this.rangeStart = 0;
|
|
4066
|
+
this.rangeEnd = 0;
|
|
4067
|
+
}
|
|
4068
|
+
ngOnChanges(changes) {
|
|
4069
|
+
if (changes['count'] || changes['perPage'] || changes['page']) {
|
|
4070
|
+
this.recalculate();
|
|
4071
|
+
}
|
|
4072
|
+
}
|
|
4073
|
+
goToPage(target) {
|
|
4074
|
+
const clamped = Math.min(Math.max(1, target), this.totalPages);
|
|
4075
|
+
if (clamped === this.page) {
|
|
4076
|
+
return;
|
|
4077
|
+
}
|
|
4078
|
+
this.page = clamped;
|
|
4079
|
+
this.recalculate();
|
|
4080
|
+
this.pageChange.emit(this.page);
|
|
4081
|
+
}
|
|
4082
|
+
onPerPageChange(value) {
|
|
4083
|
+
this.perPage = value;
|
|
4084
|
+
this.page = 1;
|
|
4085
|
+
this.recalculate();
|
|
4086
|
+
this.perPageChange.emit(this.perPage);
|
|
4087
|
+
this.pageChange.emit(this.page);
|
|
4088
|
+
}
|
|
4089
|
+
recalculate() {
|
|
4090
|
+
this.totalPages = Math.max(1, Math.ceil((this.count || 0) / (this.perPage || 1)));
|
|
4091
|
+
this.pages = this.buildPages(this.page, this.totalPages);
|
|
4092
|
+
this.rangeStart = this.count === 0 ? 0 : (this.page - 1) * this.perPage + 1;
|
|
4093
|
+
this.rangeEnd = Math.min(this.page * this.perPage, this.count);
|
|
4094
|
+
}
|
|
4095
|
+
buildPages(current, total) {
|
|
4096
|
+
const result = [];
|
|
4097
|
+
const push = (p) => result.push({ kind: 'page', page: p, active: p === current });
|
|
4098
|
+
if (total <= 7) {
|
|
4099
|
+
for (let i = 1; i <= total; i++) {
|
|
4100
|
+
push(i);
|
|
4101
|
+
}
|
|
4102
|
+
return result;
|
|
4103
|
+
}
|
|
4104
|
+
const window = new Set([1, total, current - 1, current, current + 1]);
|
|
4105
|
+
if (current <= 3) {
|
|
4106
|
+
window.add(2).add(3);
|
|
4107
|
+
}
|
|
4108
|
+
if (current >= total - 2) {
|
|
4109
|
+
window.add(total - 1).add(total - 2);
|
|
4110
|
+
}
|
|
4111
|
+
const sorted = Array.from(window)
|
|
4112
|
+
.filter((p) => p >= 1 && p <= total)
|
|
4113
|
+
.sort((a, b) => a - b);
|
|
4114
|
+
let prev = 0;
|
|
4115
|
+
for (const p of sorted) {
|
|
4116
|
+
if (p - prev > 1) {
|
|
4117
|
+
result.push({ kind: 'ellipsis' });
|
|
4118
|
+
}
|
|
4119
|
+
push(p);
|
|
4120
|
+
prev = p;
|
|
4121
|
+
}
|
|
4122
|
+
return result;
|
|
4123
|
+
}
|
|
4124
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPaginationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4125
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduPaginationBarComponent, isStandalone: false, selector: "zen-pagination-bar", inputs: { page: "page", perPage: "perPage", count: "count", perPageOptions: "perPageOptions" }, outputs: { pageChange: "pageChange", perPageChange: "perPageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-component\">\n <p class=\"results-text\">\n {{ \"Showing\" | translate }} {{ rangeStart }} - {{ rangeEnd }}\n {{ \"of\" | translate }} {{ count }} {{ \"results\" | translate }}\n </p>\n\n <div class=\"page-navigation\">\n <zen-button\n buttonType=\"button-icon-only\"\n variant=\"tertiary-gray\"\n size=\"md\"\n icon=\"chevron-left\"\n [disabled]=\"page <= 1\"\n (click)=\"goToPage(page - 1)\">\n </zen-button>\n\n <div class=\"pages\">\n @for (item of pages; track item; let i = $index) {\n @if (item.kind === 'page') {\n <button\n type=\"button\"\n class=\"page-btn\"\n [class.is-active]=\"item.active\"\n (click)=\"goToPage(item.page)\">\n {{ item.page }}\n </button>\n }\n @if (item.kind === 'ellipsis') {\n <span class=\"page-ellipsis\">\u2026</span>\n }\n }\n </div>\n\n <zen-button\n buttonType=\"button-icon-only\"\n variant=\"tertiary-gray\"\n size=\"md\"\n icon=\"chevron-right\"\n [disabled]=\"page >= totalPages\"\n (click)=\"goToPage(page + 1)\">\n </zen-button>\n </div>\n\n <div class=\"rows-per-page\">\n <span class=\"rows-label\">{{ \"Rows per page\" | translate }}</span>\n <zen-select\n size=\"sm\"\n [options]=\"perPageOptions\"\n [(selectModel)]=\"perPage\"\n (selectModelChange)=\"onPerPageChange($event)\"\n preferredOpenDirection=\"up\">\n </zen-select>\n </div>\n</div>\n", styles: [".pagination-component{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid #EAECF0;padding:11px 24px 16px;font-family:Inter,sans-serif}.pagination-component .results-text{justify-self:start;margin:0;font-size:14px;line-height:20px;color:#667085;white-space:nowrap}.pagination-component .page-navigation{justify-self:center;display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .rows-per-page{justify-self:end;display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .rows-per-page .rows-label{font-size:14px;font-weight:500;line-height:20px;color:#344054;white-space:nowrap}.pagination-component .pages{display:flex;flex-direction:row;align-items:center;gap:2px}.pagination-component .page-btn,.pagination-component .page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;color:#667085;background:transparent;border:0;padding:0;box-sizing:border-box}.pagination-component .page-btn{cursor:pointer;transition:background-color .1s,color .1s}.pagination-component .page-btn:hover:not(.is-active){background:#f9fafb}.pagination-component .page-btn.is-active{background:#f1f7fe;color:#136ab6;cursor:default}.pagination-component .page-ellipsis{cursor:default}\n"], dependencies: [{ kind: "component", type: ZenduSelectComponent, selector: "zen-select", inputs: ["selectModel", "options", "label", "supportingText", "hintText", "placeholder", "leadingType", "leadingIcon", "leadingAvatar", "leadingDotColor", "displayProp", "idProp", "hasSearch", "isMultiselect", "multiselect", "hideSelectAll", "hideTreeSearch", "required", "disabled", "error", "errorMessage", "destructive", "size", "returnOption", "isTruncate", "enableAddNewOption", "showDefaultAddOption", "newOptionText", "enableRemoveOption", "removeOptionText", "isLazyLoading", "lazyLoader", "preferredOpenDirection"], outputs: ["selectModelChange", "addNewOption", "removeOption", "closed"] }, { kind: "component", type: ZenButtonComponent, selector: "zen-button", inputs: ["variant", "buttonType", "icon", "iconRotated", "size", "destructive", "disabled", "fullWidth", "type"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
4126
|
+
}
|
|
4127
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPaginationBarComponent, decorators: [{
|
|
4128
|
+
type: Component,
|
|
4129
|
+
args: [{ selector: 'zen-pagination-bar', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"pagination-component\">\n <p class=\"results-text\">\n {{ \"Showing\" | translate }} {{ rangeStart }} - {{ rangeEnd }}\n {{ \"of\" | translate }} {{ count }} {{ \"results\" | translate }}\n </p>\n\n <div class=\"page-navigation\">\n <zen-button\n buttonType=\"button-icon-only\"\n variant=\"tertiary-gray\"\n size=\"md\"\n icon=\"chevron-left\"\n [disabled]=\"page <= 1\"\n (click)=\"goToPage(page - 1)\">\n </zen-button>\n\n <div class=\"pages\">\n @for (item of pages; track item; let i = $index) {\n @if (item.kind === 'page') {\n <button\n type=\"button\"\n class=\"page-btn\"\n [class.is-active]=\"item.active\"\n (click)=\"goToPage(item.page)\">\n {{ item.page }}\n </button>\n }\n @if (item.kind === 'ellipsis') {\n <span class=\"page-ellipsis\">\u2026</span>\n }\n }\n </div>\n\n <zen-button\n buttonType=\"button-icon-only\"\n variant=\"tertiary-gray\"\n size=\"md\"\n icon=\"chevron-right\"\n [disabled]=\"page >= totalPages\"\n (click)=\"goToPage(page + 1)\">\n </zen-button>\n </div>\n\n <div class=\"rows-per-page\">\n <span class=\"rows-label\">{{ \"Rows per page\" | translate }}</span>\n <zen-select\n size=\"sm\"\n [options]=\"perPageOptions\"\n [(selectModel)]=\"perPage\"\n (selectModelChange)=\"onPerPageChange($event)\"\n preferredOpenDirection=\"up\">\n </zen-select>\n </div>\n</div>\n", styles: [".pagination-component{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid #EAECF0;padding:11px 24px 16px;font-family:Inter,sans-serif}.pagination-component .results-text{justify-self:start;margin:0;font-size:14px;line-height:20px;color:#667085;white-space:nowrap}.pagination-component .page-navigation{justify-self:center;display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .rows-per-page{justify-self:end;display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .rows-per-page .rows-label{font-size:14px;font-weight:500;line-height:20px;color:#344054;white-space:nowrap}.pagination-component .pages{display:flex;flex-direction:row;align-items:center;gap:2px}.pagination-component .page-btn,.pagination-component .page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;color:#667085;background:transparent;border:0;padding:0;box-sizing:border-box}.pagination-component .page-btn{cursor:pointer;transition:background-color .1s,color .1s}.pagination-component .page-btn:hover:not(.is-active){background:#f9fafb}.pagination-component .page-btn.is-active{background:#f1f7fe;color:#136ab6;cursor:default}.pagination-component .page-ellipsis{cursor:default}\n"] }]
|
|
4130
|
+
}], propDecorators: { page: [{
|
|
4131
|
+
type: Input
|
|
4132
|
+
}], perPage: [{
|
|
4133
|
+
type: Input
|
|
4134
|
+
}], count: [{
|
|
4135
|
+
type: Input
|
|
4136
|
+
}], perPageOptions: [{
|
|
4137
|
+
type: Input
|
|
4138
|
+
}], pageChange: [{
|
|
4139
|
+
type: Output
|
|
4140
|
+
}], perPageChange: [{
|
|
4141
|
+
type: Output
|
|
4142
|
+
}] } });
|
|
4143
|
+
|
|
4144
|
+
class ZenduPhoneInputComponent {
|
|
4145
|
+
constructor() {
|
|
4146
|
+
this.maxLength = 12;
|
|
4147
|
+
this.phoneChange = new EventEmitter();
|
|
4148
|
+
this.validChange = new EventEmitter();
|
|
4149
|
+
this.disabled = false;
|
|
4150
|
+
this.phoneText = "";
|
|
4151
|
+
this.countryList = [
|
|
4152
|
+
{
|
|
4153
|
+
countryCode: "US",
|
|
4154
|
+
countryName: "America",
|
|
4155
|
+
countryCallingCode: "+1",
|
|
4156
|
+
flag: "https://storage.googleapis.com/zenduit-icons/Flags/USA.svg"
|
|
4157
|
+
},
|
|
4158
|
+
{
|
|
4159
|
+
countryCode: "CA",
|
|
4160
|
+
countryName: "Canada",
|
|
4161
|
+
countryCallingCode: "+1",
|
|
4162
|
+
flag: "https://storage.googleapis.com/zenduit-icons/Flags/Canada.svg"
|
|
4163
|
+
},
|
|
4164
|
+
{
|
|
4165
|
+
countryCode: "MX",
|
|
4166
|
+
countryName: "Mexico",
|
|
4167
|
+
countryCallingCode: "+52",
|
|
4168
|
+
flag: "https://storage.googleapis.com/zenduit-icons/Flags/Mexico.svg"
|
|
4169
|
+
}
|
|
4170
|
+
];
|
|
4171
|
+
this.customCountry = {
|
|
4172
|
+
countryCode: "",
|
|
4173
|
+
countryName: "Custom",
|
|
4174
|
+
countryCallingCode: "",
|
|
4175
|
+
flag: "https://storage.googleapis.com/zenduit-icons/Flags/Custom.svg"
|
|
4176
|
+
};
|
|
4177
|
+
this.isExpanded = false;
|
|
4178
|
+
this.selectedCountry = this.countryList[1];
|
|
4179
|
+
}
|
|
4180
|
+
ngOnInit() {
|
|
4181
|
+
this.parseNumber();
|
|
4182
|
+
}
|
|
4183
|
+
ngOnChanges(changes) {
|
|
4184
|
+
if (changes["phone"] && (!this.selectedCountry || !this.selectedCountry.countryCode)) {
|
|
4185
|
+
this.parseNumber();
|
|
4186
|
+
}
|
|
4187
|
+
}
|
|
4188
|
+
parseNumber() {
|
|
4189
|
+
try {
|
|
4190
|
+
this.phoneText = this.phone || '';
|
|
4191
|
+
if (this.phone) {
|
|
4192
|
+
const countryFromList = this.countryList.find(country => this.phone.startsWith(country.countryCallingCode) || `+${this.phone}`.startsWith(country.countryCallingCode));
|
|
4193
|
+
if (countryFromList) {
|
|
4194
|
+
this.selectedCountry = countryFromList || this.customCountry;
|
|
4195
|
+
const phoneNumberUtil = PhoneNumberUtil.getInstance();
|
|
4196
|
+
const parsedPhone = phoneNumberUtil.parse(this.phone || "", 'US');
|
|
4197
|
+
setTimeout(() => {
|
|
4198
|
+
if (this.phoneText.startsWith('+')) {
|
|
4199
|
+
this.phoneText = this.phoneText.replace(`+${parsedPhone.getCountryCode()}`, "");
|
|
4200
|
+
}
|
|
4201
|
+
else if (this.phoneText.startsWith(parsedPhone.getCountryCode())) {
|
|
4202
|
+
this.phoneText = this.phoneText.replace(parsedPhone.getCountryCode(), "");
|
|
4203
|
+
}
|
|
4204
|
+
this.phoneChanged();
|
|
4205
|
+
});
|
|
4206
|
+
}
|
|
4207
|
+
else {
|
|
4208
|
+
this.selectedCountry = this.customCountry;
|
|
4209
|
+
}
|
|
4210
|
+
}
|
|
4211
|
+
else {
|
|
4212
|
+
this.selectedCountry = this.customCountry;
|
|
4213
|
+
}
|
|
4214
|
+
}
|
|
4215
|
+
catch (err) {
|
|
4216
|
+
console.warn(`Can't parse phone: ${this.phone}`, err);
|
|
4217
|
+
this.selectedCountry = this.customCountry;
|
|
4218
|
+
}
|
|
4219
|
+
}
|
|
4220
|
+
countryChanged(country) {
|
|
4221
|
+
this.isExpanded = false;
|
|
4222
|
+
this.selectedCountry = country;
|
|
4223
|
+
this.phoneChanged();
|
|
4224
|
+
}
|
|
4225
|
+
phoneChanged(input) {
|
|
4226
|
+
// allow + in custom country
|
|
4227
|
+
let custom = false;
|
|
4228
|
+
if (this.selectedCountry === this.customCountry && this.phoneText.includes('+')) {
|
|
4229
|
+
custom = true;
|
|
4230
|
+
}
|
|
4231
|
+
const phoneText = (this.phoneText || '').replace(/\D/g, '');
|
|
4232
|
+
this.phoneText = custom ? `+${phoneText}` : phoneText;
|
|
4233
|
+
if (input && input.value !== this.phoneText) {
|
|
4234
|
+
input.value = this.phoneText;
|
|
4235
|
+
}
|
|
4236
|
+
const fullNumber = `${this.selectedCountry.countryCallingCode}${this.phoneText}`;
|
|
4237
|
+
if (this.phone !== fullNumber) {
|
|
4238
|
+
this.phoneChange.emit(fullNumber);
|
|
4239
|
+
}
|
|
4240
|
+
const phoneNumberUtil = PhoneNumberUtil.getInstance();
|
|
4241
|
+
if (this.selectedCountry === this.customCountry) {
|
|
4242
|
+
this.validChange.emit(true);
|
|
4243
|
+
}
|
|
4244
|
+
else {
|
|
4245
|
+
try {
|
|
4246
|
+
this.validChange.emit(phoneNumberUtil.isValidNumber(phoneNumberUtil.parseAndKeepRawInput(fullNumber)));
|
|
4247
|
+
}
|
|
4248
|
+
catch {
|
|
4249
|
+
this.validChange.emit(false);
|
|
4250
|
+
}
|
|
4251
|
+
}
|
|
4252
|
+
}
|
|
4253
|
+
hideDropDown() {
|
|
4254
|
+
this.isExpanded = false;
|
|
4255
|
+
}
|
|
4256
|
+
toggle() {
|
|
4257
|
+
if (this.disabled) {
|
|
4258
|
+
return;
|
|
4259
|
+
}
|
|
4260
|
+
this.isExpanded = !this.isExpanded;
|
|
4261
|
+
}
|
|
4262
|
+
focusInput() {
|
|
4263
|
+
if (this.inputElement) {
|
|
4264
|
+
this.inputElement.nativeElement.focus();
|
|
4265
|
+
}
|
|
4266
|
+
}
|
|
4267
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4268
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduPhoneInputComponent, isStandalone: false, selector: "zen-phone-input", inputs: { phone: "phone", maxLength: "maxLength", disabled: "disabled", width: "width" }, outputs: { phoneChange: "phoneChange", validChange: "validChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-input-container\" [style.width]=\"width\">\n <!-- Input wrapper -->\n <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n <!-- Leading dropdown: Country selector -->\n <div class=\"zen-input-leading-dropdown\">\n <button type=\"button\"\n class=\"zen-dropdown-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggle(); $event.stopPropagation()\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"selectedCountry.flag\"\n [alt]=\"selectedCountry.countryName\">\n <span class=\"dropdown-label\">{{ selectedCountry.countryCallingCode }}</span>\n <i class=\"material-icons dropdown-icon\"\n [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n </button>\n </div>\n\n <!-- Phone input field -->\n <input #input\n class=\"zen-input-field text text-md text-weight-regular\"\n type=\"text\"\n [(ngModel)]=\"phoneText\"\n (ngModelChange)=\"phoneChanged(input)\"\n (click)=\"isExpanded = false\"\n [disabled]=\"disabled\"\n country-code=\"selectedCountry.countryCode\"\n [maxlength]=\"maxLength\">\n </div>\n\n <!-- Country dropdown menu -->\n @if (isExpanded) {\n <div class=\"zen-dropdown-menu\"\n [ngClass]=\"{'open': isExpanded}\">\n <!-- Countries List -->\n @for (country of countryList; track country) {\n <button type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': selectedCountry.countryName === country.countryName}\"\n (click)=\"countryChanged(country)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"country.flag\"\n [alt]=\"country.countryName\">\n <span class=\"zen-phone-country-name\">{{ country.countryName }}</span>\n <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n </button>\n }\n <!-- Custom Country -->\n <button type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': selectedCountry.countryName === customCountry.countryName}\"\n (click)=\"countryChanged(customCountry)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"customCountry.flag\"\n [alt]=\"customCountry.countryName\">\n <span class=\"zen-phone-country-name\">{{ customCountry.countryName }}</span>\n <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n </button>\n </div>\n }\n</div>\n\n<!-- Click outside handler for dropdown -->\n@if (isExpanded) {\n <div\n class=\"zen-dropdown-backdrop\"\n (click)=\"hideDropDown()\"></div>\n}\n", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover{border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper:focus-within{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-label{font-weight:500;font-size:14px;min-width:max-content}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon.active{transform:rotate(180deg)}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100;padding:4px;width:100%;box-sizing:border-box}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-name{flex:1;min-width:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .zen-phone-country-code{color:#136ab6}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
4269
|
+
}
|
|
4270
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPhoneInputComponent, decorators: [{
|
|
4271
|
+
type: Component,
|
|
4272
|
+
args: [{ selector: 'zen-phone-input', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-input-container\" [style.width]=\"width\">\n <!-- Input wrapper -->\n <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n <!-- Leading dropdown: Country selector -->\n <div class=\"zen-input-leading-dropdown\">\n <button type=\"button\"\n class=\"zen-dropdown-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggle(); $event.stopPropagation()\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"selectedCountry.flag\"\n [alt]=\"selectedCountry.countryName\">\n <span class=\"dropdown-label\">{{ selectedCountry.countryCallingCode }}</span>\n <i class=\"material-icons dropdown-icon\"\n [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n </button>\n </div>\n\n <!-- Phone input field -->\n <input #input\n class=\"zen-input-field text text-md text-weight-regular\"\n type=\"text\"\n [(ngModel)]=\"phoneText\"\n (ngModelChange)=\"phoneChanged(input)\"\n (click)=\"isExpanded = false\"\n [disabled]=\"disabled\"\n country-code=\"selectedCountry.countryCode\"\n [maxlength]=\"maxLength\">\n </div>\n\n <!-- Country dropdown menu -->\n @if (isExpanded) {\n <div class=\"zen-dropdown-menu\"\n [ngClass]=\"{'open': isExpanded}\">\n <!-- Countries List -->\n @for (country of countryList; track country) {\n <button type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': selectedCountry.countryName === country.countryName}\"\n (click)=\"countryChanged(country)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"country.flag\"\n [alt]=\"country.countryName\">\n <span class=\"zen-phone-country-name\">{{ country.countryName }}</span>\n <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n </button>\n }\n <!-- Custom Country -->\n <button type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': selectedCountry.countryName === customCountry.countryName}\"\n (click)=\"countryChanged(customCountry)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"customCountry.flag\"\n [alt]=\"customCountry.countryName\">\n <span class=\"zen-phone-country-name\">{{ customCountry.countryName }}</span>\n <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n </button>\n </div>\n }\n</div>\n\n<!-- Click outside handler for dropdown -->\n@if (isExpanded) {\n <div\n class=\"zen-dropdown-backdrop\"\n (click)=\"hideDropDown()\"></div>\n}\n", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover{border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper:focus-within{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-label{font-weight:500;font-size:14px;min-width:max-content}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon.active{transform:rotate(180deg)}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100;padding:4px;width:100%;box-sizing:border-box}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-name{flex:1;min-width:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .zen-phone-country-code{color:#136ab6}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"] }]
|
|
4273
|
+
}], ctorParameters: () => [], propDecorators: { inputElement: [{
|
|
4274
|
+
type: ViewChild,
|
|
4275
|
+
args: ['input']
|
|
4276
|
+
}], phone: [{
|
|
4277
|
+
type: Input
|
|
4278
|
+
}], maxLength: [{
|
|
4279
|
+
type: Input
|
|
4280
|
+
}], phoneChange: [{
|
|
4281
|
+
type: Output
|
|
4282
|
+
}], validChange: [{
|
|
4283
|
+
type: Output
|
|
4284
|
+
}], disabled: [{
|
|
4285
|
+
type: Input
|
|
4286
|
+
}], width: [{
|
|
4287
|
+
type: Input
|
|
4288
|
+
}] } });
|
|
4289
|
+
|
|
4216
4290
|
class ZenduSortHeaderComponent {
|
|
4217
4291
|
constructor() {
|
|
4218
4292
|
this.sortChange = new EventEmitter();
|