@firestitch/filter 18.0.0 → 18.0.2
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/app/components/filter-drawer/filter-drawer.component.d.ts +2 -2
- package/app/models/items/date/base-date-item.d.ts +1 -1
- package/esm2022/app/components/action-button/action-button.component.mjs +3 -3
- package/esm2022/app/components/action-kebab-actions/action-kebab-actions.component.mjs +2 -2
- package/esm2022/app/components/actions/actions.component.mjs +3 -3
- package/esm2022/app/components/filter/filter.component.mjs +3 -3
- package/esm2022/app/components/filter-drawer/filter-drawer.component.mjs +3 -3
- package/esm2022/app/components/filters-item/autocompletechips/autocompletechips.component.mjs +3 -3
- package/esm2022/app/models/filter-config.mjs +2 -2
- package/fesm2022/firestitch-filter.mjs +13 -13
- package/fesm2022/firestitch-filter.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1550,7 +1550,7 @@ class FsFilterConfig {
|
|
|
1550
1550
|
this.button.label = 'Filters';
|
|
1551
1551
|
}
|
|
1552
1552
|
if (this.button.icon === undefined) {
|
|
1553
|
-
this.button.icon = '
|
|
1553
|
+
this.button.icon = 'filter_alt';
|
|
1554
1554
|
}
|
|
1555
1555
|
if (this.button.style === undefined) {
|
|
1556
1556
|
this.button.style = ButtonStyle.Raised;
|
|
@@ -2601,11 +2601,11 @@ class FsFilterActionButtonComponent {
|
|
|
2601
2601
|
ActionType = ActionType;
|
|
2602
2602
|
action;
|
|
2603
2603
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2604
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: { action: "action" }, host: { classAttribute: "action-button" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"action.type\">\n <button\n type=\"button\"\n *ngSwitchCase=\"ActionType.Icon\"\n mat-icon-button\n (click)=\"action.click && action.click($event)\"\n [color]=\"action.color\"\n [ngClass]=\"action.classArray\"\n [disabled]=\"action.disabled$ | async\"\n [tabIndex]=\"action.tabIndex\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n\n <!-- Fab button -->\n <button \n type=\"button\"\n *ngSwitchCase=\"ActionType.Fab\"\n mat-fab\n (click)=\"action.click && action.click($event)\"\n [color]=\"action.color\"\n [ngClass]=\"action.classArray\"\n [disabled]=\"action.disabled$ | async\"\n [tabIndex]=\"action.tabIndex\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n\n <!-- Mini Fab button -->\n <button \n type=\"button\"\n *ngSwitchCase=\"ActionType.MiniFab\"\n mat-mini-fab\n (click)=\"action.click && action.click($event)\"\n [color]=\"action.color\"\n [ngClass]=\"action.classArray\"\n [disabled]=\"action.disabled$ | async\"\n [tabIndex]=\"action.tabIndex\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n\n <button \n type=\"button\"\n *ngSwitchDefault\n mat-button\n [ngClass]=\"{ \n 'mat-raised-button': action.type === ActionType.Raised,\n 'mat-
|
|
2604
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: { action: "action" }, host: { classAttribute: "action-button" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"action.type\">\n <button\n type=\"button\"\n *ngSwitchCase=\"ActionType.Icon\"\n mat-icon-button\n (click)=\"action.click && action.click($event)\"\n [color]=\"action.color\"\n [ngClass]=\"action.classArray\"\n [disabled]=\"action.disabled$ | async\"\n [tabIndex]=\"action.tabIndex\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n\n <!-- Fab button -->\n <button \n type=\"button\"\n *ngSwitchCase=\"ActionType.Fab\"\n mat-fab\n (click)=\"action.click && action.click($event)\"\n [color]=\"action.color\"\n [ngClass]=\"action.classArray\"\n [disabled]=\"action.disabled$ | async\"\n [tabIndex]=\"action.tabIndex\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n\n <!-- Mini Fab button -->\n <button \n type=\"button\"\n *ngSwitchCase=\"ActionType.MiniFab\"\n mat-mini-fab\n (click)=\"action.click && action.click($event)\"\n [color]=\"action.color\"\n [ngClass]=\"action.classArray\"\n [disabled]=\"action.disabled$ | async\"\n [tabIndex]=\"action.tabIndex\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n\n <button \n type=\"button\"\n *ngSwitchDefault\n mat-button\n class=\"button-basic\"\n [ngClass]=\"{ \n 'mat-mdc-raised-button': action.type === ActionType.Raised,\n 'mat-mdc-unelevated-button': action.type === ActionType.Flat,\n 'mat-mdc-outlined-button': action.type === ActionType.Stroked,\n 'mat-mdc-icon-button': action.type === ActionType.Icon,\n 'icon-placement-right': action.iconPlacement === 'right'\n }\"\n (click)=\"action.click && action.click($event)\"\n [color]=\"action.color\"\n [class]=\"action.classArray.join(' ')\"\n [disabled]=\"action.disabled$ | async\"\n [tabIndex]=\"action.tabIndex\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n\n <ng-template #buttonContent>\n <ng-container *ngIf=\"!action.icon else withIcon\">\n {{action.label}}\n </ng-container>\n\n <ng-template #withIcon>\n <mat-icon>{{action.icon}}</mat-icon>\n {{action.label}}\n </ng-template>\n </ng-template>\n</ng-container>\n", styles: [":host ::ng-deep .button-basic .mdc-button__label{display:flex;align-items:center}:host ::ng-deep .button-basic .mdc-button__label mat-icon{flex-shrink:0}:host ::ng-deep .button-basic.icon-placement-right .mdc-button__label{flex-direction:row-reverse}:host ::ng-deep .button-basic.icon-placement-right .mdc-button__label mat-icon{margin-left:5px}:host ::ng-deep .button-basic:not(.icon-placement-right) .mdc-button__label mat-icon{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "directive", type: i9.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2605
2605
|
}
|
|
2606
2606
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterActionButtonComponent, decorators: [{
|
|
2607
2607
|
type: Component,
|
|
2608
|
-
args: [{ selector: 'fs-filter-action-button', host: { class: 'action-button' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"action.type\">\n <button\n type=\"button\"\n *ngSwitchCase=\"ActionType.Icon\"\n mat-icon-button\n (click)=\"action.click && action.click($event)\"\n [color]=\"action.color\"\n [ngClass]=\"action.classArray\"\n [disabled]=\"action.disabled$ | async\"\n [tabIndex]=\"action.tabIndex\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n\n <!-- Fab button -->\n <button \n type=\"button\"\n *ngSwitchCase=\"ActionType.Fab\"\n mat-fab\n (click)=\"action.click && action.click($event)\"\n [color]=\"action.color\"\n [ngClass]=\"action.classArray\"\n [disabled]=\"action.disabled$ | async\"\n [tabIndex]=\"action.tabIndex\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n\n <!-- Mini Fab button -->\n <button \n type=\"button\"\n *ngSwitchCase=\"ActionType.MiniFab\"\n mat-mini-fab\n (click)=\"action.click && action.click($event)\"\n [color]=\"action.color\"\n [ngClass]=\"action.classArray\"\n [disabled]=\"action.disabled$ | async\"\n [tabIndex]=\"action.tabIndex\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n\n <button \n type=\"button\"\n *ngSwitchDefault\n mat-button\n [ngClass]=\"{ \n 'mat-raised-button': action.type === ActionType.Raised,\n 'mat-
|
|
2608
|
+
args: [{ selector: 'fs-filter-action-button', host: { class: 'action-button' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"action.type\">\n <button\n type=\"button\"\n *ngSwitchCase=\"ActionType.Icon\"\n mat-icon-button\n (click)=\"action.click && action.click($event)\"\n [color]=\"action.color\"\n [ngClass]=\"action.classArray\"\n [disabled]=\"action.disabled$ | async\"\n [tabIndex]=\"action.tabIndex\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n\n <!-- Fab button -->\n <button \n type=\"button\"\n *ngSwitchCase=\"ActionType.Fab\"\n mat-fab\n (click)=\"action.click && action.click($event)\"\n [color]=\"action.color\"\n [ngClass]=\"action.classArray\"\n [disabled]=\"action.disabled$ | async\"\n [tabIndex]=\"action.tabIndex\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n\n <!-- Mini Fab button -->\n <button \n type=\"button\"\n *ngSwitchCase=\"ActionType.MiniFab\"\n mat-mini-fab\n (click)=\"action.click && action.click($event)\"\n [color]=\"action.color\"\n [ngClass]=\"action.classArray\"\n [disabled]=\"action.disabled$ | async\"\n [tabIndex]=\"action.tabIndex\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n\n <button \n type=\"button\"\n *ngSwitchDefault\n mat-button\n class=\"button-basic\"\n [ngClass]=\"{ \n 'mat-mdc-raised-button': action.type === ActionType.Raised,\n 'mat-mdc-unelevated-button': action.type === ActionType.Flat,\n 'mat-mdc-outlined-button': action.type === ActionType.Stroked,\n 'mat-mdc-icon-button': action.type === ActionType.Icon,\n 'icon-placement-right': action.iconPlacement === 'right'\n }\"\n (click)=\"action.click && action.click($event)\"\n [color]=\"action.color\"\n [class]=\"action.classArray.join(' ')\"\n [disabled]=\"action.disabled$ | async\"\n [tabIndex]=\"action.tabIndex\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n\n <ng-template #buttonContent>\n <ng-container *ngIf=\"!action.icon else withIcon\">\n {{action.label}}\n </ng-container>\n\n <ng-template #withIcon>\n <mat-icon>{{action.icon}}</mat-icon>\n {{action.label}}\n </ng-template>\n </ng-template>\n</ng-container>\n", styles: [":host ::ng-deep .button-basic .mdc-button__label{display:flex;align-items:center}:host ::ng-deep .button-basic .mdc-button__label mat-icon{flex-shrink:0}:host ::ng-deep .button-basic.icon-placement-right .mdc-button__label{flex-direction:row-reverse}:host ::ng-deep .button-basic.icon-placement-right .mdc-button__label mat-icon{margin-left:5px}:host ::ng-deep .button-basic:not(.icon-placement-right) .mdc-button__label mat-icon{margin-right:5px}\n"] }]
|
|
2609
2609
|
}], propDecorators: { action: [{
|
|
2610
2610
|
type: Input
|
|
2611
2611
|
}] } });
|
|
@@ -2613,11 +2613,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
2613
2613
|
class FsFilterActionKebabActionsComponent {
|
|
2614
2614
|
kebabActions;
|
|
2615
2615
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterActionKebabActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2616
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: { kebabActions: "kebabActions" }, ngImport: i0, template: "<button \n type=\"button\"\n mat-icon-button\n class=\"menu-button\"\n [fsMenuTriggerFor]=\"kebabActionsMenu\">\n <mat-icon>more_vert</mat-icon>\n</button>\n<fs-menu #kebabActionsMenu>\n <ng-container *ngFor=\"let action of kebabActions\">\n <ng-container [ngSwitch]=\"action.mode\">\n <!-- Case when actions was collapsed from action with mode = 'menu'-->\n <ng-container *ngSwitchCase=\"'menu'\">\n <ng-container *ngFor=\"let childAction of action.items\">\n <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n <fs-menu-group>\n <ng-template fs-group-menu-item-template>\n {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon> {{childAction.label}}\n </ng-template>\n <ng-container *ngFor=\"let subAction of childAction.items\">\n <ng-template \n fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [hidden]=\"!(subAction.visible$ | async)\"\n (click)=\"subAction.click($event)\">\n <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n {{subAction.label}}\n </ng-template>\n </ng-container>\n </fs-menu-group>\n </ng-container>\n <ng-template #simpleMenuItem>\n <ng-template \n fs-menu-item\n [link]=\"childAction.routerLink?.link\"\n [queryParams]=\"childAction.routerLink?.queryParams\"\n [hidden]=\"!(childAction.visible$ | async)\"\n (click)=\"childAction.click($event);\">\n <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon>{{ childAction.label }}\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'file'\">\n <ng-template \n fs-menu-file-item\n [fsClass]=\"action.classArray\"\n [multiple]=\"action.multiple\"\n [accept]=\"action.accept || '*'\"\n [minWidth]=\"action.minWidth\"\n [minHeight]=\"action.minHeight\"\n [imageWidth]=\"action.maxWidth\"\n [imageHeight]=\"action.maxHeight\"\n (error)=\"action.fileError($event)\"\n (select)=\"action.fileSelected($event)\"\n (click)=\"action.click($event)\">\n <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <ng-template \n fs-menu-item\n (click)=\"action.click($event)\"\n [fsClass]=\"action.classArray\">\n <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n </ng-template>\n </ng-container>\n\n </ng-container>\n </ng-container>\n</fs-menu>\n", styles: ["
|
|
2616
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: { kebabActions: "kebabActions" }, ngImport: i0, template: "<button \n type=\"button\"\n mat-icon-button\n class=\"menu-button\"\n [fsMenuTriggerFor]=\"kebabActionsMenu\">\n <mat-icon>more_vert</mat-icon>\n</button>\n<fs-menu #kebabActionsMenu>\n <ng-container *ngFor=\"let action of kebabActions\">\n <ng-container [ngSwitch]=\"action.mode\">\n <!-- Case when actions was collapsed from action with mode = 'menu'-->\n <ng-container *ngSwitchCase=\"'menu'\">\n <ng-container *ngFor=\"let childAction of action.items\">\n <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n <fs-menu-group>\n <ng-template fs-group-menu-item-template>\n {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon> {{childAction.label}}\n </ng-template>\n <ng-container *ngFor=\"let subAction of childAction.items\">\n <ng-template \n fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [hidden]=\"!(subAction.visible$ | async)\"\n (click)=\"subAction.click($event)\">\n <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n {{subAction.label}}\n </ng-template>\n </ng-container>\n </fs-menu-group>\n </ng-container>\n <ng-template #simpleMenuItem>\n <ng-template \n fs-menu-item\n [link]=\"childAction.routerLink?.link\"\n [queryParams]=\"childAction.routerLink?.queryParams\"\n [hidden]=\"!(childAction.visible$ | async)\"\n (click)=\"childAction.click($event);\">\n <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon>{{ childAction.label }}\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'file'\">\n <ng-template \n fs-menu-file-item\n [fsClass]=\"action.classArray\"\n [multiple]=\"action.multiple\"\n [accept]=\"action.accept || '*'\"\n [minWidth]=\"action.minWidth\"\n [minHeight]=\"action.minHeight\"\n [imageWidth]=\"action.maxWidth\"\n [imageHeight]=\"action.maxHeight\"\n (error)=\"action.fileError($event)\"\n (select)=\"action.fileSelected($event)\"\n (click)=\"action.click($event)\">\n <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <ng-template \n fs-menu-item\n (click)=\"action.click($event)\"\n [fsClass]=\"action.classArray\">\n <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n </ng-template>\n </ng-container>\n\n </ng-container>\n </ng-container>\n</fs-menu>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i6$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i6$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "directive", type: i6$1.FsMenuFileItemDirective, selector: "[fs-menu-file-item]", inputs: ["multiple", "accept", "minWidth", "minHeight", "imageWidth", "imageHeight"], outputs: ["select", "error"] }, { kind: "directive", type: i6$1.FsGroupMenuItemTemplateDirective, selector: "[fs-group-menu-item-template]" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2617
2617
|
}
|
|
2618
2618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterActionKebabActionsComponent, decorators: [{
|
|
2619
2619
|
type: Component,
|
|
2620
|
-
args: [{ selector: 'fs-filter-action-kebab-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n type=\"button\"\n mat-icon-button\n class=\"menu-button\"\n [fsMenuTriggerFor]=\"kebabActionsMenu\">\n <mat-icon>more_vert</mat-icon>\n</button>\n<fs-menu #kebabActionsMenu>\n <ng-container *ngFor=\"let action of kebabActions\">\n <ng-container [ngSwitch]=\"action.mode\">\n <!-- Case when actions was collapsed from action with mode = 'menu'-->\n <ng-container *ngSwitchCase=\"'menu'\">\n <ng-container *ngFor=\"let childAction of action.items\">\n <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n <fs-menu-group>\n <ng-template fs-group-menu-item-template>\n {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon> {{childAction.label}}\n </ng-template>\n <ng-container *ngFor=\"let subAction of childAction.items\">\n <ng-template \n fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [hidden]=\"!(subAction.visible$ | async)\"\n (click)=\"subAction.click($event)\">\n <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n {{subAction.label}}\n </ng-template>\n </ng-container>\n </fs-menu-group>\n </ng-container>\n <ng-template #simpleMenuItem>\n <ng-template \n fs-menu-item\n [link]=\"childAction.routerLink?.link\"\n [queryParams]=\"childAction.routerLink?.queryParams\"\n [hidden]=\"!(childAction.visible$ | async)\"\n (click)=\"childAction.click($event);\">\n <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon>{{ childAction.label }}\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'file'\">\n <ng-template \n fs-menu-file-item\n [fsClass]=\"action.classArray\"\n [multiple]=\"action.multiple\"\n [accept]=\"action.accept || '*'\"\n [minWidth]=\"action.minWidth\"\n [minHeight]=\"action.minHeight\"\n [imageWidth]=\"action.maxWidth\"\n [imageHeight]=\"action.maxHeight\"\n (error)=\"action.fileError($event)\"\n (select)=\"action.fileSelected($event)\"\n (click)=\"action.click($event)\">\n <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <ng-template \n fs-menu-item\n (click)=\"action.click($event)\"\n [fsClass]=\"action.classArray\">\n <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n </ng-template>\n </ng-container>\n\n </ng-container>\n </ng-container>\n</fs-menu>\n"
|
|
2620
|
+
args: [{ selector: 'fs-filter-action-kebab-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n type=\"button\"\n mat-icon-button\n class=\"menu-button\"\n [fsMenuTriggerFor]=\"kebabActionsMenu\">\n <mat-icon>more_vert</mat-icon>\n</button>\n<fs-menu #kebabActionsMenu>\n <ng-container *ngFor=\"let action of kebabActions\">\n <ng-container [ngSwitch]=\"action.mode\">\n <!-- Case when actions was collapsed from action with mode = 'menu'-->\n <ng-container *ngSwitchCase=\"'menu'\">\n <ng-container *ngFor=\"let childAction of action.items\">\n <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n <fs-menu-group>\n <ng-template fs-group-menu-item-template>\n {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon> {{childAction.label}}\n </ng-template>\n <ng-container *ngFor=\"let subAction of childAction.items\">\n <ng-template \n fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [hidden]=\"!(subAction.visible$ | async)\"\n (click)=\"subAction.click($event)\">\n <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n {{subAction.label}}\n </ng-template>\n </ng-container>\n </fs-menu-group>\n </ng-container>\n <ng-template #simpleMenuItem>\n <ng-template \n fs-menu-item\n [link]=\"childAction.routerLink?.link\"\n [queryParams]=\"childAction.routerLink?.queryParams\"\n [hidden]=\"!(childAction.visible$ | async)\"\n (click)=\"childAction.click($event);\">\n <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon>{{ childAction.label }}\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'file'\">\n <ng-template \n fs-menu-file-item\n [fsClass]=\"action.classArray\"\n [multiple]=\"action.multiple\"\n [accept]=\"action.accept || '*'\"\n [minWidth]=\"action.minWidth\"\n [minHeight]=\"action.minHeight\"\n [imageWidth]=\"action.maxWidth\"\n [imageHeight]=\"action.maxHeight\"\n (error)=\"action.fileError($event)\"\n (select)=\"action.fileSelected($event)\"\n (click)=\"action.click($event)\">\n <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <ng-template \n fs-menu-item\n (click)=\"action.click($event)\"\n [fsClass]=\"action.classArray\">\n <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n </ng-template>\n </ng-container>\n\n </ng-container>\n </ng-container>\n</fs-menu>\n" }]
|
|
2621
2621
|
}], propDecorators: { kebabActions: [{
|
|
2622
2622
|
type: Input
|
|
2623
2623
|
}] } });
|
|
@@ -2636,11 +2636,11 @@ class FsFilterActionsComponent {
|
|
|
2636
2636
|
}
|
|
2637
2637
|
}
|
|
2638
2638
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2639
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: { kebabActions: "kebabActions", actions: "actions" }, ngImport: i0, template: "<ng-container *ngFor=\"let action of actions\">\n <ng-container [ngSwitch]=\"action.mode\">\n <ng-container *ngSwitchCase=\"ActionMode.Button\">\n <fs-filter-action-button\n [action]=\"action\"\n class=\"action\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.Menu\">\n <fs-filter-action-button\n class=\"action\"\n [action]=\"action\"\n [fsMenuTriggerFor]=\"someRef\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n\n <fs-menu #someRef class=\"action\">\n <ng-container *ngFor=\"let childAction of action.items\">\n <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n <fs-menu-group [label]=\"childAction.label\">\n <ng-container *ngFor=\"let subAction of childAction.items\">\n <ng-template\n fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [hidden]=\"(subAction.visible$ | async) === false\"\n (click)=\"subAction.click($event)\">\n <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n {{subAction.label}}\n </ng-template>\n </ng-container>\n </fs-menu-group>\n </ng-container>\n <ng-template #simpleMenuItem>\n <ng-template\n fs-menu-item\n [link]=\"childAction.routerLink?.link\"\n [queryParams]=\"childAction.routerLink?.queryParams\"\n [hidden]=\"(childAction.visible$ | async) === false\"\n (click)=\"childAction.click($event);\">\n <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n {{childAction.label}}\n </ng-template>\n </ng-template>\n </ng-container>\n </fs-menu>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.SelectButton\">\n <mat-select \n class=\"action\"\n [ngClass]=\"{ \n 'mat-
|
|
2639
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: { kebabActions: "kebabActions", actions: "actions" }, ngImport: i0, template: "<ng-container *ngFor=\"let action of actions\">\n <ng-container [ngSwitch]=\"action.mode\">\n <ng-container *ngSwitchCase=\"ActionMode.Button\">\n <fs-filter-action-button\n [action]=\"action\"\n class=\"action\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.Menu\">\n <fs-filter-action-button\n class=\"action\"\n [action]=\"action\"\n [fsMenuTriggerFor]=\"someRef\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n\n <fs-menu #someRef class=\"action\">\n <ng-container *ngFor=\"let childAction of action.items\">\n <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n <fs-menu-group [label]=\"childAction.label\">\n <ng-container *ngFor=\"let subAction of childAction.items\">\n <ng-template\n fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [hidden]=\"(subAction.visible$ | async) === false\"\n (click)=\"subAction.click($event)\">\n <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n {{subAction.label}}\n </ng-template>\n </ng-container>\n </fs-menu-group>\n </ng-container>\n <ng-template #simpleMenuItem>\n <ng-template\n fs-menu-item\n [link]=\"childAction.routerLink?.link\"\n [queryParams]=\"childAction.routerLink?.queryParams\"\n [hidden]=\"(childAction.visible$ | async) === false\"\n (click)=\"childAction.click($event);\">\n <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n {{childAction.label}}\n </ng-template>\n </ng-template>\n </ng-container>\n </fs-menu>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.SelectButton\">\n <mat-select \n class=\"action action-select-button\"\n [ngClass]=\"{ \n 'mat-mdc-raised-button': action.type === ActionType.Raised,\n 'mat-mdc-unelevated-button': action.type === ActionType.Flat,\n 'mat-mdc-outlined-button': action.type === ActionType.Stroked,\n }\"\n [placeholder]=\"action.label\"\n [(ngModel)]=\"action.value\" \n (ngModelChange)=\"actionChange(action, $event, selectButton)\"\n fsSelectButton\n #selectButton\n [deselectOnChange]=\"false\">\n <mat-option \n *ngFor=\"let item of action.values\" \n [value]=\"item.value\">\n {{ item.name }}\n </mat-option>\n </mat-select>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.File\">\n <fs-file\n class=\"action action-button\"\n [accept]=\"action.accept || '*'\"\n [multiple]=\"action.multiple\"\n [minWidth]=\"action.minWidth\"\n [minHeight]=\"action.minHeight\"\n [imageWidth]=\"action.maxWidth\"\n [imageHeight]=\"action.maxHeight\"\n (select)=\"action.fileSelected($event)\"\n (error)=\"action.fileError($event)\"\n (clicked)=\"action.click($event)\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n <fs-filter-action-button \n [action]=\"action\">\n </fs-filter-action-button>\n </fs-file>\n </ng-container>\n </ng-container>\n</ng-container>\n<ng-container *ngIf=\"kebabActions?.length\">\n <fs-filter-action-kebab-actions\n [kebabActions]=\"kebabActions\">\n </fs-filter-action-kebab-actions>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center}.action-button{display:block}.action.action-select-button{width:auto}.action+.action{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i6$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i6$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "directive", type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: i8.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "beforeProcessing", "clicked", "declined"] }, { kind: "directive", type: i9$1.FsSelectButtonDirective, selector: "[fsSelectButton]", inputs: ["color", "width", "buttonType", "deselectOnChange"] }, { kind: "directive", type: i10.FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled"] }, { kind: "component", type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: ["action"] }, { kind: "component", type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: ["kebabActions"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2640
2640
|
}
|
|
2641
2641
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterActionsComponent, decorators: [{
|
|
2642
2642
|
type: Component,
|
|
2643
|
-
args: [{ selector: 'fs-filter-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let action of actions\">\n <ng-container [ngSwitch]=\"action.mode\">\n <ng-container *ngSwitchCase=\"ActionMode.Button\">\n <fs-filter-action-button\n [action]=\"action\"\n class=\"action\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.Menu\">\n <fs-filter-action-button\n class=\"action\"\n [action]=\"action\"\n [fsMenuTriggerFor]=\"someRef\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n\n <fs-menu #someRef class=\"action\">\n <ng-container *ngFor=\"let childAction of action.items\">\n <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n <fs-menu-group [label]=\"childAction.label\">\n <ng-container *ngFor=\"let subAction of childAction.items\">\n <ng-template\n fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [hidden]=\"(subAction.visible$ | async) === false\"\n (click)=\"subAction.click($event)\">\n <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n {{subAction.label}}\n </ng-template>\n </ng-container>\n </fs-menu-group>\n </ng-container>\n <ng-template #simpleMenuItem>\n <ng-template\n fs-menu-item\n [link]=\"childAction.routerLink?.link\"\n [queryParams]=\"childAction.routerLink?.queryParams\"\n [hidden]=\"(childAction.visible$ | async) === false\"\n (click)=\"childAction.click($event);\">\n <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n {{childAction.label}}\n </ng-template>\n </ng-template>\n </ng-container>\n </fs-menu>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.SelectButton\">\n <mat-select \n class=\"action\"\n [ngClass]=\"{ \n 'mat-
|
|
2643
|
+
args: [{ selector: 'fs-filter-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let action of actions\">\n <ng-container [ngSwitch]=\"action.mode\">\n <ng-container *ngSwitchCase=\"ActionMode.Button\">\n <fs-filter-action-button\n [action]=\"action\"\n class=\"action\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.Menu\">\n <fs-filter-action-button\n class=\"action\"\n [action]=\"action\"\n [fsMenuTriggerFor]=\"someRef\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n\n <fs-menu #someRef class=\"action\">\n <ng-container *ngFor=\"let childAction of action.items\">\n <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n <fs-menu-group [label]=\"childAction.label\">\n <ng-container *ngFor=\"let subAction of childAction.items\">\n <ng-template\n fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [hidden]=\"(subAction.visible$ | async) === false\"\n (click)=\"subAction.click($event)\">\n <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n {{subAction.label}}\n </ng-template>\n </ng-container>\n </fs-menu-group>\n </ng-container>\n <ng-template #simpleMenuItem>\n <ng-template\n fs-menu-item\n [link]=\"childAction.routerLink?.link\"\n [queryParams]=\"childAction.routerLink?.queryParams\"\n [hidden]=\"(childAction.visible$ | async) === false\"\n (click)=\"childAction.click($event);\">\n <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n {{childAction.label}}\n </ng-template>\n </ng-template>\n </ng-container>\n </fs-menu>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.SelectButton\">\n <mat-select \n class=\"action action-select-button\"\n [ngClass]=\"{ \n 'mat-mdc-raised-button': action.type === ActionType.Raised,\n 'mat-mdc-unelevated-button': action.type === ActionType.Flat,\n 'mat-mdc-outlined-button': action.type === ActionType.Stroked,\n }\"\n [placeholder]=\"action.label\"\n [(ngModel)]=\"action.value\" \n (ngModelChange)=\"actionChange(action, $event, selectButton)\"\n fsSelectButton\n #selectButton\n [deselectOnChange]=\"false\">\n <mat-option \n *ngFor=\"let item of action.values\" \n [value]=\"item.value\">\n {{ item.name }}\n </mat-option>\n </mat-select>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.File\">\n <fs-file\n class=\"action action-button\"\n [accept]=\"action.accept || '*'\"\n [multiple]=\"action.multiple\"\n [minWidth]=\"action.minWidth\"\n [minHeight]=\"action.minHeight\"\n [imageWidth]=\"action.maxWidth\"\n [imageHeight]=\"action.maxHeight\"\n (select)=\"action.fileSelected($event)\"\n (error)=\"action.fileError($event)\"\n (clicked)=\"action.click($event)\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n <fs-filter-action-button \n [action]=\"action\">\n </fs-filter-action-button>\n </fs-file>\n </ng-container>\n </ng-container>\n</ng-container>\n<ng-container *ngIf=\"kebabActions?.length\">\n <fs-filter-action-kebab-actions\n [kebabActions]=\"kebabActions\">\n </fs-filter-action-kebab-actions>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center}.action-button{display:block}.action.action-select-button{width:auto}.action+.action{margin-left:5px}\n"] }]
|
|
2644
2644
|
}], propDecorators: { kebabActions: [{
|
|
2645
2645
|
type: Input
|
|
2646
2646
|
}], actions: [{
|
|
@@ -3394,11 +3394,11 @@ class AutocompletechipsComponent extends BaseItemComponent {
|
|
|
3394
3394
|
return item1?.value === item2?.value;
|
|
3395
3395
|
}
|
|
3396
3396
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AutocompletechipsComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3397
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete-chips\n [fsFilterFocusTrigger]=\"item\"\n [fetch]=\"fetch\"\n [ngModel]=\"item.model\"\n (selected)=\"addAutocompleteChipItem($event)\"\n (removed)=\"removeAutocompleteChipItem($event)\"\n (clear)=\"clearAutocompleteChipItem()\"\n [allowText]=\"false\"\n [fetchOnFocus]=\"item.fetchOnFocus\"\n [
|
|
3397
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete-chips\n [fsFilterFocusTrigger]=\"item\"\n [fetch]=\"fetch\"\n [ngModel]=\"item.model\"\n (selected)=\"addAutocompleteChipItem($event)\"\n (removed)=\"removeAutocompleteChipItem($event)\"\n (clear)=\"clearAutocompleteChipItem()\"\n [allowText]=\"false\"\n [fetchOnFocus]=\"item.fetchOnFocus\"\n [label]=\"label\"\n [chipImage]=\"item.chipImage\"\n [chipColor]=\"item.chipColor\"\n [chipIconColor]=\"item.chipIcon\"\n [chipBackground]=\"item.chipBackground\"\n [chipIcon]=\"item.chipIcon\"\n [chipClass]=\"item.chipClass\"\n [allowClear]=\"item.showClear\"\n [removable]=\"item.showClear\"\n [compareWith]=\"compareItems\"\n [panelWidth]=\"300\"\n name=\"model\">\n <ng-template fsAutocompleteObject let-object=\"object\">\n {{ object.name }}\n </ng-template>\n</fs-autocomplete-chips>\n", dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "confirm", "disabled", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear"] }, { kind: "directive", type: i5$1.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3398
3398
|
}
|
|
3399
3399
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AutocompletechipsComponent, decorators: [{
|
|
3400
3400
|
type: Component,
|
|
3401
|
-
args: [{ selector: 'filter-item-autocompletechips', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-autocomplete-chips\n [fsFilterFocusTrigger]=\"item\"\n [fetch]=\"fetch\"\n [ngModel]=\"item.model\"\n (selected)=\"addAutocompleteChipItem($event)\"\n (removed)=\"removeAutocompleteChipItem($event)\"\n (clear)=\"clearAutocompleteChipItem()\"\n [allowText]=\"false\"\n [fetchOnFocus]=\"item.fetchOnFocus\"\n [
|
|
3401
|
+
args: [{ selector: 'filter-item-autocompletechips', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-autocomplete-chips\n [fsFilterFocusTrigger]=\"item\"\n [fetch]=\"fetch\"\n [ngModel]=\"item.model\"\n (selected)=\"addAutocompleteChipItem($event)\"\n (removed)=\"removeAutocompleteChipItem($event)\"\n (clear)=\"clearAutocompleteChipItem()\"\n [allowText]=\"false\"\n [fetchOnFocus]=\"item.fetchOnFocus\"\n [label]=\"label\"\n [chipImage]=\"item.chipImage\"\n [chipColor]=\"item.chipColor\"\n [chipIconColor]=\"item.chipIcon\"\n [chipBackground]=\"item.chipBackground\"\n [chipIcon]=\"item.chipIcon\"\n [chipClass]=\"item.chipClass\"\n [allowClear]=\"item.showClear\"\n [removable]=\"item.showClear\"\n [compareWith]=\"compareItems\"\n [panelWidth]=\"300\"\n name=\"model\">\n <ng-template fsAutocompleteObject let-object=\"object\">\n {{ object.name }}\n </ng-template>\n</fs-autocomplete-chips>\n" }]
|
|
3402
3402
|
}], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
|
|
3403
3403
|
|
|
3404
3404
|
class DateComponent extends BaseItemComponent {
|
|
@@ -3584,11 +3584,11 @@ class FilterDrawerComponent {
|
|
|
3584
3584
|
this.done();
|
|
3585
3585
|
}
|
|
3586
3586
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterDrawerComponent, deps: [{ token: FILTER_DRAWER_OVERLAY }, { token: FILTER_DRAWER_DATA }, { token: ExternalParamsController }, { token: i0.ChangeDetectorRef }, { token: FsFilterItemsStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
3587
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0, template: "<div class=\"filters\">\n <div class=\"filters-wrap\">\n\n <div class=\"filter-by\">\n <mat-icon>
|
|
3587
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0, template: "<div class=\"filters\">\n <div class=\"filters-wrap\">\n\n <div class=\"filter-by\">\n <mat-icon>filter_alt</mat-icon>\n <span class=\"text\">Filters</span>\n </div>\n\n <div class=\"overflow-shadow filter-items\">\n <div class=\"overflow-shadow-content\">\n <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n <filter-item \n *ngFor=\"let filterItem of items$ | async\"\n class=\"filter-group\"\n [item]=\"filterItem\">\n </filter-item>\n\n <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n <filter-item \n class=\"filter-group sort\"\n [item]=\"sortItem\">\n </filter-item>\n <filter-item \n class=\"filter-group sort\"\n [item]=\"sortDirectionItem\">\n </filter-item>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <fs-filter-drawer-actions \n class=\"filter-actions\"\n *ngIf=\"(externalParams.pending$ | async) !== true\"\n (clear)=\"clear()\"\n (done)=\"done()\">\n </fs-filter-drawer-actions>\n </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}.fs-delimit>*:not(:last-child):after{content:\",\\a0\"}:host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:100vw;max-width:350px;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);box-sizing:border-box;height:100%}.filters .filters-wrap .filter-items{padding-top:5px;overflow-y:auto;height:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper,.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;inset:0;z-index:900;outline:none}@media (max-width: 599px){.filters .filters-wrap{max-width:none}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: FilterItemComponent, selector: "filter-item", inputs: ["item"] }, { kind: "component", type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: ["clear", "done"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3588
3588
|
}
|
|
3589
3589
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterDrawerComponent, decorators: [{
|
|
3590
3590
|
type: Component,
|
|
3591
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filters\">\n <div class=\"filters-wrap\">\n\n <div class=\"filter-by\">\n <mat-icon>
|
|
3591
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filters\">\n <div class=\"filters-wrap\">\n\n <div class=\"filter-by\">\n <mat-icon>filter_alt</mat-icon>\n <span class=\"text\">Filters</span>\n </div>\n\n <div class=\"overflow-shadow filter-items\">\n <div class=\"overflow-shadow-content\">\n <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n <filter-item \n *ngFor=\"let filterItem of items$ | async\"\n class=\"filter-group\"\n [item]=\"filterItem\">\n </filter-item>\n\n <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n <filter-item \n class=\"filter-group sort\"\n [item]=\"sortItem\">\n </filter-item>\n <filter-item \n class=\"filter-group sort\"\n [item]=\"sortDirectionItem\">\n </filter-item>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <fs-filter-drawer-actions \n class=\"filter-actions\"\n *ngIf=\"(externalParams.pending$ | async) !== true\"\n (clear)=\"clear()\"\n (done)=\"done()\">\n </fs-filter-drawer-actions>\n </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}.fs-delimit>*:not(:last-child):after{content:\",\\a0\"}:host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:100vw;max-width:350px;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);box-sizing:border-box;height:100%}.filters .filters-wrap .filter-items{padding-top:5px;overflow-y:auto;height:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper,.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;inset:0;z-index:900;outline:none}@media (max-width: 599px){.filters .filters-wrap{max-width:none}}\n"] }]
|
|
3592
3592
|
}], ctorParameters: () => [{ type: i1$3.OverlayRef, decorators: [{
|
|
3593
3593
|
type: Inject,
|
|
3594
3594
|
args: [FILTER_DRAWER_OVERLAY]
|
|
@@ -4400,7 +4400,7 @@ class FilterComponent {
|
|
|
4400
4400
|
FsFilterItemsStore,
|
|
4401
4401
|
SavedFiltersController,
|
|
4402
4402
|
ActionsController,
|
|
4403
|
-
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }], viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: MatInput }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"filter-container\">\n <div class=\"filter-inner-container\">\n <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n <div>\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n </div>\n\n <ng-container *ngIf=\"hasKeyword\">\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n <ng-container *ngIf=\"statusBar\">\n <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div class=\"filter-status\" #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n <fs-filter-chips\n class=\"filter-chips\"\n [filters]=\"items\">\n </fs-filter-chips>\n </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n <div class=\"filter-keyword\">\n <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n <mat-form-field\n class=\"form-field-padless\"\n [ngClass]=\"search\"\n appearance=\"outline\">\n <span matPrefix class=\"icon\">\n <mat-icon matPrefix>search</mat-icon>\n </span>\n <input\n #keywordMatInput\n matInput\n [(ngModel)]=\"keyword\"\n (ngModelChange)=\"keywordChange($event)\"\n name=\"filter-input\"\n [fsClear]=\"true\"\n [placeholder]=\"searchPlaceholder\">\n </mat-form-field>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #filterActions>\n <div class=\"filter-actions\">\n <fs-filter-actions\n *ngIf=\"actionsVisible$ | async\"\n [actions]=\"actions$ | async\"\n [kebabActions]=\"menuActions$ | async\">\n </fs-filter-actions>\n </div>\n</ng-template>\n\n<ng-template #filterToolbar>\n <div class=\"filter-toobar\">\n <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n <ng-container *ngIf=\"hasVisibleItemOrSorting\">\n <a\n mat-icon-button\n class=\"filters
|
|
4403
|
+
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }], viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: MatInput }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"filter-container\">\n <div class=\"filter-inner-container\">\n <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n <div>\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n </div>\n\n <ng-container *ngIf=\"hasKeyword\">\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n <ng-container *ngIf=\"statusBar\">\n <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div class=\"filter-status\" #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n <fs-filter-chips\n class=\"filter-chips\"\n [filters]=\"items\">\n </fs-filter-chips>\n </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n <div class=\"filter-keyword\">\n <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n <mat-form-field\n class=\"form-field-padless\"\n [ngClass]=\"search\"\n appearance=\"outline\">\n <span matPrefix class=\"icon\">\n <mat-icon matPrefix>search</mat-icon>\n </span>\n <input\n #keywordMatInput\n matInput\n [(ngModel)]=\"keyword\"\n (ngModelChange)=\"keywordChange($event)\"\n name=\"filter-input\"\n [fsClear]=\"true\"\n [placeholder]=\"searchPlaceholder\">\n </mat-form-field>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #filterActions>\n <div class=\"filter-actions\">\n <fs-filter-actions\n *ngIf=\"actionsVisible$ | async\"\n [actions]=\"actions$ | async\"\n [kebabActions]=\"menuActions$ | async\">\n </fs-filter-actions>\n </div>\n</ng-template>\n\n<ng-template #filterToolbar>\n <div class=\"filter-toobar\">\n <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n <ng-container *ngIf=\"hasVisibleItemOrSorting\">\n <a\n mat-icon-button\n class=\"button-filters\"\n (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n [color]=\"config.button.color\">\n <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n {{ config.button.label }}\n </a>\n </ng-container>\n </ng-container> \n <ng-container *ngIf=\"config.reload\">\n <a\n mat-icon-button\n (click)=\"reload($event)\"\n class=\"button-reload\">\n <mat-icon #reloadEl>refresh</mat-icon>\n </a>\n </ng-container>\n <ng-container *ngIf=\"config.autoReload\">\n <mat-slide-toggle \n name=\"autoReload\" \n class=\"auto-reload\"\n [(ngModel)]=\"autoReload\">\n Auto refresh\n </mat-slide-toggle>\n </ng-container>\n </div>\n</ng-template>\n", styles: [":host{margin-bottom:20px;display:block}:host.has-keyword .filter-status-container.has-status{margin-top:4px}:host:not(.has-keyword) .filter-status-container:not(.has-status)+fs-filter-chips{margin-top:0}:host:not(.has-keyword) .filter-inner-container{display:flex}:host:not(.has-keyword) .filter-toobar{justify-content:flex-end}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px;margin-right:6px}.filter-inner-container .filter-keyword mat-form-field .icon{margin-left:10px}.filter-inner-container .filter-keyword mat-form-field .icon mat-icon{font-size:24px;color:#626262}.filter-inner-container .filter-keyword mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-reload{margin-left:-6px}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin-top:4px;display:block}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.button-filters+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.button-filters{margin-left:5px}.button-filters .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.fs-filter-backdrop{display:none}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i3$2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i12.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: i14.FsClearComponent, selector: "[fsClear]", inputs: ["ngModel", "fsClear"], outputs: ["ngModelChange", "cleared"] }, { kind: "component", type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }, { kind: "component", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4404
4404
|
}
|
|
4405
4405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterComponent, decorators: [{
|
|
4406
4406
|
type: Component,
|
|
@@ -4413,7 +4413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
4413
4413
|
FsFilterItemsStore,
|
|
4414
4414
|
SavedFiltersController,
|
|
4415
4415
|
ActionsController,
|
|
4416
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filter-container\">\n <div class=\"filter-inner-container\">\n <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n <div>\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n </div>\n\n <ng-container *ngIf=\"hasKeyword\">\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n <ng-container *ngIf=\"statusBar\">\n <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div class=\"filter-status\" #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n <fs-filter-chips\n class=\"filter-chips\"\n [filters]=\"items\">\n </fs-filter-chips>\n </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n <div class=\"filter-keyword\">\n <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n <mat-form-field\n class=\"form-field-padless\"\n [ngClass]=\"search\"\n appearance=\"outline\">\n <span matPrefix class=\"icon\">\n <mat-icon matPrefix>search</mat-icon>\n </span>\n <input\n #keywordMatInput\n matInput\n [(ngModel)]=\"keyword\"\n (ngModelChange)=\"keywordChange($event)\"\n name=\"filter-input\"\n [fsClear]=\"true\"\n [placeholder]=\"searchPlaceholder\">\n </mat-form-field>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #filterActions>\n <div class=\"filter-actions\">\n <fs-filter-actions\n *ngIf=\"actionsVisible$ | async\"\n [actions]=\"actions$ | async\"\n [kebabActions]=\"menuActions$ | async\">\n </fs-filter-actions>\n </div>\n</ng-template>\n\n<ng-template #filterToolbar>\n <div class=\"filter-toobar\">\n <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n <ng-container *ngIf=\"hasVisibleItemOrSorting\">\n <a\n mat-icon-button\n class=\"filters
|
|
4416
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filter-container\">\n <div class=\"filter-inner-container\">\n <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n <div>\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n </div>\n\n <ng-container *ngIf=\"hasKeyword\">\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n <ng-container *ngIf=\"statusBar\">\n <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div class=\"filter-status\" #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n <fs-filter-chips\n class=\"filter-chips\"\n [filters]=\"items\">\n </fs-filter-chips>\n </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n <div class=\"filter-keyword\">\n <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n <mat-form-field\n class=\"form-field-padless\"\n [ngClass]=\"search\"\n appearance=\"outline\">\n <span matPrefix class=\"icon\">\n <mat-icon matPrefix>search</mat-icon>\n </span>\n <input\n #keywordMatInput\n matInput\n [(ngModel)]=\"keyword\"\n (ngModelChange)=\"keywordChange($event)\"\n name=\"filter-input\"\n [fsClear]=\"true\"\n [placeholder]=\"searchPlaceholder\">\n </mat-form-field>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #filterActions>\n <div class=\"filter-actions\">\n <fs-filter-actions\n *ngIf=\"actionsVisible$ | async\"\n [actions]=\"actions$ | async\"\n [kebabActions]=\"menuActions$ | async\">\n </fs-filter-actions>\n </div>\n</ng-template>\n\n<ng-template #filterToolbar>\n <div class=\"filter-toobar\">\n <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n <ng-container *ngIf=\"hasVisibleItemOrSorting\">\n <a\n mat-icon-button\n class=\"button-filters\"\n (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n [color]=\"config.button.color\">\n <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n {{ config.button.label }}\n </a>\n </ng-container>\n </ng-container> \n <ng-container *ngIf=\"config.reload\">\n <a\n mat-icon-button\n (click)=\"reload($event)\"\n class=\"button-reload\">\n <mat-icon #reloadEl>refresh</mat-icon>\n </a>\n </ng-container>\n <ng-container *ngIf=\"config.autoReload\">\n <mat-slide-toggle \n name=\"autoReload\" \n class=\"auto-reload\"\n [(ngModel)]=\"autoReload\">\n Auto refresh\n </mat-slide-toggle>\n </ng-container>\n </div>\n</ng-template>\n", styles: [":host{margin-bottom:20px;display:block}:host.has-keyword .filter-status-container.has-status{margin-top:4px}:host:not(.has-keyword) .filter-status-container:not(.has-status)+fs-filter-chips{margin-top:0}:host:not(.has-keyword) .filter-inner-container{display:flex}:host:not(.has-keyword) .filter-toobar{justify-content:flex-end}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px;margin-right:6px}.filter-inner-container .filter-keyword mat-form-field .icon{margin-left:10px}.filter-inner-container .filter-keyword mat-form-field .icon mat-icon{font-size:24px;color:#626262}.filter-inner-container .filter-keyword mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-reload{margin-left:-6px}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin-top:4px;display:block}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.button-filters+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.button-filters{margin-left:5px}.button-filters .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.fs-filter-backdrop{display:none}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"] }]
|
|
4417
4417
|
}], ctorParameters: () => [{ type: FsFilterConfig, decorators: [{
|
|
4418
4418
|
type: Optional
|
|
4419
4419
|
}, {
|