@theseam/ui-common 0.2.9

package/fesm2015/theseam-ui-common-data-exporter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theseam-ui-common-data-exporter.js","sources":["../../../projects/ui-common/data-exporter/data-exporter.ts","../../../projects/ui-common/data-exporter/exporters/csv-exporter.ts","../../../projects/ui-common/data-exporter/exporters/xlsx-exporter.ts","../../../projects/ui-common/data-exporter/data-exporter.module.ts","../../../projects/ui-common/data-exporter/theseam-ui-common-data-exporter.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core'\nimport { Observable } from 'rxjs'\nimport { switchMap } from 'rxjs/operators'\n\nimport { IconProp } from '@fortawesome/fontawesome-svg-core'\n\nexport type IDataExporterFunction = <T>(data: T[]) => Observable<T[]>\n\nexport interface IDataExporter {\n  /**\n   * Name to identify the exporter.\n   */\n  readonly name: string\n\n  /**\n   * Label to use for exporter in user visible text.\n   *\n   * default: `name`\n   */\n  label?: string\n\n  /**\n   * Icon to represent exporter.\n   */\n  icon?: string | IconProp\n\n  /**\n   * Pass the rows directly to the export function without any mapping.\n   */\n  skipDataMapping?: boolean\n\n  /**\n   * Export the data based on the data to some format.\n   */\n  export<T>(data: T[]): Observable<boolean>\n}\n\nexport const THESEAM_DATA_EXPORTER = new InjectionToken<IDataExporter>('TheSeamDataExporter')\n\nexport function exportOperator<T>(exportFn: IDataExporterFunction) {\n  return (source$: Observable<T[]>) =>\n    source$.pipe(switchMap(exportFn))\n}\n","import { Injectable } from '@angular/core'\nimport { from, Observable } from 'rxjs'\nimport { mapTo, switchMap, tap } from 'rxjs/operators'\n\nimport { faFileCsv } from '@fortawesome/free-solid-svg-icons'\nimport FileSaver from 'file-saver'\n\nimport { fileDataFromBuffer, wrapIntoObservable } from '@theseam/ui-common/utils'\n\nimport { IDataExporter } from '../data-exporter'\n\n@Injectable()\nexport class CSVDataExporter implements IDataExporter {\n\n  public readonly name = 'exporter:csv'\n\n  public label = 'CSV'\n\n  public icon = faFileCsv\n\n  public export<T>(data: T[]): Observable<boolean> {\n    // TODO: Fix typing for the dynamic imports\n    return wrapIntoObservable(import('xlsx')).pipe(\n      switchMap((XLSX: any) => {\n        const ws = XLSX.utils.json_to_sheet(data)\n\n        const out = XLSX.utils.sheet_to_csv(ws)\n\n        // NOTE: `out` should not be passed as a string, but the fileDataFromBuffer\n        // function happens to works with a string. When the build issue about the\n        // function argument is figured out then this should be fixed.\n        return from(fileDataFromBuffer(out as any))\n        // return from(fileDataFromBuffer(Buffer.from(out)))\n          .pipe(\n            tap(fileData => {\n              FileSaver.saveAs(fileData.blob, `Export.csv`)\n            }),\n            mapTo(true)\n          )\n      })\n    )\n  }\n\n}\n","import { Injectable } from '@angular/core'\nimport { from, Observable } from 'rxjs'\nimport { mapTo, switchMap, tap } from 'rxjs/operators'\n\nimport { faFileExcel } from '@fortawesome/free-solid-svg-icons'\nimport { Buffer } from 'buffer/'\nimport FileSaver from 'file-saver'\n\nimport { fileDataFromBuffer, wrapIntoObservable } from '@theseam/ui-common/utils'\n\nimport { IDataExporter } from '../data-exporter'\n\n@Injectable()\nexport class XLSXDataExporter implements IDataExporter {\n\n  public readonly name = 'exporter:xlsx'\n\n  public label = 'XLSX'\n\n  public icon = faFileExcel\n\n  public export<T>(data: T[]): Observable<boolean> {\n    // TODO: Fix typing for the dynamic imports\n    return wrapIntoObservable(import('xlsx')).pipe(\n      switchMap((XLSX: any) => {\n        const ws = XLSX.utils.json_to_sheet(data)\n        const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] }\n        const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })\n\n        return from(fileDataFromBuffer(Buffer.from(excelBuffer)))\n          .pipe(\n            tap(fileData => {\n              FileSaver.saveAs(fileData.blob, `Export.xlsx`)\n            }),\n            mapTo(true)\n          )\n      })\n    )\n  }\n\n}\n","import { NgModule } from '@angular/core'\n\nimport { CSVDataExporter } from './exporters/csv-exporter'\nimport { XLSXDataExporter } from './exporters/xlsx-exporter'\n\nimport { THESEAM_DATA_EXPORTER } from './data-exporter'\n\n@NgModule({\n  declarations: [],\n  imports: [],\n  providers: [\n    { provide: THESEAM_DATA_EXPORTER, useClass: CSVDataExporter, multi: true },\n    { provide: THESEAM_DATA_EXPORTER, useClass: XLSXDataExporter, multi: true }\n  ]\n})\nexport class TheSeamDataExporterModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;MAqCa,qBAAqB,GAAG,IAAI,cAAc,CAAgB,qBAAqB,EAAC;SAE7E,cAAc,CAAI,QAA+B;IAC/D,OAAO,CAAC,OAAwB,KAC9B,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAA;AACrC;;MC9Ba,eAAe;IAD5B;QAGkB,SAAI,GAAG,cAAc,CAAA;QAE9B,UAAK,GAAG,KAAK,CAAA;QAEb,SAAI,GAAG,SAAS,CAAA;KAyBxB;IAvBQ,MAAM,CAAI,IAAS;;QAExB,OAAO,kBAAkB,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAC5C,SAAS,CAAC,CAAC,IAAS;YAClB,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;YAEzC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA;;;;YAKvC,OAAO,IAAI,CAAC,kBAAkB,CAAC,GAAU,CAAC,CAAC;;iBAExC,IAAI,CACH,GAAG,CAAC,QAAQ;gBACV,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;aAC9C,CAAC,EACF,KAAK,CAAC,IAAI,CAAC,CACZ,CAAA;SACJ,CAAC,CACH,CAAA;KACF;;;YA9BF,UAAU;;;MCEE,gBAAgB;IAD7B;QAGkB,SAAI,GAAG,eAAe,CAAA;QAE/B,UAAK,GAAG,MAAM,CAAA;QAEd,SAAI,GAAG,WAAW,CAAA;KAqB1B;IAnBQ,MAAM,CAAI,IAAS;;QAExB,OAAO,kBAAkB,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAC5C,SAAS,CAAC,CAAC,IAAS;YAClB,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;YACzC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,MAAM,CAAC,EAAE,CAAA;YAC3D,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAA;YAEvE,OAAO,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;iBACtD,IAAI,CACH,GAAG,CAAC,QAAQ;gBACV,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;aAC/C,CAAC,EACF,KAAK,CAAC,IAAI,CAAC,CACZ,CAAA;SACJ,CAAC,CACH,CAAA;KACF;;;YA1BF,UAAU;;;MCGE,yBAAyB;;;YARrC,QAAQ,SAAC;gBACR,YAAY,EAAE,EAAE;gBAChB,OAAO,EAAE,EAAE;gBACX,SAAS,EAAE;oBACT,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,EAAE,IAAI,EAAE;oBAC1E,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,KAAK,EAAE,IAAI,EAAE;iBAC5E;aACF;;;ACdD;;;;;;"}

package/fesm2015/theseam-ui-common-data-filters.js

@@ -0,0 +1,452 @@
+import { InjectionToken, forwardRef, Component, Inject, Optional, Input, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { combineLatest, of } from 'rxjs';
+import { switchMap, startWith, map, shareReplay, tap } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
+import { TheSeamIconModule } from '@theseam/ui-common/icon';
+import { TheSeamToggleGroupModule } from '@theseam/ui-common/toggle-group';
+import { __decorate } from 'tslib';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { InputBoolean } from '@theseam/ui-common/core';
+import { isNullOrUndefined, hasProperty } from '@theseam/ui-common/utils';
+import { coerceArray } from '@angular/cdk/coercion';
+
+const THESEAM_DATA_FILTER = new InjectionToken('TheSeamDataFilter');
+const THESEAM_DATA_FILTER_OPTIONS = new InjectionToken('TheSeamDataFilterOptions');
+function filterOperator(filterFn) {
+    return (source$) => source$.pipe(switchMap(filterFn));
+}
+function composeDataFilters(filters) {
+    const filterFunctions = filters.map(f => filterOperator(f.filter.bind(f)));
+    return (source$) => {
+        let src$ = source$;
+        for (const f of filterFunctions) {
+            src$ = src$.pipe(f);
+        }
+        return src$;
+    };
+}
+function composeDataFilterStates(filters) {
+    return combineLatest(filters.map(f => f.filterStateChanges.pipe(startWith(undefined), map(() => f.filterState()))));
+}
+
+const THESEAM_DATA_FILTER_DEF = new InjectionToken('TheSeamDataFilter');
+
+const THESEAM_DATA_FILTER_CONTAINER = new InjectionToken('DataFilterContainer');
+
+const DATA_FILTER_TEXT = {
+    provide: THESEAM_DATA_FILTER,
+    // tslint:disable-next-line:no-use-before-declare
+    useExisting: forwardRef(() => DataFilterTextComponent),
+    multi: true,
+};
+const DefaultTextFilterOptions = {
+    properties: undefined,
+    omitProperties: undefined,
+    exact: false,
+    caseSensitive: false,
+};
+function textDataFilter(data, text, options = DefaultTextFilterOptions) {
+    if (!data || !text) {
+        return data;
+    }
+    if (data.length <= 0) {
+        return data;
+    }
+    let props = options ? options.properties : undefined;
+    if (!props) {
+        props = [];
+        let keys = Object.keys(data[0]);
+        if (options && options.omitProperties) {
+            keys = keys.filter(key => !(options.omitProperties || []).find(p => p === key));
+        }
+        for (const key of keys) {
+            if (data[0].hasOwnProperty(key)) {
+                props.push(key);
+            }
+        }
+    }
+    const filtered = [];
+    for (const item of data) {
+        for (const p of props) {
+            let value1 = `${item[p]}`;
+            let value2 = text;
+            if (!options.caseSensitive) {
+                value1 = value1.toLowerCase();
+                value2 = value2.toLowerCase();
+            }
+            if (item[p] && value1.indexOf(value2) !== (options.exact ? 0 : -1)) {
+                filtered.push(item);
+                break;
+            }
+        }
+    }
+    return filtered;
+}
+let _uid$2 = 0;
+class DataFilterTextComponent {
+    constructor(_filterContainer, _filterOptions) {
+        this._filterContainer = _filterContainer;
+        this._filterOptions = _filterOptions;
+        this.name = 'text';
+        this.uid = `text__${_uid$2++}`;
+        this._control = new FormControl();
+        this.properties = this._optDefault('properties');
+        this.omitProperties = this._optDefault('omitProperties');
+        this.exact = this._optDefault('exact');
+        this.caseSensitive = this._optDefault('caseSensitive');
+        this.filterStateChanges = this._control.valueChanges.pipe(switchMap(() => of(this.filterState())), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    set value(value) {
+        const _value = !isNullOrUndefined(value) ? `${value}` : '';
+        if (this._control.value !== _value) {
+            this._control.setValue(_value);
+        }
+    }
+    ngOnInit() { this._filterContainer.addFilter(this); }
+    ngOnDestroy() { this._filterContainer.removeFilter(this); }
+    _optDefault(prop) {
+        if (this._filterOptions && this._filterOptions.hasOwnProperty(prop)) {
+            return this._filterOptions[prop];
+        }
+        return DefaultTextFilterOptions[prop];
+    }
+    get options() {
+        var _a, _b;
+        return {
+            properties: (_a = this.properties) !== null && _a !== void 0 ? _a : undefined,
+            omitProperties: (_b = this.omitProperties) !== null && _b !== void 0 ? _b : undefined,
+            exact: this.exact,
+            caseSensitive: this.caseSensitive
+        };
+    }
+    filter(data) {
+        return this._control.valueChanges
+            .pipe(map(v => textDataFilter(data, v, this.options)), startWith(textDataFilter(data, this._control.value, this.options)));
+    }
+    filterState() {
+        return {
+            // id:
+            name: this.name,
+            state: {
+                value: this._control.value,
+                options: this.options
+            }
+        };
+    }
+}
+DataFilterTextComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-data-filter-text',
+                template: "<div class=\"position-relative\"\n  [class.data-filter-text-has-icon]=\"iconTpl\"\n  (click)=\"inp.focus()\">\n  <label [attr.for]=\"inp.id\" class=\"sr-only\">Text filter</label>\n  <input seamInput #inp=\"seamInput\" seamInputSize=\"sm\" [formControl]=\"_control\" [placeholder]=\"placeholder\">\n  <ng-container *ngIf=\"iconTpl\">\n    <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n  </ng-container>\n</div>\n",
+                providers: [DATA_FILTER_TEXT],
+                styles: [":host{display:block}.data-filter-text-has-icon>input{padding-left:30px}.data-filter-text-has-icon ::ng-deep fa-icon{position:absolute;top:3px;left:10px;bottom:0}.data-filter-text-has-icon ::ng-deep fa-icon .svg-inline--fa{vertical-align:middle}"]
+            },] }
+];
+DataFilterTextComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [THESEAM_DATA_FILTER_CONTAINER,] }] },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [THESEAM_DATA_FILTER_OPTIONS,] }] }
+];
+DataFilterTextComponent.propDecorators = {
+    properties: [{ type: Input }],
+    omitProperties: [{ type: Input }],
+    exact: [{ type: Input }],
+    caseSensitive: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    iconTpl: [{ type: Input }],
+    value: [{ type: Input }]
+};
+__decorate([
+    InputBoolean()
+], DataFilterTextComponent.prototype, "exact", void 0);
+__decorate([
+    InputBoolean()
+], DataFilterTextComponent.prototype, "caseSensitive", void 0);
+
+const DATA_FILTER_SEARCH = {
+    provide: THESEAM_DATA_FILTER,
+    // tslint:disable-next-line:no-use-before-declare
+    useExisting: forwardRef(() => DataFilterSearchComponent),
+    multi: true,
+};
+const DefaultSearchFilterOptions = {
+    properties: undefined,
+    omitProperties: undefined,
+    exact: false,
+    caseSensitive: false
+};
+function searchDataFilter(data, values, options = DefaultSearchFilterOptions) {
+    return textDataFilter(data, values, options);
+}
+let _uid$1 = 0;
+class DataFilterSearchComponent {
+    constructor(_filterContainer, _filterOptions) {
+        this._filterContainer = _filterContainer;
+        this._filterOptions = _filterOptions;
+        this.name = 'search';
+        this.uid = `search__${_uid$1++}`;
+        this._control = new FormControl();
+        this.properties = this._optDefault('properties');
+        this.omitProperties = this._optDefault('omitProperties');
+        this.exact = this._optDefault('exact');
+        this.caseSensitive = this._optDefault('caseSensitive');
+        this.placeholder = 'Search...';
+        this.icon = faSearch;
+        this.filterStateChanges = this._control.valueChanges.pipe(switchMap(() => of(this.filterState())), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    set value(value) {
+        const _value = !isNullOrUndefined(value) ? `${value}` : '';
+        if (this._control.value !== _value) {
+            this._control.setValue(_value);
+        }
+    }
+    ngOnInit() { this._filterContainer.addFilter(this); }
+    ngOnDestroy() { this._filterContainer.removeFilter(this); }
+    _optDefault(prop) {
+        if (this._filterOptions && this._filterOptions.hasOwnProperty(prop)) {
+            return this._filterOptions[prop];
+        }
+        return DefaultSearchFilterOptions[prop];
+    }
+    get options() {
+        var _a, _b;
+        return {
+            properties: (_a = this.properties) !== null && _a !== void 0 ? _a : undefined,
+            omitProperties: (_b = this.omitProperties) !== null && _b !== void 0 ? _b : undefined,
+            exact: this.exact,
+            caseSensitive: this.caseSensitive
+        };
+    }
+    filter(data) {
+        return this._control.valueChanges
+            .pipe(map(v => searchDataFilter(data, v, this.options)), startWith(searchDataFilter(data, this._control.value, this.options)));
+    }
+    filterState() {
+        return {
+            // id:
+            name: this.name,
+            state: {
+                value: this._control.value,
+                options: this.options
+            }
+        };
+    }
+}
+DataFilterSearchComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-data-filter-search',
+                template: "<div class=\"position-relative\"\n  [class.data-filter-search-has-icon]=\"iconTpl || icon\"\n  (click)=\"inp.focus()\">\n  <label [attr.for]=\"inp.id\" class=\"sr-only\">Search filter</label>\n  <input seamInput #inp=\"seamInput\" seamInputSize=\"sm\" [formControl]=\"_control\" [placeholder]=\"placeholder\">\n  <ng-container *ngIf=\"iconTpl; else searchIconTpl\">\n    <div class=\"data-filter-search--icon-wrapper\">\n      <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-template #searchIconTpl>\n    <ng-container *ngIf=\"icon\">\n      <div class=\"data-filter-search--icon-wrapper\">\n        <seam-icon [icon]=\"icon\" class=\"text-muted\"></seam-icon>\n      </div>\n    </ng-container>\n  </ng-template>\n</div>\n",
+                providers: [DATA_FILTER_SEARCH],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:flex;flex:0 1 300px}.data-filter-search-has-icon{width:100%}.data-filter-search-has-icon>input{padding-left:30px}.data-filter-search-has-icon .data-filter-search--icon-wrapper{position:absolute;top:3px;left:10px;bottom:0}.data-filter-search-has-icon .data-filter-search--icon-wrapper ::ng-deep .svg-inline--fa{vertical-align:middle}"]
+            },] }
+];
+DataFilterSearchComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [THESEAM_DATA_FILTER_CONTAINER,] }] },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [THESEAM_DATA_FILTER_OPTIONS,] }] }
+];
+DataFilterSearchComponent.propDecorators = {
+    properties: [{ type: Input }],
+    omitProperties: [{ type: Input }],
+    exact: [{ type: Input }],
+    caseSensitive: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    icon: [{ type: Input }],
+    iconTpl: [{ type: Input }],
+    value: [{ type: Input }]
+};
+__decorate([
+    InputBoolean()
+], DataFilterSearchComponent.prototype, "exact", void 0);
+__decorate([
+    InputBoolean()
+], DataFilterSearchComponent.prototype, "caseSensitive", void 0);
+
+const DATA_FILTER_TOGGLE_BUTTON = {
+    provide: THESEAM_DATA_FILTER,
+    // tslint:disable-next-line:no-use-before-declare
+    useExisting: forwardRef(() => DataFilterToggleButtonsComponent),
+    multi: true,
+};
+const DefaultToggleButtonsFilterOptions = {
+    properties: undefined,
+    omitProperties: undefined,
+    multiple: false,
+    selectionToggleable: false,
+    buttons: [],
+    exact: false,
+    caseSensitive: false
+};
+function toggleButtonsFilter(data, values, options = DefaultToggleButtonsFilterOptions) {
+    if (!data || !values) {
+        return data;
+    }
+    const customComparatorBtns = [];
+    for (const btn of options.buttons) {
+        if (btn.comparator) {
+            customComparatorBtns.push(btn);
+        }
+    }
+    let _data = data;
+    for (const val of values) {
+        if (val === '') {
+            continue;
+        }
+        let cmp;
+        for (const btn of customComparatorBtns) {
+            if (btn.value === val) {
+                cmp = btn.comparator;
+            }
+        }
+        if (cmp) {
+            const filtered = [];
+            for (let i = 0; i < _data.length; i++) {
+                if (cmp(val, _data[i], i) !== -1) {
+                    filtered.push(_data[i]);
+                }
+            }
+            _data = filtered;
+        }
+        else {
+            _data = textDataFilter(_data, val, {
+                properties: options.properties,
+                omitProperties: options.omitProperties,
+                exact: options.exact,
+                caseSensitive: options.caseSensitive
+            });
+        }
+    }
+    return _data;
+}
+let _uid = 0;
+class DataFilterToggleButtonsComponent {
+    constructor(_filterContainer, _filterOptions) {
+        this._filterContainer = _filterContainer;
+        this._filterOptions = _filterOptions;
+        this.name = 'toggle-buttons';
+        this.uid = `toggle-buttons__${_uid++}`;
+        this._control = new FormControl();
+        this.properties = this._optDefault('properties');
+        this.omitProperties = this._optDefault('omitProperties');
+        this.multiple = this._optDefault('multiple');
+        this.selectionToggleable = this._optDefault('selectionToggleable');
+        this.buttons = this._optDefault('buttons');
+        this.exact = this._optDefault('exact');
+        this.caseSensitive = this._optDefault('caseSensitive');
+        this.filterStateChanges = this._control.valueChanges.pipe(tap(v => console.log('v', v)), switchMap(() => of(this.filterState())), tap(v => console.log('v2', v)), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    set value(value) {
+        const _value = !isNullOrUndefined(value) ? coerceArray(value) : undefined;
+        // console.log('_value', _value, this._control.value)
+        if (this._control.value !== _value) {
+            this._control.setValue(_value);
+        }
+    }
+    ngOnInit() {
+        this._filterContainer.addFilter(this);
+        if (this._filterOptions && hasProperty(this._filterOptions, 'initialValue')) {
+            this.value = this._optDefault('initialValue');
+        }
+    }
+    ngOnDestroy() { this._filterContainer.removeFilter(this); }
+    _optDefault(prop) {
+        if (this._filterOptions && this._filterOptions.hasOwnProperty(prop)) {
+            return this._filterOptions[prop];
+        }
+        return DefaultToggleButtonsFilterOptions[prop];
+    }
+    get options() {
+        return {
+            properties: this.properties,
+            omitProperties: this.omitProperties,
+            multiple: this.multiple,
+            selectionToggleable: this.selectionToggleable,
+            buttons: this.buttons,
+            exact: this.exact,
+            caseSensitive: this.caseSensitive
+        };
+    }
+    filter(data) {
+        return this._control.valueChanges
+            .pipe(map(v => toggleButtonsFilter(data, coerceArray(v), this.options)), startWith(toggleButtonsFilter(data, coerceArray(this._control.value), this.options)));
+    }
+    filterState() {
+        return {
+            // id:
+            name: this.name,
+            state: {
+                value: this._control.value,
+                options: this.options
+            }
+        };
+    }
+}
+DataFilterToggleButtonsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-data-filter-toggle-buttons',
+                template: "<div class=\"btn-group\" role=\"group\" aria-label=\"Progress Filter\"\n  *ngIf=\"options as opts\"\n  [formControl]=\"_control\"\n  seamToggleGroup\n  [multiple]=\"opts.multiple\"\n  [selectionToggleable]=\"opts.selectionToggleable\">\n  <ng-container *ngFor=\"let btn of buttons\">\n    <button type=\"button\" class=\"btn btn-sm px-4\"\n      [seamToggleGroupOption]=\"btn.value\"\n      #opt=\"seamToggleGroupOption\"\n      [class.btn-lightgray]=\"!opt.selected\"\n      [class.btn-primary]=\"opt.selected\"\n      (click)=\"opt.selected=!opt.selected\">\n      {{ btn.name || btn.value }}\n    </button>\n  </ng-container>\n</div>\n",
+                providers: [DATA_FILTER_TOGGLE_BUTTON],
+                styles: [""]
+            },] }
+];
+DataFilterToggleButtonsComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [THESEAM_DATA_FILTER_CONTAINER,] }] },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [THESEAM_DATA_FILTER_OPTIONS,] }] }
+];
+DataFilterToggleButtonsComponent.propDecorators = {
+    properties: [{ type: Input }],
+    omitProperties: [{ type: Input }],
+    multiple: [{ type: Input }],
+    selectionToggleable: [{ type: Input }],
+    buttons: [{ type: Input }],
+    exact: [{ type: Input }],
+    caseSensitive: [{ type: Input }],
+    value: [{ type: Input }]
+};
+
+const filterComponents = [
+    DataFilterSearchComponent,
+    DataFilterTextComponent,
+    DataFilterToggleButtonsComponent
+];
+const ɵ0 = { name: 'search', component: DataFilterSearchComponent }, ɵ1 = { name: 'text', component: DataFilterTextComponent }, ɵ2 = { name: 'toggle-buttons', component: DataFilterToggleButtonsComponent };
+const filterDefProviders = [
+    { provide: THESEAM_DATA_FILTER_DEF, useValue: ɵ0, multi: true },
+    { provide: THESEAM_DATA_FILTER_DEF, useValue: ɵ1, multi: true },
+    { provide: THESEAM_DATA_FILTER_DEF, useValue: ɵ2, multi: true },
+];
+class TheSeamDataFiltersModule {
+}
+TheSeamDataFiltersModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    ...filterComponents
+                ],
+                imports: [
+                    CommonModule,
+                    ReactiveFormsModule,
+                    TheSeamFormFieldModule,
+                    FontAwesomeModule,
+                    TheSeamToggleGroupModule,
+                    TheSeamIconModule
+                ],
+                providers: [
+                    ...filterDefProviders
+                ],
+                exports: [
+                    ...filterComponents
+                ],
+                entryComponents: [
+                    ...filterComponents
+                ]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DATA_FILTER_SEARCH, DATA_FILTER_TEXT, DATA_FILTER_TOGGLE_BUTTON, DataFilterSearchComponent, DataFilterTextComponent, DataFilterToggleButtonsComponent, DefaultSearchFilterOptions, DefaultTextFilterOptions, DefaultToggleButtonsFilterOptions, THESEAM_DATA_FILTER, THESEAM_DATA_FILTER_CONTAINER, THESEAM_DATA_FILTER_DEF, THESEAM_DATA_FILTER_OPTIONS, TheSeamDataFiltersModule, composeDataFilterStates, composeDataFilters, filterOperator, searchDataFilter, textDataFilter, toggleButtonsFilter };
+//# sourceMappingURL=theseam-ui-common-data-filters.js.map