@arsedizioni/ars-utils 22.6.85 → 22.6.88

package/fesm2022/arsedizioni-ars-utils-ui.controls.mjs

@@ -1,614 +1,1608 @@
-import * as i0 from '@angular/core';
-import { output, inject, Renderer2, signal, input, effect, Input, Optional, Self, ChangeDetectionStrategy, Component, computed, DestroyRef, booleanAttribute, ChangeDetectorRef, afterNextRender } from '@angular/core';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i4 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i3 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import { SystemUtils, SafeHtmlPipe } from '@arsedizioni/ars-utils/core';
-import * as i2 from '@arsedizioni/ars-utils/ui';
-import { FlexLayoutModule } from '@arsedizioni/ars-utils/ui';
-import { Subject, auditTime, animationFrameScheduler } from 'rxjs';
-import * as i1 from '@angular/forms';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { form, FormField } from '@angular/forms/signals';
-import * as i7 from '@angular/material/badge';
-import { MatBadgeModule } from '@angular/material/badge';
-import * as i4$1 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i2$1 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3$1 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i8 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-
-class ButtonSelectorComponent {
-    set value(value) {
-        this.setValue(value, true);
-    }
-    /**
-     * Updates the internal state. Form propagation is skipped for model->view
-     * writes (writeValue) to avoid the CVA echo loop, and performed for
-     * user/programmatic changes via the `value` setter.
-     * @param value     - The new value to store and display.
-     * @param propagate - When `true`, notifies the registered onChange callback.
-     */
-    setValue(value, propagate) {
-        this._value = value;
-        if (propagate) {
-            this.propagateChange(this._value);
-        }
-        this.stateChanges.next();
-        this.changed.emit(this._value);
-        this.current.set(this._value);
-    }
-    /** The current value as the selected item. */
-    get value() {
-        return this._value;
-    }
-    get disabled() {
-        if (this.ngControl && this.ngControl.disabled != null) {
-            return this.ngControl.disabled;
-        }
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        if (this.focused) {
-            this.focused = false;
-            this.stateChanges.next();
-        }
-    }
-    constructor(ngControl) {
-        this.ngControl = ngControl;
-        /** Emitted whenever the selected value changes (including programmatic resets). */
-        this.changed = output();
-        /** Emitted when the user explicitly picks an item from the menu. */
-        this.selected = output();
-        this.stateChanges = new Subject();
-        this.focused = false;
-        this._value = undefined;
-        this._disabled = false;
-        this.propagateChange = () => { };
-        this.propagateTouched = () => { };
-        this.id = `button-selector--${SystemUtils.generateUUID()}`;
-        this.describedBy = '';
-        this.renderer = inject(Renderer2);
-        /** Currently selected item, kept in sync with the form control value. */
-        this.current = signal(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
-        /** Width of the trigger button in pixels. Use `-1` for 100 %, `0` for `auto`. */
-        this.width = input(-1, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-        /** Border thickness override. Use `-1` to inherit. */
-        this.border = input(-1, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
-        /** CSS border-radius of the trigger button. Defaults to a pill shape. */
-        this.borderRadius = input('9999px', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "borderRadius" }] : /* istanbul ignore next */ []));
-        /** Placeholder label shown when nothing is selected. */
-        this.label = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        /** Label shown above the selected value (replaces `label` when an item is selected). */
-        this.labelSelected = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "labelSelected" }] : /* istanbul ignore next */ []));
-        /** List of selectable options. */
-        this.options = input([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        /** When `true`, the first available option is pre-selected on init. */
-        this.autoSelect = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "autoSelect" }] : /* istanbul ignore next */ []));
-        if (this.ngControl != null) {
-            this.ngControl.valueAccessor = this;
-        }
-        // Pre-select the first option whenever options change and autoSelect is enabled
-        effect(() => {
-            if (this.autoSelect()) {
-                const options = this.options();
-                // !== undefined: values like 0 or false are legitimate selections
-                if (options.length > 0 && options[0].value !== undefined) {
-                    this.current.set(options[0]);
-                }
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.stateChanges.complete();
-    }
-    /**
-     * Writes a new value to the component (called by the form layer).
-     * @param value - The new value to display.
-     */
-    writeValue(value) {
-        // Model -> view write: must NOT propagate back to the form (echo loop)
-        this.setValue(value, false);
-    }
-    /**
-     * Registers the on-change callback (called by the form layer).
-     * @param fn - Callback to invoke whenever the value changes.
-     */
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    /**
-     * Registers the on-touched callback (called by the form layer).
-     * @param fn - Callback to invoke when the control is touched.
-     */
-    registerOnTouched(fn) {
-        this.propagateTouched = fn;
-    }
-    /**
-     * Sets the ARIA described-by IDs for accessibility.
-     * @param ids - The list of element IDs to associate with this control.
-     */
-    setDescribedByIds(ids) {
-        this.describedBy = ids.join(' ');
-    }
-    /**
-     * Updates the disabled state when the Angular form layer changes it.
-     * @param isDisabled - Whether the control should be disabled.
-     */
-    setDisabledState(isDisabled) {
-        this._disabled = isDisabled;
-        if (isDisabled && this.focused) {
-            this.focused = false;
-            this.stateChanges.next();
-        }
-        if (!SystemUtils.isBrowser())
-            return;
-        const elem = document.getElementById(this.id);
-        if (elem) {
-            this.renderer.setProperty(elem, 'disabled', isDisabled);
-        }
-    }
-    /**
-     * Handles a click on the container element, focusing it and marking it as touched.
-     */
-    onContainerClick() {
-        if (!this.focused) {
-            if (!SystemUtils.isBrowser())
-                return;
-            const elem = document.getElementById(this.id);
-            if (elem) {
-                elem.focus();
-                this.propagateTouched();
-            }
-        }
-    }
-    /**
-     * Selects an option and optionally emits the `selected` output event.
-     * @param item   - The item to select.
-     * @param notify - When `true` (default), emits the `selected` event.
-     */
-    select(item, notify = true) {
-        this.setValue(item, true);
-        if (notify) {
-            this.selected.emit(item);
-        }
-    }
-    /** Clears the current selection and resets the control to an empty state. */
-    reset() {
-        this.setValue(undefined, true);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ButtonSelectorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: ButtonSelectorComponent, isStandalone: true, selector: "button-selector", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelSelected: { classPropertyName: "labelSelected", publicName: "labelSelected", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", selected: "selected" }, host: { properties: { "id": "id", "attr.aria-describedBy": "describedBy" } }, ngImport: i0, template: "<button mat-stroked-button class=\"menu-selector-button\" [style.border]=\"border() >= 0 ? border() : 'auto'\"\r\n    [style.border-radius]=\"borderRadius()\" [style.height]=\"border() <= 0 ? '40px' : 'auto'\"\r\n    [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\" [attr.aria-label]=\"label()\"\r\n    [matMenuTriggerFor]=\"optionsMenu\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n        <div fxFlex=\"100\" fxFlexAlign=\"center\">\r\n            @if(current()) {\r\n            <div style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                @if(labelSelected() || label()) {\r\n                <div class=\"x-small \">{{labelSelected() ?? label()}}</div>\r\n                <div fxHide.xs class=\"small truncated-1\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated-1\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                } @else {\r\n                <div fxHide.xs class=\"small truncated\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                }\r\n            </div>\r\n            } @else if(labelSelected() || label()) {\r\n            <div class=\"truncated\" style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                {{labelSelected() ?? label()}}</div>\r\n            }\r\n        </div>\r\n        <div fxLayoutAlign=\"end\" fxFlexAlign=\"center\">\r\n            <mat-icon>arrow_drop_down</mat-icon>\r\n        </div>\r\n    </div>\r\n</button>\r\n<mat-menu #optionsMenu=\"matMenu\">\r\n    @for (o of options(); track $index) {\r\n    <button mat-menu-item (click)=\"select(o)\" [disabled]=\"o.disabled\">\r\n        {{o.name}}\r\n        @if(o.bag) {\r\n        ({{o.bag}})\r\n        }\r\n    </button>\r\n    }\r\n</mat-menu>", styles: [".menu-selector-button{padding:0 10px 0 20px!important;border-radius:9999px!important}.menu-selector-button .in-search-bar{height:56px!important;padding:0 20px!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}::ng-deep .menu-selector-button>.mdc-button__label{width:100%!important}.truncated-1{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 1){.truncated-1{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i2.FxLayoutDirective, selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.FxFlexDirective, selector: "    [fxFlex],    [fxFlex.xs],    [fxFlex.sm],    [fxFlex.md],    [fxFlex.lg],    [fxFlex.xl],    [fxFlex.lt-sm],    [fxFlex.lt-md],    [fxFlex.lt-lg],    [fxFlex.lt-xl],    [fxFlex.gt-xs],    [fxFlex.gt-sm],    [fxFlex.gt-md],    [fxFlex.gt-lg]  ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2.FxShowHideDirective, selector: "    [fxShow],    [fxHide],    [fxShow.xs],    [fxShow.sm],    [fxShow.md],    [fxShow.lg],    [fxShow.xl],    [fxShow.lt-sm],    [fxShow.lt-md],    [fxShow.lt-lg],    [fxShow.lt-xl],    [fxShow.gt-xs],    [fxShow.gt-sm],    [fxShow.gt-md],    [fxShow.gt-lg],    [fxHide.xs],    [fxHide.sm],    [fxHide.md],    [fxHide.lg],    [fxHide.xl],    [fxHide.lt-sm],    [fxHide.lt-md],    [fxHide.lt-lg],    [fxHide.lt-xl],    [fxHide.gt-xs],    [fxHide.gt-sm],    [fxHide.gt-md],    [fxHide.gt-lg]  ", inputs: ["fxShow", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i2.FxLayoutAlignDirective, selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.FxLayoutGapDirective, selector: "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2.FxFlexAlignDirective, selector: "    [fxFlexAlign],    [fxFlexAlign.xs],    [fxFlexAlign.sm],    [fxFlexAlign.md],    [fxFlexAlign.lg],    [fxFlexAlign.xl],    [fxFlexAlign.lt-sm],    [fxFlexAlign.lt-md],    [fxFlexAlign.lt-lg],    [fxFlexAlign.lt-xl],    [fxFlexAlign.gt-xs],    [fxFlexAlign.gt-sm],    [fxFlexAlign.gt-md],    [fxFlexAlign.gt-lg]  ", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i2.FxFlexFillDirective, selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ButtonSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'button-selector', standalone: true, imports: [FlexLayoutModule, MatIconModule, MatButtonModule,
-                        MatMenuModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[id]': 'id',
-                        '[attr.aria-describedBy]': 'describedBy',
-                    }, template: "<button mat-stroked-button class=\"menu-selector-button\" [style.border]=\"border() >= 0 ? border() : 'auto'\"\r\n    [style.border-radius]=\"borderRadius()\" [style.height]=\"border() <= 0 ? '40px' : 'auto'\"\r\n    [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\" [attr.aria-label]=\"label()\"\r\n    [matMenuTriggerFor]=\"optionsMenu\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n        <div fxFlex=\"100\" fxFlexAlign=\"center\">\r\n            @if(current()) {\r\n            <div style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                @if(labelSelected() || label()) {\r\n                <div class=\"x-small \">{{labelSelected() ?? label()}}</div>\r\n                <div fxHide.xs class=\"small truncated-1\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated-1\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                } @else {\r\n                <div fxHide.xs class=\"small truncated\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                }\r\n            </div>\r\n            } @else if(labelSelected() || label()) {\r\n            <div class=\"truncated\" style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                {{labelSelected() ?? label()}}</div>\r\n            }\r\n        </div>\r\n        <div fxLayoutAlign=\"end\" fxFlexAlign=\"center\">\r\n            <mat-icon>arrow_drop_down</mat-icon>\r\n        </div>\r\n    </div>\r\n</button>\r\n<mat-menu #optionsMenu=\"matMenu\">\r\n    @for (o of options(); track $index) {\r\n    <button mat-menu-item (click)=\"select(o)\" [disabled]=\"o.disabled\">\r\n        {{o.name}}\r\n        @if(o.bag) {\r\n        ({{o.bag}})\r\n        }\r\n    </button>\r\n    }\r\n</mat-menu>", styles: [".menu-selector-button{padding:0 10px 0 20px!important;border-radius:9999px!important}.menu-selector-button .in-search-bar{height:56px!important;padding:0 20px!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}::ng-deep .menu-selector-button>.mdc-button__label{width:100%!important}.truncated-1{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 1){.truncated-1{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }], propDecorators: { changed: [{ type: i0.Output, args: ["changed"] }], selected: [{ type: i0.Output, args: ["selected"] }], disabled: [{
-                type: Input
-            }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelSelected", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], autoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }] } });
-
-class ButtonToggleComponent {
-    constructor() {
-        /** Emitted each time the button is clicked. Carries the current `value` and the new `toggled` state. */
-        this.changed = output();
-        /** Current value bound from the parent. Drives label and icon selection. */
-        this.value = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        /** Width of the button in pixels. Use `-1` for automatic sizing. */
-        this.width = input(-1, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-        /** Border thickness override in pixels. Use `-1` to inherit. */
-        this.border = input(-1, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
-        /** Label shown when `value` is `true`. */
-        this.labelOn = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "labelOn" }] : /* istanbul ignore next */ []));
-        /** Label shown when `value` is `false`. */
-        this.labelOff = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "labelOff" }] : /* istanbul ignore next */ []));
-        /** Material icon name shown when `value` is `true`. */
-        this.iconOn = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "iconOn" }] : /* istanbul ignore next */ []));
-        /** Material icon name shown when `value` is `false`. */
-        this.iconOff = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "iconOff" }] : /* istanbul ignore next */ []));
-        /** CSS class applied to the button at all breakpoints. */
-        this.cssClass = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "cssClass" }] : /* istanbul ignore next */ []));
-        /** CSS class applied to the button on `xs` screens. */
-        this.cssClassSmall = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "cssClassSmall" }] : /* istanbul ignore next */ []));
-        /** Resolves the appropriate label for the current value state. */
-        this.label = computed(() => this.value() ? this.labelOn() ?? '' : this.labelOff() ?? '', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        /** Resolves the appropriate icon name for the current value state. */
-        this.icon = computed(() => this.value() ? this.iconOn() ?? '' : this.iconOff() ?? '', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    }
-    /**
-     * Toggles the button state and emits the `changed` event.
-     * The emitted `toggled` value is the logical inverse of the current `value`.
-     */
-    toggle() {
-        const toggled = !this.value();
-        this.changed.emit({ value: this.value(), toggled });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: ButtonToggleComponent, isStandalone: true, selector: "button-toggle", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, labelOn: { classPropertyName: "labelOn", publicName: "labelOn", isSignal: true, isRequired: false, transformFunction: null }, labelOff: { classPropertyName: "labelOff", publicName: "labelOff", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, cssClassSmall: { classPropertyName: "cssClassSmall", publicName: "cssClassSmall", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<button mat-stroked-button [style.border]=\"border() >= 0 ? border() : 'auto'\"\n    [style.height]=\"border() <= 0 ? '40px' : 'auto'\" [style.minWidth.px]=\"width() > 0 ? width() : 'auto'\"\n    [style.mxn-width.px]=\"width() > 0 ? width() : 'auto'\" [class]=\"cssClass()\" [attr.aria-label]=\"label()\"\n    (click)=\"toggle()\" [class.button-on]=\"value() === true\" [fxClass.xs]=\"cssClassSmall()\">\n    <div fxLayout=\"row\" fxLayoutGap=\"8px\" fxLayoutAlign=\"center center\" fxFill>\n        @if(icon()) {\n        <div fxFlex=\"24px\"><mat-icon style=\"display: block;\">{{icon()}}</mat-icon></div>\n        }\n        <div [innerHtml]=\"label() | safeHtml\"></div>\n    </div>\n</button>", styles: [".button-on{background-color:var(--mat-switch-selected-focus-handle-color)!important;border-color:var(--mat-switch-selected-focus-handle-color)!important;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i2.FxLayoutDirective, selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.FxFlexDirective, selector: "    [fxFlex],    [fxFlex.xs],    [fxFlex.sm],    [fxFlex.md],    [fxFlex.lg],    [fxFlex.xl],    [fxFlex.lt-sm],    [fxFlex.lt-md],    [fxFlex.lt-lg],    [fxFlex.lt-xl],    [fxFlex.gt-xs],    [fxFlex.gt-sm],    [fxFlex.gt-md],    [fxFlex.gt-lg]  ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2.FxLayoutAlignDirective, selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.FxLayoutGapDirective, selector: "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2.FxFlexFillDirective, selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "directive", type: i2.FxClassDirective, selector: "    [fxClass],    [fxClass.xs],    [fxClass.sm],    [fxClass.md],    [fxClass.lg],    [fxClass.xl],    [fxClass.lt-sm],    [fxClass.lt-md],    [fxClass.lt-lg],    [fxClass.lt-xl],    [fxClass.gt-xs],    [fxClass.gt-sm],    [fxClass.gt-md],    [fxClass.gt-lg]  ", inputs: ["fxClass", "fxClass.xs", "fxClass.sm", "fxClass.md", "fxClass.lg", "fxClass.xl", "fxClass.lt-sm", "fxClass.lt-md", "fxClass.lt-lg", "fxClass.lt-xl", "fxClass.gt-xs", "fxClass.gt-sm", "fxClass.gt-md", "fxClass.gt-lg"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ButtonToggleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'button-toggle', standalone: true, imports: [FlexLayoutModule, MatIconModule, MatButtonModule, SafeHtmlPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-stroked-button [style.border]=\"border() >= 0 ? border() : 'auto'\"\n    [style.height]=\"border() <= 0 ? '40px' : 'auto'\" [style.minWidth.px]=\"width() > 0 ? width() : 'auto'\"\n    [style.mxn-width.px]=\"width() > 0 ? width() : 'auto'\" [class]=\"cssClass()\" [attr.aria-label]=\"label()\"\n    (click)=\"toggle()\" [class.button-on]=\"value() === true\" [fxClass.xs]=\"cssClassSmall()\">\n    <div fxLayout=\"row\" fxLayoutGap=\"8px\" fxLayoutAlign=\"center center\" fxFill>\n        @if(icon()) {\n        <div fxFlex=\"24px\"><mat-icon style=\"display: block;\">{{icon()}}</mat-icon></div>\n        }\n        <div [innerHtml]=\"label() | safeHtml\"></div>\n    </div>\n</button>", styles: [".button-on{background-color:var(--mat-switch-selected-focus-handle-color)!important;border-color:var(--mat-switch-selected-focus-handle-color)!important;font-weight:700}\n"] }]
-        }], propDecorators: { changed: [{ type: i0.Output, args: ["changed"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], labelOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelOn", required: false }] }], labelOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelOff", required: false }] }], iconOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOn", required: false }] }], iconOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOff", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], cssClassSmall: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClassSmall", required: false }] }] } });
-
-class ChipsSelectorComponent {
-    get disabled() {
-        if (this.ngControl && this.ngControl.disabled != null) {
-            return this.ngControl.disabled;
-        }
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        if (this.focused) {
-            this.focused = false;
-            this.stateChanges.next();
-        }
-    }
-    /** True when the label should float above the field (focused or has a value). */
-    get shouldLabelFloat() {
-        return this.focused || !this.empty;
-    }
-    set value(value) {
-        this.setValue(value, true);
-    }
-    /**
-     * Updates the internal state and selection mirrors.
-     * @param value     - The new selection array.
-     * @param propagate - When `true`, notifies the registered onChange callback.
-     */
-    setValue(value, propagate) {
-        this._value = value;
-        const selection = [];
-        if (this._value) {
-            this.options().forEach(n => {
-                if (this._value?.findIndex((x) => x.value === n.value) !== -1) {
-                    selection.push(n);
-                }
-            });
-        }
-        this.selection.set(selection);
-        this.singleSelection.set(selection.length > 0 ? selection[0] : undefined);
-        this.cdr.markForCheck();
-        if (propagate) {
-            this.propagateChange(this._value);
-        }
-        this.stateChanges.next();
-        if (this.changesEnabled) {
-            this.changed.emit(this._value);
-        }
-    }
-    /** The current value as an array of selected items. */
-    get value() {
-        return this._value;
-    }
-    /** True when no item is selected. */
-    get empty() {
-        return !this._value || this._value.length === 0;
-    }
-    /** True when the control has validation errors and has been touched. */
-    get errorState() {
-        return this.ngControl?.errors != null && (this.ngControl?.touched ?? false);
-    }
-    constructor(ngControl) {
-        this.ngControl = ngControl;
-        /** Emitted when the selection changes. Carries the new array of selected items, or `undefined` when cleared. */
-        this.changed = output();
-        this.containerId = `chips-selector-container--${SystemUtils.generateUUID()}`;
-        this.containerWidth = signal(-6, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "containerWidth" }] : /* istanbul ignore next */ []));
-        this.focused = false;
-        this.stateChanges = new Subject();
-        this.destroyRef = inject(DestroyRef);
-        this.changesEnabled = false;
-        this.destroyed = false;
-        this.widthRetries = 0;
-        /** Debounce bridge for `ResizeObserver` notifications. */
-        this.resize$ = new Subject();
-        /** List of available options to display as chips. */
-        this.options = input([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        /** Minimum width in pixels when collapsed. Use `-1` for automatic. */
-        this.collapsedWidth = input(-1, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "collapsedWidth" }] : /* istanbul ignore next */ []));
-        /** Display mode used when the selector is in collapsed state. */
-        this.collapsedDisplayMode = input('dropdown', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "collapsedDisplayMode" }] : /* istanbul ignore next */ []));
-        /** Pixel threshold below which the selector collapses. Use `-1` to disable. */
-        this.collapseAt = input(-1, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "collapseAt" }] : /* istanbul ignore next */ []));
-        /** When `true`, `collapseAt` is compared against the container width rather than the window width. */
-        this.collapseAtContainer = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "collapseAtContainer" }] : /* istanbul ignore next */ []));
-        this.collapsed = computed(() => {
-            const cw = this.containerWidth();
-            const mw = this.collapseAt();
-            return this.mode() === 'collapsed' || (mw !== -1 && cw > 0 && mw > 0 && cw < mw);
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
-        /** Label shown in the dropdown / above the chip list. */
-        this.label = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        /** When `true`, multiple chips can be selected simultaneously. */
-        this.multiple = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
-        /** When `true`, at least one item must remain selected. */
-        this.mustSelect = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "mustSelect" }] : /* istanbul ignore next */ []));
-        /** Layout mode: `'collapsed'` forces dropdown mode, `'dynamic'` collapses based on `collapseAt`. */
-        this.mode = input('dynamic', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-        /** When `true`, chips are stacked vertically instead of wrapping horizontally. */
-        this.stacked = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
-        /** Chips below this index receive extra padding to align with other UI elements. */
-        this.padAt = input(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "padAt" }] : /* istanbul ignore next */ []));
-        /** When `true`, the control is required. */
-        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Placeholder text shown when no value is selected. */
-        this.placeholder = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-        this._disabled = false;
-        this.id = `chips-selector--${SystemUtils.generateUUID()}`;
-        this.describedBy = '';
-        this._value = [];
-        this.propagateChange = () => { };
-        this.propagateTouched = () => { };
-        this.renderer = inject(Renderer2);
-        this.cdr = inject(ChangeDetectorRef);
-        /**
-         * Currently selected items. Kept loosely typed on purpose: in multi-select mode the
-         * bound controls write an array, while in single-select mode mat-select / the chip
-         * listbox write a single item; `getSelection()` normalizes both shapes.
-         */
-        this.selection = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-        /** The single selected item — used in `button` collapsed-display mode. */
-        this.singleSelection = signal(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "singleSelection" }] : /* istanbul ignore next */ []));
-        /** Root signal form bound to the internal mat-select / chip listbox. */
-        this.selectionForm = form(this.selection);
-        /** Root signal form bound to the internal button-selector in `button` collapsed mode. */
-        this.singleForm = form(this.singleSelection);
-        if (this.ngControl != null) {
-            this.ngControl.valueAccessor = this;
-        }
-        // Notify state changes whenever required or placeholder inputs change
-        effect(() => {
-            this.required();
-            this.placeholder();
-            this.stateChanges.next();
-        });
-        // React to container size changes to keep the collapsed state up to date.
-        // `auditTime` on the animation-frame scheduler coalesces ResizeObserver bursts
-        // without adding perceptible latency, and defers the layout read out of the
-        // observer callback to avoid "ResizeObserver loop" warnings.
-        this.resize$
-            .pipe(takeUntilDestroyed(this.destroyRef), auditTime(0, animationFrameScheduler))
-            .subscribe(() => {
-            if (this.collapseAt() > 0) {
-                this.updateContainerWidth();
-            }
-        });
-        afterNextRender(() => {
-            if (SystemUtils.isBrowser() && typeof ResizeObserver !== 'undefined') {
-                const elem = document.getElementById(this.containerId);
-                if (elem) {
-                    this.resizeObserver = new ResizeObserver(() => this.resize$.next());
-                    this.resizeObserver.observe(elem);
-                }
-            }
-            setTimeout(() => {
-                this.updateContainerWidth();
-                this.changesEnabled = true;
-            }, 250);
-        });
-    }
-    ngOnDestroy() {
-        this.destroyed = true;
-        this.resizeObserver?.disconnect();
-        this.stateChanges.complete();
-    }
-    /**
-     * Measures the container (or window) width and updates the `containerWidth` signal,
-     * retrying after 100 ms if the element is not yet laid out.
-     */
-    updateContainerWidth() {
-        if (this.destroyed)
-            return;
-        const elem = document.getElementById(this.containerId);
-        if (elem && elem.clientWidth > 0) {
-            this.widthRetries = 0;
-            this.containerWidth.set(this.collapseAtContainer()
-                ? elem.clientWidth
-                : window.innerWidth);
-        }
-        else if (this.widthRetries < 50) {
-            // Bounded retry (max ~5 s): the old unbounded recursion kept running
-            // forever, even after the component was destroyed.
-            this.widthRetries++;
-            setTimeout(() => this.updateContainerWidth(), 100);
-        }
-    }
-    /**
-     * Resolves the effective selection array for the current display mode.
-     * In single-select collapsed button mode the `singleSelection` item is wrapped in an array.
-     * @returns The array of currently selected items.
-     */
-    getSelection() {
-        const value = !this.multiple() && this.collapsed() && this.collapsedDisplayMode() === 'button'
-            ? this.singleSelection()
-            : this.selection();
-        if (Array.isArray(value)) {
-            return value;
-        }
-        return value ? [value] : [];
-    }
-    /**
-     * Schedules a value update after a short delay, coalescing rapid selection changes
-     * before the value is propagated to the outer form.
-     */
-    updateValue() {
-        setTimeout(() => {
-            this.setValue(this.getSelection(), true);
-        }, 250);
-    }
-    /**
-     * Returns `true` when the given item can be selected in the current mode.
-     * In single-select mode an already-selected item is not re-selectable.
-     * @param item - The item to check.
-     * @returns True when the item is selectable.
-     */
-    isSelectable(item) {
-        return this.multiple() || this.getSelection().findIndex(x => x.value === item.value) === -1;
-    }
-    /**
-     * Writes a new value to the component (called by the form layer).
-     * @param value - The new selection to display.
-     */
-    writeValue(value) {
-        const next = value;
-        if (this.value !== next) {
-            // Model -> view write: must NOT propagate back to the form (echo loop)
-            this.setValue(next, false);
-        }
-    }
-    /**
-     * Registers the on-change callback (called by the form layer).
-     * @param fn - Callback to invoke whenever the value changes.
-     */
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    /**
-     * Registers the on-touched callback (called by the form layer).
-     * @param fn - Callback to invoke when the control is touched.
-     */
-    registerOnTouched(fn) {
-        this.propagateTouched = fn;
-    }
-    /**
-     * Sets the ARIA described-by IDs for accessibility.
-     * @param ids - The list of element IDs to associate with this control.
-     */
-    setDescribedByIds(ids) {
-        this.describedBy = ids.join(' ');
-    }
-    /**
-     * Updates the disabled state when the Angular form layer changes it.
-     * @param isDisabled - Whether the control should be disabled.
-     */
-    setDisabledState(isDisabled) {
-        this._disabled = isDisabled;
-        if (isDisabled && this.focused) {
-            this.focused = false;
-            this.stateChanges.next();
-        }
-        if (!SystemUtils.isBrowser())
-            return;
-        const elem = document.getElementById(this.id);
-        if (elem) {
-            this.renderer.setProperty(elem, 'disabled', isDisabled);
-        }
-    }
-    /**
-     * Handles a click on the container element, focusing it and marking it as touched.
-     */
-    onContainerClick() {
-        if (!this.focused) {
-            if (!SystemUtils.isBrowser())
-                return;
-            const elem = document.getElementById(this.id);
-            if (elem) {
-                elem.focus();
-                this.propagateTouched();
-            }
-        }
-    }
-    /**
-     * Clears the current selection and stops the event from bubbling.
-     * @param e - The originating click event.
-     */
-    clear(e) {
-        this.setValue([], true);
-        e.stopPropagation();
-    }
-    /**
-     * Selects a single item, replacing any existing selection.
-     * @param item - The item to select. Does nothing when `undefined`.
-     */
-    select(item) {
-        if (item) {
-            this.setValue([item], true);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ChipsSelectorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: ChipsSelectorComponent, isStandalone: true, selector: "chips-selector", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, collapsedDisplayMode: { classPropertyName: "collapsedDisplayMode", publicName: "collapsedDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, collapseAt: { classPropertyName: "collapseAt", publicName: "collapseAt", isSignal: true, isRequired: false, transformFunction: null }, collapseAtContainer: { classPropertyName: "collapseAtContainer", publicName: "collapseAtContainer", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, mustSelect: { classPropertyName: "mustSelect", publicName: "mustSelect", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, padAt: { classPropertyName: "padAt", publicName: "padAt", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { properties: { "id": "id", "class.floating": "shouldLabelFloat", "attr.aria-describedBy": "describedBy" } }, ngImport: i0, template: "<div [id]=\"containerId\" class=\"chips-selector\">\n    @if(containerWidth() > 0) {\n    @if(collapsed()) {\n    @if(collapsedDisplayMode() === 'dropdown') {\n    <mat-form-field [style.min-width]=\"collapsedWidth() > 0 ? collapsedWidth()+'px' : '100%'\" subscriptSizing=\"dynamic\">\n        @if(label()) {\n        <mat-label>{{label()}}</mat-label>\n        }\n        <mat-select [formField]=\"selectionForm\" [multiple]=\"multiple()\" (selectionChange)=\"updateValue()\">\n            <mat-select-trigger>\n                @if (value && (value.length || 0) > 0) {\n                {{value[0].shortName ?? value[0].name}}\n                }\n                @if (value && (value.length || 0) > 1) {\n                <span class=\"collapsed-additional-selection\">\n                    (+{{(value.length || 0) - 1}} {{value.length === 2 ? 'altro' : 'altri'}})\n                </span>\n                }\n            </mat-select-trigger>\n            @for (o of options(); track $index) {\n            <mat-option [value]=\"o\" [disabled]=\"o.disabled\">\n                {{o.name}}\n                @if(o.bag) {\n                &nbsp; ({{o.bag}})\n                }\n            </mat-option>\n            }\n        </mat-select>\n        @if (value && (value.length || 0) > 0) {\n        <button matSuffix tabindex=\"-1\" mat-icon-button aria-label=\"Pulisci\" (click)=\"clear($event)\">\n            <mat-icon>close</mat-icon>\n        </button>\n        }\n    </mat-form-field>\n    } @else {\n    <button-selector [label]=\"label()\" [options]=\"options()\" [width]=\"collapsedWidth()\" [formField]=\"singleForm\"\n        (selected)=\"updateValue()\"></button-selector>\n\n    }\n    } @else {\n    <mat-chip-listbox [class]=\"stacked() ? 'mat-mdc-chip-set-stacked' : ''\" [multiple]=\"multiple()\"\n        [formField]=\"selectionForm\" (change)=\"updateValue()\">\n        @for (o of options(); track $index; let i = $index) {\n        <mat-chip-option [matBadge]=\"o.bag\" [matTooltip]=\"o.disabled === true ? 'Non disponibile' : (o.bagInfo ?? '')\" [selectable]=\"isSelectable(o)\" [value]=\"o\"\n            [disabled]=\"o.disabled\" [class.chip-padded]=\"i < padAt()\">{{o.shortName ??\n            o.name}}</mat-chip-option>\n        }\n    </mat-chip-listbox>\n    }\n    }\n</div>", styles: [".chips-selector{width:100%}.chips-selector .collapsed-additional-selection{opacity:.75;font-size:.75em}.chip-padded{margin-right:10px!important}.mdc-evolution-chip--disabled{pointer-events:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ButtonSelectorComponent, selector: "button-selector", inputs: ["disabled", "width", "border", "borderRadius", "label", "labelSelected", "options", "autoSelect"], outputs: ["changed", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ChipsSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'chips-selector', standalone: true, imports: [FlexLayoutModule, FormField, MatFormFieldModule, MatSelectModule,
-                        MatChipsModule, MatIconModule, MatButtonModule, MatBadgeModule, MatTooltipModule,
-                        ButtonSelectorComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[id]': 'id',
-                        '[class.floating]': 'shouldLabelFloat',
-                        '[attr.aria-describedBy]': 'describedBy',
-                    }, template: "<div [id]=\"containerId\" class=\"chips-selector\">\n    @if(containerWidth() > 0) {\n    @if(collapsed()) {\n    @if(collapsedDisplayMode() === 'dropdown') {\n    <mat-form-field [style.min-width]=\"collapsedWidth() > 0 ? collapsedWidth()+'px' : '100%'\" subscriptSizing=\"dynamic\">\n        @if(label()) {\n        <mat-label>{{label()}}</mat-label>\n        }\n        <mat-select [formField]=\"selectionForm\" [multiple]=\"multiple()\" (selectionChange)=\"updateValue()\">\n            <mat-select-trigger>\n                @if (value && (value.length || 0) > 0) {\n                {{value[0].shortName ?? value[0].name}}\n                }\n                @if (value && (value.length || 0) > 1) {\n                <span class=\"collapsed-additional-selection\">\n                    (+{{(value.length || 0) - 1}} {{value.length === 2 ? 'altro' : 'altri'}})\n                </span>\n                }\n            </mat-select-trigger>\n            @for (o of options(); track $index) {\n            <mat-option [value]=\"o\" [disabled]=\"o.disabled\">\n                {{o.name}}\n                @if(o.bag) {\n                &nbsp; ({{o.bag}})\n                }\n            </mat-option>\n            }\n        </mat-select>\n        @if (value && (value.length || 0) > 0) {\n        <button matSuffix tabindex=\"-1\" mat-icon-button aria-label=\"Pulisci\" (click)=\"clear($event)\">\n            <mat-icon>close</mat-icon>\n        </button>\n        }\n    </mat-form-field>\n    } @else {\n    <button-selector [label]=\"label()\" [options]=\"options()\" [width]=\"collapsedWidth()\" [formField]=\"singleForm\"\n        (selected)=\"updateValue()\"></button-selector>\n\n    }\n    } @else {\n    <mat-chip-listbox [class]=\"stacked() ? 'mat-mdc-chip-set-stacked' : ''\" [multiple]=\"multiple()\"\n        [formField]=\"selectionForm\" (change)=\"updateValue()\">\n        @for (o of options(); track $index; let i = $index) {\n        <mat-chip-option [matBadge]=\"o.bag\" [matTooltip]=\"o.disabled === true ? 'Non disponibile' : (o.bagInfo ?? '')\" [selectable]=\"isSelectable(o)\" [value]=\"o\"\n            [disabled]=\"o.disabled\" [class.chip-padded]=\"i < padAt()\">{{o.shortName ??\n            o.name}}</mat-chip-option>\n        }\n    </mat-chip-listbox>\n    }\n    }\n</div>", styles: [".chips-selector{width:100%}.chips-selector .collapsed-additional-selection{opacity:.75;font-size:.75em}.chip-padded{margin-right:10px!important}.mdc-evolution-chip--disabled{pointer-events:auto!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }], propDecorators: { changed: [{ type: i0.Output, args: ["changed"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], collapsedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedWidth", required: false }] }], collapsedDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedDisplayMode", required: false }] }], collapseAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAt", required: false }] }], collapseAtContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAtContainer", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], mustSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "mustSelect", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], padAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "padAt", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{
-                type: Input
-            }] } });
-
-/*
- * Public API Surface of @arsedizioni/ars-utils/ui.controls
- *
- * Small form controls sharing the same Material base (button, icon, form-field). The datepicker
- * pieces live in `ui.controls.date` and the tree picker in `ui.controls.tree`, so that a chunk
- * needing one of those does not link this file, and vice versa.
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Input, Optional, Renderer2, Self, afterNextRender, booleanAttribute, computed, effect, inject, input, output, signal } from "@angular/core";
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import * as i4$1 from "@angular/material/button";
+import { MatButtonModule } from "@angular/material/button";
+import * as i3$1 from "@angular/material/icon";
+import { MatIconModule } from "@angular/material/icon";
+import * as i5 from "@angular/material/menu";
+import { MatMenuModule } from "@angular/material/menu";
+import { SafeHtmlPipe, SystemUtils } from "@arsedizioni/ars-utils/core";
+import * as i2$1 from "@arsedizioni/ars-utils/ui";
+import { FlexLayoutModule } from "@arsedizioni/ars-utils/ui";
+import { Subject, animationFrameScheduler, auditTime } from "rxjs";
+import * as i1 from "@angular/forms";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormField, form } from "@angular/forms/signals";
+import * as i7 from "@angular/material/badge";
+import { MatBadgeModule } from "@angular/material/badge";
+import * as i4 from "@angular/material/chips";
+import { MatChipsModule } from "@angular/material/chips";
+import * as i2 from "@angular/material/form-field";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import * as i3 from "@angular/material/select";
+import { MatSelectModule } from "@angular/material/select";
+import * as i8 from "@angular/material/tooltip";
+import { MatTooltipModule } from "@angular/material/tooltip";
+var ButtonSelectorComponent = class ButtonSelectorComponent {
+	set value(value) {
+		this.setValue(value, true);
+	}
+	setValue(value, propagate) {
+		this._value = value;
+		if (propagate) this.propagateChange(this._value);
+		this.stateChanges.next();
+		this.changed.emit(this._value);
+		this.current.set(this._value);
+	}
+	get value() {
+		return this._value;
+	}
+	get disabled() {
+		if (this.ngControl && this.ngControl.disabled != null) return this.ngControl.disabled;
+		return this._disabled;
+	}
+	set disabled(value) {
+		this._disabled = coerceBooleanProperty(value);
+		if (this.focused) {
+			this.focused = false;
+			this.stateChanges.next();
+		}
+	}
+	constructor(ngControl) {
+		this.ngControl = ngControl;
+		this.changed = output();
+		this.selected = output();
+		this.stateChanges = new Subject();
+		this.focused = false;
+		this._value = void 0;
+		this._disabled = false;
+		this.propagateChange = () => {};
+		this.propagateTouched = () => {};
+		this.id = `button-selector--${SystemUtils.generateUUID()}`;
+		this.describedBy = "";
+		this.renderer = inject(Renderer2);
+		this.current = signal(void 0, ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
+		this.width = input(-1, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+		this.border = input(-1, ...ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []);
+		this.borderRadius = input("9999px", ...ngDevMode ? [{ debugName: "borderRadius" }] : /* istanbul ignore next */ []);
+		this.label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.labelSelected = input(void 0, ...ngDevMode ? [{ debugName: "labelSelected" }] : /* istanbul ignore next */ []);
+		this.options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+		this.autoSelect = input(false, ...ngDevMode ? [{ debugName: "autoSelect" }] : /* istanbul ignore next */ []);
+		if (this.ngControl != null) this.ngControl.valueAccessor = this;
+		effect(() => {
+			if (this.autoSelect()) {
+				const options = this.options();
+				if (options.length > 0 && options[0].value !== void 0) this.current.set(options[0]);
+			}
+		});
+	}
+	ngOnDestroy() {
+		this.stateChanges.complete();
+	}
+	writeValue(value) {
+		this.setValue(value, false);
+	}
+	registerOnChange(fn) {
+		this.propagateChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.propagateTouched = fn;
+	}
+	setDescribedByIds(ids) {
+		this.describedBy = ids.join(" ");
+	}
+	setDisabledState(isDisabled) {
+		this._disabled = isDisabled;
+		if (isDisabled && this.focused) {
+			this.focused = false;
+			this.stateChanges.next();
+		}
+		if (!SystemUtils.isBrowser()) return;
+		const elem = document.getElementById(this.id);
+		if (elem) this.renderer.setProperty(elem, "disabled", isDisabled);
+	}
+	onContainerClick() {
+		if (!this.focused) {
+			if (!SystemUtils.isBrowser()) return;
+			const elem = document.getElementById(this.id);
+			if (elem) {
+				elem.focus();
+				this.propagateTouched();
+			}
+		}
+	}
+	select(item, notify = true) {
+		this.setValue(item, true);
+		if (notify) this.selected.emit(item);
+	}
+	reset() {
+		this.setValue(void 0, true);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: ButtonSelectorComponent,
+			deps: [{
+				token: i1.NgControl,
+				optional: true,
+				self: true
+			}],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.1",
+			type: ButtonSelectorComponent,
+			isStandalone: true,
+			selector: "button-selector",
+			inputs: {
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				width: {
+					classPropertyName: "width",
+					publicName: "width",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				border: {
+					classPropertyName: "border",
+					publicName: "border",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				borderRadius: {
+					classPropertyName: "borderRadius",
+					publicName: "borderRadius",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				labelSelected: {
+					classPropertyName: "labelSelected",
+					publicName: "labelSelected",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				options: {
+					classPropertyName: "options",
+					publicName: "options",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				autoSelect: {
+					classPropertyName: "autoSelect",
+					publicName: "autoSelect",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				changed: "changed",
+				selected: "selected"
+			},
+			host: { properties: {
+				"id": "id",
+				"attr.aria-describedBy": "describedBy"
+			} },
+			ngImport: i0,
+			template: "<button mat-stroked-button class=\"menu-selector-button\" [style.border]=\"border() >= 0 ? border() : 'auto'\"\r\n    [style.border-radius]=\"borderRadius()\" [style.height]=\"border() <= 0 ? '40px' : 'auto'\"\r\n    [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\" [attr.aria-label]=\"label()\"\r\n    [matMenuTriggerFor]=\"optionsMenu\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n        <div fxFlex=\"100\" fxFlexAlign=\"center\">\r\n            @if(current()) {\r\n            <div style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                @if(labelSelected() || label()) {\r\n                <div class=\"x-small \">{{labelSelected() ?? label()}}</div>\r\n                <div fxHide.xs class=\"small truncated-1\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated-1\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                } @else {\r\n                <div fxHide.xs class=\"small truncated\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                }\r\n            </div>\r\n            } @else if(labelSelected() || label()) {\r\n            <div class=\"truncated\" style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                {{labelSelected() ?? label()}}</div>\r\n            }\r\n        </div>\r\n        <div fxLayoutAlign=\"end\" fxFlexAlign=\"center\">\r\n            <mat-icon>arrow_drop_down</mat-icon>\r\n        </div>\r\n    </div>\r\n</button>\r\n<mat-menu #optionsMenu=\"matMenu\">\r\n    @for (o of options(); track $index) {\r\n    <button mat-menu-item (click)=\"select(o)\" [disabled]=\"o.disabled\">\r\n        {{o.name}}\r\n        @if(o.bag) {\r\n        ({{o.bag}})\r\n        }\r\n    </button>\r\n    }\r\n</mat-menu>",
+			styles: [".menu-selector-button{padding:0 10px 0 20px!important;border-radius:9999px!important}.menu-selector-button .in-search-bar{height:56px!important;padding:0 20px!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}::ng-deep .menu-selector-button>.mdc-button__label{width:100%!important}.truncated-1{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 1){.truncated-1{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: FlexLayoutModule
+				},
+				{
+					kind: "directive",
+					type: i2$1.FxLayoutDirective,
+					selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ",
+					inputs: [
+						"fxLayout",
+						"fxLayout.xs",
+						"fxLayout.sm",
+						"fxLayout.md",
+						"fxLayout.lg",
+						"fxLayout.xl",
+						"fxLayout.lt-sm",
+						"fxLayout.lt-md",
+						"fxLayout.lt-lg",
+						"fxLayout.lt-xl",
+						"fxLayout.gt-xs",
+						"fxLayout.gt-sm",
+						"fxLayout.gt-md",
+						"fxLayout.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i2$1.FxFlexDirective,
+					selector: "    [fxFlex],    [fxFlex.xs],    [fxFlex.sm],    [fxFlex.md],    [fxFlex.lg],    [fxFlex.xl],    [fxFlex.lt-sm],    [fxFlex.lt-md],    [fxFlex.lt-lg],    [fxFlex.lt-xl],    [fxFlex.gt-xs],    [fxFlex.gt-sm],    [fxFlex.gt-md],    [fxFlex.gt-lg]  ",
+					inputs: [
+						"fxFlex",
+						"fxFlex.xs",
+						"fxFlex.sm",
+						"fxFlex.md",
+						"fxFlex.lg",
+						"fxFlex.xl",
+						"fxFlex.lt-sm",
+						"fxFlex.lt-md",
+						"fxFlex.lt-lg",
+						"fxFlex.lt-xl",
+						"fxFlex.gt-xs",
+						"fxFlex.gt-sm",
+						"fxFlex.gt-md",
+						"fxFlex.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i2$1.FxShowHideDirective,
+					selector: "    [fxShow],    [fxHide],    [fxShow.xs],    [fxShow.sm],    [fxShow.md],    [fxShow.lg],    [fxShow.xl],    [fxShow.lt-sm],    [fxShow.lt-md],    [fxShow.lt-lg],    [fxShow.lt-xl],    [fxShow.gt-xs],    [fxShow.gt-sm],    [fxShow.gt-md],    [fxShow.gt-lg],    [fxHide.xs],    [fxHide.sm],    [fxHide.md],    [fxHide.lg],    [fxHide.xl],    [fxHide.lt-sm],    [fxHide.lt-md],    [fxHide.lt-lg],    [fxHide.lt-xl],    [fxHide.gt-xs],    [fxHide.gt-sm],    [fxHide.gt-md],    [fxHide.gt-lg]  ",
+					inputs: [
+						"fxShow",
+						"fxShow.xs",
+						"fxShow.sm",
+						"fxShow.md",
+						"fxShow.lg",
+						"fxShow.xl",
+						"fxShow.lt-sm",
+						"fxShow.lt-md",
+						"fxShow.lt-lg",
+						"fxShow.lt-xl",
+						"fxShow.gt-xs",
+						"fxShow.gt-sm",
+						"fxShow.gt-md",
+						"fxShow.gt-lg",
+						"fxHide",
+						"fxHide.xs",
+						"fxHide.sm",
+						"fxHide.md",
+						"fxHide.lg",
+						"fxHide.xl",
+						"fxHide.lt-sm",
+						"fxHide.lt-md",
+						"fxHide.lt-lg",
+						"fxHide.lt-xl",
+						"fxHide.gt-xs",
+						"fxHide.gt-sm",
+						"fxHide.gt-md",
+						"fxHide.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i2$1.FxLayoutAlignDirective,
+					selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ",
+					inputs: [
+						"fxLayoutAlign",
+						"fxLayoutAlign.xs",
+						"fxLayoutAlign.sm",
+						"fxLayoutAlign.md",
+						"fxLayoutAlign.lg",
+						"fxLayoutAlign.xl",
+						"fxLayoutAlign.lt-sm",
+						"fxLayoutAlign.lt-md",
+						"fxLayoutAlign.lt-lg",
+						"fxLayoutAlign.lt-xl",
+						"fxLayoutAlign.gt-xs",
+						"fxLayoutAlign.gt-sm",
+						"fxLayoutAlign.gt-md",
+						"fxLayoutAlign.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i2$1.FxLayoutGapDirective,
+					selector: "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ",
+					inputs: [
+						"fxLayoutGap",
+						"fxLayoutGap.xs",
+						"fxLayoutGap.sm",
+						"fxLayoutGap.md",
+						"fxLayoutGap.lg",
+						"fxLayoutGap.xl",
+						"fxLayoutGap.lt-sm",
+						"fxLayoutGap.lt-md",
+						"fxLayoutGap.lt-lg",
+						"fxLayoutGap.lt-xl",
+						"fxLayoutGap.gt-xs",
+						"fxLayoutGap.gt-sm",
+						"fxLayoutGap.gt-md",
+						"fxLayoutGap.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i2$1.FxFlexAlignDirective,
+					selector: "    [fxFlexAlign],    [fxFlexAlign.xs],    [fxFlexAlign.sm],    [fxFlexAlign.md],    [fxFlexAlign.lg],    [fxFlexAlign.xl],    [fxFlexAlign.lt-sm],    [fxFlexAlign.lt-md],    [fxFlexAlign.lt-lg],    [fxFlexAlign.lt-xl],    [fxFlexAlign.gt-xs],    [fxFlexAlign.gt-sm],    [fxFlexAlign.gt-md],    [fxFlexAlign.gt-lg]  ",
+					inputs: [
+						"fxFlexAlign",
+						"fxFlexAlign.xs",
+						"fxFlexAlign.sm",
+						"fxFlexAlign.md",
+						"fxFlexAlign.lg",
+						"fxFlexAlign.xl",
+						"fxFlexAlign.lt-sm",
+						"fxFlexAlign.lt-md",
+						"fxFlexAlign.lt-lg",
+						"fxFlexAlign.lt-xl",
+						"fxFlexAlign.gt-xs",
+						"fxFlexAlign.gt-sm",
+						"fxFlexAlign.gt-md",
+						"fxFlexAlign.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i2$1.FxFlexFillDirective,
+					selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ",
+					inputs: [
+						"fxFlexFill",
+						"fxFill",
+						"fxFlexFill.xs",
+						"fxFlexFill.sm",
+						"fxFlexFill.md",
+						"fxFlexFill.lg",
+						"fxFlexFill.xl",
+						"fxFlexFill.lt-sm",
+						"fxFlexFill.lt-md",
+						"fxFlexFill.lt-lg",
+						"fxFlexFill.lt-xl",
+						"fxFlexFill.gt-xs",
+						"fxFlexFill.gt-sm",
+						"fxFlexFill.gt-md",
+						"fxFlexFill.gt-lg"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: MatIconModule
+				},
+				{
+					kind: "component",
+					type: i3$1.MatIcon,
+					selector: "mat-icon",
+					inputs: [
+						"color",
+						"inline",
+						"svgIcon",
+						"fontSet",
+						"fontIcon"
+					],
+					exportAs: ["matIcon"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatButtonModule
+				},
+				{
+					kind: "component",
+					type: i4$1.MatButton,
+					selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+					inputs: ["matButton"],
+					exportAs: ["matButton", "matAnchor"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatMenuModule
+				},
+				{
+					kind: "component",
+					type: i5.MatMenu,
+					selector: "mat-menu",
+					inputs: [
+						"backdropClass",
+						"aria-label",
+						"aria-labelledby",
+						"aria-describedby",
+						"xPosition",
+						"yPosition",
+						"overlapTrigger",
+						"hasBackdrop",
+						"class",
+						"classList"
+					],
+					outputs: ["closed", "close"],
+					exportAs: ["matMenu"]
+				},
+				{
+					kind: "component",
+					type: i5.MatMenuItem,
+					selector: "[mat-menu-item]",
+					inputs: [
+						"role",
+						"disabled",
+						"disabledInteractive",
+						"disableRipple"
+					],
+					exportAs: ["matMenuItem"]
+				},
+				{
+					kind: "directive",
+					type: i5.MatMenuTrigger,
+					selector: "[mat-menu-trigger-for], [matMenuTriggerFor]",
+					inputs: [
+						"mat-menu-trigger-for",
+						"matMenuTriggerFor",
+						"matMenuTriggerData",
+						"matMenuTriggerRestoreFocus"
+					],
+					outputs: [
+						"menuOpened",
+						"onMenuOpen",
+						"menuClosed",
+						"onMenuClose"
+					],
+					exportAs: ["matMenuTrigger"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ButtonSelectorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button-selector",
+			standalone: true,
+			imports: [
+				FlexLayoutModule,
+				MatIconModule,
+				MatButtonModule,
+				MatMenuModule
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[id]": "id",
+				"[attr.aria-describedBy]": "describedBy"
+			},
+			template: "<button mat-stroked-button class=\"menu-selector-button\" [style.border]=\"border() >= 0 ? border() : 'auto'\"\r\n    [style.border-radius]=\"borderRadius()\" [style.height]=\"border() <= 0 ? '40px' : 'auto'\"\r\n    [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\" [attr.aria-label]=\"label()\"\r\n    [matMenuTriggerFor]=\"optionsMenu\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n        <div fxFlex=\"100\" fxFlexAlign=\"center\">\r\n            @if(current()) {\r\n            <div style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                @if(labelSelected() || label()) {\r\n                <div class=\"x-small \">{{labelSelected() ?? label()}}</div>\r\n                <div fxHide.xs class=\"small truncated-1\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated-1\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                } @else {\r\n                <div fxHide.xs class=\"small truncated\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                }\r\n            </div>\r\n            } @else if(labelSelected() || label()) {\r\n            <div class=\"truncated\" style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                {{labelSelected() ?? label()}}</div>\r\n            }\r\n        </div>\r\n        <div fxLayoutAlign=\"end\" fxFlexAlign=\"center\">\r\n            <mat-icon>arrow_drop_down</mat-icon>\r\n        </div>\r\n    </div>\r\n</button>\r\n<mat-menu #optionsMenu=\"matMenu\">\r\n    @for (o of options(); track $index) {\r\n    <button mat-menu-item (click)=\"select(o)\" [disabled]=\"o.disabled\">\r\n        {{o.name}}\r\n        @if(o.bag) {\r\n        ({{o.bag}})\r\n        }\r\n    </button>\r\n    }\r\n</mat-menu>",
+			styles: [".menu-selector-button{padding:0 10px 0 20px!important;border-radius:9999px!important}.menu-selector-button .in-search-bar{height:56px!important;padding:0 20px!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}::ng-deep .menu-selector-button>.mdc-button__label{width:100%!important}.truncated-1{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 1){.truncated-1{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}}\n"]
+		}]
+	}],
+	ctorParameters: () => [{
+		type: i1.NgControl,
+		decorators: [{ type: Optional }, { type: Self }]
+	}],
+	propDecorators: {
+		changed: [{
+			type: i0.Output,
+			args: ["changed"]
+		}],
+		selected: [{
+			type: i0.Output,
+			args: ["selected"]
+		}],
+		disabled: [{ type: Input }],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		border: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "border",
+				required: false
+			}]
+		}],
+		borderRadius: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "borderRadius",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		labelSelected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelSelected",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		autoSelect: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoSelect",
+				required: false
+			}]
+		}]
+	}
+});
+var ButtonToggleComponent = class ButtonToggleComponent {
+	constructor() {
+		this.changed = output();
+		this.value = input(false, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+		this.width = input(-1, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+		this.border = input(-1, ...ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []);
+		this.labelOn = input(void 0, ...ngDevMode ? [{ debugName: "labelOn" }] : /* istanbul ignore next */ []);
+		this.labelOff = input(void 0, ...ngDevMode ? [{ debugName: "labelOff" }] : /* istanbul ignore next */ []);
+		this.iconOn = input(void 0, ...ngDevMode ? [{ debugName: "iconOn" }] : /* istanbul ignore next */ []);
+		this.iconOff = input(void 0, ...ngDevMode ? [{ debugName: "iconOff" }] : /* istanbul ignore next */ []);
+		this.cssClass = input(void 0, ...ngDevMode ? [{ debugName: "cssClass" }] : /* istanbul ignore next */ []);
+		this.cssClassSmall = input(void 0, ...ngDevMode ? [{ debugName: "cssClassSmall" }] : /* istanbul ignore next */ []);
+		this.label = computed(() => this.value() ? this.labelOn() ?? "" : this.labelOff() ?? "", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.icon = computed(() => this.value() ? this.iconOn() ?? "" : this.iconOff() ?? "", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	}
+	toggle() {
+		const toggled = !this.value();
+		this.changed.emit({
+			value: this.value(),
+			toggled
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: ButtonToggleComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.1",
+			type: ButtonToggleComponent,
+			isStandalone: true,
+			selector: "button-toggle",
+			inputs: {
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				width: {
+					classPropertyName: "width",
+					publicName: "width",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				border: {
+					classPropertyName: "border",
+					publicName: "border",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				labelOn: {
+					classPropertyName: "labelOn",
+					publicName: "labelOn",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				labelOff: {
+					classPropertyName: "labelOff",
+					publicName: "labelOff",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconOn: {
+					classPropertyName: "iconOn",
+					publicName: "iconOn",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconOff: {
+					classPropertyName: "iconOff",
+					publicName: "iconOff",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				cssClass: {
+					classPropertyName: "cssClass",
+					publicName: "cssClass",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				cssClassSmall: {
+					classPropertyName: "cssClassSmall",
+					publicName: "cssClassSmall",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { changed: "changed" },
+			ngImport: i0,
+			template: "<button mat-stroked-button [style.border]=\"border() >= 0 ? border() : 'auto'\"\n    [style.height]=\"border() <= 0 ? '40px' : 'auto'\" [style.minWidth.px]=\"width() > 0 ? width() : 'auto'\"\n    [style.mxn-width.px]=\"width() > 0 ? width() : 'auto'\" [class]=\"cssClass()\" [attr.aria-label]=\"label()\"\n    (click)=\"toggle()\" [class.button-on]=\"value() === true\" [fxClass.xs]=\"cssClassSmall()\">\n    <div fxLayout=\"row\" fxLayoutGap=\"8px\" fxLayoutAlign=\"center center\" fxFill>\n        @if(icon()) {\n        <div fxFlex=\"24px\"><mat-icon style=\"display: block;\">{{icon()}}</mat-icon></div>\n        }\n        <div [innerHtml]=\"label() | safeHtml\"></div>\n    </div>\n</button>",
+			styles: [".button-on{background-color:var(--mat-switch-selected-focus-handle-color)!important;border-color:var(--mat-switch-selected-focus-handle-color)!important;font-weight:700}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: FlexLayoutModule
+				},
+				{
+					kind: "directive",
+					type: i2$1.FxLayoutDirective,
+					selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ",
+					inputs: [
+						"fxLayout",
+						"fxLayout.xs",
+						"fxLayout.sm",
+						"fxLayout.md",
+						"fxLayout.lg",
+						"fxLayout.xl",
+						"fxLayout.lt-sm",
+						"fxLayout.lt-md",
+						"fxLayout.lt-lg",
+						"fxLayout.lt-xl",
+						"fxLayout.gt-xs",
+						"fxLayout.gt-sm",
+						"fxLayout.gt-md",
+						"fxLayout.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i2$1.FxFlexDirective,
+					selector: "    [fxFlex],    [fxFlex.xs],    [fxFlex.sm],    [fxFlex.md],    [fxFlex.lg],    [fxFlex.xl],    [fxFlex.lt-sm],    [fxFlex.lt-md],    [fxFlex.lt-lg],    [fxFlex.lt-xl],    [fxFlex.gt-xs],    [fxFlex.gt-sm],    [fxFlex.gt-md],    [fxFlex.gt-lg]  ",
+					inputs: [
+						"fxFlex",
+						"fxFlex.xs",
+						"fxFlex.sm",
+						"fxFlex.md",
+						"fxFlex.lg",
+						"fxFlex.xl",
+						"fxFlex.lt-sm",
+						"fxFlex.lt-md",
+						"fxFlex.lt-lg",
+						"fxFlex.lt-xl",
+						"fxFlex.gt-xs",
+						"fxFlex.gt-sm",
+						"fxFlex.gt-md",
+						"fxFlex.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i2$1.FxLayoutAlignDirective,
+					selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ",
+					inputs: [
+						"fxLayoutAlign",
+						"fxLayoutAlign.xs",
+						"fxLayoutAlign.sm",
+						"fxLayoutAlign.md",
+						"fxLayoutAlign.lg",
+						"fxLayoutAlign.xl",
+						"fxLayoutAlign.lt-sm",
+						"fxLayoutAlign.lt-md",
+						"fxLayoutAlign.lt-lg",
+						"fxLayoutAlign.lt-xl",
+						"fxLayoutAlign.gt-xs",
+						"fxLayoutAlign.gt-sm",
+						"fxLayoutAlign.gt-md",
+						"fxLayoutAlign.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i2$1.FxLayoutGapDirective,
+					selector: "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ",
+					inputs: [
+						"fxLayoutGap",
+						"fxLayoutGap.xs",
+						"fxLayoutGap.sm",
+						"fxLayoutGap.md",
+						"fxLayoutGap.lg",
+						"fxLayoutGap.xl",
+						"fxLayoutGap.lt-sm",
+						"fxLayoutGap.lt-md",
+						"fxLayoutGap.lt-lg",
+						"fxLayoutGap.lt-xl",
+						"fxLayoutGap.gt-xs",
+						"fxLayoutGap.gt-sm",
+						"fxLayoutGap.gt-md",
+						"fxLayoutGap.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i2$1.FxFlexFillDirective,
+					selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ",
+					inputs: [
+						"fxFlexFill",
+						"fxFill",
+						"fxFlexFill.xs",
+						"fxFlexFill.sm",
+						"fxFlexFill.md",
+						"fxFlexFill.lg",
+						"fxFlexFill.xl",
+						"fxFlexFill.lt-sm",
+						"fxFlexFill.lt-md",
+						"fxFlexFill.lt-lg",
+						"fxFlexFill.lt-xl",
+						"fxFlexFill.gt-xs",
+						"fxFlexFill.gt-sm",
+						"fxFlexFill.gt-md",
+						"fxFlexFill.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i2$1.FxClassDirective,
+					selector: "    [fxClass],    [fxClass.xs],    [fxClass.sm],    [fxClass.md],    [fxClass.lg],    [fxClass.xl],    [fxClass.lt-sm],    [fxClass.lt-md],    [fxClass.lt-lg],    [fxClass.lt-xl],    [fxClass.gt-xs],    [fxClass.gt-sm],    [fxClass.gt-md],    [fxClass.gt-lg]  ",
+					inputs: [
+						"fxClass",
+						"fxClass.xs",
+						"fxClass.sm",
+						"fxClass.md",
+						"fxClass.lg",
+						"fxClass.xl",
+						"fxClass.lt-sm",
+						"fxClass.lt-md",
+						"fxClass.lt-lg",
+						"fxClass.lt-xl",
+						"fxClass.gt-xs",
+						"fxClass.gt-sm",
+						"fxClass.gt-md",
+						"fxClass.gt-lg"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: MatIconModule
+				},
+				{
+					kind: "component",
+					type: i3$1.MatIcon,
+					selector: "mat-icon",
+					inputs: [
+						"color",
+						"inline",
+						"svgIcon",
+						"fontSet",
+						"fontIcon"
+					],
+					exportAs: ["matIcon"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatButtonModule
+				},
+				{
+					kind: "component",
+					type: i4$1.MatButton,
+					selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+					inputs: ["matButton"],
+					exportAs: ["matButton", "matAnchor"]
+				},
+				{
+					kind: "pipe",
+					type: SafeHtmlPipe,
+					name: "safeHtml"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ButtonToggleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button-toggle",
+			standalone: true,
+			imports: [
+				FlexLayoutModule,
+				MatIconModule,
+				MatButtonModule,
+				SafeHtmlPipe
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<button mat-stroked-button [style.border]=\"border() >= 0 ? border() : 'auto'\"\n    [style.height]=\"border() <= 0 ? '40px' : 'auto'\" [style.minWidth.px]=\"width() > 0 ? width() : 'auto'\"\n    [style.mxn-width.px]=\"width() > 0 ? width() : 'auto'\" [class]=\"cssClass()\" [attr.aria-label]=\"label()\"\n    (click)=\"toggle()\" [class.button-on]=\"value() === true\" [fxClass.xs]=\"cssClassSmall()\">\n    <div fxLayout=\"row\" fxLayoutGap=\"8px\" fxLayoutAlign=\"center center\" fxFill>\n        @if(icon()) {\n        <div fxFlex=\"24px\"><mat-icon style=\"display: block;\">{{icon()}}</mat-icon></div>\n        }\n        <div [innerHtml]=\"label() | safeHtml\"></div>\n    </div>\n</button>",
+			styles: [".button-on{background-color:var(--mat-switch-selected-focus-handle-color)!important;border-color:var(--mat-switch-selected-focus-handle-color)!important;font-weight:700}\n"]
+		}]
+	}],
+	propDecorators: {
+		changed: [{
+			type: i0.Output,
+			args: ["changed"]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		border: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "border",
+				required: false
+			}]
+		}],
+		labelOn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelOn",
+				required: false
+			}]
+		}],
+		labelOff: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelOff",
+				required: false
+			}]
+		}],
+		iconOn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconOn",
+				required: false
+			}]
+		}],
+		iconOff: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconOff",
+				required: false
+			}]
+		}],
+		cssClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cssClass",
+				required: false
+			}]
+		}],
+		cssClassSmall: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cssClassSmall",
+				required: false
+			}]
+		}]
+	}
+});
+var ChipsSelectorComponent = class ChipsSelectorComponent {
+	get disabled() {
+		if (this.ngControl && this.ngControl.disabled != null) return this.ngControl.disabled;
+		return this._disabled;
+	}
+	set disabled(value) {
+		this._disabled = coerceBooleanProperty(value);
+		if (this.focused) {
+			this.focused = false;
+			this.stateChanges.next();
+		}
+	}
+	get shouldLabelFloat() {
+		return this.focused || !this.empty;
+	}
+	set value(value) {
+		this.setValue(value, true);
+	}
+	setValue(value, propagate) {
+		this._value = value;
+		const selection = [];
+		if (this._value) this.options().forEach((n) => {
+			if (this._value?.findIndex((x) => x.value === n.value) !== -1) selection.push(n);
+		});
+		this.selection.set(selection);
+		this.singleSelection.set(selection.length > 0 ? selection[0] : void 0);
+		this.cdr.markForCheck();
+		if (propagate) this.propagateChange(this._value);
+		this.stateChanges.next();
+		if (this.changesEnabled) this.changed.emit(this._value);
+	}
+	get value() {
+		return this._value;
+	}
+	get empty() {
+		return !this._value || this._value.length === 0;
+	}
+	get errorState() {
+		return this.ngControl?.errors != null && (this.ngControl?.touched ?? false);
+	}
+	constructor(ngControl) {
+		this.ngControl = ngControl;
+		this.changed = output();
+		this.containerId = `chips-selector-container--${SystemUtils.generateUUID()}`;
+		this.containerWidth = signal(-6, ...ngDevMode ? [{ debugName: "containerWidth" }] : /* istanbul ignore next */ []);
+		this.focused = false;
+		this.stateChanges = new Subject();
+		this.destroyRef = inject(DestroyRef);
+		this.changesEnabled = false;
+		this.destroyed = false;
+		this.widthRetries = 0;
+		this.resize$ = new Subject();
+		this.options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+		this.collapsedWidth = input(-1, ...ngDevMode ? [{ debugName: "collapsedWidth" }] : /* istanbul ignore next */ []);
+		this.collapsedDisplayMode = input("dropdown", ...ngDevMode ? [{ debugName: "collapsedDisplayMode" }] : /* istanbul ignore next */ []);
+		this.collapseAt = input(-1, ...ngDevMode ? [{ debugName: "collapseAt" }] : /* istanbul ignore next */ []);
+		this.collapseAtContainer = input(false, ...ngDevMode ? [{ debugName: "collapseAtContainer" }] : /* istanbul ignore next */ []);
+		this.collapsed = computed(() => {
+			const cw = this.containerWidth();
+			const mw = this.collapseAt();
+			return this.mode() === "collapsed" || mw !== -1 && cw > 0 && mw > 0 && cw < mw;
+		}, ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.multiple = input(false, ...ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []);
+		this.mustSelect = input(false, ...ngDevMode ? [{ debugName: "mustSelect" }] : /* istanbul ignore next */ []);
+		this.mode = input("dynamic", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+		this.stacked = input(false, ...ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []);
+		this.padAt = input(0, ...ngDevMode ? [{ debugName: "padAt" }] : /* istanbul ignore next */ []);
+		this.required = input(false, {
+			...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+		this._disabled = false;
+		this.id = `chips-selector--${SystemUtils.generateUUID()}`;
+		this.describedBy = "";
+		this._value = [];
+		this.propagateChange = () => {};
+		this.propagateTouched = () => {};
+		this.renderer = inject(Renderer2);
+		this.cdr = inject(ChangeDetectorRef);
+		this.selection = signal([], ...ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []);
+		this.singleSelection = signal(void 0, ...ngDevMode ? [{ debugName: "singleSelection" }] : /* istanbul ignore next */ []);
+		this.selectionForm = form(this.selection);
+		this.singleForm = form(this.singleSelection);
+		if (this.ngControl != null) this.ngControl.valueAccessor = this;
+		effect(() => {
+			this.required();
+			this.placeholder();
+			this.stateChanges.next();
+		});
+		this.resize$.pipe(takeUntilDestroyed(this.destroyRef), auditTime(0, animationFrameScheduler)).subscribe(() => {
+			if (this.collapseAt() > 0) this.updateContainerWidth();
+		});
+		afterNextRender(() => {
+			if (SystemUtils.isBrowser() && typeof ResizeObserver !== "undefined") {
+				const elem = document.getElementById(this.containerId);
+				if (elem) {
+					this.resizeObserver = new ResizeObserver(() => this.resize$.next());
+					this.resizeObserver.observe(elem);
+				}
+			}
+			setTimeout(() => {
+				this.updateContainerWidth();
+				this.changesEnabled = true;
+			}, 250);
+		});
+	}
+	ngOnDestroy() {
+		this.destroyed = true;
+		this.resizeObserver?.disconnect();
+		this.stateChanges.complete();
+	}
+	updateContainerWidth() {
+		if (this.destroyed) return;
+		const elem = document.getElementById(this.containerId);
+		if (elem && elem.clientWidth > 0) {
+			this.widthRetries = 0;
+			this.containerWidth.set(this.collapseAtContainer() ? elem.clientWidth : window.innerWidth);
+		} else if (this.widthRetries < 50) {
+			this.widthRetries++;
+			setTimeout(() => this.updateContainerWidth(), 100);
+		}
+	}
+	getSelection() {
+		const value = !this.multiple() && this.collapsed() && this.collapsedDisplayMode() === "button" ? this.singleSelection() : this.selection();
+		if (Array.isArray(value)) return value;
+		return value ? [value] : [];
+	}
+	updateValue() {
+		setTimeout(() => {
+			this.setValue(this.getSelection(), true);
+		}, 250);
+	}
+	isSelectable(item) {
+		return this.multiple() || this.getSelection().findIndex((x) => x.value === item.value) === -1;
+	}
+	writeValue(value) {
+		const next = value;
+		if (this.value !== next) this.setValue(next, false);
+	}
+	registerOnChange(fn) {
+		this.propagateChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.propagateTouched = fn;
+	}
+	setDescribedByIds(ids) {
+		this.describedBy = ids.join(" ");
+	}
+	setDisabledState(isDisabled) {
+		this._disabled = isDisabled;
+		if (isDisabled && this.focused) {
+			this.focused = false;
+			this.stateChanges.next();
+		}
+		if (!SystemUtils.isBrowser()) return;
+		const elem = document.getElementById(this.id);
+		if (elem) this.renderer.setProperty(elem, "disabled", isDisabled);
+	}
+	onContainerClick() {
+		if (!this.focused) {
+			if (!SystemUtils.isBrowser()) return;
+			const elem = document.getElementById(this.id);
+			if (elem) {
+				elem.focus();
+				this.propagateTouched();
+			}
+		}
+	}
+	clear(e) {
+		this.setValue([], true);
+		e.stopPropagation();
+	}
+	select(item) {
+		if (item) this.setValue([item], true);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: ChipsSelectorComponent,
+			deps: [{
+				token: i1.NgControl,
+				optional: true,
+				self: true
+			}],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.1",
+			type: ChipsSelectorComponent,
+			isStandalone: true,
+			selector: "chips-selector",
+			inputs: {
+				options: {
+					classPropertyName: "options",
+					publicName: "options",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				collapsedWidth: {
+					classPropertyName: "collapsedWidth",
+					publicName: "collapsedWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				collapsedDisplayMode: {
+					classPropertyName: "collapsedDisplayMode",
+					publicName: "collapsedDisplayMode",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				collapseAt: {
+					classPropertyName: "collapseAt",
+					publicName: "collapseAt",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				collapseAtContainer: {
+					classPropertyName: "collapseAtContainer",
+					publicName: "collapseAtContainer",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				multiple: {
+					classPropertyName: "multiple",
+					publicName: "multiple",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				mustSelect: {
+					classPropertyName: "mustSelect",
+					publicName: "mustSelect",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				mode: {
+					classPropertyName: "mode",
+					publicName: "mode",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				stacked: {
+					classPropertyName: "stacked",
+					publicName: "stacked",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				padAt: {
+					classPropertyName: "padAt",
+					publicName: "padAt",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				required: {
+					classPropertyName: "required",
+					publicName: "required",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				placeholder: {
+					classPropertyName: "placeholder",
+					publicName: "placeholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { changed: "changed" },
+			host: { properties: {
+				"id": "id",
+				"class.floating": "shouldLabelFloat",
+				"attr.aria-describedBy": "describedBy"
+			} },
+			ngImport: i0,
+			template: "<div [id]=\"containerId\" class=\"chips-selector\">\n    @if(containerWidth() > 0) {\n    @if(collapsed()) {\n    @if(collapsedDisplayMode() === 'dropdown') {\n    <mat-form-field [style.min-width]=\"collapsedWidth() > 0 ? collapsedWidth()+'px' : '100%'\" subscriptSizing=\"dynamic\">\n        @if(label()) {\n        <mat-label>{{label()}}</mat-label>\n        }\n        <mat-select [formField]=\"selectionForm\" [multiple]=\"multiple()\" (selectionChange)=\"updateValue()\">\n            <mat-select-trigger>\n                @if (value && (value.length || 0) > 0) {\n                {{value[0].shortName ?? value[0].name}}\n                }\n                @if (value && (value.length || 0) > 1) {\n                <span class=\"collapsed-additional-selection\">\n                    (+{{(value.length || 0) - 1}} {{value.length === 2 ? 'altro' : 'altri'}})\n                </span>\n                }\n            </mat-select-trigger>\n            @for (o of options(); track $index) {\n            <mat-option [value]=\"o\" [disabled]=\"o.disabled\">\n                {{o.name}}\n                @if(o.bag) {\n                &nbsp; ({{o.bag}})\n                }\n            </mat-option>\n            }\n        </mat-select>\n        @if (value && (value.length || 0) > 0) {\n        <button matSuffix tabindex=\"-1\" mat-icon-button aria-label=\"Pulisci\" (click)=\"clear($event)\">\n            <mat-icon>close</mat-icon>\n        </button>\n        }\n    </mat-form-field>\n    } @else {\n    <button-selector [label]=\"label()\" [options]=\"options()\" [width]=\"collapsedWidth()\" [formField]=\"singleForm\"\n        (selected)=\"updateValue()\"></button-selector>\n\n    }\n    } @else {\n    <mat-chip-listbox [class]=\"stacked() ? 'mat-mdc-chip-set-stacked' : ''\" [multiple]=\"multiple()\"\n        [formField]=\"selectionForm\" (change)=\"updateValue()\">\n        @for (o of options(); track $index; let i = $index) {\n        <mat-chip-option [matBadge]=\"o.bag\" [matTooltip]=\"o.disabled === true ? 'Non disponibile' : (o.bagInfo ?? '')\" [selectable]=\"isSelectable(o)\" [value]=\"o\"\n            [disabled]=\"o.disabled\" [class.chip-padded]=\"i < padAt()\">{{o.shortName ??\n            o.name}}</mat-chip-option>\n        }\n    </mat-chip-listbox>\n    }\n    }\n</div>",
+			styles: [".chips-selector{width:100%}.chips-selector .collapsed-additional-selection{opacity:.75;font-size:.75em}.chip-padded{margin-right:10px!important}.mdc-evolution-chip--disabled{pointer-events:auto!important}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: FlexLayoutModule
+				},
+				{
+					kind: "directive",
+					type: FormField,
+					selector: "[formField]",
+					inputs: ["formField"],
+					exportAs: ["formField"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatFormFieldModule
+				},
+				{
+					kind: "component",
+					type: i2.MatFormField,
+					selector: "mat-form-field",
+					inputs: [
+						"hideRequiredMarker",
+						"color",
+						"floatLabel",
+						"appearance",
+						"subscriptSizing",
+						"hintLabel"
+					],
+					exportAs: ["matFormField"]
+				},
+				{
+					kind: "directive",
+					type: i2.MatLabel,
+					selector: "mat-label"
+				},
+				{
+					kind: "directive",
+					type: i2.MatSuffix,
+					selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
+					inputs: ["matTextSuffix"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatSelectModule
+				},
+				{
+					kind: "component",
+					type: i3.MatSelect,
+					selector: "mat-select",
+					inputs: [
+						"aria-describedby",
+						"panelClass",
+						"disabled",
+						"disableRipple",
+						"tabIndex",
+						"hideSingleSelectionIndicator",
+						"placeholder",
+						"required",
+						"multiple",
+						"disableOptionCentering",
+						"compareWith",
+						"value",
+						"aria-label",
+						"aria-labelledby",
+						"errorStateMatcher",
+						"typeaheadDebounceInterval",
+						"sortComparator",
+						"id",
+						"panelWidth",
+						"canSelectNullableOptions"
+					],
+					outputs: [
+						"openedChange",
+						"opened",
+						"closed",
+						"selectionChange",
+						"valueChange"
+					],
+					exportAs: ["matSelect"]
+				},
+				{
+					kind: "directive",
+					type: i3.MatSelectTrigger,
+					selector: "mat-select-trigger"
+				},
+				{
+					kind: "component",
+					type: i3.MatOption,
+					selector: "mat-option",
+					inputs: [
+						"value",
+						"id",
+						"disabled"
+					],
+					outputs: ["onSelectionChange"],
+					exportAs: ["matOption"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatChipsModule
+				},
+				{
+					kind: "component",
+					type: i4.MatChipListbox,
+					selector: "mat-chip-listbox",
+					inputs: [
+						"multiple",
+						"aria-orientation",
+						"selectable",
+						"compareWith",
+						"required",
+						"hideSingleSelectionIndicator",
+						"value"
+					],
+					outputs: ["change"]
+				},
+				{
+					kind: "component",
+					type: i4.MatChipOption,
+					selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]",
+					inputs: ["selectable", "selected"],
+					outputs: ["selectionChange"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatIconModule
+				},
+				{
+					kind: "component",
+					type: i3$1.MatIcon,
+					selector: "mat-icon",
+					inputs: [
+						"color",
+						"inline",
+						"svgIcon",
+						"fontSet",
+						"fontIcon"
+					],
+					exportAs: ["matIcon"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatButtonModule
+				},
+				{
+					kind: "component",
+					type: i4$1.MatIconButton,
+					selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]",
+					exportAs: ["matButton", "matAnchor"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatBadgeModule
+				},
+				{
+					kind: "directive",
+					type: i7.MatBadge,
+					selector: "[matBadge]",
+					inputs: [
+						"matBadgeColor",
+						"matBadgeOverlap",
+						"matBadgeDisabled",
+						"matBadgePosition",
+						"matBadge",
+						"matBadgeDescription",
+						"matBadgeSize",
+						"matBadgeHidden"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: MatTooltipModule
+				},
+				{
+					kind: "directive",
+					type: i8.MatTooltip,
+					selector: "[matTooltip]",
+					inputs: [
+						"matTooltipPosition",
+						"matTooltipPositionAtOrigin",
+						"matTooltipDisabled",
+						"matTooltipShowDelay",
+						"matTooltipHideDelay",
+						"matTooltipTouchGestures",
+						"matTooltip",
+						"matTooltipClass"
+					],
+					exportAs: ["matTooltip"]
+				},
+				{
+					kind: "component",
+					type: ButtonSelectorComponent,
+					selector: "button-selector",
+					inputs: [
+						"disabled",
+						"width",
+						"border",
+						"borderRadius",
+						"label",
+						"labelSelected",
+						"options",
+						"autoSelect"
+					],
+					outputs: ["changed", "selected"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ChipsSelectorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "chips-selector",
+			standalone: true,
+			imports: [
+				FlexLayoutModule,
+				FormField,
+				MatFormFieldModule,
+				MatSelectModule,
+				MatChipsModule,
+				MatIconModule,
+				MatButtonModule,
+				MatBadgeModule,
+				MatTooltipModule,
+				ButtonSelectorComponent
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[id]": "id",
+				"[class.floating]": "shouldLabelFloat",
+				"[attr.aria-describedBy]": "describedBy"
+			},
+			template: "<div [id]=\"containerId\" class=\"chips-selector\">\n    @if(containerWidth() > 0) {\n    @if(collapsed()) {\n    @if(collapsedDisplayMode() === 'dropdown') {\n    <mat-form-field [style.min-width]=\"collapsedWidth() > 0 ? collapsedWidth()+'px' : '100%'\" subscriptSizing=\"dynamic\">\n        @if(label()) {\n        <mat-label>{{label()}}</mat-label>\n        }\n        <mat-select [formField]=\"selectionForm\" [multiple]=\"multiple()\" (selectionChange)=\"updateValue()\">\n            <mat-select-trigger>\n                @if (value && (value.length || 0) > 0) {\n                {{value[0].shortName ?? value[0].name}}\n                }\n                @if (value && (value.length || 0) > 1) {\n                <span class=\"collapsed-additional-selection\">\n                    (+{{(value.length || 0) - 1}} {{value.length === 2 ? 'altro' : 'altri'}})\n                </span>\n                }\n            </mat-select-trigger>\n            @for (o of options(); track $index) {\n            <mat-option [value]=\"o\" [disabled]=\"o.disabled\">\n                {{o.name}}\n                @if(o.bag) {\n                &nbsp; ({{o.bag}})\n                }\n            </mat-option>\n            }\n        </mat-select>\n        @if (value && (value.length || 0) > 0) {\n        <button matSuffix tabindex=\"-1\" mat-icon-button aria-label=\"Pulisci\" (click)=\"clear($event)\">\n            <mat-icon>close</mat-icon>\n        </button>\n        }\n    </mat-form-field>\n    } @else {\n    <button-selector [label]=\"label()\" [options]=\"options()\" [width]=\"collapsedWidth()\" [formField]=\"singleForm\"\n        (selected)=\"updateValue()\"></button-selector>\n\n    }\n    } @else {\n    <mat-chip-listbox [class]=\"stacked() ? 'mat-mdc-chip-set-stacked' : ''\" [multiple]=\"multiple()\"\n        [formField]=\"selectionForm\" (change)=\"updateValue()\">\n        @for (o of options(); track $index; let i = $index) {\n        <mat-chip-option [matBadge]=\"o.bag\" [matTooltip]=\"o.disabled === true ? 'Non disponibile' : (o.bagInfo ?? '')\" [selectable]=\"isSelectable(o)\" [value]=\"o\"\n            [disabled]=\"o.disabled\" [class.chip-padded]=\"i < padAt()\">{{o.shortName ??\n            o.name}}</mat-chip-option>\n        }\n    </mat-chip-listbox>\n    }\n    }\n</div>",
+			styles: [".chips-selector{width:100%}.chips-selector .collapsed-additional-selection{opacity:.75;font-size:.75em}.chip-padded{margin-right:10px!important}.mdc-evolution-chip--disabled{pointer-events:auto!important}\n"]
+		}]
+	}],
+	ctorParameters: () => [{
+		type: i1.NgControl,
+		decorators: [{ type: Optional }, { type: Self }]
+	}],
+	propDecorators: {
+		changed: [{
+			type: i0.Output,
+			args: ["changed"]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		collapsedWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsedWidth",
+				required: false
+			}]
+		}],
+		collapsedDisplayMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsedDisplayMode",
+				required: false
+			}]
+		}],
+		collapseAt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapseAt",
+				required: false
+			}]
+		}],
+		collapseAtContainer: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapseAtContainer",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		multiple: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiple",
+				required: false
+			}]
+		}],
+		mustSelect: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mustSelect",
+				required: false
+			}]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		stacked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stacked",
+				required: false
+			}]
+		}],
+		padAt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "padAt",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		disabled: [{ type: Input }]
+	}
+});
 export { ButtonSelectorComponent, ButtonToggleComponent, ChipsSelectorComponent };
-//# sourceMappingURL=arsedizioni-ars-utils-ui.controls.mjs.map
+
+//# sourceMappingURL=arsedizioni-ars-utils-ui.controls.mjs.map