@educarehq/solaris-components 0.5.4 → 0.5.6

package/fesm2022/educarehq-solaris-components.mjs

@@ -3097,6 +3097,10 @@ class SolarisDialogStepsContainer {
     transitioning = signal(false, ...(ngDevMode ? [{ debugName: "transitioning" }] : []));
     transitionHalfway = signal(false, ...(ngDevMode ? [{ debugName: "transitionHalfway" }] : []));
     currentStepIndex = signal(this.resolveInitialStepIndex(), ...(ngDevMode ? [{ debugName: "currentStepIndex" }] : []));
+    stepElements;
+    activeStepHeight = signal('auto', ...(ngDevMode ? [{ debugName: "activeStepHeight" }] : []));
+    measureRaf = 0;
+    resizeObserver;
     halfwayTimer = 0;
     transitionTimer = 0;
     stepInjectors = this.steps.map(step => Injector.create({
@@ -3119,7 +3123,16 @@ class SolarisDialogStepsContainer {
         return `${this.transitionDurationMs}ms`;
     }, ...(ngDevMode ? [{ debugName: "transitionDuration" }] : []));
     constructor() {
-        this.dialogRef.afterAction().pipe(takeUntilDestroyed(this.destroyRef))
+        this.destroyRef.onDestroy(() => {
+            globalThis.clearTimeout(this.halfwayTimer);
+            globalThis.clearTimeout(this.transitionTimer);
+            if (this.measureRaf) {
+                cancelAnimationFrame(this.measureRaf);
+            }
+            this.resizeObserver?.disconnect();
+        });
+        this.dialogRef.afterAction()
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(action => {
             void this.handleAction(action.value);
         });
@@ -3128,11 +3141,24 @@ class SolarisDialogStepsContainer {
             this.loading();
             this.updateDialogHeader();
             this.updateDialogActions();
+            queueMicrotask(() => {
+                this.observeActiveStepHeight();
+                this.scheduleActiveStepHeightMeasure();
+            });
         });
         queueMicrotask(() => {
             void this.runBeforeEnter(this.currentStepIndex(), 'initial');
         });
     }
+    ngAfterViewInit() {
+        this.stepElements.changes.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.observeActiveStepHeight();
+            this.scheduleActiveStepHeightMeasure();
+        });
+        this.observeActiveStepHeight();
+        this.scheduleActiveStepHeightMeasure();
+    }
     stepInjector(index) {
         return this.stepInjectors[index];
     }
@@ -3277,6 +3303,8 @@ class SolarisDialogStepsContainer {
         this.transitioning.set(true);
         this.transitionHalfway.set(false);
         this.currentStepIndex.set(targetIndex);
+        this.observeActiveStepHeight(targetIndex);
+        this.scheduleActiveStepHeightMeasure(targetIndex);
         if (this.transitionBlur) {
             this.halfwayTimer = globalThis.setTimeout(() => {
                 if (this.transitioning()) {
@@ -3300,15 +3328,46 @@ class SolarisDialogStepsContainer {
             descriptionParams: step?.descriptionParams ?? this.configuration.descriptionParams,
         });
     }
+    scheduleActiveStepHeightMeasure(index = this.currentStepIndex()) {
+        if (this.measureRaf) {
+            cancelAnimationFrame(this.measureRaf);
+        }
+        this.measureRaf = requestAnimationFrame(() => {
+            this.measureStepHeight(index);
+        });
+    }
+    measureStepHeight(index = this.currentStepIndex()) {
+        const element = this.stepElements?.toArray()[index]?.nativeElement;
+        if (!element) {
+            this.activeStepHeight.set('auto');
+            return;
+        }
+        const height = Math.ceil(element.scrollHeight);
+        this.activeStepHeight.set(`${height}px`);
+    }
+    observeActiveStepHeight(index = this.currentStepIndex()) {
+        this.resizeObserver?.disconnect();
+        const element = this.stepElements?.toArray()[index]?.nativeElement;
+        if (!element || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            this.scheduleActiveStepHeightMeasure(index);
+        });
+        this.resizeObserver.observe(element);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogStepsContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisDialogStepsContainer, isStandalone: true, selector: "solaris-dialog-steps-container", ngImport: i0, template: "<div class=\"solaris-dialog-steps\" [class.is-transitioning]=\"transitioning()\" [class.is-halfway]=\"transitionHalfway()\"\r\n  [class.has-transition-blur]=\"transitionBlur\" [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\">\r\n  @if (showProgress) {\r\n    <div class=\"solaris-dialog-steps__progress\" aria-hidden=\"true\">\r\n      @for (step of steps; track step.key; let index = $index) {\r\n        <span class=\"solaris-dialog-steps__dot\" [class.is-active]=\"index === currentStepIndex()\"\r\n          [class.is-complete]=\"index < currentStepIndex()\"></span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"solaris-dialog-steps__viewport\">\r\n    <div class=\"solaris-dialog-steps__track\" [style.transform]=\"trackTransform()\"\r\n      [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\">\r\n      @for (step of steps; track step.key; let index = $index) {\r\n        <section class=\"solaris-dialog-steps__step\" [class.is-active]=\"index === currentStepIndex()\"\r\n          [class.is-before]=\"index < currentStepIndex()\" [class.is-after]=\"index > currentStepIndex()\">\r\n          <div class=\"solaris-dialog-steps__step-inner\">\r\n            <ng-container *ngComponentOutlet=\"step.component; injector: stepInjector(index)\"></ng-container>\r\n          </div>\r\n        </section>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-dialog-steps{--solaris-dialog-steps-min-height: 0;--solaris-dialog-steps-transition-duration: .42s;display:grid;min-inline-size:0;gap:var(--solaris-space-5)}.solaris-dialog-steps__viewport{overflow:hidden;inline-size:100%;min-inline-size:0;min-block-size:var(--solaris-dialog-steps-min-height)}.solaris-dialog-steps__track{display:flex;inline-size:100%;min-inline-size:0;align-items:stretch;will-change:transform;transition:transform var(--solaris-dialog-steps-transition-duration) cubic-bezier(.22,1,.36,1)}.solaris-dialog-steps__step{flex:0 0 100%;inline-size:100%;min-inline-size:100%;min-block-size:var(--solaris-dialog-steps-min-height);display:grid;align-content:center;overflow:visible}.solaris-dialog-steps__progress{display:flex;justify-content:center;align-items:center;gap:var(--solaris-space-2)}.solaris-dialog-steps__dot{inline-size:.8rem;block-size:.8rem;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-color-text-muted) 35%,transparent);transition:background-color .18s ease,transform .18s ease}.solaris-dialog-steps__dot.is-active{background:var(--solaris-color-primary);transform:scale(1.2)}.solaris-dialog-steps__dot.is-complete{background:color-mix(in srgb,var(--solaris-color-primary) 72%,white)}.solaris-dialog-steps__step-inner{inline-size:100%;min-inline-size:0;transition:filter calc(var(--solaris-dialog-steps-transition-duration) * .45) ease,opacity calc(var(--solaris-dialog-steps-transition-duration) * .45) ease,transform calc(var(--solaris-dialog-steps-transition-duration) * .45) ease}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step:not(.is-active) .solaris-dialog-steps__step-inner{filter:blur(.18rem);opacity:.58;transform:scale(.985)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step.is-active .solaris-dialog-steps__step-inner{filter:blur(0);opacity:1;transform:scale(1)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisDialogStepsContainer, isStandalone: true, selector: "solaris-dialog-steps-container", viewQueries: [{ propertyName: "stepElements", predicate: ["stepElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"solaris-dialog-steps\" [class.is-transitioning]=\"transitioning()\" [class.is-halfway]=\"transitionHalfway()\"\r\n  [class.has-transition-blur]=\"transitionBlur\" [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\"\r\n  [style.--solaris-dialog-steps-active-height]=\"activeStepHeight()\">\r\n  @if (showProgress) {\r\n    <div class=\"solaris-dialog-steps__progress\" aria-hidden=\"true\">\r\n      @for (step of steps; track step.key; let index = $index) {\r\n        <span class=\"solaris-dialog-steps__dot\" [class.is-active]=\"index === currentStepIndex()\"\r\n          [class.is-complete]=\"index < currentStepIndex()\"></span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"solaris-dialog-steps__viewport\">\r\n    <div class=\"solaris-dialog-steps__track\" [style.transform]=\"trackTransform()\"\r\n      [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\">\r\n      @for (step of steps; track step.key; let index = $index) {\r\n        <section #stepElement class=\"solaris-dialog-steps__step\" [class.is-active]=\"index === currentStepIndex()\"\r\n          [class.is-before]=\"index < currentStepIndex()\" [class.is-after]=\"index > currentStepIndex()\">\r\n          <div class=\"solaris-dialog-steps__step-inner\">\r\n            <ng-container\r\n              *ngComponentOutlet=\"step.component; injector: stepInjector(index)\"\r\n            ></ng-container>\r\n          </div>\r\n        </section>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-dialog-steps{--solaris-dialog-steps-min-height: 0;--solaris-dialog-steps-active-height: auto;--solaris-dialog-steps-transition-duration: .42s;display:grid;min-inline-size:0;gap:var(--solaris-space-5)}.solaris-dialog-steps__progress{display:flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-dialog-steps__dot{inline-size:.8rem;block-size:.8rem;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-color-text-muted) 35%,transparent);transition:background-color .18s ease,transform .18s ease}.solaris-dialog-steps__dot.is-active{background:var(--solaris-color-primary);transform:scale(1.2)}.solaris-dialog-steps__dot.is-complete{background:color-mix(in srgb,var(--solaris-color-primary) 72%,white)}.solaris-dialog-steps__viewport{overflow:hidden;inline-size:100%;min-inline-size:0;block-size:var(--solaris-dialog-steps-active-height, auto);min-block-size:var(--solaris-dialog-steps-min-height);transition:block-size var(--solaris-dialog-steps-transition-duration) cubic-bezier(.22,1,.36,1)}.solaris-dialog-steps__track{display:flex;align-items:flex-start;inline-size:100%;min-inline-size:0;will-change:transform;transition:transform var(--solaris-dialog-steps-transition-duration) cubic-bezier(.22,1,.36,1)}.solaris-dialog-steps__step{flex:0 0 100%;inline-size:100%;min-inline-size:100%;min-block-size:var(--solaris-dialog-steps-min-height);display:grid;align-content:center;overflow:visible}.solaris-dialog-steps__step-inner{inline-size:100%;min-inline-size:0;transition:filter .18s ease,opacity .18s ease,transform .18s ease}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step:not(.is-active) .solaris-dialog-steps__step-inner{filter:blur(.35rem);opacity:.45;transform:scale(.985)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step.is-active .solaris-dialog-steps__step-inner{filter:blur(0);opacity:1;transform:scale(1)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogStepsContainer, decorators: [{
             type: Component,
             args: [{ selector: 'solaris-dialog-steps-container', standalone: true, imports: [
                         NgComponentOutlet
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-dialog-steps\" [class.is-transitioning]=\"transitioning()\" [class.is-halfway]=\"transitionHalfway()\"\r\n  [class.has-transition-blur]=\"transitionBlur\" [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\">\r\n  @if (showProgress) {\r\n    <div class=\"solaris-dialog-steps__progress\" aria-hidden=\"true\">\r\n      @for (step of steps; track step.key; let index = $index) {\r\n        <span class=\"solaris-dialog-steps__dot\" [class.is-active]=\"index === currentStepIndex()\"\r\n          [class.is-complete]=\"index < currentStepIndex()\"></span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"solaris-dialog-steps__viewport\">\r\n    <div class=\"solaris-dialog-steps__track\" [style.transform]=\"trackTransform()\"\r\n      [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\">\r\n      @for (step of steps; track step.key; let index = $index) {\r\n        <section class=\"solaris-dialog-steps__step\" [class.is-active]=\"index === currentStepIndex()\"\r\n          [class.is-before]=\"index < currentStepIndex()\" [class.is-after]=\"index > currentStepIndex()\">\r\n          <div class=\"solaris-dialog-steps__step-inner\">\r\n            <ng-container *ngComponentOutlet=\"step.component; injector: stepInjector(index)\"></ng-container>\r\n          </div>\r\n        </section>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-dialog-steps{--solaris-dialog-steps-min-height: 0;--solaris-dialog-steps-transition-duration: .42s;display:grid;min-inline-size:0;gap:var(--solaris-space-5)}.solaris-dialog-steps__viewport{overflow:hidden;inline-size:100%;min-inline-size:0;min-block-size:var(--solaris-dialog-steps-min-height)}.solaris-dialog-steps__track{display:flex;inline-size:100%;min-inline-size:0;align-items:stretch;will-change:transform;transition:transform var(--solaris-dialog-steps-transition-duration) cubic-bezier(.22,1,.36,1)}.solaris-dialog-steps__step{flex:0 0 100%;inline-size:100%;min-inline-size:100%;min-block-size:var(--solaris-dialog-steps-min-height);display:grid;align-content:center;overflow:visible}.solaris-dialog-steps__progress{display:flex;justify-content:center;align-items:center;gap:var(--solaris-space-2)}.solaris-dialog-steps__dot{inline-size:.8rem;block-size:.8rem;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-color-text-muted) 35%,transparent);transition:background-color .18s ease,transform .18s ease}.solaris-dialog-steps__dot.is-active{background:var(--solaris-color-primary);transform:scale(1.2)}.solaris-dialog-steps__dot.is-complete{background:color-mix(in srgb,var(--solaris-color-primary) 72%,white)}.solaris-dialog-steps__step-inner{inline-size:100%;min-inline-size:0;transition:filter calc(var(--solaris-dialog-steps-transition-duration) * .45) ease,opacity calc(var(--solaris-dialog-steps-transition-duration) * .45) ease,transform calc(var(--solaris-dialog-steps-transition-duration) * .45) ease}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step:not(.is-active) .solaris-dialog-steps__step-inner{filter:blur(.18rem);opacity:.58;transform:scale(.985)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step.is-active .solaris-dialog-steps__step-inner{filter:blur(0);opacity:1;transform:scale(1)}\n"] }]
-        }], ctorParameters: () => [] });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-dialog-steps\" [class.is-transitioning]=\"transitioning()\" [class.is-halfway]=\"transitionHalfway()\"\r\n  [class.has-transition-blur]=\"transitionBlur\" [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\"\r\n  [style.--solaris-dialog-steps-active-height]=\"activeStepHeight()\">\r\n  @if (showProgress) {\r\n    <div class=\"solaris-dialog-steps__progress\" aria-hidden=\"true\">\r\n      @for (step of steps; track step.key; let index = $index) {\r\n        <span class=\"solaris-dialog-steps__dot\" [class.is-active]=\"index === currentStepIndex()\"\r\n          [class.is-complete]=\"index < currentStepIndex()\"></span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"solaris-dialog-steps__viewport\">\r\n    <div class=\"solaris-dialog-steps__track\" [style.transform]=\"trackTransform()\"\r\n      [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\">\r\n      @for (step of steps; track step.key; let index = $index) {\r\n        <section #stepElement class=\"solaris-dialog-steps__step\" [class.is-active]=\"index === currentStepIndex()\"\r\n          [class.is-before]=\"index < currentStepIndex()\" [class.is-after]=\"index > currentStepIndex()\">\r\n          <div class=\"solaris-dialog-steps__step-inner\">\r\n            <ng-container\r\n              *ngComponentOutlet=\"step.component; injector: stepInjector(index)\"\r\n            ></ng-container>\r\n          </div>\r\n        </section>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-dialog-steps{--solaris-dialog-steps-min-height: 0;--solaris-dialog-steps-active-height: auto;--solaris-dialog-steps-transition-duration: .42s;display:grid;min-inline-size:0;gap:var(--solaris-space-5)}.solaris-dialog-steps__progress{display:flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-dialog-steps__dot{inline-size:.8rem;block-size:.8rem;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-color-text-muted) 35%,transparent);transition:background-color .18s ease,transform .18s ease}.solaris-dialog-steps__dot.is-active{background:var(--solaris-color-primary);transform:scale(1.2)}.solaris-dialog-steps__dot.is-complete{background:color-mix(in srgb,var(--solaris-color-primary) 72%,white)}.solaris-dialog-steps__viewport{overflow:hidden;inline-size:100%;min-inline-size:0;block-size:var(--solaris-dialog-steps-active-height, auto);min-block-size:var(--solaris-dialog-steps-min-height);transition:block-size var(--solaris-dialog-steps-transition-duration) cubic-bezier(.22,1,.36,1)}.solaris-dialog-steps__track{display:flex;align-items:flex-start;inline-size:100%;min-inline-size:0;will-change:transform;transition:transform var(--solaris-dialog-steps-transition-duration) cubic-bezier(.22,1,.36,1)}.solaris-dialog-steps__step{flex:0 0 100%;inline-size:100%;min-inline-size:100%;min-block-size:var(--solaris-dialog-steps-min-height);display:grid;align-content:center;overflow:visible}.solaris-dialog-steps__step-inner{inline-size:100%;min-inline-size:0;transition:filter .18s ease,opacity .18s ease,transform .18s ease}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step:not(.is-active) .solaris-dialog-steps__step-inner{filter:blur(.35rem);opacity:.45;transform:scale(.985)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step.is-active .solaris-dialog-steps__step-inner{filter:blur(0);opacity:1;transform:scale(1)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { stepElements: [{
+                type: ViewChildren,
+                args: ['stepElement', { read: ElementRef }]
+            }] } });
 
 class SolarisDialogContainer {
     contentHost;
@@ -7682,6 +7741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             }], customErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "customErrorKey", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], customErrorParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "customErrorParams", required: false }] }] } });
 
 class SolarisSelect {
+    translationService = inject(SOLARIS_TRANSLATION);
     destroyRef = inject(DestroyRef);
     injector = inject(Injector);
     field = inject(SolarisFormFieldController, { optional: true });
@@ -7708,24 +7768,6 @@ class SolarisSelect {
         if (changed)
             this._value.set(next);
     }
-    sameCvaValue(a, b) {
-        if (this.multiple) {
-            const aa = Array.isArray(a) ? a : [];
-            const bb = Array.isArray(b) ? b : [];
-            if (aa.length !== bb.length)
-                return false;
-            for (let i = 0; i < aa.length; i++) {
-                if (!this.eq(aa[i], bb[i]))
-                    return false;
-            }
-            return true;
-        }
-        if (a == null && b == null)
-            return true;
-        if (a == null || b == null)
-            return false;
-        return this.eq(a, b);
-    }
     _multiple = false;
     set multiple(v) {
         this._multiple = v;
@@ -7735,7 +7777,9 @@ class SolarisSelect {
         if (!this._multiple && Array.isArray(cur))
             this._value.set(null);
     }
-    get multiple() { return this._multiple; }
+    get multiple() {
+        return this._multiple;
+    }
     valueKey;
     backKey = '';
     placeholder = '';
@@ -7757,11 +7801,25 @@ class SolarisSelect {
         if (v)
             this.open.set(false);
     }
-    get disabled() { return this._disabled(); }
+    get disabled() {
+        return this._disabled();
+    }
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
     activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
     showCount = signal(false, ...(ngDevMode ? [{ debugName: "showCount" }] : []));
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _stack = signal([], ...(ngDevMode ? [{ debugName: "_stack" }] : []));
+    selectedItems = computed(() => {
+        const all = [];
+        this.collectAllItems(this._rootNodes(), all);
+        const v = this._value();
+        if (this.multiple) {
+            const arr = Array.isArray(v) ? v : [];
+            return all.filter(it => arr.some(s => this.eq(s, it.value)));
+        }
+        return all.filter(it => v != null && this.eq(v, it.value));
+    }, ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
     showToken = computed(() => {
         return this.selectedCount() > 0;
     }, ...(ngDevMode ? [{ debugName: "showToken" }] : []));
@@ -7769,7 +7827,10 @@ class SolarisSelect {
         const items = this.selectedItems();
         if (!items.length)
             return '';
-        return items.map(it => this.itemLabel(it)).filter(Boolean).join(this.selectionSeparator);
+        return items
+            .map(it => this.itemLabel(it))
+            .filter(Boolean)
+            .join(this.selectionSeparator);
     }, ...(ngDevMode ? [{ debugName: "selectedText" }] : []));
     triggerValue = computed(() => {
         if (this.isSearchMode())
@@ -7787,8 +7848,8 @@ class SolarisSelect {
         if (this.searchTerm().length > 0)
             return '';
         return this.open() && this.searchable
-            ? (this.searchPlaceholderKey || this.placeholderKey || '')
-            : (this.placeholderKey || '');
+            ? this.searchPlaceholderKey || this.placeholderKey || ''
+            : this.placeholderKey || '';
     }, ...(ngDevMode ? [{ debugName: "inputPlaceholderKey" }] : []));
     inputPlaceholderText = computed(() => {
         if (this.selectedCount() > 0)
@@ -7796,21 +7857,9 @@ class SolarisSelect {
         if (this.searchTerm().length > 0)
             return '';
         return this.open() && this.searchable
-            ? (this.searchPlaceholder || this.placeholder || 'Search...')
-            : (this.placeholder || '');
+            ? this.searchPlaceholder || this.placeholder || 'Search...'
+            : this.placeholder || '';
     }, ...(ngDevMode ? [{ debugName: "inputPlaceholderText" }] : []));
-    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
-    selectedItems = computed(() => {
-        const all = [];
-        this.collectAllItems(this._rootNodes(), all);
-        const v = this._value();
-        if (this.multiple) {
-            const arr = Array.isArray(v) ? v : [];
-            return all.filter(it => arr.some(s => this.eq(s, it.value)));
-        }
-        return all.filter(it => v != null && this.eq(v, it.value));
-    }, ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
-    _stack = signal([], ...(ngDevMode ? [{ debugName: "_stack" }] : []));
     viewModel = computed(() => {
         const lvl = this.currentLevel();
         const ordered = this.applySelectedFirst(lvl.nodes);
@@ -7827,10 +7876,10 @@ class SolarisSelect {
     static seq = 0;
     _measureNonce = 0;
     resizeObs;
-    matchWidthEl = null;
     propagateTouched = () => { };
     propagateChange = () => { };
     resolvedNgControl = undefined;
+    matchWidthEl = null;
     _id = `solaris-select-${++SolarisSelect.seq}`;
     constructor() {
         this.resetStack();
@@ -7859,8 +7908,8 @@ class SolarisSelect {
         const trigger = this.triggerWrap?.nativeElement;
         if (trigger) {
             this.matchWidthEl =
-                trigger.closest('.solaris-form-field')?.querySelector('.solaris-form-field__frame')
-                    ?? null;
+                trigger.closest('.solaris-form-field')?.querySelector('.solaris-form-field__frame') ??
+                    null;
         }
         const el = this.triggerWrap?.nativeElement;
         if (!el)
@@ -7880,8 +7929,64 @@ class SolarisSelect {
     registerOnChange(fn) {
         this.propagateChange = fn;
     }
-    registerOnTouched(fn) { this.propagateTouched = fn; }
-    setDisabledState(isDisabled) { this._disabled.set(isDisabled); }
+    registerOnTouched(fn) {
+        this.propagateTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    translate(key, params) {
+        if (!key)
+            return '';
+        return this.translationService.translate(key, params);
+    }
+    itemLabel(item) {
+        if (item.labelKey)
+            return this.translate(item.labelKey);
+        return item.label ?? item.searchText ?? '';
+    }
+    itemDescription(item) {
+        if (item.descriptionKey)
+            return this.translate(item.descriptionKey);
+        return item.description ?? '';
+    }
+    itemEndText(item) {
+        if (item.endTextKey)
+            return this.translate(item.endTextKey);
+        return item.endText ?? '';
+    }
+    itemSearchText(item) {
+        return [
+            item.searchText,
+            this.itemLabel(item),
+            this.itemDescription(item),
+            this.itemEndText(item),
+            item.labelKey,
+            item.descriptionKey,
+            item.endTextKey,
+        ]
+            .filter(Boolean)
+            .join(' ')
+            .toLowerCase();
+    }
+    sameCvaValue(a, b) {
+        if (this.multiple) {
+            const aa = Array.isArray(a) ? a : [];
+            const bb = Array.isArray(b) ? b : [];
+            if (aa.length !== bb.length)
+                return false;
+            for (let i = 0; i < aa.length; i++) {
+                if (!this.eq(aa[i], bb[i]))
+                    return false;
+            }
+            return true;
+        }
+        if (a == null && b == null)
+            return true;
+        if (a == null || b == null)
+            return false;
+        return this.eq(a, b);
+    }
     eq(a, b) {
         if (this.compareWith)
             return this.compareWith(a, b);
@@ -7900,15 +8005,13 @@ class SolarisSelect {
             this.field?.registerControl(this.resolvedNgControl);
         }
     }
-    itemLabel(item) {
-        return item.label ?? item.searchText ?? '';
-    }
     collectAllItems(nodes, out) {
         for (const n of nodes) {
             if (n.kind === 'item') {
                 out.push(n);
-                if (n.children?.length)
+                if (n.children?.length) {
                     this.collectAllItems(n.children, out);
+                }
             }
             else if (n.kind === 'group') {
                 this.collectAllItems(n.items, out);
@@ -7930,7 +8033,14 @@ class SolarisSelect {
     enterChildren(item) {
         if (!item.children?.length)
             return;
-        this._stack.set([...this._stack(), { title: item.childrenTitle, titleKey: item.childrenTitleKey, nodes: item.children }]);
+        this._stack.set([
+            ...this._stack(),
+            {
+                title: item.childrenTitle,
+                titleKey: item.childrenTitleKey,
+                nodes: item.children,
+            },
+        ]);
         this.activeIndex.set(0);
         this.scheduleFocusTrigger();
     }
@@ -7939,8 +8049,7 @@ class SolarisSelect {
         if (!term)
             return nodes;
         const matchItem = (it) => {
-            const hay = [it.searchText, it.label, it.description, it.endText].filter(Boolean).join(' ').toLowerCase();
-            return hay.includes(term);
+            return this.itemSearchText(it).includes(term);
         };
         const walk = (list) => {
             const res = [];
@@ -7951,14 +8060,16 @@ class SolarisSelect {
                 }
                 if (n.kind === 'group') {
                     const sub = walk(n.items);
-                    if (sub.some(x => x.kind !== 'divider'))
+                    if (sub.some(x => x.kind !== 'divider')) {
                         res.push({ ...n, items: sub });
+                    }
                     continue;
                 }
                 if (n.children?.length) {
                     const sub = walk(n.children);
-                    if (matchItem(n) || sub.some(x => x.kind !== 'divider'))
+                    if (matchItem(n) || sub.some(x => x.kind !== 'divider')) {
                         res.push({ ...n, children: sub });
+                    }
                 }
                 else if (matchItem(n)) {
                     res.push(n);
@@ -7997,17 +8108,26 @@ class SolarisSelect {
             const items = [];
             const others = [];
             for (const n of segment) {
-                if (n.kind === 'item')
+                if (n.kind === 'item') {
                     items.push(n);
-                else if (n.kind === 'group')
+                }
+                else if (n.kind === 'group') {
                     others.push({ ...n, items: this.applySelectedFirst(n.items) });
-                else
+                }
+                else {
                     others.push(n);
+                }
             }
             const sel = [];
             const non = [];
-            for (const it of items)
-                (selected(it) ? sel : non).push(it);
+            for (const it of items) {
+                if (selected(it)) {
+                    sel.push(it);
+                }
+                else {
+                    non.push(it);
+                }
+            }
             return [...sel, ...non, ...others];
         };
         const res = [];
@@ -8023,8 +8143,9 @@ class SolarisSelect {
                 flush();
                 res.push(n);
             }
-            else
+            else {
                 buf.push(n);
+            }
         }
         flush();
         return this.cleanupDividers(res);
@@ -8094,10 +8215,12 @@ class SolarisSelect {
         const cur = this._value();
         const arr = Array.isArray(cur) ? [...cur] : [];
         const idx = arr.findIndex(v => this.eq(v, value));
-        if (idx >= 0)
+        if (idx >= 0) {
             arr.splice(idx, 1);
-        else
+        }
+        else {
             arr.push(value);
+        }
         this.setValue(arr);
         this.searchTerm.set('');
         this.activeIndex.set(0);
@@ -8131,22 +8254,25 @@ class SolarisSelect {
     openFromTrigger() {
         if (this.disabled)
             return;
-        if (!this.open())
+        if (!this.open()) {
             this.open.set(true);
+        }
     }
     toggleOpen() {
         if (this.disabled)
             return;
         const next = !this.open();
-        if (next)
+        if (next) {
             this.searchTerm.set('');
+        }
         this.open.set(next);
     }
     onTriggerInput(v) {
         if (this.disabled)
             return;
-        if (!this.open())
+        if (!this.open()) {
             this.open.set(true);
+        }
         this.searchTerm.set(v);
         this.activeIndex.set(0);
     }
@@ -8170,7 +8296,12 @@ class SolarisSelect {
             }
             return;
         }
-        if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp' || ev.key === 'Home' || ev.key === 'End' || ev.key === 'Enter' || ev.key === 'Escape') {
+        if (ev.key === 'ArrowDown' ||
+            ev.key === 'ArrowUp' ||
+            ev.key === 'Home' ||
+            ev.key === 'End' ||
+            ev.key === 'Enter' ||
+            ev.key === 'Escape') {
             this.onPanelKeydown(ev);
             return;
         }
@@ -8282,9 +8413,12 @@ class SolarisSelect {
         const current = this.showCount();
         const marginForward = 1;
         const marginBack = 3;
-        const next = current ? (needed > (available - marginBack)) : (needed > (available + marginForward));
-        if (next !== current)
+        const next = current
+            ? needed > available - marginBack
+            : needed > available + marginForward;
+        if (next !== current) {
             this.showCount.set(next);
+        }
     }
     px(v) {
         const first = (v ?? '0').split(' ')[0];
@@ -8294,8 +8428,9 @@ class SolarisSelect {
     scheduleFocusTrigger() {
         requestAnimationFrame(() => {
             this.triggerInput?.nativeElement?.focus?.();
-            if (this.searchable)
+            if (this.searchable) {
                 this.triggerInput?.nativeElement?.select?.();
+            }
         });
     }
     isSelectableValue(v) {
@@ -8313,8 +8448,9 @@ class SolarisSelect {
                         selectable = !n.children?.length;
                         return;
                     }
-                    if (n.children?.length)
+                    if (n.children?.length) {
                         walk(n.children);
+                    }
                 }
             }
         };
@@ -8330,13 +8466,23 @@ class SolarisSelect {
     }
     selectedCountLabel() {
         const count = this.selectedCount();
-        if (this.selectedCountText)
+        if (this.selectedCountKey) {
+            return this.translate(this.selectedCountKey, { count });
+        }
+        if (this.selectedCountText) {
             return this.selectedCountText.replace('{count}', String(count));
+        }
         return `${count} selecionados`;
     }
     trackRow = (_, r) => r.key;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisSelect, isStandalone: true, selector: "solaris-select", inputs: { items: "items", multiple: "multiple", valueKey: "valueKey", backKey: "backKey", placeholder: "placeholder", placeholderKey: "placeholderKey", searchable: "searchable", selectedCountKey: "selectedCountKey", selectedFirst: "selectedFirst", searchPlaceholder: "searchPlaceholder", selectedCountText: "selectedCountText", panelMaxHeight: "panelMaxHeight", searchPlaceholderKey: "searchPlaceholderKey", selectionSeparator: "selectionSeparator", compareWith: "compareWith", backText: "backText", selectionDisplay: "selectionDisplay", disabled: "disabled" }, host: { properties: { "attr.data-open": "this.dataOpen", "attr.data-compact": "this.dataCompact", "attr.data-multiple": "this.dataMultiple" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SolarisSelect), multi: true }], viewQueries: [{ propertyName: "tokenEl", first: true, predicate: ["tokenEl"], descendants: true, read: ElementRef }, { propertyName: "measureSlot", first: true, predicate: ["measureSlot"], descendants: true, read: ElementRef }, { propertyName: "triggerWrap", first: true, predicate: ["triggerWrap"], descendants: true, read: ElementRef }, { propertyName: "triggerInput", first: true, predicate: ["triggerInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<solaris-popover [open]=\"open()\" (openChange)=\"open.set($event)\" placement=\"bottom-start\" [offset]=\"6\"\r\n  [matchWidth]=\"true\" [anchorElement]=\"matchWidthEl\" [matchWidthElement]=\"matchWidthEl\"\r\n  [closeOnOutsideClick]=\"true\" [closeOnEscape]=\"true\" panelClass=\"solaris-select__popover\">\r\n  <div #triggerWrap solaris-popover-trigger class=\"solaris-select__trigger\" (click)=\"openFromTrigger()\">\r\n    @if (showToken()) {\r\n      <span #tokenEl class=\"solaris-select__token\" aria-hidden=\"true\">\r\n        @if (multiple && showCount()) {\r\n          @if (selectedCountKey) { {{ selectedCountKey | translate:{ count: selectedCount() } }} }\r\n          @else { {{ selectedCountLabel() }} }\r\n        } @else {\r\n          {{ selectedText() }}\r\n        }\r\n      </span>\r\n    }\r\n\r\n    <input #triggerInput type=\"text\" class=\"solaris-select__input\" [disabled]=\"disabled\"\r\n      [attr.aria-activedescendant]=\"open() ? activeOptionId() : null\" (click)=\"openFromTrigger()\"\r\n      [readonly]=\"!isSearchMode()\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\"\r\n      aria-controls=\"{{ _id }}-listbox\" aria-expanded=\"false\" [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\r\n      [attr.placeholder]=\"inputPlaceholderKey() ? (inputPlaceholderKey() | translate) : inputPlaceholderText()\"\r\n      [value]=\"triggerValue()\" (keydown)=\"onTriggerKeydown($event)\" (focus)=\"openFromTrigger()\" (input)=\"onTriggerInput(triggerInput.value)\"/>\r\n\r\n    <button type=\"button\" class=\"solaris-select__chevron-btn\" [disabled]=\"disabled\" (click)=\"toggleOpen()\"\r\n      [attr.aria-label]=\"('ui.solaris.aria.toggleOptions' | translate)\">\r\n      <i class=\"ph ph-caret-down\" aria-hidden=\"true\"></i>\r\n    </button>\r\n\r\n    <span class=\"solaris-select__measure solaris-select__token\" #measureSlot aria-hidden=\"true\">\r\n      {{ selectedText() }}\r\n    </span>\r\n  </div>\r\n\r\n  <ng-template solaris-popover-panel>\r\n    <div class=\"solaris-select__panel\" (keydown)=\"onPanelKeydown($event)\" [style.max-height]=\"panelMaxHeight\">\r\n      @if (canGoBack()) {\r\n        <div class=\"solaris-select__nav\">\r\n          <button type=\"button\" class=\"solaris-select__back\" (click)=\"goBack()\">\r\n            <i class=\"ph ph-arrow-left\"></i>\r\n            <span>\r\n              @if (backKey) { {{ backKey | translate }} }\r\n              @else { {{ backText | translate }} }\r\n            </span>\r\n          </button>\r\n\r\n          <div class=\"solaris-select__title\">\r\n            @if (currentLevel().titleKey) { {{ currentLevel().titleKey! | translate }} }\r\n            @else { {{ currentLevel().title ?? '' }} }\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"solaris-select__list\" role=\"listbox\" [id]=\"_id + '-listbox'\"\r\n        [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\r\n        [attr.aria-activedescendant]=\"activeOptionId()\">\r\n        @for (row of rows(); track trackRow($index, row)) {\r\n          @if (row.kind === 'group') {\r\n            <div class=\"solaris-select__group\">\r\n              @if (row.labelKey) { {{ row.labelKey | translate }} }\r\n              @else { {{ row.label }} }\r\n            </div>\r\n          }\r\n\r\n          @if (row.kind === 'divider') {\r\n            <div class=\"solaris-select__divider\" aria-hidden=\"true\"></div>\r\n          }\r\n\r\n          @if (row.kind === 'item') {\r\n            <button type=\"button\" class=\"solaris-select__option\" [id]=\"row.id\" [disabled]=\"row.disabled\"\r\n              [attr.aria-selected]=\"row.selected ? 'true' : 'false'\" [class.is-active]=\"row.optionIndex === activeIndex()\"\r\n              [class.is-selected]=\"row.selected\" [class.is-navigable]=\"row.hasChildren\" (click)=\"onOptionClick(row.item)\">\r\n              <span class=\"solaris-select__option-leading\">\r\n                @if (multiple) {\r\n                  @if (!row.hasChildren) {\r\n                    <span class=\"solaris-select__checkbox\" aria-hidden=\"true\" [class.is-checked]=\"row.selected\">\r\n                      <i class=\"ph ph-check\"></i>\r\n                    </span>\r\n                  } @else {\r\n                    @if (row.item.imageUrl) {\r\n                      <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill/>\r\n                    } @else if (row.item.icon) {\r\n                      <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n                    } @else {\r\n                      <span class=\"solaris-select__checkbox-spacer\" aria-hidden=\"true\"></span>\r\n                    }\r\n                  }\r\n                }\r\n\r\n                @if (!multiple) {\r\n                  @if (row.item.imageUrl) {\r\n                    <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\r\n                  } @else if (row.item.icon) {\r\n                    <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n                  }\r\n                }\r\n              </span>\r\n\r\n              <span class=\"solaris-select__option-main\">\r\n                <span class=\"solaris-select__option-label\">\r\n                  @if (row.item.labelKey) { {{ row.item.labelKey | translate }} }\r\n                  @else { {{ row.item.label }} }\r\n                </span>\r\n\r\n                @if (row.item.description || row.item.descriptionKey) {\r\n                  <span class=\"solaris-select__option-desc\">\r\n                    @if (row.item.descriptionKey) { {{ row.item.descriptionKey | translate }} }\r\n                    @else { {{ row.item.description }} }\r\n                  </span>\r\n                }\r\n              </span>\r\n\r\n              <span class=\"solaris-select__option-end\">\r\n                @if (row.item.endTextKey) {\r\n                  <span class=\"solaris-select__end-text\">{{ row.item.endTextKey | translate }}</span>\r\n                } @else if (row.item.endText) {\r\n                  <span class=\"solaris-select__end-text\">{{ row.item.endText }}</span>\r\n                }\r\n\r\n                @if (!multiple && row.selected) {\r\n                  <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n                }\r\n\r\n                @if (row.hasChildren) {\r\n                  <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n                }\r\n              </span>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</solaris-popover>\r\n", styles: [":host{width:100%;display:block}.solaris-select__trigger{width:100%;min-width:0;display:flex;position:relative;align-items:center;padding-right:2.8rem;gap:var(--solaris-space-2)}.solaris-select__token{opacity:1;min-width:0;flex:0 1 auto;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-color-text)}.solaris-select__input{border:0;width:100%;min-width:0;outline:none;flex:1 1 auto;padding:1rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}:host([data-compact=true]) .solaris-select__input{flex:0 0 2ch;width:2ch;min-width:2ch}.solaris-select__input::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn i.ph{margin-right:1.5rem;transform:rotate(0);transition:transform .16s ease,opacity .16s ease}:host([data-open=true]) .solaris-select__chevron-btn i.ph{opacity:.95;transform:rotate(180deg)}:host([data-multiple=false]) .solaris-select__trigger,:host([data-multiple=false]) .solaris-select__input,:host([data-multiple=false]) .solaris-select__chevron-btn:not(:disabled){cursor:pointer}.solaris-select__display{top:0;left:0;bottom:0;display:flex;right:2.8rem;overflow:hidden;position:absolute;align-items:center;white-space:nowrap;pointer-events:none;text-overflow:ellipsis}.solaris-select__display.is-hidden{opacity:0}.solaris-select__input::placeholder,.solaris-select__placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__input::placeholder,.solaris-select__placeholder,.solaris-select__token{font-size:var(--solaris-fs-14)}.solaris-select__chevron-btn{top:50%;right:0;border:0;display:grid;width:2.8rem;opacity:.85;height:3.6rem;cursor:pointer;position:absolute;place-items:center;background:transparent;transform:translateY(-50%);color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn:disabled{opacity:.5;cursor:not-allowed}.solaris-select__measure{top:-9999px;left:-9999px;position:absolute;visibility:hidden;pointer-events:none;max-width:none!important;overflow:visible!important;width:max-content!important;white-space:nowrap!important;text-overflow:clip!important;display:inline-block!important}.solaris-select__popover{padding:var(--solaris-space-2)}.solaris-select__panel{display:grid;overflow:auto;max-height:32rem;padding:.25rem;gap:var(--solaris-space-2);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}.solaris-select__checkbox-spacer{width:1.6rem;height:1.6rem}.solaris-select__nav{display:grid;align-items:center;padding-right:1rem;gap:var(--solaris-space-2);grid-template-columns:auto 1fr}.solaris-select__back{border:0;cursor:pointer;align-items:center;display:inline-flex;background:transparent;gap:var(--solaris-space-1);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm)}.solaris-select__back:hover{background:var(--solaris-color-surface-2)}.solaris-select__title{justify-self:end;font-size:var(--solaris-fs-12);padding-right:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-select__list{gap:.25rem;display:grid}.solaris-select__group{opacity:.9;padding:.4rem .6rem;text-transform:uppercase;font-size:var(--solaris-fs-10);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-select__divider{height:1px;margin:.35rem .2rem;background:color-mix(in srgb,var(--solaris-color-border) 75%,transparent)}.solaris-select__option{width:100%;border:0;display:grid;cursor:pointer;text-align:left;align-items:center;padding:.7rem .8rem;background:transparent;gap:var(--solaris-space-4);color:var(--solaris-color-text);grid-template-columns:auto 1fr auto;border-radius:var(--solaris-radius-sm)}.solaris-select__option:hover{background:var(--solaris-color-surface-2)}.solaris-select__option.is-active{background:color-mix(in srgb,var(--solaris-color-primary) 7%,var(--solaris-color-surface-2))}.solaris-select__option:disabled{opacity:.45;cursor:not-allowed}.solaris-select__option-leading{align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-select__checkbox{display:grid;width:1.6rem;height:1.6rem;place-items:center;border-radius:.4rem;background:var(--solaris-color-surface);color:var(--solaris-color-primary-contrast);border:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-select__checkbox i.ph{opacity:0;line-height:1;font-size:1.2rem;transform:scale(.9);transition:opacity .12s ease,transform .12s ease}.solaris-select__checkbox.is-checked{background:var(--solaris-color-primary);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-select__checkbox.is-checked i.ph{opacity:1;transform:scale(1)}.solaris-select__avatar{width:1.8rem;height:1.8rem;object-fit:cover;border-radius:var(--solaris-radius-full)}.solaris-select__icon{opacity:.9;font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted)}.solaris-select__option-main{min-width:0;gap:.15rem;display:grid}.solaris-select__option-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__option-desc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-select__option-end{opacity:.9;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text-muted)}.solaris-select__option-end i.ph-check{color:var(--solaris-color-success)}.solaris-select__end-text{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}\n"], dependencies: [{ kind: "component", type: SolarisPopover, selector: "solaris-popover", inputs: ["offset", "panelClass", "autoFlip", "autoShift", "matchWidth", "viewportPadding", "closeOnEscape", "closeOnOutsideClick", "anchorElement", "matchWidthElement", "placement", "open"], outputs: ["openChange"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]" }, { kind: "directive", type: SolarisPopoverPanelDirective, selector: "ng-template[solaris-popover-panel]" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisSelect, isStandalone: true, selector: "solaris-select", inputs: { items: "items", multiple: "multiple", valueKey: "valueKey", backKey: "backKey", placeholder: "placeholder", placeholderKey: "placeholderKey", searchable: "searchable", selectedCountKey: "selectedCountKey", selectedFirst: "selectedFirst", searchPlaceholder: "searchPlaceholder", selectedCountText: "selectedCountText", panelMaxHeight: "panelMaxHeight", searchPlaceholderKey: "searchPlaceholderKey", selectionSeparator: "selectionSeparator", compareWith: "compareWith", backText: "backText", selectionDisplay: "selectionDisplay", disabled: "disabled" }, host: { properties: { "attr.data-open": "this.dataOpen", "attr.data-compact": "this.dataCompact", "attr.data-multiple": "this.dataMultiple" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SolarisSelect),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "tokenEl", first: true, predicate: ["tokenEl"], descendants: true, read: ElementRef }, { propertyName: "measureSlot", first: true, predicate: ["measureSlot"], descendants: true, read: ElementRef }, { propertyName: "triggerWrap", first: true, predicate: ["triggerWrap"], descendants: true, read: ElementRef }, { propertyName: "triggerInput", first: true, predicate: ["triggerInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<solaris-popover [open]=\"open()\" (openChange)=\"open.set($event)\" placement=\"bottom-start\" [offset]=\"6\"\r\n  [matchWidth]=\"true\" [anchorElement]=\"matchWidthEl\" [matchWidthElement]=\"matchWidthEl\"\r\n  [closeOnOutsideClick]=\"true\" [closeOnEscape]=\"true\" panelClass=\"solaris-select__popover\">\r\n  <div #triggerWrap solaris-popover-trigger class=\"solaris-select__trigger\" (click)=\"openFromTrigger()\">\r\n    @if (showToken()) {\r\n      <span #tokenEl class=\"solaris-select__token\" aria-hidden=\"true\">\r\n        @if (multiple && showCount()) {\r\n          @if (selectedCountKey) { {{ selectedCountKey | translate:{ count: selectedCount() } }} }\r\n          @else { {{ selectedCountLabel() }} }\r\n        } @else {\r\n          {{ selectedText() }}\r\n        }\r\n      </span>\r\n    }\r\n\r\n    <input #triggerInput type=\"text\" class=\"solaris-select__input\" [disabled]=\"disabled\"\r\n      [attr.aria-activedescendant]=\"open() ? activeOptionId() : null\" (click)=\"openFromTrigger()\"\r\n      [readonly]=\"!isSearchMode()\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\"\r\n      aria-controls=\"{{ _id }}-listbox\" aria-expanded=\"false\" [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\r\n      [attr.placeholder]=\"inputPlaceholderKey() ? (inputPlaceholderKey() | translate) : inputPlaceholderText()\"\r\n      [value]=\"triggerValue()\" (keydown)=\"onTriggerKeydown($event)\" (focus)=\"openFromTrigger()\" (input)=\"onTriggerInput(triggerInput.value)\"/>\r\n\r\n    <button type=\"button\" class=\"solaris-select__chevron-btn\" [disabled]=\"disabled\" (click)=\"toggleOpen()\"\r\n      [attr.aria-label]=\"('ui.solaris.aria.toggleOptions' | translate)\">\r\n      <i class=\"ph ph-caret-down\" aria-hidden=\"true\"></i>\r\n    </button>\r\n\r\n    <span class=\"solaris-select__measure solaris-select__token\" #measureSlot aria-hidden=\"true\">\r\n      {{ selectedText() }}\r\n    </span>\r\n  </div>\r\n\r\n  <ng-template solaris-popover-panel>\r\n    <div class=\"solaris-select__panel\" (keydown)=\"onPanelKeydown($event)\" [style.max-height]=\"panelMaxHeight\">\r\n      @if (canGoBack()) {\r\n        <div class=\"solaris-select__nav\">\r\n          <button type=\"button\" class=\"solaris-select__back\" (click)=\"goBack()\">\r\n            <i class=\"ph ph-arrow-left\"></i>\r\n            <span>\r\n              @if (backKey) { {{ backKey | translate }} }\r\n              @else { {{ backText | translate }} }\r\n            </span>\r\n          </button>\r\n\r\n          <div class=\"solaris-select__title\">\r\n            @if (currentLevel().titleKey) { {{ currentLevel().titleKey! | translate }} }\r\n            @else { {{ currentLevel().title ?? '' }} }\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"solaris-select__list\" role=\"listbox\" [id]=\"_id + '-listbox'\"\r\n        [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\r\n        [attr.aria-activedescendant]=\"activeOptionId()\">\r\n        @for (row of rows(); track trackRow($index, row)) {\r\n          @if (row.kind === 'group') {\r\n            <div class=\"solaris-select__group\">\r\n              @if (row.labelKey) { {{ row.labelKey | translate }} }\r\n              @else { {{ row.label }} }\r\n            </div>\r\n          }\r\n\r\n          @if (row.kind === 'divider') {\r\n            <div class=\"solaris-select__divider\" aria-hidden=\"true\"></div>\r\n          }\r\n\r\n          @if (row.kind === 'item') {\r\n            <button type=\"button\" class=\"solaris-select__option\" [id]=\"row.id\" [disabled]=\"row.disabled\"\r\n              [attr.aria-selected]=\"row.selected ? 'true' : 'false'\" [class.is-active]=\"row.optionIndex === activeIndex()\"\r\n              [class.is-selected]=\"row.selected\" [class.is-navigable]=\"row.hasChildren\" (click)=\"onOptionClick(row.item)\">\r\n              <span class=\"solaris-select__option-leading\">\r\n                @if (multiple) {\r\n                  @if (!row.hasChildren) {\r\n                    <span class=\"solaris-select__checkbox\" aria-hidden=\"true\" [class.is-checked]=\"row.selected\">\r\n                      <i class=\"ph ph-check\"></i>\r\n                    </span>\r\n                  } @else {\r\n                    @if (row.item.imageUrl) {\r\n                      <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill/>\r\n                    } @else if (row.item.icon) {\r\n                      <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n                    } @else {\r\n                      <span class=\"solaris-select__checkbox-spacer\" aria-hidden=\"true\"></span>\r\n                    }\r\n                  }\r\n                }\r\n\r\n                @if (!multiple) {\r\n                  @if (row.item.imageUrl) {\r\n                    <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\r\n                  } @else if (row.item.icon) {\r\n                    <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n                  }\r\n                }\r\n              </span>\r\n\r\n              <span class=\"solaris-select__option-main\">\r\n                <span class=\"solaris-select__option-label\">\r\n                  @if (row.item.labelKey) { {{ row.item.labelKey | translate }} }\r\n                  @else { {{ row.item.label }} }\r\n                </span>\r\n\r\n                @if (row.item.description || row.item.descriptionKey) {\r\n                  <span class=\"solaris-select__option-desc\">\r\n                    @if (row.item.descriptionKey) { {{ row.item.descriptionKey | translate }} }\r\n                    @else { {{ row.item.description }} }\r\n                  </span>\r\n                }\r\n              </span>\r\n\r\n              <span class=\"solaris-select__option-end\">\r\n                @if (row.item.endTextKey) {\r\n                  <span class=\"solaris-select__end-text\">{{ row.item.endTextKey | translate }}</span>\r\n                } @else if (row.item.endText) {\r\n                  <span class=\"solaris-select__end-text\">{{ row.item.endText }}</span>\r\n                }\r\n\r\n                @if (!multiple && row.selected) {\r\n                  <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n                }\r\n\r\n                @if (row.hasChildren) {\r\n                  <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n                }\r\n              </span>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</solaris-popover>\r\n", styles: [":host{width:100%;display:block}.solaris-select__trigger{width:100%;min-width:0;display:flex;position:relative;align-items:center;padding-right:2.8rem;gap:var(--solaris-space-2)}.solaris-select__token{opacity:1;min-width:0;flex:0 1 auto;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-color-text)}.solaris-select__input{border:0;width:100%;min-width:0;outline:none;flex:1 1 auto;padding:1rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}:host([data-compact=true]) .solaris-select__input{flex:0 0 2ch;width:2ch;min-width:2ch}.solaris-select__input::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn i.ph{margin-right:1.5rem;transform:rotate(0);transition:transform .16s ease,opacity .16s ease}:host([data-open=true]) .solaris-select__chevron-btn i.ph{opacity:.95;transform:rotate(180deg)}:host([data-multiple=false]) .solaris-select__trigger,:host([data-multiple=false]) .solaris-select__input,:host([data-multiple=false]) .solaris-select__chevron-btn:not(:disabled){cursor:pointer}.solaris-select__display{top:0;left:0;bottom:0;display:flex;right:2.8rem;overflow:hidden;position:absolute;align-items:center;white-space:nowrap;pointer-events:none;text-overflow:ellipsis}.solaris-select__display.is-hidden{opacity:0}.solaris-select__input::placeholder,.solaris-select__placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__input::placeholder,.solaris-select__placeholder,.solaris-select__token{font-size:var(--solaris-fs-14)}.solaris-select__chevron-btn{top:50%;right:0;border:0;display:grid;width:2.8rem;opacity:.85;height:3.6rem;cursor:pointer;position:absolute;place-items:center;background:transparent;transform:translateY(-50%);color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn:disabled{opacity:.5;cursor:not-allowed}.solaris-select__measure{top:-9999px;left:-9999px;position:absolute;visibility:hidden;pointer-events:none;max-width:none!important;overflow:visible!important;width:max-content!important;white-space:nowrap!important;text-overflow:clip!important;display:inline-block!important}.solaris-select__popover{padding:var(--solaris-space-2)}.solaris-select__panel{display:grid;overflow:auto;max-height:32rem;padding:.25rem;gap:var(--solaris-space-2);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}.solaris-select__checkbox-spacer{width:1.6rem;height:1.6rem}.solaris-select__nav{display:grid;align-items:center;padding-right:1rem;gap:var(--solaris-space-2);grid-template-columns:auto 1fr}.solaris-select__back{border:0;cursor:pointer;align-items:center;display:inline-flex;background:transparent;gap:var(--solaris-space-1);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm)}.solaris-select__back:hover{background:var(--solaris-color-surface-2)}.solaris-select__title{justify-self:end;font-size:var(--solaris-fs-12);padding-right:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-select__list{gap:.25rem;display:grid}.solaris-select__group{opacity:.9;padding:.4rem .6rem;text-transform:uppercase;font-size:var(--solaris-fs-10);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-select__divider{height:1px;margin:.35rem .2rem;background:color-mix(in srgb,var(--solaris-color-border) 75%,transparent)}.solaris-select__option{width:100%;border:0;display:grid;cursor:pointer;text-align:left;align-items:center;padding:.7rem .8rem;background:transparent;gap:var(--solaris-space-4);color:var(--solaris-color-text);grid-template-columns:auto 1fr auto;border-radius:var(--solaris-radius-sm)}.solaris-select__option:hover{background:var(--solaris-color-surface-2)}.solaris-select__option.is-active{background:color-mix(in srgb,var(--solaris-color-primary) 7%,var(--solaris-color-surface-2))}.solaris-select__option:disabled{opacity:.45;cursor:not-allowed}.solaris-select__option-leading{align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-select__checkbox{display:grid;width:1.6rem;height:1.6rem;place-items:center;border-radius:.4rem;background:var(--solaris-color-surface);color:var(--solaris-color-primary-contrast);border:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-select__checkbox i.ph{opacity:0;line-height:1;font-size:1.2rem;transform:scale(.9);transition:opacity .12s ease,transform .12s ease}.solaris-select__checkbox.is-checked{background:var(--solaris-color-primary);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-select__checkbox.is-checked i.ph{opacity:1;transform:scale(1)}.solaris-select__avatar{width:1.8rem;height:1.8rem;object-fit:cover;border-radius:var(--solaris-radius-full)}.solaris-select__icon{opacity:.9;font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted)}.solaris-select__option-main{min-width:0;gap:.15rem;display:grid}.solaris-select__option-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__option-desc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-select__option-end{opacity:.9;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text-muted)}.solaris-select__option-end i.ph-check{color:var(--solaris-color-success)}.solaris-select__end-text{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}\n"], dependencies: [{ kind: "component", type: SolarisPopover, selector: "solaris-popover", inputs: ["offset", "panelClass", "autoFlip", "autoShift", "matchWidth", "viewportPadding", "closeOnEscape", "closeOnOutsideClick", "anchorElement", "matchWidthElement", "placement", "open"], outputs: ["openChange"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]" }, { kind: "directive", type: SolarisPopoverPanelDirective, selector: "ng-template[solaris-popover-panel]" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSelect, decorators: [{
             type: Component,
@@ -8346,7 +8492,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         SolarisPopoverPanelDirective,
                         SolarisTranslationPipe,
                         NgOptimizedImage,
-                    ], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SolarisSelect), multi: true }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-popover [open]=\"open()\" (openChange)=\"open.set($event)\" placement=\"bottom-start\" [offset]=\"6\"\r\n  [matchWidth]=\"true\" [anchorElement]=\"matchWidthEl\" [matchWidthElement]=\"matchWidthEl\"\r\n  [closeOnOutsideClick]=\"true\" [closeOnEscape]=\"true\" panelClass=\"solaris-select__popover\">\r\n  <div #triggerWrap solaris-popover-trigger class=\"solaris-select__trigger\" (click)=\"openFromTrigger()\">\r\n    @if (showToken()) {\r\n      <span #tokenEl class=\"solaris-select__token\" aria-hidden=\"true\">\r\n        @if (multiple && showCount()) {\r\n          @if (selectedCountKey) { {{ selectedCountKey | translate:{ count: selectedCount() } }} }\r\n          @else { {{ selectedCountLabel() }} }\r\n        } @else {\r\n          {{ selectedText() }}\r\n        }\r\n      </span>\r\n    }\r\n\r\n    <input #triggerInput type=\"text\" class=\"solaris-select__input\" [disabled]=\"disabled\"\r\n      [attr.aria-activedescendant]=\"open() ? activeOptionId() : null\" (click)=\"openFromTrigger()\"\r\n      [readonly]=\"!isSearchMode()\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\"\r\n      aria-controls=\"{{ _id }}-listbox\" aria-expanded=\"false\" [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\r\n      [attr.placeholder]=\"inputPlaceholderKey() ? (inputPlaceholderKey() | translate) : inputPlaceholderText()\"\r\n      [value]=\"triggerValue()\" (keydown)=\"onTriggerKeydown($event)\" (focus)=\"openFromTrigger()\" (input)=\"onTriggerInput(triggerInput.value)\"/>\r\n\r\n    <button type=\"button\" class=\"solaris-select__chevron-btn\" [disabled]=\"disabled\" (click)=\"toggleOpen()\"\r\n      [attr.aria-label]=\"('ui.solaris.aria.toggleOptions' | translate)\">\r\n      <i class=\"ph ph-caret-down\" aria-hidden=\"true\"></i>\r\n    </button>\r\n\r\n    <span class=\"solaris-select__measure solaris-select__token\" #measureSlot aria-hidden=\"true\">\r\n      {{ selectedText() }}\r\n    </span>\r\n  </div>\r\n\r\n  <ng-template solaris-popover-panel>\r\n    <div class=\"solaris-select__panel\" (keydown)=\"onPanelKeydown($event)\" [style.max-height]=\"panelMaxHeight\">\r\n      @if (canGoBack()) {\r\n        <div class=\"solaris-select__nav\">\r\n          <button type=\"button\" class=\"solaris-select__back\" (click)=\"goBack()\">\r\n            <i class=\"ph ph-arrow-left\"></i>\r\n            <span>\r\n              @if (backKey) { {{ backKey | translate }} }\r\n              @else { {{ backText | translate }} }\r\n            </span>\r\n          </button>\r\n\r\n          <div class=\"solaris-select__title\">\r\n            @if (currentLevel().titleKey) { {{ currentLevel().titleKey! | translate }} }\r\n            @else { {{ currentLevel().title ?? '' }} }\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"solaris-select__list\" role=\"listbox\" [id]=\"_id + '-listbox'\"\r\n        [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\r\n        [attr.aria-activedescendant]=\"activeOptionId()\">\r\n        @for (row of rows(); track trackRow($index, row)) {\r\n          @if (row.kind === 'group') {\r\n            <div class=\"solaris-select__group\">\r\n              @if (row.labelKey) { {{ row.labelKey | translate }} }\r\n              @else { {{ row.label }} }\r\n            </div>\r\n          }\r\n\r\n          @if (row.kind === 'divider') {\r\n            <div class=\"solaris-select__divider\" aria-hidden=\"true\"></div>\r\n          }\r\n\r\n          @if (row.kind === 'item') {\r\n            <button type=\"button\" class=\"solaris-select__option\" [id]=\"row.id\" [disabled]=\"row.disabled\"\r\n              [attr.aria-selected]=\"row.selected ? 'true' : 'false'\" [class.is-active]=\"row.optionIndex === activeIndex()\"\r\n              [class.is-selected]=\"row.selected\" [class.is-navigable]=\"row.hasChildren\" (click)=\"onOptionClick(row.item)\">\r\n              <span class=\"solaris-select__option-leading\">\r\n                @if (multiple) {\r\n                  @if (!row.hasChildren) {\r\n                    <span class=\"solaris-select__checkbox\" aria-hidden=\"true\" [class.is-checked]=\"row.selected\">\r\n                      <i class=\"ph ph-check\"></i>\r\n                    </span>\r\n                  } @else {\r\n                    @if (row.item.imageUrl) {\r\n                      <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill/>\r\n                    } @else if (row.item.icon) {\r\n                      <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n                    } @else {\r\n                      <span class=\"solaris-select__checkbox-spacer\" aria-hidden=\"true\"></span>\r\n                    }\r\n                  }\r\n                }\r\n\r\n                @if (!multiple) {\r\n                  @if (row.item.imageUrl) {\r\n                    <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\r\n                  } @else if (row.item.icon) {\r\n                    <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n                  }\r\n                }\r\n              </span>\r\n\r\n              <span class=\"solaris-select__option-main\">\r\n                <span class=\"solaris-select__option-label\">\r\n                  @if (row.item.labelKey) { {{ row.item.labelKey | translate }} }\r\n                  @else { {{ row.item.label }} }\r\n                </span>\r\n\r\n                @if (row.item.description || row.item.descriptionKey) {\r\n                  <span class=\"solaris-select__option-desc\">\r\n                    @if (row.item.descriptionKey) { {{ row.item.descriptionKey | translate }} }\r\n                    @else { {{ row.item.description }} }\r\n                  </span>\r\n                }\r\n              </span>\r\n\r\n              <span class=\"solaris-select__option-end\">\r\n                @if (row.item.endTextKey) {\r\n                  <span class=\"solaris-select__end-text\">{{ row.item.endTextKey | translate }}</span>\r\n                } @else if (row.item.endText) {\r\n                  <span class=\"solaris-select__end-text\">{{ row.item.endText }}</span>\r\n                }\r\n\r\n                @if (!multiple && row.selected) {\r\n                  <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n                }\r\n\r\n                @if (row.hasChildren) {\r\n                  <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n                }\r\n              </span>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</solaris-popover>\r\n", styles: [":host{width:100%;display:block}.solaris-select__trigger{width:100%;min-width:0;display:flex;position:relative;align-items:center;padding-right:2.8rem;gap:var(--solaris-space-2)}.solaris-select__token{opacity:1;min-width:0;flex:0 1 auto;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-color-text)}.solaris-select__input{border:0;width:100%;min-width:0;outline:none;flex:1 1 auto;padding:1rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}:host([data-compact=true]) .solaris-select__input{flex:0 0 2ch;width:2ch;min-width:2ch}.solaris-select__input::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn i.ph{margin-right:1.5rem;transform:rotate(0);transition:transform .16s ease,opacity .16s ease}:host([data-open=true]) .solaris-select__chevron-btn i.ph{opacity:.95;transform:rotate(180deg)}:host([data-multiple=false]) .solaris-select__trigger,:host([data-multiple=false]) .solaris-select__input,:host([data-multiple=false]) .solaris-select__chevron-btn:not(:disabled){cursor:pointer}.solaris-select__display{top:0;left:0;bottom:0;display:flex;right:2.8rem;overflow:hidden;position:absolute;align-items:center;white-space:nowrap;pointer-events:none;text-overflow:ellipsis}.solaris-select__display.is-hidden{opacity:0}.solaris-select__input::placeholder,.solaris-select__placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__input::placeholder,.solaris-select__placeholder,.solaris-select__token{font-size:var(--solaris-fs-14)}.solaris-select__chevron-btn{top:50%;right:0;border:0;display:grid;width:2.8rem;opacity:.85;height:3.6rem;cursor:pointer;position:absolute;place-items:center;background:transparent;transform:translateY(-50%);color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn:disabled{opacity:.5;cursor:not-allowed}.solaris-select__measure{top:-9999px;left:-9999px;position:absolute;visibility:hidden;pointer-events:none;max-width:none!important;overflow:visible!important;width:max-content!important;white-space:nowrap!important;text-overflow:clip!important;display:inline-block!important}.solaris-select__popover{padding:var(--solaris-space-2)}.solaris-select__panel{display:grid;overflow:auto;max-height:32rem;padding:.25rem;gap:var(--solaris-space-2);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}.solaris-select__checkbox-spacer{width:1.6rem;height:1.6rem}.solaris-select__nav{display:grid;align-items:center;padding-right:1rem;gap:var(--solaris-space-2);grid-template-columns:auto 1fr}.solaris-select__back{border:0;cursor:pointer;align-items:center;display:inline-flex;background:transparent;gap:var(--solaris-space-1);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm)}.solaris-select__back:hover{background:var(--solaris-color-surface-2)}.solaris-select__title{justify-self:end;font-size:var(--solaris-fs-12);padding-right:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-select__list{gap:.25rem;display:grid}.solaris-select__group{opacity:.9;padding:.4rem .6rem;text-transform:uppercase;font-size:var(--solaris-fs-10);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-select__divider{height:1px;margin:.35rem .2rem;background:color-mix(in srgb,var(--solaris-color-border) 75%,transparent)}.solaris-select__option{width:100%;border:0;display:grid;cursor:pointer;text-align:left;align-items:center;padding:.7rem .8rem;background:transparent;gap:var(--solaris-space-4);color:var(--solaris-color-text);grid-template-columns:auto 1fr auto;border-radius:var(--solaris-radius-sm)}.solaris-select__option:hover{background:var(--solaris-color-surface-2)}.solaris-select__option.is-active{background:color-mix(in srgb,var(--solaris-color-primary) 7%,var(--solaris-color-surface-2))}.solaris-select__option:disabled{opacity:.45;cursor:not-allowed}.solaris-select__option-leading{align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-select__checkbox{display:grid;width:1.6rem;height:1.6rem;place-items:center;border-radius:.4rem;background:var(--solaris-color-surface);color:var(--solaris-color-primary-contrast);border:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-select__checkbox i.ph{opacity:0;line-height:1;font-size:1.2rem;transform:scale(.9);transition:opacity .12s ease,transform .12s ease}.solaris-select__checkbox.is-checked{background:var(--solaris-color-primary);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-select__checkbox.is-checked i.ph{opacity:1;transform:scale(1)}.solaris-select__avatar{width:1.8rem;height:1.8rem;object-fit:cover;border-radius:var(--solaris-radius-full)}.solaris-select__icon{opacity:.9;font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted)}.solaris-select__option-main{min-width:0;gap:.15rem;display:grid}.solaris-select__option-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__option-desc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-select__option-end{opacity:.9;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text-muted)}.solaris-select__option-end i.ph-check{color:var(--solaris-color-success)}.solaris-select__end-text{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}\n"] }]
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SolarisSelect),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-popover [open]=\"open()\" (openChange)=\"open.set($event)\" placement=\"bottom-start\" [offset]=\"6\"\r\n  [matchWidth]=\"true\" [anchorElement]=\"matchWidthEl\" [matchWidthElement]=\"matchWidthEl\"\r\n  [closeOnOutsideClick]=\"true\" [closeOnEscape]=\"true\" panelClass=\"solaris-select__popover\">\r\n  <div #triggerWrap solaris-popover-trigger class=\"solaris-select__trigger\" (click)=\"openFromTrigger()\">\r\n    @if (showToken()) {\r\n      <span #tokenEl class=\"solaris-select__token\" aria-hidden=\"true\">\r\n        @if (multiple && showCount()) {\r\n          @if (selectedCountKey) { {{ selectedCountKey | translate:{ count: selectedCount() } }} }\r\n          @else { {{ selectedCountLabel() }} }\r\n        } @else {\r\n          {{ selectedText() }}\r\n        }\r\n      </span>\r\n    }\r\n\r\n    <input #triggerInput type=\"text\" class=\"solaris-select__input\" [disabled]=\"disabled\"\r\n      [attr.aria-activedescendant]=\"open() ? activeOptionId() : null\" (click)=\"openFromTrigger()\"\r\n      [readonly]=\"!isSearchMode()\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\"\r\n      aria-controls=\"{{ _id }}-listbox\" aria-expanded=\"false\" [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\r\n      [attr.placeholder]=\"inputPlaceholderKey() ? (inputPlaceholderKey() | translate) : inputPlaceholderText()\"\r\n      [value]=\"triggerValue()\" (keydown)=\"onTriggerKeydown($event)\" (focus)=\"openFromTrigger()\" (input)=\"onTriggerInput(triggerInput.value)\"/>\r\n\r\n    <button type=\"button\" class=\"solaris-select__chevron-btn\" [disabled]=\"disabled\" (click)=\"toggleOpen()\"\r\n      [attr.aria-label]=\"('ui.solaris.aria.toggleOptions' | translate)\">\r\n      <i class=\"ph ph-caret-down\" aria-hidden=\"true\"></i>\r\n    </button>\r\n\r\n    <span class=\"solaris-select__measure solaris-select__token\" #measureSlot aria-hidden=\"true\">\r\n      {{ selectedText() }}\r\n    </span>\r\n  </div>\r\n\r\n  <ng-template solaris-popover-panel>\r\n    <div class=\"solaris-select__panel\" (keydown)=\"onPanelKeydown($event)\" [style.max-height]=\"panelMaxHeight\">\r\n      @if (canGoBack()) {\r\n        <div class=\"solaris-select__nav\">\r\n          <button type=\"button\" class=\"solaris-select__back\" (click)=\"goBack()\">\r\n            <i class=\"ph ph-arrow-left\"></i>\r\n            <span>\r\n              @if (backKey) { {{ backKey | translate }} }\r\n              @else { {{ backText | translate }} }\r\n            </span>\r\n          </button>\r\n\r\n          <div class=\"solaris-select__title\">\r\n            @if (currentLevel().titleKey) { {{ currentLevel().titleKey! | translate }} }\r\n            @else { {{ currentLevel().title ?? '' }} }\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"solaris-select__list\" role=\"listbox\" [id]=\"_id + '-listbox'\"\r\n        [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\r\n        [attr.aria-activedescendant]=\"activeOptionId()\">\r\n        @for (row of rows(); track trackRow($index, row)) {\r\n          @if (row.kind === 'group') {\r\n            <div class=\"solaris-select__group\">\r\n              @if (row.labelKey) { {{ row.labelKey | translate }} }\r\n              @else { {{ row.label }} }\r\n            </div>\r\n          }\r\n\r\n          @if (row.kind === 'divider') {\r\n            <div class=\"solaris-select__divider\" aria-hidden=\"true\"></div>\r\n          }\r\n\r\n          @if (row.kind === 'item') {\r\n            <button type=\"button\" class=\"solaris-select__option\" [id]=\"row.id\" [disabled]=\"row.disabled\"\r\n              [attr.aria-selected]=\"row.selected ? 'true' : 'false'\" [class.is-active]=\"row.optionIndex === activeIndex()\"\r\n              [class.is-selected]=\"row.selected\" [class.is-navigable]=\"row.hasChildren\" (click)=\"onOptionClick(row.item)\">\r\n              <span class=\"solaris-select__option-leading\">\r\n                @if (multiple) {\r\n                  @if (!row.hasChildren) {\r\n                    <span class=\"solaris-select__checkbox\" aria-hidden=\"true\" [class.is-checked]=\"row.selected\">\r\n                      <i class=\"ph ph-check\"></i>\r\n                    </span>\r\n                  } @else {\r\n                    @if (row.item.imageUrl) {\r\n                      <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill/>\r\n                    } @else if (row.item.icon) {\r\n                      <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n                    } @else {\r\n                      <span class=\"solaris-select__checkbox-spacer\" aria-hidden=\"true\"></span>\r\n                    }\r\n                  }\r\n                }\r\n\r\n                @if (!multiple) {\r\n                  @if (row.item.imageUrl) {\r\n                    <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\r\n                  } @else if (row.item.icon) {\r\n                    <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n                  }\r\n                }\r\n              </span>\r\n\r\n              <span class=\"solaris-select__option-main\">\r\n                <span class=\"solaris-select__option-label\">\r\n                  @if (row.item.labelKey) { {{ row.item.labelKey | translate }} }\r\n                  @else { {{ row.item.label }} }\r\n                </span>\r\n\r\n                @if (row.item.description || row.item.descriptionKey) {\r\n                  <span class=\"solaris-select__option-desc\">\r\n                    @if (row.item.descriptionKey) { {{ row.item.descriptionKey | translate }} }\r\n                    @else { {{ row.item.description }} }\r\n                  </span>\r\n                }\r\n              </span>\r\n\r\n              <span class=\"solaris-select__option-end\">\r\n                @if (row.item.endTextKey) {\r\n                  <span class=\"solaris-select__end-text\">{{ row.item.endTextKey | translate }}</span>\r\n                } @else if (row.item.endText) {\r\n                  <span class=\"solaris-select__end-text\">{{ row.item.endText }}</span>\r\n                }\r\n\r\n                @if (!multiple && row.selected) {\r\n                  <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n                }\r\n\r\n                @if (row.hasChildren) {\r\n                  <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n                }\r\n              </span>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</solaris-popover>\r\n", styles: [":host{width:100%;display:block}.solaris-select__trigger{width:100%;min-width:0;display:flex;position:relative;align-items:center;padding-right:2.8rem;gap:var(--solaris-space-2)}.solaris-select__token{opacity:1;min-width:0;flex:0 1 auto;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-color-text)}.solaris-select__input{border:0;width:100%;min-width:0;outline:none;flex:1 1 auto;padding:1rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}:host([data-compact=true]) .solaris-select__input{flex:0 0 2ch;width:2ch;min-width:2ch}.solaris-select__input::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn i.ph{margin-right:1.5rem;transform:rotate(0);transition:transform .16s ease,opacity .16s ease}:host([data-open=true]) .solaris-select__chevron-btn i.ph{opacity:.95;transform:rotate(180deg)}:host([data-multiple=false]) .solaris-select__trigger,:host([data-multiple=false]) .solaris-select__input,:host([data-multiple=false]) .solaris-select__chevron-btn:not(:disabled){cursor:pointer}.solaris-select__display{top:0;left:0;bottom:0;display:flex;right:2.8rem;overflow:hidden;position:absolute;align-items:center;white-space:nowrap;pointer-events:none;text-overflow:ellipsis}.solaris-select__display.is-hidden{opacity:0}.solaris-select__input::placeholder,.solaris-select__placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__input::placeholder,.solaris-select__placeholder,.solaris-select__token{font-size:var(--solaris-fs-14)}.solaris-select__chevron-btn{top:50%;right:0;border:0;display:grid;width:2.8rem;opacity:.85;height:3.6rem;cursor:pointer;position:absolute;place-items:center;background:transparent;transform:translateY(-50%);color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn:disabled{opacity:.5;cursor:not-allowed}.solaris-select__measure{top:-9999px;left:-9999px;position:absolute;visibility:hidden;pointer-events:none;max-width:none!important;overflow:visible!important;width:max-content!important;white-space:nowrap!important;text-overflow:clip!important;display:inline-block!important}.solaris-select__popover{padding:var(--solaris-space-2)}.solaris-select__panel{display:grid;overflow:auto;max-height:32rem;padding:.25rem;gap:var(--solaris-space-2);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}.solaris-select__checkbox-spacer{width:1.6rem;height:1.6rem}.solaris-select__nav{display:grid;align-items:center;padding-right:1rem;gap:var(--solaris-space-2);grid-template-columns:auto 1fr}.solaris-select__back{border:0;cursor:pointer;align-items:center;display:inline-flex;background:transparent;gap:var(--solaris-space-1);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm)}.solaris-select__back:hover{background:var(--solaris-color-surface-2)}.solaris-select__title{justify-self:end;font-size:var(--solaris-fs-12);padding-right:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-select__list{gap:.25rem;display:grid}.solaris-select__group{opacity:.9;padding:.4rem .6rem;text-transform:uppercase;font-size:var(--solaris-fs-10);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-select__divider{height:1px;margin:.35rem .2rem;background:color-mix(in srgb,var(--solaris-color-border) 75%,transparent)}.solaris-select__option{width:100%;border:0;display:grid;cursor:pointer;text-align:left;align-items:center;padding:.7rem .8rem;background:transparent;gap:var(--solaris-space-4);color:var(--solaris-color-text);grid-template-columns:auto 1fr auto;border-radius:var(--solaris-radius-sm)}.solaris-select__option:hover{background:var(--solaris-color-surface-2)}.solaris-select__option.is-active{background:color-mix(in srgb,var(--solaris-color-primary) 7%,var(--solaris-color-surface-2))}.solaris-select__option:disabled{opacity:.45;cursor:not-allowed}.solaris-select__option-leading{align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-select__checkbox{display:grid;width:1.6rem;height:1.6rem;place-items:center;border-radius:.4rem;background:var(--solaris-color-surface);color:var(--solaris-color-primary-contrast);border:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-select__checkbox i.ph{opacity:0;line-height:1;font-size:1.2rem;transform:scale(.9);transition:opacity .12s ease,transform .12s ease}.solaris-select__checkbox.is-checked{background:var(--solaris-color-primary);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-select__checkbox.is-checked i.ph{opacity:1;transform:scale(1)}.solaris-select__avatar{width:1.8rem;height:1.8rem;object-fit:cover;border-radius:var(--solaris-radius-full)}.solaris-select__icon{opacity:.9;font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted)}.solaris-select__option-main{min-width:0;gap:.15rem;display:grid}.solaris-select__option-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__option-desc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-select__option-end{opacity:.9;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text-muted)}.solaris-select__option-end i.ph-check{color:var(--solaris-color-success)}.solaris-select__end-text{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{
                 type: Optional
             }], tokenEl: [{