ng-zenduit 2.3.15 → 2.3.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/ng-zenduit.mjs +45 -73
  2. package/fesm2022/ng-zenduit.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/ng-zenduit.d.ts +5 -1
package/fesm2022/ng-zenduit.mjs CHANGED
@@ -421,11 +421,11 @@ class ZenduCheckboxComponent {
421
421
  this.checkedChange.emit(this.checked);
422
422
  }
423
423
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
424
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduCheckboxComponent, isStandalone: false, selector: "zen-checkbox", inputs: { checked: "checked", label: "label", labelColor: "labelColor", disabled: "disabled", disableValueChange: "disableValueChange", indeterminate: "indeterminate", imageUrl: "imageUrl", size: "size", supportingText: "supportingText" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div class=\"checkbox-component\"\n [ngClass]=\"{'app-disabled': disabled, 'checkbox-md': size === 'md'}\"\n (click)=\"toggle()\">\n <button class=\"app-checkbox\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'app-checked': checked && !indeterminate, 'app-indeterminate': indeterminate }\">\n @if (checked && !indeterminate) {\n <i\n class=\"material-icons app-checkbox-icon\">done</i>\n }\n @if (indeterminate) {\n <i\n class=\"material-icons app-checkbox-icon\">remove</i>\n }\n </button>\n @if (label || supportingText) {\n <div class=\"app-checkbox-text-wrap\"\n >\n @if (label) {\n <div class=\"app-checkbox-label\"\n [ngStyle]=\"{'color': labelColor }\">\n @if (imageUrl) {\n <img class=\"checkbox-image\"\n [src]=\"imageUrl\"\n >\n }\n {{ label }}\n </div>\n }\n @if (supportingText) {\n <div class=\"app-checkbox-supporting-text\"\n >\n {{ supportingText }}\n </div>\n }\n </div>\n }\n</div>\n", styles: [".checkbox-component{display:flex;align-items:flex-start;cursor:pointer;gap:8px}.checkbox-component .app-checkbox{padding:0;position:relative;width:16px;min-width:16px;height:16px;min-height:16px;border:1px solid #D0D5DD;border-radius:4px;box-sizing:border-box;color:#fff;background:#fff;cursor:pointer;margin-top:2px}.checkbox-component .app-checkbox:focus{outline:none;border-color:#88c1f1;box-shadow:0 0 0 4px #f4ebff}.checkbox-component .app-checkbox:disabled{cursor:not-allowed}.checkbox-component .app-checkbox.app-checked,.checkbox-component .app-checkbox.app-indeterminate{border-color:#136ab6;color:#136ab6;background:#f1f7fe}.checkbox-component .app-checkbox .app-checkbox-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px}.checkbox-component .app-checkbox-text-wrap{display:flex;flex-direction:column}.checkbox-component .app-checkbox-label{font-weight:500;font-size:14px;line-height:20px;color:#344054;display:flex;align-items:center}.checkbox-component .app-checkbox-label .checkbox-image{margin-right:8px;width:36px}.checkbox-component .app-checkbox-supporting-text{font-weight:400;font-size:14px;line-height:20px;color:#667085}.checkbox-component:hover,.checkbox-component:focus{outline:none;text-decoration:none}.checkbox-component:hover .app-checkbox,.checkbox-component:focus .app-checkbox{background:#e3eefb;border-color:#136ab6}.checkbox-component:hover .app-checkbox.app-checked,.checkbox-component:focus .app-checkbox.app-checked{background:#e3eefb;border-color:#136ab6;color:#136ab6}.checkbox-component:hover .app-checkbox.app-indeterminate,.checkbox-component:focus .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.checkbox-component.app-disabled{cursor:not-allowed}.checkbox-component.app-disabled:hover .app-checkbox,.checkbox-component.app-disabled:focus .app-checkbox{background:#f2f4f7;border-color:#eaecf0}.checkbox-component.app-disabled:hover .app-checkbox.app-checked,.checkbox-component.app-disabled:focus .app-checkbox.app-checked{background:#f2f4f7;border-color:#eaecf0;color:#eaecf0}.checkbox-component.app-disabled:hover .app-checkbox.app-indeterminate,.checkbox-component.app-disabled:focus .app-checkbox.app-indeterminate{background:#f2f4f7;border-color:#eaecf0;color:#eaecf0}.checkbox-component.app-disabled .app-checkbox{border-color:#eaecf0;background:#f2f4f7}.checkbox-component.app-disabled .app-checkbox.app-checked,.checkbox-component.app-disabled .app-checkbox.app-indeterminate{border-color:#eaecf0;color:#eaecf0;background:#f2f4f7}.checkbox-component.app-disabled .app-checkbox-label,.checkbox-component.app-disabled .app-checkbox-supporting-text{color:#d0d5dd}.checkbox-component.checkbox-md{gap:12px}.checkbox-component.checkbox-md .app-checkbox{width:20px;min-width:20px;height:20px;min-height:20px;border-radius:6px;margin-top:2px}.checkbox-component.checkbox-md .app-checkbox .app-checkbox-icon{font-size:16px}.checkbox-component.checkbox-md .app-checkbox-label,.checkbox-component.checkbox-md .app-checkbox-supporting-text{font-size:16px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
424
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduCheckboxComponent, isStandalone: false, selector: "zen-checkbox", inputs: { checked: "checked", label: "label", labelColor: "labelColor", disabled: "disabled", disableValueChange: "disableValueChange", indeterminate: "indeterminate", imageUrl: "imageUrl", size: "size", supportingText: "supportingText" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div class=\"checkbox-component\"\n [ngClass]=\"{'app-disabled': disabled, 'checkbox-md': size === 'md'}\"\n (click)=\"toggle()\">\n <button class=\"app-checkbox\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'app-checked': checked && !indeterminate, 'app-indeterminate': indeterminate }\">\n @if (checked && !indeterminate) {\n <i\n class=\"material-icons app-checkbox-icon\">done</i>\n }\n @if (indeterminate) {\n <i\n class=\"material-icons app-checkbox-icon\">remove</i>\n }\n </button>\n @if (label || supportingText) {\n <div class=\"app-checkbox-text-wrap\"\n >\n @if (label) {\n <div class=\"app-checkbox-label\"\n [ngStyle]=\"{'color': labelColor }\">\n @if (imageUrl) {\n <img class=\"checkbox-image\"\n [src]=\"imageUrl\"\n >\n }\n {{ label }}\n </div>\n }\n @if (supportingText) {\n <div class=\"app-checkbox-supporting-text\"\n >\n {{ supportingText }}\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.checkbox-component{display:inline-flex;align-items:flex-start;cursor:pointer;gap:8px}.checkbox-component .app-checkbox{padding:0;position:relative;width:16px;min-width:16px;height:16px;min-height:16px;border:1px solid #D0D5DD;border-radius:4px;box-sizing:border-box;color:#fff;background:#fff;cursor:pointer;margin-top:2px}.checkbox-component .app-checkbox:focus{outline:none;border-color:#88c1f1;box-shadow:0 0 0 4px #f4ebff}.checkbox-component .app-checkbox:disabled{cursor:not-allowed}.checkbox-component .app-checkbox.app-checked,.checkbox-component .app-checkbox.app-indeterminate{border-color:#136ab6;color:#136ab6;background:#f1f7fe}.checkbox-component .app-checkbox .app-checkbox-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px}.checkbox-component .app-checkbox-text-wrap{display:flex;flex-direction:column}.checkbox-component .app-checkbox-label{font-weight:500;font-size:14px;line-height:20px;color:#344054;display:flex;align-items:center}.checkbox-component .app-checkbox-label .checkbox-image{margin-right:8px;width:36px}.checkbox-component .app-checkbox-supporting-text{font-weight:400;font-size:14px;line-height:20px;color:#667085}.checkbox-component:hover,.checkbox-component:focus{outline:none;text-decoration:none}.checkbox-component:hover .app-checkbox,.checkbox-component:focus .app-checkbox{background:#e3eefb;border-color:#136ab6}.checkbox-component:hover .app-checkbox.app-checked,.checkbox-component:focus .app-checkbox.app-checked{background:#e3eefb;border-color:#136ab6;color:#136ab6}.checkbox-component:hover .app-checkbox.app-indeterminate,.checkbox-component:focus .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.checkbox-component.app-disabled{cursor:not-allowed}.checkbox-component.app-disabled:hover .app-checkbox,.checkbox-component.app-disabled:focus .app-checkbox{background:#f2f4f7;border-color:#eaecf0}.checkbox-component.app-disabled:hover .app-checkbox.app-checked,.checkbox-component.app-disabled:focus .app-checkbox.app-checked{background:#f2f4f7;border-color:#eaecf0;color:#eaecf0}.checkbox-component.app-disabled:hover .app-checkbox.app-indeterminate,.checkbox-component.app-disabled:focus .app-checkbox.app-indeterminate{background:#f2f4f7;border-color:#eaecf0;color:#eaecf0}.checkbox-component.app-disabled .app-checkbox{border-color:#eaecf0;background:#f2f4f7}.checkbox-component.app-disabled .app-checkbox.app-checked,.checkbox-component.app-disabled .app-checkbox.app-indeterminate{border-color:#eaecf0;color:#eaecf0;background:#f2f4f7}.checkbox-component.app-disabled .app-checkbox-label,.checkbox-component.app-disabled .app-checkbox-supporting-text{color:#d0d5dd}.checkbox-component.checkbox-md{gap:12px}.checkbox-component.checkbox-md .app-checkbox{width:20px;min-width:20px;height:20px;min-height:20px;border-radius:6px;margin-top:2px}.checkbox-component.checkbox-md .app-checkbox .app-checkbox-icon{font-size:16px}.checkbox-component.checkbox-md .app-checkbox-label,.checkbox-component.checkbox-md .app-checkbox-supporting-text{font-size:16px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
425
425
  }
426
426
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduCheckboxComponent, decorators: [{
427
427
  type: Component,
428
- args: [{ selector: 'zen-checkbox', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"checkbox-component\"\n [ngClass]=\"{'app-disabled': disabled, 'checkbox-md': size === 'md'}\"\n (click)=\"toggle()\">\n <button class=\"app-checkbox\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'app-checked': checked && !indeterminate, 'app-indeterminate': indeterminate }\">\n @if (checked && !indeterminate) {\n <i\n class=\"material-icons app-checkbox-icon\">done</i>\n }\n @if (indeterminate) {\n <i\n class=\"material-icons app-checkbox-icon\">remove</i>\n }\n </button>\n @if (label || supportingText) {\n <div class=\"app-checkbox-text-wrap\"\n >\n @if (label) {\n <div class=\"app-checkbox-label\"\n [ngStyle]=\"{'color': labelColor }\">\n @if (imageUrl) {\n <img class=\"checkbox-image\"\n [src]=\"imageUrl\"\n >\n }\n {{ label }}\n </div>\n }\n @if (supportingText) {\n <div class=\"app-checkbox-supporting-text\"\n >\n {{ supportingText }}\n </div>\n }\n </div>\n }\n</div>\n", styles: [".checkbox-component{display:flex;align-items:flex-start;cursor:pointer;gap:8px}.checkbox-component .app-checkbox{padding:0;position:relative;width:16px;min-width:16px;height:16px;min-height:16px;border:1px solid #D0D5DD;border-radius:4px;box-sizing:border-box;color:#fff;background:#fff;cursor:pointer;margin-top:2px}.checkbox-component .app-checkbox:focus{outline:none;border-color:#88c1f1;box-shadow:0 0 0 4px #f4ebff}.checkbox-component .app-checkbox:disabled{cursor:not-allowed}.checkbox-component .app-checkbox.app-checked,.checkbox-component .app-checkbox.app-indeterminate{border-color:#136ab6;color:#136ab6;background:#f1f7fe}.checkbox-component .app-checkbox .app-checkbox-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px}.checkbox-component .app-checkbox-text-wrap{display:flex;flex-direction:column}.checkbox-component .app-checkbox-label{font-weight:500;font-size:14px;line-height:20px;color:#344054;display:flex;align-items:center}.checkbox-component .app-checkbox-label .checkbox-image{margin-right:8px;width:36px}.checkbox-component .app-checkbox-supporting-text{font-weight:400;font-size:14px;line-height:20px;color:#667085}.checkbox-component:hover,.checkbox-component:focus{outline:none;text-decoration:none}.checkbox-component:hover .app-checkbox,.checkbox-component:focus .app-checkbox{background:#e3eefb;border-color:#136ab6}.checkbox-component:hover .app-checkbox.app-checked,.checkbox-component:focus .app-checkbox.app-checked{background:#e3eefb;border-color:#136ab6;color:#136ab6}.checkbox-component:hover .app-checkbox.app-indeterminate,.checkbox-component:focus .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.checkbox-component.app-disabled{cursor:not-allowed}.checkbox-component.app-disabled:hover .app-checkbox,.checkbox-component.app-disabled:focus .app-checkbox{background:#f2f4f7;border-color:#eaecf0}.checkbox-component.app-disabled:hover .app-checkbox.app-checked,.checkbox-component.app-disabled:focus .app-checkbox.app-checked{background:#f2f4f7;border-color:#eaecf0;color:#eaecf0}.checkbox-component.app-disabled:hover .app-checkbox.app-indeterminate,.checkbox-component.app-disabled:focus .app-checkbox.app-indeterminate{background:#f2f4f7;border-color:#eaecf0;color:#eaecf0}.checkbox-component.app-disabled .app-checkbox{border-color:#eaecf0;background:#f2f4f7}.checkbox-component.app-disabled .app-checkbox.app-checked,.checkbox-component.app-disabled .app-checkbox.app-indeterminate{border-color:#eaecf0;color:#eaecf0;background:#f2f4f7}.checkbox-component.app-disabled .app-checkbox-label,.checkbox-component.app-disabled .app-checkbox-supporting-text{color:#d0d5dd}.checkbox-component.checkbox-md{gap:12px}.checkbox-component.checkbox-md .app-checkbox{width:20px;min-width:20px;height:20px;min-height:20px;border-radius:6px;margin-top:2px}.checkbox-component.checkbox-md .app-checkbox .app-checkbox-icon{font-size:16px}.checkbox-component.checkbox-md .app-checkbox-label,.checkbox-component.checkbox-md .app-checkbox-supporting-text{font-size:16px;line-height:24px}\n"] }]
428
+ args: [{ selector: 'zen-checkbox', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"checkbox-component\"\n [ngClass]=\"{'app-disabled': disabled, 'checkbox-md': size === 'md'}\"\n (click)=\"toggle()\">\n <button class=\"app-checkbox\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'app-checked': checked && !indeterminate, 'app-indeterminate': indeterminate }\">\n @if (checked && !indeterminate) {\n <i\n class=\"material-icons app-checkbox-icon\">done</i>\n }\n @if (indeterminate) {\n <i\n class=\"material-icons app-checkbox-icon\">remove</i>\n }\n </button>\n @if (label || supportingText) {\n <div class=\"app-checkbox-text-wrap\"\n >\n @if (label) {\n <div class=\"app-checkbox-label\"\n [ngStyle]=\"{'color': labelColor }\">\n @if (imageUrl) {\n <img class=\"checkbox-image\"\n [src]=\"imageUrl\"\n >\n }\n {{ label }}\n </div>\n }\n @if (supportingText) {\n <div class=\"app-checkbox-supporting-text\"\n >\n {{ supportingText }}\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.checkbox-component{display:inline-flex;align-items:flex-start;cursor:pointer;gap:8px}.checkbox-component .app-checkbox{padding:0;position:relative;width:16px;min-width:16px;height:16px;min-height:16px;border:1px solid #D0D5DD;border-radius:4px;box-sizing:border-box;color:#fff;background:#fff;cursor:pointer;margin-top:2px}.checkbox-component .app-checkbox:focus{outline:none;border-color:#88c1f1;box-shadow:0 0 0 4px #f4ebff}.checkbox-component .app-checkbox:disabled{cursor:not-allowed}.checkbox-component .app-checkbox.app-checked,.checkbox-component .app-checkbox.app-indeterminate{border-color:#136ab6;color:#136ab6;background:#f1f7fe}.checkbox-component .app-checkbox .app-checkbox-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px}.checkbox-component .app-checkbox-text-wrap{display:flex;flex-direction:column}.checkbox-component .app-checkbox-label{font-weight:500;font-size:14px;line-height:20px;color:#344054;display:flex;align-items:center}.checkbox-component .app-checkbox-label .checkbox-image{margin-right:8px;width:36px}.checkbox-component .app-checkbox-supporting-text{font-weight:400;font-size:14px;line-height:20px;color:#667085}.checkbox-component:hover,.checkbox-component:focus{outline:none;text-decoration:none}.checkbox-component:hover .app-checkbox,.checkbox-component:focus .app-checkbox{background:#e3eefb;border-color:#136ab6}.checkbox-component:hover .app-checkbox.app-checked,.checkbox-component:focus .app-checkbox.app-checked{background:#e3eefb;border-color:#136ab6;color:#136ab6}.checkbox-component:hover .app-checkbox.app-indeterminate,.checkbox-component:focus .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.checkbox-component.app-disabled{cursor:not-allowed}.checkbox-component.app-disabled:hover .app-checkbox,.checkbox-component.app-disabled:focus .app-checkbox{background:#f2f4f7;border-color:#eaecf0}.checkbox-component.app-disabled:hover .app-checkbox.app-checked,.checkbox-component.app-disabled:focus .app-checkbox.app-checked{background:#f2f4f7;border-color:#eaecf0;color:#eaecf0}.checkbox-component.app-disabled:hover .app-checkbox.app-indeterminate,.checkbox-component.app-disabled:focus .app-checkbox.app-indeterminate{background:#f2f4f7;border-color:#eaecf0;color:#eaecf0}.checkbox-component.app-disabled .app-checkbox{border-color:#eaecf0;background:#f2f4f7}.checkbox-component.app-disabled .app-checkbox.app-checked,.checkbox-component.app-disabled .app-checkbox.app-indeterminate{border-color:#eaecf0;color:#eaecf0;background:#f2f4f7}.checkbox-component.app-disabled .app-checkbox-label,.checkbox-component.app-disabled .app-checkbox-supporting-text{color:#d0d5dd}.checkbox-component.checkbox-md{gap:12px}.checkbox-component.checkbox-md .app-checkbox{width:20px;min-width:20px;height:20px;min-height:20px;border-radius:6px;margin-top:2px}.checkbox-component.checkbox-md .app-checkbox .app-checkbox-icon{font-size:16px}.checkbox-component.checkbox-md .app-checkbox-label,.checkbox-component.checkbox-md .app-checkbox-supporting-text{font-size:16px;line-height:24px}\n"] }]
429
429
  }], propDecorators: { checked: [{
430
430
  type: Input
431
431
  }], checkedChange: [{
@@ -578,63 +578,10 @@ class Util {
578
578
  };
579
579
  }
580
580
  static clone(source) {
581
- let str = JSON.stringify(source);
582
- let outObj = JSON.parse(str);
583
- this.updateClone(outObj);
584
- // Convert in the output object ISO string to Date object
585
- //
586
- // @ts-ignore
587
- for (let key of Object.keys(source)) {
588
- const val = source[key];
589
- if (val &&
590
- typeof val == "object" &&
591
- typeof val.getTime == "function" &&
592
- typeof val.getDate == "function") {
593
- outObj[key] = new Date(val);
594
- }
595
- }
596
- return outObj;
597
- }
598
- /**
599
- * Remove internal angularjs properties
600
- * @param obj
601
- */
602
- static updateClone(obj) {
603
- if (!obj) {
604
- return;
605
- }
606
- if (Array.isArray(obj)) {
607
- for (let item of obj) {
608
- if (!item) {
609
- item = item;
610
- }
611
- this.updateClone(item);
612
- }
613
- return;
614
- }
615
- let type = typeof obj;
616
- if (type == "string" || type == "number") {
617
- return;
618
- }
619
- // Remove invalid props
620
- let keys = Object.keys(obj);
621
- keys.forEach((key) => {
622
- if (key[0] == '$' ||
623
- key[0] == '&') {
624
- delete obj[key];
625
- return;
626
- }
627
- let val = obj[key];
628
- if (Array.isArray(val)) {
629
- let arr = val;
630
- for (let k of arr) {
631
- this.updateClone(k);
632
- }
633
- }
634
- else if (typeof val == "object") {
635
- this.updateClone(val);
636
- }
637
- });
581
+ // structuredClone deep-clones while preserving Date (and Map/Set/etc.),
582
+ // so nested dates survive intact — unlike a JSON round-trip, which turns
583
+ // them into ISO strings.
584
+ return structuredClone(source);
638
585
  }
639
586
  static copyProperties(source, dest) {
640
587
  for (let key of Object.keys(source)) {
@@ -1423,11 +1370,11 @@ class ZenduSearchBoxComponent {
1423
1370
  return null;
1424
1371
  }
1425
1372
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSearchBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
1426
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduSearchBoxComponent, isStandalone: false, selector: "zen-search-box", inputs: { text: "text", delay: "delay", autoFocus: "autoFocus", disabled: "disabled", placeholder: "placeholder" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div class=\"search-box-component\"\n [class.has-text]=\"text\">\n <zen-input [(ngModel)]=\"text\"\n [placeholder]=\"placeholder | translate\"\n [disabled]=\"disabled\"\n leadingIcon=\"search\"\n autocomplete=\"off\"\n (ngModelChange)=\"onChange()\">\n </zen-input>\n @if (text) {\n <i class=\"material-icons close-icon\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"clear(); $event.stopPropagation()\">close</i>\n }\n</div>\n", styles: [".search-box-component{position:relative;width:100%}.search-box-component ::ng-deep .zen-input-field-wrapper{height:40px!important;min-height:auto!important;padding:8px 14px!important}.search-box-component.has-text ::ng-deep .zen-input-field{padding-right:24px}.search-box-component .close-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);color:#828282;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1}\n"], dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduInputComponent, selector: "zen-input", inputs: ["type", "variant", "placeholder", "label", "hintText", "leadingIcon", "helpIcon", "helpTooltip", "destructive", "errorMessage", "disabled", "required", "maxLength", "minLength", "pattern", "min", "max", "step", "autocomplete", "name", "id", "leadingDropdownOptions", "leadingDropdownValue", "leadingDropdownPlaceholder", "trailingDropdownOptions", "trailingDropdownValue", "trailingDropdownPlaceholder", "leadingText", "trailingText", "multiline", "rows", "resizable", "size", "showCharacterCount", "phoneMaxLength", "phone", "width"], outputs: ["valueChange", "inputFocus", "inputBlur", "inputKeydown", "inputKeyup", "leadingDropdownChange", "leadingDropdownValueChange", "trailingDropdownChange", "trailingDropdownValueChange", "phoneChange", "validChange", "leadingIconClick"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
1373
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduSearchBoxComponent, isStandalone: false, selector: "zen-search-box", inputs: { text: "text", delay: "delay", autoFocus: "autoFocus", disabled: "disabled", placeholder: "placeholder" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div class=\"search-box-component\"\n [class.has-text]=\"text\"\n [class.disabled]=\"disabled\">\n <zen-input [(ngModel)]=\"text\"\n [placeholder]=\"placeholder | translate\"\n [disabled]=\"disabled\"\n leadingIcon=\"search\"\n autocomplete=\"off\"\n (ngModelChange)=\"onChange()\">\n </zen-input>\n @if (text) {\n <i class=\"material-icons close-icon\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"clear(); $event.stopPropagation()\">close</i>\n }\n</div>\n", styles: [".search-box-component{position:relative;width:100%}.search-box-component ::ng-deep .zen-input-field-wrapper{height:40px!important;min-height:auto!important;padding:8px 14px!important}.search-box-component .close-icon{position:absolute;top:50%;right:6px;transform:translateY(-50%);color:#828282;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1;background:#fff;padding:4px 6px;border-radius:4px}.search-box-component.disabled .close-icon{background:#f9fafb}\n"], dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduInputComponent, selector: "zen-input", inputs: ["type", "variant", "placeholder", "label", "hintText", "leadingIcon", "helpIcon", "helpTooltip", "destructive", "errorMessage", "disabled", "required", "maxLength", "minLength", "pattern", "min", "max", "step", "autocomplete", "name", "id", "leadingDropdownOptions", "leadingDropdownValue", "leadingDropdownPlaceholder", "trailingDropdownOptions", "trailingDropdownValue", "trailingDropdownPlaceholder", "leadingText", "trailingText", "multiline", "rows", "resizable", "size", "showCharacterCount", "phoneMaxLength", "phone", "width"], outputs: ["valueChange", "inputFocus", "inputBlur", "inputKeydown", "inputKeyup", "leadingDropdownChange", "leadingDropdownValueChange", "trailingDropdownChange", "trailingDropdownValueChange", "phoneChange", "validChange", "leadingIconClick"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
1427
1374
  }
1428
1375
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSearchBoxComponent, decorators: [{
1429
1376
  type: Component,
1430
- args: [{ selector: 'zen-search-box', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"search-box-component\"\n [class.has-text]=\"text\">\n <zen-input [(ngModel)]=\"text\"\n [placeholder]=\"placeholder | translate\"\n [disabled]=\"disabled\"\n leadingIcon=\"search\"\n autocomplete=\"off\"\n (ngModelChange)=\"onChange()\">\n </zen-input>\n @if (text) {\n <i class=\"material-icons close-icon\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"clear(); $event.stopPropagation()\">close</i>\n }\n</div>\n", styles: [".search-box-component{position:relative;width:100%}.search-box-component ::ng-deep .zen-input-field-wrapper{height:40px!important;min-height:auto!important;padding:8px 14px!important}.search-box-component.has-text ::ng-deep .zen-input-field{padding-right:24px}.search-box-component .close-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);color:#828282;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1}\n"] }]
1377
+ args: [{ selector: 'zen-search-box', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"search-box-component\"\n [class.has-text]=\"text\"\n [class.disabled]=\"disabled\">\n <zen-input [(ngModel)]=\"text\"\n [placeholder]=\"placeholder | translate\"\n [disabled]=\"disabled\"\n leadingIcon=\"search\"\n autocomplete=\"off\"\n (ngModelChange)=\"onChange()\">\n </zen-input>\n @if (text) {\n <i class=\"material-icons close-icon\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"clear(); $event.stopPropagation()\">close</i>\n }\n</div>\n", styles: [".search-box-component{position:relative;width:100%}.search-box-component ::ng-deep .zen-input-field-wrapper{height:40px!important;min-height:auto!important;padding:8px 14px!important}.search-box-component .close-icon{position:absolute;top:50%;right:6px;transform:translateY(-50%);color:#828282;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1;background:#fff;padding:4px 6px;border-radius:4px}.search-box-component.disabled .close-icon{background:#f9fafb}\n"] }]
1431
1378
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { text: [{
1432
1379
  type: Input
1433
1380
  }], textChange: [{
@@ -3527,11 +3474,11 @@ class ZenduDatePickerDropdownComponent {
3527
3474
  return moment(day.date).isSame(moment(this._selectedEnd), 'day');
3528
3475
  }
3529
3476
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatePickerDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i2.TranslateService }, { token: ZEN_DATE_PICKER_DEFAULT_PRESETS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
3530
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduDatePickerDropdownComponent, isStandalone: false, selector: "zen-date-picker-dropdown", inputs: { type: "type", date: "date", startDate: "startDate", endDate: "endDate", presets: "presets", minDate: "minDate", maxDate: "maxDate", disabled: "disabled", dateMarkers: "dateMarkers", placeholder: "placeholder", mobileBreakpoint: "mobileBreakpoint", timePicker: "timePicker", autoApply: "autoApply", hideTrigger: "hideTrigger", label: "label", required: "required", size: "size" }, outputs: { dateChange: "dateChange", startDateChange: "startDateChange", endDateChange: "endDateChange", rangeChange: "rangeChange" }, host: { listeners: { "window:resize": "onResize()", "window:mousedown": "outsideHandling($event)" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-dpd\">\n <!-- Field label -->\n @if (label) {\n <label class=\"zen-dpd-label\">\n {{ label }}\n @if (required) {\n <span class=\"zen-dpd-required\">*</span>\n }\n </label>\n }\n\n <!-- Trigger Button -->\n @if (!hideTrigger) {\n <button class=\"dropdown-trigger\"\n #triggerBtn\n [class.size-form]=\"size === 'form'\"\n [disabled]=\"disabled\"\n [class.active]=\"isOpen\"\n [class.has-value]=\"hasValue\"\n (click)=\"toggle()\">\n <zen-icon class=\"trigger-icon\"\n src=\"assets/ng-zenduit/icons/calendar.svg\">\n </zen-icon>\n <span class=\"trigger-label\">{{ triggerLabel }}</span>\n </button>\n }\n\n <!-- Dropdown Panel -->\n @if (isOpen) {\n <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n @if (type === 'range' && !mobile) {\n <!-- Presets sidebar -->\n <div class=\"presets-sidebar\">\n @for (preset of activePresets; track preset) {\n <div class=\"preset-item\"\n [class.active]=\"_activePreset === preset.label\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label | translate }}\n </div>\n }\n </div>\n <div class=\"sidebar-divider\"></div>\n <!-- Calendars + bottom panel -->\n <div class=\"calendars-container\">\n <div class=\"dual-calendars\">\n <!-- Left calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n </div>\n <div class=\"calendar-divider\"></div>\n <!-- Right calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ rightDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n </div>\n </div>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <!-- Bottom panel: inputs (or legend) + actions -->\n <div class=\"bottom-panel\">\n @if (legendMarkers.length) {\n <div class=\"marker-legend\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"input-fields\">\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n </span>\n </div>\n </div>\n }\n <div class=\"actions\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n @if (type === 'range' && mobile) {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Range inputs -->\n <div class=\"mobile-range-inputs\">\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n </span>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- SINGLE DATE: single calendar + input + today button -->\n @if (type === 'single') {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Date input + Today button -->\n <div class=\"single-actions-row\">\n <div class=\"date-input flex-1\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n </span>\n </div>\n <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start' }\"></ng-container>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone single\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n @if (!autoApply) {\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection let-target=\"target\" let-label=\"label\">\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-label\">{{ (label || 'Select a time') | translate }}</span>\n <div class=\"time-picker-row\">\n <div class=\"time-fields\">\n <!-- Hours -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endHoursDisplay : _hoursDisplay\"\n (input)=\"onHoursInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours(target)\"\n (keydown)=\"onTimeKeydown($event, 'hours', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n </div>\n\n <!-- Colon separator -->\n <div class=\"time-colon\">:</div>\n\n <!-- Minutes -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endMinutesDisplay : _minutesDisplay\"\n (input)=\"onMinutesInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes(target)\"\n (keydown)=\"onTimeKeydown($event, 'minutes', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n </div>\n </div>\n\n <!-- AM/PM toggle -->\n <div class=\"time-period-toggle\">\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'AM'\"\n (click)=\"setPeriod('AM', target)\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'PM'\"\n (click)=\"setPeriod('PM', target)\">\n PM\n </button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n <div class=\"dates-grid\">\n <!-- Week day headers -->\n <div class=\"week-header\">\n @for (wd of weekDays; track wd) {\n <div class=\"cell header-cell\">{{ wd | translate }}</div>\n }\n </div>\n <!-- Day rows -->\n @for (row of dayRows; track row) {\n <div class=\"day-row\">\n @for (day of row.days; track day) {\n <div class=\"cell day-cell\"\n [class.outside]=\"day.isOutside\"\n [class.selected]=\"day.selected\"\n [class.today]=\"isToday(day)\"\n [class.disabled]=\"day.isDisabled\"\n [class.in-range]=\"isInRange(day)\"\n [class.range-start]=\"isRangeStart(day)\"\n [class.range-end]=\"isRangeEnd(day)\"\n (click)=\"selectDay(day)\">\n <span class=\"day-number\">{{ day.lbl }}</span>\n @if (day.markerColors?.length) {\n <div class=\"marker-dots\">\n @for (c of day.markerColors; track c) {\n <span class=\"marker-dot\"\n [style.background]=\"c || null\"></span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.zen-dpd-label{display:block;margin-bottom:6px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054}.zen-dpd-label .zen-dpd-required{color:#f04438}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.dropdown-trigger.size-form{height:46px}.dropdown-trigger{box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content;max-height:calc(100vh - 32px);max-width:calc(100vw - 32px)}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start;width:280px}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-pickers-dual{display:flex;align-items:stretch}.time-pickers-dual>.time-picker-container{box-sizing:border-box;min-width:0}.time-pickers-dual>.time-picker-container:first-child{flex:0 0 328px;width:328px}.time-pickers-dual>.time-picker-container:last-child{flex:1 1 auto}.time-pickers-divider{width:1px;min-width:1px;background:#eaecf0;align-self:stretch;flex-shrink:0}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.calendars-container:has(.time-pickers-dual) .bottom-panel{column-gap:16px}.calendars-container:has(.time-pickers-dual) .bottom-panel .input-fields,.calendars-container:has(.time-pickers-dual) .bottom-panel .actions{flex-shrink:0}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
3477
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduDatePickerDropdownComponent, isStandalone: false, selector: "zen-date-picker-dropdown", inputs: { type: "type", date: "date", startDate: "startDate", endDate: "endDate", presets: "presets", minDate: "minDate", maxDate: "maxDate", disabled: "disabled", dateMarkers: "dateMarkers", placeholder: "placeholder", mobileBreakpoint: "mobileBreakpoint", timePicker: "timePicker", autoApply: "autoApply", hideTrigger: "hideTrigger", label: "label", required: "required", size: "size" }, outputs: { dateChange: "dateChange", startDateChange: "startDateChange", endDateChange: "endDateChange", rangeChange: "rangeChange" }, host: { listeners: { "window:resize": "onResize()", "window:mousedown": "outsideHandling($event)" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-dpd\">\n <!-- Field label -->\n @if (label) {\n <label class=\"zen-dpd-label\">\n {{ label }}\n @if (required) {\n <span class=\"zen-dpd-required\">*</span>\n }\n </label>\n }\n\n <!-- Trigger Button -->\n @if (!hideTrigger) {\n <button class=\"dropdown-trigger\"\n #triggerBtn\n [class.size-form]=\"size === 'form'\"\n [disabled]=\"disabled\"\n [class.active]=\"isOpen\"\n [class.has-value]=\"hasValue\"\n (click)=\"toggle()\">\n <zen-icon class=\"trigger-icon\"\n src=\"assets/ng-zenduit/icons/calendar.svg\">\n </zen-icon>\n <span class=\"trigger-label\">{{ triggerLabel }}</span>\n </button>\n }\n\n <!-- Dropdown Panel -->\n @if (isOpen) {\n <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n @if (type === 'range' && !mobile) {\n <!-- Presets sidebar -->\n <div class=\"presets-sidebar\">\n @for (preset of activePresets; track preset) {\n <div class=\"preset-item\"\n [class.active]=\"_activePreset === preset.label\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label | translate }}\n </div>\n }\n </div>\n <div class=\"sidebar-divider\"></div>\n <!-- Calendars + bottom panel -->\n <div class=\"calendars-container\">\n <div class=\"dual-calendars\">\n <!-- Left calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n </div>\n <div class=\"calendar-divider\"></div>\n <!-- Right calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ rightDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n </div>\n </div>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <!-- Bottom panel: inputs (or legend) + actions -->\n <div class=\"bottom-panel\">\n @if (legendMarkers.length) {\n <div class=\"marker-legend\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"input-fields\">\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n </span>\n </div>\n </div>\n }\n <div class=\"actions\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n @if (type === 'range' && mobile) {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Range inputs -->\n <div class=\"mobile-range-inputs\">\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n </span>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- SINGLE DATE: single calendar + input + today button -->\n @if (type === 'single') {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Date input + Today button -->\n <div class=\"single-actions-row\">\n <div class=\"date-input flex-1\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n </span>\n </div>\n <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start' }\"></ng-container>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone single\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n @if (!autoApply) {\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection let-target=\"target\" let-label=\"label\">\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-label\">{{ (label || 'Select a time') | translate }}</span>\n <div class=\"time-picker-row\">\n <div class=\"time-fields\">\n <!-- Hours -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endHoursDisplay : _hoursDisplay\"\n (input)=\"onHoursInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours(target)\"\n (keydown)=\"onTimeKeydown($event, 'hours', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n </div>\n\n <!-- Colon separator -->\n <div class=\"time-colon\">:</div>\n\n <!-- Minutes -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endMinutesDisplay : _minutesDisplay\"\n (input)=\"onMinutesInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes(target)\"\n (keydown)=\"onTimeKeydown($event, 'minutes', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n </div>\n </div>\n\n <!-- AM/PM toggle -->\n <div class=\"time-period-toggle\">\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'AM'\"\n (click)=\"setPeriod('AM', target)\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'PM'\"\n (click)=\"setPeriod('PM', target)\">\n PM\n </button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n <div class=\"dates-grid\">\n <!-- Week day headers -->\n <div class=\"week-header\">\n @for (wd of weekDays; track wd) {\n <div class=\"cell header-cell\">{{ wd | translate }}</div>\n }\n </div>\n <!-- Day rows -->\n @for (row of dayRows; track row) {\n <div class=\"day-row\">\n @for (day of row.days; track day) {\n <div class=\"cell day-cell\"\n [class.outside]=\"day.isOutside\"\n [class.selected]=\"day.selected\"\n [class.today]=\"isToday(day)\"\n [class.disabled]=\"day.isDisabled\"\n [class.in-range]=\"isInRange(day)\"\n [class.range-start]=\"isRangeStart(day)\"\n [class.range-end]=\"isRangeEnd(day)\"\n (click)=\"selectDay(day)\">\n <span class=\"day-number\">{{ day.lbl }}</span>\n @if (day.markerColors?.length) {\n <div class=\"marker-dots\">\n @for (c of day.markerColors; track c) {\n <span class=\"marker-dot\"\n [style.background]=\"c || null\"></span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.zen-dpd-label{display:block;margin-bottom:6px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054}.zen-dpd-label .zen-dpd-required{color:#f04438}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.dropdown-trigger.size-form{height:46px}.dropdown-trigger{box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content;max-height:calc(100vh - 32px);max-width:calc(100vw - 32px)}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:16px;gap:12px}.single-calendar-container{display:flex;flex-direction:column}.month-header{display:flex;align-items:center;justify-content:space-between}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;align-self:center;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-pickers-dual{display:flex;align-items:stretch}.time-pickers-dual>.time-picker-container{box-sizing:border-box;min-width:0}.time-pickers-dual>.time-picker-container:first-child{flex:0 0 328px;width:328px}.time-pickers-dual>.time-picker-container:last-child{flex:1 1 auto}.time-pickers-divider{width:1px;min-width:1px;background:#eaecf0;align-self:stretch;flex-shrink:0}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px}.bottom-panel.compact{justify-content:flex-end}.calendars-container:has(.time-pickers-dual) .bottom-panel{column-gap:16px}.calendars-container:has(.time-pickers-dual) .bottom-panel .input-fields,.calendars-container:has(.time-pickers-dual) .bottom-panel .actions{flex-shrink:0}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
3531
3478
  }
3532
3479
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatePickerDropdownComponent, decorators: [{
3533
3480
  type: Component,
3534
- args: [{ selector: 'zen-date-picker-dropdown', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-dpd\">\n <!-- Field label -->\n @if (label) {\n <label class=\"zen-dpd-label\">\n {{ label }}\n @if (required) {\n <span class=\"zen-dpd-required\">*</span>\n }\n </label>\n }\n\n <!-- Trigger Button -->\n @if (!hideTrigger) {\n <button class=\"dropdown-trigger\"\n #triggerBtn\n [class.size-form]=\"size === 'form'\"\n [disabled]=\"disabled\"\n [class.active]=\"isOpen\"\n [class.has-value]=\"hasValue\"\n (click)=\"toggle()\">\n <zen-icon class=\"trigger-icon\"\n src=\"assets/ng-zenduit/icons/calendar.svg\">\n </zen-icon>\n <span class=\"trigger-label\">{{ triggerLabel }}</span>\n </button>\n }\n\n <!-- Dropdown Panel -->\n @if (isOpen) {\n <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n @if (type === 'range' && !mobile) {\n <!-- Presets sidebar -->\n <div class=\"presets-sidebar\">\n @for (preset of activePresets; track preset) {\n <div class=\"preset-item\"\n [class.active]=\"_activePreset === preset.label\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label | translate }}\n </div>\n }\n </div>\n <div class=\"sidebar-divider\"></div>\n <!-- Calendars + bottom panel -->\n <div class=\"calendars-container\">\n <div class=\"dual-calendars\">\n <!-- Left calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n </div>\n <div class=\"calendar-divider\"></div>\n <!-- Right calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ rightDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n </div>\n </div>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <!-- Bottom panel: inputs (or legend) + actions -->\n <div class=\"bottom-panel\">\n @if (legendMarkers.length) {\n <div class=\"marker-legend\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"input-fields\">\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n </span>\n </div>\n </div>\n }\n <div class=\"actions\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n @if (type === 'range' && mobile) {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Range inputs -->\n <div class=\"mobile-range-inputs\">\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n </span>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- SINGLE DATE: single calendar + input + today button -->\n @if (type === 'single') {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Date input + Today button -->\n <div class=\"single-actions-row\">\n <div class=\"date-input flex-1\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n </span>\n </div>\n <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start' }\"></ng-container>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone single\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n @if (!autoApply) {\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection let-target=\"target\" let-label=\"label\">\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-label\">{{ (label || 'Select a time') | translate }}</span>\n <div class=\"time-picker-row\">\n <div class=\"time-fields\">\n <!-- Hours -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endHoursDisplay : _hoursDisplay\"\n (input)=\"onHoursInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours(target)\"\n (keydown)=\"onTimeKeydown($event, 'hours', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n </div>\n\n <!-- Colon separator -->\n <div class=\"time-colon\">:</div>\n\n <!-- Minutes -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endMinutesDisplay : _minutesDisplay\"\n (input)=\"onMinutesInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes(target)\"\n (keydown)=\"onTimeKeydown($event, 'minutes', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n </div>\n </div>\n\n <!-- AM/PM toggle -->\n <div class=\"time-period-toggle\">\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'AM'\"\n (click)=\"setPeriod('AM', target)\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'PM'\"\n (click)=\"setPeriod('PM', target)\">\n PM\n </button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n <div class=\"dates-grid\">\n <!-- Week day headers -->\n <div class=\"week-header\">\n @for (wd of weekDays; track wd) {\n <div class=\"cell header-cell\">{{ wd | translate }}</div>\n }\n </div>\n <!-- Day rows -->\n @for (row of dayRows; track row) {\n <div class=\"day-row\">\n @for (day of row.days; track day) {\n <div class=\"cell day-cell\"\n [class.outside]=\"day.isOutside\"\n [class.selected]=\"day.selected\"\n [class.today]=\"isToday(day)\"\n [class.disabled]=\"day.isDisabled\"\n [class.in-range]=\"isInRange(day)\"\n [class.range-start]=\"isRangeStart(day)\"\n [class.range-end]=\"isRangeEnd(day)\"\n (click)=\"selectDay(day)\">\n <span class=\"day-number\">{{ day.lbl }}</span>\n @if (day.markerColors?.length) {\n <div class=\"marker-dots\">\n @for (c of day.markerColors; track c) {\n <span class=\"marker-dot\"\n [style.background]=\"c || null\"></span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.zen-dpd-label{display:block;margin-bottom:6px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054}.zen-dpd-label .zen-dpd-required{color:#f04438}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.dropdown-trigger.size-form{height:46px}.dropdown-trigger{box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content;max-height:calc(100vh - 32px);max-width:calc(100vw - 32px)}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start;width:280px}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-pickers-dual{display:flex;align-items:stretch}.time-pickers-dual>.time-picker-container{box-sizing:border-box;min-width:0}.time-pickers-dual>.time-picker-container:first-child{flex:0 0 328px;width:328px}.time-pickers-dual>.time-picker-container:last-child{flex:1 1 auto}.time-pickers-divider{width:1px;min-width:1px;background:#eaecf0;align-self:stretch;flex-shrink:0}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.calendars-container:has(.time-pickers-dual) .bottom-panel{column-gap:16px}.calendars-container:has(.time-pickers-dual) .bottom-panel .input-fields,.calendars-container:has(.time-pickers-dual) .bottom-panel .actions{flex-shrink:0}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"] }]
3481
+ args: [{ selector: 'zen-date-picker-dropdown', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-dpd\">\n <!-- Field label -->\n @if (label) {\n <label class=\"zen-dpd-label\">\n {{ label }}\n @if (required) {\n <span class=\"zen-dpd-required\">*</span>\n }\n </label>\n }\n\n <!-- Trigger Button -->\n @if (!hideTrigger) {\n <button class=\"dropdown-trigger\"\n #triggerBtn\n [class.size-form]=\"size === 'form'\"\n [disabled]=\"disabled\"\n [class.active]=\"isOpen\"\n [class.has-value]=\"hasValue\"\n (click)=\"toggle()\">\n <zen-icon class=\"trigger-icon\"\n src=\"assets/ng-zenduit/icons/calendar.svg\">\n </zen-icon>\n <span class=\"trigger-label\">{{ triggerLabel }}</span>\n </button>\n }\n\n <!-- Dropdown Panel -->\n @if (isOpen) {\n <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n @if (type === 'range' && !mobile) {\n <!-- Presets sidebar -->\n <div class=\"presets-sidebar\">\n @for (preset of activePresets; track preset) {\n <div class=\"preset-item\"\n [class.active]=\"_activePreset === preset.label\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label | translate }}\n </div>\n }\n </div>\n <div class=\"sidebar-divider\"></div>\n <!-- Calendars + bottom panel -->\n <div class=\"calendars-container\">\n <div class=\"dual-calendars\">\n <!-- Left calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n </div>\n <div class=\"calendar-divider\"></div>\n <!-- Right calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ rightDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n </div>\n </div>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <!-- Bottom panel: inputs (or legend) + actions -->\n <div class=\"bottom-panel\">\n @if (legendMarkers.length) {\n <div class=\"marker-legend\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"input-fields\">\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n </span>\n </div>\n </div>\n }\n <div class=\"actions\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n @if (type === 'range' && mobile) {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Range inputs -->\n <div class=\"mobile-range-inputs\">\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">&ndash;</span>\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n </span>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- SINGLE DATE: single calendar + input + today button -->\n @if (type === 'single') {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Date input + Today button -->\n <div class=\"single-actions-row\">\n <div class=\"date-input flex-1\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n </span>\n </div>\n <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start' }\"></ng-container>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone single\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n @if (!autoApply) {\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection let-target=\"target\" let-label=\"label\">\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-label\">{{ (label || 'Select a time') | translate }}</span>\n <div class=\"time-picker-row\">\n <div class=\"time-fields\">\n <!-- Hours -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endHoursDisplay : _hoursDisplay\"\n (input)=\"onHoursInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours(target)\"\n (keydown)=\"onTimeKeydown($event, 'hours', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n </div>\n\n <!-- Colon separator -->\n <div class=\"time-colon\">:</div>\n\n <!-- Minutes -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endMinutesDisplay : _minutesDisplay\"\n (input)=\"onMinutesInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes(target)\"\n (keydown)=\"onTimeKeydown($event, 'minutes', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n </div>\n </div>\n\n <!-- AM/PM toggle -->\n <div class=\"time-period-toggle\">\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'AM'\"\n (click)=\"setPeriod('AM', target)\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'PM'\"\n (click)=\"setPeriod('PM', target)\">\n PM\n </button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n <div class=\"dates-grid\">\n <!-- Week day headers -->\n <div class=\"week-header\">\n @for (wd of weekDays; track wd) {\n <div class=\"cell header-cell\">{{ wd | translate }}</div>\n }\n </div>\n <!-- Day rows -->\n @for (row of dayRows; track row) {\n <div class=\"day-row\">\n @for (day of row.days; track day) {\n <div class=\"cell day-cell\"\n [class.outside]=\"day.isOutside\"\n [class.selected]=\"day.selected\"\n [class.today]=\"isToday(day)\"\n [class.disabled]=\"day.isDisabled\"\n [class.in-range]=\"isInRange(day)\"\n [class.range-start]=\"isRangeStart(day)\"\n [class.range-end]=\"isRangeEnd(day)\"\n (click)=\"selectDay(day)\">\n <span class=\"day-number\">{{ day.lbl }}</span>\n @if (day.markerColors?.length) {\n <div class=\"marker-dots\">\n @for (c of day.markerColors; track c) {\n <span class=\"marker-dot\"\n [style.background]=\"c || null\"></span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.zen-dpd-label{display:block;margin-bottom:6px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054}.zen-dpd-label .zen-dpd-required{color:#f04438}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.dropdown-trigger.size-form{height:46px}.dropdown-trigger{box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content;max-height:calc(100vh - 32px);max-width:calc(100vw - 32px)}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:16px;gap:12px}.single-calendar-container{display:flex;flex-direction:column}.month-header{display:flex;align-items:center;justify-content:space-between}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;align-self:center;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-pickers-dual{display:flex;align-items:stretch}.time-pickers-dual>.time-picker-container{box-sizing:border-box;min-width:0}.time-pickers-dual>.time-picker-container:first-child{flex:0 0 328px;width:328px}.time-pickers-dual>.time-picker-container:last-child{flex:1 1 auto}.time-pickers-divider{width:1px;min-width:1px;background:#eaecf0;align-self:stretch;flex-shrink:0}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px}.bottom-panel.compact{justify-content:flex-end}.calendars-container:has(.time-pickers-dual) .bottom-panel{column-gap:16px}.calendars-container:has(.time-pickers-dual) .bottom-panel .input-fields,.calendars-container:has(.time-pickers-dual) .bottom-panel .actions{flex-shrink:0}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"] }]
3535
3482
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.TranslateService }, { type: undefined, decorators: [{
3536
3483
  type: Optional
3537
3484
  }, {
@@ -4453,15 +4400,19 @@ class ZenduFilterComponent {
4453
4400
  }
4454
4401
  // For tree items, zen-groups handles cascade internally
4455
4402
  }
4456
- // Lets a click anywhere on a multiselect row toggle its checkbox. Needed for
4457
- // badge rows, where the visible label is a separate styled span and the
4458
- // checkbox itself carries no clickable text. The inner zen-checkbox stops
4459
- // click propagation, so a direct click on it toggles once via its own
4460
- // [(checked)] instead of being toggled again here.
4403
+ // The multiselect checkbox is presentational ([disableValueChange]), so the
4404
+ // whole row is the single click target: a click anywhere — box, label, badge
4405
+ // or the empty gap — toggles here exactly once.
4461
4406
  toggleDsItem(dsItem, item) {
4462
4407
  dsItem.checked = !dsItem.checked;
4463
4408
  this.checkChanged(dsItem, item);
4464
4409
  }
4410
+ // The Select All checkbox is presentational ([disableValueChange]), so its row
4411
+ // owns the click: flip the aggregate state here, then cascade to every item.
4412
+ toggleSelectAll(item) {
4413
+ item.isSelectedAll = !item.isSelectedAll;
4414
+ this.onSelectAll(item);
4415
+ }
4465
4416
  toggle() {
4466
4417
  // Assigning isVisible opens/closes the overlay (and focuses the search box)
4467
4418
  // via the setter; no manual placement/focus needed here.
@@ -4607,11 +4558,11 @@ class ZenduFilterComponent {
4607
4558
  return count;
4608
4559
  }
4609
4560
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFilterComponent, deps: [{ token: ZenduOverlayService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
4610
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduFilterComponent, isStandalone: false, selector: "zen-filter", inputs: { config: "config", filter: "filter", position: "position", resetBehavior: "resetBehavior", defaultFilter: "defaultFilter", isVisible: "isVisible", customTrigger: "customTrigger", imageUrl: "imageUrl", label: "label", triggerVariant: "triggerVariant", showOptions: "showOptions", customOptions: "customOptions", wrapperBodyClass: "wrapperBodyClass", customPosition: "customPosition" }, outputs: { filterChange: "filterChange", isVisibleChange: "isVisibleChange" }, viewQueries: [{ propertyName: "_componentElement", first: true, predicate: ["mainComponent"], descendants: true }, { propertyName: "filterPanel", first: true, predicate: ["filterPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"filters-component\"\n #mainComponent\n click-out=\"isVisible && hide()\">\n\n @if (!customTrigger) {\n <zen-button (click)=\"toggle()\"\n [variant]=\"hasActiveFilters ? 'secondary' : 'secondary-gray'\"\n class=\"filter {{hasActiveFilters ? 'applied' : ''}} {{triggerVariant === 'icon-only' ? 'icon-only' : ''}}\">\n @if (imageUrl) {\n <zen-icon [src]=\"imageUrl\"\n ></zen-icon>\n }\n @if (!imageUrl) {\n <zen-icon class=\"filter-icon\"\n name=\"filter\"></zen-icon>\n }\n @if (triggerVariant !== 'icon-only') {\n <span class=\"filter-label\">{{ (label || 'Filter') | translate }}</span>\n @if (appliedCount > 0) {\n <span class=\"filter-count-badge\">{{ appliedCount }}</span>\n }\n }\n </zen-button>\n <!-- Icon-only mode: count rendered as a corner badge overlapping the\n button's top-right (sibling of the button so it isn't clipped). -->\n @if (triggerVariant === 'icon-only' && appliedCount > 0) {\n <span class=\"filter-icon-badge\">{{ appliedCount }}</span>\n }\n }\n\n @if (customTrigger) {\n <ng-content></ng-content>\n }\n\n <!-- Filter panel (rendered into a CDK overlay via ZenduOverlayService;\n positioning/flip/clamping is handled there, not with absolute CSS) -->\n <ng-template #filterPanel>\n <div class=\"filter-menu\"\n [class.customTrigger]=\"customTrigger\">\n <div class=\"filter-menu__header\">\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"filter-menu__body\"\n ngClass=\"{{wrapperBodyClass}}\">\n @if (errorMessage.length) {\n @for (item of errorMessage; track item) {\n <li\n class=\"error-msg\">{{item | translate }}</li>\n }\n }\n\n @for (item of config.items; track item) {\n @if (isMenuIsVisible(item)) {\n <div [class]=\"'menu-item menu-item--' + item.type\">\n <!-- Divider between two filter -->\n @if (item.type === 'divider') {\n <p class=\"filter-divider\"></p>\n }\n <!-- Boolean toggle -->\n @if (item.type === 'toggle') {\n <div\n class=\"action-item toggle-row\"\n (click)=\"toggleEnabled(item)\">\n <div>{{item.title | translate}}</div>\n <zen-toggle [(enabled)]=\"item.enabled\"\n (click)=\"$event.stopPropagation()\"></zen-toggle>\n </div>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse) {\n <button class=\"action-item expander-item\"\n (click)=\"toggleItem(item)\">\n <span class=\"expander-title\">{{item.title | translate}}</span>\n <span class=\"expander-indicator\">\n @if (isItemFiltered(item)) {\n <span class=\"filter-section-dot\"></span>\n }\n <zen-icon class=\"expand-icon\"\n name=\"chevron-down\"\n [class.active]=\"item.expanded\"></zen-icon>\n </span>\n </button>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n <div class=\"action-item section-title\"\n >\n <span class=\"expander-title\">{{item.title | translate}}</span>\n @if (isItemFiltered(item)) {\n <span class=\"filter-section-dot\"></span>\n }\n </div>\n }\n @if (item.expanded || item.disableCollapse) {\n @switch (item.type) {\n <!-- Multiselect -->\n @case ('multiselect') {\n <div class=\"menu-item__content\">\n <!-- Lazy loading mode -->\n @if (item.isLazyLoading) {\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\"\n (click)=\"toggleDsItem(dsItem, item)\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n (click)=\"$event.stopPropagation()\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n @if (item.canLoadMore && !item.isLoadingNow) {\n <div\n class=\"action-item\">\n <zen-button variant=\"secondary-gray\"\n size=\"sm\"\n [fullWidth]=\"true\"\n (click)=\"loadMore(item, false)\">\n {{'Load More' | translate}}\n </zen-button>\n </div>\n }\n @if (item.isLoadingNow) {\n <div\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n }\n }\n @if (!item.isLazyLoading && !hasTreeData(item)) {\n @if (!item.hideSelectAll) {\n <div class=\"action-item-checkbox ds-item select-all\">\n @if (item.dataSource.length === item.filteredDataSource.length) {\n <zen-checkbox\n [(checked)]=\"item.isSelectedAll\"\n [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n [label]=\"'Select All' | translate\"\n (checkedChange)=\"onSelectAll(item)\">\n </zen-checkbox>\n }\n </div>\n }\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\"\n (click)=\"toggleDsItem(dsItem, item)\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n (click)=\"$event.stopPropagation()\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n }\n <!-- Tree view mode -->\n @if (!item.isLazyLoading && hasTreeData(item)) {\n <zen-groups\n [dataSource]=\"item.dataSource\"\n [filteredDataSource]=\"item.filteredDataSource\"\n [hideSelectAll]=\"item.hideSelectAll\"\n [inline]=\"true\"\n [hideSearch]=\"true\"\n [(isSelectedAll)]=\"item.isSelectedAll\"\n (checkedChange)=\"checkChanged($event, item)\">\n </zen-groups>\n }\n </div>\n }\n <!-- Date range picker -->\n @case ('dateRange') {\n <div class=\"menu-item__content\">\n <!-- Options date range view -->\n @if (item.dateRangeOptions?.length) {\n @for (option of item.dateRangeOptions; track option) {\n <div class=\"action-item-radio ds-item\">\n <zen-radio [value]=\"option.name\"\n [label]=\"option.name | translate\"\n [name]=\"item.key\"\n [selected]=\"selectedDateRangeOptions[item.key] === option.name\"\n (radioChange)=\"handleDateRangeOptionClick(item, option)\"></zen-radio>\n </div>\n }\n <div class=\"action-item-radio ds-item\">\n <zen-radio [value]=\"'Custom'\"\n [label]=\"'Custom' | translate\"\n [name]=\"item.key\"\n [selected]=\"selectedDateRangeOptions[item.key] === 'Custom'\"\n (radioChange)=\"handleCustomDateRangeClick(item)\"></zen-radio>\n </div>\n @if (selectedDateRangeOptions[item.key] === 'Custom') {\n <div class=\"filter-date-fields\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.dateRange.start\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [date]=\"item.dateRange.end\"\n [timePicker]=\"item.showTime\"\n (dateChange)=\"handleEndDateChange(item, $event)\">\n </zen-date-picker-dropdown>\n </div>\n </div>\n }\n }\n <!-- Default date range view -->\n @if (!item.dateRangeOptions?.length) {\n <div class=\"filter-date-fields\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.dateRange.start\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [date]=\"item.dateRange.end\"\n [timePicker]=\"item.showTime\"\n (dateChange)=\"handleEndDateChange(item, $event)\">\n </zen-date-picker-dropdown>\n </div>\n </div>\n }\n </div>\n }\n <!-- Date picker -->\n @case ('date') {\n <div class=\"filter-row menu-item__content\">\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.date\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n }\n <!-- Number range -->\n @case ('numberRange') {\n <div\n class=\"filter-row number-range-row menu-item__content\">\n <zen-input type=\"number\"\n size=\"sm\"\n [label]=\"'Min' | translate\"\n [(ngModel)]=\"item.numberRange.from\"></zen-input>\n <zen-input type=\"number\"\n size=\"sm\"\n [label]=\"'Max' | translate\"\n [(ngModel)]=\"item.numberRange.to\"></zen-input>\n </div>\n }\n <!-- Radio -->\n @case ('radio') {\n <div class=\"menu-item__content\">\n @for (option of item.radioOptions; track option) {\n <div\n class=\"action-item-radio ds-item\">\n <zen-radio [value]=\"option.id\"\n [label]=\"option.name | translate\"\n [name]=\"item.key\"\n [imageUrl]=\"option.imageUrl\"\n [selected]=\"option.selected\"\n (radioChange)=\"radioChanged($event, item)\"\n [disabled]=\"option.disabled\"></zen-radio>\n </div>\n }\n </div>\n }\n }\n }\n </div>\n }\n }\n @if (showNoFilterResult) {\n <span\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n }\n </div>\n\n <div class=\"filter-menu__footer\">\n <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n <div class=\"filter-footer-actions\">\n <zen-button variant=\"secondary-gray\"\n [destructive]=\"true\"\n [disabled]=\"resetDisabled\"\n (click)=\"reset()\">\n {{ (defaultFilter ? 'Reset Default' : 'Clear All') | translate }}\n </zen-button>\n <zen-button variant=\"primary\"\n (click)=\"apply()\">\n {{'Apply' | translate}}\n </zen-button>\n </div>\n </div>\n\n </div>\n </ng-template>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filter-menu{width:400px;max-width:100%;white-space:initial;display:flex;flex-direction:column;background:#fff;border-radius:8px;border:1px solid #eaecf0;overflow:hidden;z-index:10;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filter-menu__body .menu-item.menu-item--multiselect,.filter-menu__body .menu-item.menu-item--radio{gap:0}.filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:first-child,.filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:first-child,.filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:first-child,.filter-menu__body .menu-item.menu-item--radio .action-item-radio:first-child{margin-top:0}.filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:last-child,.filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:last-child,.filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:last-child,.filter-menu__body .menu-item.menu-item--radio .action-item-radio:last-child{margin-bottom:0}.filter-menu__body .menu-item__content{padding-left:8px}.filter-menu__body .action-item,.filter-menu__body .action-item-checkbox,.filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filter-menu__body .action-item:focus-within,.filter-menu__body .action-item-checkbox:focus-within,.filter-menu__body .action-item-radio:focus-within{background:transparent}.filter-menu__body .action-item:hover{background:transparent}.filter-menu__body .action-item-checkbox,.filter-menu__body .action-item-radio{margin-left:-8px;margin-right:0;padding-left:8px;padding-right:8px;border-radius:6px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .action-item-checkbox:hover,.filter-menu__body .action-item-radio:hover{background:#f9fafb}.filter-menu__body .action-item-checkbox ::ng-deep .checkbox-component,.filter-menu__body .action-item-radio ::ng-deep .radio-component{padding-top:10px;padding-bottom:10px}.filter-menu__body .action-item-checkbox:first-child,.filter-menu__body .action-item-radio:first-child{margin-top:-10px}.filter-menu__body .action-item-checkbox:last-child,.filter-menu__body .action-item-radio:last-child{margin-bottom:-4px}.filter-menu__body .expander-item{outline:none;border:none;display:flex;width:auto;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filter-menu__body .expander-item.expanded,.filter-menu__body .expander-item.active{background:transparent;color:#344054}.filter-menu__body .expander-item:hover{background:#f9fafb}.filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filter-menu__body .no-item,.filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filter-menu__body .select-all{font-weight:500}.filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filter-menu__body .number-range-row{display:flex;gap:16px}.filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filter-menu__body .toggle-row{justify-content:space-between;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .toggle-row zen-toggle{display:flex;align-items:center}.filter-menu__body .toggle-row:hover{background:#f9fafb}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled){background-color:#eaecf0}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled).zen-toggle--active{background-color:#105494}.filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.filter-menu__body .section-title{display:flex;align-items:center;gap:6px;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;margin:0 -16px;padding:10px 16px;transition:background-color .15s ease}.filter-menu__body .section-title:hover{background:#f9fafb}.filter-menu__body .has-badge zen-checkbox{width:auto}.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox{background:#e3eefb;border-color:#136ab6}.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-checked,.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filter-menu__body .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.filters-component .filter-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:2px 8px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:12px;line-height:18px;white-space:nowrap;box-sizing:border-box}.filters-component .filter-icon-badge{position:absolute;top:-4px;right:-7px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:1.5px 6px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:9px;line-height:13.5px;text-align:center;white-space:nowrap;box-sizing:border-box;pointer-events:none}.filters-component .filter zen-icon{width:20px;height:20px;background-color:#344054}.filters-component .filter.applied zen-icon{background-color:#136ab6}.filters-component .filter.applied .filter-label{color:#136ab6}.hidden{display:none}:host ::ng-deep .filter.applied button{border-color:#88c1f1!important}:host ::ng-deep .filter.icon-only button{padding:10px!important}:host ::ng-deep zen-radio label{margin:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduToggleComponent, selector: "zen-toggle", inputs: ["enabled", "size", "disabled", "label", "supportingText"], outputs: ["enabledChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduRadioButtonComponent, selector: "zen-radio", inputs: ["selected", "label", "value", "name", "disabled", "imageUrl", "size", "supportingText"], outputs: ["radioChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "component", type: ZenduDatePickerDropdownComponent, selector: "zen-date-picker-dropdown", inputs: ["type", "date", "startDate", "endDate", "presets", "minDate", "maxDate", "disabled", "dateMarkers", "placeholder", "mobileBreakpoint", "timePicker", "autoApply", "hideTrigger", "label", "required", "size"], outputs: ["dateChange", "startDateChange", "endDateChange", "rangeChange"] }, { kind: "component", type: ZenduInputComponent, selector: "zen-input", inputs: ["type", "variant", "placeholder", "label", "hintText", "leadingIcon", "helpIcon", "helpTooltip", "destructive", "errorMessage", "disabled", "required", "maxLength", "minLength", "pattern", "min", "max", "step", "autocomplete", "name", "id", "leadingDropdownOptions", "leadingDropdownValue", "leadingDropdownPlaceholder", "trailingDropdownOptions", "trailingDropdownValue", "trailingDropdownPlaceholder", "leadingText", "trailingText", "multiline", "rows", "resizable", "size", "showCharacterCount", "phoneMaxLength", "phone", "width"], outputs: ["valueChange", "inputFocus", "inputBlur", "inputKeydown", "inputKeyup", "leadingDropdownChange", "leadingDropdownValueChange", "trailingDropdownChange", "trailingDropdownValueChange", "phoneChange", "validChange", "leadingIconClick"] }, { kind: "component", type: ZenButtonComponent, selector: "zen-button", inputs: ["variant", "buttonType", "icon", "iconRotated", "size", "destructive", "disabled", "fullWidth", "type"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
4561
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduFilterComponent, isStandalone: false, selector: "zen-filter", inputs: { config: "config", filter: "filter", position: "position", resetBehavior: "resetBehavior", defaultFilter: "defaultFilter", isVisible: "isVisible", customTrigger: "customTrigger", imageUrl: "imageUrl", label: "label", triggerVariant: "triggerVariant", showOptions: "showOptions", customOptions: "customOptions", wrapperBodyClass: "wrapperBodyClass", customPosition: "customPosition" }, outputs: { filterChange: "filterChange", isVisibleChange: "isVisibleChange" }, viewQueries: [{ propertyName: "_componentElement", first: true, predicate: ["mainComponent"], descendants: true }, { propertyName: "filterPanel", first: true, predicate: ["filterPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"filters-component\"\n #mainComponent\n click-out=\"isVisible && hide()\">\n\n @if (!customTrigger) {\n <zen-button (click)=\"toggle()\"\n [variant]=\"hasActiveFilters ? 'secondary' : 'secondary-gray'\"\n class=\"filter {{hasActiveFilters ? 'applied' : ''}} {{triggerVariant === 'icon-only' ? 'icon-only' : ''}}\">\n @if (imageUrl) {\n <zen-icon [src]=\"imageUrl\"\n ></zen-icon>\n }\n @if (!imageUrl) {\n <zen-icon class=\"filter-icon\"\n name=\"filter\"></zen-icon>\n }\n @if (triggerVariant !== 'icon-only') {\n <span class=\"filter-label\">{{ (label || 'Filter') | translate }}</span>\n @if (appliedCount > 0) {\n <span class=\"filter-count-badge\">{{ appliedCount }}</span>\n }\n }\n </zen-button>\n <!-- Icon-only mode: count rendered as a corner badge overlapping the\n button's top-right (sibling of the button so it isn't clipped). -->\n @if (triggerVariant === 'icon-only' && appliedCount > 0) {\n <span class=\"filter-icon-badge\">{{ appliedCount }}</span>\n }\n }\n\n @if (customTrigger) {\n <ng-content></ng-content>\n }\n\n <!-- Filter panel (rendered into a CDK overlay via ZenduOverlayService;\n positioning/flip/clamping is handled there, not with absolute CSS) -->\n <ng-template #filterPanel>\n <div class=\"filter-menu\"\n [class.customTrigger]=\"customTrigger\">\n <div class=\"filter-menu__header\">\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"filter-menu__body\"\n ngClass=\"{{wrapperBodyClass}}\">\n @if (errorMessage.length) {\n @for (item of errorMessage; track item) {\n <li\n class=\"error-msg\">{{item | translate }}</li>\n }\n }\n\n @for (item of config.items; track item) {\n @if (isMenuIsVisible(item)) {\n <div [class]=\"'menu-item menu-item--' + item.type\">\n <!-- Divider between two filter -->\n @if (item.type === 'divider') {\n <p class=\"filter-divider\"></p>\n }\n <!-- Boolean toggle -->\n @if (item.type === 'toggle') {\n <div\n class=\"action-item toggle-row\"\n (click)=\"toggleEnabled(item)\">\n <div>{{item.title | translate}}</div>\n <zen-toggle [(enabled)]=\"item.enabled\"\n (click)=\"$event.stopPropagation()\"></zen-toggle>\n </div>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse) {\n <button class=\"action-item expander-item\"\n (click)=\"toggleItem(item)\">\n <span class=\"expander-title\">{{item.title | translate}}</span>\n <span class=\"expander-indicator\">\n @if (isItemFiltered(item)) {\n <span class=\"filter-section-dot\"></span>\n }\n <zen-icon class=\"expand-icon\"\n name=\"chevron-down\"\n [class.active]=\"item.expanded\"></zen-icon>\n </span>\n </button>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n <div class=\"action-item section-title\"\n >\n <span class=\"expander-title\">{{item.title | translate}}</span>\n @if (isItemFiltered(item)) {\n <span class=\"filter-section-dot\"></span>\n }\n </div>\n }\n @if (item.expanded || item.disableCollapse) {\n @switch (item.type) {\n <!-- Multiselect -->\n @case ('multiselect') {\n <div class=\"menu-item__content\">\n <!-- Lazy loading mode -->\n @if (item.isLazyLoading) {\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\"\n (click)=\"toggleDsItem(dsItem, item)\">\n <zen-checkbox [checked]=\"dsItem.checked\"\n [disableValueChange]=\"true\"\n [imageUrl]=\"dsItem.imageUrl\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n @if (item.canLoadMore && !item.isLoadingNow) {\n <div\n class=\"action-item\">\n <zen-button variant=\"secondary-gray\"\n size=\"sm\"\n [fullWidth]=\"true\"\n (click)=\"loadMore(item, false)\">\n {{'Load More' | translate}}\n </zen-button>\n </div>\n }\n @if (item.isLoadingNow) {\n <div\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n }\n }\n @if (!item.isLazyLoading && !hasTreeData(item)) {\n <!-- Select All only while the full list is shown: the row\n owns the click, so it must not render as a blank\n clickable band that would select hidden items when the\n list is filtered. -->\n @if (!item.hideSelectAll && item.dataSource.length === item.filteredDataSource.length) {\n <div class=\"action-item-checkbox ds-item select-all\"\n (click)=\"toggleSelectAll(item)\">\n <zen-checkbox\n [checked]=\"item.isSelectedAll\"\n [disableValueChange]=\"true\"\n [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n [label]=\"'Select All' | translate\">\n </zen-checkbox>\n </div>\n }\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\"\n (click)=\"toggleDsItem(dsItem, item)\">\n <zen-checkbox [checked]=\"dsItem.checked\"\n [disableValueChange]=\"true\"\n [imageUrl]=\"dsItem.imageUrl\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n }\n <!-- Tree view mode -->\n @if (!item.isLazyLoading && hasTreeData(item)) {\n <zen-groups\n [dataSource]=\"item.dataSource\"\n [filteredDataSource]=\"item.filteredDataSource\"\n [hideSelectAll]=\"item.hideSelectAll\"\n [inline]=\"true\"\n [hideSearch]=\"true\"\n [(isSelectedAll)]=\"item.isSelectedAll\"\n (checkedChange)=\"checkChanged($event, item)\">\n </zen-groups>\n }\n </div>\n }\n <!-- Date range picker -->\n @case ('dateRange') {\n <div class=\"menu-item__content\">\n <!-- Options date range view -->\n @if (item.dateRangeOptions?.length) {\n @for (option of item.dateRangeOptions; track option) {\n <div class=\"action-item-radio ds-item\"\n (click)=\"handleDateRangeOptionClick(item, option)\">\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 (click)=\"handleCustomDateRangeClick(item)\">\n <zen-radio [value]=\"'Custom'\"\n [label]=\"'Custom' | translate\"\n [name]=\"item.key\"\n [selected]=\"selectedDateRangeOptions[item.key] === 'Custom'\"\n (radioChange)=\"handleCustomDateRangeClick(item)\"></zen-radio>\n </div>\n @if (selectedDateRangeOptions[item.key] === 'Custom') {\n <div class=\"filter-date-fields\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.dateRange.start\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [date]=\"item.dateRange.end\"\n [timePicker]=\"item.showTime\"\n (dateChange)=\"handleEndDateChange(item, $event)\">\n </zen-date-picker-dropdown>\n </div>\n </div>\n }\n }\n <!-- Default date range view -->\n @if (!item.dateRangeOptions?.length) {\n <div class=\"filter-date-fields\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.dateRange.start\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [date]=\"item.dateRange.end\"\n [timePicker]=\"item.showTime\"\n (dateChange)=\"handleEndDateChange(item, $event)\">\n </zen-date-picker-dropdown>\n </div>\n </div>\n }\n </div>\n }\n <!-- Date picker -->\n @case ('date') {\n <div class=\"filter-row menu-item__content\">\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.date\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n }\n <!-- Number range -->\n @case ('numberRange') {\n <div\n class=\"filter-row number-range-row menu-item__content\">\n <zen-input type=\"number\"\n size=\"sm\"\n [label]=\"'Min' | translate\"\n [(ngModel)]=\"item.numberRange.from\"></zen-input>\n <zen-input type=\"number\"\n size=\"sm\"\n [label]=\"'Max' | translate\"\n [(ngModel)]=\"item.numberRange.to\"></zen-input>\n </div>\n }\n <!-- Radio -->\n @case ('radio') {\n <div class=\"menu-item__content\">\n @for (option of item.radioOptions; track option) {\n <div\n class=\"action-item-radio ds-item\"\n (click)=\"!option.disabled && radioChanged(option.id, item)\">\n <zen-radio [value]=\"option.id\"\n [label]=\"option.name | translate\"\n [name]=\"item.key\"\n [imageUrl]=\"option.imageUrl\"\n [selected]=\"option.selected\"\n (radioChange)=\"radioChanged($event, item)\"\n [disabled]=\"option.disabled\"></zen-radio>\n </div>\n }\n </div>\n }\n }\n }\n </div>\n }\n }\n @if (showNoFilterResult) {\n <span\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n }\n </div>\n\n <div class=\"filter-menu__footer\">\n <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n <div class=\"filter-footer-actions\">\n <zen-button variant=\"secondary-gray\"\n [destructive]=\"true\"\n [disabled]=\"resetDisabled\"\n (click)=\"reset()\">\n {{ (defaultFilter ? 'Reset Default' : 'Clear All') | translate }}\n </zen-button>\n <zen-button variant=\"primary\"\n (click)=\"apply()\">\n {{'Apply' | translate}}\n </zen-button>\n </div>\n </div>\n\n </div>\n </ng-template>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filter-menu{width:400px;max-width:100%;white-space:initial;display:flex;flex-direction:column;background:#fff;border-radius:8px;border:1px solid #eaecf0;overflow:hidden;z-index:10;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filter-menu__body .menu-item.menu-item--multiselect,.filter-menu__body .menu-item.menu-item--radio{gap:0}.filter-menu__body .menu-item.menu-item--dateRange .action-item-radio:first-child{margin-top:-10px}.filter-menu__body .menu-item.menu-item--dateRange .action-item-radio:last-child{margin-bottom:-4px}.filter-menu__body .menu-item__content{padding-left:8px}.filter-menu__body .action-item,.filter-menu__body .action-item-checkbox,.filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filter-menu__body .action-item:focus-within,.filter-menu__body .action-item-checkbox:focus-within,.filter-menu__body .action-item-radio:focus-within{background:transparent}.filter-menu__body .action-item:hover{background:transparent}.filter-menu__body .action-item-checkbox,.filter-menu__body .action-item-radio{display:flex;align-items:center;margin-left:-8px;margin-right:0;padding:10px 8px;border-radius:6px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .action-item-checkbox:hover,.filter-menu__body .action-item-radio:hover{background:#f9fafb}.filter-menu__body .action-item-checkbox ::ng-deep .checkbox-component,.filter-menu__body .action-item-checkbox ::ng-deep .radio-component,.filter-menu__body .action-item-radio ::ng-deep .checkbox-component,.filter-menu__body .action-item-radio ::ng-deep .radio-component{display:flex;padding:0;margin:0}.filter-menu__body .expander-item{outline:none;border:none;display:flex;width:auto;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filter-menu__body .expander-item.expanded,.filter-menu__body .expander-item.active{background:transparent;color:#344054}.filter-menu__body .expander-item:hover{background:#f9fafb}.filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filter-menu__body .no-item,.filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filter-menu__body .select-all{font-weight:500}.filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filter-menu__body .number-range-row{display:flex;gap:16px}.filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filter-menu__body .toggle-row{justify-content:space-between;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .toggle-row zen-toggle{display:flex;align-items:center}.filter-menu__body .toggle-row:hover{background:#f9fafb}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled){background-color:#eaecf0}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled).zen-toggle--active{background-color:#105494}.filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.filter-menu__body .section-title{display:flex;align-items:center;gap:6px;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;margin:0 -16px;padding:10px 16px;transition:background-color .15s ease}.filter-menu__body .section-title:hover{background:#f9fafb}.filter-menu__body .action-item-checkbox:hover ::ng-deep .app-checkbox{background:#e3eefb;border-color:#136ab6}.filter-menu__body .action-item-checkbox:hover ::ng-deep .app-checkbox.app-checked,.filter-menu__body .action-item-checkbox:hover ::ng-deep .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.filter-menu__body .action-item-radio:hover ::ng-deep .radio-indicator,.filter-menu__body .action-item-radio:hover ::ng-deep .radio-input:checked~.radio-indicator{background:#e3eefb;border-color:#136ab6}.filter-menu__body .has-badge zen-checkbox{width:auto}.filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filter-menu__body .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.filters-component .filter-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:2px 8px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:12px;line-height:18px;white-space:nowrap;box-sizing:border-box}.filters-component .filter-icon-badge{position:absolute;top:-4px;right:-7px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:1.5px 6px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:9px;line-height:13.5px;text-align:center;white-space:nowrap;box-sizing:border-box;pointer-events:none}.filters-component .filter zen-icon{width:20px;height:20px;background-color:#344054}.filters-component .filter.applied zen-icon{background-color:#136ab6}.filters-component .filter.applied .filter-label{color:#136ab6}.hidden{display:none}:host ::ng-deep .filter.applied button{border-color:#88c1f1!important}:host ::ng-deep .filter.icon-only button{padding:10px!important}:host ::ng-deep zen-radio label{margin:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduToggleComponent, selector: "zen-toggle", inputs: ["enabled", "size", "disabled", "label", "supportingText"], outputs: ["enabledChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduRadioButtonComponent, selector: "zen-radio", inputs: ["selected", "label", "value", "name", "disabled", "imageUrl", "size", "supportingText"], outputs: ["radioChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "component", type: ZenduDatePickerDropdownComponent, selector: "zen-date-picker-dropdown", inputs: ["type", "date", "startDate", "endDate", "presets", "minDate", "maxDate", "disabled", "dateMarkers", "placeholder", "mobileBreakpoint", "timePicker", "autoApply", "hideTrigger", "label", "required", "size"], outputs: ["dateChange", "startDateChange", "endDateChange", "rangeChange"] }, { kind: "component", type: ZenduInputComponent, selector: "zen-input", inputs: ["type", "variant", "placeholder", "label", "hintText", "leadingIcon", "helpIcon", "helpTooltip", "destructive", "errorMessage", "disabled", "required", "maxLength", "minLength", "pattern", "min", "max", "step", "autocomplete", "name", "id", "leadingDropdownOptions", "leadingDropdownValue", "leadingDropdownPlaceholder", "trailingDropdownOptions", "trailingDropdownValue", "trailingDropdownPlaceholder", "leadingText", "trailingText", "multiline", "rows", "resizable", "size", "showCharacterCount", "phoneMaxLength", "phone", "width"], outputs: ["valueChange", "inputFocus", "inputBlur", "inputKeydown", "inputKeyup", "leadingDropdownChange", "leadingDropdownValueChange", "trailingDropdownChange", "trailingDropdownValueChange", "phoneChange", "validChange", "leadingIconClick"] }, { kind: "component", type: ZenButtonComponent, selector: "zen-button", inputs: ["variant", "buttonType", "icon", "iconRotated", "size", "destructive", "disabled", "fullWidth", "type"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
4611
4562
  }
4612
4563
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFilterComponent, decorators: [{
4613
4564
  type: Component,
4614
- args: [{ selector: 'zen-filter', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"filters-component\"\n #mainComponent\n click-out=\"isVisible && hide()\">\n\n @if (!customTrigger) {\n <zen-button (click)=\"toggle()\"\n [variant]=\"hasActiveFilters ? 'secondary' : 'secondary-gray'\"\n class=\"filter {{hasActiveFilters ? 'applied' : ''}} {{triggerVariant === 'icon-only' ? 'icon-only' : ''}}\">\n @if (imageUrl) {\n <zen-icon [src]=\"imageUrl\"\n ></zen-icon>\n }\n @if (!imageUrl) {\n <zen-icon class=\"filter-icon\"\n name=\"filter\"></zen-icon>\n }\n @if (triggerVariant !== 'icon-only') {\n <span class=\"filter-label\">{{ (label || 'Filter') | translate }}</span>\n @if (appliedCount > 0) {\n <span class=\"filter-count-badge\">{{ appliedCount }}</span>\n }\n }\n </zen-button>\n <!-- Icon-only mode: count rendered as a corner badge overlapping the\n button's top-right (sibling of the button so it isn't clipped). -->\n @if (triggerVariant === 'icon-only' && appliedCount > 0) {\n <span class=\"filter-icon-badge\">{{ appliedCount }}</span>\n }\n }\n\n @if (customTrigger) {\n <ng-content></ng-content>\n }\n\n <!-- Filter panel (rendered into a CDK overlay via ZenduOverlayService;\n positioning/flip/clamping is handled there, not with absolute CSS) -->\n <ng-template #filterPanel>\n <div class=\"filter-menu\"\n [class.customTrigger]=\"customTrigger\">\n <div class=\"filter-menu__header\">\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"filter-menu__body\"\n ngClass=\"{{wrapperBodyClass}}\">\n @if (errorMessage.length) {\n @for (item of errorMessage; track item) {\n <li\n class=\"error-msg\">{{item | translate }}</li>\n }\n }\n\n @for (item of config.items; track item) {\n @if (isMenuIsVisible(item)) {\n <div [class]=\"'menu-item menu-item--' + item.type\">\n <!-- Divider between two filter -->\n @if (item.type === 'divider') {\n <p class=\"filter-divider\"></p>\n }\n <!-- Boolean toggle -->\n @if (item.type === 'toggle') {\n <div\n class=\"action-item toggle-row\"\n (click)=\"toggleEnabled(item)\">\n <div>{{item.title | translate}}</div>\n <zen-toggle [(enabled)]=\"item.enabled\"\n (click)=\"$event.stopPropagation()\"></zen-toggle>\n </div>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse) {\n <button class=\"action-item expander-item\"\n (click)=\"toggleItem(item)\">\n <span class=\"expander-title\">{{item.title | translate}}</span>\n <span class=\"expander-indicator\">\n @if (isItemFiltered(item)) {\n <span class=\"filter-section-dot\"></span>\n }\n <zen-icon class=\"expand-icon\"\n name=\"chevron-down\"\n [class.active]=\"item.expanded\"></zen-icon>\n </span>\n </button>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n <div class=\"action-item section-title\"\n >\n <span class=\"expander-title\">{{item.title | translate}}</span>\n @if (isItemFiltered(item)) {\n <span class=\"filter-section-dot\"></span>\n }\n </div>\n }\n @if (item.expanded || item.disableCollapse) {\n @switch (item.type) {\n <!-- Multiselect -->\n @case ('multiselect') {\n <div class=\"menu-item__content\">\n <!-- Lazy loading mode -->\n @if (item.isLazyLoading) {\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\"\n (click)=\"toggleDsItem(dsItem, item)\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n (click)=\"$event.stopPropagation()\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n @if (item.canLoadMore && !item.isLoadingNow) {\n <div\n class=\"action-item\">\n <zen-button variant=\"secondary-gray\"\n size=\"sm\"\n [fullWidth]=\"true\"\n (click)=\"loadMore(item, false)\">\n {{'Load More' | translate}}\n </zen-button>\n </div>\n }\n @if (item.isLoadingNow) {\n <div\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n }\n }\n @if (!item.isLazyLoading && !hasTreeData(item)) {\n @if (!item.hideSelectAll) {\n <div class=\"action-item-checkbox ds-item select-all\">\n @if (item.dataSource.length === item.filteredDataSource.length) {\n <zen-checkbox\n [(checked)]=\"item.isSelectedAll\"\n [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n [label]=\"'Select All' | translate\"\n (checkedChange)=\"onSelectAll(item)\">\n </zen-checkbox>\n }\n </div>\n }\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\"\n (click)=\"toggleDsItem(dsItem, item)\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n (click)=\"$event.stopPropagation()\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n }\n <!-- Tree view mode -->\n @if (!item.isLazyLoading && hasTreeData(item)) {\n <zen-groups\n [dataSource]=\"item.dataSource\"\n [filteredDataSource]=\"item.filteredDataSource\"\n [hideSelectAll]=\"item.hideSelectAll\"\n [inline]=\"true\"\n [hideSearch]=\"true\"\n [(isSelectedAll)]=\"item.isSelectedAll\"\n (checkedChange)=\"checkChanged($event, item)\">\n </zen-groups>\n }\n </div>\n }\n <!-- Date range picker -->\n @case ('dateRange') {\n <div class=\"menu-item__content\">\n <!-- Options date range view -->\n @if (item.dateRangeOptions?.length) {\n @for (option of item.dateRangeOptions; track option) {\n <div class=\"action-item-radio ds-item\">\n <zen-radio [value]=\"option.name\"\n [label]=\"option.name | translate\"\n [name]=\"item.key\"\n [selected]=\"selectedDateRangeOptions[item.key] === option.name\"\n (radioChange)=\"handleDateRangeOptionClick(item, option)\"></zen-radio>\n </div>\n }\n <div class=\"action-item-radio ds-item\">\n <zen-radio [value]=\"'Custom'\"\n [label]=\"'Custom' | translate\"\n [name]=\"item.key\"\n [selected]=\"selectedDateRangeOptions[item.key] === 'Custom'\"\n (radioChange)=\"handleCustomDateRangeClick(item)\"></zen-radio>\n </div>\n @if (selectedDateRangeOptions[item.key] === 'Custom') {\n <div class=\"filter-date-fields\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.dateRange.start\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [date]=\"item.dateRange.end\"\n [timePicker]=\"item.showTime\"\n (dateChange)=\"handleEndDateChange(item, $event)\">\n </zen-date-picker-dropdown>\n </div>\n </div>\n }\n }\n <!-- Default date range view -->\n @if (!item.dateRangeOptions?.length) {\n <div class=\"filter-date-fields\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.dateRange.start\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [date]=\"item.dateRange.end\"\n [timePicker]=\"item.showTime\"\n (dateChange)=\"handleEndDateChange(item, $event)\">\n </zen-date-picker-dropdown>\n </div>\n </div>\n }\n </div>\n }\n <!-- Date picker -->\n @case ('date') {\n <div class=\"filter-row menu-item__content\">\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.date\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n }\n <!-- Number range -->\n @case ('numberRange') {\n <div\n class=\"filter-row number-range-row menu-item__content\">\n <zen-input type=\"number\"\n size=\"sm\"\n [label]=\"'Min' | translate\"\n [(ngModel)]=\"item.numberRange.from\"></zen-input>\n <zen-input type=\"number\"\n size=\"sm\"\n [label]=\"'Max' | translate\"\n [(ngModel)]=\"item.numberRange.to\"></zen-input>\n </div>\n }\n <!-- Radio -->\n @case ('radio') {\n <div class=\"menu-item__content\">\n @for (option of item.radioOptions; track option) {\n <div\n class=\"action-item-radio ds-item\">\n <zen-radio [value]=\"option.id\"\n [label]=\"option.name | translate\"\n [name]=\"item.key\"\n [imageUrl]=\"option.imageUrl\"\n [selected]=\"option.selected\"\n (radioChange)=\"radioChanged($event, item)\"\n [disabled]=\"option.disabled\"></zen-radio>\n </div>\n }\n </div>\n }\n }\n }\n </div>\n }\n }\n @if (showNoFilterResult) {\n <span\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n }\n </div>\n\n <div class=\"filter-menu__footer\">\n <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n <div class=\"filter-footer-actions\">\n <zen-button variant=\"secondary-gray\"\n [destructive]=\"true\"\n [disabled]=\"resetDisabled\"\n (click)=\"reset()\">\n {{ (defaultFilter ? 'Reset Default' : 'Clear All') | translate }}\n </zen-button>\n <zen-button variant=\"primary\"\n (click)=\"apply()\">\n {{'Apply' | translate}}\n </zen-button>\n </div>\n </div>\n\n </div>\n </ng-template>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filter-menu{width:400px;max-width:100%;white-space:initial;display:flex;flex-direction:column;background:#fff;border-radius:8px;border:1px solid #eaecf0;overflow:hidden;z-index:10;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filter-menu__body .menu-item.menu-item--multiselect,.filter-menu__body .menu-item.menu-item--radio{gap:0}.filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:first-child,.filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:first-child,.filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:first-child,.filter-menu__body .menu-item.menu-item--radio .action-item-radio:first-child{margin-top:0}.filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:last-child,.filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:last-child,.filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:last-child,.filter-menu__body .menu-item.menu-item--radio .action-item-radio:last-child{margin-bottom:0}.filter-menu__body .menu-item__content{padding-left:8px}.filter-menu__body .action-item,.filter-menu__body .action-item-checkbox,.filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filter-menu__body .action-item:focus-within,.filter-menu__body .action-item-checkbox:focus-within,.filter-menu__body .action-item-radio:focus-within{background:transparent}.filter-menu__body .action-item:hover{background:transparent}.filter-menu__body .action-item-checkbox,.filter-menu__body .action-item-radio{margin-left:-8px;margin-right:0;padding-left:8px;padding-right:8px;border-radius:6px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .action-item-checkbox:hover,.filter-menu__body .action-item-radio:hover{background:#f9fafb}.filter-menu__body .action-item-checkbox ::ng-deep .checkbox-component,.filter-menu__body .action-item-radio ::ng-deep .radio-component{padding-top:10px;padding-bottom:10px}.filter-menu__body .action-item-checkbox:first-child,.filter-menu__body .action-item-radio:first-child{margin-top:-10px}.filter-menu__body .action-item-checkbox:last-child,.filter-menu__body .action-item-radio:last-child{margin-bottom:-4px}.filter-menu__body .expander-item{outline:none;border:none;display:flex;width:auto;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filter-menu__body .expander-item.expanded,.filter-menu__body .expander-item.active{background:transparent;color:#344054}.filter-menu__body .expander-item:hover{background:#f9fafb}.filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filter-menu__body .no-item,.filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filter-menu__body .select-all{font-weight:500}.filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filter-menu__body .number-range-row{display:flex;gap:16px}.filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filter-menu__body .toggle-row{justify-content:space-between;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .toggle-row zen-toggle{display:flex;align-items:center}.filter-menu__body .toggle-row:hover{background:#f9fafb}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled){background-color:#eaecf0}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled).zen-toggle--active{background-color:#105494}.filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.filter-menu__body .section-title{display:flex;align-items:center;gap:6px;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;margin:0 -16px;padding:10px 16px;transition:background-color .15s ease}.filter-menu__body .section-title:hover{background:#f9fafb}.filter-menu__body .has-badge zen-checkbox{width:auto}.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox{background:#e3eefb;border-color:#136ab6}.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-checked,.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filter-menu__body .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.filters-component .filter-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:2px 8px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:12px;line-height:18px;white-space:nowrap;box-sizing:border-box}.filters-component .filter-icon-badge{position:absolute;top:-4px;right:-7px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:1.5px 6px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:9px;line-height:13.5px;text-align:center;white-space:nowrap;box-sizing:border-box;pointer-events:none}.filters-component .filter zen-icon{width:20px;height:20px;background-color:#344054}.filters-component .filter.applied zen-icon{background-color:#136ab6}.filters-component .filter.applied .filter-label{color:#136ab6}.hidden{display:none}:host ::ng-deep .filter.applied button{border-color:#88c1f1!important}:host ::ng-deep .filter.icon-only button{padding:10px!important}:host ::ng-deep zen-radio label{margin:0}\n"] }]
4565
+ args: [{ selector: 'zen-filter', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"filters-component\"\n #mainComponent\n click-out=\"isVisible && hide()\">\n\n @if (!customTrigger) {\n <zen-button (click)=\"toggle()\"\n [variant]=\"hasActiveFilters ? 'secondary' : 'secondary-gray'\"\n class=\"filter {{hasActiveFilters ? 'applied' : ''}} {{triggerVariant === 'icon-only' ? 'icon-only' : ''}}\">\n @if (imageUrl) {\n <zen-icon [src]=\"imageUrl\"\n ></zen-icon>\n }\n @if (!imageUrl) {\n <zen-icon class=\"filter-icon\"\n name=\"filter\"></zen-icon>\n }\n @if (triggerVariant !== 'icon-only') {\n <span class=\"filter-label\">{{ (label || 'Filter') | translate }}</span>\n @if (appliedCount > 0) {\n <span class=\"filter-count-badge\">{{ appliedCount }}</span>\n }\n }\n </zen-button>\n <!-- Icon-only mode: count rendered as a corner badge overlapping the\n button's top-right (sibling of the button so it isn't clipped). -->\n @if (triggerVariant === 'icon-only' && appliedCount > 0) {\n <span class=\"filter-icon-badge\">{{ appliedCount }}</span>\n }\n }\n\n @if (customTrigger) {\n <ng-content></ng-content>\n }\n\n <!-- Filter panel (rendered into a CDK overlay via ZenduOverlayService;\n positioning/flip/clamping is handled there, not with absolute CSS) -->\n <ng-template #filterPanel>\n <div class=\"filter-menu\"\n [class.customTrigger]=\"customTrigger\">\n <div class=\"filter-menu__header\">\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"filter-menu__body\"\n ngClass=\"{{wrapperBodyClass}}\">\n @if (errorMessage.length) {\n @for (item of errorMessage; track item) {\n <li\n class=\"error-msg\">{{item | translate }}</li>\n }\n }\n\n @for (item of config.items; track item) {\n @if (isMenuIsVisible(item)) {\n <div [class]=\"'menu-item menu-item--' + item.type\">\n <!-- Divider between two filter -->\n @if (item.type === 'divider') {\n <p class=\"filter-divider\"></p>\n }\n <!-- Boolean toggle -->\n @if (item.type === 'toggle') {\n <div\n class=\"action-item toggle-row\"\n (click)=\"toggleEnabled(item)\">\n <div>{{item.title | translate}}</div>\n <zen-toggle [(enabled)]=\"item.enabled\"\n (click)=\"$event.stopPropagation()\"></zen-toggle>\n </div>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse) {\n <button class=\"action-item expander-item\"\n (click)=\"toggleItem(item)\">\n <span class=\"expander-title\">{{item.title | translate}}</span>\n <span class=\"expander-indicator\">\n @if (isItemFiltered(item)) {\n <span class=\"filter-section-dot\"></span>\n }\n <zen-icon class=\"expand-icon\"\n name=\"chevron-down\"\n [class.active]=\"item.expanded\"></zen-icon>\n </span>\n </button>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n <div class=\"action-item section-title\"\n >\n <span class=\"expander-title\">{{item.title | translate}}</span>\n @if (isItemFiltered(item)) {\n <span class=\"filter-section-dot\"></span>\n }\n </div>\n }\n @if (item.expanded || item.disableCollapse) {\n @switch (item.type) {\n <!-- Multiselect -->\n @case ('multiselect') {\n <div class=\"menu-item__content\">\n <!-- Lazy loading mode -->\n @if (item.isLazyLoading) {\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\"\n (click)=\"toggleDsItem(dsItem, item)\">\n <zen-checkbox [checked]=\"dsItem.checked\"\n [disableValueChange]=\"true\"\n [imageUrl]=\"dsItem.imageUrl\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n @if (item.canLoadMore && !item.isLoadingNow) {\n <div\n class=\"action-item\">\n <zen-button variant=\"secondary-gray\"\n size=\"sm\"\n [fullWidth]=\"true\"\n (click)=\"loadMore(item, false)\">\n {{'Load More' | translate}}\n </zen-button>\n </div>\n }\n @if (item.isLoadingNow) {\n <div\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n }\n }\n @if (!item.isLazyLoading && !hasTreeData(item)) {\n <!-- Select All only while the full list is shown: the row\n owns the click, so it must not render as a blank\n clickable band that would select hidden items when the\n list is filtered. -->\n @if (!item.hideSelectAll && item.dataSource.length === item.filteredDataSource.length) {\n <div class=\"action-item-checkbox ds-item select-all\"\n (click)=\"toggleSelectAll(item)\">\n <zen-checkbox\n [checked]=\"item.isSelectedAll\"\n [disableValueChange]=\"true\"\n [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n [label]=\"'Select All' | translate\">\n </zen-checkbox>\n </div>\n }\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\"\n (click)=\"toggleDsItem(dsItem, item)\">\n <zen-checkbox [checked]=\"dsItem.checked\"\n [disableValueChange]=\"true\"\n [imageUrl]=\"dsItem.imageUrl\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n }\n <!-- Tree view mode -->\n @if (!item.isLazyLoading && hasTreeData(item)) {\n <zen-groups\n [dataSource]=\"item.dataSource\"\n [filteredDataSource]=\"item.filteredDataSource\"\n [hideSelectAll]=\"item.hideSelectAll\"\n [inline]=\"true\"\n [hideSearch]=\"true\"\n [(isSelectedAll)]=\"item.isSelectedAll\"\n (checkedChange)=\"checkChanged($event, item)\">\n </zen-groups>\n }\n </div>\n }\n <!-- Date range picker -->\n @case ('dateRange') {\n <div class=\"menu-item__content\">\n <!-- Options date range view -->\n @if (item.dateRangeOptions?.length) {\n @for (option of item.dateRangeOptions; track option) {\n <div class=\"action-item-radio ds-item\"\n (click)=\"handleDateRangeOptionClick(item, option)\">\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 (click)=\"handleCustomDateRangeClick(item)\">\n <zen-radio [value]=\"'Custom'\"\n [label]=\"'Custom' | translate\"\n [name]=\"item.key\"\n [selected]=\"selectedDateRangeOptions[item.key] === 'Custom'\"\n (radioChange)=\"handleCustomDateRangeClick(item)\"></zen-radio>\n </div>\n @if (selectedDateRangeOptions[item.key] === 'Custom') {\n <div class=\"filter-date-fields\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.dateRange.start\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [date]=\"item.dateRange.end\"\n [timePicker]=\"item.showTime\"\n (dateChange)=\"handleEndDateChange(item, $event)\">\n </zen-date-picker-dropdown>\n </div>\n </div>\n }\n }\n <!-- Default date range view -->\n @if (!item.dateRangeOptions?.length) {\n <div class=\"filter-date-fields\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.dateRange.start\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [date]=\"item.dateRange.end\"\n [timePicker]=\"item.showTime\"\n (dateChange)=\"handleEndDateChange(item, $event)\">\n </zen-date-picker-dropdown>\n </div>\n </div>\n }\n </div>\n }\n <!-- Date picker -->\n @case ('date') {\n <div class=\"filter-row menu-item__content\">\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.date\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n }\n <!-- Number range -->\n @case ('numberRange') {\n <div\n class=\"filter-row number-range-row menu-item__content\">\n <zen-input type=\"number\"\n size=\"sm\"\n [label]=\"'Min' | translate\"\n [(ngModel)]=\"item.numberRange.from\"></zen-input>\n <zen-input type=\"number\"\n size=\"sm\"\n [label]=\"'Max' | translate\"\n [(ngModel)]=\"item.numberRange.to\"></zen-input>\n </div>\n }\n <!-- Radio -->\n @case ('radio') {\n <div class=\"menu-item__content\">\n @for (option of item.radioOptions; track option) {\n <div\n class=\"action-item-radio ds-item\"\n (click)=\"!option.disabled && radioChanged(option.id, item)\">\n <zen-radio [value]=\"option.id\"\n [label]=\"option.name | translate\"\n [name]=\"item.key\"\n [imageUrl]=\"option.imageUrl\"\n [selected]=\"option.selected\"\n (radioChange)=\"radioChanged($event, item)\"\n [disabled]=\"option.disabled\"></zen-radio>\n </div>\n }\n </div>\n }\n }\n }\n </div>\n }\n }\n @if (showNoFilterResult) {\n <span\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n }\n </div>\n\n <div class=\"filter-menu__footer\">\n <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n <div class=\"filter-footer-actions\">\n <zen-button variant=\"secondary-gray\"\n [destructive]=\"true\"\n [disabled]=\"resetDisabled\"\n (click)=\"reset()\">\n {{ (defaultFilter ? 'Reset Default' : 'Clear All') | translate }}\n </zen-button>\n <zen-button variant=\"primary\"\n (click)=\"apply()\">\n {{'Apply' | translate}}\n </zen-button>\n </div>\n </div>\n\n </div>\n </ng-template>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filter-menu{width:400px;max-width:100%;white-space:initial;display:flex;flex-direction:column;background:#fff;border-radius:8px;border:1px solid #eaecf0;overflow:hidden;z-index:10;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filter-menu__body .menu-item.menu-item--multiselect,.filter-menu__body .menu-item.menu-item--radio{gap:0}.filter-menu__body .menu-item.menu-item--dateRange .action-item-radio:first-child{margin-top:-10px}.filter-menu__body .menu-item.menu-item--dateRange .action-item-radio:last-child{margin-bottom:-4px}.filter-menu__body .menu-item__content{padding-left:8px}.filter-menu__body .action-item,.filter-menu__body .action-item-checkbox,.filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filter-menu__body .action-item:focus-within,.filter-menu__body .action-item-checkbox:focus-within,.filter-menu__body .action-item-radio:focus-within{background:transparent}.filter-menu__body .action-item:hover{background:transparent}.filter-menu__body .action-item-checkbox,.filter-menu__body .action-item-radio{display:flex;align-items:center;margin-left:-8px;margin-right:0;padding:10px 8px;border-radius:6px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .action-item-checkbox:hover,.filter-menu__body .action-item-radio:hover{background:#f9fafb}.filter-menu__body .action-item-checkbox ::ng-deep .checkbox-component,.filter-menu__body .action-item-checkbox ::ng-deep .radio-component,.filter-menu__body .action-item-radio ::ng-deep .checkbox-component,.filter-menu__body .action-item-radio ::ng-deep .radio-component{display:flex;padding:0;margin:0}.filter-menu__body .expander-item{outline:none;border:none;display:flex;width:auto;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filter-menu__body .expander-item.expanded,.filter-menu__body .expander-item.active{background:transparent;color:#344054}.filter-menu__body .expander-item:hover{background:#f9fafb}.filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filter-menu__body .no-item,.filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filter-menu__body .select-all{font-weight:500}.filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filter-menu__body .number-range-row{display:flex;gap:16px}.filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filter-menu__body .toggle-row{justify-content:space-between;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .toggle-row zen-toggle{display:flex;align-items:center}.filter-menu__body .toggle-row:hover{background:#f9fafb}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled){background-color:#eaecf0}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled).zen-toggle--active{background-color:#105494}.filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.filter-menu__body .section-title{display:flex;align-items:center;gap:6px;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;margin:0 -16px;padding:10px 16px;transition:background-color .15s ease}.filter-menu__body .section-title:hover{background:#f9fafb}.filter-menu__body .action-item-checkbox:hover ::ng-deep .app-checkbox{background:#e3eefb;border-color:#136ab6}.filter-menu__body .action-item-checkbox:hover ::ng-deep .app-checkbox.app-checked,.filter-menu__body .action-item-checkbox:hover ::ng-deep .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.filter-menu__body .action-item-radio:hover ::ng-deep .radio-indicator,.filter-menu__body .action-item-radio:hover ::ng-deep .radio-input:checked~.radio-indicator{background:#e3eefb;border-color:#136ab6}.filter-menu__body .has-badge zen-checkbox{width:auto}.filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filter-menu__body .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.filters-component .filter-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:2px 8px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:12px;line-height:18px;white-space:nowrap;box-sizing:border-box}.filters-component .filter-icon-badge{position:absolute;top:-4px;right:-7px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:1.5px 6px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:9px;line-height:13.5px;text-align:center;white-space:nowrap;box-sizing:border-box;pointer-events:none}.filters-component .filter zen-icon{width:20px;height:20px;background-color:#344054}.filters-component .filter.applied zen-icon{background-color:#136ab6}.filters-component .filter.applied .filter-label{color:#136ab6}.hidden{display:none}:host ::ng-deep .filter.applied button{border-color:#88c1f1!important}:host ::ng-deep .filter.icon-only button{padding:10px!important}:host ::ng-deep zen-radio label{margin:0}\n"] }]
4615
4566
  }], ctorParameters: () => [{ type: ZenduOverlayService }, { type: i0.ViewContainerRef }], propDecorators: { config: [{
4616
4567
  type: Input
4617
4568
  }], filter: [{
@@ -9691,13 +9642,15 @@ class ZenTooltipDirective {
9691
9642
  this.tooltipPosition = 'top';
9692
9643
  this.tooltipTheme = 'dark';
9693
9644
  this.tooltipDisabled = false;
9645
+ this.tooltipDelay = 0;
9694
9646
  this._overlayRef = null;
9695
9647
  this._tooltipRef = null;
9648
+ this._showTimeoutId = null;
9696
9649
  }
9697
9650
  onMouseEnter() {
9698
9651
  if (this.tooltipDisabled || !this.text)
9699
9652
  return;
9700
- this._show();
9653
+ this._scheduleShow();
9701
9654
  }
9702
9655
  onMouseLeave() {
9703
9656
  this._hide();
@@ -9705,7 +9658,7 @@ class ZenTooltipDirective {
9705
9658
  onFocus() {
9706
9659
  if (this.tooltipDisabled || !this.text)
9707
9660
  return;
9708
- this._show();
9661
+ this._scheduleShow();
9709
9662
  }
9710
9663
  onBlur() {
9711
9664
  this._hide();
@@ -9713,6 +9666,19 @@ class ZenTooltipDirective {
9713
9666
  ngOnDestroy() {
9714
9667
  this._hide();
9715
9668
  }
9669
+ _scheduleShow() {
9670
+ if (this._overlayRef || this._showTimeoutId !== null)
9671
+ return;
9672
+ if (this.tooltipDelay > 0) {
9673
+ this._showTimeoutId = setTimeout(() => {
9674
+ this._showTimeoutId = null;
9675
+ this._show();
9676
+ }, this.tooltipDelay);
9677
+ }
9678
+ else {
9679
+ this._show();
9680
+ }
9681
+ }
9716
9682
  _show() {
9717
9683
  if (this._overlayRef)
9718
9684
  return;
@@ -9731,6 +9697,10 @@ class ZenTooltipDirective {
9731
9697
  this._tooltipRef.changeDetectorRef.markForCheck();
9732
9698
  }
9733
9699
  _hide() {
9700
+ if (this._showTimeoutId !== null) {
9701
+ clearTimeout(this._showTimeoutId);
9702
+ this._showTimeoutId = null;
9703
+ }
9734
9704
  if (this._overlayRef) {
9735
9705
  this._overlayRef.dispose();
9736
9706
  this._overlayRef = null;
@@ -9786,7 +9756,7 @@ class ZenTooltipDirective {
9786
9756
  }
9787
9757
  }
9788
9758
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenTooltipDirective, deps: [{ token: i1.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
9789
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: ZenTooltipDirective, isStandalone: false, selector: "[zenTooltip]", inputs: { text: ["zenTooltip", "text"], tooltipSupportingText: "tooltipSupportingText", tooltipPosition: "tooltipPosition", tooltipTheme: "tooltipTheme", tooltipDisabled: "tooltipDisabled" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 }); }
9759
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: ZenTooltipDirective, isStandalone: false, selector: "[zenTooltip]", inputs: { text: ["zenTooltip", "text"], tooltipSupportingText: "tooltipSupportingText", tooltipPosition: "tooltipPosition", tooltipTheme: "tooltipTheme", tooltipDisabled: "tooltipDisabled", tooltipDelay: "tooltipDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 }); }
9790
9760
  }
9791
9761
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenTooltipDirective, decorators: [{
9792
9762
  type: Directive,
@@ -9805,6 +9775,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
9805
9775
  type: Input
9806
9776
  }], tooltipDisabled: [{
9807
9777
  type: Input
9778
+ }], tooltipDelay: [{
9779
+ type: Input
9808
9780
  }], onMouseEnter: [{
9809
9781
  type: HostListener,
9810
9782
  args: ['mouseenter']