@testgorilla/tgo-ui 11.22.3 → 12.0.1

package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs

@@ -1,453 +1,848 @@
-import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
-import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
-import { AsyncPipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { input, EventEmitter, signal, computed, booleanAttribute, ViewChild, HostBinding, Input, Output, Optional, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-import { Subject, EMPTY, fromEvent } from 'rxjs';
-import { debounceTime, switchMap } from 'rxjs/operators';
-import { ButtonComponent, ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
-import { CheckboxComponent, CheckboxComponentModule } from '@testgorilla/tgo-ui/components/checkbox';
-import { IKeyboardEvent, EllipseTextDirective, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
-import { FieldComponent, FieldComponentModule } from '@testgorilla/tgo-ui/components/field';
-import { IconComponent, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import { RadioButtonComponent, RadioButtonComponentModule } from '@testgorilla/tgo-ui/components/radio-button';
-
-class FilterButtonComponent {
-    get panelTestId() {
-        return this.testId ? `${this.testId}-panel` : null;
-    }
-    get resetButtonTestId() {
-        return this.testId ? `${this.testId}-reset` : null;
-    }
-    get fullWidthClass() {
-        return this.fullWidth;
-    }
-    constructor(defaultAppTheme, cdr, destroyRef) {
-        this.defaultAppTheme = defaultAppTheme;
-        this.cdr = cdr;
-        this.class = 'ui-filter-button';
-        /**
-         * The button label when no value is selected.
-         *
-         * @type {string}
-         * @memberof FilterButtonComponent
-         */
-        this.label = '';
-        /**
-         * Optional message to display on the overflow bottom.
-         *
-         * @type {string}
-         * @memberof FilterButtonComponent
-         */
-        this.message = '';
-        /**
-         * List of selected values.
-         *
-         * @type {string[]}
-         * @memberof FilterButtonComponent
-         */
-        this.value = [];
-        /**
-         * Whether the component is disabled.
-         * Default: false.
-         *
-         * @type {boolean}
-         * @memberof FilterButtonComponent
-         */
-        this.disabled = false;
-        /**
-         * List of options.
-         *
-         * @type {OptionType}
-         * @memberof FilterButtonComponent
-         */
-        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        /**
-         * Whether the user should be allowed to clear the values.
-         * Default: true.
-         *
-         * @type {boolean}
-         * @memberof FilterButtonComponent
-         */
-        this.allowClear = true;
-        /**
-         * Whether the user should be allowed to select single or multiple values.
-         * Default: false.
-         *
-         * @type {boolean}
-         * @memberof FilterButtonComponent
-         */
-        this.singleSelection = false;
-        /**
-         * The position of the icon.
-         * Default: 'right'.
-         *
-         * @type {ButtonIconPosition}
-         * @memberof FilterButtonComponent
-         */
-        this.iconPosition = 'right';
-        /**
-         * Optional message to display if there are no options to select available
-         *
-         * @type {string}
-         * @memberof FilterButtonComponent
-         */
-        this.noOptionsMessage = '';
-        /**
-         * Whether the button should stretch to fill its container, and the dropdown panel
-         * follow that width instead of the default 240px.
-         * The panel never shrinks below 240px, so a container narrower than that is safe.
-         * Default: false.
-         *
-         * @type {boolean}
-         * @memberof FilterButtonComponent
-         */
-        this.fullWidth = false;
-        this.testId = null;
-        this.ariaLabel = '';
-        /**
-         * Emits the list of selected values when the selection changes.
-         *
-         * @type {EventEmitter<string[]>}
-         * @memberof FilterButtonComponent
-         */
-        this.changed = new EventEmitter();
-        /**
-         * Emits the option change event
-         *
-         * @type {EventEmitter<OptionChangeEvent>}
-         * @memberof FilterButtonComponent
-         */
-        this.optionChange = new EventEmitter();
-        /**
-         *
-         * Defines the application theme
-         *
-         * @type {ApplicationTheme}
-         * @memberof FilterButtonComponent
-         */
-        this.applicationTheme = 'light';
-        /** Must match the `.item` height in the SCSS — the fixed-size viewport relies on it. */
-        this.ITEM_SIZE = 48;
-        this.MAX_LIST_HEIGHT = 290;
-        this.PANEL_MIN_WIDTH = 240;
-        this.MATCH_TRIGGER_PANEL_CLASS = 'ui-filter-button-panel-match-trigger';
-        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-        this.displayedLabel = signal('', ...(ngDevMode ? [{ debugName: "displayedLabel" }] : /* istanbul ignore next */ []));
-        this.tooltip = signal('', ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
-        this.search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
-        this.activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-        this.showTooltip = {};
-        this.displayedOptions = computed(() => {
-            let lastSectionTitle;
-            return this.options()
-                .map(option => {
-                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- an empty section title reuses the previous section
-                lastSectionTitle = option.sectionTitle || lastSectionTitle;
-                return { ...option, sectionTitle: lastSectionTitle };
-            })
-                .filter(option => option.label.toLowerCase().includes(this.search().toLowerCase()));
-        }, ...(ngDevMode ? [{ debugName: "displayedOptions" }] : /* istanbul ignore next */ []));
-        // Section titles become their own rows so the fixed-size viewport can position every row with one `itemSize`.
-        this.flatOptions = computed(() => {
-            const rows = [];
-            let lastTitle;
-            for (const option of this.displayedOptions()) {
-                if (option.sectionTitle && option.sectionTitle !== lastTitle) {
-                    lastTitle = option.sectionTitle;
-                    rows.push({ kind: 'header', title: option.sectionTitle });
-                }
-                rows.push({ kind: 'option', option });
-            }
-            return rows;
-        }, ...(ngDevMode ? [{ debugName: "flatOptions" }] : /* istanbul ignore next */ []));
-        this.optionCount = computed(() => this.displayedOptions().length, ...(ngDevMode ? [{ debugName: "optionCount" }] : /* istanbul ignore next */ []));
-        this.activeOption = computed(() => {
-            const row = this.flatOptions()[this.activeIndex()];
-            return row?.kind === 'option' ? row.option : undefined;
-        }, ...(ngDevMode ? [{ debugName: "activeOption" }] : /* istanbul ignore next */ []));
-        // 1-based position of the active option (headers excluded) for the aria-live announcement.
-        this.activePosition = computed(() => {
-            const rows = this.flatOptions();
-            const activeIndex = this.activeIndex();
-            let position = 0;
-            for (let i = 0; i <= activeIndex && i < rows.length; i++) {
-                if (rows[i].kind === 'option') {
-                    position++;
-                }
-            }
-            return position;
-        }, ...(ngDevMode ? [{ debugName: "activePosition" }] : /* istanbul ignore next */ []));
-        this.listHeight = computed(() => Math.min(Math.max(this.flatOptions().length * this.ITEM_SIZE, this.ITEM_SIZE), this.MAX_LIST_HEIGHT), ...(ngDevMode ? [{ debugName: "listHeight" }] : /* istanbul ignore next */ []));
-        this.trackByRow = (_index, row) => row.kind === 'header' ? `header:${row.title}` : `option:${row.option.value}`;
-        this.MIN_OPTIONS_LENGTH_FOR_SEARCH = 8;
-        this.translationContext = 'FILTER_BUTTON.';
-        this.searchInput$ = new Subject();
-        if (this.defaultAppTheme) {
-            this.applicationTheme = this.defaultAppTheme;
-        }
-        this.searchInput$.pipe(debounceTime(150), takeUntilDestroyed(destroyRef)).subscribe(value => {
-            this.search.set(value);
-            this.activeIndex.set(this.firstOptionIndex());
-            this.cdr.markForCheck();
-        });
-        toObservable(this.isOpen)
-            .pipe(switchMap(open => (open && this.fullWidth ? fromEvent(window, 'resize').pipe(debounceTime(100)) : EMPTY)), takeUntilDestroyed(destroyRef))
-            .subscribe(() => this.syncPanelWidth());
-    }
-    syncPanelWidth() {
-        const overlayRef = this.connectedOverlay?.overlayRef;
-        const trigger = this.triggerOrigin?.elementRef.nativeElement;
-        if (!overlayRef || !trigger) {
-            return;
-        }
-        overlayRef.updateSize({ width: trigger.getBoundingClientRect().width });
-        overlayRef.updatePosition();
-    }
-    ngOnChanges(changes) {
-        if (changes['value']) {
-            this.updateLabel();
-        }
-    }
-    clearValue() {
-        this.value = [];
-        this.updateLabel();
-        this.changed.emit(this.value);
-    }
-    outsideClick() {
-        window.setTimeout(() => {
-            this.isOpen.set(false);
-        });
-    }
-    toggle() {
-        this.isOpen.set(!this.isOpen());
-        if (this.isOpen()) {
-            this.activeIndex.set(this.firstOptionIndex());
-        }
-        this.cdr.markForCheck();
-    }
-    isSelected(value) {
-        return this.value?.includes(value ?? '');
-    }
-    optionChanged(selected, option) {
-        this.value = this.value || [];
-        if (this.singleSelection) {
-            this.value = selected ? [option.value] : [];
-        }
-        else {
-            if (selected) {
-                this.value.push(option.value);
-            }
-            else {
-                this.value.splice(this.value.indexOf(option.value), 1);
-            }
-        }
-        this.changed.emit(this.value);
-        this.optionChange.emit({ selected, option });
-        this.updateLabel();
-    }
-    onSearchChange(value) {
-        this.searchInput$.next(value);
-    }
-    keyDownHandler(ev) {
-        if (ev.key === IKeyboardEvent.ARROW_DOWN) {
-            ev.preventDefault();
-            this.moveActive(1);
-        }
-        else if (ev.key === IKeyboardEvent.ARROW_UP) {
-            ev.preventDefault();
-            this.moveActive(-1);
-        }
-        else if (ev.key === IKeyboardEvent.ENTER || ev.key === IKeyboardEvent.SPACE) {
-            ev.preventDefault();
-            this.toggleActiveOption();
-        }
-        else if (ev.key === IKeyboardEvent.ESCAPE) {
-            this.isOpen.set(false);
-        }
-    }
-    onLabelEllipsisChange(isEllipsis, value) {
-        this.showTooltip[value] = isEllipsis;
-    }
-    firstOptionIndex() {
-        const index = this.flatOptions().findIndex(row => row.kind === 'option');
-        return index === -1 ? 0 : index;
-    }
-    moveActive(delta) {
-        const rows = this.flatOptions();
-        const optionIndexes = [];
-        rows.forEach((row, index) => {
-            if (row.kind === 'option') {
-                optionIndexes.push(index);
-            }
-        });
-        if (!optionIndexes.length) {
-            return;
-        }
-        const currentPos = optionIndexes.indexOf(this.activeIndex());
-        const basePos = currentPos === -1 ? 0 : currentPos;
-        const nextPos = (basePos + delta + optionIndexes.length) % optionIndexes.length;
-        const nextIndex = optionIndexes[nextPos];
-        this.activeIndex.set(nextIndex);
-        this.viewport?.scrollToIndex(nextIndex, 'smooth');
-    }
-    toggleActiveOption() {
-        const option = this.activeOption();
-        if (option) {
-            this.optionChanged(!this.isSelected(option.value), option);
-        }
-    }
-    updateLabel() {
-        this.value = this.value || [];
-        let displayedLabel = '';
-        let tooltip = '';
-        const sortedLabels = this.options()
-            .filter(option => this.value.includes(option.value))
-            .map(item => item?.label ?? '');
-        if (sortedLabels.length > 0) {
-            displayedLabel = this.options().find(option => option.value === this.value[0])?.label ?? '';
-            tooltip = `${this.label}${sortedLabels.map(value => `\n • ${value}`).join('')}`;
-        }
-        if (this.value.length > 1) {
-            displayedLabel += ` (+${this.value.length - 1})`;
-        }
-        this.displayedLabel.set(displayedLabel);
-        this.tooltip.set(tooltip);
-        this.cdr.markForCheck();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FilterButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: FilterButtonComponent, isStandalone: true, selector: "ui-filter-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: false, isRequired: false, transformFunction: null }, singleSelection: { classPropertyName: "singleSelection", publicName: "singleSelection", isSignal: false, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: false, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: false, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: false, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", optionChange: "optionChange" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme", "class.ui-filter-button-full-width": "this.fullWidthClass" } }, viewQueries: [{ propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "triggerOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <ui-button\n    [matTooltip]=\"tooltip()\"\n    [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n    [matTooltipPosition]=\"'above'\"\n    class=\"ui-filter-button-trigger\"\n    [class.button-opened]=\"isOpen()\"\n    [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n    [label]=\"displayedLabel() || label\"\n    [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n    (click)=\"toggle()\"\n    type=\"button\"\n    size=\"small\"\n    [role]=\"'combobox'\"\n    [tooltip]=\"value.length ? ' ' : ''\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [testId]=\"testId\"\n    [ariaLabel]=\"ariaLabel\"\n    [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n    [iconPosition]=\"iconPosition\"\n    [applicationTheme]=\"applicationTheme\"\n    [fullWidth]=\"fullWidth\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n  ></ui-button>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayMatchWidth]=\"fullWidth\"\n    [cdkConnectedOverlayMinWidth]=\"fullWidth ? PANEL_MIN_WIDTH : ''\"\n    [cdkConnectedOverlayPanelClass]=\"fullWidth ? MATCH_TRIGGER_PANEL_CLASS : ''\"\n    (overlayOutsideClick)=\"outsideClick()\"\n  >\n    @if (activeOption(); as active) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          translationContext + 'ACTIVE_ITEM' | uiTranslate: { active: activePosition(), total: optionCount() } | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          (value.includes(active.value) ? translationContext + 'SELECTED' : translationContext + 'DESELECTED')\n            | uiTranslate\n            | async\n        }}\n      </div>\n    }\n    <div class=\"ui-filter-button\" #overlayContainer [attr.data-testid]=\"panelTestId\">\n      @if (options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH) {\n        <div class=\"ui-filter-button-header\">\n          <ui-field\n            type=\"search\"\n            [showBottomContent]=\"false\"\n            [ngModel]=\"search()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            [applicationTheme]=\"applicationTheme\"\n          ></ui-field>\n        </div>\n      }\n      <div\n        class=\"ui-filter-button-list\"\n        #list\n        tabindex=\"0\"\n        role=\"listbox\"\n        [attr.aria-activedescendant]=\"isOpen() && activeOption() ? 'ui-fb-option-' + activeIndex() : null\"\n        (keydown)=\"keyDownHandler($event)\"\n      >\n        @if (!displayedOptions().length && options().length) {\n          <div class=\"no-results-found\">\n            <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n          </div>\n        } @else {\n          <cdk-virtual-scroll-viewport\n            class=\"ui-filter-button-viewport\"\n            [itemSize]=\"ITEM_SIZE\"\n            [style.height.px]=\"listHeight()\"\n          >\n            <ng-container *cdkVirtualFor=\"let row of flatOptions(); let i = index; trackBy: trackByRow\">\n              @if (row.kind === 'header') {\n                <div class=\"section-title\">\n                  {{ row.title }}\n                </div>\n              } @else {\n                <div\n                  class=\"item\"\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  [id]=\"'ui-fb-option-' + i\"\n                  [class.item-selected]=\"isSelected(row.option.value)\"\n                  [class.item-active]=\"activeIndex() === i\"\n                  [attr.aria-selected]=\"isSelected(row.option.value)\"\n                  (click)=\"activeIndex.set(i); optionChanged(!isSelected(row.option.value), row.option)\"\n                  (keydown.enter)=\"optionChanged(!isSelected(row.option.value), row.option)\"\n                >\n                  @if (singleSelection) {\n                    <ui-radio-button\n                      (click)=\"$event.stopPropagation()\"\n                      [tabIndex]=\"-1\"\n                      [selected]=\"isSelected(row.option.value)\"\n                      (changeRadio)=\"optionChanged($event.optionChecked, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    >\n                    </ui-radio-button>\n                  }\n                  @if (!singleSelection) {\n                    <ui-checkbox\n                      (click)=\"$event.stopPropagation()\"\n                      [class.with-label-number]=\"row.option.labelNumber !== undefined\"\n                      [tabIndex]=\"-1\"\n                      [checked]=\"isSelected(row.option.value)\"\n                      (changed)=\"optionChanged($event, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    ></ui-checkbox>\n                  }\n                  @if (row.option.icon) {\n                    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"row.option.icon\"></ui-icon>\n                  }\n                  <span\n                    #tooltip=\"matTooltip\"\n                    class=\"item-label\"\n                    uiEllipseText\n                    [refresh]=\"row.option.value\"\n                    (onChangeTextState)=\"onLabelEllipsisChange($event, row.option.value)\"\n                    [matTooltip]=\"showTooltip[row.option.value] ? row.option.label : ''\"\n                    [matTooltipClass]=\"applicationTheme\"\n                  >\n                    {{ row.option.label }}\n                  </span>\n                  @if (row.option.labelNumber !== undefined) {\n                    <span class=\"item-number\">({{ row.option.labelNumber }})</span>\n                  }\n                </div>\n              }\n            </ng-container>\n          </cdk-virtual-scroll-viewport>\n        }\n      </div>\n      @if (!options().length && !!noOptionsMessage) {\n        <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n      } @else {\n        @if (allowClear || message) {\n          <div class=\"ui-filter-button-footer\">\n            @if (allowClear) {\n              <ui-button\n                variant=\"text\"\n                size=\"small\"\n                [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n                (click)=\"clearValue()\"\n                [applicationTheme]=\"applicationTheme\"\n                [testId]=\"resetButtonTestId\"\n                (keydown.escape)=\"toggle()\"\n              ></ui-button>\n            }\n            <div class=\"ui-filter-button-footer-message\">\n              {{ message }}\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}ui-filter-button{display:inline-block}ui-filter-button.ui-filter-button-full-width{display:block;width:100%}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title{display:flex;align-items:center;height:48px;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .no-results-found{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-active,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-radio-button{margin-right:4px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport{width:100%;max-height:290px;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport .cdk-virtual-scroll-content-wrapper{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-no-options{padding:24px}.cdk-overlay-container .cdk-overlay-pane.ui-filter-button-panel-match-trigger .ui-filter-button{width:100%}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "trailingIconName", "trailingIconFilled", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "testId", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RadioButtonComponent, selector: "ui-radio-button", inputs: ["disabled", "selected", "allowUnselect", "companyColor", "name", "label", "multiple", "mediaCard", "value", "applicationTheme", "ariaLabel", "testId", "ariaRequired", "hasError", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex", "hideTooltipOnEllipsis"], outputs: ["changeRadio"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "testId", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FilterButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-filter-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        ButtonComponent,
-                        CdkOverlayOrigin,
-                        MatTooltip,
-                        CdkConnectedOverlay,
-                        CdkVirtualScrollViewport,
-                        CdkFixedSizeVirtualScroll,
-                        CdkVirtualForOf,
-                        FieldComponent,
-                        FormsModule,
-                        RadioButtonComponent,
-                        CheckboxComponent,
-                        IconComponent,
-                        EllipseTextDirective,
-                        AsyncPipe,
-                        UiTranslatePipe,
-                    ], template: "<ng-container>\n  <ui-button\n    [matTooltip]=\"tooltip()\"\n    [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n    [matTooltipPosition]=\"'above'\"\n    class=\"ui-filter-button-trigger\"\n    [class.button-opened]=\"isOpen()\"\n    [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n    [label]=\"displayedLabel() || label\"\n    [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n    (click)=\"toggle()\"\n    type=\"button\"\n    size=\"small\"\n    [role]=\"'combobox'\"\n    [tooltip]=\"value.length ? ' ' : ''\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [testId]=\"testId\"\n    [ariaLabel]=\"ariaLabel\"\n    [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n    [iconPosition]=\"iconPosition\"\n    [applicationTheme]=\"applicationTheme\"\n    [fullWidth]=\"fullWidth\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n  ></ui-button>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayMatchWidth]=\"fullWidth\"\n    [cdkConnectedOverlayMinWidth]=\"fullWidth ? PANEL_MIN_WIDTH : ''\"\n    [cdkConnectedOverlayPanelClass]=\"fullWidth ? MATCH_TRIGGER_PANEL_CLASS : ''\"\n    (overlayOutsideClick)=\"outsideClick()\"\n  >\n    @if (activeOption(); as active) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          translationContext + 'ACTIVE_ITEM' | uiTranslate: { active: activePosition(), total: optionCount() } | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          (value.includes(active.value) ? translationContext + 'SELECTED' : translationContext + 'DESELECTED')\n            | uiTranslate\n            | async\n        }}\n      </div>\n    }\n    <div class=\"ui-filter-button\" #overlayContainer [attr.data-testid]=\"panelTestId\">\n      @if (options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH) {\n        <div class=\"ui-filter-button-header\">\n          <ui-field\n            type=\"search\"\n            [showBottomContent]=\"false\"\n            [ngModel]=\"search()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            [applicationTheme]=\"applicationTheme\"\n          ></ui-field>\n        </div>\n      }\n      <div\n        class=\"ui-filter-button-list\"\n        #list\n        tabindex=\"0\"\n        role=\"listbox\"\n        [attr.aria-activedescendant]=\"isOpen() && activeOption() ? 'ui-fb-option-' + activeIndex() : null\"\n        (keydown)=\"keyDownHandler($event)\"\n      >\n        @if (!displayedOptions().length && options().length) {\n          <div class=\"no-results-found\">\n            <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n          </div>\n        } @else {\n          <cdk-virtual-scroll-viewport\n            class=\"ui-filter-button-viewport\"\n            [itemSize]=\"ITEM_SIZE\"\n            [style.height.px]=\"listHeight()\"\n          >\n            <ng-container *cdkVirtualFor=\"let row of flatOptions(); let i = index; trackBy: trackByRow\">\n              @if (row.kind === 'header') {\n                <div class=\"section-title\">\n                  {{ row.title }}\n                </div>\n              } @else {\n                <div\n                  class=\"item\"\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  [id]=\"'ui-fb-option-' + i\"\n                  [class.item-selected]=\"isSelected(row.option.value)\"\n                  [class.item-active]=\"activeIndex() === i\"\n                  [attr.aria-selected]=\"isSelected(row.option.value)\"\n                  (click)=\"activeIndex.set(i); optionChanged(!isSelected(row.option.value), row.option)\"\n                  (keydown.enter)=\"optionChanged(!isSelected(row.option.value), row.option)\"\n                >\n                  @if (singleSelection) {\n                    <ui-radio-button\n                      (click)=\"$event.stopPropagation()\"\n                      [tabIndex]=\"-1\"\n                      [selected]=\"isSelected(row.option.value)\"\n                      (changeRadio)=\"optionChanged($event.optionChecked, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    >\n                    </ui-radio-button>\n                  }\n                  @if (!singleSelection) {\n                    <ui-checkbox\n                      (click)=\"$event.stopPropagation()\"\n                      [class.with-label-number]=\"row.option.labelNumber !== undefined\"\n                      [tabIndex]=\"-1\"\n                      [checked]=\"isSelected(row.option.value)\"\n                      (changed)=\"optionChanged($event, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    ></ui-checkbox>\n                  }\n                  @if (row.option.icon) {\n                    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"row.option.icon\"></ui-icon>\n                  }\n                  <span\n                    #tooltip=\"matTooltip\"\n                    class=\"item-label\"\n                    uiEllipseText\n                    [refresh]=\"row.option.value\"\n                    (onChangeTextState)=\"onLabelEllipsisChange($event, row.option.value)\"\n                    [matTooltip]=\"showTooltip[row.option.value] ? row.option.label : ''\"\n                    [matTooltipClass]=\"applicationTheme\"\n                  >\n                    {{ row.option.label }}\n                  </span>\n                  @if (row.option.labelNumber !== undefined) {\n                    <span class=\"item-number\">({{ row.option.labelNumber }})</span>\n                  }\n                </div>\n              }\n            </ng-container>\n          </cdk-virtual-scroll-viewport>\n        }\n      </div>\n      @if (!options().length && !!noOptionsMessage) {\n        <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n      } @else {\n        @if (allowClear || message) {\n          <div class=\"ui-filter-button-footer\">\n            @if (allowClear) {\n              <ui-button\n                variant=\"text\"\n                size=\"small\"\n                [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n                (click)=\"clearValue()\"\n                [applicationTheme]=\"applicationTheme\"\n                [testId]=\"resetButtonTestId\"\n                (keydown.escape)=\"toggle()\"\n              ></ui-button>\n            }\n            <div class=\"ui-filter-button-footer-message\">\n              {{ message }}\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}ui-filter-button{display:inline-block}ui-filter-button.ui-filter-button-full-width{display:block;width:100%}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title{display:flex;align-items:center;height:48px;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .no-results-found{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-active,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-radio-button{margin-right:4px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport{width:100%;max-height:290px;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport .cdk-virtual-scroll-content-wrapper{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-no-options{padding:24px}.cdk-overlay-container .cdk-overlay-pane.ui-filter-button-panel-match-trigger .ui-filter-button{width:100%}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }], propDecorators: { class: [{
-                type: HostBinding
-            }], label: [{
-                type: Input
-            }], message: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], allowClear: [{
-                type: Input
-            }], singleSelection: [{
-                type: Input
-            }], iconName: [{
-                type: Input
-            }], iconPosition: [{
-                type: Input
-            }], noOptionsMessage: [{
-                type: Input
-            }], fullWidth: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], testId: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], changed: [{
-                type: Output
-            }], optionChange: [{
-                type: Output
-            }], applicationTheme: [{
-                type: HostBinding,
-                args: ['attr.theme']
-            }, {
-                type: Input
-            }], fullWidthClass: [{
-                type: HostBinding,
-                args: ['class.ui-filter-button-full-width']
-            }], overlayContainer: [{
-                type: ViewChild,
-                args: ['overlayContainer']
-            }], viewport: [{
-                type: ViewChild,
-                args: [CdkVirtualScrollViewport]
-            }], triggerOrigin: [{
-                type: ViewChild,
-                args: [CdkOverlayOrigin]
-            }], connectedOverlay: [{
-                type: ViewChild,
-                args: [CdkConnectedOverlay]
-            }] } });
-
-class FilterButtonComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FilterButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: FilterButtonComponentModule, imports: [CommonModule,
-            FormsModule,
-            MatTooltipModule,
-            OverlayModule,
-            UiTranslatePipe,
-            ButtonComponentModule,
-            IconComponentModule,
-            CheckboxComponentModule,
-            FieldComponentModule,
-            EllipseTextDirective,
-            RadioButtonComponentModule,
-            FilterButtonComponent], exports: [FilterButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FilterButtonComponentModule, imports: [CommonModule,
-            FormsModule,
-            MatTooltipModule,
-            OverlayModule,
-            ButtonComponentModule,
-            IconComponentModule,
-            CheckboxComponentModule,
-            FieldComponentModule,
-            RadioButtonComponentModule,
-            FilterButtonComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FilterButtonComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatTooltipModule,
-                        OverlayModule,
-                        UiTranslatePipe,
-                        ButtonComponentModule,
-                        IconComponentModule,
-                        CheckboxComponentModule,
-                        FieldComponentModule,
-                        EllipseTextDirective,
-                        RadioButtonComponentModule,
-                        FilterButtonComponent,
-                    ],
-                    exports: [FilterButtonComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from "@angular/cdk/overlay";
+import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
+import { AsyncPipe, CommonModule } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Inject, Input, NgModule, Optional, Output, ViewChild, ViewEncapsulation, booleanAttribute, computed, input, signal } from "@angular/core";
+import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { MatTooltip, MatTooltipModule } from "@angular/material/tooltip";
+import { EMPTY, Subject, fromEvent } from "rxjs";
+import { debounceTime, switchMap } from "rxjs/operators";
+import { ButtonComponent, ButtonComponentModule } from "@testgorilla/tgo-ui/components/button";
+import { CheckboxComponent, CheckboxComponentModule } from "@testgorilla/tgo-ui/components/checkbox";
+import { EllipseTextDirective, IKeyboardEvent, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import { FieldComponent, FieldComponentModule } from "@testgorilla/tgo-ui/components/field";
+import { IconComponent, IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import { RadioButtonComponent, RadioButtonComponentModule } from "@testgorilla/tgo-ui/components/radio-button";
+var FilterButtonComponent = class FilterButtonComponent {
+	get panelTestId() {
+		return this.testId ? `${this.testId}-panel` : null;
+	}
+	get resetButtonTestId() {
+		return this.testId ? `${this.testId}-reset` : null;
+	}
+	get fullWidthClass() {
+		return this.fullWidth;
+	}
+	constructor(defaultAppTheme, cdr, destroyRef) {
+		this.defaultAppTheme = defaultAppTheme;
+		this.cdr = cdr;
+		this.class = "ui-filter-button";
+		this.label = "";
+		this.message = "";
+		this.value = [];
+		this.disabled = false;
+		this.options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+		this.allowClear = true;
+		this.singleSelection = false;
+		this.iconPosition = "right";
+		this.noOptionsMessage = "";
+		this.fullWidth = false;
+		this.testId = null;
+		this.ariaLabel = "";
+		this.changed = new EventEmitter();
+		this.optionChange = new EventEmitter();
+		this.applicationTheme = "light";
+		this.ITEM_SIZE = 48;
+		this.MAX_LIST_HEIGHT = 290;
+		this.PANEL_MIN_WIDTH = 240;
+		this.MATCH_TRIGGER_PANEL_CLASS = "ui-filter-button-panel-match-trigger";
+		this.isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+		this.displayedLabel = signal("", ...ngDevMode ? [{ debugName: "displayedLabel" }] : /* istanbul ignore next */ []);
+		this.tooltip = signal("", ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
+		this.search = signal("", ...ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []);
+		this.activeIndex = signal(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+		this.showTooltip = {};
+		this.displayedOptions = computed(() => {
+			let lastSectionTitle;
+			return this.options().map((option) => {
+				lastSectionTitle = option.sectionTitle || lastSectionTitle;
+				return {
+					...option,
+					sectionTitle: lastSectionTitle
+				};
+			}).filter((option) => option.label.toLowerCase().includes(this.search().toLowerCase()));
+		}, ...ngDevMode ? [{ debugName: "displayedOptions" }] : /* istanbul ignore next */ []);
+		this.flatOptions = computed(() => {
+			const rows = [];
+			let lastTitle;
+			for (const option of this.displayedOptions()) {
+				if (option.sectionTitle && option.sectionTitle !== lastTitle) {
+					lastTitle = option.sectionTitle;
+					rows.push({
+						kind: "header",
+						title: option.sectionTitle
+					});
+				}
+				rows.push({
+					kind: "option",
+					option
+				});
+			}
+			return rows;
+		}, ...ngDevMode ? [{ debugName: "flatOptions" }] : /* istanbul ignore next */ []);
+		this.optionCount = computed(() => this.displayedOptions().length, ...ngDevMode ? [{ debugName: "optionCount" }] : /* istanbul ignore next */ []);
+		this.activeOption = computed(() => {
+			const row = this.flatOptions()[this.activeIndex()];
+			return row?.kind === "option" ? row.option : void 0;
+		}, ...ngDevMode ? [{ debugName: "activeOption" }] : /* istanbul ignore next */ []);
+		this.activePosition = computed(() => {
+			const rows = this.flatOptions();
+			const activeIndex = this.activeIndex();
+			let position = 0;
+			for (let i = 0; i <= activeIndex && i < rows.length; i++) if (rows[i].kind === "option") position++;
+			return position;
+		}, ...ngDevMode ? [{ debugName: "activePosition" }] : /* istanbul ignore next */ []);
+		this.listHeight = computed(() => Math.min(Math.max(this.flatOptions().length * this.ITEM_SIZE, this.ITEM_SIZE), this.MAX_LIST_HEIGHT), ...ngDevMode ? [{ debugName: "listHeight" }] : /* istanbul ignore next */ []);
+		this.trackByRow = (_index, row) => row.kind === "header" ? `header:${row.title}` : `option:${row.option.value}`;
+		this.MIN_OPTIONS_LENGTH_FOR_SEARCH = 8;
+		this.translationContext = "FILTER_BUTTON.";
+		this.searchInput$ = new Subject();
+		if (this.defaultAppTheme) this.applicationTheme = this.defaultAppTheme;
+		this.searchInput$.pipe(debounceTime(150), takeUntilDestroyed(destroyRef)).subscribe((value) => {
+			this.search.set(value);
+			this.activeIndex.set(this.firstOptionIndex());
+			this.cdr.markForCheck();
+		});
+		toObservable(this.isOpen).pipe(switchMap((open) => open && this.fullWidth ? fromEvent(window, "resize").pipe(debounceTime(100)) : EMPTY), takeUntilDestroyed(destroyRef)).subscribe(() => this.syncPanelWidth());
+	}
+	syncPanelWidth() {
+		const overlayRef = this.connectedOverlay?.overlayRef;
+		const trigger = this.triggerOrigin?.elementRef.nativeElement;
+		if (!overlayRef || !trigger) return;
+		overlayRef.updateSize({ width: trigger.getBoundingClientRect().width });
+		overlayRef.updatePosition();
+	}
+	ngOnChanges(changes) {
+		if (changes["value"]) this.updateLabel();
+	}
+	clearValue() {
+		this.value = [];
+		this.updateLabel();
+		this.changed.emit(this.value);
+	}
+	outsideClick() {
+		window.setTimeout(() => {
+			this.isOpen.set(false);
+		});
+	}
+	toggle() {
+		this.isOpen.set(!this.isOpen());
+		if (this.isOpen()) this.activeIndex.set(this.firstOptionIndex());
+		this.cdr.markForCheck();
+	}
+	isSelected(value) {
+		return this.value?.includes(value ?? "");
+	}
+	optionChanged(selected, option) {
+		this.value = this.value || [];
+		if (this.singleSelection) this.value = selected ? [option.value] : [];
+		else if (selected) this.value.push(option.value);
+		else this.value.splice(this.value.indexOf(option.value), 1);
+		this.changed.emit(this.value);
+		this.optionChange.emit({
+			selected,
+			option
+		});
+		this.updateLabel();
+	}
+	onSearchChange(value) {
+		this.searchInput$.next(value);
+	}
+	keyDownHandler(ev) {
+		if (ev.key === IKeyboardEvent.ARROW_DOWN) {
+			ev.preventDefault();
+			this.moveActive(1);
+		} else if (ev.key === IKeyboardEvent.ARROW_UP) {
+			ev.preventDefault();
+			this.moveActive(-1);
+		} else if (ev.key === IKeyboardEvent.ENTER || ev.key === IKeyboardEvent.SPACE) {
+			ev.preventDefault();
+			this.toggleActiveOption();
+		} else if (ev.key === IKeyboardEvent.ESCAPE) this.isOpen.set(false);
+	}
+	onLabelEllipsisChange(isEllipsis, value) {
+		this.showTooltip[value] = isEllipsis;
+	}
+	firstOptionIndex() {
+		const index = this.flatOptions().findIndex((row) => row.kind === "option");
+		return index === -1 ? 0 : index;
+	}
+	moveActive(delta) {
+		const rows = this.flatOptions();
+		const optionIndexes = [];
+		rows.forEach((row, index) => {
+			if (row.kind === "option") optionIndexes.push(index);
+		});
+		if (!optionIndexes.length) return;
+		const currentPos = optionIndexes.indexOf(this.activeIndex());
+		const nextIndex = optionIndexes[((currentPos === -1 ? 0 : currentPos) + delta + optionIndexes.length) % optionIndexes.length];
+		this.activeIndex.set(nextIndex);
+		this.viewport?.scrollToIndex(nextIndex, "smooth");
+	}
+	toggleActiveOption() {
+		const option = this.activeOption();
+		if (option) this.optionChanged(!this.isSelected(option.value), option);
+	}
+	updateLabel() {
+		this.value = this.value || [];
+		let displayedLabel = "";
+		let tooltip = "";
+		const sortedLabels = this.options().filter((option) => this.value.includes(option.value)).map((item) => item?.label ?? "");
+		if (sortedLabels.length > 0) {
+			displayedLabel = this.options().find((option) => option.value === this.value[0])?.label ?? "";
+			tooltip = `${this.label}${sortedLabels.map((value) => `\n • ${value}`).join("")}`;
+		}
+		if (this.value.length > 1) displayedLabel += ` (+${this.value.length - 1})`;
+		this.displayedLabel.set(displayedLabel);
+		this.tooltip.set(tooltip);
+		this.cdr.markForCheck();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: FilterButtonComponent,
+			deps: [
+				{
+					token: "CANOPYUI_DEFAULT_APPLICATION_THEME",
+					optional: true
+				},
+				{ token: i0.ChangeDetectorRef },
+				{ token: i0.DestroyRef }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: FilterButtonComponent,
+			isStandalone: true,
+			selector: "ui-filter-button",
+			inputs: {
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				message: {
+					classPropertyName: "message",
+					publicName: "message",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				options: {
+					classPropertyName: "options",
+					publicName: "options",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				allowClear: {
+					classPropertyName: "allowClear",
+					publicName: "allowClear",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				singleSelection: {
+					classPropertyName: "singleSelection",
+					publicName: "singleSelection",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconName: {
+					classPropertyName: "iconName",
+					publicName: "iconName",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconPosition: {
+					classPropertyName: "iconPosition",
+					publicName: "iconPosition",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				noOptionsMessage: {
+					classPropertyName: "noOptionsMessage",
+					publicName: "noOptionsMessage",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				fullWidth: {
+					classPropertyName: "fullWidth",
+					publicName: "fullWidth",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: booleanAttribute
+				},
+				testId: {
+					classPropertyName: "testId",
+					publicName: "testId",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				applicationTheme: {
+					classPropertyName: "applicationTheme",
+					publicName: "applicationTheme",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				changed: "changed",
+				optionChange: "optionChange"
+			},
+			host: { properties: {
+				"class": "this.class",
+				"attr.theme": "this.applicationTheme",
+				"class.ui-filter-button-full-width": "this.fullWidthClass"
+			} },
+			viewQueries: [
+				{
+					propertyName: "overlayContainer",
+					first: true,
+					predicate: ["overlayContainer"],
+					descendants: true
+				},
+				{
+					propertyName: "viewport",
+					first: true,
+					predicate: CdkVirtualScrollViewport,
+					descendants: true
+				},
+				{
+					propertyName: "triggerOrigin",
+					first: true,
+					predicate: CdkOverlayOrigin,
+					descendants: true
+				},
+				{
+					propertyName: "connectedOverlay",
+					first: true,
+					predicate: CdkConnectedOverlay,
+					descendants: true
+				}
+			],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: "<ng-container>\n  <ui-button\n    [matTooltip]=\"tooltip()\"\n    [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n    [matTooltipPosition]=\"'above'\"\n    class=\"ui-filter-button-trigger\"\n    [class.button-opened]=\"isOpen()\"\n    [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n    [label]=\"displayedLabel() || label\"\n    [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n    (click)=\"toggle()\"\n    type=\"button\"\n    size=\"small\"\n    [role]=\"'combobox'\"\n    [tooltip]=\"value.length ? ' ' : ''\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [testId]=\"testId\"\n    [ariaLabel]=\"ariaLabel\"\n    [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n    [iconPosition]=\"iconPosition\"\n    [applicationTheme]=\"applicationTheme\"\n    [fullWidth]=\"fullWidth\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n  ></ui-button>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayMatchWidth]=\"fullWidth\"\n    [cdkConnectedOverlayMinWidth]=\"fullWidth ? PANEL_MIN_WIDTH : ''\"\n    [cdkConnectedOverlayPanelClass]=\"fullWidth ? MATCH_TRIGGER_PANEL_CLASS : ''\"\n    (overlayOutsideClick)=\"outsideClick()\"\n  >\n    @if (activeOption(); as active) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          translationContext + 'ACTIVE_ITEM' | uiTranslate: { active: activePosition(), total: optionCount() } | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          (value.includes(active.value) ? translationContext + 'SELECTED' : translationContext + 'DESELECTED')\n            | uiTranslate\n            | async\n        }}\n      </div>\n    }\n    <div class=\"ui-filter-button\" #overlayContainer [attr.data-testid]=\"panelTestId\">\n      @if (options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH) {\n        <div class=\"ui-filter-button-header\">\n          <ui-field\n            type=\"search\"\n            [showBottomContent]=\"false\"\n            [ngModel]=\"search()\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            [applicationTheme]=\"applicationTheme\"\n          ></ui-field>\n        </div>\n      }\n      <div\n        class=\"ui-filter-button-list\"\n        #list\n        tabindex=\"0\"\n        role=\"listbox\"\n        [attr.aria-activedescendant]=\"isOpen() && activeOption() ? 'ui-fb-option-' + activeIndex() : null\"\n        (keydown)=\"keyDownHandler($event)\"\n      >\n        @if (!displayedOptions().length && options().length) {\n          <div class=\"no-results-found\">\n            <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n          </div>\n        } @else {\n          <cdk-virtual-scroll-viewport\n            class=\"ui-filter-button-viewport\"\n            [itemSize]=\"ITEM_SIZE\"\n            [style.height.px]=\"listHeight()\"\n          >\n            <ng-container *cdkVirtualFor=\"let row of flatOptions(); let i = index; trackBy: trackByRow\">\n              @if (row.kind === 'header') {\n                <div class=\"section-title\">\n                  {{ row.title }}\n                </div>\n              } @else {\n                <div\n                  class=\"item\"\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  [id]=\"'ui-fb-option-' + i\"\n                  [class.item-selected]=\"isSelected(row.option.value)\"\n                  [class.item-active]=\"activeIndex() === i\"\n                  [attr.aria-selected]=\"isSelected(row.option.value)\"\n                  (click)=\"activeIndex.set(i); optionChanged(!isSelected(row.option.value), row.option)\"\n                  (keydown.enter)=\"optionChanged(!isSelected(row.option.value), row.option)\"\n                >\n                  @if (singleSelection) {\n                    <ui-radio-button\n                      (click)=\"$event.stopPropagation()\"\n                      [tabIndex]=\"-1\"\n                      [selected]=\"isSelected(row.option.value)\"\n                      (changeRadio)=\"optionChanged($event.optionChecked, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    >\n                    </ui-radio-button>\n                  }\n                  @if (!singleSelection) {\n                    <ui-checkbox\n                      (click)=\"$event.stopPropagation()\"\n                      [class.with-label-number]=\"row.option.labelNumber !== undefined\"\n                      [tabIndex]=\"-1\"\n                      [checked]=\"isSelected(row.option.value)\"\n                      (changed)=\"optionChanged($event, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    ></ui-checkbox>\n                  }\n                  @if (row.option.icon) {\n                    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"row.option.icon\"></ui-icon>\n                  }\n                  <span\n                    #tooltip=\"matTooltip\"\n                    class=\"item-label\"\n                    uiEllipseText\n                    [refresh]=\"row.option.value\"\n                    (onChangeTextState)=\"onLabelEllipsisChange($event, row.option.value)\"\n                    [matTooltip]=\"showTooltip[row.option.value] ? row.option.label : ''\"\n                    [matTooltipClass]=\"applicationTheme\"\n                  >\n                    {{ row.option.label }}\n                  </span>\n                  @if (row.option.labelNumber !== undefined) {\n                    <span class=\"item-number\">({{ row.option.labelNumber }})</span>\n                  }\n                </div>\n              }\n            </ng-container>\n          </cdk-virtual-scroll-viewport>\n        }\n      </div>\n      @if (!options().length && !!noOptionsMessage) {\n        <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n      } @else {\n        @if (allowClear || message) {\n          <div class=\"ui-filter-button-footer\">\n            @if (allowClear) {\n              <ui-button\n                variant=\"text\"\n                size=\"small\"\n                [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n                (click)=\"clearValue()\"\n                [applicationTheme]=\"applicationTheme\"\n                [testId]=\"resetButtonTestId\"\n                (keydown.escape)=\"toggle()\"\n              ></ui-button>\n            }\n            <div class=\"ui-filter-button-footer-message\">\n              {{ message }}\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </ng-template>\n</ng-container>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}ui-filter-button{display:inline-block}ui-filter-button.ui-filter-button-full-width{display:block;width:100%}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title{display:flex;align-items:center;height:48px;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .no-results-found{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-active,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-radio-button{margin-right:4px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport{width:100%;max-height:290px;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport .cdk-virtual-scroll-content-wrapper{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-no-options{padding:24px}.cdk-overlay-container .cdk-overlay-pane.ui-filter-button-panel-match-trigger .ui-filter-button{width:100%}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"size",
+						"variant",
+						"label",
+						"iconPosition",
+						"justIcon",
+						"iconName",
+						"trailingIconName",
+						"trailingIconFilled",
+						"disabled",
+						"loading",
+						"loadingWithLabel",
+						"fullWidth",
+						"url",
+						"urlTarget",
+						"value",
+						"tooltip",
+						"isPremium",
+						"type",
+						"companyColor",
+						"buttonBadgeConfig",
+						"applicationTheme",
+						"disabledScaleOnClick",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaControls",
+						"ariaPressed",
+						"ariaRequired",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"preventDefault",
+						"hasBackground",
+						"tooltipPosition",
+						"role",
+						"iconFilled",
+						"testId"
+					],
+					outputs: ["buttonClickEvent", "buttonHoverEvent"]
+				},
+				{
+					kind: "directive",
+					type: CdkOverlayOrigin,
+					selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+					exportAs: ["cdkOverlayOrigin"]
+				},
+				{
+					kind: "directive",
+					type: MatTooltip,
+					selector: "[matTooltip]",
+					inputs: [
+						"matTooltipPosition",
+						"matTooltipPositionAtOrigin",
+						"matTooltipDisabled",
+						"matTooltipShowDelay",
+						"matTooltipHideDelay",
+						"matTooltipTouchGestures",
+						"matTooltip",
+						"matTooltipClass"
+					],
+					exportAs: ["matTooltip"]
+				},
+				{
+					kind: "directive",
+					type: CdkConnectedOverlay,
+					selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+					inputs: [
+						"cdkConnectedOverlayOrigin",
+						"cdkConnectedOverlayPositions",
+						"cdkConnectedOverlayPositionStrategy",
+						"cdkConnectedOverlayOffsetX",
+						"cdkConnectedOverlayOffsetY",
+						"cdkConnectedOverlayWidth",
+						"cdkConnectedOverlayHeight",
+						"cdkConnectedOverlayMinWidth",
+						"cdkConnectedOverlayMinHeight",
+						"cdkConnectedOverlayBackdropClass",
+						"cdkConnectedOverlayPanelClass",
+						"cdkConnectedOverlayViewportMargin",
+						"cdkConnectedOverlayScrollStrategy",
+						"cdkConnectedOverlayOpen",
+						"cdkConnectedOverlayDisableClose",
+						"cdkConnectedOverlayTransformOriginOn",
+						"cdkConnectedOverlayHasBackdrop",
+						"cdkConnectedOverlayLockPosition",
+						"cdkConnectedOverlayFlexibleDimensions",
+						"cdkConnectedOverlayGrowAfterOpen",
+						"cdkConnectedOverlayPush",
+						"cdkConnectedOverlayDisposeOnNavigation",
+						"cdkConnectedOverlayUsePopover",
+						"cdkConnectedOverlayMatchWidth",
+						"cdkConnectedOverlay"
+					],
+					outputs: [
+						"backdropClick",
+						"positionChange",
+						"attach",
+						"detach",
+						"overlayKeydown",
+						"overlayOutsideClick"
+					],
+					exportAs: ["cdkConnectedOverlay"]
+				},
+				{
+					kind: "component",
+					type: CdkVirtualScrollViewport,
+					selector: "cdk-virtual-scroll-viewport",
+					inputs: ["orientation", "appendOnly"],
+					outputs: ["scrolledIndexChange"]
+				},
+				{
+					kind: "directive",
+					type: CdkFixedSizeVirtualScroll,
+					selector: "cdk-virtual-scroll-viewport[itemSize]",
+					inputs: [
+						"itemSize",
+						"minBufferPx",
+						"maxBufferPx"
+					]
+				},
+				{
+					kind: "directive",
+					type: CdkVirtualForOf,
+					selector: "[cdkVirtualFor][cdkVirtualForOf]",
+					inputs: [
+						"cdkVirtualForOf",
+						"cdkVirtualForTrackBy",
+						"cdkVirtualForTemplate",
+						"cdkVirtualForTemplateCacheSize"
+					]
+				},
+				{
+					kind: "component",
+					type: FieldComponent,
+					selector: "ui-field",
+					inputs: [
+						"fullWidth",
+						"fullHeight",
+						"label",
+						"labelHtml",
+						"labelIcon",
+						"fieldName",
+						"placeholder",
+						"id",
+						"value",
+						"badgeVariant",
+						"errors",
+						"disabled",
+						"required",
+						"readOnly",
+						"hintMessage",
+						"type",
+						"updateOnBlur",
+						"allowOnlyDigits",
+						"isAutocompleteOff",
+						"allowNegative",
+						"showBottomContent",
+						"applicationTheme",
+						"ariaLabel",
+						"testId",
+						"loading",
+						"isValid",
+						"maxCharacters",
+						"trimOnBlur",
+						"trimOnSubmit",
+						"maxRows",
+						"hasTextAreaCounter",
+						"hideBuiltInErrors",
+						"hideLabelInErrors",
+						"max",
+						"min",
+						"textareaHeight",
+						"borderless",
+						"autosizableTextarea",
+						"isAIVariant",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"hasError"
+					],
+					outputs: ["validateEvent", "fieldBlur"]
+				},
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.NgModel,
+					selector: "[ngModel]:not([formControlName]):not([formControl])",
+					inputs: [
+						"name",
+						"disabled",
+						"ngModel",
+						"ngModelOptions"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngModel"]
+				},
+				{
+					kind: "component",
+					type: RadioButtonComponent,
+					selector: "ui-radio-button",
+					inputs: [
+						"disabled",
+						"selected",
+						"allowUnselect",
+						"companyColor",
+						"name",
+						"label",
+						"multiple",
+						"mediaCard",
+						"value",
+						"applicationTheme",
+						"ariaLabel",
+						"testId",
+						"ariaRequired",
+						"hasError",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"truncateText",
+						"alignment",
+						"tabIndex",
+						"hideTooltipOnEllipsis"
+					],
+					outputs: ["changeRadio"]
+				},
+				{
+					kind: "component",
+					type: CheckboxComponent,
+					selector: "ui-checkbox",
+					inputs: [
+						"disabled",
+						"checked",
+						"indeterminate",
+						"companyColor",
+						"name",
+						"label",
+						"multiple",
+						"applicationTheme",
+						"ariaLabel",
+						"testId",
+						"ariaRequired",
+						"hasError",
+						"hideBuiltInErrors",
+						"hideLabelInErrors",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"truncateText",
+						"alignment",
+						"tabIndex"
+					],
+					outputs: ["changed"]
+				},
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "directive",
+					type: EllipseTextDirective,
+					selector: "[uiEllipseText]",
+					inputs: [
+						"isMultiline",
+						"maxDiffPixels",
+						"refresh"
+					],
+					outputs: ["onChangeTextState"]
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: FilterButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-filter-button",
+			encapsulation: ViewEncapsulation.None,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				ButtonComponent,
+				CdkOverlayOrigin,
+				MatTooltip,
+				CdkConnectedOverlay,
+				CdkVirtualScrollViewport,
+				CdkFixedSizeVirtualScroll,
+				CdkVirtualForOf,
+				FieldComponent,
+				FormsModule,
+				RadioButtonComponent,
+				CheckboxComponent,
+				IconComponent,
+				EllipseTextDirective,
+				AsyncPipe,
+				UiTranslatePipe
+			],
+			template: "<ng-container>\n  <ui-button\n    [matTooltip]=\"tooltip()\"\n    [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n    [matTooltipPosition]=\"'above'\"\n    class=\"ui-filter-button-trigger\"\n    [class.button-opened]=\"isOpen()\"\n    [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n    [label]=\"displayedLabel() || label\"\n    [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n    (click)=\"toggle()\"\n    type=\"button\"\n    size=\"small\"\n    [role]=\"'combobox'\"\n    [tooltip]=\"value.length ? ' ' : ''\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [testId]=\"testId\"\n    [ariaLabel]=\"ariaLabel\"\n    [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n    [iconPosition]=\"iconPosition\"\n    [applicationTheme]=\"applicationTheme\"\n    [fullWidth]=\"fullWidth\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n  ></ui-button>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayMatchWidth]=\"fullWidth\"\n    [cdkConnectedOverlayMinWidth]=\"fullWidth ? PANEL_MIN_WIDTH : ''\"\n    [cdkConnectedOverlayPanelClass]=\"fullWidth ? MATCH_TRIGGER_PANEL_CLASS : ''\"\n    (overlayOutsideClick)=\"outsideClick()\"\n  >\n    @if (activeOption(); as active) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          translationContext + 'ACTIVE_ITEM' | uiTranslate: { active: activePosition(), total: optionCount() } | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          (value.includes(active.value) ? translationContext + 'SELECTED' : translationContext + 'DESELECTED')\n            | uiTranslate\n            | async\n        }}\n      </div>\n    }\n    <div class=\"ui-filter-button\" #overlayContainer [attr.data-testid]=\"panelTestId\">\n      @if (options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH) {\n        <div class=\"ui-filter-button-header\">\n          <ui-field\n            type=\"search\"\n            [showBottomContent]=\"false\"\n            [ngModel]=\"search()\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            [applicationTheme]=\"applicationTheme\"\n          ></ui-field>\n        </div>\n      }\n      <div\n        class=\"ui-filter-button-list\"\n        #list\n        tabindex=\"0\"\n        role=\"listbox\"\n        [attr.aria-activedescendant]=\"isOpen() && activeOption() ? 'ui-fb-option-' + activeIndex() : null\"\n        (keydown)=\"keyDownHandler($event)\"\n      >\n        @if (!displayedOptions().length && options().length) {\n          <div class=\"no-results-found\">\n            <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n          </div>\n        } @else {\n          <cdk-virtual-scroll-viewport\n            class=\"ui-filter-button-viewport\"\n            [itemSize]=\"ITEM_SIZE\"\n            [style.height.px]=\"listHeight()\"\n          >\n            <ng-container *cdkVirtualFor=\"let row of flatOptions(); let i = index; trackBy: trackByRow\">\n              @if (row.kind === 'header') {\n                <div class=\"section-title\">\n                  {{ row.title }}\n                </div>\n              } @else {\n                <div\n                  class=\"item\"\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  [id]=\"'ui-fb-option-' + i\"\n                  [class.item-selected]=\"isSelected(row.option.value)\"\n                  [class.item-active]=\"activeIndex() === i\"\n                  [attr.aria-selected]=\"isSelected(row.option.value)\"\n                  (click)=\"activeIndex.set(i); optionChanged(!isSelected(row.option.value), row.option)\"\n                  (keydown.enter)=\"optionChanged(!isSelected(row.option.value), row.option)\"\n                >\n                  @if (singleSelection) {\n                    <ui-radio-button\n                      (click)=\"$event.stopPropagation()\"\n                      [tabIndex]=\"-1\"\n                      [selected]=\"isSelected(row.option.value)\"\n                      (changeRadio)=\"optionChanged($event.optionChecked, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    >\n                    </ui-radio-button>\n                  }\n                  @if (!singleSelection) {\n                    <ui-checkbox\n                      (click)=\"$event.stopPropagation()\"\n                      [class.with-label-number]=\"row.option.labelNumber !== undefined\"\n                      [tabIndex]=\"-1\"\n                      [checked]=\"isSelected(row.option.value)\"\n                      (changed)=\"optionChanged($event, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    ></ui-checkbox>\n                  }\n                  @if (row.option.icon) {\n                    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"row.option.icon\"></ui-icon>\n                  }\n                  <span\n                    #tooltip=\"matTooltip\"\n                    class=\"item-label\"\n                    uiEllipseText\n                    [refresh]=\"row.option.value\"\n                    (onChangeTextState)=\"onLabelEllipsisChange($event, row.option.value)\"\n                    [matTooltip]=\"showTooltip[row.option.value] ? row.option.label : ''\"\n                    [matTooltipClass]=\"applicationTheme\"\n                  >\n                    {{ row.option.label }}\n                  </span>\n                  @if (row.option.labelNumber !== undefined) {\n                    <span class=\"item-number\">({{ row.option.labelNumber }})</span>\n                  }\n                </div>\n              }\n            </ng-container>\n          </cdk-virtual-scroll-viewport>\n        }\n      </div>\n      @if (!options().length && !!noOptionsMessage) {\n        <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n      } @else {\n        @if (allowClear || message) {\n          <div class=\"ui-filter-button-footer\">\n            @if (allowClear) {\n              <ui-button\n                variant=\"text\"\n                size=\"small\"\n                [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n                (click)=\"clearValue()\"\n                [applicationTheme]=\"applicationTheme\"\n                [testId]=\"resetButtonTestId\"\n                (keydown.escape)=\"toggle()\"\n              ></ui-button>\n            }\n            <div class=\"ui-filter-button-footer-message\">\n              {{ message }}\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </ng-template>\n</ng-container>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}ui-filter-button{display:inline-block}ui-filter-button.ui-filter-button-full-width{display:block;width:100%}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title{display:flex;align-items:center;height:48px;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .no-results-found{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-active,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-radio-button{margin-right:4px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport{width:100%;max-height:290px;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport .cdk-virtual-scroll-content-wrapper{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-no-options{padding:24px}.cdk-overlay-container .cdk-overlay-pane.ui-filter-button-panel-match-trigger .ui-filter-button{width:100%}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{
+			type: void 0,
+			decorators: [{ type: Optional }, {
+				type: Inject,
+				args: ["CANOPYUI_DEFAULT_APPLICATION_THEME"]
+			}]
+		},
+		{ type: i0.ChangeDetectorRef },
+		{ type: i0.DestroyRef }
+	],
+	propDecorators: {
+		class: [{ type: HostBinding }],
+		label: [{ type: Input }],
+		message: [{ type: Input }],
+		value: [{ type: Input }],
+		disabled: [{ type: Input }],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		allowClear: [{ type: Input }],
+		singleSelection: [{ type: Input }],
+		iconName: [{ type: Input }],
+		iconPosition: [{ type: Input }],
+		noOptionsMessage: [{ type: Input }],
+		fullWidth: [{
+			type: Input,
+			args: [{ transform: booleanAttribute }]
+		}],
+		testId: [{ type: Input }],
+		ariaLabel: [{ type: Input }],
+		changed: [{ type: Output }],
+		optionChange: [{ type: Output }],
+		applicationTheme: [{
+			type: HostBinding,
+			args: ["attr.theme"]
+		}, { type: Input }],
+		fullWidthClass: [{
+			type: HostBinding,
+			args: ["class.ui-filter-button-full-width"]
+		}],
+		overlayContainer: [{
+			type: ViewChild,
+			args: ["overlayContainer"]
+		}],
+		viewport: [{
+			type: ViewChild,
+			args: [CdkVirtualScrollViewport]
+		}],
+		triggerOrigin: [{
+			type: ViewChild,
+			args: [CdkOverlayOrigin]
+		}],
+		connectedOverlay: [{
+			type: ViewChild,
+			args: [CdkConnectedOverlay]
+		}]
+	}
+});
+var FilterButtonComponentModule = class FilterButtonComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: FilterButtonComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: FilterButtonComponentModule,
+			imports: [
+				CommonModule,
+				FormsModule,
+				MatTooltipModule,
+				OverlayModule,
+				UiTranslatePipe,
+				ButtonComponentModule,
+				IconComponentModule,
+				CheckboxComponentModule,
+				FieldComponentModule,
+				EllipseTextDirective,
+				RadioButtonComponentModule,
+				FilterButtonComponent
+			],
+			exports: [FilterButtonComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: FilterButtonComponentModule,
+			imports: [
+				CommonModule,
+				FormsModule,
+				MatTooltipModule,
+				OverlayModule,
+				ButtonComponentModule,
+				IconComponentModule,
+				CheckboxComponentModule,
+				FieldComponentModule,
+				RadioButtonComponentModule,
+				FilterButtonComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: FilterButtonComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				FormsModule,
+				MatTooltipModule,
+				OverlayModule,
+				UiTranslatePipe,
+				ButtonComponentModule,
+				IconComponentModule,
+				CheckboxComponentModule,
+				FieldComponentModule,
+				EllipseTextDirective,
+				RadioButtonComponentModule,
+				FilterButtonComponent
+			],
+			exports: [FilterButtonComponent]
+		}]
+	}]
+});
 export { FilterButtonComponent, FilterButtonComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-filter-button.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-filter-button.mjs.map