ng-zenduit 2.0.11 → 2.0.13

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 (14) hide show
  1. package/esm2020/lib/filter/zendu-filter.component.mjs +1 -1
  2. package/esm2020/lib/groups/zendu-groups.component.mjs +68 -37
  3. package/esm2020/lib/pagination-bar/zendu-pagination-bar.component.mjs +1 -1
  4. package/esm2020/lib/select/zendu-select.component.mjs +21 -8
  5. package/esm2020/lib/top-nav/zen-top-nav.component.mjs +3 -3
  6. package/esm2020/lib/top-nav-item/zen-top-nav-item.component.mjs +2 -2
  7. package/fesm2015/ng-zenduit.mjs +95 -58
  8. package/fesm2015/ng-zenduit.mjs.map +1 -1
  9. package/fesm2020/ng-zenduit.mjs +92 -48
  10. package/fesm2020/ng-zenduit.mjs.map +1 -1
  11. package/lib/groups/zendu-groups.component.d.ts +7 -1
  12. package/lib/select/zendu-select.component.d.ts +6 -1
  13. package/lib/top-nav/zen-top-nav.component.d.ts +1 -0
  14. package/package.json +1 -1
package/esm2020/lib/filter/zendu-filter.component.mjs CHANGED
@@ -739,7 +739,7 @@ export class ZenduFilterComponent {
739
739
  }
740
740
  }
741
741
  ZenduFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduFilterComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
742
- ZenduFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduFilterComponent, selector: "zen-filter", inputs: { config: "config", filter: "filter", position: "position", resetBehavior: "resetBehavior", isVisible: "isVisible", customTrigger: "customTrigger", imageUrl: "imageUrl", label: "label", showOptions: "showOptions", customOptions: "customOptions", wrapperBodyClass: "wrapperBodyClass", customPosition: "customPosition" }, outputs: { filterChange: "filterChange", isVisibleChange: "isVisibleChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:resize": "windowSizeHandling($event)", "window:scroll": "windowScroll($event)", "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "_componentElement", first: true, predicate: ["mainComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"filters-component\"\n #mainComponent\n click-out=\"isVisible && hide()\">\n\n <ng-container *ngIf=\"!customTrigger\">\n <button (click)=\"toggle()\"\n class=\"button-stroked filter {{isApplied ? 'applied' : ''}}\">\n <zen-icon [src]=\"imageUrl\"\n *ngIf=\"imageUrl\"></zen-icon>\n <i class=\"filter-icon material-icons\"\n *ngIf=\"!imageUrl\">filter_list</i>\n <span *ngIf=\"label\">{{ label | translate }}</span>\n </button>\n </ng-container>\n\n <ng-content *ngIf=\"customTrigger\"></ng-content>\n\n <div [hidden]=\"!isVisible\"\n class=\"action-menu menu-content\"\n [class.customTrigger]=\"customTrigger\"\n [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom }\">\n <div class=\"action-menu-header\">\n <zen-search-box [(text)]=\"searchText\"\n #searchBox\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"action-menu-body items-wrapper\"\n ngClass=\"{{wrapperBodyClass}}\">\n <ng-container *ngIf=\"errorMessage.length\">\n <li *ngFor=\"let item of errorMessage\"\n class=\"error-msg\">{{item | translate }}</li>\n </ng-container>\n\n <div *ngFor=\"let item of config.items\">\n <div class=\"menu-item\"\n *ngIf=\"isMenuIsVisible(item)\">\n\n <!-- Divider between two filter -->\n <div *ngIf=\"item.type === 'divider'\">\n <p class=\"filter-divider\"></p>\n </div>\n\n <!-- Boolean toggle -->\n <div *ngIf=\"item.type === 'toggle'\"\n class=\"action-item toggle-row\">\n <div>{{item.title | translate}}</div>\n <zen-toggle-slide [(enabled)]=\"item.enabled\"></zen-toggle-slide>\n </div>\n\n <button class=\"action-item expander-item\"\n *ngIf=\"item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse\"\n (click)=\"toggleItem(item)\">\n <span class=\"expander-title\">{{item.title | translate}}</span>\n <i class=\"material-icons expand-icon\"\n [ngClass]=\"{'active': item.expanded}\">expand_more</i>\n </button>\n\n <div class=\"action-item section-title\"\n *ngIf=\"item.type != 'toggle' && item.type != 'divider' && item.disableCollapse\">\n {{item.title | translate}}\n </div>\n\n <ng-container *ngIf=\"item.expanded || item.disableCollapse\">\n <div [ngSwitch]=\"item.type\">\n <!-- Multiselect -->\n <div *ngSwitchCase=\"'multiselect'\">\n <!-- Lazy loading mode -->\n <ng-container *ngIf=\"item.isLazyLoading\">\n <div *ngFor=\"let dsItem of item.filteredDataSource\"\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n <span *ngIf=\"dsItem.badgeBgColor\"\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n </div>\n <div *ngIf=\"item.canLoadMore && !item.isLoadingNow\"\n class=\"action-item\">\n <button (click)=\"loadMore(item, false)\"\n class=\"button-stroked full-width\">\n {{'Load More' | translate}}\n </button>\n </div>\n <div *ngIf=\"item.isLoadingNow\"\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!item.isLazyLoading && !hasTreeData(item)\">\n <div class=\"action-item-checkbox ds-item select-all\" *ngIf=\"!item.hideSelectAll\">\n <zen-checkbox *ngIf=\"item.dataSource.length === item.filteredDataSource.length\"\n [(checked)]=\"item.isSelectedAll\"\n [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n [label]=\"'Select All' | translate\"\n (checkedChange)=\"onSelectAll(item)\">\n </zen-checkbox>\n </div>\n\n <div *ngFor=\"let dsItem of item.filteredDataSource\"\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n <span *ngIf=\"dsItem.badgeBgColor\"\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n </div>\n </ng-container>\n\n <!-- Tree view mode -->\n <zen-groups *ngIf=\"!item.isLazyLoading && hasTreeData(item)\"\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 </div>\n\n <!-- Date range picker -->\n <div *ngSwitchCase=\"'dateRange'\">\n <!-- Options date range view -->\n <ng-container *ngIf=\"item.dateRangeOptions?.length\">\n <ng-container *ngFor=\"let option of item.dateRangeOptions\">\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 </ng-container>\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 <ng-container *ngIf=\"selectedDateRangeOptions[item.key] === 'Custom'\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </ng-container>\n </ng-container>\n\n <!-- Default date range view -->\n <ng-container *ngIf=\"!item.dateRangeOptions?.length\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </ng-container>\n </div>\n\n <!-- Date picker -->\n <div *ngSwitchCase=\"'date'\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'Date' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.date\"\n [showTime]=\"item.showTime\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </div>\n\n <!-- Number range -->\n <div *ngSwitchCase=\"'numberRange'\"\n class=\"filter-row number-range-row\">\n <div>\n <div class=\"lbl\">{{'Min' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.from\"\n type=\"number\" />\n </div>\n <div>\n <div class=\"lbl\">{{'Max' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.to\"\n type=\"number\" />\n </div>\n </div>\n\n <!-- Radio -->\n <div *ngSwitchCase=\"'radio'\">\n <div *ngFor=\"let option of item.radioOptions\"\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 </div>\n </div>\n </ng-container>\n\n </div>\n </div>\n <span *ngIf=\"showNoFilterResult\"\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n </div>\n\n <div class=\"action-menu-footer filter-footer\">\n <span class=\"selected-count\" *ngIf=\"hasMultiselectItems\">{{ selectedCount }} {{'Selected' | translate}}</span>\n <div class=\"filter-footer-actions\">\n <button (click)=\"reset()\"\n class=\"filter-btn-clear\"\n [class.has-selection]=\"selectedCount > 0 && hasMultiselectItems\">\n {{'Clear Filter' | translate}}\n </button>\n <button (click)=\"apply()\"\n class=\"filter-btn-apply\">\n {{'Apply' | translate}}\n </button>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .filter{color:#828282;position:relative;border-color:#ececed;padding:0 7px;height:38px}.filters-component .filter zen-icon{background:#828282}.filters-component .filter.applied{color:var(--color-primary, #2188d9);background:#f4f9fd;border:1px solid var(--color-primary, #2188d9)}.filters-component .filter.applied zen-icon{background:var(--color-primary, #2188d9)}.filters-component .filter .dot{background:var(--color-primary, #2188d9);width:4px;height:4px;position:absolute;border-radius:50%;left:42px;top:9px}.filters-component .menu-content{width:360px;white-space:initial;position:fixed}.filters-component .menu-content.absolute{position:absolute;inset:auto}.filters-component .menu-content.dropdown-left{right:0}.filters-component .menu-content.dropdown-right{left:0}.filters-component .menu-content.dropdown-top{bottom:100%;margin-bottom:8px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:8px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .menu-content .items-wrapper{overflow-y:auto;max-height:calc(100vh - 407px);position:relative;padding:8px 0}.filters-component .menu-content .items-wrapper .action-item,.filters-component .menu-content .items-wrapper .action-item-checkbox,.filters-component .menu-content .items-wrapper .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0 24px}.filters-component .menu-content .items-wrapper .action-item:hover,.filters-component .menu-content .items-wrapper .action-item-checkbox:hover,.filters-component .menu-content .items-wrapper .action-item-radio:hover{background:transparent}.filters-component .menu-content .items-wrapper .expander-item{outline:none;border:none;display:flex;width:100%;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;padding:12px 24px}.filters-component .menu-content .items-wrapper .expander-item .expander-title{flex:1;text-align:left}.filters-component .menu-content .items-wrapper .expander-item.expanded,.filters-component .menu-content .items-wrapper .expander-item.active{background:transparent;color:#344054}.filters-component .menu-content .items-wrapper .expander-item:hover{background:transparent}.filters-component .menu-content .items-wrapper .expand-icon{transition:.3s;font-size:20px;color:#667085}.filters-component .menu-content .items-wrapper .expand-icon.active{transform:rotate(180deg)}.filters-component .menu-content .items-wrapper .ds-item{padding-left:32px}.filters-component .menu-content .items-wrapper .no-item,.filters-component .menu-content .items-wrapper .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 24px;font-weight:400;font-size:14px}.filters-component .menu-content .items-wrapper .select-all{font-weight:500}.filters-component .menu-content .items-wrapper .filter-row{padding:0 24px}.filters-component .menu-content .items-wrapper .filter-row:not(:last-of-type){margin-bottom:20px}.filters-component .menu-content .items-wrapper .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .menu-content .items-wrapper .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .menu-content .items-wrapper .number-range-row{display:flex;margin-left:32px;gap:16px;margin-bottom:10px}.filters-component .menu-content .items-wrapper .toggle-row{justify-content:space-between}.filters-component .filter-footer{justify-content:space-between;padding:16px 24px;border-top:1px solid #eaecf0}.filters-component .filter-footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-footer .filter-btn-clear{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:#ffffff;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#d0d5dd;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-clear:hover{background:#f9fafb;color:#98a2b3}.filters-component .filter-footer .filter-btn-clear.has-selection{border-color:#fda29b;color:#b42318}.filters-component .filter-footer .filter-btn-clear.has-selection:hover{background:#fef3f2;color:#912018}.filters-component .filter-footer .filter-btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:var(--color-primary, #2188d9);border:1px solid var(--color-primary, #2188d9);box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#fff;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-apply:hover{background:var(--color-blue-shade-1, #0d74c5);border-color:var(--color-blue-shade-1, #0d74c5)}.filters-component .section-title{font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;padding:12px 24px}.filters-component .section-title:hover{background:transparent}.filters-component .has-badge zen-checkbox{width:auto}.filters-component .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.hidden{display:none}:host ::ng-deep zen-radio label{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: i4.ZenduToggleSlideComponent, selector: "zen-toggle-slide", inputs: ["enabled", "disabled"], outputs: ["enabledChange"] }, { kind: "component", type: i5.ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: i6.ZenduDatepickerComponent, selector: "zen-datepicker", inputs: ["date", "showTime", "showSeconds", "showDate", "parentContainer", "containerClass", "minDate", "maxDate", "boxDesign", "highlightDays", "autoConfirm", "hint", "highlightError", "disabled", "readonly", "xPosition", "yPosition", "dispalyOverParent"], outputs: ["dateChange"] }, { kind: "component", type: i7.ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: i8.ZenduRadioButtonComponent, selector: "zen-radio", inputs: ["selected", "label", "value", "name", "disabled", "imageUrl", "size", "supportingText"], outputs: ["radioChange"] }, { kind: "component", type: i9.ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: i10.ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
742
+ ZenduFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduFilterComponent, selector: "zen-filter", inputs: { config: "config", filter: "filter", position: "position", resetBehavior: "resetBehavior", isVisible: "isVisible", customTrigger: "customTrigger", imageUrl: "imageUrl", label: "label", showOptions: "showOptions", customOptions: "customOptions", wrapperBodyClass: "wrapperBodyClass", customPosition: "customPosition" }, outputs: { filterChange: "filterChange", isVisibleChange: "isVisibleChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:resize": "windowSizeHandling($event)", "window:scroll": "windowScroll($event)", "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "_componentElement", first: true, predicate: ["mainComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"filters-component\"\n #mainComponent\n click-out=\"isVisible && hide()\">\n\n <ng-container *ngIf=\"!customTrigger\">\n <button (click)=\"toggle()\"\n class=\"button-stroked filter {{isApplied ? 'applied' : ''}}\">\n <zen-icon [src]=\"imageUrl\"\n *ngIf=\"imageUrl\"></zen-icon>\n <i class=\"filter-icon material-icons\"\n *ngIf=\"!imageUrl\">filter_list</i>\n <span *ngIf=\"label\">{{ label | translate }}</span>\n </button>\n </ng-container>\n\n <ng-content *ngIf=\"customTrigger\"></ng-content>\n\n <div [hidden]=\"!isVisible\"\n class=\"action-menu menu-content\"\n [class.customTrigger]=\"customTrigger\"\n [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom }\">\n <div class=\"action-menu-header\">\n <zen-search-box [(text)]=\"searchText\"\n #searchBox\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"action-menu-body items-wrapper\"\n ngClass=\"{{wrapperBodyClass}}\">\n <ng-container *ngIf=\"errorMessage.length\">\n <li *ngFor=\"let item of errorMessage\"\n class=\"error-msg\">{{item | translate }}</li>\n </ng-container>\n\n <div *ngFor=\"let item of config.items\">\n <div class=\"menu-item\"\n *ngIf=\"isMenuIsVisible(item)\">\n\n <!-- Divider between two filter -->\n <div *ngIf=\"item.type === 'divider'\">\n <p class=\"filter-divider\"></p>\n </div>\n\n <!-- Boolean toggle -->\n <div *ngIf=\"item.type === 'toggle'\"\n class=\"action-item toggle-row\">\n <div>{{item.title | translate}}</div>\n <zen-toggle-slide [(enabled)]=\"item.enabled\"></zen-toggle-slide>\n </div>\n\n <button class=\"action-item expander-item\"\n *ngIf=\"item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse\"\n (click)=\"toggleItem(item)\">\n <span class=\"expander-title\">{{item.title | translate}}</span>\n <i class=\"material-icons expand-icon\"\n [ngClass]=\"{'active': item.expanded}\">expand_more</i>\n </button>\n\n <div class=\"action-item section-title\"\n *ngIf=\"item.type != 'toggle' && item.type != 'divider' && item.disableCollapse\">\n {{item.title | translate}}\n </div>\n\n <ng-container *ngIf=\"item.expanded || item.disableCollapse\">\n <div [ngSwitch]=\"item.type\">\n <!-- Multiselect -->\n <div *ngSwitchCase=\"'multiselect'\">\n <!-- Lazy loading mode -->\n <ng-container *ngIf=\"item.isLazyLoading\">\n <div *ngFor=\"let dsItem of item.filteredDataSource\"\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n <span *ngIf=\"dsItem.badgeBgColor\"\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n </div>\n <div *ngIf=\"item.canLoadMore && !item.isLoadingNow\"\n class=\"action-item\">\n <button (click)=\"loadMore(item, false)\"\n class=\"button-stroked full-width\">\n {{'Load More' | translate}}\n </button>\n </div>\n <div *ngIf=\"item.isLoadingNow\"\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!item.isLazyLoading && !hasTreeData(item)\">\n <div class=\"action-item-checkbox ds-item select-all\" *ngIf=\"!item.hideSelectAll\">\n <zen-checkbox *ngIf=\"item.dataSource.length === item.filteredDataSource.length\"\n [(checked)]=\"item.isSelectedAll\"\n [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n [label]=\"'Select All' | translate\"\n (checkedChange)=\"onSelectAll(item)\">\n </zen-checkbox>\n </div>\n\n <div *ngFor=\"let dsItem of item.filteredDataSource\"\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n <span *ngIf=\"dsItem.badgeBgColor\"\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n </div>\n </ng-container>\n\n <!-- Tree view mode -->\n <zen-groups *ngIf=\"!item.isLazyLoading && hasTreeData(item)\"\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 </div>\n\n <!-- Date range picker -->\n <div *ngSwitchCase=\"'dateRange'\">\n <!-- Options date range view -->\n <ng-container *ngIf=\"item.dateRangeOptions?.length\">\n <ng-container *ngFor=\"let option of item.dateRangeOptions\">\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 </ng-container>\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 <ng-container *ngIf=\"selectedDateRangeOptions[item.key] === 'Custom'\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </ng-container>\n </ng-container>\n\n <!-- Default date range view -->\n <ng-container *ngIf=\"!item.dateRangeOptions?.length\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </ng-container>\n </div>\n\n <!-- Date picker -->\n <div *ngSwitchCase=\"'date'\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'Date' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.date\"\n [showTime]=\"item.showTime\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </div>\n\n <!-- Number range -->\n <div *ngSwitchCase=\"'numberRange'\"\n class=\"filter-row number-range-row\">\n <div>\n <div class=\"lbl\">{{'Min' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.from\"\n type=\"number\" />\n </div>\n <div>\n <div class=\"lbl\">{{'Max' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.to\"\n type=\"number\" />\n </div>\n </div>\n\n <!-- Radio -->\n <div *ngSwitchCase=\"'radio'\">\n <div *ngFor=\"let option of item.radioOptions\"\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 </div>\n </div>\n </ng-container>\n\n </div>\n </div>\n <span *ngIf=\"showNoFilterResult\"\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n </div>\n\n <div class=\"action-menu-footer filter-footer\">\n <span class=\"selected-count\" *ngIf=\"hasMultiselectItems\">{{ selectedCount }} {{'Selected' | translate}}</span>\n <div class=\"filter-footer-actions\">\n <button (click)=\"reset()\"\n class=\"filter-btn-clear\"\n [class.has-selection]=\"selectedCount > 0 && hasMultiselectItems\">\n {{'Clear Filter' | translate}}\n </button>\n <button (click)=\"apply()\"\n class=\"filter-btn-apply\">\n {{'Apply' | translate}}\n </button>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .filter{color:#828282;position:relative;border-color:#ececed;padding:0 7px;height:38px}.filters-component .filter zen-icon{background:#828282}.filters-component .filter.applied{color:var(--color-primary, #2188d9);background:#f4f9fd;border:1px solid var(--color-primary, #2188d9)}.filters-component .filter.applied zen-icon{background:var(--color-primary, #2188d9)}.filters-component .filter .dot{background:var(--color-primary, #2188d9);width:4px;height:4px;position:absolute;border-radius:50%;left:42px;top:9px}.filters-component .menu-content{width:360px;white-space:initial;position:fixed}.filters-component .menu-content.absolute{position:absolute;inset:auto}.filters-component .menu-content.dropdown-left{right:0}.filters-component .menu-content.dropdown-right{left:0}.filters-component .menu-content.dropdown-top{bottom:100%;margin-bottom:8px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:8px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .menu-content .items-wrapper{overflow-y:auto;max-height:calc(100vh - 407px);position:relative;padding:8px 0}.filters-component .menu-content .items-wrapper .action-item,.filters-component .menu-content .items-wrapper .action-item-checkbox,.filters-component .menu-content .items-wrapper .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0 24px}.filters-component .menu-content .items-wrapper .action-item:hover,.filters-component .menu-content .items-wrapper .action-item-checkbox:hover,.filters-component .menu-content .items-wrapper .action-item-radio:hover{background:transparent}.filters-component .menu-content .items-wrapper .expander-item{outline:none;border:none;display:flex;width:100%;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;padding:12px 24px}.filters-component .menu-content .items-wrapper .expander-item .expander-title{flex:1;text-align:left}.filters-component .menu-content .items-wrapper .expander-item.expanded,.filters-component .menu-content .items-wrapper .expander-item.active{background:transparent;color:#344054}.filters-component .menu-content .items-wrapper .expander-item:hover{background:transparent}.filters-component .menu-content .items-wrapper .expand-icon{transition:.3s;font-size:20px;color:#667085}.filters-component .menu-content .items-wrapper .expand-icon.active{transform:rotate(180deg)}.filters-component .menu-content .items-wrapper .ds-item{padding-left:32px}.filters-component .menu-content .items-wrapper .no-item,.filters-component .menu-content .items-wrapper .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 24px;font-weight:400;font-size:14px}.filters-component .menu-content .items-wrapper .select-all{font-weight:500}.filters-component .menu-content .items-wrapper .filter-row{padding:0 24px}.filters-component .menu-content .items-wrapper .filter-row:not(:last-of-type){margin-bottom:20px}.filters-component .menu-content .items-wrapper .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .menu-content .items-wrapper .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .menu-content .items-wrapper .number-range-row{display:flex;margin-left:32px;gap:16px;margin-bottom:10px}.filters-component .menu-content .items-wrapper .toggle-row{justify-content:space-between}.filters-component .filter-footer{justify-content:space-between;padding:16px 24px;border-top:1px solid #eaecf0}.filters-component .filter-footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-footer .filter-btn-clear{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:#ffffff;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#d0d5dd;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-clear:hover{background:#f9fafb;color:#98a2b3}.filters-component .filter-footer .filter-btn-clear.has-selection{border-color:#fda29b;color:#b42318}.filters-component .filter-footer .filter-btn-clear.has-selection:hover{background:#fef3f2;color:#912018}.filters-component .filter-footer .filter-btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:var(--color-primary, #2188d9);border:1px solid var(--color-primary, #2188d9);box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#fff;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-apply:hover{background:var(--color-blue-shade-1, #0d74c5);border-color:var(--color-blue-shade-1, #0d74c5)}.filters-component .section-title{font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;padding:12px 24px}.filters-component .section-title:hover{background:transparent}.filters-component .has-badge zen-checkbox{width:auto}.filters-component .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.hidden{display:none}:host ::ng-deep zen-radio label{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: i4.ZenduToggleSlideComponent, selector: "zen-toggle-slide", inputs: ["enabled", "disabled"], outputs: ["enabledChange"] }, { kind: "component", type: i5.ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: i6.ZenduDatepickerComponent, selector: "zen-datepicker", inputs: ["date", "showTime", "showSeconds", "showDate", "parentContainer", "containerClass", "minDate", "maxDate", "boxDesign", "highlightDays", "autoConfirm", "hint", "highlightError", "disabled", "readonly", "xPosition", "yPosition", "dispalyOverParent"], outputs: ["dateChange"] }, { kind: "component", type: i7.ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: i8.ZenduRadioButtonComponent, selector: "zen-radio", inputs: ["selected", "label", "value", "name", "disabled", "imageUrl", "size", "supportingText"], outputs: ["radioChange"] }, { kind: "component", type: i9.ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: i10.ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
743
743
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduFilterComponent, decorators: [{
744
744
  type: Component,
745
745
  args: [{ selector: 'zen-filter', template: "<div class=\"filters-component\"\n #mainComponent\n click-out=\"isVisible && hide()\">\n\n <ng-container *ngIf=\"!customTrigger\">\n <button (click)=\"toggle()\"\n class=\"button-stroked filter {{isApplied ? 'applied' : ''}}\">\n <zen-icon [src]=\"imageUrl\"\n *ngIf=\"imageUrl\"></zen-icon>\n <i class=\"filter-icon material-icons\"\n *ngIf=\"!imageUrl\">filter_list</i>\n <span *ngIf=\"label\">{{ label | translate }}</span>\n </button>\n </ng-container>\n\n <ng-content *ngIf=\"customTrigger\"></ng-content>\n\n <div [hidden]=\"!isVisible\"\n class=\"action-menu menu-content\"\n [class.customTrigger]=\"customTrigger\"\n [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom }\">\n <div class=\"action-menu-header\">\n <zen-search-box [(text)]=\"searchText\"\n #searchBox\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"action-menu-body items-wrapper\"\n ngClass=\"{{wrapperBodyClass}}\">\n <ng-container *ngIf=\"errorMessage.length\">\n <li *ngFor=\"let item of errorMessage\"\n class=\"error-msg\">{{item | translate }}</li>\n </ng-container>\n\n <div *ngFor=\"let item of config.items\">\n <div class=\"menu-item\"\n *ngIf=\"isMenuIsVisible(item)\">\n\n <!-- Divider between two filter -->\n <div *ngIf=\"item.type === 'divider'\">\n <p class=\"filter-divider\"></p>\n </div>\n\n <!-- Boolean toggle -->\n <div *ngIf=\"item.type === 'toggle'\"\n class=\"action-item toggle-row\">\n <div>{{item.title | translate}}</div>\n <zen-toggle-slide [(enabled)]=\"item.enabled\"></zen-toggle-slide>\n </div>\n\n <button class=\"action-item expander-item\"\n *ngIf=\"item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse\"\n (click)=\"toggleItem(item)\">\n <span class=\"expander-title\">{{item.title | translate}}</span>\n <i class=\"material-icons expand-icon\"\n [ngClass]=\"{'active': item.expanded}\">expand_more</i>\n </button>\n\n <div class=\"action-item section-title\"\n *ngIf=\"item.type != 'toggle' && item.type != 'divider' && item.disableCollapse\">\n {{item.title | translate}}\n </div>\n\n <ng-container *ngIf=\"item.expanded || item.disableCollapse\">\n <div [ngSwitch]=\"item.type\">\n <!-- Multiselect -->\n <div *ngSwitchCase=\"'multiselect'\">\n <!-- Lazy loading mode -->\n <ng-container *ngIf=\"item.isLazyLoading\">\n <div *ngFor=\"let dsItem of item.filteredDataSource\"\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n <span *ngIf=\"dsItem.badgeBgColor\"\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n </div>\n <div *ngIf=\"item.canLoadMore && !item.isLoadingNow\"\n class=\"action-item\">\n <button (click)=\"loadMore(item, false)\"\n class=\"button-stroked full-width\">\n {{'Load More' | translate}}\n </button>\n </div>\n <div *ngIf=\"item.isLoadingNow\"\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!item.isLazyLoading && !hasTreeData(item)\">\n <div class=\"action-item-checkbox ds-item select-all\" *ngIf=\"!item.hideSelectAll\">\n <zen-checkbox *ngIf=\"item.dataSource.length === item.filteredDataSource.length\"\n [(checked)]=\"item.isSelectedAll\"\n [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n [label]=\"'Select All' | translate\"\n (checkedChange)=\"onSelectAll(item)\">\n </zen-checkbox>\n </div>\n\n <div *ngFor=\"let dsItem of item.filteredDataSource\"\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n <span *ngIf=\"dsItem.badgeBgColor\"\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n </div>\n </ng-container>\n\n <!-- Tree view mode -->\n <zen-groups *ngIf=\"!item.isLazyLoading && hasTreeData(item)\"\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 </div>\n\n <!-- Date range picker -->\n <div *ngSwitchCase=\"'dateRange'\">\n <!-- Options date range view -->\n <ng-container *ngIf=\"item.dateRangeOptions?.length\">\n <ng-container *ngFor=\"let option of item.dateRangeOptions\">\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 </ng-container>\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 <ng-container *ngIf=\"selectedDateRangeOptions[item.key] === 'Custom'\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </ng-container>\n </ng-container>\n\n <!-- Default date range view -->\n <ng-container *ngIf=\"!item.dateRangeOptions?.length\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </ng-container>\n </div>\n\n <!-- Date picker -->\n <div *ngSwitchCase=\"'date'\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'Date' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.date\"\n [showTime]=\"item.showTime\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </div>\n\n <!-- Number range -->\n <div *ngSwitchCase=\"'numberRange'\"\n class=\"filter-row number-range-row\">\n <div>\n <div class=\"lbl\">{{'Min' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.from\"\n type=\"number\" />\n </div>\n <div>\n <div class=\"lbl\">{{'Max' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.to\"\n type=\"number\" />\n </div>\n </div>\n\n <!-- Radio -->\n <div *ngSwitchCase=\"'radio'\">\n <div *ngFor=\"let option of item.radioOptions\"\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 </div>\n </div>\n </ng-container>\n\n </div>\n </div>\n <span *ngIf=\"showNoFilterResult\"\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n </div>\n\n <div class=\"action-menu-footer filter-footer\">\n <span class=\"selected-count\" *ngIf=\"hasMultiselectItems\">{{ selectedCount }} {{'Selected' | translate}}</span>\n <div class=\"filter-footer-actions\">\n <button (click)=\"reset()\"\n class=\"filter-btn-clear\"\n [class.has-selection]=\"selectedCount > 0 && hasMultiselectItems\">\n {{'Clear Filter' | translate}}\n </button>\n <button (click)=\"apply()\"\n class=\"filter-btn-apply\">\n {{'Apply' | translate}}\n </button>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .filter{color:#828282;position:relative;border-color:#ececed;padding:0 7px;height:38px}.filters-component .filter zen-icon{background:#828282}.filters-component .filter.applied{color:var(--color-primary, #2188d9);background:#f4f9fd;border:1px solid var(--color-primary, #2188d9)}.filters-component .filter.applied zen-icon{background:var(--color-primary, #2188d9)}.filters-component .filter .dot{background:var(--color-primary, #2188d9);width:4px;height:4px;position:absolute;border-radius:50%;left:42px;top:9px}.filters-component .menu-content{width:360px;white-space:initial;position:fixed}.filters-component .menu-content.absolute{position:absolute;inset:auto}.filters-component .menu-content.dropdown-left{right:0}.filters-component .menu-content.dropdown-right{left:0}.filters-component .menu-content.dropdown-top{bottom:100%;margin-bottom:8px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:8px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .menu-content .items-wrapper{overflow-y:auto;max-height:calc(100vh - 407px);position:relative;padding:8px 0}.filters-component .menu-content .items-wrapper .action-item,.filters-component .menu-content .items-wrapper .action-item-checkbox,.filters-component .menu-content .items-wrapper .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0 24px}.filters-component .menu-content .items-wrapper .action-item:hover,.filters-component .menu-content .items-wrapper .action-item-checkbox:hover,.filters-component .menu-content .items-wrapper .action-item-radio:hover{background:transparent}.filters-component .menu-content .items-wrapper .expander-item{outline:none;border:none;display:flex;width:100%;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;padding:12px 24px}.filters-component .menu-content .items-wrapper .expander-item .expander-title{flex:1;text-align:left}.filters-component .menu-content .items-wrapper .expander-item.expanded,.filters-component .menu-content .items-wrapper .expander-item.active{background:transparent;color:#344054}.filters-component .menu-content .items-wrapper .expander-item:hover{background:transparent}.filters-component .menu-content .items-wrapper .expand-icon{transition:.3s;font-size:20px;color:#667085}.filters-component .menu-content .items-wrapper .expand-icon.active{transform:rotate(180deg)}.filters-component .menu-content .items-wrapper .ds-item{padding-left:32px}.filters-component .menu-content .items-wrapper .no-item,.filters-component .menu-content .items-wrapper .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 24px;font-weight:400;font-size:14px}.filters-component .menu-content .items-wrapper .select-all{font-weight:500}.filters-component .menu-content .items-wrapper .filter-row{padding:0 24px}.filters-component .menu-content .items-wrapper .filter-row:not(:last-of-type){margin-bottom:20px}.filters-component .menu-content .items-wrapper .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .menu-content .items-wrapper .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .menu-content .items-wrapper .number-range-row{display:flex;margin-left:32px;gap:16px;margin-bottom:10px}.filters-component .menu-content .items-wrapper .toggle-row{justify-content:space-between}.filters-component .filter-footer{justify-content:space-between;padding:16px 24px;border-top:1px solid #eaecf0}.filters-component .filter-footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-footer .filter-btn-clear{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:#ffffff;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#d0d5dd;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-clear:hover{background:#f9fafb;color:#98a2b3}.filters-component .filter-footer .filter-btn-clear.has-selection{border-color:#fda29b;color:#b42318}.filters-component .filter-footer .filter-btn-clear.has-selection:hover{background:#fef3f2;color:#912018}.filters-component .filter-footer .filter-btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:var(--color-primary, #2188d9);border:1px solid var(--color-primary, #2188d9);box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#fff;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-apply:hover{background:var(--color-blue-shade-1, #0d74c5);border-color:var(--color-blue-shade-1, #0d74c5)}.filters-component .section-title{font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;padding:12px 24px}.filters-component .section-title:hover{background:transparent}.filters-component .has-badge zen-checkbox{width:auto}.filters-component .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.hidden{display:none}:host ::ng-deep zen-radio label{margin:0}\n"] }]