@educarehq/solaris-components 0.5.3 → 0.5.5

package/fesm2022/educarehq-solaris-components.mjs

@@ -1147,7 +1147,7 @@ class SolarisPopover {
         host.style.left = '0px';
         host.style.display = 'none';
         host.style.position = 'fixed';
-        host.style.zIndex = 'var(--solaris-z-dropdown)';
+        host.style.zIndex = 'var(--solaris-z-max)';
         host.className = `solaris-popover-panel ${this.panelClass || ''}`.trim();
         const view = this.panelDir.templateRef.createEmbeddedView({});
         this.appRef.attachView(view);
@@ -7682,6 +7682,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 +7709,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 +7718,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 +7742,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 +7768,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 +7789,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 +7798,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 +7817,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 +7849,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 +7870,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 +7946,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 +7974,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 +7990,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 +8001,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 +8049,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 +8084,9 @@ class SolarisSelect {
                 flush();
                 res.push(n);
             }
-            else
+            else {
                 buf.push(n);
+            }
         }
         flush();
         return this.cleanupDividers(res);
@@ -8094,10 +8156,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 +8195,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 +8237,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 +8354,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 +8369,9 @@ class SolarisSelect {
     scheduleFocusTrigger() {
         requestAnimationFrame(() => {
             this.triggerInput?.nativeElement?.focus?.();
-            if (this.searchable)
+            if (this.searchable) {
                 this.triggerInput?.nativeElement?.select?.();
+            }
         });
     }
     isSelectableValue(v) {
@@ -8313,8 +8389,9 @@ class SolarisSelect {
                         selectable = !n.children?.length;
                         return;
                     }
-                    if (n.children?.length)
+                    if (n.children?.length) {
                         walk(n.children);
+                    }
                 }
             }
         };
@@ -8330,13 +8407,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 +8433,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: [{