@firestitch/filter 18.2.110 → 18.2.115
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/saved-filter/saved-filter-manage/saved-filter-manage.component.d.ts +3 -1
- package/app/helpers/create-filter-item.d.ts +1 -1
- package/esm2022/app/components/filter/filter.component.mjs +3 -3
- package/esm2022/app/components/saved-filter/saved-filter-manage/saved-filter-manage.component.mjs +14 -4
- package/esm2022/app/helpers/encode-query-parm.mjs +2 -2
- package/fesm2022/firestitch-filter.mjs +15 -6
- package/fesm2022/firestitch-filter.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -52,6 +52,7 @@ import * as i1$4 from '@firestitch/label';
|
|
|
52
52
|
import { FsLabelModule } from '@firestitch/label';
|
|
53
53
|
import { MatFormField, MatLabel, MatPrefix, MatSuffix } from '@angular/material/form-field';
|
|
54
54
|
import { MatCheckbox } from '@angular/material/checkbox';
|
|
55
|
+
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
|
|
55
56
|
|
|
56
57
|
class SavedFilterController {
|
|
57
58
|
_filterController;
|
|
@@ -913,7 +914,7 @@ function arraysAreEquals(arr1, arr2) {
|
|
|
913
914
|
* resolve to a bare primitive whose `.name` is undefined.
|
|
914
915
|
*/
|
|
915
916
|
function encodeQueryParam(value) {
|
|
916
|
-
return (value ?? '')
|
|
917
|
+
return String(value ?? '')
|
|
917
918
|
.replace(/,/g, '\\,')
|
|
918
919
|
.replace(/:/g, '\\:');
|
|
919
920
|
}
|
|
@@ -3363,7 +3364,7 @@ class FsFilterSavedFilterManageComponent {
|
|
|
3363
3364
|
get pluralLabel() {
|
|
3364
3365
|
return this._savedFilterController.pluralLabel;
|
|
3365
3366
|
}
|
|
3366
|
-
get
|
|
3367
|
+
get orderable() {
|
|
3367
3368
|
return this._savedFilterController.orderable;
|
|
3368
3369
|
}
|
|
3369
3370
|
selectFilter(savedFilter) {
|
|
@@ -3377,21 +3378,29 @@ class FsFilterSavedFilterManageComponent {
|
|
|
3377
3378
|
this._cdRef.markForCheck();
|
|
3378
3379
|
});
|
|
3379
3380
|
}
|
|
3381
|
+
drop(event) {
|
|
3382
|
+
moveItemInArray(this.savedFilters, event.previousIndex, event.currentIndex);
|
|
3383
|
+
this.order(this.savedFilters);
|
|
3384
|
+
}
|
|
3380
3385
|
order(savedFilters) {
|
|
3381
3386
|
this._savedFilterController.order(savedFilters)
|
|
3382
3387
|
.subscribe();
|
|
3383
3388
|
}
|
|
3384
3389
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterSavedFilterManageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3385
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterSavedFilterManageComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>\n {{ pluralLabel }}\n</h1>\n<div mat-dialog-content>\n <table class=\"fs-list-table\">\n
|
|
3390
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterSavedFilterManageComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>\n {{ pluralLabel }}\n</h1>\n<div mat-dialog-content>\n @if (savedFilters?.length) {\n <table class=\"fs-list-table\">\n <thead>\n <tr>\n @if (orderable) {\n <th class=\"drag-col\"></th>\n }\n <th>\n Name\n </th>\n <th>\n Filters\n </th>\n <th class=\"actions-column\"></th>\n </tr>\n </thead>\n <tbody\n cdkDropList\n (cdkDropListDropped)=\"drop($event)\">\n @for (savedFilter of savedFilters; track savedFilter.id) {\n <tr cdkDrag [cdkDragDisabled]=\"!orderable\" cdkDragLockAxis=\"y\" [cdkDragPreviewClass]=\"'saved-filter-drag-preview'\">\n @if (orderable) {\n <td class=\"drag-col\" cdkDragHandle>\n <mat-icon>drag_handle</mat-icon>\n </td>\n }\n <td>\n <a (click)=\"selectFilter(savedFilter)\">\n {{ savedFilter.name }}\n </a>\n </td>\n <td>\n <fs-saved-filter-chips [savedFilter]=\"savedFilter\"></fs-saved-filter-chips>\n </td>\n <td>\n <fs-menu>\n <ng-template\n fs-menu-item\n (click)=\"remove(savedFilter)\">\n Delete\n </ng-template>\n </fs-menu>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n</div>\n<div mat-dialog-actions>\n <button\n mat-button\n color=\"primary\"\n type=\"button\"\n [mat-dialog-close]=\"null\">\n Done\n </button>\n</div>", styles: ["::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .saved-filter-drag-preview{display:table;background-color:#00000008;border-radius:5px}::ng-deep .saved-filter-drag-preview td{border:none;padding:8px;vertical-align:middle}::ng-deep .saved-filter-drag-preview fs-menu{display:none}:host ::ng-deep .mat-mdc-dialog-content{min-width:400px}:host ::ng-deep .cdk-drag-placeholder{opacity:.5;background-color:#0000000d;border-radius:5px}:host ::ng-deep .cdk-drag-placeholder td{border:none}:host ::ng-deep .cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}:host ::ng-deep .cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.actions-column{width:1%}td.drag-col,th.drag-col{width:1%;white-space:nowrap;text-align:center;cursor:grab}td.drag-col mat-icon,th.drag-col mat-icon{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$6.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$6.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$6.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$6.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: FsFilterSavedFilterChipsComponent, selector: "fs-saved-filter-chips", inputs: ["savedFilter"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3386
3391
|
}
|
|
3387
3392
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterSavedFilterManageComponent, decorators: [{
|
|
3388
3393
|
type: Component,
|
|
3389
3394
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
3390
3395
|
MatDialogModule,
|
|
3391
3396
|
MatButton,
|
|
3397
|
+
MatIcon,
|
|
3398
|
+
CdkDropList,
|
|
3399
|
+
CdkDrag,
|
|
3400
|
+
CdkDragHandle,
|
|
3392
3401
|
FsFilterSavedFilterChipsComponent,
|
|
3393
3402
|
FsMenuModule,
|
|
3394
|
-
], template: "<h1 mat-dialog-title>\n {{ pluralLabel }}\n</h1>\n<div mat-dialog-content>\n <table class=\"fs-list-table\">\n
|
|
3403
|
+
], template: "<h1 mat-dialog-title>\n {{ pluralLabel }}\n</h1>\n<div mat-dialog-content>\n @if (savedFilters?.length) {\n <table class=\"fs-list-table\">\n <thead>\n <tr>\n @if (orderable) {\n <th class=\"drag-col\"></th>\n }\n <th>\n Name\n </th>\n <th>\n Filters\n </th>\n <th class=\"actions-column\"></th>\n </tr>\n </thead>\n <tbody\n cdkDropList\n (cdkDropListDropped)=\"drop($event)\">\n @for (savedFilter of savedFilters; track savedFilter.id) {\n <tr cdkDrag [cdkDragDisabled]=\"!orderable\" cdkDragLockAxis=\"y\" [cdkDragPreviewClass]=\"'saved-filter-drag-preview'\">\n @if (orderable) {\n <td class=\"drag-col\" cdkDragHandle>\n <mat-icon>drag_handle</mat-icon>\n </td>\n }\n <td>\n <a (click)=\"selectFilter(savedFilter)\">\n {{ savedFilter.name }}\n </a>\n </td>\n <td>\n <fs-saved-filter-chips [savedFilter]=\"savedFilter\"></fs-saved-filter-chips>\n </td>\n <td>\n <fs-menu>\n <ng-template\n fs-menu-item\n (click)=\"remove(savedFilter)\">\n Delete\n </ng-template>\n </fs-menu>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n</div>\n<div mat-dialog-actions>\n <button\n mat-button\n color=\"primary\"\n type=\"button\"\n [mat-dialog-close]=\"null\">\n Done\n </button>\n</div>", styles: ["::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .saved-filter-drag-preview{display:table;background-color:#00000008;border-radius:5px}::ng-deep .saved-filter-drag-preview td{border:none;padding:8px;vertical-align:middle}::ng-deep .saved-filter-drag-preview fs-menu{display:none}:host ::ng-deep .mat-mdc-dialog-content{min-width:400px}:host ::ng-deep .cdk-drag-placeholder{opacity:.5;background-color:#0000000d;border-radius:5px}:host ::ng-deep .cdk-drag-placeholder td{border:none}:host ::ng-deep .cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}:host ::ng-deep .cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.actions-column{width:1%}td.drag-col,th.drag-col{width:1%;white-space:nowrap;text-align:center;cursor:grab}td.drag-col mat-icon,th.drag-col mat-icon{display:flex}\n"] }]
|
|
3395
3404
|
}] });
|
|
3396
3405
|
|
|
3397
3406
|
class FsFilterChipsComponent {
|
|
@@ -4069,7 +4078,7 @@ class FilterComponent {
|
|
|
4069
4078
|
ActionsController,
|
|
4070
4079
|
KeywordController,
|
|
4071
4080
|
SortController,
|
|
4072
|
-
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }, { propertyName: "headingTemplate", first: true, predicate: FilterHeadingDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "keywordInput", first: true, predicate: KeywordInputComponent, descendants: true }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"filter-container\"\n [ngClass]=\"{ 'has-primary-filter': primaryFilterVisible$ | async }\"\n [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | async }\">\n @if (primaryFilterVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n }\n <div class=\"filter-bar-container\">\n @if (primaryFilterVisible$ | async) {\n <div class=\"filter-input-container\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @for (item of primaryItems; track item.name) {\n @if (item.visible$ | async) {\n <filter-item\n [item]=\"item\"\n [triggerChangeOn]=\"'change'\">\n </filter-item>\n }\n }\n </div>\n } @else if (hasHeading) {\n <div class=\"filter-heading-container\">\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"chipsTmpl\"></ng-container>\n }\n <ng-container [ngTemplateOutlet]=\"filterActionsTmpl\"></ng-container>\n </div>\n @if ((primaryFilterVisible$ | async) === true || hasHeading) {\n <ng-container [ngTemplateOutlet]=\"chipsTmpl\"></ng-container>\n }\n <ng-container *ngTemplateOutlet=\"statusBarTmpl\"></ng-container>\n</div>\n<ng-template #chipsTmpl>\n <fs-filter-chips class=\"filter-chips\"></fs-filter-chips>\n</ng-template>\n<ng-template #statusBarTmpl>\n @if (statusBar) {\n <div\n class=\"filter-status-container\"\n [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div\n class=\"filter-status\"\n #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #filterActionsTmpl>\n @if ((actionsVisible$ | async)) {\n <div class=\"filter-actions\">\n <ng-container [ngTemplateOutlet]=\"filterToolbarTmpl\"></ng-container>\n <fs-filter-actions\n [actions]=\"actions$ | async\"\n [kebabActions]=\"menuActions$ | async\">\n </fs-filter-actions>\n </div>\n }\n</ng-template>\n<ng-template #filterToolbarTmpl>\n @if (config.reload || config.autoReload) {\n <div class=\"filter-toolbar\">\n @if (config.reload) {\n <a\n mat-icon-button\n (click)=\"reload($event)\"\n class=\"button-reload\">\n <mat-icon #reloadEl>\n refresh\n </mat-icon>\n </a>\n }\n @if (config.autoReload) {\n <a\n mat-icon-button\n class=\"filter-reload\"\n (click)=\"config.autoReload.enabled = !config.autoReload.enabled\">\n <mat-icon>\n {{ config.autoReload.enabled ? 'sync' : 'sync_disabled' }}\n </mat-icon>\n </a>\n }\n </div>\n }\n</ng-template>\n<ng-template #headingTmpl>\n @if (headingTemplate) {\n <ng-container *ngTemplateOutlet=\"headingTemplate\"></ng-container>\n } @else if (config.heading) {\n <div class=\"heading\">\n <h2>\n {{ config.heading }}\n </h2>\n <div class=\"subheading\">\n {{ config.subheading }}\n </div>\n </div>\n }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin-top:4px}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis}.filter-container{width:100%}.filter-container.has-primary-filter .heading{margin-bottom:10px}.filter-container.has-primary-filter .filter-bar-container{margin-bottom:4px}.filter-container.keyword-full-width .filter-input-container{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input ::ng-deep mat-form-field{width:100%}.filter-container .filter-bar-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:flex-start}.filter-container .filter-bar-container .filter-input-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;column-gap:5px;row-gap:10px;flex-wrap:wrap}.filter-container .filter-bar-container .filter-heading-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-container .filter-bar-container .filter-heading-container fs-keyword-input+fs-saved-filter-autocomplete-chips{margin-left:5px}.filter-container .filter-bar-container+.filter-chips,.filter-container .filter-bar-container+.filter-status-container{margin-top:6px}.filter-container .filter-chips+.filter-status-container{margin-top:4px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end;gap:5px}.filter-actions ::ng-deep .mdc-icon-button{
|
|
4081
|
+
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }, { propertyName: "headingTemplate", first: true, predicate: FilterHeadingDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "keywordInput", first: true, predicate: KeywordInputComponent, descendants: true }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"filter-container\"\n [ngClass]=\"{ 'has-primary-filter': primaryFilterVisible$ | async }\"\n [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | async }\">\n @if (primaryFilterVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n }\n <div class=\"filter-bar-container\">\n @if (primaryFilterVisible$ | async) {\n <div class=\"filter-input-container\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @for (item of primaryItems; track item.name) {\n @if (item.visible$ | async) {\n <filter-item\n [item]=\"item\"\n [triggerChangeOn]=\"'change'\">\n </filter-item>\n }\n }\n </div>\n } @else if (hasHeading) {\n <div class=\"filter-heading-container\">\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"chipsTmpl\"></ng-container>\n }\n <ng-container [ngTemplateOutlet]=\"filterActionsTmpl\"></ng-container>\n </div>\n @if ((primaryFilterVisible$ | async) === true || hasHeading) {\n <ng-container [ngTemplateOutlet]=\"chipsTmpl\"></ng-container>\n }\n <ng-container *ngTemplateOutlet=\"statusBarTmpl\"></ng-container>\n</div>\n<ng-template #chipsTmpl>\n <fs-filter-chips class=\"filter-chips\"></fs-filter-chips>\n</ng-template>\n<ng-template #statusBarTmpl>\n @if (statusBar) {\n <div\n class=\"filter-status-container\"\n [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div\n class=\"filter-status\"\n #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #filterActionsTmpl>\n @if ((actionsVisible$ | async)) {\n <div class=\"filter-actions\">\n <ng-container [ngTemplateOutlet]=\"filterToolbarTmpl\"></ng-container>\n <fs-filter-actions\n [actions]=\"actions$ | async\"\n [kebabActions]=\"menuActions$ | async\">\n </fs-filter-actions>\n </div>\n }\n</ng-template>\n<ng-template #filterToolbarTmpl>\n @if (config.reload || config.autoReload) {\n <div class=\"filter-toolbar\">\n @if (config.reload) {\n <a\n mat-icon-button\n (click)=\"reload($event)\"\n class=\"button-reload\">\n <mat-icon #reloadEl>\n refresh\n </mat-icon>\n </a>\n }\n @if (config.autoReload) {\n <a\n mat-icon-button\n class=\"filter-reload\"\n (click)=\"config.autoReload.enabled = !config.autoReload.enabled\">\n <mat-icon>\n {{ config.autoReload.enabled ? 'sync' : 'sync_disabled' }}\n </mat-icon>\n </a>\n }\n </div>\n }\n</ng-template>\n<ng-template #headingTmpl>\n @if (headingTemplate) {\n <ng-container *ngTemplateOutlet=\"headingTemplate\"></ng-container>\n } @else if (config.heading) {\n <div class=\"heading\">\n <h2>\n {{ config.heading }}\n </h2>\n <div class=\"subheading\">\n {{ config.subheading }}\n </div>\n </div>\n }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin-top:4px}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis}.filter-container{width:100%}.filter-container.has-primary-filter .heading{margin-bottom:10px}.filter-container.has-primary-filter .filter-bar-container{margin-bottom:4px}.filter-container.keyword-full-width .filter-input-container{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input ::ng-deep mat-form-field{width:100%}.filter-container .filter-bar-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:flex-start}.filter-container .filter-bar-container .filter-input-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;column-gap:5px;row-gap:10px;flex-wrap:wrap}.filter-container .filter-bar-container .filter-heading-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-container .filter-bar-container .filter-heading-container fs-keyword-input+fs-saved-filter-autocomplete-chips{margin-left:5px}.filter-container .filter-bar-container+.filter-chips,.filter-container .filter-bar-container+.filter-status-container{margin-top:6px}.filter-container .filter-chips+.filter-status-container{margin-top:4px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end;gap:5px}.filter-actions ::ng-deep .mdc-icon-button{--mdc-icon-button-state-layer-size: 40px;display:flex;align-items:center;padding:8px}.filter-actions ::ng-deep .mdc-icon-button ::ng-deep svg{display:flex}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.heading{margin-right:8px}.heading h2{margin:0}.heading h2+.subheading{margin:0}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FilterItemComponent, selector: "filter-item", inputs: ["autofocus", "floatLabel", "autofocusName", "overlayRef", "item", "name", "triggerChangeOn"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FsFormModule }, { kind: "ngmodule", type: FsClearModule }, { kind: "component", type: FsFilterChipsComponent, selector: "fs-filter-chips" }, { kind: "component", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: KeywordInputComponent, selector: "fs-keyword-input", inputs: ["autofocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4073
4082
|
}
|
|
4074
4083
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
|
|
4075
4084
|
type: Component,
|
|
@@ -4096,7 +4105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4096
4105
|
MatSlideToggle,
|
|
4097
4106
|
AsyncPipe,
|
|
4098
4107
|
KeywordInputComponent,
|
|
4099
|
-
], template: "<div\n class=\"filter-container\"\n [ngClass]=\"{ 'has-primary-filter': primaryFilterVisible$ | async }\"\n [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | async }\">\n @if (primaryFilterVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n }\n <div class=\"filter-bar-container\">\n @if (primaryFilterVisible$ | async) {\n <div class=\"filter-input-container\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @for (item of primaryItems; track item.name) {\n @if (item.visible$ | async) {\n <filter-item\n [item]=\"item\"\n [triggerChangeOn]=\"'change'\">\n </filter-item>\n }\n }\n </div>\n } @else if (hasHeading) {\n <div class=\"filter-heading-container\">\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"chipsTmpl\"></ng-container>\n }\n <ng-container [ngTemplateOutlet]=\"filterActionsTmpl\"></ng-container>\n </div>\n @if ((primaryFilterVisible$ | async) === true || hasHeading) {\n <ng-container [ngTemplateOutlet]=\"chipsTmpl\"></ng-container>\n }\n <ng-container *ngTemplateOutlet=\"statusBarTmpl\"></ng-container>\n</div>\n<ng-template #chipsTmpl>\n <fs-filter-chips class=\"filter-chips\"></fs-filter-chips>\n</ng-template>\n<ng-template #statusBarTmpl>\n @if (statusBar) {\n <div\n class=\"filter-status-container\"\n [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div\n class=\"filter-status\"\n #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #filterActionsTmpl>\n @if ((actionsVisible$ | async)) {\n <div class=\"filter-actions\">\n <ng-container [ngTemplateOutlet]=\"filterToolbarTmpl\"></ng-container>\n <fs-filter-actions\n [actions]=\"actions$ | async\"\n [kebabActions]=\"menuActions$ | async\">\n </fs-filter-actions>\n </div>\n }\n</ng-template>\n<ng-template #filterToolbarTmpl>\n @if (config.reload || config.autoReload) {\n <div class=\"filter-toolbar\">\n @if (config.reload) {\n <a\n mat-icon-button\n (click)=\"reload($event)\"\n class=\"button-reload\">\n <mat-icon #reloadEl>\n refresh\n </mat-icon>\n </a>\n }\n @if (config.autoReload) {\n <a\n mat-icon-button\n class=\"filter-reload\"\n (click)=\"config.autoReload.enabled = !config.autoReload.enabled\">\n <mat-icon>\n {{ config.autoReload.enabled ? 'sync' : 'sync_disabled' }}\n </mat-icon>\n </a>\n }\n </div>\n }\n</ng-template>\n<ng-template #headingTmpl>\n @if (headingTemplate) {\n <ng-container *ngTemplateOutlet=\"headingTemplate\"></ng-container>\n } @else if (config.heading) {\n <div class=\"heading\">\n <h2>\n {{ config.heading }}\n </h2>\n <div class=\"subheading\">\n {{ config.subheading }}\n </div>\n </div>\n }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin-top:4px}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis}.filter-container{width:100%}.filter-container.has-primary-filter .heading{margin-bottom:10px}.filter-container.has-primary-filter .filter-bar-container{margin-bottom:4px}.filter-container.keyword-full-width .filter-input-container{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input ::ng-deep mat-form-field{width:100%}.filter-container .filter-bar-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:flex-start}.filter-container .filter-bar-container .filter-input-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;column-gap:5px;row-gap:10px;flex-wrap:wrap}.filter-container .filter-bar-container .filter-heading-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-container .filter-bar-container .filter-heading-container fs-keyword-input+fs-saved-filter-autocomplete-chips{margin-left:5px}.filter-container .filter-bar-container+.filter-chips,.filter-container .filter-bar-container+.filter-status-container{margin-top:6px}.filter-container .filter-chips+.filter-status-container{margin-top:4px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end;gap:5px}.filter-actions ::ng-deep .mdc-icon-button{
|
|
4108
|
+
], template: "<div\n class=\"filter-container\"\n [ngClass]=\"{ 'has-primary-filter': primaryFilterVisible$ | async }\"\n [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | async }\">\n @if (primaryFilterVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n }\n <div class=\"filter-bar-container\">\n @if (primaryFilterVisible$ | async) {\n <div class=\"filter-input-container\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @for (item of primaryItems; track item.name) {\n @if (item.visible$ | async) {\n <filter-item\n [item]=\"item\"\n [triggerChangeOn]=\"'change'\">\n </filter-item>\n }\n }\n </div>\n } @else if (hasHeading) {\n <div class=\"filter-heading-container\">\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"chipsTmpl\"></ng-container>\n }\n <ng-container [ngTemplateOutlet]=\"filterActionsTmpl\"></ng-container>\n </div>\n @if ((primaryFilterVisible$ | async) === true || hasHeading) {\n <ng-container [ngTemplateOutlet]=\"chipsTmpl\"></ng-container>\n }\n <ng-container *ngTemplateOutlet=\"statusBarTmpl\"></ng-container>\n</div>\n<ng-template #chipsTmpl>\n <fs-filter-chips class=\"filter-chips\"></fs-filter-chips>\n</ng-template>\n<ng-template #statusBarTmpl>\n @if (statusBar) {\n <div\n class=\"filter-status-container\"\n [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div\n class=\"filter-status\"\n #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #filterActionsTmpl>\n @if ((actionsVisible$ | async)) {\n <div class=\"filter-actions\">\n <ng-container [ngTemplateOutlet]=\"filterToolbarTmpl\"></ng-container>\n <fs-filter-actions\n [actions]=\"actions$ | async\"\n [kebabActions]=\"menuActions$ | async\">\n </fs-filter-actions>\n </div>\n }\n</ng-template>\n<ng-template #filterToolbarTmpl>\n @if (config.reload || config.autoReload) {\n <div class=\"filter-toolbar\">\n @if (config.reload) {\n <a\n mat-icon-button\n (click)=\"reload($event)\"\n class=\"button-reload\">\n <mat-icon #reloadEl>\n refresh\n </mat-icon>\n </a>\n }\n @if (config.autoReload) {\n <a\n mat-icon-button\n class=\"filter-reload\"\n (click)=\"config.autoReload.enabled = !config.autoReload.enabled\">\n <mat-icon>\n {{ config.autoReload.enabled ? 'sync' : 'sync_disabled' }}\n </mat-icon>\n </a>\n }\n </div>\n }\n</ng-template>\n<ng-template #headingTmpl>\n @if (headingTemplate) {\n <ng-container *ngTemplateOutlet=\"headingTemplate\"></ng-container>\n } @else if (config.heading) {\n <div class=\"heading\">\n <h2>\n {{ config.heading }}\n </h2>\n <div class=\"subheading\">\n {{ config.subheading }}\n </div>\n </div>\n }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin-top:4px}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis}.filter-container{width:100%}.filter-container.has-primary-filter .heading{margin-bottom:10px}.filter-container.has-primary-filter .filter-bar-container{margin-bottom:4px}.filter-container.keyword-full-width .filter-input-container{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input ::ng-deep mat-form-field{width:100%}.filter-container .filter-bar-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:flex-start}.filter-container .filter-bar-container .filter-input-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;column-gap:5px;row-gap:10px;flex-wrap:wrap}.filter-container .filter-bar-container .filter-heading-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-container .filter-bar-container .filter-heading-container fs-keyword-input+fs-saved-filter-autocomplete-chips{margin-left:5px}.filter-container .filter-bar-container+.filter-chips,.filter-container .filter-bar-container+.filter-status-container{margin-top:6px}.filter-container .filter-chips+.filter-status-container{margin-top:4px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end;gap:5px}.filter-actions ::ng-deep .mdc-icon-button{--mdc-icon-button-state-layer-size: 40px;display:flex;align-items:center;padding:8px}.filter-actions ::ng-deep .mdc-icon-button ::ng-deep svg{display:flex}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.heading{margin-right:8px}.heading h2{margin:0}.heading h2+.subheading{margin:0}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}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"] }]
|
|
4100
4109
|
}], ctorParameters: () => [], propDecorators: { keywordInput: [{
|
|
4101
4110
|
type: ViewChild,
|
|
4102
4111
|
args: [KeywordInputComponent]
|