@firestitch/filter 12.12.8 → 12.12.10
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/filter.component.d.ts +2 -1
- package/app/directives/status-bar/status-bar.directive.d.ts +3 -0
- package/bundles/firestitch-filter.umd.js +12 -11
- package/bundles/firestitch-filter.umd.js.map +1 -1
- package/esm2015/app/components/filter/filter.component.js +9 -9
- package/esm2015/app/directives/status-bar/status-bar.directive.js +7 -4
- package/fesm2015/firestitch-filter.js +9 -6
- package/fesm2015/firestitch-filter.js.map +1 -1
- package/package.json +1 -1
|
@@ -11,6 +11,7 @@ import { BaseItem } from '../../models/items/base-item';
|
|
|
11
11
|
import { ExternalParamsController } from '../../services/external-params-controller.service';
|
|
12
12
|
import { FsFilterOverlayService } from '../../services/filter-overlay.service';
|
|
13
13
|
import { FsFilterItemsStore } from '../../services/items-store.service';
|
|
14
|
+
import { FilterStatusBarDirective } from './../../directives/status-bar/status-bar.directive';
|
|
14
15
|
import * as i0 from "@angular/core";
|
|
15
16
|
export declare class FilterComponent implements OnInit, OnDestroy {
|
|
16
17
|
private _defaultConfig;
|
|
@@ -26,7 +27,7 @@ export declare class FilterComponent implements OnInit, OnDestroy {
|
|
|
26
27
|
closed: EventEmitter<any>;
|
|
27
28
|
opened: EventEmitter<any>;
|
|
28
29
|
ready: EventEmitter<void>;
|
|
29
|
-
statusBar:
|
|
30
|
+
statusBar: FilterStatusBarDirective;
|
|
30
31
|
keywordMatInput: MatInput;
|
|
31
32
|
showFilterMenu: boolean;
|
|
32
33
|
windowDesktop: boolean;
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
import { TemplateRef } from '@angular/core';
|
|
1
2
|
import * as i0 from "@angular/core";
|
|
2
3
|
export declare class FilterStatusBarDirective {
|
|
4
|
+
templateRef: TemplateRef<any>;
|
|
5
|
+
constructor(templateRef: TemplateRef<any>);
|
|
3
6
|
static ɵfac: i0.ɵɵFactoryDeclaration<FilterStatusBarDirective, never>;
|
|
4
7
|
static ɵdir: i0.ɵɵDirectiveDeclaration<FilterStatusBarDirective, "[fsFilterStatusBar]", never, {}, {}, never>;
|
|
5
8
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@firestitch/common'), require('lodash-es'), require('@firestitch/date'), require('date-fns'), require('@firestitch/datepicker'), require('@firestitch/store'), require('@angular/router'), require('@angular/common'), require('@angular/material/dialog'), require('@firestitch/drawer'), require('@angular/material/form-field'), require('@angular/material/select'), require('@angular/material/core'), require('@angular/material/button'), require('@angular/forms'), require('@firestitch/form'), require('@angular/material/input'), require('@angular/cdk/portal'), require('@angular/material/autocomplete'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/icon'), require('@firestitch/autocomplete'), require('@firestitch/autocomplete-chips'), require('@firestitch/chip'), require('@firestitch/file'), require('@firestitch/label'), require('@firestitch/menu'), require('@firestitch/popover'), require('@firestitch/scroll'), require('@firestitch/skeleton'), require('@firestitch/clear'), require('@angular/cdk/overlay'), require('@angular/cdk/layout')) :
|
|
3
3
|
typeof define === 'function' && define.amd ? define('@firestitch/filter', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@firestitch/common', 'lodash-es', '@firestitch/date', 'date-fns', '@firestitch/datepicker', '@firestitch/store', '@angular/router', '@angular/common', '@angular/material/dialog', '@firestitch/drawer', '@angular/material/form-field', '@angular/material/select', '@angular/material/core', '@angular/material/button', '@angular/forms', '@firestitch/form', '@angular/material/input', '@angular/cdk/portal', '@angular/material/autocomplete', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/icon', '@firestitch/autocomplete', '@firestitch/autocomplete-chips', '@firestitch/chip', '@firestitch/file', '@firestitch/label', '@firestitch/menu', '@firestitch/popover', '@firestitch/scroll', '@firestitch/skeleton', '@firestitch/clear', '@angular/cdk/overlay', '@angular/cdk/layout'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch.filter = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.common, global.lodashEs, global.date, global.dateFns, global.i3, global.i1, global.ng.router, global.ng.common, global.ng.material.dialog, global.i6, global.ng.material.formField, global.ng.material.select, global.ng.material.core, global.ng.material.button, global.ng.forms, global.i7, global.ng.material.input, global.ng.cdk.portal, global.ng.material.autocomplete, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.icon, global.i4$2, global.i5, global.i2$2, global.i4$1, global.i1$5, global.i3$4, global.i7$1, global.scroll, global.i6$1, global.
|
|
5
|
-
})(this, (function (exports, i0, rxjs, operators, common, lodashEs, date, dateFns, i3, i1, i1$1, i3$1, i1$2, i6, i1$3, i2, i3$2, i1$4, i4, i7, i3$3, portal, autocomplete, i4$3, chips, i2$1, i4$2, i5, i2$2, i4$1, i1$5, i3$4, i7$1, scroll, i6$1,
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch.filter = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.common, global.lodashEs, global.date, global.dateFns, global.i3, global.i1, global.ng.router, global.ng.common, global.ng.material.dialog, global.i6, global.ng.material.formField, global.ng.material.select, global.ng.material.core, global.ng.material.button, global.ng.forms, global.i7, global.ng.material.input, global.ng.cdk.portal, global.ng.material.autocomplete, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.icon, global.i4$2, global.i5, global.i2$2, global.i4$1, global.i1$5, global.i3$4, global.i7$1, global.scroll, global.i6$1, global.i8, global.ng.cdk.overlay, global.ng.cdk.layout));
|
|
5
|
+
})(this, (function (exports, i0, rxjs, operators, common, lodashEs, date, dateFns, i3, i1, i1$1, i3$1, i1$2, i6, i1$3, i2, i3$2, i1$4, i4, i7, i3$3, portal, autocomplete, i4$3, chips, i2$1, i4$2, i5, i2$2, i4$1, i1$5, i3$4, i7$1, scroll, i6$1, i8, i1$6, i1$7) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopNamespace(e) {
|
|
8
8
|
if (e && e.__esModule) return e;
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
var i3__namespace$3 = /*#__PURE__*/_interopNamespace(i3$4);
|
|
47
47
|
var i7__namespace$1 = /*#__PURE__*/_interopNamespace(i7$1);
|
|
48
48
|
var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
|
|
49
|
-
var
|
|
49
|
+
var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
|
|
50
50
|
var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$6);
|
|
51
51
|
var i1__namespace$7 = /*#__PURE__*/_interopNamespace(i1$7);
|
|
52
52
|
|
|
@@ -4806,18 +4806,19 @@
|
|
|
4806
4806
|
} });
|
|
4807
4807
|
|
|
4808
4808
|
var FilterStatusBarDirective = /** @class */ (function () {
|
|
4809
|
-
function FilterStatusBarDirective() {
|
|
4809
|
+
function FilterStatusBarDirective(templateRef) {
|
|
4810
|
+
this.templateRef = templateRef;
|
|
4810
4811
|
}
|
|
4811
4812
|
return FilterStatusBarDirective;
|
|
4812
4813
|
}());
|
|
4813
|
-
FilterStatusBarDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterStatusBarDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
|
|
4814
|
+
FilterStatusBarDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterStatusBarDirective, deps: [{ token: i0__namespace.TemplateRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
|
|
4814
4815
|
FilterStatusBarDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FilterStatusBarDirective, selector: "[fsFilterStatusBar]", ngImport: i0__namespace });
|
|
4815
4816
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterStatusBarDirective, decorators: [{
|
|
4816
4817
|
type: i0.Directive,
|
|
4817
4818
|
args: [{
|
|
4818
4819
|
selector: '[fsFilterStatusBar]',
|
|
4819
4820
|
}]
|
|
4820
|
-
}] });
|
|
4821
|
+
}], ctorParameters: function () { return [{ type: i0__namespace.TemplateRef }]; } });
|
|
4821
4822
|
|
|
4822
4823
|
var FilterComponent = /** @class */ (function () {
|
|
4823
4824
|
function FilterComponent(_defaultConfig, _filterOverlay, _zone, _externalParams, _filterItems, _actions) {
|
|
@@ -5396,7 +5397,7 @@
|
|
|
5396
5397
|
FsFilterItemsStore,
|
|
5397
5398
|
SavedFiltersController,
|
|
5398
5399
|
ActionsController,
|
|
5399
|
-
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true
|
|
5400
|
+
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }], viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: i3$3.MatInput }], ngImport: i0__namespace, 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\">\n <mat-form-field \n [floatLabel]=\"'never'\" \n class=\"form-field-padless\" \n [ngClass]=\"search\"\n appearance=\"outline\">\n <span matPrefix>\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 <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n <div class=\"filter-toobar\">\n <ng-container *ngIf=\"hasVisibleItemOrSorting\">\n <a\n mat-button\n class=\"filters-button\"\n [ngClass]=\"{\n 'mat-raised-button': config.button.style === 'raised' && config.button.label,\n 'mat-flat-button': config.button.style === 'flat' && config.button.label,\n 'mat-stroked-button': config.button.style === 'stroked' && config.button.label,\n 'mat-button': config.button.style === 'basic' && config.button.label,\n 'mat-icon-button': config.button.style === 'icon' || !config.button.label \n }\"\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 <a \n mat-icon-button\n (click)=\"reload($event)\"\n class=\"reload\"\n *ngIf=\"config.reload\">\n <mat-icon>refresh</mat-icon>\n </a>\n </ng-container>\n </div>\n </ng-container>\n</ng-template>", styles: [".fs-filter{margin-bottom:20px;display:block}.fs-filter.has-keyword .filter-status-container.has-status{margin-top:4px}.fs-filter:not(.has-keyword) .filter-status-container:not(.has-status)+fs-filter-chips{margin-top:0}.fs-filter:not(.has-keyword) .filter-inner-container{display:flex}.fs-filter:not(.has-keyword) .filter-toobar{justify-content:flex-end}.fs-filter .filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.fs-filter .filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.fs-filter .filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.fs-filter .filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.fs-filter .filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px;margin-right:6px}.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-wrapper{margin-bottom:0}.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-prefix .mat-icon{font-size:22px;color:#626262}.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-infix{width:250px}.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-prefix,.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-suffix{top:.45em}.fs-filter .filter-inner-container .filter-keyword .mat-form-field-suffix{display:flex}.fs-filter .filter-inner-container .filter-keyword .mat-form-field-suffix .mat-icon-button{height:24px;width:24px}.fs-filter .filter-actions{display:flex;align-items:center}.fs-filter .filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.fs-filter .filter-toobar .filters-button{z-index:100}.fs-filter .filter-toobar .reload{margin-left:-6px}.fs-filter .results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}.fs-filter fs-filter-chips{margin-top:4px;display:block}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.filters-button+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.filter-actions{margin-left:5px}.filter-actions .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){body.fs-filter-open{margin-right:350px}.fs-filter-backdrop{display:none}}body.fs-filter-open::-webkit-scrollbar{width:0;background:transparent}\n"], components: [{ type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }, { type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8__namespace.FsClearComponent, selector: "[fsClear]", inputs: ["ngModel", "fsClear"], outputs: ["ngModelChange", "cleared"] }, { type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { type: i1__namespace$4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$3.MatPrefix, selector: "[matPrefix]" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
5400
5401
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterComponent, decorators: [{
|
|
5401
5402
|
type: i0.Component,
|
|
5402
5403
|
args: [{
|
|
@@ -5441,7 +5442,7 @@
|
|
|
5441
5442
|
type: i0.Output
|
|
5442
5443
|
}], statusBar: [{
|
|
5443
5444
|
type: i0.ContentChild,
|
|
5444
|
-
args: [FilterStatusBarDirective
|
|
5445
|
+
args: [FilterStatusBarDirective]
|
|
5445
5446
|
}], keywordMatInput: [{
|
|
5446
5447
|
type: i0.ViewChild,
|
|
5447
5448
|
args: ['keywordMatInput', { read: i3$3.MatInput }]
|
|
@@ -5602,7 +5603,7 @@
|
|
|
5602
5603
|
i6$1.FsSkeletonModule,
|
|
5603
5604
|
i7.FsFormModule,
|
|
5604
5605
|
i4$1.FsFileModule,
|
|
5605
|
-
|
|
5606
|
+
i8.FsClearModule,
|
|
5606
5607
|
i7$1.FsPopoverModule,
|
|
5607
5608
|
portal.PortalModule], exports: [FilterComponent,
|
|
5608
5609
|
FilterStatusBarDirective,
|
|
@@ -5634,7 +5635,7 @@
|
|
|
5634
5635
|
i6$1.FsSkeletonModule,
|
|
5635
5636
|
i7.FsFormModule,
|
|
5636
5637
|
i4$1.FsFileModule,
|
|
5637
|
-
|
|
5638
|
+
i8.FsClearModule,
|
|
5638
5639
|
i7$1.FsPopoverModule,
|
|
5639
5640
|
portal.PortalModule,
|
|
5640
5641
|
]] });
|
|
@@ -5666,7 +5667,7 @@
|
|
|
5666
5667
|
i6$1.FsSkeletonModule,
|
|
5667
5668
|
i7.FsFormModule,
|
|
5668
5669
|
i4$1.FsFileModule,
|
|
5669
|
-
|
|
5670
|
+
i8.FsClearModule,
|
|
5670
5671
|
i7$1.FsPopoverModule,
|
|
5671
5672
|
portal.PortalModule,
|
|
5672
5673
|
],
|