@theseam/ui-common 2.0.1 → 2.1.0

package/data-filters/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, OnInit, OnDestroy, TemplateRef } from '@angular/core';
+import { InjectionToken, OnInit, OnDestroy, TemplateRef, OnChanges, AfterViewInit, ElementRef, SimpleChanges } from '@angular/core';
 import { Observable } from 'rxjs';
 import * as _theseam_ui_common_data_filters from '@theseam/ui-common/data-filters';
 import { BooleanInput } from '@angular/cdk/coercion';
@@ -11,6 +11,8 @@ import * as i4 from '@angular/common';
 import * as i6 from '@theseam/ui-common/form-field';
 import * as i7 from '@fortawesome/angular-fontawesome';
 import * as i8 from '@theseam/ui-common/toggle-group';
+import * as i10 from '@theseam/ui-common/menu';
+import * as i11 from '@theseam/ui-common/buttons';
 
 type DataFilterFunction = <T>(data: T[]) => Observable<T[]>;
 /**
@@ -172,6 +174,7 @@ declare class DataFilterTextComponent implements OnInit, OnDestroy, IDataFilter
     static ɵcmp: i0.ɵɵComponentDeclaration<DataFilterTextComponent, "seam-data-filter-text", never, { "filterName": { "alias": "filterName"; "required": false; }; "properties": { "alias": "properties"; "required": false; }; "omitProperties": { "alias": "omitProperties"; "required": false; }; "exact": { "alias": "exact"; "required": false; }; "caseSensitive": { "alias": "caseSensitive"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "iconTpl": { "alias": "iconTpl"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+declare const DATA_FILTER_TOGGLE_BUTTON_DROPDOWN_TEXT = "Select Filter";
 declare const DATA_FILTER_TOGGLE_BUTTON: any;
 interface IToggleButton {
     name: string;
@@ -183,10 +186,30 @@ interface IToggleButtonsFilterOptions extends ITextFilterOptions {
     multiple: boolean;
     buttons: IToggleButton[];
     initialValue?: any;
+    /**
+     * The maximum width a button row can grow to before collapsing.
+     * If not set, the button row will grow until it overflows, then collapse.
+     * To force a button row to always be collapsed or expanded, use the `forceCollapseState` option instead.
+     */
+    maxWidth?: number;
+    /**
+     * The text shown before the button row when the button row is in the collapsed state.
+     * If not set, the button row will not show any text before the buttons when collapsed.
+     */
+    prependLabel?: string;
+    /**
+     * The text shown when the button row is in the collapsed state and no filter is selected.
+     */
+    filterDropdownLabel?: string;
+    /**
+     * When set, the button row will always be collapsed or expanded, regardless of the available width.
+     */
+    forceCollapseState?: 'collapsed' | 'expanded';
 }
 declare const DefaultToggleButtonsFilterOptions: IToggleButtonsFilterOptions;
 declare function toggleButtonsFilter(data: any[], values: string[], options?: IToggleButtonsFilterOptions): any[];
-declare class DataFilterToggleButtonsComponent implements OnInit, OnDestroy, IDataFilter {
+declare class DataFilterToggleButtonsComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit, IDataFilter {
+    private _elementRef;
     private _filterContainer;
     private _filterOptions;
     readonly name = "toggle-buttons";
@@ -200,22 +223,45 @@ declare class DataFilterToggleButtonsComponent implements OnInit, OnDestroy, IDa
     buttons: IToggleButton[];
     exact: boolean;
     caseSensitive: boolean;
+    maxWidth: number | undefined;
+    prependLabel: string | undefined;
+    filterDropdownLabel: string | undefined;
+    forceCollapseState: "collapsed" | "expanded" | undefined;
+    get _collapsedClass(): boolean;
+    get _expandedClass(): boolean;
+    readonly isCollapsed: i0.WritableSignal<boolean>;
+    private _measureDiv;
+    private _resizeObserver;
+    /**
+     * Emits when the `buttons` input changes.
+     */
+    private readonly _buttonsChanged;
     set value(value: string | string[]);
     readonly filterStateChanges: Observable<DataFilterState>;
-    constructor(_filterContainer: DataFilterContainer, _filterOptions: IToggleButtonsFilterOptions | null);
+    activeFilterLabel: Observable<string>;
+    constructor(_elementRef: ElementRef<HTMLElement>, _filterContainer: DataFilterContainer, _filterOptions: IToggleButtonsFilterOptions | null);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Observes the parent element only while the collapsed state is width driven.
+     * When `forceCollapseState` is set there is nothing to observe, so the
+     * observer is disconnected and the forced state is applied directly.
+     */
+    private _syncResizeObserver;
     ngOnDestroy(): void;
     private _optDefault;
     get options(): IToggleButtonsFilterOptions;
     filter<T>(data: T[]): Observable<T[]>;
+    private _updateCollapsed;
     filterState(): DataFilterState;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DataFilterToggleButtonsComponent, [null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DataFilterToggleButtonsComponent, "seam-data-filter-toggle-buttons", never, { "filterName": { "alias": "filterName"; "required": false; }; "properties": { "alias": "properties"; "required": false; }; "omitProperties": { "alias": "omitProperties"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "selectionToggleable": { "alias": "selectionToggleable"; "required": false; }; "buttons": { "alias": "buttons"; "required": false; }; "exact": { "alias": "exact"; "required": false; }; "caseSensitive": { "alias": "caseSensitive"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataFilterToggleButtonsComponent, [null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataFilterToggleButtonsComponent, "seam-data-filter-toggle-buttons", never, { "filterName": { "alias": "filterName"; "required": false; }; "properties": { "alias": "properties"; "required": false; }; "omitProperties": { "alias": "omitProperties"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "selectionToggleable": { "alias": "selectionToggleable"; "required": false; }; "buttons": { "alias": "buttons"; "required": false; }; "exact": { "alias": "exact"; "required": false; }; "caseSensitive": { "alias": "caseSensitive"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "prependLabel": { "alias": "prependLabel"; "required": false; }; "filterDropdownLabel": { "alias": "filterDropdownLabel"; "required": false; }; "forceCollapseState": { "alias": "forceCollapseState"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare class TheSeamDataFiltersModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamDataFiltersModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamDataFiltersModule, [typeof DataFilterSearchComponent, typeof DataFilterTextComponent, typeof DataFilterToggleButtonsComponent], [typeof i4.CommonModule, typeof i5.ReactiveFormsModule, typeof i6.TheSeamFormFieldModule, typeof i7.FontAwesomeModule, typeof i8.TheSeamToggleGroupModule, typeof i9.TheSeamIconModule], [typeof DataFilterSearchComponent, typeof DataFilterTextComponent, typeof DataFilterToggleButtonsComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamDataFiltersModule, [typeof DataFilterSearchComponent, typeof DataFilterTextComponent, typeof DataFilterToggleButtonsComponent], [typeof i4.CommonModule, typeof i5.ReactiveFormsModule, typeof i6.TheSeamFormFieldModule, typeof i7.FontAwesomeModule, typeof i8.TheSeamToggleGroupModule, typeof i9.TheSeamIconModule, typeof i10.TheSeamMenuModule, typeof i11.TheSeamButtonsModule], [typeof DataFilterSearchComponent, typeof DataFilterTextComponent, typeof DataFilterToggleButtonsComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TheSeamDataFiltersModule>;
 }
 
@@ -228,5 +274,5 @@ interface IDataFilterDef<T = any> {
 }
 declare const THESEAM_DATA_FILTER_DEF: InjectionToken<IDataFilterDef<any>[]>;
 
-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 };
+export { DATA_FILTER_SEARCH, DATA_FILTER_TEXT, DATA_FILTER_TOGGLE_BUTTON, DATA_FILTER_TOGGLE_BUTTON_DROPDOWN_TEXT, 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 };
 export type { DataFilter, DataFilterContainer, DataFilterFunction, DataFilterState, IDataFilter, IDataFilterDef, IDataFilterFunction, ISearchFilterOptions, ITextFilterOptions, IToggleButton, IToggleButtonsFilterOptions };

package/fesm2022/theseam-ui-common-data-filters.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, forwardRef, Input, Inject, Optional, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import { of, combineLatest } from 'rxjs';
+import { InjectionToken, forwardRef, Input, Inject, Optional, Component, ChangeDetectionStrategy, signal, ViewChild, HostBinding, NgModule } from '@angular/core';
+import { of, combineLatest, Subject, merge } from 'rxjs';
 import { switchMap, startWith, map, shareReplay } from 'rxjs/operators';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -13,10 +13,14 @@ import * as i4 from '@theseam/ui-common/icon';
 import { TheSeamIconModule } from '@theseam/ui-common/icon';
 import * as i3$1 from '@theseam/ui-common/toggle-group';
 import { TheSeamToggleGroupModule } from '@theseam/ui-common/toggle-group';
+import * as i4$1 from '@theseam/ui-common/menu';
+import { TheSeamMenuModule } from '@theseam/ui-common/menu';
+import * as i5 from '@theseam/ui-common/buttons';
+import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
 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 { isNullOrUndefined, hasProperty, notNullOrUndefined } from '@theseam/ui-common/utils';
 import { coerceArray } from '@angular/cdk/coercion';
 
 const THESEAM_DATA_FILTER = new InjectionToken('TheSeamDataFilter');
@@ -310,6 +314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }] } });
 
+const DATA_FILTER_TOGGLE_BUTTON_DROPDOWN_TEXT = 'Select Filter';
 const DATA_FILTER_TOGGLE_BUTTON = {
     provide: THESEAM_DATA_FILTER,
     useExisting: forwardRef(() => DataFilterToggleButtonsComponent),
@@ -323,13 +328,17 @@ const DefaultToggleButtonsFilterOptions = {
     buttons: [],
     exact: false,
     caseSensitive: false,
+    maxWidth: undefined,
+    prependLabel: undefined,
+    filterDropdownLabel: DATA_FILTER_TOGGLE_BUTTON_DROPDOWN_TEXT,
+    forceCollapseState: undefined,
 };
 function toggleButtonsFilter(data, values, options = DefaultToggleButtonsFilterOptions) {
     if (!data || !values) {
         return data;
     }
     const customComparatorBtns = [];
-    for (const btn of options.buttons) {
+    for (const btn of options.buttons || []) {
         if (btn.comparator) {
             customComparatorBtns.push(btn);
         }
@@ -367,6 +376,7 @@ function toggleButtonsFilter(data, values, options = DefaultToggleButtonsFilterO
 }
 let _uid = 0;
 class DataFilterToggleButtonsComponent {
+    _elementRef;
     _filterContainer;
     _filterOptions;
     name = 'toggle-buttons';
@@ -380,22 +390,36 @@ class DataFilterToggleButtonsComponent {
     buttons = this._optDefault('buttons');
     exact = this._optDefault('exact');
     caseSensitive = this._optDefault('caseSensitive');
+    maxWidth = this._optDefault('maxWidth');
+    prependLabel = this._optDefault('prependLabel');
+    filterDropdownLabel = this._optDefault('filterDropdownLabel');
+    forceCollapseState = this._optDefault('forceCollapseState');
+    get _collapsedClass() {
+        return this.isCollapsed();
+    }
+    get _expandedClass() {
+        return !this.isCollapsed();
+    }
+    isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
+    _measureDiv;
+    _resizeObserver;
+    /**
+     * Emits when the `buttons` input changes.
+     */
+    _buttonsChanged = new Subject();
     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);
         }
     }
     filterStateChanges;
-    constructor(_filterContainer, _filterOptions) {
+    activeFilterLabel;
+    constructor(_elementRef, _filterContainer, _filterOptions) {
+        this._elementRef = _elementRef;
         this._filterContainer = _filterContainer;
         this._filterOptions = _filterOptions;
-        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 }));
+        this.filterStateChanges = this._control.valueChanges.pipe(switchMap(() => of(this.filterState())), shareReplay({ bufferSize: 1, refCount: true }));
     }
     ngOnInit() {
         this._filterContainer.addFilter(this);
@@ -403,9 +427,58 @@ class DataFilterToggleButtonsComponent {
             hasProperty(this._filterOptions, 'initialValue')) {
             this.value = this._optDefault('initialValue');
         }
+        this.activeFilterLabel = merge(this.filterStateChanges, this._buttonsChanged).pipe(startWith(undefined), map(() => {
+            const state = this.filterState();
+            // Depending on the timing of when this is called, the options may not be fully initialized yet.
+            // Cast as partial to avoid TypeError on uninitialized values.
+            const options = state.state
+                .options;
+            const selectedOptions = (options.buttons || [])
+                .filter((o) => coerceArray(state.state.value).includes(o.value))
+                .map((o) => o.name);
+            return selectedOptions.length > 0
+                ? selectedOptions.join(', ')
+                : this.filterDropdownLabel || DATA_FILTER_TOGGLE_BUTTON_DROPDOWN_TEXT;
+        }));
+    }
+    ngAfterViewInit() {
+        this._resizeObserver = new ResizeObserver(() => this._updateCollapsed());
+        this._syncResizeObserver();
+    }
+    ngOnChanges(changes) {
+        if (changes['buttons'] && !changes['buttons'].firstChange) {
+            this._updateCollapsed();
+            this._buttonsChanged.next();
+        }
+        if (changes['forceCollapseState'] &&
+            !changes['forceCollapseState'].firstChange) {
+            this._syncResizeObserver();
+        }
+    }
+    /**
+     * Observes the parent element only while the collapsed state is width driven.
+     * When `forceCollapseState` is set there is nothing to observe, so the
+     * observer is disconnected and the forced state is applied directly.
+     */
+    _syncResizeObserver() {
+        if (isNullOrUndefined(this._resizeObserver)) {
+            return;
+        }
+        this._resizeObserver.disconnect();
+        const parentElement = this._elementRef.nativeElement.parentElement;
+        if (notNullOrUndefined(parentElement) &&
+            isNullOrUndefined(this.forceCollapseState)) {
+            this._resizeObserver.observe(parentElement);
+        }
+        else {
+            // The observer won't fire, so apply the collapsed state directly.
+            this._updateCollapsed();
+        }
     }
     ngOnDestroy() {
         this._filterContainer.removeFilter(this);
+        this._resizeObserver?.disconnect();
+        this._buttonsChanged.complete();
     }
     _optDefault(prop) {
         if (this._filterOptions &&
@@ -423,10 +496,45 @@ class DataFilterToggleButtonsComponent {
             buttons: this.buttons,
             exact: this.exact,
             caseSensitive: this.caseSensitive,
+            maxWidth: this.maxWidth,
+            prependLabel: this.prependLabel,
+            filterDropdownLabel: this.filterDropdownLabel,
+            forceCollapseState: this.forceCollapseState,
         };
     }
     filter(data) {
-        return this._control.valueChanges.pipe(map((v) => toggleButtonsFilter(data, coerceArray(v), this.options)), startWith(toggleButtonsFilter(data, coerceArray(this._control.value), this.options)));
+        // `buttons` is merged in because `toggleButtonsFilter` resolves each value's
+        // custom `comparator` from `options.buttons`. A `buttons` list that arrives
+        // after the value is set would otherwise keep filtering with the stale
+        // (empty) list until the next value change.
+        return merge(this._control.valueChanges, this._buttonsChanged).pipe(map(() => toggleButtonsFilter(data, coerceArray(this._control.value), this.options)), startWith(toggleButtonsFilter(data, coerceArray(this._control.value), this.options)));
+    }
+    _updateCollapsed() {
+        if (notNullOrUndefined(this.forceCollapseState)) {
+            if (this.isCollapsed() && this.forceCollapseState === 'expanded') {
+                this.isCollapsed.set(false);
+            }
+            else if (!this.isCollapsed() &&
+                this.forceCollapseState === 'collapsed') {
+                this.isCollapsed.set(true);
+            }
+            return;
+        }
+        if (!this._measureDiv) {
+            return;
+        }
+        const measureWidth = this._measureDiv.nativeElement.scrollWidth;
+        // Because of the flex layout, this element won't necessarily grow to its full
+        // potential width when in collapsed mode, meaning it stays collapsed even
+        // though there's room to expand. If this becomes a problem, we may need to use a
+        // different strategy to determine when it's safe to show the full filter bar.
+        const clientWidth = this._elementRef.nativeElement.parentElement?.clientWidth;
+        // Not enough information to determine collapsed state, so don't update it
+        if (isNullOrUndefined(clientWidth)) {
+            return;
+        }
+        const threshold = this.maxWidth != null ? Math.min(clientWidth, this.maxWidth) : clientWidth;
+        this.isCollapsed.set(measureWidth > threshold);
     }
     filterState() {
         return {
@@ -438,13 +546,13 @@ class DataFilterToggleButtonsComponent {
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataFilterToggleButtonsComponent, deps: [{ token: THESEAM_DATA_FILTER_CONTAINER }, { token: THESEAM_DATA_FILTER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DataFilterToggleButtonsComponent, isStandalone: false, selector: "seam-data-filter-toggle-buttons", inputs: { filterName: "filterName", properties: "properties", omitProperties: "omitProperties", multiple: "multiple", selectionToggleable: "selectionToggleable", buttons: "buttons", exact: "exact", caseSensitive: "caseSensitive", value: "value" }, providers: [DATA_FILTER_TOGGLE_BUTTON], ngImport: i0, template: "<div\n  class=\"btn-group\"\n  role=\"group\"\n  aria-label=\"Progress Filter\"\n  *ngIf=\"options as opts\"\n  [formControl]=\"_control\"\n  seamToggleGroup\n  [multiple]=\"opts.multiple\"\n  [selectionToggleable]=\"opts.selectionToggleable\"\n>\n  <ng-container *ngFor=\"let btn of buttons\">\n    <button\n      type=\"button\"\n      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    >\n      {{ btn.name || btn.value }}\n    </button>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.ToggleGroupDirective, selector: "[seamToggleGroup]", inputs: ["value", "disabled", "multiple", "selectionToggleable"], outputs: ["change"], exportAs: ["seamToggleGroup"] }, { kind: "directive", type: i3$1.ToggleGroupOptionDirective, selector: "[seamToggleGroupOption]", inputs: ["seamToggleGroupOption", "selected"], outputs: ["selectionChange"], exportAs: ["seamToggleGroupOption"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataFilterToggleButtonsComponent, deps: [{ token: i0.ElementRef }, { token: THESEAM_DATA_FILTER_CONTAINER }, { token: THESEAM_DATA_FILTER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DataFilterToggleButtonsComponent, isStandalone: false, selector: "seam-data-filter-toggle-buttons", inputs: { filterName: "filterName", properties: "properties", omitProperties: "omitProperties", multiple: "multiple", selectionToggleable: "selectionToggleable", buttons: "buttons", exact: "exact", caseSensitive: "caseSensitive", maxWidth: "maxWidth", prependLabel: "prependLabel", filterDropdownLabel: "filterDropdownLabel", forceCollapseState: "forceCollapseState", value: "value" }, host: { properties: { "class.seam-data-filter-toggle-buttons-collapsed": "this._collapsedClass", "class.seam-data-filter-toggle-buttons-expanded": "this._expandedClass" } }, providers: [DATA_FILTER_TOGGLE_BUTTON], viewQueries: [{ propertyName: "_measureDiv", first: true, predicate: ["measureDiv"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"isCollapsed(); else buttonsTpl\">\n  <div class=\"d-flex toggle-buttons-filter__collapsed\">\n    <div\n      *ngIf=\"prependLabel\"\n      class=\"d-flex align-items-center toggle-buttons-filter__collapsed-prepend-label\"\n    >\n      {{ prependLabel }}\n    </div>\n    <button\n      seamButton\n      theme=\"lightgray\"\n      size=\"sm\"\n      class=\"dropdown-toggle toggle-buttons-filter__collapsed-button\"\n      title=\"View filter options\"\n      [seamMenuToggle]=\"buttonsDropdownTpl\"\n    >\n      {{ activeFilterLabel | async }}\n    </button>\n    <seam-menu #buttonsDropdownTpl>\n      <div\n        role=\"group\"\n        aria-label=\"Toggle Filters\"\n        *ngIf=\"options as opts\"\n        [formControl]=\"_control\"\n        seamToggleGroup\n        #tg=\"seamToggleGroup\"\n        [multiple]=\"opts.multiple\"\n        [selectionToggleable]=\"opts.selectionToggleable\"\n      >\n        <ng-container *ngFor=\"let btn of buttons\">\n          <button\n            seamMenuItem\n            [seamToggleGroupOption]=\"btn.value\"\n            [class.seam-menu-item-active]=\"tg.isSelected(btn.value)\"\n            (click)=\"tg.toggleOptionSelect(btn.value)\"\n            title=\"Apply filter\"\n          >\n            {{ btn.name || btn.value }}\n          </button>\n        </ng-container>\n      </div>\n    </seam-menu>\n  </div>\n</ng-container>\n\n<ng-template #buttonsTpl>\n  <div\n    class=\"btn-group toggle-buttons-filter__expanded\"\n    role=\"group\"\n    aria-label=\"Toggle Filters\"\n    *ngIf=\"options as opts\"\n    [formControl]=\"_control\"\n    seamToggleGroup\n    #tg=\"seamToggleGroup\"\n    [multiple]=\"opts.multiple\"\n    [selectionToggleable]=\"opts.selectionToggleable\"\n  >\n    <ng-container *ngFor=\"let btn of buttons\">\n      <button\n        type=\"button\"\n        class=\"btn btn-sm px-4\"\n        [seamToggleGroupOption]=\"btn.value\"\n        [class.btn-lightgray]=\"!tg.isSelected(btn.value)\"\n        [class.btn-primary]=\"tg.isSelected(btn.value)\"\n        (click)=\"tg.toggleOptionSelect(btn.value)\"\n        title=\"Apply filter\"\n      >\n        {{ btn.name || btn.value }}\n      </button>\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- Hidden measurement div: always in DOM, used to read natural btn-group width -->\n<div #measureDiv class=\"btn-group btn-group--measure\" aria-hidden=\"true\">\n  <ng-container *ngFor=\"let btn of buttons\">\n    <button type=\"button\" class=\"btn btn-sm px-4\" tabindex=\"-1\">\n      {{ btn.name || btn.value }}\n    </button>\n  </ng-container>\n</div>\n", styles: [":host{position:relative}.btn-group--measure{visibility:hidden;position:absolute;pointer-events:none;white-space:nowrap;top:0;left:-9999px}.seam-menu-item.seam-menu-item-active,.seam-menu-item.seam-menu-item-active.cdk-mouse-focused:not(:hover){background:#357ebd;color:#fff}.toggle-buttons-filter__collapsed{font-size:.875rem}.toggle-buttons-filter__collapsed-prepend-label{border-radius:.2rem 0 0 .2rem;padding:.25rem .75rem;background:#357ebd;color:#fff}.toggle-buttons-filter__collapsed-button{position:relative;min-width:100px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;padding-right:1.5rem}.toggle-buttons-filter__collapsed-button:after{position:absolute;top:calc(50% - 3px);right:calc(.75rem - 3px)}.toggle-buttons-filter__collapsed-prepend-label~.toggle-buttons-filter__collapsed-button{border-radius:0 .2rem .2rem 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.ToggleGroupDirective, selector: "[seamToggleGroup]", inputs: ["value", "disabled", "multiple", "selectionToggleable"], outputs: ["change"], exportAs: ["seamToggleGroup"] }, { kind: "directive", type: i3$1.ToggleGroupOptionDirective, selector: "[seamToggleGroupOption]", inputs: ["seamToggleGroupOption"], exportAs: ["seamToggleGroupOption"] }, { kind: "component", type: i4$1.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "directive", type: i4$1.MenuToggleDirective, selector: "[seamMenuToggle]", inputs: ["seamMenuToggle", "positions", "seamMenuTogglePositionsOffsetY"], outputs: ["menuToggle", "menuOpened", "menuClosed"], exportAs: ["seamMenuToggle"] }, { kind: "component", type: i4$1.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i5.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataFilterToggleButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-data-filter-toggle-buttons', providers: [DATA_FILTER_TOGGLE_BUTTON], standalone: false, template: "<div\n  class=\"btn-group\"\n  role=\"group\"\n  aria-label=\"Progress Filter\"\n  *ngIf=\"options as opts\"\n  [formControl]=\"_control\"\n  seamToggleGroup\n  [multiple]=\"opts.multiple\"\n  [selectionToggleable]=\"opts.selectionToggleable\"\n>\n  <ng-container *ngFor=\"let btn of buttons\">\n    <button\n      type=\"button\"\n      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    >\n      {{ btn.name || btn.value }}\n    </button>\n  </ng-container>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
+            args: [{ selector: 'seam-data-filter-toggle-buttons', providers: [DATA_FILTER_TOGGLE_BUTTON], standalone: false, template: "<ng-container *ngIf=\"isCollapsed(); else buttonsTpl\">\n  <div class=\"d-flex toggle-buttons-filter__collapsed\">\n    <div\n      *ngIf=\"prependLabel\"\n      class=\"d-flex align-items-center toggle-buttons-filter__collapsed-prepend-label\"\n    >\n      {{ prependLabel }}\n    </div>\n    <button\n      seamButton\n      theme=\"lightgray\"\n      size=\"sm\"\n      class=\"dropdown-toggle toggle-buttons-filter__collapsed-button\"\n      title=\"View filter options\"\n      [seamMenuToggle]=\"buttonsDropdownTpl\"\n    >\n      {{ activeFilterLabel | async }}\n    </button>\n    <seam-menu #buttonsDropdownTpl>\n      <div\n        role=\"group\"\n        aria-label=\"Toggle Filters\"\n        *ngIf=\"options as opts\"\n        [formControl]=\"_control\"\n        seamToggleGroup\n        #tg=\"seamToggleGroup\"\n        [multiple]=\"opts.multiple\"\n        [selectionToggleable]=\"opts.selectionToggleable\"\n      >\n        <ng-container *ngFor=\"let btn of buttons\">\n          <button\n            seamMenuItem\n            [seamToggleGroupOption]=\"btn.value\"\n            [class.seam-menu-item-active]=\"tg.isSelected(btn.value)\"\n            (click)=\"tg.toggleOptionSelect(btn.value)\"\n            title=\"Apply filter\"\n          >\n            {{ btn.name || btn.value }}\n          </button>\n        </ng-container>\n      </div>\n    </seam-menu>\n  </div>\n</ng-container>\n\n<ng-template #buttonsTpl>\n  <div\n    class=\"btn-group toggle-buttons-filter__expanded\"\n    role=\"group\"\n    aria-label=\"Toggle Filters\"\n    *ngIf=\"options as opts\"\n    [formControl]=\"_control\"\n    seamToggleGroup\n    #tg=\"seamToggleGroup\"\n    [multiple]=\"opts.multiple\"\n    [selectionToggleable]=\"opts.selectionToggleable\"\n  >\n    <ng-container *ngFor=\"let btn of buttons\">\n      <button\n        type=\"button\"\n        class=\"btn btn-sm px-4\"\n        [seamToggleGroupOption]=\"btn.value\"\n        [class.btn-lightgray]=\"!tg.isSelected(btn.value)\"\n        [class.btn-primary]=\"tg.isSelected(btn.value)\"\n        (click)=\"tg.toggleOptionSelect(btn.value)\"\n        title=\"Apply filter\"\n      >\n        {{ btn.name || btn.value }}\n      </button>\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- Hidden measurement div: always in DOM, used to read natural btn-group width -->\n<div #measureDiv class=\"btn-group btn-group--measure\" aria-hidden=\"true\">\n  <ng-container *ngFor=\"let btn of buttons\">\n    <button type=\"button\" class=\"btn btn-sm px-4\" tabindex=\"-1\">\n      {{ btn.name || btn.value }}\n    </button>\n  </ng-container>\n</div>\n", styles: [":host{position:relative}.btn-group--measure{visibility:hidden;position:absolute;pointer-events:none;white-space:nowrap;top:0;left:-9999px}.seam-menu-item.seam-menu-item-active,.seam-menu-item.seam-menu-item-active.cdk-mouse-focused:not(:hover){background:#357ebd;color:#fff}.toggle-buttons-filter__collapsed{font-size:.875rem}.toggle-buttons-filter__collapsed-prepend-label{border-radius:.2rem 0 0 .2rem;padding:.25rem .75rem;background:#357ebd;color:#fff}.toggle-buttons-filter__collapsed-button{position:relative;min-width:100px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;padding-right:1.5rem}.toggle-buttons-filter__collapsed-button:after{position:absolute;top:calc(50% - 3px);right:calc(.75rem - 3px)}.toggle-buttons-filter__collapsed-prepend-label~.toggle-buttons-filter__collapsed-button{border-radius:0 .2rem .2rem 0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [THESEAM_DATA_FILTER_CONTAINER]
                 }] }, { type: undefined, decorators: [{
@@ -468,6 +576,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], caseSensitive: [{
                 type: Input
+            }], maxWidth: [{
+                type: Input
+            }], prependLabel: [{
+                type: Input
+            }], filterDropdownLabel: [{
+                type: Input
+            }], forceCollapseState: [{
+                type: Input
+            }], _collapsedClass: [{
+                type: HostBinding,
+                args: ['class.seam-data-filter-toggle-buttons-collapsed']
+            }], _expandedClass: [{
+                type: HostBinding,
+                args: ['class.seam-data-filter-toggle-buttons-expanded']
+            }], _measureDiv: [{
+                type: ViewChild,
+                args: ['measureDiv']
             }], value: [{
                 type: Input
             }] } });
@@ -506,7 +631,9 @@ class TheSeamDataFiltersModule {
             TheSeamFormFieldModule,
             FontAwesomeModule,
             TheSeamToggleGroupModule,
-            TheSeamIconModule], exports: [DataFilterSearchComponent,
+            TheSeamIconModule,
+            TheSeamMenuModule,
+            TheSeamButtonsModule], exports: [DataFilterSearchComponent,
             DataFilterTextComponent,
             DataFilterToggleButtonsComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamDataFiltersModule, providers: [...filterDefProviders], imports: [CommonModule,
@@ -514,7 +641,9 @@ class TheSeamDataFiltersModule {
             TheSeamFormFieldModule,
             FontAwesomeModule,
             TheSeamToggleGroupModule,
-            TheSeamIconModule] });
+            TheSeamIconModule,
+            TheSeamMenuModule,
+            TheSeamButtonsModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamDataFiltersModule, decorators: [{
             type: NgModule,
@@ -527,6 +656,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         FontAwesomeModule,
                         TheSeamToggleGroupModule,
                         TheSeamIconModule,
+                        TheSeamMenuModule,
+                        TheSeamButtonsModule,
                     ],
                     providers: [...filterDefProviders],
                     exports: [...filterComponents],
@@ -537,5 +668,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * 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 };
+export { DATA_FILTER_SEARCH, DATA_FILTER_TEXT, DATA_FILTER_TOGGLE_BUTTON, DATA_FILTER_TOGGLE_BUTTON_DROPDOWN_TEXT, 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.mjs.map