@drsutphin/ngx-mat-facet-toolkit 1.0.0

package/fesm2022/drsutphin-ngx-mat-facet-toolkit.mjs

@@ -0,0 +1,1093 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Input, Directive, ViewChildren, Inject, Component, EventEmitter, HostListener, HostBinding, ViewChild, Injector, Injectable, makeEnvironmentProviders, Pipe, input, output, signal, inject, ViewContainerRef, computed, effect } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i9$1 from '@angular/material/autocomplete';
+import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import * as i6 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i14 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i7$1 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatNativeDateModule, MatOptionModule } from '@angular/material/core';
+import * as i13 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i11 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i12 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i10 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i8 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i15 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i4 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i7 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { A11yModule } from '@angular/cdk/a11y';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i1 from '@angular/cdk/portal';
+import { BasePortalOutlet, PortalModule, CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
+import { Subject, BehaviorSubject, of, fromEvent, isObservable } from 'rxjs';
+import { filter, tap, debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
+import * as i9 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import { trigger, transition, style, animate, state } from '@angular/animations';
+import { v4 } from 'uuid';
+
+var FacetDataType;
+(function (FacetDataType) {
+    FacetDataType["Text"] = "Text";
+    // eslint-disable-next-line id-blacklist
+    FacetDataType["Boolean"] = "Boolean";
+    FacetDataType["Category"] = "Category";
+    FacetDataType["CategorySingle"] = "CategorySingle";
+    FacetDataType["Date"] = "Date";
+    FacetDataType["DateRange"] = "DateRange";
+    FacetDataType["Typeahead"] = "Typeahead";
+    FacetDataType["TypeaheadSingle"] = "TypeaheadSingle";
+})(FacetDataType || (FacetDataType = {}));
+
+var FacetFilterType;
+(function (FacetFilterType) {
+    FacetFilterType["contains"] = "contains";
+    FacetFilterType["startsWith"] = "startsWith";
+    FacetFilterType["endsWith"] = "endsWith";
+    FacetFilterType["equal"] = "equal";
+    FacetFilterType["and"] = "and";
+    FacetFilterType["between"] = "between";
+    FacetFilterType["greaterThan"] = "greaterThan";
+    FacetFilterType["lessThan"] = "lessThan";
+    FacetFilterType["greaterThanOrEqual"] = "greaterThanOrEqual";
+    FacetFilterType["lessThanOrEqual"] = "lessThanOrEqual";
+})(FacetFilterType || (FacetFilterType = {}));
+
+var FacetIdentifierStrategy;
+(function (FacetIdentifierStrategy) {
+    FacetIdentifierStrategy["WindowURL"] = "windowURL";
+    FacetIdentifierStrategy["ParentID"] = "parentID";
+    FacetIdentifierStrategy["Random"] = "random";
+    FacetIdentifierStrategy["Manual"] = "manual";
+})(FacetIdentifierStrategy || (FacetIdentifierStrategy = {}));
+const DEFAULT_FACET_TOOLKIT_CONFIG = {
+    allowDebugClick: false,
+    identifierStrategy: FacetIdentifierStrategy.ParentID,
+    loggingCallback: () => { },
+    storage: 'session'
+};
+
+const FACET_MODAL_DATA = new InjectionToken('facet.data');
+
+var FacetResultType;
+(function (FacetResultType) {
+    FacetResultType[FacetResultType["REMOVE"] = 0] = "REMOVE";
+    FacetResultType[FacetResultType["CANCEL"] = 1] = "CANCEL";
+    FacetResultType[FacetResultType["ADD"] = 2] = "ADD";
+})(FacetResultType || (FacetResultType = {}));
+
+class FocusOnShowDirective {
+    el;
+    timeout = '0';
+    firstElement = true;
+    constructor(el) {
+        this.el = el;
+        if (!el.nativeElement.focus) {
+            throw new Error('Element does not accept focus.');
+        }
+    }
+    ngOnInit() {
+        if (this.firstElement) {
+            setTimeout(() => {
+                this.focusInput();
+            }, (Number(this.timeout) || 0));
+        }
+    }
+    focusInput() {
+        const input = this.el.nativeElement;
+        input.focus();
+        if (this.el.nativeElement.hasOwnProperty('select')) {
+            input.select();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FocusOnShowDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: FocusOnShowDirective, isStandalone: true, selector: "[focusOnShow]", inputs: { timeout: ["focusOnShow", "timeout"], firstElement: "firstElement" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FocusOnShowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[focusOnShow]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { timeout: [{
+                type: Input,
+                args: ['focusOnShow']
+            }], firstElement: [{
+                type: Input
+            }] } });
+
+class FacetModalRef {
+    overlayRef;
+    positionStrategy;
+    config;
+    afterClosedSubject = new Subject();
+    beforeClosedSubject = new Subject();
+    _result = { type: FacetResultType.CANCEL };
+    constructor(overlayRef, positionStrategy, config) {
+        this.overlayRef = overlayRef;
+        this.positionStrategy = positionStrategy;
+        this.config = config;
+        if (!config.disableClose) {
+            this.overlayRef.backdropClick().subscribe(() => {
+                this.close(this._result);
+            });
+            this.overlayRef.detachments().subscribe(() => {
+                this.beforeClosedSubject.next(this._result);
+                this.beforeClosedSubject.complete();
+            });
+            this.overlayRef.keydownEvents().pipe(filter(event => event.key === 'Escape')).subscribe(() => {
+                this.close();
+            });
+        }
+    }
+    close(dialogResult) {
+        if (!!dialogResult) {
+            this._result = dialogResult;
+        }
+        this.beforeClosedSubject.next(this._result);
+        this.beforeClosedSubject.complete();
+        this.afterClosedSubject.next(this._result);
+        this.afterClosedSubject.complete();
+        this.overlayRef.dispose();
+    }
+    afterClosed() {
+        return this.afterClosedSubject.asObservable();
+    }
+    beforeClosed() {
+        return this.beforeClosedSubject.asObservable();
+    }
+    positionChanges() {
+        return this.positionStrategy.positionChanges;
+    }
+}
+
+const MAX_TEXT_LENGTH = 60;
+class FacetDetailsModalComponent {
+    data;
+    modalRef;
+    typeAheadInputs;
+    isUpdate;
+    typeaheadText;
+    clearButtonDisabled = true;
+    resolvedOptions$;
+    FacetDataType = FacetDataType;
+    FacetFilterType = FacetFilterType;
+    typeAheadInputChanged = new BehaviorSubject('');
+    constructor(data, modalRef) {
+        this.data = data;
+        this.modalRef = modalRef;
+        this.isUpdate = modalRef.config.isUpdate;
+    }
+    ngOnInit() {
+        switch (this.data.type) {
+            case FacetDataType.Typeahead:
+            case FacetDataType.TypeaheadSingle:
+                if (this.data.typeahead?.provider) {
+                    this.resolvedOptions$ = this.data.typeahead.provider('');
+                }
+                break;
+            case FacetDataType.Date:
+                this.data.values = this.data.values?.length ? this.data.values : [{ value: null }];
+                break;
+            case FacetDataType.DateRange:
+                this.data.values = this.data.values?.length ? this.data.values : [{ value: null }, { value: null }];
+                break;
+            case FacetDataType.Boolean:
+                this.data.values = this.data.values?.length ? this.data.values : [{ value: null }];
+                break;
+            case FacetDataType.Text:
+                this.data.values = this.data.values?.length ? this.data.values : [{ value: '' }];
+                this.data.filterType = this.data.filterType || this.data.fixedFilterType || FacetFilterType.contains;
+                break;
+            default:
+                this.data.values = this.data.values?.length ? this.data.values : [{ value: null }];
+        }
+        if (!this.resolvedOptions$ && this.data.options) {
+            this.resolvedOptions$ = this.normalizeOptions(this.data.options);
+        }
+    }
+    ngAfterViewInit() {
+        if (this.typeAheadInputs.length > 0) {
+            this.typeAheadInputChanged.pipe(tap(() => this.resolvedOptions$ = undefined), debounceTime(this.data.typeahead?.debounce || 300)).subscribe(search => {
+                if (!!this.data.typeahead?.provider) {
+                    this.data.typeahead.provider((search || '')).subscribe(options => {
+                        this.resolvedOptions$ = of(options || []);
+                    });
+                }
+            });
+        }
+    }
+    typeaheadValueChanged(event) {
+        this.typeAheadInputChanged.next(event || '');
+        this.clearButtonDisabled = (!event || event.length === 0);
+    }
+    truncateText(txt) {
+        if (txt && txt.length) {
+            return txt.length > MAX_TEXT_LENGTH ?
+                `${txt.substring(0, MAX_TEXT_LENGTH).trim()}...` :
+                txt;
+        }
+        else {
+            return txt;
+        }
+    }
+    onOk() {
+        this.modalRef.close({
+            type: FacetResultType.ADD,
+            data: this.data
+        });
+    }
+    onRemove() {
+        this.modalRef.close({
+            type: FacetResultType.REMOVE,
+            data: this.data
+        });
+    }
+    onCancel() {
+        this.modalRef.close({
+            type: FacetResultType.CANCEL,
+        });
+    }
+    onClose() {
+        this.modalRef.close();
+    }
+    validateAndSubmit() {
+        if (!this.isUpdateButtonDisabled()) {
+            this.onOk();
+        }
+    }
+    isItemSelected = (option) => (this.data.values || []).some(o => o.value === option.value);
+    addOptionToSelected = (facet, option) => {
+        const isSelected = (facet.values || []).some(f => f.value === option.value);
+        if (isSelected && (facet.type === FacetDataType.Category || facet.type === FacetDataType.Typeahead)) {
+            facet.values = (facet.values || []).filter(f => f.value !== option.value);
+        }
+        else {
+            option.selected = true;
+            switch (facet.type) {
+                case FacetDataType.Category:
+                case FacetDataType.Typeahead:
+                    facet.values = (facet.values || []);
+                    facet.values.push(option);
+                    break;
+                case FacetDataType.CategorySingle:
+                case FacetDataType.TypeaheadSingle:
+                    facet.values = [option];
+                    break;
+            }
+        }
+    };
+    isUpdateButtonDisabled = () => {
+        switch (this.data.type) {
+            case FacetDataType.Category:
+            case FacetDataType.CategorySingle:
+            case FacetDataType.Date:
+            case FacetDataType.Text:
+            case FacetDataType.Typeahead:
+            case FacetDataType.TypeaheadSingle:
+                return !(this.data.values || []).some(v => !!v?.value);
+            case FacetDataType.DateRange:
+                return !(this.getRawValue(this.data)) || !(this.getRawValue(this.data, 1));
+            case FacetDataType.Boolean:
+                return !(this.getRawValue(this.data));
+        }
+    };
+    emptyFunction() { }
+    clearInput() {
+        this.typeaheadText = null;
+        this.typeaheadValueChanged('');
+    }
+    getRawValue(facet, offset) {
+        if (!!facet?.values?.length && facet.values[offset || 0]) {
+            return facet.values[offset || 0].value;
+        }
+        return null;
+    }
+    setValue(facet, newValue, offset) {
+        if (!!facet?.values?.length && facet.values[offset || 0]) {
+            facet.values[offset || 0] = {
+                ...facet.values[offset || 0],
+                value: newValue
+            };
+        }
+    }
+    setType(newType) {
+        this.data.filterType = newType;
+    }
+    normalizeOptions(options) {
+        return Array.isArray(options) ? of(options) : options;
+    }
+    selectionChange(selection, facet, options) {
+        selection.options
+            .map(selectedOption => (options || []).find(option => option.value === selectedOption.value))
+            .filter((option) => !!option)
+            .filter(facetOption => !(facet.values || []).find(v => v.value === facetOption.value))
+            .forEach(selectedOption => this.addOptionToSelected(facet, selectedOption));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FacetDetailsModalComponent, deps: [{ token: FACET_MODAL_DATA }, { token: FacetModalRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: FacetDetailsModalComponent, isStandalone: true, selector: "ngx-mat-facet-details-modal", viewQueries: [{ propertyName: "typeAheadInputs", predicate: ["typeAheadInput"], descendants: true }], ngImport: i0, template: "<div class=\"mat-typography details\">\n\n  <mat-toolbar color=\"primary\" class=\"modal-header\">\n    <h2 class=\"modal-title\">{{data.label}}</h2>\n    <button class=\"modal-close\" mat-icon-button (click)=\"onCancel()\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </mat-toolbar>\n\n  <div class=\"content\">\n\n    @if (data.description) {\n      <p class=\"description\">{{data.description}}</p>\n    }\n\n    <ng-template #loading>\n      <mat-spinner diameter=\"20\"></mat-spinner>\n    </ng-template>\n\n    <ng-template #noResults>\n      <span class=\"facet-no-results\" @fadeIn>No Results</span>\n    </ng-template>\n\n    @switch (true) {\n      @case (data.type === FacetDataType.Category || data.type === FacetDataType.CategorySingle) {\n        <div class=\"category-wrapper\">\n          @if (resolvedOptions$ | async; as options) {\n            <mat-divider></mat-divider>\n            @if (options.length > 0) {\n              <mat-selection-list (selectionChange)=\"selectionChange($event, data, options)\">\n                @for (item of options; track item.value) {\n                  <mat-list-option [value]=\"item.value\" [selected]=\"isItemSelected(item)\"\n                                   @fadeIn\n                                   focusOnShow\n                                   [firstElement]=\"$first\">\n                    <span>\n                      {{ item.label ? truncateText(item.label) : \"- empty -\" }}\n                      @if (item.count) {\n                        <small><i>({{item.count}})</i></small>\n                      }\n                    </span>\n                  </mat-list-option>\n                }\n              </mat-selection-list>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"noResults\"></ng-container>\n            }\n            <mat-divider></mat-divider>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n          }\n        </div>\n      }\n      @case (data.type === FacetDataType.Typeahead || data.type === FacetDataType.TypeaheadSingle) {\n        <div class=\"typeahead-wrapper\">\n\n          <mat-form-field class=\"typeahead-form-field\" appearance=\"outline\" floatLabel=\"auto\">\n            <mat-label>Search...</mat-label>\n            <input matInput #typeAheadInput\n                   autocomplete=\"off\"\n                   focusOnShow=\"100\"\n                   [(ngModel)]=\"typeaheadText\"\n                   placeholder=\"{{(data.typeahead || {placeholder: ''}).placeholder}}\"\n                   (ngModelChange)=\"typeaheadValueChanged($event)\"/>\n\n            @if (!clearButtonDisabled) {\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearInput()\">\n                <mat-icon>clear</mat-icon>\n              </button>\n            }\n          </mat-form-field>\n\n          @if (resolvedOptions$ | async; as options) {\n            <mat-divider></mat-divider>\n            @if (options.length > 0) {\n              <mat-selection-list (selectionChange)=\"selectionChange($event, data, options)\">\n                @for (item of options; track item.value) {\n                  <mat-list-option [value]=\"item.value\"\n                                   @fadeIn\n                                   focusOnShow\n                                   [firstElement]=\"$first\"\n                                   [selected]=\"isItemSelected(item)\">\n                    <span>\n                      {{ item.label ? truncateText(item.label) : \"- empty -\" }}\n                      @if (item.count) {\n                        <small><i>({{item.count}})</i></small>\n                      }\n                    </span>\n                  </mat-list-option>\n                }\n              </mat-selection-list>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"noResults\"></ng-container>\n            }\n            <mat-divider></mat-divider>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n          }\n\n        </div>\n      }\n      @case (data.type === FacetDataType.Date) {\n        <div class=\"date-wrapper\">\n\n          <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"date-field\">\n            <mat-label>{{data.label}}</mat-label>\n            <input matInput autocomplete=\"off\" focusOnShow=\"100\" [matDatepicker]=\"picker\" [ngModel]=\"getRawValue(data)\" (ngModelChange)=\"setValue(data, $event)\"\n                   placeholder=\"Choose a date\" (focus)=\"isUpdate ? emptyFunction() : picker.open()\"/>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n          </mat-form-field>\n          <mat-datepicker #picker></mat-datepicker>\n\n        </div>\n      }\n      @case (data.type === FacetDataType.DateRange) {\n        <div class=\"date-range-wrapper\">\n\n          <mat-form-field appearance=\"outline\" floatLabel=\"always\">\n            <mat-label>{{data.label}} - Start</mat-label>\n            <input matInput focusOnShow=\"100\" autocomplete=\"off\" [matDatepicker]=\"startDatePicker\"\n                   [ngModel]=\"getRawValue(data)\" (ngModelChange)=\"setValue(data, $event)\" placeholder=\"Choose a starting date\"\n                   (focus)=\"isUpdate ? emptyFunction() : startDatePicker.open()\"/>\n            <mat-datepicker-toggle matSuffix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          </mat-form-field>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n\n          <mat-form-field appearance=\"outline\" floatLabel=\"always\">\n            <mat-label>{{data.label}} - End</mat-label>\n            <input matInput autocomplete=\"off\" [matDatepicker]=\"endDatePicker\"\n                   [ngModel]=\"getRawValue(data, 1)\" (ngModelChange)=\"setValue(data, $event, 1)\" placeholder=\"Choose an end date\"/>\n            <mat-datepicker-toggle matSuffix [for]=\"endDatePicker\"></mat-datepicker-toggle>\n          </mat-form-field>\n          <mat-datepicker #endDatePicker></mat-datepicker>\n\n        </div>\n      }\n      @case (data.type === FacetDataType.Text) {\n        <div class=\"text-wrapper\">\n\n          <mat-form-field class=\"criteria-field\" appearance=\"outline\">\n            <mat-label>Criteria Type</mat-label>\n            <mat-select [value]=\"data.fixedFilterType || data.filterType\"\n                        (valueChange)=\"setType($event)\" placeholder=\"Criteria Type\">\n              <mat-option [value]=\"FacetFilterType.contains\">Contains</mat-option>\n              <mat-option [value]=\"FacetFilterType.endsWith\">Ends With</mat-option>\n              <mat-option [value]=\"FacetFilterType.equal\">Equals</mat-option>\n              <mat-option [value]=\"FacetFilterType.startsWith\">Starts With</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <mat-form-field class=\"search-field\" appearance=\"outline\">\n            <mat-label>Search Text</mat-label>\n            <input matInput focusOnShow (keydown.enter)=\"validateAndSubmit()\" autocomplete=\"off\"\n                   [ngModel]=\"getRawValue(data)\" (ngModelChange)=\"setValue(data, $event)\"\n                   placeholder=\"{{data.placeholder || data.label }}\" autofocus/>\n            @if (data.values) {\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"data.values = []\">\n                <mat-icon>close</mat-icon>\n              </button>\n            }\n          </mat-form-field>\n\n        </div>\n      }\n      @case (data.type === FacetDataType.Boolean) {\n        <div class=\"boolean-wrapper\">\n          <mat-checkbox [ngModel]=\"getRawValue(data)\" (ngModelChange)=\"setValue(data, $event)\">{{data.placeholder || data.label}}</mat-checkbox>\n        </div>\n      }\n    }\n\n  </div>\n\n  <div class=\"actions\">\n\n    <button mat-flat-button class=\"add-update-button\" [color]=\"isUpdate ? 'accent' : 'primary'\" (click)=\"onOk()\"\n            [disabled]=\"isUpdateButtonDisabled()\">{{isUpdate ? 'Update' : 'Add'}}</button>\n\n    @if (isUpdate) {\n      <button mat-icon-button class=\"remove-button\" color=\"warn\" (click)=\"onRemove()\" matTooltip=\"Delete Filter\" matTooltipPosition=\"after\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    }\n\n  </div>\n</div>\n", styles: ["mat-spinner{margin:1em auto}.details{display:flex;flex-direction:column;align-items:stretch}.content{min-height:120px;padding-top:22px;display:flex;flex-direction:column;align-items:normal}.content mat-selection-list{flex:1;max-height:30vh;overflow-y:auto}.actions{padding:16px;display:flex;justify-content:space-between;flex-direction:row-reverse}span.facet-no-results{text-align:center;color:gray;margin-top:1em;margin-bottom:1em}.mat-selection-list{margin-top:0;padding-top:0}.mat-form-field{margin:0!important;padding-left:15px;padding-right:15px}.mat-dialog-actions{padding:0 15px 15px}.modal-header{display:flex;justify-content:space-between;align-items:center!important;border-top-left-radius:8px;border-top-right-radius:8px}.modal-header .modal-title{height:40px!important;margin:0!important;line-height:45px}p.description{padding-left:15px;padding-right:15px;margin-bottom:0;color:gray;flex:1}.date-range-wrapper{padding-left:15px;padding-right:15px;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between}.date-range-wrapper,.category-wrapper{margin-top:1em}.boolean-wrapper{padding-left:15px;padding-right:15px;flex:4;display:flex;justify-content:flex-start;align-items:center}.text-wrapper{padding-left:15px;padding-right:15px;display:flex;flex-direction:column;flex:2;margin-top:1rem}.date-wrapper{padding-left:15px;padding-right:15px;display:flex;justify-content:center;align-items:center}.date-wrapper .date-field{flex:1}.typeahead-wrapper{padding-left:15px;padding-right:15px;display:flex;flex-direction:column;align-items:stretch;margin-top:1em}.typeahead-wrapper .typeahead-form-field{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i10.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i10.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i13.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i13.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i13.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i15.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: FocusOnShowDirective, selector: "[focusOnShow]", inputs: ["focusOnShow", "firstElement"] }], animations: [
+            trigger('fadeIn', [
+                transition(':enter', [
+                    style({ opacity: '0', height: 0 }),
+                    animate('.2s ease-out', style({ opacity: '1', height: '*' })),
+                ]),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FacetDetailsModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-facet-details-modal', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatToolbarModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        MatProgressSpinnerModule,
+                        MatDividerModule,
+                        MatListModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        MatCheckboxModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        FocusOnShowDirective
+                    ], animations: [
+                        trigger('fadeIn', [
+                            transition(':enter', [
+                                style({ opacity: '0', height: 0 }),
+                                animate('.2s ease-out', style({ opacity: '1', height: '*' })),
+                            ]),
+                        ]),
+                    ], template: "<div class=\"mat-typography details\">\n\n  <mat-toolbar color=\"primary\" class=\"modal-header\">\n    <h2 class=\"modal-title\">{{data.label}}</h2>\n    <button class=\"modal-close\" mat-icon-button (click)=\"onCancel()\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </mat-toolbar>\n\n  <div class=\"content\">\n\n    @if (data.description) {\n      <p class=\"description\">{{data.description}}</p>\n    }\n\n    <ng-template #loading>\n      <mat-spinner diameter=\"20\"></mat-spinner>\n    </ng-template>\n\n    <ng-template #noResults>\n      <span class=\"facet-no-results\" @fadeIn>No Results</span>\n    </ng-template>\n\n    @switch (true) {\n      @case (data.type === FacetDataType.Category || data.type === FacetDataType.CategorySingle) {\n        <div class=\"category-wrapper\">\n          @if (resolvedOptions$ | async; as options) {\n            <mat-divider></mat-divider>\n            @if (options.length > 0) {\n              <mat-selection-list (selectionChange)=\"selectionChange($event, data, options)\">\n                @for (item of options; track item.value) {\n                  <mat-list-option [value]=\"item.value\" [selected]=\"isItemSelected(item)\"\n                                   @fadeIn\n                                   focusOnShow\n                                   [firstElement]=\"$first\">\n                    <span>\n                      {{ item.label ? truncateText(item.label) : \"- empty -\" }}\n                      @if (item.count) {\n                        <small><i>({{item.count}})</i></small>\n                      }\n                    </span>\n                  </mat-list-option>\n                }\n              </mat-selection-list>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"noResults\"></ng-container>\n            }\n            <mat-divider></mat-divider>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n          }\n        </div>\n      }\n      @case (data.type === FacetDataType.Typeahead || data.type === FacetDataType.TypeaheadSingle) {\n        <div class=\"typeahead-wrapper\">\n\n          <mat-form-field class=\"typeahead-form-field\" appearance=\"outline\" floatLabel=\"auto\">\n            <mat-label>Search...</mat-label>\n            <input matInput #typeAheadInput\n                   autocomplete=\"off\"\n                   focusOnShow=\"100\"\n                   [(ngModel)]=\"typeaheadText\"\n                   placeholder=\"{{(data.typeahead || {placeholder: ''}).placeholder}}\"\n                   (ngModelChange)=\"typeaheadValueChanged($event)\"/>\n\n            @if (!clearButtonDisabled) {\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearInput()\">\n                <mat-icon>clear</mat-icon>\n              </button>\n            }\n          </mat-form-field>\n\n          @if (resolvedOptions$ | async; as options) {\n            <mat-divider></mat-divider>\n            @if (options.length > 0) {\n              <mat-selection-list (selectionChange)=\"selectionChange($event, data, options)\">\n                @for (item of options; track item.value) {\n                  <mat-list-option [value]=\"item.value\"\n                                   @fadeIn\n                                   focusOnShow\n                                   [firstElement]=\"$first\"\n                                   [selected]=\"isItemSelected(item)\">\n                    <span>\n                      {{ item.label ? truncateText(item.label) : \"- empty -\" }}\n                      @if (item.count) {\n                        <small><i>({{item.count}})</i></small>\n                      }\n                    </span>\n                  </mat-list-option>\n                }\n              </mat-selection-list>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"noResults\"></ng-container>\n            }\n            <mat-divider></mat-divider>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n          }\n\n        </div>\n      }\n      @case (data.type === FacetDataType.Date) {\n        <div class=\"date-wrapper\">\n\n          <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"date-field\">\n            <mat-label>{{data.label}}</mat-label>\n            <input matInput autocomplete=\"off\" focusOnShow=\"100\" [matDatepicker]=\"picker\" [ngModel]=\"getRawValue(data)\" (ngModelChange)=\"setValue(data, $event)\"\n                   placeholder=\"Choose a date\" (focus)=\"isUpdate ? emptyFunction() : picker.open()\"/>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n          </mat-form-field>\n          <mat-datepicker #picker></mat-datepicker>\n\n        </div>\n      }\n      @case (data.type === FacetDataType.DateRange) {\n        <div class=\"date-range-wrapper\">\n\n          <mat-form-field appearance=\"outline\" floatLabel=\"always\">\n            <mat-label>{{data.label}} - Start</mat-label>\n            <input matInput focusOnShow=\"100\" autocomplete=\"off\" [matDatepicker]=\"startDatePicker\"\n                   [ngModel]=\"getRawValue(data)\" (ngModelChange)=\"setValue(data, $event)\" placeholder=\"Choose a starting date\"\n                   (focus)=\"isUpdate ? emptyFunction() : startDatePicker.open()\"/>\n            <mat-datepicker-toggle matSuffix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          </mat-form-field>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n\n          <mat-form-field appearance=\"outline\" floatLabel=\"always\">\n            <mat-label>{{data.label}} - End</mat-label>\n            <input matInput autocomplete=\"off\" [matDatepicker]=\"endDatePicker\"\n                   [ngModel]=\"getRawValue(data, 1)\" (ngModelChange)=\"setValue(data, $event, 1)\" placeholder=\"Choose an end date\"/>\n            <mat-datepicker-toggle matSuffix [for]=\"endDatePicker\"></mat-datepicker-toggle>\n          </mat-form-field>\n          <mat-datepicker #endDatePicker></mat-datepicker>\n\n        </div>\n      }\n      @case (data.type === FacetDataType.Text) {\n        <div class=\"text-wrapper\">\n\n          <mat-form-field class=\"criteria-field\" appearance=\"outline\">\n            <mat-label>Criteria Type</mat-label>\n            <mat-select [value]=\"data.fixedFilterType || data.filterType\"\n                        (valueChange)=\"setType($event)\" placeholder=\"Criteria Type\">\n              <mat-option [value]=\"FacetFilterType.contains\">Contains</mat-option>\n              <mat-option [value]=\"FacetFilterType.endsWith\">Ends With</mat-option>\n              <mat-option [value]=\"FacetFilterType.equal\">Equals</mat-option>\n              <mat-option [value]=\"FacetFilterType.startsWith\">Starts With</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <mat-form-field class=\"search-field\" appearance=\"outline\">\n            <mat-label>Search Text</mat-label>\n            <input matInput focusOnShow (keydown.enter)=\"validateAndSubmit()\" autocomplete=\"off\"\n                   [ngModel]=\"getRawValue(data)\" (ngModelChange)=\"setValue(data, $event)\"\n                   placeholder=\"{{data.placeholder || data.label }}\" autofocus/>\n            @if (data.values) {\n              <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"data.values = []\">\n                <mat-icon>close</mat-icon>\n              </button>\n            }\n          </mat-form-field>\n\n        </div>\n      }\n      @case (data.type === FacetDataType.Boolean) {\n        <div class=\"boolean-wrapper\">\n          <mat-checkbox [ngModel]=\"getRawValue(data)\" (ngModelChange)=\"setValue(data, $event)\">{{data.placeholder || data.label}}</mat-checkbox>\n        </div>\n      }\n    }\n\n  </div>\n\n  <div class=\"actions\">\n\n    <button mat-flat-button class=\"add-update-button\" [color]=\"isUpdate ? 'accent' : 'primary'\" (click)=\"onOk()\"\n            [disabled]=\"isUpdateButtonDisabled()\">{{isUpdate ? 'Update' : 'Add'}}</button>\n\n    @if (isUpdate) {\n      <button mat-icon-button class=\"remove-button\" color=\"warn\" (click)=\"onRemove()\" matTooltip=\"Delete Filter\" matTooltipPosition=\"after\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    }\n\n  </div>\n</div>\n", styles: ["mat-spinner{margin:1em auto}.details{display:flex;flex-direction:column;align-items:stretch}.content{min-height:120px;padding-top:22px;display:flex;flex-direction:column;align-items:normal}.content mat-selection-list{flex:1;max-height:30vh;overflow-y:auto}.actions{padding:16px;display:flex;justify-content:space-between;flex-direction:row-reverse}span.facet-no-results{text-align:center;color:gray;margin-top:1em;margin-bottom:1em}.mat-selection-list{margin-top:0;padding-top:0}.mat-form-field{margin:0!important;padding-left:15px;padding-right:15px}.mat-dialog-actions{padding:0 15px 15px}.modal-header{display:flex;justify-content:space-between;align-items:center!important;border-top-left-radius:8px;border-top-right-radius:8px}.modal-header .modal-title{height:40px!important;margin:0!important;line-height:45px}p.description{padding-left:15px;padding-right:15px;margin-bottom:0;color:gray;flex:1}.date-range-wrapper{padding-left:15px;padding-right:15px;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between}.date-range-wrapper,.category-wrapper{margin-top:1em}.boolean-wrapper{padding-left:15px;padding-right:15px;flex:4;display:flex;justify-content:flex-start;align-items:center}.text-wrapper{padding-left:15px;padding-right:15px;display:flex;flex-direction:column;flex:2;margin-top:1rem}.date-wrapper{padding-left:15px;padding-right:15px;display:flex;justify-content:center;align-items:center}.date-wrapper .date-field{flex:1}.typeahead-wrapper{padding-left:15px;padding-right:15px;display:flex;flex-direction:column;align-items:stretch;margin-top:1em}.typeahead-wrapper .typeahead-form-field{flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FACET_MODAL_DATA]
+                }] }, { type: FacetModalRef }], propDecorators: { typeAheadInputs: [{
+                type: ViewChildren,
+                args: ['typeAheadInput']
+            }] } });
+
+const DefaultFacetModalConfig = {
+    backdropClass: '',
+    disableClose: false,
+    hasBackdrop: true,
+    panelClass: '',
+    isUpdate: false,
+};
+
+const facetModalAnimations = {
+    modalContainer: trigger('modalContainer', [
+        state('void, exit', style({ opacity: 0, transform: 'scale(0.7)' })),
+        state('enter', style({ transform: 'none' })),
+        transition('* => enter', animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'none', opacity: 1 }))),
+        transition('* => void, * => exit', animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 0 }))),
+    ])
+};
+
+class FacetModalComponent extends BasePortalOutlet {
+    portalOutlet;
+    hostClass = 'facet-modal-component';
+    state = 'enter';
+    animationStateChanged = new EventEmitter();
+    get animationState() {
+        return this.state;
+    }
+    _onAnimationDone({ toState, totalTime }) {
+        if (toState === 'enter') {
+            this.animationStateChanged.next({ state: 'opened', totalTime });
+        }
+        else if (toState === 'exit') {
+            this.animationStateChanged.next({ state: 'closed', totalTime });
+        }
+    }
+    _onAnimationStart({ toState, totalTime }) {
+        if (toState === 'enter') {
+            this.animationStateChanged.next({ state: 'opening', totalTime });
+        }
+        else if (toState === 'exit' || toState === 'void') {
+            this.animationStateChanged.next({ state: 'closing', totalTime });
+        }
+    }
+    attachComponentPortal(componentPortal) {
+        return this.portalOutlet.attachComponentPortal(componentPortal);
+    }
+    attachTemplatePortal(portal) {
+        throw new Error('Method not implemented.');
+    }
+    _startExitAnimation() {
+        this.state = 'exit';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FacetModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FacetModalComponent, isStandalone: true, selector: "ngx-facet-modal", host: { listeners: { "@modalContainer.done": "_onAnimationDone($event)", "@modalContainer.start": "_onAnimationStart($event)" }, properties: { "class": "this.hostClass", "@modalContainer": "this.animationState" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n<div class=\"arrow\"></div>\n", styles: [":host{position:relative;background:#fff;border-radius:8px;min-width:300px}.arrow{position:absolute;z-index:-1;width:20px;height:20px;top:-10px;left:24px;border-radius:4px;transform-origin:top left;transform:rotate(45deg)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [facetModalAnimations.modalContainer] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FacetModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-facet-modal', standalone: true, imports: [PortalModule], animations: [facetModalAnimations.modalContainer], template: "<ng-template cdkPortalOutlet></ng-template>\n<div class=\"arrow\"></div>\n", styles: [":host{position:relative;background:#fff;border-radius:8px;min-width:300px}.arrow{position:absolute;z-index:-1;width:20px;height:20px;top:-10px;left:24px;border-radius:4px;transform-origin:top left;transform:rotate(45deg)}\n"] }]
+        }], propDecorators: { portalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: true }]
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], animationState: [{
+                type: HostBinding,
+                args: ['@modalContainer']
+            }], _onAnimationDone: [{
+                type: HostListener,
+                args: ['@modalContainer.done', ['$event']]
+            }], _onAnimationStart: [{
+                type: HostListener,
+                args: ['@modalContainer.start', ['$event']]
+            }] } });
+
+class FacetModalService {
+    overlay;
+    injector;
+    constructor(overlay, injector) {
+        this.overlay = overlay;
+        this.injector = injector;
+    }
+    open(component, target, config = {}) {
+        const facetModalConfig = Object.assign({}, DefaultFacetModalConfig, config);
+        const offsetY = facetModalConfig.offsetY || 0;
+        const offsetX = facetModalConfig.offsetX || 0;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(target)
+            .withPush(false)
+            .withFlexibleDimensions(true)
+            .withPositions([
+            {
+                overlayX: 'start',
+                overlayY: 'top',
+                originX: 'start',
+                originY: 'center',
+                offsetX,
+                offsetY,
+            },
+        ]);
+        const overlayRef = this.overlay.create({
+            hasBackdrop: facetModalConfig.hasBackdrop ?? true,
+            backdropClass: facetModalConfig.backdropClass,
+            panelClass: facetModalConfig.panelClass,
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.block()
+        });
+        if (facetModalConfig.width) {
+            overlayRef.updateSize({ width: facetModalConfig.width });
+        }
+        const modalRef = new FacetModalRef(overlayRef, positionStrategy, facetModalConfig);
+        const injector = Injector.create({
+            providers: [
+                {
+                    provide: FACET_MODAL_DATA,
+                    useValue: config.data
+                },
+                {
+                    provide: FacetModalRef,
+                    useValue: modalRef
+                },
+            ],
+            parent: this.injector
+        });
+        const modal = overlayRef.attach(new ComponentPortal(FacetModalComponent, null, injector)).instance;
+        modal.attachComponentPortal(new ComponentPortal(component, null, injector));
+        return modalRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FacetModalService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FacetModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FacetModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.Injector }] });
+
+class VCRefInjector {
+    raw;
+    constructor(injector) {
+        this.raw = injector;
+    }
+    get parentIdentifier() {
+        const parent = this.parent;
+        if (!!parent) {
+            return parent.tagName.toLowerCase();
+        }
+        return null;
+    }
+    get parent() {
+        if (!!this.raw && this.raw._lView && this.raw._lView.length > 0) {
+            return this.raw._lView[0];
+        }
+        return null;
+    }
+}
+
+const chipAnimation = [
+    trigger('chipAnimation', [
+        state('in', style({
+            transform: 'translateX(0)',
+            opacity: 0,
+            position: 'absolute'
+        })),
+        transition('void => *', [
+            style({
+                transform: 'translateX(-100%)',
+                opacity: 1,
+                position: '*'
+            }),
+            animate('200ms ease-out')
+        ]),
+        transition('* => void', [
+            style({
+                position: 'absolute'
+            }),
+            animate('200ms ease-in', style({
+                transform: 'translateX(-100%)',
+                opacity: 0
+            }))
+        ])
+    ])
+];
+
+class FacetStorageService {
+    storageStrategy = 'session';
+    /**
+     * Update the loggingCallback function
+     */
+    updateLoggingCallback(loggingCallback) {
+        this.loggingCallback = loggingCallback;
+    }
+    /**
+     * Saves the selected facets to localStorage for our current identifier
+     */
+    updateSavedFacets(identifier, selectedFacets) {
+        if (!identifier) {
+            this.loggingCallback(`Cannot update ${this.mode}, no ID set`);
+            return;
+        }
+        if (this.storageStrategy === 'none') {
+            return;
+        }
+        this.loggingCallback(`Saving facets in ${this.mode} for component with ID`, identifier);
+        this.storageBackend?.setItem(identifier, JSON.stringify(selectedFacets));
+    }
+    /**
+     * Clears previously saved facets for this specific component
+     */
+    clearStorage(identifier) {
+        if (!identifier) {
+            return;
+        }
+        if (this.storageStrategy === 'none') {
+            return;
+        }
+        this.loggingCallback(`Clearing ${this.mode} for ID`, identifier);
+        this.storageBackend?.removeItem(identifier);
+    }
+    /**
+     * Loads facets from storage for our current identifier
+     */
+    loadFacetsFromStorage(identifier) {
+        let sessionFacets = [];
+        if (this.storageStrategy === 'none') {
+            return [];
+        }
+        if (!!identifier && !this.checkStorage(identifier)) {
+            sessionFacets = JSON.parse(this.storageBackend?.getItem(identifier) || '[]');
+            sessionFacets = (sessionFacets || []);
+            this.loggingCallback('Loaded facets for component with ID', identifier, sessionFacets);
+        }
+        else if (!identifier) {
+            this.loggingCallback('No identifier set on this component');
+        }
+        else if (this.checkStorage(identifier)) {
+            this.loggingCallback(`No ${this.mode} variable set for component with ID`, identifier, localStorage.getItem(identifier));
+        }
+        return sessionFacets;
+    }
+    loggingCallback = () => {
+    };
+    updateStorageStrategy(strategy) {
+        this.storageStrategy = strategy;
+    }
+    get mode() {
+        if (this.storageStrategy === 'none') {
+            return 'none';
+        }
+        return (this.storageStrategy === 'local' ? 'localStorage' : 'sessionStorage');
+    }
+    checkStorage(key) {
+        return !this.storageBackend?.getItem(key);
+    }
+    get storageBackend() {
+        if (this.storageStrategy === 'none') {
+            return null;
+        }
+        return this.storageStrategy === 'local' ? localStorage : sessionStorage;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FacetStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FacetStorageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FacetStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+const FACET_TOOLKIT_CONFIG = new InjectionToken('Facet Toolkit Configuration', {
+    providedIn: 'root',
+    factory: () => DEFAULT_FACET_TOOLKIT_CONFIG
+});
+const provideFacetToolkitConfig = (config) => makeEnvironmentProviders([
+    {
+        provide: FACET_TOOLKIT_CONFIG,
+        useValue: {
+            ...DEFAULT_FACET_TOOLKIT_CONFIG,
+            ...config
+        }
+    }
+]);
+
+class CSVPipe {
+    transform(value, objectKeyName, separator) {
+        return value.map(e => objectKeyName ? e[objectKeyName] : e).join(separator || ',');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CSVPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: CSVPipe, isStandalone: true, name: "csv", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CSVPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'csv',
+                    standalone: true,
+                    pure: false
+                }]
+        }] });
+
+class FilterPipe {
+    transform(objectArray, fieldName, fieldValue) {
+        return objectArray.filter(obj => obj[fieldName] === fieldValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: FilterPipe, isStandalone: true, name: "filter", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FilterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filter',
+                    standalone: true,
+                    pure: false
+                }]
+        }] });
+
+class KeysPipe {
+    transform(value) {
+        return Object.keys(value).map(k => ({ key: k, value: k }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KeysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: KeysPipe, isStandalone: true, name: "keys", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KeysPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'keys',
+                    standalone: true,
+                    pure: false
+                }]
+        }] });
+
+class NgxMatFacetToolkitComponent {
+    facets = input([]);
+    config = input({});
+    placeholder = input('Filter Table...');
+    clearButtonText = input('Clear Filters');
+    clearButtonEnabled = input(true);
+    dateFormat = input('M/d/yyyy');
+    tooltip = input(null);
+    displayFilterIcon = input(true);
+    facetWidth = input('400px');
+    facetHasBackdrop = input(true);
+    confirmOnRemove = input(true);
+    chipLabelsEnabled = input(true);
+    identifier = input(null);
+    facetChange = output();
+    facetRemoved = output();
+    facetReset = output();
+    filterInput;
+    inputAutoComplete;
+    FacetDataType = FacetDataType;
+    FacetFilterType = FacetFilterType;
+    selectedFacetId = signal(null);
+    filterText = signal('');
+    injectedConfig = inject(FACET_TOOLKIT_CONFIG);
+    storageService = inject(FacetStorageService);
+    modal = inject(FacetModalService);
+    vcRef = inject(ViewContainerRef);
+    identifierStrategy = signal(FacetIdentifierStrategy.ParentID);
+    resolvedIdentifier = signal(null);
+    allowDebugClick = signal(false);
+    loggingCallback = signal(() => { });
+    timeoutHandler = null;
+    injectorRef = new VCRefInjector(this.vcRef.injector);
+    selectedFacets = signal([]);
+    facetDefinitions = computed(() => this.facets() || []);
+    selectedFacetViews = computed(() => this.selectedFacets()
+        .map(selection => this.toEditorState(selection))
+        .filter((facet) => !!facet));
+    availableFacets = computed(() => {
+        const selectedIds = new Set(this.selectedFacets().map(selection => selection.id));
+        return this.facetDefinitions().filter(facet => !selectedIds.has(facet.id));
+    });
+    filteredFacets = computed(() => {
+        const filterText = this.filterText().toLowerCase();
+        if (!filterText) {
+            return this.availableFacets();
+        }
+        return this.availableFacets().filter(facet => facet.label.toLowerCase().includes(filterText));
+    });
+    constructor() {
+        effect(() => {
+            this.identifier();
+            const config = {
+                ...DEFAULT_FACET_TOOLKIT_CONFIG,
+                ...this.injectedConfig,
+                ...this.config()
+            };
+            this.allowDebugClick.set(config.allowDebugClick);
+            this.identifierStrategy.set(config.identifierStrategy);
+            this.loggingCallback.set(config.loggingCallback);
+            this.storageService.updateLoggingCallback(config.loggingCallback);
+            this.storageService.updateStorageStrategy(config.storage);
+            this.resolveIdentity();
+        });
+        effect(() => {
+            const facets = this.facetDefinitions();
+            const identifier = this.resolvedIdentifier();
+            this.refreshSelectionsFromFacets(facets, identifier);
+        });
+        effect(() => {
+            const selections = this.selectedFacets();
+            this.facetChange.emit(selections);
+        });
+    }
+    static getFixedURL() {
+        return window.location.pathname.toString()
+            .replace(/\s+/g, '-')
+            .replace(/\//g, '-')
+            .replace(/^-/g, '')
+            .replace(/--/g, '-');
+    }
+    ngAfterViewInit() {
+        fromEvent(this.filterInput.nativeElement, 'keyup')
+            .pipe(filter(Boolean), debounceTime(150), distinctUntilChanged(), map(() => this.filterInput.nativeElement.value))
+            .subscribe((text) => {
+            this.filterText.set(text || '');
+        });
+    }
+    chipSelected(event, facet) {
+        if (event.selected && !facet.readonly) {
+            const elementRef = event.source._elementRef.nativeElement;
+            this.facetSelected(facet, {
+                top: (elementRef.clientHeight - 5),
+                left: -3,
+            }, true, elementRef);
+        }
+    }
+    autoCompleteDisplay(_) {
+        return '';
+    }
+    autoCompleteSelected(event) {
+        const selectedFacet = event.option.value;
+        const parentElement = this.filterInput.nativeElement;
+        if (!!parentElement) {
+            const elementRef = parentElement.getBoundingClientRect();
+            const top = elementRef.height - 3;
+            const left = -38;
+            const editorState = this.toEditorState(this.toSelection(selectedFacet, [])) || {
+                ...selectedFacet,
+                values: [],
+                options: this.normalizeOptions(selectedFacet.options)
+            };
+            this.facetSelected(editorState, { top, left }, false, this.filterInput);
+            this.filterInput.nativeElement.value = '';
+            this.filterText.set('');
+        }
+    }
+    facetSelected(facet, position, isUpdate, target) {
+        this.promptFacet({ ...facet }, position, isUpdate, target);
+    }
+    promptFacet(facet, position, isUpdate, target) {
+        const facetDetailsModal = this.modal.open(FacetDetailsModalComponent, target, {
+            data: facet,
+            offsetY: position.top,
+            offsetX: position.left,
+            isUpdate,
+            hasBackdrop: this.facetHasBackdrop(),
+            width: this.facetWidth()
+        });
+        facetDetailsModal.beforeClosed().subscribe(() => {
+            this.selectedFacetId.set(null);
+        });
+        facetDetailsModal.afterClosed().subscribe(result => {
+            if (result.type === FacetResultType.REMOVE && result.data) {
+                this.removeFacet(result.data);
+            }
+            else if (result.type === FacetResultType.ADD && result.data) {
+                this.addOrUpdateFacet(result.data);
+            }
+        });
+    }
+    addOrUpdateFacet(facet) {
+        const selection = this.toSelection(facet, facet.values, facet.filterType);
+        const nextSelections = this.selectedFacets()
+            .filter(existing => existing.id !== selection.id)
+            .concat(selection);
+        this.selectedFacets.set(nextSelections);
+        this.storageService.updateSavedFacets(this.resolvedIdentifier(), nextSelections);
+    }
+    removeFacet(facet) {
+        if (!this.confirmOnRemove() || (this.confirmOnRemove() && confirm(`Do you really want to remove "${facet.label}" filter?`))) {
+            const updatedSelections = this.selectedFacets().filter(selection => selection.id !== facet.id);
+            this.selectedFacets.set(updatedSelections);
+            this.storageService.updateSavedFacets(this.resolvedIdentifier(), updatedSelections);
+            this.facetRemoved.emit(this.toSelection(facet, facet.values, facet.filterType));
+            return true;
+        }
+        return false;
+    }
+    reset() {
+        const readonlySelections = this.facetDefinitions()
+            .filter(facet => facet.readonly && (facet.defaultValues || []).length > 0)
+            .map(facet => this.toSelection(facet, facet.defaultValues || []));
+        this.selectedFacets.set(readonlySelections);
+        this.storageService.clearStorage(this.resolvedIdentifier());
+        this.facetReset.emit();
+    }
+    focus(event) {
+        event.stopPropagation();
+        this.inputAutoComplete.openPanel();
+    }
+    getValue(facet, offset) {
+        if (!!facet?.values?.length && facet.values[offset || 0]?.value !== undefined) {
+            return facet.values[offset || 0];
+        }
+        return null;
+    }
+    getRawValue(facet, offset) {
+        const value = this.getValue(facet, offset);
+        return value ? value.value : null;
+    }
+    getDateValue(facet, offset) {
+        const value = this.getRawValue(facet, offset);
+        if (value instanceof Date || typeof value === 'string' || typeof value === 'number') {
+            return value;
+        }
+        return null;
+    }
+    setValue(facet, newValue, offset) {
+        if (!!facet?.values?.length && facet.values[offset || 0]) {
+            facet.values[offset || 0] = {
+                ...facet.values[offset || 0],
+                value: newValue
+            };
+        }
+    }
+    identify(identifier) {
+        this.loggingCallback()(`Identifying facet with ID: ${identifier}`);
+        if (!identifier || identifier.length === 0 || identifier === '-') {
+            this.resolvedIdentifier.set('default-facet');
+        }
+        else {
+            this.resolvedIdentifier.set(`${identifier}-facet`);
+        }
+    }
+    getIdentifierStrategy() {
+        return this.identifierStrategy();
+    }
+    printIdentity() {
+        console.log(this.resolvedIdentifier());
+    }
+    clickStarted() {
+        if (!this.allowDebugClick()) {
+            return;
+        }
+        this.timeoutHandler = setTimeout(() => {
+            this.printIdentity();
+            this.timeoutHandler = null;
+        }, 1000);
+    }
+    clickEnded() {
+        if (this.timeoutHandler) {
+            clearTimeout(this.timeoutHandler);
+            this.timeoutHandler = null;
+        }
+    }
+    resolveIdentity(manual) {
+        const identifierInput = manual ?? this.identifier();
+        let identity;
+        this.loggingCallback()('Generating ID with strategy', this.identifierStrategy());
+        switch (this.identifierStrategy()) {
+            case FacetIdentifierStrategy.WindowURL:
+                identity = NgxMatFacetToolkitComponent.getFixedURL();
+                break;
+            case FacetIdentifierStrategy.ParentID:
+                identity = this.injectorRef.parentIdentifier;
+                break;
+            case FacetIdentifierStrategy.Random:
+                identity = v4();
+                break;
+            default:
+                identity = identifierInput;
+                break;
+        }
+        this.identify(identity);
+    }
+    refreshSelectionsFromFacets(facets, identifier) {
+        if (!facets.length) {
+            this.selectedFacets.set([]);
+            return;
+        }
+        const storedSelections = this.storageService.loadFacetsFromStorage(identifier);
+        const storedById = new Map(storedSelections.map(selection => [selection.id, selection]));
+        const nextSelections = facets
+            .map(facet => {
+            const stored = storedById.get(facet.id);
+            if (stored) {
+                return stored;
+            }
+            if (facet.defaultValues && facet.defaultValues.length > 0) {
+                return this.toSelection(facet, facet.defaultValues);
+            }
+            return null;
+        })
+            .filter((selection) => !!selection);
+        this.selectedFacets.set(nextSelections);
+    }
+    toSelection(facet, values, filterType) {
+        return {
+            id: facet.id,
+            type: facet.type,
+            filterType: this.resolveFilterType(facet, filterType),
+            values: values || []
+        };
+    }
+    resolveFilterType(facet, filterType) {
+        if (filterType) {
+            return filterType;
+        }
+        if (facet.fixedFilterType) {
+            return facet.fixedFilterType;
+        }
+        switch (facet.type) {
+            case FacetDataType.Date:
+            case FacetDataType.Boolean:
+                return FacetFilterType.equal;
+            case FacetDataType.DateRange:
+                return FacetFilterType.between;
+            case FacetDataType.CategorySingle:
+            case FacetDataType.TypeaheadSingle:
+                return FacetFilterType.equal;
+            case FacetDataType.Text:
+            case FacetDataType.Category:
+            case FacetDataType.Typeahead:
+            default:
+                return FacetFilterType.contains;
+        }
+    }
+    toEditorState(selection) {
+        const facet = this.facetDefinitions().find(definition => definition.id === selection.id);
+        if (!facet) {
+            return null;
+        }
+        return {
+            ...facet,
+            values: selection.values,
+            filterType: selection.filterType,
+            options: this.normalizeOptions(facet.options)
+        };
+    }
+    normalizeOptions(options) {
+        if (!options) {
+            return undefined;
+        }
+        return isObservable(options) ? options : of(options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NgxMatFacetToolkitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: NgxMatFacetToolkitComponent, isStandalone: true, selector: "ngx-mat-facet-toolkit", inputs: { facets: { classPropertyName: "facets", publicName: "facets", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearButtonText: { classPropertyName: "clearButtonText", publicName: "clearButtonText", isSignal: true, isRequired: false, transformFunction: null }, clearButtonEnabled: { classPropertyName: "clearButtonEnabled", publicName: "clearButtonEnabled", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, displayFilterIcon: { classPropertyName: "displayFilterIcon", publicName: "displayFilterIcon", isSignal: true, isRequired: false, transformFunction: null }, facetWidth: { classPropertyName: "facetWidth", publicName: "facetWidth", isSignal: true, isRequired: false, transformFunction: null }, facetHasBackdrop: { classPropertyName: "facetHasBackdrop", publicName: "facetHasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, confirmOnRemove: { classPropertyName: "confirmOnRemove", publicName: "confirmOnRemove", isSignal: true, isRequired: false, transformFunction: null }, chipLabelsEnabled: { classPropertyName: "chipLabelsEnabled", publicName: "chipLabelsEnabled", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { facetChange: "facetChange", facetRemoved: "facetRemoved", facetReset: "facetReset" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "inputAutoComplete", first: true, predicate: MatAutocompleteTrigger, descendants: true, read: MatAutocompleteTrigger }], ngImport: i0, template: "<div class=\"main-facet-wrapper\">\n\n  @if (displayFilterIcon()) {\n    <div class=\"icon-wrapper\">\n      @if (tooltip() !== null) {\n        <mat-icon class=\"filter-list-icon\" (mousedown)=\"clickStarted()\" (mouseup)=\"clickEnded()\" (mouseleave)=\"clickEnded()\" [matTooltip]=\"tooltip()\">filter_list</mat-icon>\n      } @else {\n        <mat-icon class=\"filter-list-icon\" (mousedown)=\"clickStarted()\" (mouseup)=\"clickEnded()\" (mouseleave)=\"clickEnded()\">filter_list</mat-icon>\n      }\n    </div>\n  }\n\n  <div class=\"content-wrapper\">\n\n    <mat-chip-grid #chipList>\n\n      @for (facet of selectedFacetViews(); track facet.id) {\n        <mat-chip-option @chipAnimation [color]=\"facet.readonly ? 'accent' : undefined\"\n                         class=\"facet-chip\"\n                         (selectionChange)=\"chipSelected($event, facet)\" (click)=\"selectedFacetId.set(facet.id)\"\n                         [selected]=\"facet.id === selectedFacetId()\"\n                         matTooltip=\"{{facet.label + (facet.description ? ': ' + facet.description : '')}}\"\n                         matTooltipShowDelay=\"1000\">\n          <span class=\"flex-facet\">\n\n            @if (facet.icon) {\n              <mat-icon class=\"inline-chip-icon\">{{facet.icon}}</mat-icon>\n            }\n\n            @if (chipLabelsEnabled()) {\n              <span>{{ facet.label + ': &nbsp;'}}</span>\n            }\n\n            @switch (facet.type) {\n              @case (FacetDataType.Category) {\n                {{facet.values | csv:'label':' / '}}\n              }\n              @case (FacetDataType.CategorySingle) {\n                {{facet.values | csv:'label':' / '}}\n              }\n              @case (FacetDataType.Typeahead) {\n                {{facet.values | csv:'label':' / '}}\n              }\n              @case (FacetDataType.TypeaheadSingle) {\n                {{facet.values | csv:'label':' / '}}\n              }\n              @case (FacetDataType.Date) {\n                \u201C{{getDateValue(facet) | date:dateFormat()}}\u201D\n              }\n              @case (FacetDataType.DateRange) {\n                \u201C{{getDateValue(facet) | date:dateFormat()}}\u201D ~ \u201C{{getDateValue(facet, 1) | date:dateFormat()}}\u201D\n              }\n              @case (FacetDataType.Boolean) {\n                <mat-checkbox [disabled]=\"true\" class=\"inline-chip-checkbox\" [ngModel]=\"getRawValue(facet)\" (ngModelChange)=\"setValue(facet, $event)\">\n                  {{facet.label}}\n                </mat-checkbox>\n              }\n              @case (FacetDataType.Text) {\n                @switch (facet.filterType) {\n                  @case (FacetFilterType.contains) {\n                    \u201C..{{getRawValue(facet)}}..\u201D\n                  }\n                  @case (FacetFilterType.equal) {\n                    \u201C{{getRawValue(facet)}}\u201D\n                  }\n                  @case (FacetFilterType.startsWith) {\n                    \u201C{{getRawValue(facet)}}...\u201D\n                  }\n                  @case (FacetFilterType.endsWith) {\n                    \u201C...{{getRawValue(facet)}}\u201D\n                  }\n                }\n              }\n            }\n\n            @if (!facet.readonly) {\n              <mat-icon matChipRemove (click)=\"removeFacet(facet)\">cancel</mat-icon>\n            }\n\n          </span>\n\n        </mat-chip-option>\n      }\n\n      <mat-chip-row class=\"filter-input-container\" disableRipple=\"true\" disabled=\"true\" @chipAnimation>\n\n        <span class=\"flex-facet-autocomplete\">\n\n          <mat-icon class=\"add-icon\" (click)=\"focus($event)\">add</mat-icon>\n\n          <input #filterInput [matChipInputFor]=\"chipList\" class=\"filter-input\" [placeholder]=\"placeholder()\"\n                 [matChipInputAddOnBlur]=\"false\" [matAutocomplete]=\"auto\">\n\n          <mat-autocomplete #auto=\"matAutocomplete\" class=\"mat-facet-autocomplete\" (optionSelected)=\"autoCompleteSelected($event)\"\n                            [displayWith]=\"autoCompleteDisplay\" panelWidth=\"250px\">\n            @for (facet of filteredFacets(); track facet.id) {\n              <mat-option [value]=\"facet\">\n                @if (facet.icon) {\n                  <mat-icon>{{facet.icon}}</mat-icon>\n                }\n                <span>{{ facet.label }}</span>\n              </mat-option>\n            }\n          </mat-autocomplete>\n\n        </span>\n\n      </mat-chip-row>\n\n    </mat-chip-grid>\n\n  </div>\n\n\n  @if (clearButtonEnabled() && selectedFacets().length > 0) {\n    <button mat-flat-button (click)=\"reset()\" color=\"accent\">\n      {{clearButtonText()}}\n    </button>\n  }\n\n</div>\n", styles: ["*{outline:0}.filter-input-container{background-color:transparent!important;opacity:1!important;box-shadow:none!important}.filter-input-container .filter-input{border:none!important;background:none!important;width:85px;font-size:14px!important;font-weight:400;text-align:right;position:relative;top:-7px;margin-left:2px}::placeholder{color:#000000db;opacity:1}.inline-chip-icon{width:18px;height:18px;font-size:18px;margin-right:7px;margin-left:0}:host-context .mat-checkbox-inner-container{transform:scale(.7)}:host-context(.inlineChipCheckbox) label.mat-checkbox-layout div.mat-checkbox-inner-container{transform:scale(.7)}.add-icon{margin-top:8px}.add-icon:hover,.filter-input-container:hover{cursor:pointer}.main-facet-wrapper{min-height:36px;display:flex;align-items:center}.main-facet-wrapper .icon-wrapper{height:100%;display:flex;justify-content:center;align-items:center;margin-right:20px}::ng-deep .mat-autocomplete-panel.mat-autocomplete-visible{left:-40px!important;top:15px!important}::ng-deep .mat-chip-list-wrapper{transition:width .3s ease-in-out}.content-wrapper{flex:1}.flex-facet{display:flex;align-items:center}.flex-facet-autocomplete{justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i15.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i7$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i9$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "pipe", type: CSVPipe, name: "csv" }], animations: [
+            chipAnimation
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NgxMatFacetToolkitComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-facet-toolkit', standalone: true, imports: [
+                        A11yModule,
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatIconModule,
+                        MatToolbarModule,
+                        MatProgressBarModule,
+                        MatListModule,
+                        MatFormFieldModule,
+                        MatDatepickerModule,
+                        MatOptionModule,
+                        MatSelectModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatInputModule,
+                        MatChipsModule,
+                        MatTooltipModule,
+                        MatAutocompleteModule,
+                        MatNativeDateModule,
+                        MatProgressSpinnerModule,
+                        OverlayModule,
+                        PortalModule,
+                        CSVPipe,
+                        FilterPipe,
+                        KeysPipe,
+                        FocusOnShowDirective
+                    ], animations: [
+                        chipAnimation
+                    ], template: "<div class=\"main-facet-wrapper\">\n\n  @if (displayFilterIcon()) {\n    <div class=\"icon-wrapper\">\n      @if (tooltip() !== null) {\n        <mat-icon class=\"filter-list-icon\" (mousedown)=\"clickStarted()\" (mouseup)=\"clickEnded()\" (mouseleave)=\"clickEnded()\" [matTooltip]=\"tooltip()\">filter_list</mat-icon>\n      } @else {\n        <mat-icon class=\"filter-list-icon\" (mousedown)=\"clickStarted()\" (mouseup)=\"clickEnded()\" (mouseleave)=\"clickEnded()\">filter_list</mat-icon>\n      }\n    </div>\n  }\n\n  <div class=\"content-wrapper\">\n\n    <mat-chip-grid #chipList>\n\n      @for (facet of selectedFacetViews(); track facet.id) {\n        <mat-chip-option @chipAnimation [color]=\"facet.readonly ? 'accent' : undefined\"\n                         class=\"facet-chip\"\n                         (selectionChange)=\"chipSelected($event, facet)\" (click)=\"selectedFacetId.set(facet.id)\"\n                         [selected]=\"facet.id === selectedFacetId()\"\n                         matTooltip=\"{{facet.label + (facet.description ? ': ' + facet.description : '')}}\"\n                         matTooltipShowDelay=\"1000\">\n          <span class=\"flex-facet\">\n\n            @if (facet.icon) {\n              <mat-icon class=\"inline-chip-icon\">{{facet.icon}}</mat-icon>\n            }\n\n            @if (chipLabelsEnabled()) {\n              <span>{{ facet.label + ': &nbsp;'}}</span>\n            }\n\n            @switch (facet.type) {\n              @case (FacetDataType.Category) {\n                {{facet.values | csv:'label':' / '}}\n              }\n              @case (FacetDataType.CategorySingle) {\n                {{facet.values | csv:'label':' / '}}\n              }\n              @case (FacetDataType.Typeahead) {\n                {{facet.values | csv:'label':' / '}}\n              }\n              @case (FacetDataType.TypeaheadSingle) {\n                {{facet.values | csv:'label':' / '}}\n              }\n              @case (FacetDataType.Date) {\n                \u201C{{getDateValue(facet) | date:dateFormat()}}\u201D\n              }\n              @case (FacetDataType.DateRange) {\n                \u201C{{getDateValue(facet) | date:dateFormat()}}\u201D ~ \u201C{{getDateValue(facet, 1) | date:dateFormat()}}\u201D\n              }\n              @case (FacetDataType.Boolean) {\n                <mat-checkbox [disabled]=\"true\" class=\"inline-chip-checkbox\" [ngModel]=\"getRawValue(facet)\" (ngModelChange)=\"setValue(facet, $event)\">\n                  {{facet.label}}\n                </mat-checkbox>\n              }\n              @case (FacetDataType.Text) {\n                @switch (facet.filterType) {\n                  @case (FacetFilterType.contains) {\n                    \u201C..{{getRawValue(facet)}}..\u201D\n                  }\n                  @case (FacetFilterType.equal) {\n                    \u201C{{getRawValue(facet)}}\u201D\n                  }\n                  @case (FacetFilterType.startsWith) {\n                    \u201C{{getRawValue(facet)}}...\u201D\n                  }\n                  @case (FacetFilterType.endsWith) {\n                    \u201C...{{getRawValue(facet)}}\u201D\n                  }\n                }\n              }\n            }\n\n            @if (!facet.readonly) {\n              <mat-icon matChipRemove (click)=\"removeFacet(facet)\">cancel</mat-icon>\n            }\n\n          </span>\n\n        </mat-chip-option>\n      }\n\n      <mat-chip-row class=\"filter-input-container\" disableRipple=\"true\" disabled=\"true\" @chipAnimation>\n\n        <span class=\"flex-facet-autocomplete\">\n\n          <mat-icon class=\"add-icon\" (click)=\"focus($event)\">add</mat-icon>\n\n          <input #filterInput [matChipInputFor]=\"chipList\" class=\"filter-input\" [placeholder]=\"placeholder()\"\n                 [matChipInputAddOnBlur]=\"false\" [matAutocomplete]=\"auto\">\n\n          <mat-autocomplete #auto=\"matAutocomplete\" class=\"mat-facet-autocomplete\" (optionSelected)=\"autoCompleteSelected($event)\"\n                            [displayWith]=\"autoCompleteDisplay\" panelWidth=\"250px\">\n            @for (facet of filteredFacets(); track facet.id) {\n              <mat-option [value]=\"facet\">\n                @if (facet.icon) {\n                  <mat-icon>{{facet.icon}}</mat-icon>\n                }\n                <span>{{ facet.label }}</span>\n              </mat-option>\n            }\n          </mat-autocomplete>\n\n        </span>\n\n      </mat-chip-row>\n\n    </mat-chip-grid>\n\n  </div>\n\n\n  @if (clearButtonEnabled() && selectedFacets().length > 0) {\n    <button mat-flat-button (click)=\"reset()\" color=\"accent\">\n      {{clearButtonText()}}\n    </button>\n  }\n\n</div>\n", styles: ["*{outline:0}.filter-input-container{background-color:transparent!important;opacity:1!important;box-shadow:none!important}.filter-input-container .filter-input{border:none!important;background:none!important;width:85px;font-size:14px!important;font-weight:400;text-align:right;position:relative;top:-7px;margin-left:2px}::placeholder{color:#000000db;opacity:1}.inline-chip-icon{width:18px;height:18px;font-size:18px;margin-right:7px;margin-left:0}:host-context .mat-checkbox-inner-container{transform:scale(.7)}:host-context(.inlineChipCheckbox) label.mat-checkbox-layout div.mat-checkbox-inner-container{transform:scale(.7)}.add-icon{margin-top:8px}.add-icon:hover,.filter-input-container:hover{cursor:pointer}.main-facet-wrapper{min-height:36px;display:flex;align-items:center}.main-facet-wrapper .icon-wrapper{height:100%;display:flex;justify-content:center;align-items:center;margin-right:20px}::ng-deep .mat-autocomplete-panel.mat-autocomplete-visible{left:-40px!important;top:15px!important}::ng-deep .mat-chip-list-wrapper{transition:width .3s ease-in-out}.content-wrapper{flex:1}.flex-facet{display:flex;align-items:center}.flex-facet-autocomplete{justify-content:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { filterInput: [{
+                type: ViewChild,
+                args: ['filterInput']
+            }], inputAutoComplete: [{
+                type: ViewChild,
+                args: [MatAutocompleteTrigger, { read: MatAutocompleteTrigger }]
+            }] } });
+
+/*
+ * Public API Surface of ngx-mat-facet-toolkit
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_FACET_TOOLKIT_CONFIG, FACET_TOOLKIT_CONFIG, FacetDataType, FacetFilterType, FacetIdentifierStrategy, NgxMatFacetToolkitComponent, provideFacetToolkitConfig };
+//# sourceMappingURL=drsutphin-ngx-mat-facet-toolkit.mjs.map