ng-zenduit 1.0.52 → 1.0.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/checkbox/zendu-checkbox.component.mjs +6 -3
- package/esm2020/lib/column-configuration/zendu-column-configuration.component.mjs +1 -1
- package/esm2020/lib/filter/zendu-filter.component.mjs +1 -1
- package/esm2020/lib/select/zendu-select.component.mjs +1 -1
- package/fesm2015/ng-zenduit.mjs +8 -5
- package/fesm2015/ng-zenduit.mjs.map +1 -1
- package/fesm2020/ng-zenduit.mjs +8 -5
- package/fesm2020/ng-zenduit.mjs.map +1 -1
- package/lib/checkbox/zendu-checkbox.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -5,6 +5,7 @@ export class ZenduCheckboxComponent {
|
|
|
5
5
|
constructor() {
|
|
6
6
|
this.checkedChange = new EventEmitter();
|
|
7
7
|
this.label = 'Enable';
|
|
8
|
+
this.labelColor = "";
|
|
8
9
|
this.disabled = false;
|
|
9
10
|
this.disableValueChange = false;
|
|
10
11
|
this.indeterminate = false;
|
|
@@ -22,16 +23,18 @@ export class ZenduCheckboxComponent {
|
|
|
22
23
|
}
|
|
23
24
|
}
|
|
24
25
|
ZenduCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
-
ZenduCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: { checked: "checked", label: "label", disabled: "disabled", disableValueChange: "disableValueChange", indeterminate: "indeterminate", imageUrl: "imageUrl" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div class=\"checkbox-component\"\n [ngClass]=\"{'app-disabled': disabled}\"\n (click)=\"toggle()\">\n <button class=\"app-checkbox\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'app-checked': checked && !indeterminate, 'app-indeterminate': indeterminate }\">\n <i *ngIf=\"checked && !indeterminate\"\n class=\"material-icons app-checkbox-icon\">done</i>\n <i *ngIf=\"indeterminate\"\n class=\"material-icons app-checkbox-icon\">remove</i>\n </button>\n <div class=\"app-checkbox-label\"\n *ngIf=\"label\">\n <img class=\"checkbox-image\"\n [src]=\"imageUrl\"\n *ngIf=\"imageUrl\">\n {{ label }}\n </div>\n</div
|
|
26
|
+
ZenduCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: { checked: "checked", label: "label", labelColor: "labelColor", disabled: "disabled", disableValueChange: "disableValueChange", indeterminate: "indeterminate", imageUrl: "imageUrl" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div class=\"checkbox-component\"\n [ngClass]=\"{'app-disabled': disabled}\"\n (click)=\"toggle()\">\n <button class=\"app-checkbox\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'app-checked': checked && !indeterminate, 'app-indeterminate': indeterminate }\">\n <i *ngIf=\"checked && !indeterminate\"\n class=\"material-icons app-checkbox-icon\">done</i>\n <i *ngIf=\"indeterminate\"\n class=\"material-icons app-checkbox-icon\">remove</i>\n </button>\n <div class=\"app-checkbox-label\"\n *ngIf=\"label\"\n [ngStyle]=\"{'color': labelColor }\">\n <img class=\"checkbox-image\"\n [src]=\"imageUrl\"\n *ngIf=\"imageUrl\">\n {{ label }}\n </div>\n</div>\n", styles: [".checkbox-component{display:flex;align-items:center;cursor:pointer;gap:8px}.checkbox-component .app-checkbox{padding:4px;position:relative;width:20px;min-width:20px;height:20px;min-height:20px;border:1.6px solid #d6d6d8;border-radius:2px;box-sizing:border-box;color:#fff;background:transparent;cursor:pointer}.checkbox-component .app-checkbox:focus{outline:none;box-shadow:0 0 2px 2px #2188d94d}.checkbox-component .app-checkbox:disabled{cursor:not-allowed}.checkbox-component .app-checkbox.app-checked{border-color:var(--color-primary, #2188d9);color:var(--color-primary, #2188d9)}.checkbox-component .app-checkbox.app-checked+.app-checkbox-label{color:#4f4f4f}.checkbox-component .app-checkbox.app-indeterminate{border-color:var(--color-primary, #2188d9);color:var(--color-primary, #2188d9)}.checkbox-component .app-checkbox .app-checkbox-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px}.checkbox-component .app-checkbox-label{font-weight:400;font-size:14px;line-height:130%;color:#828282;display:flex;align-items:center}.checkbox-component .app-checkbox-label .checkbox-image{margin-right:8px;width:36px}.checkbox-component:hover,.checkbox-component:focus{outline:none;text-decoration:none}.checkbox-component:hover .app-checkbox,.checkbox-component:focus .app-checkbox{border-color:#16598d}.checkbox-component:hover .app-checkbox.app-checked,.checkbox-component:focus .app-checkbox.app-checked{border-color:#16598d;color:#16598d}.checkbox-component:hover .app-checkbox.app-indeterminate,.checkbox-component:focus .app-checkbox.app-indeterminate{border-color:#16598d;color:#16598d}.checkbox-component.app-disabled{cursor:not-allowed}.checkbox-component.app-disabled .app-checkbox{border-color:#ececed}.checkbox-component.app-disabled .app-checkbox.app-checked,.checkbox-component.app-disabled .app-checkbox.app-indeterminate{border-color:#ececed;color:#ececed}.checkbox-component.app-disabled .app-checkbox-label{color:#ececed}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
26
27
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduCheckboxComponent, decorators: [{
|
|
27
28
|
type: Component,
|
|
28
|
-
args: [{ selector: 'zen-checkbox', template: "<div class=\"checkbox-component\"\n [ngClass]=\"{'app-disabled': disabled}\"\n (click)=\"toggle()\">\n <button class=\"app-checkbox\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'app-checked': checked && !indeterminate, 'app-indeterminate': indeterminate }\">\n <i *ngIf=\"checked && !indeterminate\"\n class=\"material-icons app-checkbox-icon\">done</i>\n <i *ngIf=\"indeterminate\"\n class=\"material-icons app-checkbox-icon\">remove</i>\n </button>\n <div class=\"app-checkbox-label\"\n *ngIf=\"label\">\n <img class=\"checkbox-image\"\n [src]=\"imageUrl\"\n *ngIf=\"imageUrl\">\n {{ label }}\n </div>\n</div
|
|
29
|
+
args: [{ selector: 'zen-checkbox', template: "<div class=\"checkbox-component\"\n [ngClass]=\"{'app-disabled': disabled}\"\n (click)=\"toggle()\">\n <button class=\"app-checkbox\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'app-checked': checked && !indeterminate, 'app-indeterminate': indeterminate }\">\n <i *ngIf=\"checked && !indeterminate\"\n class=\"material-icons app-checkbox-icon\">done</i>\n <i *ngIf=\"indeterminate\"\n class=\"material-icons app-checkbox-icon\">remove</i>\n </button>\n <div class=\"app-checkbox-label\"\n *ngIf=\"label\"\n [ngStyle]=\"{'color': labelColor }\">\n <img class=\"checkbox-image\"\n [src]=\"imageUrl\"\n *ngIf=\"imageUrl\">\n {{ label }}\n </div>\n</div>\n", styles: [".checkbox-component{display:flex;align-items:center;cursor:pointer;gap:8px}.checkbox-component .app-checkbox{padding:4px;position:relative;width:20px;min-width:20px;height:20px;min-height:20px;border:1.6px solid #d6d6d8;border-radius:2px;box-sizing:border-box;color:#fff;background:transparent;cursor:pointer}.checkbox-component .app-checkbox:focus{outline:none;box-shadow:0 0 2px 2px #2188d94d}.checkbox-component .app-checkbox:disabled{cursor:not-allowed}.checkbox-component .app-checkbox.app-checked{border-color:var(--color-primary, #2188d9);color:var(--color-primary, #2188d9)}.checkbox-component .app-checkbox.app-checked+.app-checkbox-label{color:#4f4f4f}.checkbox-component .app-checkbox.app-indeterminate{border-color:var(--color-primary, #2188d9);color:var(--color-primary, #2188d9)}.checkbox-component .app-checkbox .app-checkbox-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px}.checkbox-component .app-checkbox-label{font-weight:400;font-size:14px;line-height:130%;color:#828282;display:flex;align-items:center}.checkbox-component .app-checkbox-label .checkbox-image{margin-right:8px;width:36px}.checkbox-component:hover,.checkbox-component:focus{outline:none;text-decoration:none}.checkbox-component:hover .app-checkbox,.checkbox-component:focus .app-checkbox{border-color:#16598d}.checkbox-component:hover .app-checkbox.app-checked,.checkbox-component:focus .app-checkbox.app-checked{border-color:#16598d;color:#16598d}.checkbox-component:hover .app-checkbox.app-indeterminate,.checkbox-component:focus .app-checkbox.app-indeterminate{border-color:#16598d;color:#16598d}.checkbox-component.app-disabled{cursor:not-allowed}.checkbox-component.app-disabled .app-checkbox{border-color:#ececed}.checkbox-component.app-disabled .app-checkbox.app-checked,.checkbox-component.app-disabled .app-checkbox.app-indeterminate{border-color:#ececed;color:#ececed}.checkbox-component.app-disabled .app-checkbox-label{color:#ececed}\n"] }]
|
|
29
30
|
}], propDecorators: { checked: [{
|
|
30
31
|
type: Input
|
|
31
32
|
}], checkedChange: [{
|
|
32
33
|
type: Output
|
|
33
34
|
}], label: [{
|
|
34
35
|
type: Input
|
|
36
|
+
}], labelColor: [{
|
|
37
|
+
type: Input
|
|
35
38
|
}], disabled: [{
|
|
36
39
|
type: Input
|
|
37
40
|
}], disableValueChange: [{
|
|
@@ -41,4 +44,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
41
44
|
}], imageUrl: [{
|
|
42
45
|
type: Input
|
|
43
46
|
}] } });
|
|
44
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
47
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiemVuZHUtY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctemVuZHVpdC9zcmMvbGliL2NoZWNrYm94L3plbmR1LWNoZWNrYm94LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLXplbmR1aXQvc3JjL2xpYi9jaGVja2JveC96ZW5kdS1jaGVja2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFPdkUsTUFBTSxPQUFPLHNCQUFzQjtJQUxuQztRQVNjLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUU3QyxVQUFLLEdBQW9CLFFBQVEsQ0FBQztRQUVsQyxlQUFVLEdBQVcsRUFBRSxDQUFDO1FBRXhCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFFakIsdUJBQWtCLEdBQUcsS0FBSyxDQUFDO1FBRTNCLGtCQUFhLEdBQUcsS0FBSyxDQUFDO0tBaUJsQztJQWJHOztPQUVHO0lBQ0ksTUFBTTtRQUNULElBQUksSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsa0JBQWtCLEVBQUU7WUFDMUMsT0FBTztTQUNWO1FBRUQsSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUM7UUFDN0IsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7UUFFM0IsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQzFDLENBQUM7O29IQTlCUSxzQkFBc0I7d0dBQXRCLHNCQUFzQixpU0NQbkMsK3dCQW9CQTs0RkRiYSxzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0ksY0FBYzs4QkFNZixPQUFPO3NCQUFmLEtBQUs7Z0JBRUksYUFBYTtzQkFBdEIsTUFBTTtnQkFFRSxLQUFLO3NCQUFiLEtBQUs7Z0JBRUcsVUFBVTtzQkFBbEIsS0FBSztnQkFFRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVHLGtCQUFrQjtzQkFBMUIsS0FBSztnQkFFRyxhQUFhO3NCQUFyQixLQUFLO2dCQUVHLFFBQVE7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3plbi1jaGVja2JveCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3plbmR1LWNoZWNrYm94LmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi96ZW5kdS1jaGVja2JveC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFplbmR1Q2hlY2tib3hDb21wb25lbnQge1xuXG4gICAgQElucHV0KCkgY2hlY2tlZDogYm9vbGVhbjtcblxuICAgIEBPdXRwdXQoKSBjaGVja2VkQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gICAgQElucHV0KCkgbGFiZWw6IHN0cmluZyB8IG51bWJlciA9ICdFbmFibGUnO1xuXG4gICAgQElucHV0KCkgbGFiZWxDb2xvcjogc3RyaW5nID0gXCJcIjtcblxuICAgIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgICBASW5wdXQoKSBkaXNhYmxlVmFsdWVDaGFuZ2UgPSBmYWxzZTtcblxuICAgIEBJbnB1dCgpIGluZGV0ZXJtaW5hdGUgPSBmYWxzZTtcblxuICAgIEBJbnB1dCgpIGltYWdlVXJsOiBzdHJpbmc7XG5cbiAgICAvKipcbiAgICAgKiBUb2dnbGUgc3RhdGVcbiAgICAgKi9cbiAgICBwdWJsaWMgdG9nZ2xlKCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5kaXNhYmxlZCB8fCB0aGlzLmRpc2FibGVWYWx1ZUNoYW5nZSkge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5jaGVja2VkID0gIXRoaXMuY2hlY2tlZDtcbiAgICAgICAgdGhpcy5pbmRldGVybWluYXRlID0gZmFsc2U7XG5cbiAgICAgICAgdGhpcy5jaGVja2VkQ2hhbmdlLmVtaXQodGhpcy5jaGVja2VkKTtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY2hlY2tib3gtY29tcG9uZW50XCJcbiAgICAgW25nQ2xhc3NdPVwieydhcHAtZGlzYWJsZWQnOiBkaXNhYmxlZH1cIlxuICAgICAoY2xpY2spPVwidG9nZ2xlKClcIj5cbiAgICA8YnV0dG9uIGNsYXNzPVwiYXBwLWNoZWNrYm94XCJcbiAgICAgICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgICAgICAgICBbbmdDbGFzc109XCJ7ICdhcHAtY2hlY2tlZCc6IGNoZWNrZWQgJiYgIWluZGV0ZXJtaW5hdGUsICdhcHAtaW5kZXRlcm1pbmF0ZSc6IGluZGV0ZXJtaW5hdGUgfVwiPlxuICAgICAgICA8aSAqbmdJZj1cImNoZWNrZWQgJiYgIWluZGV0ZXJtaW5hdGVcIlxuICAgICAgICAgICBjbGFzcz1cIm1hdGVyaWFsLWljb25zIGFwcC1jaGVja2JveC1pY29uXCI+ZG9uZTwvaT5cbiAgICAgICAgPGkgKm5nSWY9XCJpbmRldGVybWluYXRlXCJcbiAgICAgICAgICAgY2xhc3M9XCJtYXRlcmlhbC1pY29ucyBhcHAtY2hlY2tib3gtaWNvblwiPnJlbW92ZTwvaT5cbiAgICA8L2J1dHRvbj5cbiAgICA8ZGl2IGNsYXNzPVwiYXBwLWNoZWNrYm94LWxhYmVsXCJcbiAgICAgICAgICpuZ0lmPVwibGFiZWxcIlxuICAgICAgICAgW25nU3R5bGVdPVwieydjb2xvcic6IGxhYmVsQ29sb3IgfVwiPlxuICAgICAgICA8aW1nIGNsYXNzPVwiY2hlY2tib3gtaW1hZ2VcIlxuICAgICAgICAgICAgIFtzcmNdPVwiaW1hZ2VVcmxcIlxuICAgICAgICAgICAgICpuZ0lmPVwiaW1hZ2VVcmxcIj5cbiAgICAgICAge3sgbGFiZWwgfX1cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -99,7 +99,7 @@ export class ZenduColumnConfigurationComponent {
|
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
ZenduColumnConfigurationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduColumnConfigurationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
102
|
-
ZenduColumnConfigurationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduColumnConfigurationComponent, selector: "zen-column-configuration", inputs: { configuration: "configuration", defaultConfiguration: "defaultConfiguration", dropdownPosition: "dropdownPosition" }, outputs: { configurationChange: "configurationChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-config-component\">\n <button class=\"button-basic button-icon\"\n [ngClass]=\"{ 'active': showPanel }\"\n (click)=\"togglePanel()\">\n <i class=\"material-icons\">view_column</i>\n </button>\n\n <div *ngIf=\"showPanel\"\n class=\"action-menu column-config-menu\"\n [ngClass]=\"{'right': dropdownPosition === 'right'}\">\n <div class=\"action-menu-header\">\n <div class=\"title\">Manage Columns</div>\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"filterItems()\"></zen-search-box>\n </div>\n\n\n <div class=\"action-menu-body dnd-container\"\n cdkDropList\n (cdkDropListDropped)=\"onDrop($event)\">\n <div *ngFor=\"let config of filteredColumnsConfiguration\"\n class=\"action-item-checkbox drag-item\"\n cdkDrag>\n <zen-checkbox class=\"flex-1\"\n [(checked)]=\"config.isVisible\"\n [label]=\"config.displayName\"></zen-checkbox>\n <i class=\"material-icons drag-icon\">drag_handle</i>\n </div>\n </div>\n\n <div class=\"action-menu-footer\">\n <button (click)=\"reset()\"\n type=\"button\"\n class=\"button-stroked full-width\">Reset</button>\n <button (click)=\"apply()\"\n type=\"button\"\n class=\"button-flat full-width\">Apply</button>\n </div>\n </div>\n</div>\n", styles: [".column-config-component{display:inline-block;position:relative}.column-config-component .column-config-menu{top:115%;width:300px}.column-config-component .column-config-menu.right{right:0}.column-config-component .column-config-menu .dnd-container{max-height:218px;overflow-y:auto}.column-config-component .column-config-menu .dnd-container .drag-item{justify-content:space-between}.column-config-component .column-config-menu .dnd-container .drag-item .drag-icon{cursor:move;color:#b8b9bc}.column-config-component .column-config-menu .dnd-container .dndDraggingSource{display:none}.column-config-component .column-config-menu .dnd-container .dndPlaceholder{background-color:#b8b9bc;display:block;min-height:40px}\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: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3.ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "disabled", "disableValueChange", "indeterminate", "imageUrl"], outputs: ["checkedChange"] }, { kind: "component", type: i4.ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }] });
|
|
102
|
+
ZenduColumnConfigurationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduColumnConfigurationComponent, selector: "zen-column-configuration", inputs: { configuration: "configuration", defaultConfiguration: "defaultConfiguration", dropdownPosition: "dropdownPosition" }, outputs: { configurationChange: "configurationChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-config-component\">\n <button class=\"button-basic button-icon\"\n [ngClass]=\"{ 'active': showPanel }\"\n (click)=\"togglePanel()\">\n <i class=\"material-icons\">view_column</i>\n </button>\n\n <div *ngIf=\"showPanel\"\n class=\"action-menu column-config-menu\"\n [ngClass]=\"{'right': dropdownPosition === 'right'}\">\n <div class=\"action-menu-header\">\n <div class=\"title\">Manage Columns</div>\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"filterItems()\"></zen-search-box>\n </div>\n\n\n <div class=\"action-menu-body dnd-container\"\n cdkDropList\n (cdkDropListDropped)=\"onDrop($event)\">\n <div *ngFor=\"let config of filteredColumnsConfiguration\"\n class=\"action-item-checkbox drag-item\"\n cdkDrag>\n <zen-checkbox class=\"flex-1\"\n [(checked)]=\"config.isVisible\"\n [label]=\"config.displayName\"></zen-checkbox>\n <i class=\"material-icons drag-icon\">drag_handle</i>\n </div>\n </div>\n\n <div class=\"action-menu-footer\">\n <button (click)=\"reset()\"\n type=\"button\"\n class=\"button-stroked full-width\">Reset</button>\n <button (click)=\"apply()\"\n type=\"button\"\n class=\"button-flat full-width\">Apply</button>\n </div>\n </div>\n</div>\n", styles: [".column-config-component{display:inline-block;position:relative}.column-config-component .column-config-menu{top:115%;width:300px}.column-config-component .column-config-menu.right{right:0}.column-config-component .column-config-menu .dnd-container{max-height:218px;overflow-y:auto}.column-config-component .column-config-menu .dnd-container .drag-item{justify-content:space-between}.column-config-component .column-config-menu .dnd-container .drag-item .drag-icon{cursor:move;color:#b8b9bc}.column-config-component .column-config-menu .dnd-container .dndDraggingSource{display:none}.column-config-component .column-config-menu .dnd-container .dndPlaceholder{background-color:#b8b9bc;display:block;min-height:40px}\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: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3.ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl"], outputs: ["checkedChange"] }, { kind: "component", type: i4.ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }] });
|
|
103
103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduColumnConfigurationComponent, decorators: [{
|
|
104
104
|
type: Component,
|
|
105
105
|
args: [{ selector: 'zen-column-configuration', template: "<div class=\"column-config-component\">\n <button class=\"button-basic button-icon\"\n [ngClass]=\"{ 'active': showPanel }\"\n (click)=\"togglePanel()\">\n <i class=\"material-icons\">view_column</i>\n </button>\n\n <div *ngIf=\"showPanel\"\n class=\"action-menu column-config-menu\"\n [ngClass]=\"{'right': dropdownPosition === 'right'}\">\n <div class=\"action-menu-header\">\n <div class=\"title\">Manage Columns</div>\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"filterItems()\"></zen-search-box>\n </div>\n\n\n <div class=\"action-menu-body dnd-container\"\n cdkDropList\n (cdkDropListDropped)=\"onDrop($event)\">\n <div *ngFor=\"let config of filteredColumnsConfiguration\"\n class=\"action-item-checkbox drag-item\"\n cdkDrag>\n <zen-checkbox class=\"flex-1\"\n [(checked)]=\"config.isVisible\"\n [label]=\"config.displayName\"></zen-checkbox>\n <i class=\"material-icons drag-icon\">drag_handle</i>\n </div>\n </div>\n\n <div class=\"action-menu-footer\">\n <button (click)=\"reset()\"\n type=\"button\"\n class=\"button-stroked full-width\">Reset</button>\n <button (click)=\"apply()\"\n type=\"button\"\n class=\"button-flat full-width\">Apply</button>\n </div>\n </div>\n</div>\n", styles: [".column-config-component{display:inline-block;position:relative}.column-config-component .column-config-menu{top:115%;width:300px}.column-config-component .column-config-menu.right{right:0}.column-config-component .column-config-menu .dnd-container{max-height:218px;overflow-y:auto}.column-config-component .column-config-menu .dnd-container .drag-item{justify-content:space-between}.column-config-component .column-config-menu .dnd-container .drag-item .drag-icon{cursor:move;color:#b8b9bc}.column-config-component .column-config-menu .dnd-container .dndDraggingSource{display:none}.column-config-component .column-config-menu .dnd-container .dndPlaceholder{background-color:#b8b9bc;display:block;min-height:40px}\n"] }]
|
|
@@ -665,7 +665,7 @@ export class ZenduFilterComponent {
|
|
|
665
665
|
}
|
|
666
666
|
}
|
|
667
667
|
ZenduFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduFilterComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
668
|
-
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 [ngClass]=\"{'active': isItemActive(item), 'expanded': item.expanded}\">\n <i class=\"material-icons expand-icon\"\n [ngClass]=\"{'active': item.expanded}\">expand_more</i>\n {{item.title | translate}}\n </button>\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 <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.name?.toString() | translate\"></zen-checkbox>\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\">\n <div class=\"action-item-checkbox ds-item select-all\">\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 <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.name?.toString() | translate\"></zen-checkbox>\n </div>\n </ng-container>\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 [ngClass]=\"{'active': selectedDateRangeOptions[item.key] === option.name}\">\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 [ngClass]=\"{'active': selectedDateRangeOptions[item.key] === 'Custom'}\">\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 [ngClass]=\"{'active': option.selected}\">\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\">\n <button (click)=\"reset()\"\n class=\"button-stroked full-width\">\n {{'Reset' | translate}}\n </button>\n <button (click)=\"apply()\"\n class=\"button-flat full-width\">\n {{'Apply' | translate}}\n </button>\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}.filters-component .menu-content .items-wrapper .expander-item{outline:none;border:none;display:flex;width:100%}.filters-component .menu-content .items-wrapper .action-item{color:#828282}.filters-component .menu-content .items-wrapper .action-item.expanded,.filters-component .menu-content .items-wrapper .action-item.active{background:#f4f9fd;color:#4f4f4f}.filters-component .menu-content .items-wrapper .expand-icon{transition:.3s}.filters-component .menu-content .items-wrapper .expand-icon.active{transform:rotate(180deg)}.filters-component .menu-content .items-wrapper .ds-item{padding-left:48px}.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 16px;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 16px}.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:#60636c;font-size:14px;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 .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", "disabled", "disableValueChange", "indeterminate", "imageUrl"], 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", "showDate", "parentContainer", "containerClass", "minDate", "maxDate", "boxDesign", "highlightDays", "autoConfirm", "hint", "highlightError", "disabled", "readonly", "xPosition", "yPosition", "dispalyOverParent"], outputs: ["dateChange"] }, { kind: "component", type: i7.ZenduRadioButtonComponent, selector: "zen-radio", inputs: ["selected", "label", "value", "name", "disabled", "imageUrl"], outputs: ["radioChange"] }, { kind: "component", type: i8.ZenduIconComponent, selector: "zen-icon", inputs: ["src"] }, { kind: "component", type: i9.ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
|
|
668
|
+
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 [ngClass]=\"{'active': isItemActive(item), 'expanded': item.expanded}\">\n <i class=\"material-icons expand-icon\"\n [ngClass]=\"{'active': item.expanded}\">expand_more</i>\n {{item.title | translate}}\n </button>\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 <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.name?.toString() | translate\"></zen-checkbox>\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\">\n <div class=\"action-item-checkbox ds-item select-all\">\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 <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.name?.toString() | translate\"></zen-checkbox>\n </div>\n </ng-container>\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 [ngClass]=\"{'active': selectedDateRangeOptions[item.key] === option.name}\">\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 [ngClass]=\"{'active': selectedDateRangeOptions[item.key] === 'Custom'}\">\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 [ngClass]=\"{'active': option.selected}\">\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\">\n <button (click)=\"reset()\"\n class=\"button-stroked full-width\">\n {{'Reset' | translate}}\n </button>\n <button (click)=\"apply()\"\n class=\"button-flat full-width\">\n {{'Apply' | translate}}\n </button>\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}.filters-component .menu-content .items-wrapper .expander-item{outline:none;border:none;display:flex;width:100%}.filters-component .menu-content .items-wrapper .action-item{color:#828282}.filters-component .menu-content .items-wrapper .action-item.expanded,.filters-component .menu-content .items-wrapper .action-item.active{background:#f4f9fd;color:#4f4f4f}.filters-component .menu-content .items-wrapper .expand-icon{transition:.3s}.filters-component .menu-content .items-wrapper .expand-icon.active{transform:rotate(180deg)}.filters-component .menu-content .items-wrapper .ds-item{padding-left:48px}.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 16px;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 16px}.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:#60636c;font-size:14px;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 .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"], 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", "showDate", "parentContainer", "containerClass", "minDate", "maxDate", "boxDesign", "highlightDays", "autoConfirm", "hint", "highlightError", "disabled", "readonly", "xPosition", "yPosition", "dispalyOverParent"], outputs: ["dateChange"] }, { kind: "component", type: i7.ZenduRadioButtonComponent, selector: "zen-radio", inputs: ["selected", "label", "value", "name", "disabled", "imageUrl"], outputs: ["radioChange"] }, { kind: "component", type: i8.ZenduIconComponent, selector: "zen-icon", inputs: ["src"] }, { kind: "component", type: i9.ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
|
|
669
669
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduFilterComponent, decorators: [{
|
|
670
670
|
type: Component,
|
|
671
671
|
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 [ngClass]=\"{'active': isItemActive(item), 'expanded': item.expanded}\">\n <i class=\"material-icons expand-icon\"\n [ngClass]=\"{'active': item.expanded}\">expand_more</i>\n {{item.title | translate}}\n </button>\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 <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.name?.toString() | translate\"></zen-checkbox>\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\">\n <div class=\"action-item-checkbox ds-item select-all\">\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 <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.name?.toString() | translate\"></zen-checkbox>\n </div>\n </ng-container>\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 [ngClass]=\"{'active': selectedDateRangeOptions[item.key] === option.name}\">\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 [ngClass]=\"{'active': selectedDateRangeOptions[item.key] === 'Custom'}\">\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 [ngClass]=\"{'active': option.selected}\">\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\">\n <button (click)=\"reset()\"\n class=\"button-stroked full-width\">\n {{'Reset' | translate}}\n </button>\n <button (click)=\"apply()\"\n class=\"button-flat full-width\">\n {{'Apply' | translate}}\n </button>\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}.filters-component .menu-content .items-wrapper .expander-item{outline:none;border:none;display:flex;width:100%}.filters-component .menu-content .items-wrapper .action-item{color:#828282}.filters-component .menu-content .items-wrapper .action-item.expanded,.filters-component .menu-content .items-wrapper .action-item.active{background:#f4f9fd;color:#4f4f4f}.filters-component .menu-content .items-wrapper .expand-icon{transition:.3s}.filters-component .menu-content .items-wrapper .expand-icon.active{transform:rotate(180deg)}.filters-component .menu-content .items-wrapper .ds-item{padding-left:48px}.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 16px;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 16px}.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:#60636c;font-size:14px;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 .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"] }]
|
|
@@ -385,7 +385,7 @@ export class ZenduSelectComponent {
|
|
|
385
385
|
}
|
|
386
386
|
}
|
|
387
387
|
ZenduSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
388
|
-
ZenduSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduSelectComponent, selector: "zen-select", inputs: { selectModel: "selectModel", options: "options", placeholder: "placeholder", displayProp: "displayProp", idProp: "idProp", hasSearch: "hasSearch", returnOption: "returnOption", isMultiselect: "isMultiselect", disabled: "disabled", customIcon: "customIcon", customIconStart: "customIconStart", customIconColor: "customIconColor", isTruncate: "isTruncate", enableAddNewOption: "enableAddNewOption", newOptionText: "newOptionText", enableRemoveOption: "enableRemoveOption", removeOptionText: "removeOptionText", isLazyLoading: "isLazyLoading", lazyLoader: "lazyLoader", preferedOpenDirection: "preferedOpenDirection" }, outputs: { selectModelChange: "selectModelChange", addNewOption: "addNewOption", removeOption: "removeOption", closed: "closed" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:scroll": "scroll()" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ZenduSelectOptionDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ZenduSelectValueDirective, descendants: true }, { propertyName: "buttonTemplate", first: true, predicate: ZenduSelectButtonDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"app-select\">\n <button class=\"app-select-toggle\"\n [disabled]=\"disabled\"\n (click)=\"toggleExpand()\"\n [ngClass]=\"{'active': isExpanded}\">\n <div class=\"app-select-label\">\n <i *ngIf=\"customIconStart\" class=\"material-icons app-select-icon-start\">{{customIconStart}}</i>\n <div class=\"placeholder\"\n *ngIf=\"isModelEmpty()\">\n <span>{{placeholder | translate}}</span>\n </div>\n <div class=\"selected-item\"\n *ngIf=\"!isMultiselect && !isModelEmpty()\">\n <ng-template *ngIf=\"valueTemplate && selectModel[0]; else tplValueText\"\n [ngTemplateOutlet]=\"valueTemplate.template\"\n [ngTemplateOutletContext]=\"{ selectModel: selectModel, labelText: labelText }\"></ng-template>\n <ng-template #tplValueText>\n <span>{{ labelText | translate }}</span>\n </ng-template>\n </div>\n <div class=\"selected-item\"\n *ngIf=\"isMultiselect && !isModelEmpty()\">\n <span>{{ labelText | translate }}</span>\n </div>\n </div>\n <i *ngIf=\"!customIcon\"\n class=\"material-icons app-select-icon\">expand_more</i>\n <i *ngIf=\"customIcon\"\n class=\"material-icons-outlined custom-icon\"\n [style.color]=\"customIconColor\">{{customIcon}}</i>\n </button>\n\n <div class=\"action-menu-container\">\n <div class=\"action-menu app-select-dropdown-wrapper\"\n [ngClass]=\"{ 'show-top': isTopMenuDirection }\">\n <div class=\"app-select-dropdown\"\n *ngIf=\"isExpanded\">\n <div class=\"action-menu-header\"\n *ngIf=\"hasSearch\">\n <!--Search options-->\n <div class=\"search-wrapper\">\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"onSearchChange()\"></zen-search-box>\n </div>\n </div>\n <ng-template *ngIf=\"buttonTemplate\"\n [ngTemplateOutlet]=\"buttonTemplate.template\">\n </ng-template>\n <div class=\"action-menu-body\">\n <!--No options found-->\n <div class=\"no-options-found\"\n *ngIf=\"!filteredOptions.length && !isLoadingNow\">\n {{ 'No matching options found' | translate }}\n </div>\n\n <!--Select All Option-->\n <div class=\"action-item-checkbox select-all\"\n *ngIf=\"isMultiselect && !searchText && !isLazyLoading\"\n (click)=\"toggleAll()\">\n <zen-checkbox [checked]=\"selectModel.length === options.length\"\n [indeterminate]=\"selectModel.length !== options.length && selectModel.length\"\n [disableValueChange]=\"true\"\n [label]=\"'Select All' | translate\"></zen-checkbox>\n </div>\n\n <!--Single select Options-->\n <ng-container *ngIf=\"!isMultiselect\">\n <a class=\"action-item\"\n *ngIf=\"enableAddNewOption\"\n (click)=\"handleAddNewOption()\">\n <span *ngIf=\"newOptionText\">\n {{ newOptionText | translate }}\n </span>\n <span *ngIf=\"!newOptionText\">\n {{'Add New' | translate}}\n </span>\n </a>\n\n <a class=\"action-item remove-item\"\n *ngIf=\"enableRemoveOption\"\n (click)=\"handleRemoveOption()\">\n <span *ngIf=\"removeOptionText\">\n {{ removeOptionText | translate }}\n </span>\n <span *ngIf=\"!removeOptionText\">\n {{'Remove Selected' | translate}}\n </span>\n </a>\n\n <a class=\"action-item\"\n *ngFor=\"let option of filteredOptions\"\n (click)=\"handleOptionClick(option)\"\n [ngClass]=\"{ 'active': isSelected(option) }\">\n <span *ngIf=\"!isMultiselect\"\n [class.action-item-truncate]=\"isTruncate\">\n <ng-template *ngIf=\"optionTemplate; else tplOptionText\"\n [ngTemplateOutlet]=\"optionTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: option }\">\n </ng-template>\n <ng-template #tplOptionText>\n {{ getName(option) | translate }}\n </ng-template>\n </span>\n </a>\n </ng-container>\n\n <!--Multiselect Options-->\n <ng-container *ngIf=\"isMultiselect\">\n <div class=\"action-item-checkbox\"\n *ngFor=\"let option of filteredOptions\"\n (click)=\"handleOptionClick(option)\">\n <zen-checkbox *ngIf=\"isMultiselect\"\n [checked]=\"isSelected(option)\"\n [label]=\"getName(option)\"\n [disableValueChange]=\"true\"></zen-checkbox>\n </div>\n\n <ng-container *ngIf=\"isLazyLoading\">\n <div *ngIf=\"canLoadMore && !isLoadingNow\"\n class=\"action-item\">\n <button (click)=\"loadMore(false)\"\n class=\"button-stroked full-width\">\n {{'Load More' | translate}}\n </button>\n </div>\n <div *ngIf=\"isLoadingNow\"\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n </ng-container>\n\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{--toggle-border-bottom: var(--zen-select-toggle-border-bottom, 1px solid #d6d6d8);--toggle-padding: var(--zen-select-toggle-padding, 0 0 8px 0)}.app-select{width:100%;position:relative}.app-select ::-webkit-scrollbar-thumb{background-color:var(--color-primary, #2188d9)}.app-select .app-select-toggle{display:flex;align-items:center;justify-content:space-between;position:relative;transition:.3s;width:100%;background:#ffffff;-webkit-appearance:none;appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:var(--toggle-border-bottom);padding:var(--toggle-padding);font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#333}.app-select .app-select-toggle .app-select-label{display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:400;font-size:14px;line-height:24px}.app-select .app-select-toggle .app-select-label .placeholder{color:#bebebe}.app-select .app-select-toggle .app-select-label .selected-item{color:#333}.app-select .app-select-toggle .custom-icon{color:#bebebe}.app-select .app-select-toggle .app-select-icon{color:#bebebe;transition:.3s}.app-select .app-select-toggle .app-select-icon-start{color:#bebebe;margin-right:4px}.app-select .app-select-toggle:focus{border-color:var(--color-primary, #2188d9)}.app-select .app-select-toggle:focus .app-select-icon,.app-select .app-select-toggle:focus .custom-icon{color:var(--color-primary, #2188d9)!important}.app-select .app-select-toggle[readonly],.app-select .app-select-toggle[disabled]{cursor:not-allowed;color:#b8b9bc;border-color:#d0d0d2}.app-select .app-select-toggle.active{border-color:var(--color-primary, #2188d9)}.app-select .app-select-toggle.active .custom-icon{color:var(--color-primary, #2188d9)!important}.app-select .app-select-toggle.active .app-select-icon{transform:rotate(180deg);color:var(--color-primary, #2188d9)}.app-select .app-select-toggle.active .app-select-icon-start{color:var(--color-primary, #2188d9)}.app-select .action-menu-container{position:sticky;width:inherit;z-index:10}.app-select .app-select-dropdown-wrapper{top:115%;width:inherit}.app-select .app-select-dropdown-wrapper.show-top{top:unset;bottom:115%}.app-select .app-select-dropdown-wrapper .action-menu-body{max-height:200px;overflow:auto}.app-select .app-select-dropdown-wrapper .action-menu-body .remove-item{color:#dc3e33}.app-select .app-select-dropdown-wrapper .no-options-found{background:#ffffff;color:#b8b9bc;padding:8px 16px;text-decoration:none;font-style:normal;font-weight:400;font-size:16px;line-height:24px}.app-select .app-select-dropdown-wrapper .select-all{font-weight:500}.app-select .app-select-dropdown-wrapper .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "disabled", "disableValueChange", "indeterminate", "imageUrl"], outputs: ["checkedChange"] }, { kind: "component", type: i3.ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: i4.ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
|
|
388
|
+
ZenduSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduSelectComponent, selector: "zen-select", inputs: { selectModel: "selectModel", options: "options", placeholder: "placeholder", displayProp: "displayProp", idProp: "idProp", hasSearch: "hasSearch", returnOption: "returnOption", isMultiselect: "isMultiselect", disabled: "disabled", customIcon: "customIcon", customIconStart: "customIconStart", customIconColor: "customIconColor", isTruncate: "isTruncate", enableAddNewOption: "enableAddNewOption", newOptionText: "newOptionText", enableRemoveOption: "enableRemoveOption", removeOptionText: "removeOptionText", isLazyLoading: "isLazyLoading", lazyLoader: "lazyLoader", preferedOpenDirection: "preferedOpenDirection" }, outputs: { selectModelChange: "selectModelChange", addNewOption: "addNewOption", removeOption: "removeOption", closed: "closed" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:scroll": "scroll()" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ZenduSelectOptionDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ZenduSelectValueDirective, descendants: true }, { propertyName: "buttonTemplate", first: true, predicate: ZenduSelectButtonDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"app-select\">\n <button class=\"app-select-toggle\"\n [disabled]=\"disabled\"\n (click)=\"toggleExpand()\"\n [ngClass]=\"{'active': isExpanded}\">\n <div class=\"app-select-label\">\n <i *ngIf=\"customIconStart\" class=\"material-icons app-select-icon-start\">{{customIconStart}}</i>\n <div class=\"placeholder\"\n *ngIf=\"isModelEmpty()\">\n <span>{{placeholder | translate}}</span>\n </div>\n <div class=\"selected-item\"\n *ngIf=\"!isMultiselect && !isModelEmpty()\">\n <ng-template *ngIf=\"valueTemplate && selectModel[0]; else tplValueText\"\n [ngTemplateOutlet]=\"valueTemplate.template\"\n [ngTemplateOutletContext]=\"{ selectModel: selectModel, labelText: labelText }\"></ng-template>\n <ng-template #tplValueText>\n <span>{{ labelText | translate }}</span>\n </ng-template>\n </div>\n <div class=\"selected-item\"\n *ngIf=\"isMultiselect && !isModelEmpty()\">\n <span>{{ labelText | translate }}</span>\n </div>\n </div>\n <i *ngIf=\"!customIcon\"\n class=\"material-icons app-select-icon\">expand_more</i>\n <i *ngIf=\"customIcon\"\n class=\"material-icons-outlined custom-icon\"\n [style.color]=\"customIconColor\">{{customIcon}}</i>\n </button>\n\n <div class=\"action-menu-container\">\n <div class=\"action-menu app-select-dropdown-wrapper\"\n [ngClass]=\"{ 'show-top': isTopMenuDirection }\">\n <div class=\"app-select-dropdown\"\n *ngIf=\"isExpanded\">\n <div class=\"action-menu-header\"\n *ngIf=\"hasSearch\">\n <!--Search options-->\n <div class=\"search-wrapper\">\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"onSearchChange()\"></zen-search-box>\n </div>\n </div>\n <ng-template *ngIf=\"buttonTemplate\"\n [ngTemplateOutlet]=\"buttonTemplate.template\">\n </ng-template>\n <div class=\"action-menu-body\">\n <!--No options found-->\n <div class=\"no-options-found\"\n *ngIf=\"!filteredOptions.length && !isLoadingNow\">\n {{ 'No matching options found' | translate }}\n </div>\n\n <!--Select All Option-->\n <div class=\"action-item-checkbox select-all\"\n *ngIf=\"isMultiselect && !searchText && !isLazyLoading\"\n (click)=\"toggleAll()\">\n <zen-checkbox [checked]=\"selectModel.length === options.length\"\n [indeterminate]=\"selectModel.length !== options.length && selectModel.length\"\n [disableValueChange]=\"true\"\n [label]=\"'Select All' | translate\"></zen-checkbox>\n </div>\n\n <!--Single select Options-->\n <ng-container *ngIf=\"!isMultiselect\">\n <a class=\"action-item\"\n *ngIf=\"enableAddNewOption\"\n (click)=\"handleAddNewOption()\">\n <span *ngIf=\"newOptionText\">\n {{ newOptionText | translate }}\n </span>\n <span *ngIf=\"!newOptionText\">\n {{'Add New' | translate}}\n </span>\n </a>\n\n <a class=\"action-item remove-item\"\n *ngIf=\"enableRemoveOption\"\n (click)=\"handleRemoveOption()\">\n <span *ngIf=\"removeOptionText\">\n {{ removeOptionText | translate }}\n </span>\n <span *ngIf=\"!removeOptionText\">\n {{'Remove Selected' | translate}}\n </span>\n </a>\n\n <a class=\"action-item\"\n *ngFor=\"let option of filteredOptions\"\n (click)=\"handleOptionClick(option)\"\n [ngClass]=\"{ 'active': isSelected(option) }\">\n <span *ngIf=\"!isMultiselect\"\n [class.action-item-truncate]=\"isTruncate\">\n <ng-template *ngIf=\"optionTemplate; else tplOptionText\"\n [ngTemplateOutlet]=\"optionTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: option }\">\n </ng-template>\n <ng-template #tplOptionText>\n {{ getName(option) | translate }}\n </ng-template>\n </span>\n </a>\n </ng-container>\n\n <!--Multiselect Options-->\n <ng-container *ngIf=\"isMultiselect\">\n <div class=\"action-item-checkbox\"\n *ngFor=\"let option of filteredOptions\"\n (click)=\"handleOptionClick(option)\">\n <zen-checkbox *ngIf=\"isMultiselect\"\n [checked]=\"isSelected(option)\"\n [label]=\"getName(option)\"\n [disableValueChange]=\"true\"></zen-checkbox>\n </div>\n\n <ng-container *ngIf=\"isLazyLoading\">\n <div *ngIf=\"canLoadMore && !isLoadingNow\"\n class=\"action-item\">\n <button (click)=\"loadMore(false)\"\n class=\"button-stroked full-width\">\n {{'Load More' | translate}}\n </button>\n </div>\n <div *ngIf=\"isLoadingNow\"\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n </ng-container>\n\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{--toggle-border-bottom: var(--zen-select-toggle-border-bottom, 1px solid #d6d6d8);--toggle-padding: var(--zen-select-toggle-padding, 0 0 8px 0)}.app-select{width:100%;position:relative}.app-select ::-webkit-scrollbar-thumb{background-color:var(--color-primary, #2188d9)}.app-select .app-select-toggle{display:flex;align-items:center;justify-content:space-between;position:relative;transition:.3s;width:100%;background:#ffffff;-webkit-appearance:none;appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:var(--toggle-border-bottom);padding:var(--toggle-padding);font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#333}.app-select .app-select-toggle .app-select-label{display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:400;font-size:14px;line-height:24px}.app-select .app-select-toggle .app-select-label .placeholder{color:#bebebe}.app-select .app-select-toggle .app-select-label .selected-item{color:#333}.app-select .app-select-toggle .custom-icon{color:#bebebe}.app-select .app-select-toggle .app-select-icon{color:#bebebe;transition:.3s}.app-select .app-select-toggle .app-select-icon-start{color:#bebebe;margin-right:4px}.app-select .app-select-toggle:focus{border-color:var(--color-primary, #2188d9)}.app-select .app-select-toggle:focus .app-select-icon,.app-select .app-select-toggle:focus .custom-icon{color:var(--color-primary, #2188d9)!important}.app-select .app-select-toggle[readonly],.app-select .app-select-toggle[disabled]{cursor:not-allowed;color:#b8b9bc;border-color:#d0d0d2}.app-select .app-select-toggle.active{border-color:var(--color-primary, #2188d9)}.app-select .app-select-toggle.active .custom-icon{color:var(--color-primary, #2188d9)!important}.app-select .app-select-toggle.active .app-select-icon{transform:rotate(180deg);color:var(--color-primary, #2188d9)}.app-select .app-select-toggle.active .app-select-icon-start{color:var(--color-primary, #2188d9)}.app-select .action-menu-container{position:sticky;width:inherit;z-index:10}.app-select .app-select-dropdown-wrapper{top:115%;width:inherit}.app-select .app-select-dropdown-wrapper.show-top{top:unset;bottom:115%}.app-select .app-select-dropdown-wrapper .action-menu-body{max-height:200px;overflow:auto}.app-select .app-select-dropdown-wrapper .action-menu-body .remove-item{color:#dc3e33}.app-select .app-select-dropdown-wrapper .no-options-found{background:#ffffff;color:#b8b9bc;padding:8px 16px;text-decoration:none;font-style:normal;font-weight:400;font-size:16px;line-height:24px}.app-select .app-select-dropdown-wrapper .select-all{font-weight:500}.app-select .app-select-dropdown-wrapper .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl"], outputs: ["checkedChange"] }, { kind: "component", type: i3.ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: i4.ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
|
|
389
389
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSelectComponent, decorators: [{
|
|
390
390
|
type: Component,
|
|
391
391
|
args: [{ selector: 'zen-select', template: "<div class=\"app-select\">\n <button class=\"app-select-toggle\"\n [disabled]=\"disabled\"\n (click)=\"toggleExpand()\"\n [ngClass]=\"{'active': isExpanded}\">\n <div class=\"app-select-label\">\n <i *ngIf=\"customIconStart\" class=\"material-icons app-select-icon-start\">{{customIconStart}}</i>\n <div class=\"placeholder\"\n *ngIf=\"isModelEmpty()\">\n <span>{{placeholder | translate}}</span>\n </div>\n <div class=\"selected-item\"\n *ngIf=\"!isMultiselect && !isModelEmpty()\">\n <ng-template *ngIf=\"valueTemplate && selectModel[0]; else tplValueText\"\n [ngTemplateOutlet]=\"valueTemplate.template\"\n [ngTemplateOutletContext]=\"{ selectModel: selectModel, labelText: labelText }\"></ng-template>\n <ng-template #tplValueText>\n <span>{{ labelText | translate }}</span>\n </ng-template>\n </div>\n <div class=\"selected-item\"\n *ngIf=\"isMultiselect && !isModelEmpty()\">\n <span>{{ labelText | translate }}</span>\n </div>\n </div>\n <i *ngIf=\"!customIcon\"\n class=\"material-icons app-select-icon\">expand_more</i>\n <i *ngIf=\"customIcon\"\n class=\"material-icons-outlined custom-icon\"\n [style.color]=\"customIconColor\">{{customIcon}}</i>\n </button>\n\n <div class=\"action-menu-container\">\n <div class=\"action-menu app-select-dropdown-wrapper\"\n [ngClass]=\"{ 'show-top': isTopMenuDirection }\">\n <div class=\"app-select-dropdown\"\n *ngIf=\"isExpanded\">\n <div class=\"action-menu-header\"\n *ngIf=\"hasSearch\">\n <!--Search options-->\n <div class=\"search-wrapper\">\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"onSearchChange()\"></zen-search-box>\n </div>\n </div>\n <ng-template *ngIf=\"buttonTemplate\"\n [ngTemplateOutlet]=\"buttonTemplate.template\">\n </ng-template>\n <div class=\"action-menu-body\">\n <!--No options found-->\n <div class=\"no-options-found\"\n *ngIf=\"!filteredOptions.length && !isLoadingNow\">\n {{ 'No matching options found' | translate }}\n </div>\n\n <!--Select All Option-->\n <div class=\"action-item-checkbox select-all\"\n *ngIf=\"isMultiselect && !searchText && !isLazyLoading\"\n (click)=\"toggleAll()\">\n <zen-checkbox [checked]=\"selectModel.length === options.length\"\n [indeterminate]=\"selectModel.length !== options.length && selectModel.length\"\n [disableValueChange]=\"true\"\n [label]=\"'Select All' | translate\"></zen-checkbox>\n </div>\n\n <!--Single select Options-->\n <ng-container *ngIf=\"!isMultiselect\">\n <a class=\"action-item\"\n *ngIf=\"enableAddNewOption\"\n (click)=\"handleAddNewOption()\">\n <span *ngIf=\"newOptionText\">\n {{ newOptionText | translate }}\n </span>\n <span *ngIf=\"!newOptionText\">\n {{'Add New' | translate}}\n </span>\n </a>\n\n <a class=\"action-item remove-item\"\n *ngIf=\"enableRemoveOption\"\n (click)=\"handleRemoveOption()\">\n <span *ngIf=\"removeOptionText\">\n {{ removeOptionText | translate }}\n </span>\n <span *ngIf=\"!removeOptionText\">\n {{'Remove Selected' | translate}}\n </span>\n </a>\n\n <a class=\"action-item\"\n *ngFor=\"let option of filteredOptions\"\n (click)=\"handleOptionClick(option)\"\n [ngClass]=\"{ 'active': isSelected(option) }\">\n <span *ngIf=\"!isMultiselect\"\n [class.action-item-truncate]=\"isTruncate\">\n <ng-template *ngIf=\"optionTemplate; else tplOptionText\"\n [ngTemplateOutlet]=\"optionTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: option }\">\n </ng-template>\n <ng-template #tplOptionText>\n {{ getName(option) | translate }}\n </ng-template>\n </span>\n </a>\n </ng-container>\n\n <!--Multiselect Options-->\n <ng-container *ngIf=\"isMultiselect\">\n <div class=\"action-item-checkbox\"\n *ngFor=\"let option of filteredOptions\"\n (click)=\"handleOptionClick(option)\">\n <zen-checkbox *ngIf=\"isMultiselect\"\n [checked]=\"isSelected(option)\"\n [label]=\"getName(option)\"\n [disableValueChange]=\"true\"></zen-checkbox>\n </div>\n\n <ng-container *ngIf=\"isLazyLoading\">\n <div *ngIf=\"canLoadMore && !isLoadingNow\"\n class=\"action-item\">\n <button (click)=\"loadMore(false)\"\n class=\"button-stroked full-width\">\n {{'Load More' | translate}}\n </button>\n </div>\n <div *ngIf=\"isLoadingNow\"\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n </ng-container>\n\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{--toggle-border-bottom: var(--zen-select-toggle-border-bottom, 1px solid #d6d6d8);--toggle-padding: var(--zen-select-toggle-padding, 0 0 8px 0)}.app-select{width:100%;position:relative}.app-select ::-webkit-scrollbar-thumb{background-color:var(--color-primary, #2188d9)}.app-select .app-select-toggle{display:flex;align-items:center;justify-content:space-between;position:relative;transition:.3s;width:100%;background:#ffffff;-webkit-appearance:none;appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:var(--toggle-border-bottom);padding:var(--toggle-padding);font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#333}.app-select .app-select-toggle .app-select-label{display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:400;font-size:14px;line-height:24px}.app-select .app-select-toggle .app-select-label .placeholder{color:#bebebe}.app-select .app-select-toggle .app-select-label .selected-item{color:#333}.app-select .app-select-toggle .custom-icon{color:#bebebe}.app-select .app-select-toggle .app-select-icon{color:#bebebe;transition:.3s}.app-select .app-select-toggle .app-select-icon-start{color:#bebebe;margin-right:4px}.app-select .app-select-toggle:focus{border-color:var(--color-primary, #2188d9)}.app-select .app-select-toggle:focus .app-select-icon,.app-select .app-select-toggle:focus .custom-icon{color:var(--color-primary, #2188d9)!important}.app-select .app-select-toggle[readonly],.app-select .app-select-toggle[disabled]{cursor:not-allowed;color:#b8b9bc;border-color:#d0d0d2}.app-select .app-select-toggle.active{border-color:var(--color-primary, #2188d9)}.app-select .app-select-toggle.active .custom-icon{color:var(--color-primary, #2188d9)!important}.app-select .app-select-toggle.active .app-select-icon{transform:rotate(180deg);color:var(--color-primary, #2188d9)}.app-select .app-select-toggle.active .app-select-icon-start{color:var(--color-primary, #2188d9)}.app-select .action-menu-container{position:sticky;width:inherit;z-index:10}.app-select .app-select-dropdown-wrapper{top:115%;width:inherit}.app-select .app-select-dropdown-wrapper.show-top{top:unset;bottom:115%}.app-select .app-select-dropdown-wrapper .action-menu-body{max-height:200px;overflow:auto}.app-select .app-select-dropdown-wrapper .action-menu-body .remove-item{color:#dc3e33}.app-select .app-select-dropdown-wrapper .no-options-found{background:#ffffff;color:#b8b9bc;padding:8px 16px;text-decoration:none;font-style:normal;font-weight:400;font-size:16px;line-height:24px}.app-select .app-select-dropdown-wrapper .select-all{font-weight:500}.app-select .app-select-dropdown-wrapper .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}\n"] }]
|