@educarehq/solaris-components 0.3.2 → 0.3.5

package/fesm2022/educarehq-solaris-components.mjs

@@ -4533,18 +4533,23 @@ class FormField {
         }
         return 'solaris.validation.invalid';
     }, ...(ngDevMode ? [{ debugName: "errorKey" }] : []));
+    disabledComputed = computed(() => {
+        this._tick();
+        const c = this.field.control();
+        return !!c?.disabled;
+    }, ...(ngDevMode ? [{ debugName: "disabledComputed" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FormField, isStandalone: true, selector: "solaris-form-field", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: false, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: false, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: false, isRequired: false, transformFunction: null }, customErrorKey: { classPropertyName: "customErrorKey", publicName: "customErrorKey", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, customErrorParams: { classPropertyName: "customErrorParams", publicName: "customErrorParams", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             SolarisFormFieldController,
             { provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController },
-        ], queries: [{ propertyName: "prefix", first: true, predicate: SolarisPrefixDirective, descendants: true }, { propertyName: "suffix", first: true, predicate: SolarisSuffixDirective, descendants: true }], ngImport: i0, template: "<div class=\"solaris-form-field\" [class.solaris-form-field--has-prefix]=\"hasPrefix\" [attr.data-appearance]=\"appearance\"\r\n     [attr.data-invalid]=\"invalidComputed() ? 'true' : null\" [attr.data-radius]=\"radius\">\r\n  @if ((label || labelKey)) {\r\n    <label class=\"solaris-form-field__label\">\r\n      @if (labelKey) { {{ labelKey | translate }} }\r\n      @else if (label) { {{ label }} }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"solaris-form-field__frame\">\r\n    @if (hasPrefix) {\r\n      <span class=\"solaris-form-field__prefix\" aria-hidden=\"true\">\r\n        <ng-content select=\"[solaris-prefix]\"></ng-content>\r\n      </span>\r\n    }\r\n\r\n    <div class=\"solaris-form-field__body\">\r\n      <div class=\"solaris-form-field__control-slot\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n\r\n      @if (hasSuffix || showPasswordToggle() || invalidComputed()) {\r\n        <span class=\"solaris-form-field__suffix\">\r\n          <ng-content select=\"[solaris-suffix]\"></ng-content>\r\n\r\n          @if (showPasswordToggle()) {\r\n            <solaris-password-toggle></solaris-password-toggle>\r\n          }\r\n\r\n          @if (invalidComputed()) {\r\n            <span class=\"solaris-form-field__status\" aria-hidden=\"true\">\r\n              <i class=\"ph ph-warning-circle\"></i>\r\n            </span>\r\n          }\r\n        </span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (errorKey()) {\r\n    <solaris-field-error [textKey]=\"errorKey()\" [textParams]=\"errorParams()\"></solaris-field-error>\r\n  } @else {\r\n    <ng-content select=\"[form-field-message]\"></ng-content>\r\n  }\r\n\r\n  @if (hint || hintKey) {\r\n    <div class=\"solaris-form-field__hint\">\r\n      @if (hintKey) { {{ hintKey | translate }} }\r\n      @else { {{ hint }} }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".solaris-form-field{display:grid;gap:var(--solaris-space-2);--solaris-form-field-radius: var(--solaris-radius-sm);--solaris-form-field-bg: var(--solaris-color-surface-2);--solaris-form-field-border: var(--solaris-color-border);--solaris-form-field-border-hover: color-mix(in srgb, var(--solaris-color-border) 70%, var(--solaris-color-text-muted))}.solaris-form-field[data-radius=none]{--solaris-form-field-radius: var(--solaris-radius-none)}.solaris-form-field[data-radius=xs]{--solaris-form-field-radius: var(--solaris-radius-xs)}.solaris-form-field[data-radius=sm]{--solaris-form-field-radius: var(--solaris-radius-sm)}.solaris-form-field[data-radius=md]{--solaris-form-field-radius: var(--solaris-radius-md)}.solaris-form-field[data-radius=lg]{--solaris-form-field-radius: var(--solaris-radius-lg)}.solaris-form-field[data-radius=full]{--solaris-form-field-radius: var(--solaris-radius-full)}.solaris-form-field[data-appearance=outline]{--solaris-form-field-bg: transparent;--solaris-form-field-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-form-field-border-hover: color-mix(in srgb, var(--solaris-color-border) 65%, var(--solaris-color-text-muted))}.solaris-form-field__label{font-weight:600;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);margin-left:var(--solaris-space-1)}.solaris-form-field__frame{display:grid;min-height:3.8rem;align-items:stretch;grid-template-columns:1fr;background:var(--solaris-form-field-bg);border-radius:var(--solaris-form-field-radius);border:1px solid var(--solaris-form-field-border);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}.solaris-form-field--has-prefix .solaris-form-field__frame{grid-template-columns:3.8rem 1fr}.solaris-form-field__prefix{opacity:.5;display:grid;width:3.8rem;line-height:0;place-items:center;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);transition:opacity .3s ease,filter .3s ease;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-form-field__frame:hover .solaris-form-field__prefix,.solaris-form-field__frame:focus-within .solaris-form-field__prefix{opacity:1;filter:brightness(1.05)}.solaris-form-field__prefix :is(i,svg,[solarisPrefixIcon]){display:block;line-height:1}.solaris-form-field__prefix i.ph{opacity:.6;font-size:var(--solaris-fs-18)}.solaris-form-field__prefix svg{width:var(--solaris-fs-18);height:var(--solaris-fs-18)}.solaris-form-field__body{min-width:0;display:grid;padding-right:0;position:relative;align-items:center;padding-left:var(--solaris-space-3);grid-template-columns:minmax(0,1fr) auto}.solaris-form-field__control-slot{width:100%;min-width:0;display:flex;flex:1 1 auto;align-items:center}.solaris-form-field__control-slot>*{flex:1 1 0;width:100%;min-width:0}.solaris-form-field__control-slot :is(input,textarea){margin:0;border:0;width:100%;min-width:0;outline:none;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}.solaris-form-field__control-slot :is(input,textarea)::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-form-field__suffix{display:inline-flex;align-items:center;justify-content:center;padding-right:var(--solaris-space-3);gap:var(--solaris-space-2)}.solaris-form-field__suffix :is(button,a){height:3.6rem;align-self:stretch;align-items:center;display:inline-flex}.solaris-form-field__status{width:3.8rem;display:grid;opacity:.95;height:3.8rem;place-items:center;color:var(--solaris-color-error)}.solaris-form-field__status i.ph{line-height:1;font-size:var(--solaris-fs-18)}.solaris-form-field__hint{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]){opacity:.45}.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]) .solaris-form-field__prefix,.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]) :is(.solaris-form-field__label,.solaris-form-field__hint){color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:focus-visible){box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-primary) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame{box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-error) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame:focus-within{border-color:color-mix(in srgb,var(--solaris-color-error) 80%,var(--solaris-color-border));box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 16%,transparent)}.solaris-form-field[data-invalid=true] .solaris-form-field__prefix{border-right-color:color-mix(in srgb,var(--solaris-color-error) 30%,var(--solaris-color-border));color:color-mix(in srgb,var(--solaris-color-error) 75%,var(--solaris-color-text-muted))}.solaris-form-field[data-invalid=true] .solaris-form-field__control-slot :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--solaris-color-error) 45%,var(--solaris-color-text-muted))}.solaris-form-field__body:has(solaris-phone-input){padding-left:0}\n"], dependencies: [{ kind: "component", type: PasswordToggle, selector: "solaris-password-toggle" }, { kind: "component", type: FieldErrorComponent, selector: "solaris-field-error", inputs: ["text", "textKey", "textParams"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "prefix", first: true, predicate: SolarisPrefixDirective, descendants: true }, { propertyName: "suffix", first: true, predicate: SolarisSuffixDirective, descendants: true }], ngImport: i0, template: "<div class=\"solaris-form-field\" [class.solaris-form-field--has-prefix]=\"hasPrefix\" [attr.data-appearance]=\"appearance\"\r\n     [attr.data-invalid]=\"invalidComputed() ? 'true' : null\" [attr.data-radius]=\"radius\"\r\n     [attr.data-disabled]=\"disabledComputed() ? 'true' : null\">\r\n  @if ((label || labelKey)) {\r\n    <label class=\"solaris-form-field__label\">\r\n      @if (labelKey) { {{ labelKey | translate }} }\r\n      @else if (label) { {{ label }} }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"solaris-form-field__frame\">\r\n    @if (hasPrefix) {\r\n      <span class=\"solaris-form-field__prefix\" aria-hidden=\"true\">\r\n        <ng-content select=\"[solaris-prefix]\"></ng-content>\r\n      </span>\r\n    }\r\n\r\n    <div class=\"solaris-form-field__body\">\r\n      <div class=\"solaris-form-field__control-slot\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n\r\n      @if (hasSuffix || showPasswordToggle() || invalidComputed() || disabledComputed()) {\r\n        <span class=\"solaris-form-field__suffix\">\r\n          @if (disabledComputed()) {\r\n            <span class=\"solaris-form-field__status solaris-form-field__status--disabled\" aria-hidden=\"true\">\r\n              <i class=\"ph ph-lock-simple\"></i>\r\n            </span>\r\n          } @else {\r\n            <ng-content select=\"[solaris-suffix]\"></ng-content>\r\n\r\n            @if (showPasswordToggle()) {\r\n              <solaris-password-toggle></solaris-password-toggle>\r\n            }\r\n\r\n            @if (invalidComputed()) {\r\n              <span class=\"solaris-form-field__status\" aria-hidden=\"true\">\r\n                <i class=\"ph ph-warning-circle\"></i>\r\n              </span>\r\n            }\r\n          }\r\n        </span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (errorKey()) {\r\n    <solaris-field-error [textKey]=\"errorKey()\" [textParams]=\"errorParams()\"></solaris-field-error>\r\n  } @else {\r\n    <ng-content select=\"[form-field-message]\"></ng-content>\r\n  }\r\n\r\n  @if (hint || hintKey) {\r\n    <div class=\"solaris-form-field__hint\">\r\n      @if (hintKey) { {{ hintKey | translate }} }\r\n      @else { {{ hint }} }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".solaris-form-field{display:grid;gap:var(--solaris-space-2);--solaris-form-field-radius: var(--solaris-radius-sm);--solaris-form-field-bg: var(--solaris-color-surface-2);--solaris-form-field-border: var(--solaris-color-border);--solaris-form-field-border-hover: color-mix(in srgb, var(--solaris-color-border) 70%, var(--solaris-color-text-muted))}.solaris-form-field[data-radius=none]{--solaris-form-field-radius: var(--solaris-radius-none)}.solaris-form-field[data-radius=xs]{--solaris-form-field-radius: var(--solaris-radius-xs)}.solaris-form-field[data-radius=sm]{--solaris-form-field-radius: var(--solaris-radius-sm)}.solaris-form-field[data-radius=md]{--solaris-form-field-radius: var(--solaris-radius-md)}.solaris-form-field[data-radius=lg]{--solaris-form-field-radius: var(--solaris-radius-lg)}.solaris-form-field[data-radius=full]{--solaris-form-field-radius: var(--solaris-radius-full)}.solaris-form-field[data-appearance=outline]{--solaris-form-field-bg: transparent;--solaris-form-field-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-form-field-border-hover: color-mix(in srgb, var(--solaris-color-border) 65%, var(--solaris-color-text-muted))}.solaris-form-field__label{font-weight:600;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);margin-left:var(--solaris-space-1)}.solaris-form-field__frame{display:grid;min-height:3.8rem;align-items:stretch;grid-template-columns:1fr;background:var(--solaris-form-field-bg);border-radius:var(--solaris-form-field-radius);border:1px solid var(--solaris-form-field-border);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}.solaris-form-field--has-prefix .solaris-form-field__frame{grid-template-columns:3.8rem 1fr}.solaris-form-field__prefix{opacity:.5;display:grid;width:3.8rem;line-height:0;place-items:center;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);transition:opacity .3s ease,filter .3s ease;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-form-field__frame:hover .solaris-form-field__prefix,.solaris-form-field__frame:focus-within .solaris-form-field__prefix{opacity:1;filter:brightness(1.05)}.solaris-form-field__prefix :is(i,svg,[solarisPrefixIcon]){display:block;line-height:1}.solaris-form-field__prefix i.ph{opacity:.6;font-size:var(--solaris-fs-18)}.solaris-form-field__prefix svg{width:var(--solaris-fs-18);height:var(--solaris-fs-18)}.solaris-form-field__body{min-width:0;display:grid;padding-right:0;position:relative;align-items:center;padding-left:var(--solaris-space-3);grid-template-columns:minmax(0,1fr) auto}.solaris-form-field__control-slot{width:100%;min-width:0;display:flex;flex:1 1 auto;align-items:center}.solaris-form-field__control-slot>*{flex:1 1 0;width:100%;min-width:0}.solaris-form-field__control-slot :is(input,textarea){margin:0;border:0;width:100%;min-width:0;outline:none;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}.solaris-form-field__control-slot :is(input,textarea)::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-form-field__suffix{display:inline-flex;align-items:center;justify-content:center;padding-right:var(--solaris-space-3);gap:var(--solaris-space-2)}.solaris-form-field__suffix :is(button,a){height:3.6rem;align-self:stretch;align-items:center;display:inline-flex}.solaris-form-field__status{width:3.8rem;display:grid;opacity:.95;height:3.8rem;place-items:center;color:var(--solaris-color-error)}.solaris-form-field__status i.ph{line-height:1;font-size:var(--solaris-fs-18)}.solaris-form-field__hint{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:focus-visible){box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-primary) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame{box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-error) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame:focus-within{border-color:color-mix(in srgb,var(--solaris-color-error) 80%,var(--solaris-color-border));box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 16%,transparent)}.solaris-form-field[data-invalid=true] .solaris-form-field__prefix{border-right-color:color-mix(in srgb,var(--solaris-color-error) 30%,var(--solaris-color-border));color:color-mix(in srgb,var(--solaris-color-error) 75%,var(--solaris-color-text-muted))}.solaris-form-field[data-invalid=true] .solaris-form-field__control-slot :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--solaris-color-error) 45%,var(--solaris-color-text-muted))}.solaris-form-field__body:has(solaris-phone-input){padding-left:0}.solaris-form-field[data-disabled=true] .solaris-form-field__frame{opacity:.45;cursor:not-allowed}.solaris-form-field[data-disabled=true] .solaris-form-field__frame *,.solaris-form-field[data-disabled=true] .solaris-form-field__label,.solaris-form-field[data-disabled=true] .solaris-form-field__hint{cursor:not-allowed}.solaris-form-field[data-disabled=true] .solaris-form-field__prefix,.solaris-form-field[data-disabled=true] .solaris-form-field__suffix,.solaris-form-field[data-disabled=true] .solaris-form-field__label,.solaris-form-field[data-disabled=true] .solaris-form-field__hint{color:var(--solaris-color-text-muted)}.solaris-form-field__status--disabled{opacity:.9;width:3.8rem;display:grid;height:3.8rem;place-items:center;color:var(--solaris-color-text-muted)}.solaris-form-field__status--disabled i{line-height:1;font-size:var(--solaris-fs-18)}\n"], dependencies: [{ kind: "component", type: PasswordToggle, selector: "solaris-password-toggle" }, { kind: "component", type: FieldErrorComponent, selector: "solaris-field-error", inputs: ["text", "textKey", "textParams"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormField, decorators: [{
             type: Component,
             args: [{ selector: 'solaris-form-field', standalone: true, imports: [PasswordToggle, FieldErrorComponent, SolarisTranslationPipe], providers: [
                         SolarisFormFieldController,
                         { provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-form-field\" [class.solaris-form-field--has-prefix]=\"hasPrefix\" [attr.data-appearance]=\"appearance\"\r\n     [attr.data-invalid]=\"invalidComputed() ? 'true' : null\" [attr.data-radius]=\"radius\">\r\n  @if ((label || labelKey)) {\r\n    <label class=\"solaris-form-field__label\">\r\n      @if (labelKey) { {{ labelKey | translate }} }\r\n      @else if (label) { {{ label }} }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"solaris-form-field__frame\">\r\n    @if (hasPrefix) {\r\n      <span class=\"solaris-form-field__prefix\" aria-hidden=\"true\">\r\n        <ng-content select=\"[solaris-prefix]\"></ng-content>\r\n      </span>\r\n    }\r\n\r\n    <div class=\"solaris-form-field__body\">\r\n      <div class=\"solaris-form-field__control-slot\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n\r\n      @if (hasSuffix || showPasswordToggle() || invalidComputed()) {\r\n        <span class=\"solaris-form-field__suffix\">\r\n          <ng-content select=\"[solaris-suffix]\"></ng-content>\r\n\r\n          @if (showPasswordToggle()) {\r\n            <solaris-password-toggle></solaris-password-toggle>\r\n          }\r\n\r\n          @if (invalidComputed()) {\r\n            <span class=\"solaris-form-field__status\" aria-hidden=\"true\">\r\n              <i class=\"ph ph-warning-circle\"></i>\r\n            </span>\r\n          }\r\n        </span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (errorKey()) {\r\n    <solaris-field-error [textKey]=\"errorKey()\" [textParams]=\"errorParams()\"></solaris-field-error>\r\n  } @else {\r\n    <ng-content select=\"[form-field-message]\"></ng-content>\r\n  }\r\n\r\n  @if (hint || hintKey) {\r\n    <div class=\"solaris-form-field__hint\">\r\n      @if (hintKey) { {{ hintKey | translate }} }\r\n      @else { {{ hint }} }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".solaris-form-field{display:grid;gap:var(--solaris-space-2);--solaris-form-field-radius: var(--solaris-radius-sm);--solaris-form-field-bg: var(--solaris-color-surface-2);--solaris-form-field-border: var(--solaris-color-border);--solaris-form-field-border-hover: color-mix(in srgb, var(--solaris-color-border) 70%, var(--solaris-color-text-muted))}.solaris-form-field[data-radius=none]{--solaris-form-field-radius: var(--solaris-radius-none)}.solaris-form-field[data-radius=xs]{--solaris-form-field-radius: var(--solaris-radius-xs)}.solaris-form-field[data-radius=sm]{--solaris-form-field-radius: var(--solaris-radius-sm)}.solaris-form-field[data-radius=md]{--solaris-form-field-radius: var(--solaris-radius-md)}.solaris-form-field[data-radius=lg]{--solaris-form-field-radius: var(--solaris-radius-lg)}.solaris-form-field[data-radius=full]{--solaris-form-field-radius: var(--solaris-radius-full)}.solaris-form-field[data-appearance=outline]{--solaris-form-field-bg: transparent;--solaris-form-field-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-form-field-border-hover: color-mix(in srgb, var(--solaris-color-border) 65%, var(--solaris-color-text-muted))}.solaris-form-field__label{font-weight:600;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);margin-left:var(--solaris-space-1)}.solaris-form-field__frame{display:grid;min-height:3.8rem;align-items:stretch;grid-template-columns:1fr;background:var(--solaris-form-field-bg);border-radius:var(--solaris-form-field-radius);border:1px solid var(--solaris-form-field-border);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}.solaris-form-field--has-prefix .solaris-form-field__frame{grid-template-columns:3.8rem 1fr}.solaris-form-field__prefix{opacity:.5;display:grid;width:3.8rem;line-height:0;place-items:center;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);transition:opacity .3s ease,filter .3s ease;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-form-field__frame:hover .solaris-form-field__prefix,.solaris-form-field__frame:focus-within .solaris-form-field__prefix{opacity:1;filter:brightness(1.05)}.solaris-form-field__prefix :is(i,svg,[solarisPrefixIcon]){display:block;line-height:1}.solaris-form-field__prefix i.ph{opacity:.6;font-size:var(--solaris-fs-18)}.solaris-form-field__prefix svg{width:var(--solaris-fs-18);height:var(--solaris-fs-18)}.solaris-form-field__body{min-width:0;display:grid;padding-right:0;position:relative;align-items:center;padding-left:var(--solaris-space-3);grid-template-columns:minmax(0,1fr) auto}.solaris-form-field__control-slot{width:100%;min-width:0;display:flex;flex:1 1 auto;align-items:center}.solaris-form-field__control-slot>*{flex:1 1 0;width:100%;min-width:0}.solaris-form-field__control-slot :is(input,textarea){margin:0;border:0;width:100%;min-width:0;outline:none;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}.solaris-form-field__control-slot :is(input,textarea)::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-form-field__suffix{display:inline-flex;align-items:center;justify-content:center;padding-right:var(--solaris-space-3);gap:var(--solaris-space-2)}.solaris-form-field__suffix :is(button,a){height:3.6rem;align-self:stretch;align-items:center;display:inline-flex}.solaris-form-field__status{width:3.8rem;display:grid;opacity:.95;height:3.8rem;place-items:center;color:var(--solaris-color-error)}.solaris-form-field__status i.ph{line-height:1;font-size:var(--solaris-fs-18)}.solaris-form-field__hint{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]){opacity:.45}.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]) .solaris-form-field__prefix,.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]) :is(.solaris-form-field__label,.solaris-form-field__hint){color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:focus-visible){box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-primary) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame{box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-error) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame:focus-within{border-color:color-mix(in srgb,var(--solaris-color-error) 80%,var(--solaris-color-border));box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 16%,transparent)}.solaris-form-field[data-invalid=true] .solaris-form-field__prefix{border-right-color:color-mix(in srgb,var(--solaris-color-error) 30%,var(--solaris-color-border));color:color-mix(in srgb,var(--solaris-color-error) 75%,var(--solaris-color-text-muted))}.solaris-form-field[data-invalid=true] .solaris-form-field__control-slot :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--solaris-color-error) 45%,var(--solaris-color-text-muted))}.solaris-form-field__body:has(solaris-phone-input){padding-left:0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-form-field\" [class.solaris-form-field--has-prefix]=\"hasPrefix\" [attr.data-appearance]=\"appearance\"\r\n     [attr.data-invalid]=\"invalidComputed() ? 'true' : null\" [attr.data-radius]=\"radius\"\r\n     [attr.data-disabled]=\"disabledComputed() ? 'true' : null\">\r\n  @if ((label || labelKey)) {\r\n    <label class=\"solaris-form-field__label\">\r\n      @if (labelKey) { {{ labelKey | translate }} }\r\n      @else if (label) { {{ label }} }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"solaris-form-field__frame\">\r\n    @if (hasPrefix) {\r\n      <span class=\"solaris-form-field__prefix\" aria-hidden=\"true\">\r\n        <ng-content select=\"[solaris-prefix]\"></ng-content>\r\n      </span>\r\n    }\r\n\r\n    <div class=\"solaris-form-field__body\">\r\n      <div class=\"solaris-form-field__control-slot\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n\r\n      @if (hasSuffix || showPasswordToggle() || invalidComputed() || disabledComputed()) {\r\n        <span class=\"solaris-form-field__suffix\">\r\n          @if (disabledComputed()) {\r\n            <span class=\"solaris-form-field__status solaris-form-field__status--disabled\" aria-hidden=\"true\">\r\n              <i class=\"ph ph-lock-simple\"></i>\r\n            </span>\r\n          } @else {\r\n            <ng-content select=\"[solaris-suffix]\"></ng-content>\r\n\r\n            @if (showPasswordToggle()) {\r\n              <solaris-password-toggle></solaris-password-toggle>\r\n            }\r\n\r\n            @if (invalidComputed()) {\r\n              <span class=\"solaris-form-field__status\" aria-hidden=\"true\">\r\n                <i class=\"ph ph-warning-circle\"></i>\r\n              </span>\r\n            }\r\n          }\r\n        </span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (errorKey()) {\r\n    <solaris-field-error [textKey]=\"errorKey()\" [textParams]=\"errorParams()\"></solaris-field-error>\r\n  } @else {\r\n    <ng-content select=\"[form-field-message]\"></ng-content>\r\n  }\r\n\r\n  @if (hint || hintKey) {\r\n    <div class=\"solaris-form-field__hint\">\r\n      @if (hintKey) { {{ hintKey | translate }} }\r\n      @else { {{ hint }} }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".solaris-form-field{display:grid;gap:var(--solaris-space-2);--solaris-form-field-radius: var(--solaris-radius-sm);--solaris-form-field-bg: var(--solaris-color-surface-2);--solaris-form-field-border: var(--solaris-color-border);--solaris-form-field-border-hover: color-mix(in srgb, var(--solaris-color-border) 70%, var(--solaris-color-text-muted))}.solaris-form-field[data-radius=none]{--solaris-form-field-radius: var(--solaris-radius-none)}.solaris-form-field[data-radius=xs]{--solaris-form-field-radius: var(--solaris-radius-xs)}.solaris-form-field[data-radius=sm]{--solaris-form-field-radius: var(--solaris-radius-sm)}.solaris-form-field[data-radius=md]{--solaris-form-field-radius: var(--solaris-radius-md)}.solaris-form-field[data-radius=lg]{--solaris-form-field-radius: var(--solaris-radius-lg)}.solaris-form-field[data-radius=full]{--solaris-form-field-radius: var(--solaris-radius-full)}.solaris-form-field[data-appearance=outline]{--solaris-form-field-bg: transparent;--solaris-form-field-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-form-field-border-hover: color-mix(in srgb, var(--solaris-color-border) 65%, var(--solaris-color-text-muted))}.solaris-form-field__label{font-weight:600;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);margin-left:var(--solaris-space-1)}.solaris-form-field__frame{display:grid;min-height:3.8rem;align-items:stretch;grid-template-columns:1fr;background:var(--solaris-form-field-bg);border-radius:var(--solaris-form-field-radius);border:1px solid var(--solaris-form-field-border);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}.solaris-form-field--has-prefix .solaris-form-field__frame{grid-template-columns:3.8rem 1fr}.solaris-form-field__prefix{opacity:.5;display:grid;width:3.8rem;line-height:0;place-items:center;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);transition:opacity .3s ease,filter .3s ease;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-form-field__frame:hover .solaris-form-field__prefix,.solaris-form-field__frame:focus-within .solaris-form-field__prefix{opacity:1;filter:brightness(1.05)}.solaris-form-field__prefix :is(i,svg,[solarisPrefixIcon]){display:block;line-height:1}.solaris-form-field__prefix i.ph{opacity:.6;font-size:var(--solaris-fs-18)}.solaris-form-field__prefix svg{width:var(--solaris-fs-18);height:var(--solaris-fs-18)}.solaris-form-field__body{min-width:0;display:grid;padding-right:0;position:relative;align-items:center;padding-left:var(--solaris-space-3);grid-template-columns:minmax(0,1fr) auto}.solaris-form-field__control-slot{width:100%;min-width:0;display:flex;flex:1 1 auto;align-items:center}.solaris-form-field__control-slot>*{flex:1 1 0;width:100%;min-width:0}.solaris-form-field__control-slot :is(input,textarea){margin:0;border:0;width:100%;min-width:0;outline:none;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}.solaris-form-field__control-slot :is(input,textarea)::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-form-field__suffix{display:inline-flex;align-items:center;justify-content:center;padding-right:var(--solaris-space-3);gap:var(--solaris-space-2)}.solaris-form-field__suffix :is(button,a){height:3.6rem;align-self:stretch;align-items:center;display:inline-flex}.solaris-form-field__status{width:3.8rem;display:grid;opacity:.95;height:3.8rem;place-items:center;color:var(--solaris-color-error)}.solaris-form-field__status i.ph{line-height:1;font-size:var(--solaris-fs-18)}.solaris-form-field__hint{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:focus-visible){box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-primary) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame{box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-error) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame:focus-within{border-color:color-mix(in srgb,var(--solaris-color-error) 80%,var(--solaris-color-border));box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 16%,transparent)}.solaris-form-field[data-invalid=true] .solaris-form-field__prefix{border-right-color:color-mix(in srgb,var(--solaris-color-error) 30%,var(--solaris-color-border));color:color-mix(in srgb,var(--solaris-color-error) 75%,var(--solaris-color-text-muted))}.solaris-form-field[data-invalid=true] .solaris-form-field__control-slot :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--solaris-color-error) 45%,var(--solaris-color-text-muted))}.solaris-form-field__body:has(solaris-phone-input){padding-left:0}.solaris-form-field[data-disabled=true] .solaris-form-field__frame{opacity:.45;cursor:not-allowed}.solaris-form-field[data-disabled=true] .solaris-form-field__frame *,.solaris-form-field[data-disabled=true] .solaris-form-field__label,.solaris-form-field[data-disabled=true] .solaris-form-field__hint{cursor:not-allowed}.solaris-form-field[data-disabled=true] .solaris-form-field__prefix,.solaris-form-field[data-disabled=true] .solaris-form-field__suffix,.solaris-form-field[data-disabled=true] .solaris-form-field__label,.solaris-form-field[data-disabled=true] .solaris-form-field__hint{color:var(--solaris-color-text-muted)}.solaris-form-field__status--disabled{opacity:.9;width:3.8rem;display:grid;height:3.8rem;place-items:center;color:var(--solaris-color-text-muted)}.solaris-form-field__status--disabled i{line-height:1;font-size:var(--solaris-fs-18)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { prefix: [{
                 type: ContentChild,
                 args: [SolarisPrefixDirective]
@@ -4581,16 +4586,16 @@ class SolarisSelect {
     get dataCompact() {
         return this.compactInput() ? 'true' : null;
     }
+    get dataMultiple() {
+        return this.multiple ? 'true' : 'false';
+    }
     _rootNodes = signal([], ...(ngDevMode ? [{ debugName: "_rootNodes" }] : []));
     set items(v) {
-        console.count('[Select] items setter');
-        console.log('[Select] items length:', (v ?? []).length);
         this._rootNodes.set(v ?? []);
         this.resetStack();
         const cur = this._value();
         const next = this.sanitizeValue(cur);
         const changed = !this.sameCvaValue(cur, next);
-        console.log('[Select] sanitize changed?', changed, 'cur:', cur, 'next:', next);
         if (changed)
             this._value.set(next);
     }
@@ -4667,13 +4672,24 @@ class SolarisSelect {
         const row = this.itemRows()[idx];
         return row?.id ?? null;
     }, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : []));
-    inputPlaceholder = computed(() => {
+    inputPlaceholderKey = computed(() => {
         if (this.selectedCount() > 0)
             return '';
         if (this.searchTerm().length > 0)
             return '';
-        return this.searchPlaceholder || 'Search...';
-    }, ...(ngDevMode ? [{ debugName: "inputPlaceholder" }] : []));
+        return this.open() && this.searchable
+            ? (this.searchPlaceholderKey || this.placeholderKey || '')
+            : (this.placeholderKey || '');
+    }, ...(ngDevMode ? [{ debugName: "inputPlaceholderKey" }] : []));
+    inputPlaceholderText = computed(() => {
+        if (this.selectedCount() > 0)
+            return '';
+        if (this.searchTerm().length > 0)
+            return '';
+        return this.open() && this.searchable
+            ? (this.searchPlaceholder || this.placeholder || 'Search...')
+            : (this.placeholder || '');
+    }, ...(ngDevMode ? [{ debugName: "inputPlaceholderText" }] : []));
     _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
     selectedItems = computed(() => {
         const all = [];
@@ -4979,10 +4995,14 @@ class SolarisSelect {
         else
             arr.push(value);
         this.setValue(arr);
+        this.searchTerm.set('');
+        this.activeIndex.set(0);
+        this.scheduleFocusTrigger();
     }
     selectSingle(value) {
         if (this.multiple)
             return;
+        this.searchTerm.set('');
         this.setValue(value);
         this.open.set(false);
     }
@@ -4993,10 +5013,16 @@ class SolarisSelect {
             this.enterChildren(item);
             return;
         }
-        if (this.multiple)
+        if (this.multiple) {
             this.toggleItem(item.value);
-        else
+            this.searchTerm.set('');
+            this.activeIndex.set(0);
+            this.scheduleFocusTrigger();
+        }
+        else {
+            this.searchTerm.set('');
             this.selectSingle(item.value);
+        }
     }
     openFromTrigger() {
         if (this.disabled)
@@ -5206,7 +5232,7 @@ class SolarisSelect {
     }
     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" } }, 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]=\"inputPlaceholder()\" (focus)=\"openFromTrigger()\" (input)=\"onTriggerInput(triggerInput.value)\"\r\n      [value]=\"triggerValue()\" (keydown)=\"onTriggerKeydown($event)\"/>\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:1px;outline:none;min-width:6rem;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{transform:rotate(180deg);opacity:.95}.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,
@@ -5216,7 +5242,7 @@ 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]=\"inputPlaceholder()\" (focus)=\"openFromTrigger()\" (input)=\"onTriggerInput(triggerInput.value)\"\r\n      [value]=\"triggerValue()\" (keydown)=\"onTriggerKeydown($event)\"/>\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:1px;outline:none;min-width:6rem;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{transform:rotate(180deg);opacity:.95}.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: [{
@@ -5237,6 +5263,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             }], dataCompact: [{
                 type: HostBinding,
                 args: ['attr.data-compact']
+            }], dataMultiple: [{
+                type: HostBinding,
+                args: ['attr.data-multiple']
             }], items: [{
                 type: Input
             }], multiple: [{