@firestitch/filter 13.1.6 → 13.2.0
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/actions/actions.component.d.ts +2 -1
- package/app/interfaces/action.interface.d.ts +1 -0
- package/app/models/action.model.d.ts +4 -0
- package/esm2020/app/components/action-button/action-button.component.mjs +3 -5
- package/esm2020/app/components/actions/actions.component.mjs +7 -4
- package/esm2020/app/enums/action-type.enum.mjs +2 -1
- package/esm2020/app/interfaces/action.interface.mjs +1 -1
- package/esm2020/app/models/action.model.mjs +59 -44
- package/fesm2015/firestitch-filter.mjs +70 -51
- package/fesm2015/firestitch-filter.mjs.map +1 -1
- package/fesm2020/firestitch-filter.mjs +77 -61
- package/fesm2020/firestitch-filter.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -2320,12 +2320,10 @@ class FsFilterActionButtonComponent {
|
|
|
2320
2320
|
}
|
|
2321
2321
|
}
|
|
2322
2322
|
FsFilterActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFilterActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2323
|
-
FsFilterActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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 ===
|
|
2323
|
+
FsFilterActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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-flat-button': action.type === ActionType.Flat,\n 'mat-stroked-button': action.type === ActionType.Stroked,\n 'mat-button': action.type === ActionType.Basic,\n 'mat-icon-button': action.type === ActionType.Icon\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 *ngIf=\"!action.iconPlacement || action.iconPlacement === 'left'\">{{action.icon}}</mat-icon>\n {{action.label}}\n <mat-icon *ngIf=\"action.iconPlacement === 'right'\">{{action.icon}}</mat-icon>\n </ng-template>\n </ng-template>\n</ng-container>\n", components: [{ type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2324
2324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFilterActionButtonComponent, decorators: [{
|
|
2325
2325
|
type: Component,
|
|
2326
|
-
args: [{ selector: 'fs-filter-action-button', host: {
|
|
2327
|
-
class: 'action-button',
|
|
2328
|
-
}, 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 === 'raised',\n 'mat-flat-button': action.type === 'flat',\n 'mat-stroked-button': action.type === 'stroked',\n 'mat-button': action.type === 'basic',\n 'mat-icon-button': action.type === 'icon'\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 *ngIf=\"!action.iconPlacement || action.iconPlacement === 'left'\">{{action.icon}}</mat-icon>\n {{action.label}}\n <mat-icon *ngIf=\"action.iconPlacement === 'right'\">{{action.icon}}</mat-icon>\n </ng-template>\n </ng-template>\n</ng-container>\n" }]
|
|
2326
|
+
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-flat-button': action.type === ActionType.Flat,\n 'mat-stroked-button': action.type === ActionType.Stroked,\n 'mat-button': action.type === ActionType.Basic,\n 'mat-icon-button': action.type === ActionType.Icon\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 *ngIf=\"!action.iconPlacement || action.iconPlacement === 'left'\">{{action.icon}}</mat-icon>\n {{action.label}}\n <mat-icon *ngIf=\"action.iconPlacement === 'right'\">{{action.icon}}</mat-icon>\n </ng-template>\n </ng-template>\n</ng-container>\n" }]
|
|
2329
2327
|
}], propDecorators: { action: [{
|
|
2330
2328
|
type: Input
|
|
2331
2329
|
}] } });
|
|
@@ -2348,17 +2346,20 @@ class FsFilterActionsComponent {
|
|
|
2348
2346
|
this.ActionType = ActionType;
|
|
2349
2347
|
this.ActionMode = ActionMode;
|
|
2350
2348
|
}
|
|
2351
|
-
actionChange(action, value) {
|
|
2349
|
+
actionChange(action, value, selectButton) {
|
|
2352
2350
|
if (action.change) {
|
|
2353
2351
|
action.change(value);
|
|
2352
|
+
if (action.deselect) {
|
|
2353
|
+
selectButton.writeValue(null);
|
|
2354
|
+
}
|
|
2354
2355
|
}
|
|
2355
2356
|
}
|
|
2356
2357
|
}
|
|
2357
2358
|
FsFilterActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFilterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2358
|
-
FsFilterActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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-stroked-button': action.type === ActionType.Stroked,\n 'mat-raised-button': action.type === ActionType.Raised,\n 'mat-flat-button': action.type === ActionType.Flat,\n 'mat-basic-button': action.type === ActionType.Basic\n }\"\n [placeholder]=\"action.label\"\n [(ngModel)]=\"action.value\" \n (ngModelChange)=\"actionChange(action, $event)\"\n fsSelectButton\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}.action-button{display:block}.action+.action{margin-left:5px}.menu-button{width:36px;height:36px;line-height:36px}\n"], components: [{ type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: ["action"] }, { type: i3$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i6$1.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "selectPreviews", "error", "clicked", "declined"] }, { type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: ["kebabActions"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9.FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled"] }, { type: i3$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { type: i10.FsSelectButtonDirective, selector: "[fsSelectButton]", inputs: ["color", "width", "buttonType", "deselectOnChange"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2359
|
+
FsFilterActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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-stroked-button': action.type === ActionType.Stroked,\n 'mat-raised-button': action.type === ActionType.Raised,\n 'mat-flat-button': action.type === ActionType.Flat,\n 'mat-basic-button': action.type === ActionType.Basic\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}.action-button{display:block}.action+.action{margin-left:5px}.menu-button{width:36px;height:36px;line-height:36px}\n"], components: [{ type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: ["action"] }, { type: i3$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i6$1.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "selectPreviews", "error", "clicked", "declined"] }, { type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: ["kebabActions"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9.FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled"] }, { type: i3$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { type: i10.FsSelectButtonDirective, selector: "[fsSelectButton]", inputs: ["color", "width", "buttonType", "deselectOnChange"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2359
2360
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFilterActionsComponent, decorators: [{
|
|
2360
2361
|
type: Component,
|
|
2361
|
-
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-stroked-button': action.type === ActionType.Stroked,\n 'mat-raised-button': action.type === ActionType.Raised,\n 'mat-flat-button': action.type === ActionType.Flat,\n 'mat-basic-button': action.type === ActionType.Basic\n }\"\n [placeholder]=\"action.label\"\n [(ngModel)]=\"action.value\" \n (ngModelChange)=\"actionChange(action, $event)\"\n fsSelectButton\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}.action-button{display:block}.action+.action{margin-left:5px}.menu-button{width:36px;height:36px;line-height:36px}\n"] }]
|
|
2362
|
+
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-stroked-button': action.type === ActionType.Stroked,\n 'mat-raised-button': action.type === ActionType.Raised,\n 'mat-flat-button': action.type === ActionType.Flat,\n 'mat-basic-button': action.type === ActionType.Basic\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}.action-button{display:block}.action+.action{margin-left:5px}.menu-button{width:36px;height:36px;line-height:36px}\n"] }]
|
|
2362
2363
|
}], propDecorators: { kebabActions: [{
|
|
2363
2364
|
type: Input
|
|
2364
2365
|
}], actions: [{
|
|
@@ -3339,6 +3340,7 @@ class Action {
|
|
|
3339
3340
|
constructor(filterConfig, actionConfig = {}) {
|
|
3340
3341
|
this.primary = true;
|
|
3341
3342
|
this.isReorderAction = false;
|
|
3343
|
+
this.deselect = false;
|
|
3342
3344
|
this.classArray = [];
|
|
3343
3345
|
this.items = [];
|
|
3344
3346
|
this._visible$ = new BehaviorSubject(true);
|
|
@@ -3361,7 +3363,7 @@ class Action {
|
|
|
3361
3363
|
return this._disabled$.asObservable();
|
|
3362
3364
|
}
|
|
3363
3365
|
updateVisibility() {
|
|
3364
|
-
const visible =
|
|
3366
|
+
const visible = this._showFn ? this._showFn() : true;
|
|
3365
3367
|
if (!visible || this.mode !== ActionMode.Menu) {
|
|
3366
3368
|
this._visible$.next(visible);
|
|
3367
3369
|
return;
|
|
@@ -3375,40 +3377,16 @@ class Action {
|
|
|
3375
3377
|
}
|
|
3376
3378
|
}
|
|
3377
3379
|
_init(filterConfig, config = {}) {
|
|
3378
|
-
var _a, _b
|
|
3380
|
+
var _a, _b;
|
|
3379
3381
|
config.mode = (_a = config.mode) !== null && _a !== void 0 ? _a : ActionMode.Button;
|
|
3380
|
-
this.
|
|
3381
|
-
this.color = config.color;
|
|
3382
|
-
this.tooltip = config.tooltip;
|
|
3383
|
-
this.label = config.label;
|
|
3384
|
-
this.mode = config.mode;
|
|
3385
|
-
this.icon = config.icon;
|
|
3386
|
-
this.iconPlacement = config.iconPlacement;
|
|
3387
|
-
this._showFn = config.show;
|
|
3388
|
-
this.tabIndex = (_c = config.tabIndex) !== null && _c !== void 0 ? _c : 0;
|
|
3389
|
-
this.menu = config.menu;
|
|
3390
|
-
if (!this.type) {
|
|
3391
|
-
this.type = (config.type || ((_d = filterConfig.button) === null || _d === void 0 ? void 0 : _d.style) || ActionType.Raised);
|
|
3392
|
-
if (this.type === ActionType.Stroked && this.primary) {
|
|
3393
|
-
this.type = ActionType.Flat;
|
|
3394
|
-
}
|
|
3395
|
-
}
|
|
3396
|
-
if (config.multiple !== undefined) {
|
|
3397
|
-
this.multiple = config.multiple;
|
|
3398
|
-
}
|
|
3399
|
-
if (config.className) {
|
|
3400
|
-
this.className = config.className;
|
|
3401
|
-
this.classArray = this.className
|
|
3402
|
-
.split(' ');
|
|
3403
|
-
}
|
|
3404
|
-
if (this.primary) {
|
|
3405
|
-
this.color = 'primary';
|
|
3406
|
-
}
|
|
3382
|
+
this._initCore(filterConfig, config);
|
|
3407
3383
|
switch (config.mode) {
|
|
3408
3384
|
case ActionMode.Button:
|
|
3409
3385
|
{
|
|
3410
3386
|
this.customize = config.customize;
|
|
3411
|
-
this.click = (
|
|
3387
|
+
this.click = (_b = config.click) !== null && _b !== void 0 ? _b : (() => {
|
|
3388
|
+
// do nothing
|
|
3389
|
+
});
|
|
3412
3390
|
this._disabledFn = config.disabled;
|
|
3413
3391
|
this.updateDisabledState();
|
|
3414
3392
|
}
|
|
@@ -3422,29 +3400,70 @@ class Action {
|
|
|
3422
3400
|
break;
|
|
3423
3401
|
case ActionMode.SelectButton:
|
|
3424
3402
|
{
|
|
3425
|
-
this.
|
|
3426
|
-
this.value = config.default;
|
|
3427
|
-
this.change = config.change;
|
|
3403
|
+
this._initSelectButton(config);
|
|
3428
3404
|
}
|
|
3429
3405
|
break;
|
|
3430
3406
|
case ActionMode.File:
|
|
3431
3407
|
{
|
|
3432
|
-
this.
|
|
3433
|
-
this.fileError = config.error;
|
|
3434
|
-
this.accept = config.accept;
|
|
3435
|
-
this.imageQuality = config.imageQuality;
|
|
3436
|
-
this.minWidth = config.minWidth;
|
|
3437
|
-
this.minHeight = config.minHeight;
|
|
3438
|
-
this.maxWidth = config.maxWidth;
|
|
3439
|
-
this.maxHeight = config.maxHeight;
|
|
3440
|
-
this.click = (_f = config.click) !== null && _f !== void 0 ? _f : (() => { });
|
|
3441
|
-
this._disabledFn = config.disabled;
|
|
3442
|
-
this.updateDisabledState();
|
|
3408
|
+
this._initFile(config);
|
|
3443
3409
|
}
|
|
3444
3410
|
break;
|
|
3445
3411
|
}
|
|
3446
3412
|
this.updateVisibility();
|
|
3447
3413
|
}
|
|
3414
|
+
_initCore(filterConfig, config) {
|
|
3415
|
+
var _a, _b, _c;
|
|
3416
|
+
this.primary = (_a = config.primary) !== null && _a !== void 0 ? _a : true;
|
|
3417
|
+
this.color = config.color;
|
|
3418
|
+
this.tooltip = config.tooltip;
|
|
3419
|
+
this.label = config.label;
|
|
3420
|
+
this.mode = config.mode;
|
|
3421
|
+
this.icon = config.icon;
|
|
3422
|
+
this.iconPlacement = config.iconPlacement;
|
|
3423
|
+
this._showFn = config.show;
|
|
3424
|
+
this.tabIndex = (_b = config.tabIndex) !== null && _b !== void 0 ? _b : 0;
|
|
3425
|
+
this.menu = config.menu;
|
|
3426
|
+
if (!this.type) {
|
|
3427
|
+
this.type = (config.type || ((_c = filterConfig.button) === null || _c === void 0 ? void 0 : _c.style) || ActionType.Raised);
|
|
3428
|
+
if (this.type === ActionType.Stroked && this.primary) {
|
|
3429
|
+
this.type = ActionType.Flat;
|
|
3430
|
+
}
|
|
3431
|
+
}
|
|
3432
|
+
if (config.className) {
|
|
3433
|
+
this.className = config.className;
|
|
3434
|
+
this.classArray = this.className
|
|
3435
|
+
.split(' ');
|
|
3436
|
+
}
|
|
3437
|
+
if (this.primary) {
|
|
3438
|
+
this.color = 'primary';
|
|
3439
|
+
}
|
|
3440
|
+
}
|
|
3441
|
+
_initSelectButton(config) {
|
|
3442
|
+
var _a;
|
|
3443
|
+
this.values = config.values;
|
|
3444
|
+
this.value = config.default;
|
|
3445
|
+
this.change = config.change;
|
|
3446
|
+
this.deselect = (_a = config.deselect) !== null && _a !== void 0 ? _a : false;
|
|
3447
|
+
}
|
|
3448
|
+
_initFile(config) {
|
|
3449
|
+
var _a;
|
|
3450
|
+
this.fileSelected = config.select;
|
|
3451
|
+
this.fileError = config.error;
|
|
3452
|
+
this.accept = config.accept;
|
|
3453
|
+
this.imageQuality = config.imageQuality;
|
|
3454
|
+
this.minWidth = config.minWidth;
|
|
3455
|
+
this.minHeight = config.minHeight;
|
|
3456
|
+
this.maxWidth = config.maxWidth;
|
|
3457
|
+
this.maxHeight = config.maxHeight;
|
|
3458
|
+
this.click = (_a = config.click) !== null && _a !== void 0 ? _a : (() => {
|
|
3459
|
+
//
|
|
3460
|
+
});
|
|
3461
|
+
this._disabledFn = config.disabled;
|
|
3462
|
+
if ((config).multiple !== undefined) {
|
|
3463
|
+
this.multiple = (config).multiple;
|
|
3464
|
+
}
|
|
3465
|
+
this.updateDisabledState();
|
|
3466
|
+
}
|
|
3448
3467
|
}
|
|
3449
3468
|
|
|
3450
3469
|
class ActionsController {
|