@arsedizioni/ars-utils 22.1.5 → 22.5.2

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

@@ -0,0 +1,962 @@
+import * as i0 from '@angular/core';
+import { output, inject, Renderer2, signal, input, effect, Input, Optional, Self, ChangeDetectionStrategy, Component, computed, DestroyRef, booleanAttribute, ChangeDetectorRef, afterNextRender, model, viewChild, ElementRef } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i6 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 { FormsModule } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i7 from '@angular/material/badge';
+import { MatBadgeModule } from '@angular/material/badge';
+import * as i5$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';
+import * as i1$1 from '@angular/material/tree';
+import { MatTree, MatTreeModule } from '@angular/material/tree';
+import * as i2$2 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i9 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { MatCalendar } from '@angular/material/datepicker';
+
+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.3", 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.3", 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: i6.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.3", 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.3", ngImport: i0, type: ButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", 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: i6.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.3", 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;
+        this.selection = [];
+        this.singleSelection = undefined;
+        if (this._value) {
+            this.options().forEach(n => {
+                if (this._value?.findIndex((x) => x.value === n.value) !== -1) {
+                    this.selection.push(n);
+                }
+            });
+            if (this.selection.length > 0) {
+                this.singleSelection = this.selection[0];
+            }
+        }
+        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 (may contain multiple entries when `multiple` is `true`). */
+        this.selection = [];
+        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, giving the template time to sync `ngModel`.
+     */
+    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.3", 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.3", 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\">\r\n    @if(containerWidth() > 0) {\r\n    @if(collapsed()) {\r\n    @if(collapsedDisplayMode() === 'dropdown') {\r\n    <mat-form-field [style.min-width]=\"collapsedWidth() > 0 ? collapsedWidth()+'px' : '100%'\" subscriptSizing=\"dynamic\">\r\n        @if(label()) {\r\n        <mat-label>{{label()}}</mat-label>\r\n        }\r\n        <mat-select [(ngModel)]=\"selection\" [multiple]=\"multiple()\" (selectionChange)=\"updateValue()\">\r\n            <mat-select-trigger>\r\n                @if (value && (value.length || 0) > 0) {\r\n                {{value[0].shortName ?? value[0].name}}\r\n                }\r\n                @if (value && (value.length || 0) > 1) {\r\n                <span class=\"collapsed-additional-selection\">\r\n                    (+{{(value.length || 0) - 1}} {{value.length === 2 ? 'altro' : 'altri'}})\r\n                </span>\r\n                }\r\n            </mat-select-trigger>\r\n            @for (o of options(); track $index) {\r\n            <mat-option [value]=\"o\" [disabled]=\"o.disabled\">\r\n                {{o.name}}\r\n                @if(o.bag) {\r\n                &nbsp; ({{o.bag}})\r\n                }\r\n            </mat-option>\r\n            }\r\n        </mat-select>\r\n        @if (value && (value.length || 0) > 0) {\r\n        <button matSuffix tabindex=\"-1\" mat-icon-button aria-label=\"Pulisci\" (click)=\"clear($event)\">\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n        }\r\n    </mat-form-field>\r\n    } @else {\r\n    <button-selector [label]=\"label()\" [options]=\"options()\" [width]=\"collapsedWidth()\" [(ngModel)]=\"singleSelection\"\r\n        name=\"value\" (selected)=\"updateValue()\"></button-selector>\r\n\r\n    }\r\n    } @else {\r\n    <mat-chip-listbox [class]=\"stacked() ? 'mat-mdc-chip-set-stacked' : ''\" [multiple]=\"multiple()\"\r\n        [(ngModel)]=\"selection\" (change)=\"updateValue()\">\r\n        @for (o of options(); track $index; let i = $index) {\r\n        <mat-chip-option [matBadge]=\"o.bag\" [matTooltip]=\"o.disabled === true ? 'Non disponibile' : (o.bagInfo ?? '')\" [selectable]=\"isSelectable(o)\" [value]=\"o\"\r\n            [disabled]=\"o.disabled\" [class.chip-padded]=\"i < padAt()\">{{o.shortName ??\r\n            o.name}}</mat-chip-option>\r\n        }\r\n    </mat-chip-listbox>\r\n    }\r\n    }\r\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: i5$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5$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: i6.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.3", ngImport: i0, type: ChipsSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chips-selector', standalone: true, imports: [FlexLayoutModule, FormsModule, 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\">\r\n    @if(containerWidth() > 0) {\r\n    @if(collapsed()) {\r\n    @if(collapsedDisplayMode() === 'dropdown') {\r\n    <mat-form-field [style.min-width]=\"collapsedWidth() > 0 ? collapsedWidth()+'px' : '100%'\" subscriptSizing=\"dynamic\">\r\n        @if(label()) {\r\n        <mat-label>{{label()}}</mat-label>\r\n        }\r\n        <mat-select [(ngModel)]=\"selection\" [multiple]=\"multiple()\" (selectionChange)=\"updateValue()\">\r\n            <mat-select-trigger>\r\n                @if (value && (value.length || 0) > 0) {\r\n                {{value[0].shortName ?? value[0].name}}\r\n                }\r\n                @if (value && (value.length || 0) > 1) {\r\n                <span class=\"collapsed-additional-selection\">\r\n                    (+{{(value.length || 0) - 1}} {{value.length === 2 ? 'altro' : 'altri'}})\r\n                </span>\r\n                }\r\n            </mat-select-trigger>\r\n            @for (o of options(); track $index) {\r\n            <mat-option [value]=\"o\" [disabled]=\"o.disabled\">\r\n                {{o.name}}\r\n                @if(o.bag) {\r\n                &nbsp; ({{o.bag}})\r\n                }\r\n            </mat-option>\r\n            }\r\n        </mat-select>\r\n        @if (value && (value.length || 0) > 0) {\r\n        <button matSuffix tabindex=\"-1\" mat-icon-button aria-label=\"Pulisci\" (click)=\"clear($event)\">\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n        }\r\n    </mat-form-field>\r\n    } @else {\r\n    <button-selector [label]=\"label()\" [options]=\"options()\" [width]=\"collapsedWidth()\" [(ngModel)]=\"singleSelection\"\r\n        name=\"value\" (selected)=\"updateValue()\"></button-selector>\r\n\r\n    }\r\n    } @else {\r\n    <mat-chip-listbox [class]=\"stacked() ? 'mat-mdc-chip-set-stacked' : ''\" [multiple]=\"multiple()\"\r\n        [(ngModel)]=\"selection\" (change)=\"updateValue()\">\r\n        @for (o of options(); track $index; let i = $index) {\r\n        <mat-chip-option [matBadge]=\"o.bag\" [matTooltip]=\"o.disabled === true ? 'Non disponibile' : (o.bagInfo ?? '')\" [selectable]=\"isSelectable(o)\" [value]=\"o\"\r\n            [disabled]=\"o.disabled\" [class.chip-padded]=\"i < padAt()\">{{o.shortName ??\r\n            o.name}}</mat-chip-option>\r\n        }\r\n    </mat-chip-listbox>\r\n    }\r\n    }\r\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
+            }] } });
+
+class TreePickerComponent {
+    /** Returns true when the node can be selected: depth < maxDepth or explicitly listed in maxDepthOverrides. */
+    isSelectable(node) {
+        return this._isSelectableNode(node);
+    }
+    _isSelectableNode(node) {
+        const depth = this._maps().depthMap.get(node.id) ?? 0;
+        return depth < this.maxDepth() || this._overrideSubtreeSet().has(node.id);
+    }
+    constructor() {
+        /** Nested tree data to display. */
+        this.tree = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
+        /** Currently selected node ids. Supports two-way binding via [(selection)]. */
+        this.selection = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+        /** When true, checkboxes and chip remove buttons are disabled (mirrors Material convention). */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Description to display when no selection is made. */
+        this.descriptionEmpty = input('<span>Nessuna selezione: vengono inclusi <strong>tutti gli elementi</strong>.</span>', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descriptionEmpty" }] : /* istanbul ignore next */ []));
+        /** Maximum number of tree levels to display (default: 3). */
+        this.maxDepth = input(3, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxDepth" }] : /* istanbul ignore next */ []));
+        /**
+         * List of node IDs at depth >= maxDepth that unlock selection for themselves
+         * and all their descendants, regardless of depth.
+         */
+        this.maxDepthOverrides = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxDepthOverrides" }] : /* istanbul ignore next */ []));
+        /**
+         * Number of levels to auto-expand on load.
+         * 0 or undefined = only top level visible (no expansion);
+         * 1 = expand depth-0 nodes; 2 = expand depth-0 and depth-1 nodes; etc.
+         * Must be less than maxDepth.
+         */
+        this.minDepth = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minDepth" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits the count of visible selected nodes whenever the selection changes.
+         * Emits 0 when nothing is selected (meaning all items are implicitly included).
+         */
+        this.selectionCount = output();
+        /** Emits void whenever the user changes the selection (toggle, remove, clear). */
+        this.changed = output();
+        this._treeRef = viewChild((MatTree), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_treeRef" }] : /* istanbul ignore next */ []));
+        this._elRef = inject(ElementRef);
+        /**
+         * Set of all node IDs selectable via overrides: each listed root and all its descendants.
+         * Recomputed whenever the tree data or the override list changes.
+         */
+        this._overrideSubtreeSet = computed(() => {
+            const overrideIds = new Set(this.maxDepthOverrides());
+            const maps = this._maps();
+            const result = new Set();
+            for (const id of overrideIds) {
+                const root = maps.nodeMap.get(id);
+                if (!root)
+                    continue;
+                const addSubtree = (n) => {
+                    result.add(n.id);
+                    for (const child of (n.children ?? []))
+                        addSubtree(child);
+                };
+                addSubtree(root);
+            }
+            return result;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_overrideSubtreeSet" }] : /* istanbul ignore next */ []));
+        /** All three maps rebuilt lazily as a single computed whenever taxonomy changes. */
+        this._maps = computed(() => {
+            const parentMap = new Map();
+            const depthMap = new Map();
+            const nodeMap = new Map();
+            const build = (nodes, parent, depth = 0) => {
+                for (const node of nodes) {
+                    depthMap.set(node.id, depth);
+                    nodeMap.set(node.id, node);
+                    if (parent)
+                        parentMap.set(node.id, parent);
+                    if (node.children?.length)
+                        build(node.children, node, depth + 1);
+                }
+            };
+            build(this.tree());
+            return { parentMap, depthMap, nodeMap };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_maps" }] : /* istanbul ignore next */ []));
+        /** O(1) set of selected ids, rebuilt only when selection changes. */
+        this._selectedSet = computed(() => new Set(this.selection()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_selectedSet" }] : /* istanbul ignore next */ []));
+        /** True when at least one node is explicitly selected. */
+        this.hasSelection = computed(() => this.selection().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
+        /** Count of selected nodes within selectable levels (depth < maxDepth or in overrides), shown in the tab label. */
+        this.selectedVisibleCount = computed(() => this.selection().filter(id => {
+            const node = this._maps().nodeMap.get(id);
+            return node ? this._isSelectableNode(node) : false;
+        }).length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedVisibleCount" }] : /* istanbul ignore next */ []));
+        this.treeChildrenAccessor = (node) => {
+            return (node.children ?? []);
+        };
+        this.hasChild = (_, node) => !!(node.children?.length);
+        /** Current filter text. */
+        this.filterText = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
+        /** Nodes matching the current filter text, in nodeMap iteration order. */
+        this.filteredItems = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+        /** Index of the currently highlighted filtered node (-1 = none). */
+        this.filterIndex = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterIndex" }] : /* istanbul ignore next */ []));
+        /** The currently highlighted filtered node, or null. */
+        this.filteredNode = computed(() => {
+            const idx = this.filterIndex();
+            return idx >= 0 ? (this.filteredItems()[idx] ?? null) : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredNode" }] : /* istanbul ignore next */ []));
+        // Expand nodes up to minDepth whenever new taxonomy data arrives
+        effect(() => {
+            const maps = this._maps();
+            const expandLevels = this.minDepth() ?? 0;
+            setTimeout(() => {
+                const tree = this._treeRef();
+                if (!tree)
+                    return;
+                tree.collapseAll();
+                if (expandLevels <= 0)
+                    return;
+                maps.depthMap.forEach((depth, id) => {
+                    if (depth < expandLevels) {
+                        const node = maps.nodeMap.get(id);
+                        if (node)
+                            tree.expand(node);
+                    }
+                });
+            });
+        });
+        // Emit visible selection count on every selection change
+        effect(() => {
+            this.selectionCount.emit(this.selectedVisibleCount());
+        });
+    }
+    /** Expands all visible nodes in the tree. */
+    expandAll() {
+        this._treeRef()?.expandAll();
+    }
+    /** Collapses all nodes in the tree. */
+    collapseAll() {
+        this._treeRef()?.collapseAll();
+    }
+    /** Clears the entire selection. */
+    clearAll() {
+        this.selection.set([]);
+        this.changed.emit();
+    }
+    /** Searches nodes by text and moves to the first match. */
+    doFilter() {
+        const text = this.filterText().trim().toLowerCase();
+        if (text.length < 3) {
+            this.filteredItems.set([]);
+            this.filterIndex.set(-1);
+            return;
+        }
+        const matches = Array.from(this._maps().nodeMap.values())
+            .filter(n => n.name?.toLowerCase().includes(text));
+        this.filteredItems.set(matches);
+        const idx = matches.length > 0 ? 0 : -1;
+        this.filterIndex.set(idx);
+        if (idx >= 0)
+            this._scrollToFiltered(idx, matches);
+    }
+    /** Clears the filter and restores the original tree state. */
+    clearFilter() {
+        this.filterText.set('');
+        this.filteredItems.set([]);
+        this.filterIndex.set(-1);
+    }
+    /** Moves to the next matching node, cycling back to the first. */
+    nextFiltered() {
+        const items = this.filteredItems();
+        if (!items.length)
+            return;
+        const next = (this.filterIndex() + 1) % items.length;
+        this.filterIndex.set(next);
+        this._scrollToFiltered(next, items);
+    }
+    /** Returns true when the node is the currently highlighted filter match. */
+    isFilteredNode(node) {
+        return this.filteredNode()?.id === node.id;
+    }
+    /** Expands ancestors of the target node and scrolls it into view. */
+    _scrollToFiltered(index, items) {
+        const node = items[index];
+        if (!node)
+            return;
+        const tree = this._treeRef();
+        if (tree) {
+            let parent = this._maps().parentMap.get(node.id);
+            while (parent) {
+                tree.expand(parent);
+                parent = this._maps().parentMap.get(parent.id);
+            }
+        }
+        setTimeout(() => {
+            const el = this._elRef.nativeElement.querySelector(`[data-node-id="${node.id}"]`);
+            el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        });
+    }
+    /**
+     * Returns true when the node is in the active selection.
+     * @param node - tree node to check
+     * @returns true if selected
+     */
+    isSelected(node) {
+        return this._selectedSet().has(node.id);
+    }
+    /**
+     * Returns true when a subset (but not all) of the node's descendants are selected,
+     * producing the indeterminate checkbox state.
+     * @param node - tree node to evaluate
+     * @returns true if the node is in a partial-selection (indeterminate) state
+     */
+    isIndeterminate(node) {
+        if (!node.children?.length)
+            return false;
+        const descendants = this._getSelectableDescendants(node);
+        const set = this._selectedSet();
+        const count = descendants.filter(d => set.has(d.id)).length;
+        return count > 0 && count < descendants.length;
+    }
+    /**
+     * Toggles the node and all its descendants; then syncs the ancestor chain.
+     * @param node - the node that was clicked
+     */
+    toggleNode(node) {
+        this.selection.update(current => {
+            const set = new Set(current);
+            if (set.has(node.id)) {
+                set.delete(node.id);
+            }
+            else {
+                set.add(node.id);
+            }
+            this._syncParentsInSet(node, set);
+            return Array.from(set);
+        });
+        this.changed.emit();
+    }
+    /**
+     * Deselects the node and all its descendants. Called by the chip remove button.
+     * @param node - the node to remove from the selection
+     */
+    removeNode(node) {
+        this.selection.update(current => {
+            const set = new Set(current);
+            set.delete(node.id);
+            this._syncParentsInSet(node, set);
+            return Array.from(set);
+        });
+        this.changed.emit();
+    }
+    /**
+     * Returns the INode for the given id, or undefined if not found.
+     * @param id - node id to look up
+     * @returns the matching INode
+     */
+    nodeById(id) {
+        return this._maps().nodeMap.get(id);
+    }
+    /**
+     * Returns true when the node at the given id is within the visible depth range
+     * and should appear in the chip list.
+     * @param id - node id to check
+     * @returns true if the node depth is less than maxDepth
+     */
+    isChipVisible(id) {
+        const node = this._maps().nodeMap.get(id);
+        return node ? this._isSelectableNode(node) : false;
+    }
+    /**
+     * Returns only the selectable descendants of node (depth < maxDepth or in overrides),
+     * used for indeterminate state and parent auto-selection logic.
+     * @param node - root of the subtree to traverse
+     * @returns flat array of selectable descendant INodes
+     */
+    _getSelectableDescendants(node) {
+        const result = [];
+        for (const child of (node.children ?? [])) {
+            const c = child;
+            if (this._isSelectableNode(c))
+                result.push(c);
+            result.push(...this._getSelectableDescendants(c));
+        }
+        return result;
+    }
+    /**
+     * Walks up the ancestor chain from node, selecting a parent only when all
+     * its descendants are in the set, deselecting it otherwise.
+     * @param node - starting node for the upward traversal
+     * @param set - mutable selection set updated in place
+     */
+    _syncParentsInSet(node, set) {
+        let parent = this._maps().parentMap.get(node.id);
+        while (parent) {
+            const descendants = this._getSelectableDescendants(parent);
+            if (descendants.length > 0 && descendants.every(d => set.has(d.id))) {
+                set.add(parent.id);
+            }
+            else {
+                set.delete(parent.id);
+            }
+            parent = this._maps().parentMap.get(parent.id);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: TreePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: TreePickerComponent, isStandalone: true, selector: "tree-picker", inputs: { tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, descriptionEmpty: { classPropertyName: "descriptionEmpty", publicName: "descriptionEmpty", isSignal: true, isRequired: false, transformFunction: null }, maxDepth: { classPropertyName: "maxDepth", publicName: "maxDepth", isSignal: true, isRequired: false, transformFunction: null }, maxDepthOverrides: { classPropertyName: "maxDepthOverrides", publicName: "maxDepthOverrides", isSignal: true, isRequired: false, transformFunction: null }, minDepth: { classPropertyName: "minDepth", publicName: "minDepth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", selectionCount: "selectionCount", changed: "changed" }, viewQueries: [{ propertyName: "_treeRef", first: true, predicate: (MatTree), descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group class=\"taxonomy-picker-tabs\" style=\"height:100%\">\r\n    <mat-tab style=\"overflow-x: hidden !important; height: 100%\">\r\n        <ng-template mat-tab-label>\r\n            Seleziona\r\n            <mat-icon\r\n                style=\"font-size:16px;height:16px;width:16px;margin-left:4px;vertical-align:middle;color:var(--mat-sys-primary)\"\r\n                [matTooltip]=\"'Nessuna selezione = tutti gli argomenti inclusi;\\r\\nOgni elemento selezionato include sempre tutti i suoi sottoelementi'\"\r\n                matTooltipPosition=\"above\">\r\n                info\r\n            </mat-icon>\r\n        </ng-template>\r\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\r\n            <div fxFlex>\r\n                <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\r\n                    <div fxFlex fxHide.xs>\r\n                        <mat-form-field style=\"width:200px; padding: 8px 0px\" appearance=\"outline\"\r\n                            subscriptSizing=\"dynamic\">\r\n                            <mat-label>Cerca...</mat-label>\r\n                            <input type=\"text\" (keyup)=\"doFilter()\" matInput [ngModel]=\"filterText()\"\r\n                                (ngModelChange)=\"filterText.set($event)\"\r\n                                (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\"\r\n                                (keydown.arrowDown)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\">\r\n                            @if (filterText()) {\r\n                            <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button\r\n                                aria-label=\"Clear\" (click)=\"clearFilter()\">\r\n                                <mat-icon>close</mat-icon>\r\n                            </button>\r\n                            }\r\n                        </mat-form-field>\r\n                    </div>\r\n                    @if (filteredItems().length > 0) {\r\n                    <div fxFlex=\"50px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n                        <div class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\r\n                    </div>\r\n                    <div fxFlex=\"48px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n                        <button mat-icon-button (click)=\"nextFiltered()\">\r\n                            <mat-icon aria-label=\"Vai al prossimo\"\r\n                                matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\r\n                        </button>\r\n                    </div>\r\n                    }\r\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end center\">\r\n                        <button mat-icon-button [matTooltip]=\"'Espandi tutto'\" (click)=\"expandAll()\">\r\n                            <mat-icon>unfold_more</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button [matTooltip]=\"'Comprimi tutto'\" (click)=\"collapseAll()\">\r\n                            <mat-icon>unfold_less</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button [matTooltip]=\"'Azzera selezione'\" [disabled]=\"!hasSelection()\"\r\n                            (click)=\"clearAll()\">\r\n                            <mat-icon>deselect</mat-icon>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div fxFlex=\"*\" style=\"overflow-y: auto;\">\r\n                <mat-tree [dataSource]=\"tree()\" [childrenAccessor]=\"treeChildrenAccessor\" class=\"tree\">\r\n                    <!-- Leaf node -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\r\n                        class=\"tree-node\" [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\r\n                        [class.tree-node-no-select]=\"!isSelectable(node)\"\r\n                        [attr.data-node-id]=\"node.id\">\r\n                        <button mat-icon-button disabled style=\"visibility: hidden\"></button>\r\n                        @if (isSelectable(node)) {\r\n                        <mat-checkbox [checked]=\"isSelected(node)\" [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </mat-checkbox>\r\n                        } @else {\r\n                        <div class=\"tree-node-label-only\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </div>\r\n                        }\r\n                    </mat-tree-node>\r\n                    <!-- Expandable node with children -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\r\n                        [matTreeNodePaddingIndent]=\"20\" #treeNode=\"matTreeNode\" class=\"tree-node\"\r\n                        [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\r\n                        [class.tree-node-no-select]=\"!isSelectable(node)\"\r\n                        [attr.data-node-id]=\"node.id\">\r\n                        <button mat-icon-button matTreeNodeToggle>\r\n                            <mat-icon>{{treeNode.isExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\r\n                        </button>\r\n                        @if (isSelectable(node)) {\r\n                        <mat-checkbox [checked]=\"isSelected(node)\" [indeterminate]=\"isIndeterminate(node)\"\r\n                            [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </mat-checkbox>\r\n                        } @else {\r\n                        <div class=\"tree-node-label-only\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </div>\r\n                        }\r\n                    </mat-tree-node>\r\n                </mat-tree>\r\n            </div>\r\n        </div>\r\n    </mat-tab>\r\n    <mat-tab [label]=\"hasSelection() ? 'Selezionati (' + selectedVisibleCount() + ')' : 'Selezionati (tutti)'\"\r\n        style=\"height: 100%;\">\r\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\r\n            <div fxFlex>\r\n                <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\" style=\"padding:12px\">\r\n                    @if (!hasSelection()) {\r\n                    <mat-icon>info</mat-icon>\r\n                    <span [innerHTML]=\"descriptionEmpty() | safeHtml\"></span>\r\n                    } @else {\r\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end\">\r\n                        <button mat-button color=\"warn\" style=\"margin-left:auto\" (click)=\"clearAll()\">\r\n                            <mat-icon>deselect</mat-icon> Azzera tutto\r\n                        </button>\r\n                    </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div fxFlex=\"*\" style=\"overflow-y: auto; padding-bottom: 12px;\">\r\n                <mat-chip-set>\r\n                    @for (id of selection(); track id) {\r\n                    @let node = nodeById(id);\r\n                    @if (node && isChipVisible(id)) {\r\n                    <mat-chip (removed)=\"removeNode(node)\" style=\"max-width: 280px;\" [matTooltip]=\"node.name\">\r\n                        {{node.name}}\r\n                        @if (!disabled()) {\r\n                        <button matChipRemove matTooltip=\"Elimina\"><mat-icon>cancel</mat-icon></button>\r\n                        }\r\n                    </mat-chip>\r\n                    }\r\n                    }\r\n                </mat-chip-set>\r\n            </div>\r\n        </div>\r\n    </mat-tab>\r\n</mat-tab-group>", styles: [".tree-picker-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1 1 auto;height:100%}.tree{padding:8px 0 16px;background-color:transparent!important}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node:not(.tree-node-no-select):hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-filtered ::ng-deep .mdc-label,.tree-node-filtered ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-accent, #7894ae)!important}.tree-node-filtered .tree-node-label-only{font-weight:700;color:var(--ars-color-accent, #7894ae);opacity:1}.tree-node-activated ::ng-deep .mdc-label,.tree-node-activated ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-secondary, #4a635f)!important}.tree-node-label-only{display:flex;flex-direction:column;justify-content:center;padding-left:30px;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i1$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i5$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.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: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: MatInputModule }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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.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: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: TreePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tree-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTreeModule, MatCheckboxModule, MatIconModule, MatTabsModule, MatChipsModule,
+                        MatButtonModule, MatTooltipModule, MatFormFieldModule, MatInputModule, FormsModule, FlexLayoutModule, SafeHtmlPipe], template: "<mat-tab-group class=\"taxonomy-picker-tabs\" style=\"height:100%\">\r\n    <mat-tab style=\"overflow-x: hidden !important; height: 100%\">\r\n        <ng-template mat-tab-label>\r\n            Seleziona\r\n            <mat-icon\r\n                style=\"font-size:16px;height:16px;width:16px;margin-left:4px;vertical-align:middle;color:var(--mat-sys-primary)\"\r\n                [matTooltip]=\"'Nessuna selezione = tutti gli argomenti inclusi;\\r\\nOgni elemento selezionato include sempre tutti i suoi sottoelementi'\"\r\n                matTooltipPosition=\"above\">\r\n                info\r\n            </mat-icon>\r\n        </ng-template>\r\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\r\n            <div fxFlex>\r\n                <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\r\n                    <div fxFlex fxHide.xs>\r\n                        <mat-form-field style=\"width:200px; padding: 8px 0px\" appearance=\"outline\"\r\n                            subscriptSizing=\"dynamic\">\r\n                            <mat-label>Cerca...</mat-label>\r\n                            <input type=\"text\" (keyup)=\"doFilter()\" matInput [ngModel]=\"filterText()\"\r\n                                (ngModelChange)=\"filterText.set($event)\"\r\n                                (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\"\r\n                                (keydown.arrowDown)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\">\r\n                            @if (filterText()) {\r\n                            <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button\r\n                                aria-label=\"Clear\" (click)=\"clearFilter()\">\r\n                                <mat-icon>close</mat-icon>\r\n                            </button>\r\n                            }\r\n                        </mat-form-field>\r\n                    </div>\r\n                    @if (filteredItems().length > 0) {\r\n                    <div fxFlex=\"50px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n                        <div class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\r\n                    </div>\r\n                    <div fxFlex=\"48px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n                        <button mat-icon-button (click)=\"nextFiltered()\">\r\n                            <mat-icon aria-label=\"Vai al prossimo\"\r\n                                matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\r\n                        </button>\r\n                    </div>\r\n                    }\r\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end center\">\r\n                        <button mat-icon-button [matTooltip]=\"'Espandi tutto'\" (click)=\"expandAll()\">\r\n                            <mat-icon>unfold_more</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button [matTooltip]=\"'Comprimi tutto'\" (click)=\"collapseAll()\">\r\n                            <mat-icon>unfold_less</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button [matTooltip]=\"'Azzera selezione'\" [disabled]=\"!hasSelection()\"\r\n                            (click)=\"clearAll()\">\r\n                            <mat-icon>deselect</mat-icon>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div fxFlex=\"*\" style=\"overflow-y: auto;\">\r\n                <mat-tree [dataSource]=\"tree()\" [childrenAccessor]=\"treeChildrenAccessor\" class=\"tree\">\r\n                    <!-- Leaf node -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\r\n                        class=\"tree-node\" [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\r\n                        [class.tree-node-no-select]=\"!isSelectable(node)\"\r\n                        [attr.data-node-id]=\"node.id\">\r\n                        <button mat-icon-button disabled style=\"visibility: hidden\"></button>\r\n                        @if (isSelectable(node)) {\r\n                        <mat-checkbox [checked]=\"isSelected(node)\" [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </mat-checkbox>\r\n                        } @else {\r\n                        <div class=\"tree-node-label-only\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </div>\r\n                        }\r\n                    </mat-tree-node>\r\n                    <!-- Expandable node with children -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\r\n                        [matTreeNodePaddingIndent]=\"20\" #treeNode=\"matTreeNode\" class=\"tree-node\"\r\n                        [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\r\n                        [class.tree-node-no-select]=\"!isSelectable(node)\"\r\n                        [attr.data-node-id]=\"node.id\">\r\n                        <button mat-icon-button matTreeNodeToggle>\r\n                            <mat-icon>{{treeNode.isExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\r\n                        </button>\r\n                        @if (isSelectable(node)) {\r\n                        <mat-checkbox [checked]=\"isSelected(node)\" [indeterminate]=\"isIndeterminate(node)\"\r\n                            [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </mat-checkbox>\r\n                        } @else {\r\n                        <div class=\"tree-node-label-only\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </div>\r\n                        }\r\n                    </mat-tree-node>\r\n                </mat-tree>\r\n            </div>\r\n        </div>\r\n    </mat-tab>\r\n    <mat-tab [label]=\"hasSelection() ? 'Selezionati (' + selectedVisibleCount() + ')' : 'Selezionati (tutti)'\"\r\n        style=\"height: 100%;\">\r\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\r\n            <div fxFlex>\r\n                <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\" style=\"padding:12px\">\r\n                    @if (!hasSelection()) {\r\n                    <mat-icon>info</mat-icon>\r\n                    <span [innerHTML]=\"descriptionEmpty() | safeHtml\"></span>\r\n                    } @else {\r\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end\">\r\n                        <button mat-button color=\"warn\" style=\"margin-left:auto\" (click)=\"clearAll()\">\r\n                            <mat-icon>deselect</mat-icon> Azzera tutto\r\n                        </button>\r\n                    </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div fxFlex=\"*\" style=\"overflow-y: auto; padding-bottom: 12px;\">\r\n                <mat-chip-set>\r\n                    @for (id of selection(); track id) {\r\n                    @let node = nodeById(id);\r\n                    @if (node && isChipVisible(id)) {\r\n                    <mat-chip (removed)=\"removeNode(node)\" style=\"max-width: 280px;\" [matTooltip]=\"node.name\">\r\n                        {{node.name}}\r\n                        @if (!disabled()) {\r\n                        <button matChipRemove matTooltip=\"Elimina\"><mat-icon>cancel</mat-icon></button>\r\n                        }\r\n                    </mat-chip>\r\n                    }\r\n                    }\r\n                </mat-chip-set>\r\n            </div>\r\n        </div>\r\n    </mat-tab>\r\n</mat-tab-group>", styles: [".tree-picker-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1 1 auto;height:100%}.tree{padding:8px 0 16px;background-color:transparent!important}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node:not(.tree-node-no-select):hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-filtered ::ng-deep .mdc-label,.tree-node-filtered ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-accent, #7894ae)!important}.tree-node-filtered .tree-node-label-only{font-weight:700;color:var(--ars-color-accent, #7894ae);opacity:1}.tree-node-activated ::ng-deep .mdc-label,.tree-node-activated ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-secondary, #4a635f)!important}.tree-node-label-only{display:flex;flex-direction:column;justify-content:center;padding-left:30px;opacity:.7}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], descriptionEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionEmpty", required: false }] }], maxDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDepth", required: false }] }], maxDepthOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDepthOverrides", required: false }] }], minDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDepth", required: false }] }], selectionCount: [{ type: i0.Output, args: ["selectionCount"] }], changed: [{ type: i0.Output, args: ["changed"] }], _treeRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTree), { isSignal: true }] }] } });
+
+/**
+ * A blank calendar header that hides the month/year navigation controls.
+ * Used when an inline calendar should render without any navigation UI.
+ */
+class CalendarEmptyHeader {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.calendar = inject((MatCalendar));
+        this.changeDetector = inject(ChangeDetectorRef);
+        // Re-run change detection whenever the calendar's internal state changes
+        // (e.g. active date, selected date) so the blank header stays in sync.
+        this.calendar.stateChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.changeDetector.markForCheck());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: CalendarEmptyHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: CalendarEmptyHeader, isStandalone: true, selector: "ng-component", ngImport: i0, template: '<div></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: CalendarEmptyHeader, decorators: [{
+            type: Component,
+            args: [{
+                    template: '<div></div>',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of @arsedizioni/ars-utils/ui.controls
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonSelectorComponent, ButtonToggleComponent, CalendarEmptyHeader, ChipsSelectorComponent, TreePickerComponent };
+//# sourceMappingURL=arsedizioni-ars-utils-ui.controls.mjs.map