@educarehq/solaris-ui 0.1.0 → 0.2.0

package/esm2022/lib/components/forms/multi-select/component/multi-select.component.js

@@ -0,0 +1,1119 @@
+import { Component, input, computed, signal, output, effect, forwardRef, inject, ContentChildren, ElementRef, ViewChild, DestroyRef, isDevMode, } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SolarisFormControl } from '../../form-field/model/form-control.contract';
+import { SolarisFormFieldComponent } from '../../form-field/component/form-field.component';
+import { SolarisFormFieldTriggerDirective } from '../../form-field/directives/form-field-trigger.directive';
+import { SolarisFormPrefixDirective } from '../../form-field/directives/form-prefix.directive';
+import { SolarisFormSuffixDirective } from '../../form-field/directives/form-suffix.directive';
+import { SolarisTranslateService } from '../../../../services/translation';
+import { SolarisOptionComponent } from '../../option';
+import { SolarisOptionGroupComponent } from '../../option-group';
+import { SolarisIconComponent } from '../../../icon';
+import { SolarisPopoverDirective, SolarisPopoverTriggerDirective, } from '../../../interaction/popover';
+import { SolarisTooltipDirective } from '../../../interaction/tooltip';
+import * as i0 from "@angular/core";
+let nextId = 0;
+function generateId() {
+    return `solaris-multi-select-${++nextId}`;
+}
+function normalizeArray(value) {
+    if (value === null || value === undefined)
+        return [];
+    if (Array.isArray(value))
+        return value;
+    return [];
+}
+export class SolarisMultiSelectComponent extends SolarisFormControl {
+    elementRef = inject(ElementRef);
+    translateService = inject(SolarisTranslateService);
+    parentFormField = inject(SolarisFormFieldComponent, {
+        optional: true,
+    });
+    popoverTrigger;
+    searchInputRef;
+    triggerElement;
+    formFieldElement;
+    options;
+    optionGroups;
+    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
+    hintKey = input(...(ngDevMode ? [undefined, { debugName: "hintKey" }] : /* istanbul ignore next */ []));
+    labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
+    errorKey = input(...(ngDevMode ? [undefined, { debugName: "errorKey" }] : /* istanbul ignore next */ []));
+    emptyText = input(...(ngDevMode ? [undefined, { debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    loadingText = input(...(ngDevMode ? [undefined, { debugName: "loadingText" }] : /* istanbul ignore next */ []));
+    emptyTextKey = input(...(ngDevMode ? [undefined, { debugName: "emptyTextKey" }] : /* istanbul ignore next */ []));
+    ariaLabelKey = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelKey" }] : /* istanbul ignore next */ []));
+    placeholderKey = input(...(ngDevMode ? [undefined, { debugName: "placeholderKey" }] : /* istanbul ignore next */ []));
+    loadingTextKey = input(...(ngDevMode ? [undefined, { debugName: "loadingTextKey" }] : /* istanbul ignore next */ []));
+    ariaLabelledby = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    clearLabel = input(...(ngDevMode ? [undefined, { debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    clearLabelKey = input(...(ngDevMode ? [undefined, { debugName: "clearLabelKey" }] : /* istanbul ignore next */ []));
+    removeChipLabel = input(...(ngDevMode ? [undefined, { debugName: "removeChipLabel" }] : /* istanbul ignore next */ []));
+    removeChipLabelKey = input(...(ngDevMode ? [undefined, { debugName: "removeChipLabelKey" }] : /* istanbul ignore next */ []));
+    noResultsText = input(...(ngDevMode ? [undefined, { debugName: "noResultsText" }] : /* istanbul ignore next */ []));
+    noResultsTextKey = input(...(ngDevMode ? [undefined, { debugName: "noResultsTextKey" }] : /* istanbul ignore next */ []));
+    value = input([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    searchPlaceholderKey = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholderKey" }] : /* istanbul ignore next */ []));
+    panelMinWidth = input(...(ngDevMode ? [undefined, { debugName: "panelMinWidth" }] : /* istanbul ignore next */ []));
+    panelMaxWidth = input(...(ngDevMode ? [undefined, { debugName: "panelMaxWidth" }] : /* istanbul ignore next */ []));
+    density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    panelMatchTriggerWidth = input(true, ...(ngDevMode ? [{ debugName: "panelMatchTriggerWidth" }] : /* istanbul ignore next */ []));
+    radius = input('md', ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+    readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly' });
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required' });
+    panelMaxHeight = input('20rem', ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    displayWith = input(...(ngDevMode ? [undefined, { debugName: "displayWith" }] : /* istanbul ignore next */ []));
+    appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    compareWith = input(Object.is, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    manualInvalid = input(undefined, { ...(ngDevMode ? { debugName: "manualInvalid" } : /* istanbul ignore next */ {}), alias: 'invalid' });
+    selectAll = input(false, ...(ngDevMode ? [{ debugName: "selectAll" }] : /* istanbul ignore next */ []));
+    selectAllLabel = input(...(ngDevMode ? [undefined, { debugName: "selectAllLabel" }] : /* istanbul ignore next */ []));
+    selectAllLabelKey = input(...(ngDevMode ? [undefined, { debugName: "selectAllLabelKey" }] : /* istanbul ignore next */ []));
+    displayMode = input('auto', ...(ngDevMode ? [{ debugName: "displayMode" }] : /* istanbul ignore next */ []));
+    maxVisibleChips = input(3, ...(ngDevMode ? [{ debugName: "maxVisibleChips" }] : /* istanbul ignore next */ []));
+    selectedCountLabel = input(...(ngDevMode ? [undefined, { debugName: "selectedCountLabel" }] : /* istanbul ignore next */ []));
+    selectedCountLabelKey = input(...(ngDevMode ? [undefined, { debugName: "selectedCountLabelKey" }] : /* istanbul ignore next */ []));
+    overflowLabel = input(...(ngDevMode ? [undefined, { debugName: "overflowLabel" }] : /* istanbul ignore next */ []));
+    overflowLabelKey = input(...(ngDevMode ? [undefined, { debugName: "overflowLabelKey" }] : /* istanbul ignore next */ []));
+    minSelected = input(undefined, ...(ngDevMode ? [{ debugName: "minSelected" }] : /* istanbul ignore next */ []));
+    maxSelected = input(undefined, ...(ngDevMode ? [{ debugName: "maxSelected" }] : /* istanbul ignore next */ []));
+    showSelectionTooltip = input(false, ...(ngDevMode ? [{ debugName: "showSelectionTooltip" }] : /* istanbul ignore next */ []));
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    opened = output();
+    closed = output();
+    cleared = output();
+    openChange = output();
+    searchChange = output();
+    valueChange = output();
+    selectionChange = output();
+    panelId = `solaris-multi-select-panel-${generateId()}`;
+    panelOpen = signal(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
+    internalValue = signal([], ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    internalFocused = signal(false, ...(ngDevMode ? [{ debugName: "internalFocused" }] : /* istanbul ignore next */ []));
+    internalDisabled = signal(false, ...(ngDevMode ? [{ debugName: "internalDisabled" }] : /* istanbul ignore next */ []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    activeOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeOptionIndex" }] : /* istanbul ignore next */ []));
+    touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    optionsInitialized = signal(false, ...(ngDevMode ? [{ debugName: "optionsInitialized" }] : /* istanbul ignore next */ []));
+    triggerContentRef;
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    optionsSubscription;
+    optionInteractionSubscriptions = [];
+    popoverSubscriptions = [];
+    triggerWidth = signal(0, ...(ngDevMode ? [{ debugName: "triggerWidth" }] : /* istanbul ignore next */ []));
+    resizeObserver = null;
+    destroyRef = inject(DestroyRef);
+    elementId = computed(() => {
+        // SECURITY_EXCEPTION: nativeElement.getAttribute('id') is standard DOM API to check existing ID before generating one. Same approach used by Solaris Select and Option.
+        const existing = this.elementRef.nativeElement.getAttribute('id');
+        return existing ?? generateId();
+    }, ...(ngDevMode ? [{ debugName: "elementId" }] : /* istanbul ignore next */ []));
+    effectiveDensity = computed(() => {
+        return this.density() ?? 'comfortable';
+    }, ...(ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []));
+    isEffectivelyDisabled = computed(() => {
+        return this.disabledInput() || this.internalDisabled();
+    }, ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
+    isEffectivelyReadonly = computed(() => {
+        return this.readonlyInput();
+    }, ...(ngDevMode ? [{ debugName: "isEffectivelyReadonly" }] : /* istanbul ignore next */ []));
+    isEffectivelyInvalid = computed(() => {
+        const manual = this.manualInvalid();
+        if (manual !== undefined) {
+            return manual;
+        }
+        if (this.touched()) {
+            const min = this.minSelected();
+            const max = this.maxSelected();
+            const count = this.internalValue().length;
+            if (min !== undefined && count < min)
+                return true;
+            if (max !== undefined && count > max)
+                return true;
+            if (this.requiredInput() && !this.hasValue())
+                return true;
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "isEffectivelyInvalid" }] : /* istanbul ignore next */ []));
+    popoverAppearance = computed(() => {
+        const a = this.appearance();
+        return a === 'filled' ? 'surface' : a;
+    }, ...(ngDevMode ? [{ debugName: "popoverAppearance" }] : /* istanbul ignore next */ []));
+    canOpen = computed(() => {
+        return !this.isEffectivelyDisabled() && !this.isEffectivelyReadonly();
+    }, ...(ngDevMode ? [{ debugName: "canOpen" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => {
+        return this.internalValue().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    canClear = computed(() => {
+        return (this.clearable() &&
+            this.hasValue() &&
+            !this.isEffectivelyDisabled() &&
+            !this.isEffectivelyReadonly());
+    }, ...(ngDevMode ? [{ debugName: "canClear" }] : /* istanbul ignore next */ []));
+    selectedOptions = computed(() => {
+        const value = this.internalValue();
+        const comp = this.compareWith();
+        const opts = this.options;
+        if (!opts || value.length === 0) {
+            return [];
+        }
+        return opts.filter((opt) => value.some((v) => comp(opt.value(), v)));
+    }, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    selectedCount = computed(() => {
+        return this.internalValue().length;
+    }, ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
+    selectedLabels = computed(() => {
+        const dw = this.displayWith();
+        const selected = this.selectedOptions();
+        return selected
+            .map((opt) => {
+            if (dw) {
+                const result = dw(opt.value());
+                if (result !== undefined)
+                    return result;
+            }
+            const label = opt.labelText();
+            if (label)
+                return label;
+            const native = this.getOptionNativeText(opt);
+            if (native)
+                return native;
+            return '';
+        })
+            .filter(Boolean);
+    }, ...(ngDevMode ? [{ debugName: "selectedLabels" }] : /* istanbul ignore next */ []));
+    summaryText = computed(() => {
+        const count = this.selectedCount();
+        if (count === 0)
+            return '';
+        const key = this.selectedCountLabelKey();
+        if (key) {
+            return this.translateService.translate(key, { count: String(count) });
+        }
+        const text = this.selectedCountLabel();
+        if (text)
+            return text;
+        if (count === 1) {
+            return this.translateService.translate('solaris.multiSelect.selectedCount.singular', { count: '1' });
+        }
+        return this.translateService.translate('solaris.multiSelect.selectedCount.plural', { count: String(count) });
+    }, ...(ngDevMode ? [{ debugName: "summaryText" }] : /* istanbul ignore next */ []));
+    availableContentWidth = computed(() => {
+        const tw = this.triggerWidth();
+        if (tw <= 0)
+            return 0;
+        const searchWidth = this.searchable() && this.panelOpen() ? 80 : 0;
+        return Math.max(0, tw - searchWidth);
+    }, ...(ngDevMode ? [{ debugName: "availableContentWidth" }] : /* istanbul ignore next */ []));
+    autoChipCount = computed(() => {
+        if (this.displayMode() !== 'auto')
+            return 0;
+        const selected = this.selectedOptions();
+        if (selected.length === 0)
+            return 0;
+        const avail = this.availableContentWidth();
+        if (avail <= 0)
+            return 0;
+        let remaining = avail;
+        let count = 0;
+        for (const opt of selected) {
+            const label = this.getOptionDisplayLabel(opt);
+            const canRemove = !this.isEffectivelyDisabled() && !this.isEffectivelyReadonly();
+            const labelWidth = label.length * 9;
+            const chipPaddingX = 16;
+            const removeWidth = canRemove ? 20 : 0;
+            const chipWidth = labelWidth + chipPaddingX + removeWidth + 4;
+            if (chipWidth <= remaining) {
+                remaining -= chipWidth;
+                count++;
+            }
+            else {
+                break;
+            }
+        }
+        return count;
+    }, ...(ngDevMode ? [{ debugName: "autoChipCount" }] : /* istanbul ignore next */ []));
+    autoOverflowCount = computed(() => {
+        return Math.max(0, this.selectedOptions().length - this.autoChipCount());
+    }, ...(ngDevMode ? [{ debugName: "autoOverflowCount" }] : /* istanbul ignore next */ []));
+    autoShowOverflow = computed(() => {
+        return this.autoOverflowCount() > 0;
+    }, ...(ngDevMode ? [{ debugName: "autoShowOverflow" }] : /* istanbul ignore next */ []));
+    showCountOnly = computed(() => {
+        return (this.displayMode() === 'auto' &&
+            this.autoChipCount() === 0 &&
+            this.selectedCount() > 0);
+    }, ...(ngDevMode ? [{ debugName: "showCountOnly" }] : /* istanbul ignore next */ []));
+    autoVisibleChips = computed(() => {
+        return this.selectedOptions().slice(0, this.autoChipCount());
+    }, ...(ngDevMode ? [{ debugName: "autoVisibleChips" }] : /* istanbul ignore next */ []));
+    autoOverflowTooltipText = computed(() => {
+        const selected = this.selectedOptions();
+        const count = this.autoChipCount();
+        return selected
+            .slice(count)
+            .map((opt) => this.getOptionDisplayLabel(opt))
+            .join(', ');
+    }, ...(ngDevMode ? [{ debugName: "autoOverflowTooltipText" }] : /* istanbul ignore next */ []));
+    countTooltipText = computed(() => {
+        return this.selectedLabels().join(', ');
+    }, ...(ngDevMode ? [{ debugName: "countTooltipText" }] : /* istanbul ignore next */ []));
+    overflowCount = computed(() => {
+        return Math.max(0, this.selectedOptions().length - this.maxVisibleChips());
+    }, ...(ngDevMode ? [{ debugName: "overflowCount" }] : /* istanbul ignore next */ []));
+    overflowText = computed(() => {
+        const count = this.overflowCount();
+        if (count <= 0)
+            return '';
+        const key = this.overflowLabelKey();
+        if (key) {
+            return this.translateService.translate(key, { count: String(count) });
+        }
+        const text = this.overflowLabel();
+        if (text)
+            return text;
+        return `+${count}`;
+    }, ...(ngDevMode ? [{ debugName: "overflowText" }] : /* istanbul ignore next */ []));
+    commaText = computed(() => {
+        return this.selectedLabels().join(', ');
+    }, ...(ngDevMode ? [{ debugName: "commaText" }] : /* istanbul ignore next */ []));
+    displayText = computed(() => {
+        const mode = this.displayMode();
+        if (mode === 'summary')
+            return this.summaryText();
+        if (mode === 'comma')
+            return this.commaText();
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+    placeholderText = computed(() => {
+        const key = this.placeholderKey();
+        if (key) {
+            return this.translateService.translate(key) || this.placeholder() || '';
+        }
+        return this.placeholder() ?? '';
+    }, ...(ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []));
+    searchPlaceholderText = computed(() => {
+        const key = this.searchPlaceholderKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        const text = this.searchPlaceholder();
+        if (text) {
+            return text;
+        }
+        return this.translateService.translate('solaris.multiSelect.search.placeholder');
+    }, ...(ngDevMode ? [{ debugName: "searchPlaceholderText" }] : /* istanbul ignore next */ []));
+    loadingTextValue = computed(() => {
+        const key = this.loadingTextKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        const text = this.loadingText();
+        if (text) {
+            return text;
+        }
+        return this.translateService.translate('solaris.multiSelect.loading');
+    }, ...(ngDevMode ? [{ debugName: "loadingTextValue" }] : /* istanbul ignore next */ []));
+    emptyTextValue = computed(() => {
+        const key = this.emptyTextKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        const text = this.emptyText();
+        if (text) {
+            return text;
+        }
+        return this.translateService.translate('solaris.multiSelect.empty');
+    }, ...(ngDevMode ? [{ debugName: "emptyTextValue" }] : /* istanbul ignore next */ []));
+    noResultsTextValue = computed(() => {
+        const key = this.noResultsTextKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        const text = this.noResultsText();
+        if (text) {
+            return text;
+        }
+        return this.translateService.translate('solaris.multiSelect.noResults');
+    }, ...(ngDevMode ? [{ debugName: "noResultsTextValue" }] : /* istanbul ignore next */ []));
+    clearAriaLabel = computed(() => {
+        const key = this.clearLabelKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        const text = this.clearLabel();
+        if (text) {
+            return text;
+        }
+        return this.translateService.translate('solaris.multiSelect.clear');
+    }, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+    selectAllLabelText = computed(() => {
+        const key = this.selectAllLabelKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        const text = this.selectAllLabel();
+        if (text) {
+            return text;
+        }
+        return this.translateService.translate('solaris.multiSelect.selectAll');
+    }, ...(ngDevMode ? [{ debugName: "selectAllLabelText" }] : /* istanbul ignore next */ []));
+    removeChipAriaLabel = computed(() => {
+        const key = this.removeChipLabelKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        const text = this.removeChipLabel();
+        if (text) {
+            return text;
+        }
+        return this.translateService.translate('solaris.multiSelect.removeChip');
+    }, ...(ngDevMode ? [{ debugName: "removeChipAriaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelText = computed(() => {
+        const key = this.ariaLabelKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        return this.ariaLabel();
+    }, ...(ngDevMode ? [{ debugName: "ariaLabelText" }] : /* istanbul ignore next */ []));
+    ariaLabelledbyText = computed(() => {
+        return this.ariaLabelledby();
+    }, ...(ngDevMode ? [{ debugName: "ariaLabelledbyText" }] : /* istanbul ignore next */ []));
+    labelText = computed(() => {
+        const key = this.labelKey();
+        if (key) {
+            return this.translateService.translate(key) || this.label() || '';
+        }
+        return this.label() ?? '';
+    }, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
+    hintText = computed(() => {
+        const key = this.hintKey();
+        if (key) {
+            return this.translateService.translate(key) || this.hint() || '';
+        }
+        return this.hint() ?? '';
+    }, ...(ngDevMode ? [{ debugName: "hintText" }] : /* istanbul ignore next */ []));
+    errorText = computed(() => {
+        const key = this.errorKey();
+        if (key) {
+            return this.translateService.translate(key) || this.error() || '';
+        }
+        return this.error() ?? '';
+    }, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    activeDescendantId = computed(() => {
+        if (!this.panelOpen())
+            return null;
+        const idx = this.activeOptionIndex();
+        const opts = this.visibleOptions();
+        if (idx >= 0 && idx < opts.length) {
+            return opts[idx].elementId();
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
+    _describedByIds = signal([], ...(ngDevMode ? [{ debugName: "_describedByIds" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = computed(() => {
+        const ids = this._describedByIds();
+        return ids.length > 0 ? ids.join(' ') : null;
+    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    visibleOptions = computed(() => {
+        const opts = this.options;
+        if (!opts)
+            return [];
+        if (!this.panelOpen())
+            return [];
+        const query = this.searchQuery().toLowerCase().trim();
+        if (!query)
+            return opts.toArray();
+        return opts.toArray().filter((opt) => {
+            if (opt.isEffectivelyDisabled())
+                return false;
+            return this.optionMatchesSearch(opt, query);
+        });
+    }, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
+    showNoResults = computed(() => {
+        return (this.searchQuery().trim().length > 0 &&
+            this.visibleOptions().length === 0 &&
+            !this.loading());
+    }, ...(ngDevMode ? [{ debugName: "showNoResults" }] : /* istanbul ignore next */ []));
+    showEmpty = computed(() => {
+        const opts = this.options;
+        return ((!opts || opts.length === 0) &&
+            !this.loading() &&
+            this.searchQuery().trim().length === 0);
+    }, ...(ngDevMode ? [{ debugName: "showEmpty" }] : /* istanbul ignore next */ []));
+    allSelectedCount = computed(() => {
+        const value = this.internalValue();
+        const comp = this.compareWith();
+        const opts = this.selectableOptions();
+        return opts.filter((opt) => value.some((v) => comp(opt.value(), v))).length;
+    }, ...(ngDevMode ? [{ debugName: "allSelectedCount" }] : /* istanbul ignore next */ []));
+    selectableOptions = computed(() => {
+        const opts = this.options;
+        if (!opts)
+            return [];
+        const query = this.searchQuery().trim();
+        let filtered;
+        if (query) {
+            filtered = opts
+                .toArray()
+                .filter((o) => !o.isEffectivelyDisabled() && this.optionMatchesSearch(o, query));
+        }
+        else {
+            filtered = opts.toArray().filter((o) => !o.isEffectivelyDisabled());
+        }
+        return filtered;
+    }, ...(ngDevMode ? [{ debugName: "selectableOptions" }] : /* istanbul ignore next */ []));
+    isAllSelected = computed(() => {
+        const selectable = this.selectableOptions();
+        if (selectable.length === 0)
+            return false;
+        return this.allSelectedCount() === selectable.length;
+    }, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : /* istanbul ignore next */ []));
+    isPartialSelected = computed(() => {
+        const selectable = this.selectableOptions();
+        if (selectable.length === 0)
+            return false;
+        return (this.allSelectedCount() > 0 && this.allSelectedCount() < selectable.length);
+    }, ...(ngDevMode ? [{ debugName: "isPartialSelected" }] : /* istanbul ignore next */ []));
+    effectiveDisplayMode = computed(() => {
+        if (this.hasValue() && this.displayMode() === 'chips')
+            return 'chips';
+        return this.displayMode();
+    }, ...(ngDevMode ? [{ debugName: "effectiveDisplayMode" }] : /* istanbul ignore next */ []));
+    get id() {
+        return this.elementId();
+    }
+    get focused() {
+        return this.internalFocused();
+    }
+    get disabled() {
+        return this.isEffectivelyDisabled();
+    }
+    get readonly() {
+        return this.isEffectivelyReadonly();
+    }
+    get invalid() {
+        return this.isEffectivelyInvalid();
+    }
+    get required() {
+        return this.requiredInput();
+    }
+    get describedByIds() {
+        return this._describedByIds();
+    }
+    setDescribedByIds(ids) {
+        this._describedByIds.set([...ids]);
+    }
+    focus() {
+        // SECURITY_EXCEPTION: nativeElement.focus() required to programmatically focus the multi-select trigger. Standard DOM method used by Angular CDK.
+        if (this.triggerElement) {
+            this.triggerElement.nativeElement.focus();
+        }
+        else {
+            // SECURITY_EXCEPTION: nativeElement.focus() required as fallback when no triggerElement ref. Standard DOM method.
+            this.elementRef.nativeElement.focus();
+        }
+    }
+    writeValue(safe) {
+        const arr = normalizeArray(safe);
+        this.internalValue.set([...arr]);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.internalDisabled.set(isDisabled);
+    }
+    constructor() {
+        super();
+        effect(() => {
+            if (!this.optionsInitialized())
+                return;
+            this.internalValue();
+            this.setOptionsSelectedState();
+        });
+    }
+    ngAfterContentInit() {
+        this.optionsInitialized.set(true);
+        this.setOptionsMultiSelectMode();
+        this.setOptionsSelectedState();
+        this.setOptionGroupDisabledState();
+        this.syncActiveStates();
+        this.syncVisibility();
+        this.subscribeToOptionInteractions();
+        const optionsSub = this.options.changes.subscribe(() => {
+            this.setOptionsMultiSelectMode();
+            this.setOptionsSelectedState();
+            this.setOptionGroupDisabledState();
+            this.syncVisibility();
+            this.subscribeToOptionInteractions();
+        });
+        this.optionsSubscription = () => optionsSub.unsubscribe();
+        if (isDevMode() && this.parentFormField) {
+            console.warn('SolarisMultiSelectComponent already includes SolarisFormField internally. ' +
+                'Do not wrap it with <solaris-form-field>; pass label, hint, error, prefix and suffix directly to <solaris-multi-select>.');
+        }
+    }
+    ngAfterViewInit() {
+        if (this.popoverTrigger) {
+            const openedSub = this.popoverTrigger.solarisPopoverOpened.subscribe(() => {
+                this.onPanelOpened();
+            });
+            const closedSub = this.popoverTrigger.solarisPopoverClosed.subscribe(() => {
+                this.onPanelClosed();
+            });
+            this.popoverSubscriptions.push(() => openedSub.unsubscribe(), () => closedSub.unsubscribe());
+        }
+        this.setupResizeObserver();
+    }
+    ngOnDestroy() {
+        this.optionsSubscription?.();
+        this.optionInteractionSubscriptions.forEach((fn) => fn());
+        this.popoverSubscriptions.forEach((fn) => fn());
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    setupResizeObserver() {
+        // SECURITY_EXCEPTION: nativeElement access needed to measure trigger content width for auto display mode. ResizeObserver is SSR-safe (guarded by typeof check). offsetWidth is read-only, no XSS risk.
+        const el = this.triggerContentRef?.nativeElement;
+        if (!el)
+            return;
+        this.triggerWidth.set(el.offsetWidth);
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    this.triggerWidth.set(entry.contentRect.width);
+                }
+            });
+            this.resizeObserver.observe(el);
+        }
+    }
+    onPanelOpened() {
+        this.searchQuery.set('');
+        this.panelOpen.set(true);
+        this.setOptionsSelectedState();
+        this.syncActiveStates();
+        this.syncVisibility();
+        this.opened.emit();
+        this.openChange.emit(true);
+        this.setConnectedSide('bottom');
+        if (this.searchable()) {
+            requestAnimationFrame(() => {
+                // SECURITY_EXCEPTION: nativeElement.focus() required to focus search input when panel opens. Standard DOM method.
+                this.searchInputRef?.nativeElement.focus();
+            });
+        }
+    }
+    onPanelClosed() {
+        this.panelOpen.set(false);
+        this.searchQuery.set('');
+        this.syncVisibility();
+        this.closed.emit();
+        this.openChange.emit(false);
+        this.markAsTouched();
+        this.clearConnectedSide();
+    }
+    setConnectedSide(side) {
+        // SECURITY_EXCEPTION: nativeElement required to access form-field DOM for connected-side sync. ElementRef SSR-safe.
+        const el = this.formFieldElement?.nativeElement;
+        if (el) {
+            // SECURITY_EXCEPTION: nativeElement.querySelector required to find control-wrapper for connected-side sync.
+            const wrapper = el.querySelector('.solaris-form-field__control-wrapper');
+            if (wrapper) {
+                wrapper.dataset['connectedSide'] = side;
+            }
+        }
+    }
+    clearConnectedSide() {
+        // SECURITY_EXCEPTION: nativeElement required to access form-field DOM for connected-side cleanup. ElementRef SSR-safe.
+        const el = this.formFieldElement?.nativeElement;
+        if (el) {
+            const wrapper = el.querySelector('.solaris-form-field__control-wrapper');
+            if (wrapper) {
+                delete wrapper.dataset['connectedSide'];
+            }
+        }
+    }
+    toggleOption(option) {
+        if (option.isEffectivelyDisabled())
+            return;
+        const value = this.internalValue();
+        const optValue = option.value();
+        const comp = this.compareWith();
+        const idx = value.findIndex((v) => comp(v, optValue));
+        let newValue;
+        if (idx >= 0) {
+            newValue = [...value.slice(0, idx), ...value.slice(idx + 1)];
+        }
+        else {
+            newValue = [...value, optValue];
+        }
+        this.internalValue.set(newValue);
+        this.onChange(newValue);
+        this.valueChange.emit(newValue);
+        this.selectionChange.emit(option);
+        this.setOptionsSelectedState();
+        if (this.searchable() && this.panelOpen()) {
+            requestAnimationFrame(() => {
+                // SECURITY_EXCEPTION: nativeElement.focus() required to restore focus to search input after selection. ElementRef SSR-safe.
+                this.searchInputRef?.nativeElement.focus();
+            });
+        }
+    }
+    clearValue() {
+        this.internalValue.set([]);
+        this.onChange([]);
+        this.valueChange.emit([]);
+        this.selectionChange.emit(undefined);
+        this.cleared.emit();
+        this.setOptionsSelectedState();
+        this.markAsTouched();
+    }
+    handleSelectAll() {
+        if (this.isEffectivelyReadonly() || this.isEffectivelyDisabled())
+            return;
+        const selectable = this.selectableOptions();
+        if (selectable.length === 0)
+            return;
+        const value = this.internalValue();
+        const comp = this.compareWith();
+        if (this.isAllSelected()) {
+            const selectableValues = new Set(selectable.map((o) => o.value()));
+            const newValue = value.filter((v) => {
+                for (const sv of selectableValues) {
+                    if (comp(v, sv))
+                        return false;
+                }
+                return true;
+            });
+            this.internalValue.set(newValue);
+            this.onChange(newValue);
+            this.valueChange.emit(newValue);
+        }
+        else {
+            const existingValues = new Set(value);
+            const newValues = [...value];
+            selectable.forEach((opt) => {
+                const ov = opt.value();
+                let found = false;
+                for (const ev of existingValues) {
+                    if (comp(ev, ov)) {
+                        found = true;
+                        break;
+                    }
+                }
+                if (!found) {
+                    newValues.push(ov);
+                }
+            });
+            this.internalValue.set(newValues);
+            this.onChange(newValues);
+            this.valueChange.emit(newValues);
+        }
+        this.setOptionsSelectedState();
+    }
+    removeChip(option, event) {
+        event.stopPropagation();
+        this.toggleOption(option);
+    }
+    onTriggerKeydown(event) {
+        if (!this.canOpen()) {
+            event.preventDefault();
+            return;
+        }
+        if (this.maybeClosePanel(event))
+            return;
+        if (this.maybeNavigateToBound(event))
+            return;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.handleToggleOpen();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.handleArrow(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.handleArrow(-1);
+                break;
+        }
+    }
+    handleToggleOpen() {
+        if (this.panelOpen()) {
+            this.selectActiveOption();
+        }
+        else {
+            this.popoverTrigger?.open();
+        }
+    }
+    handleArrow(direction) {
+        if (this.panelOpen()) {
+            this.focusNextOption(direction);
+        }
+        else {
+            this.popoverTrigger?.open();
+            requestAnimationFrame(() => this.focusNextOption(direction));
+        }
+    }
+    maybeClosePanel(event) {
+        if (!this.panelOpen())
+            return false;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.popoverTrigger?.close();
+            return true;
+        }
+        if (event.key === 'Tab') {
+            this.popoverTrigger?.close();
+            return true;
+        }
+        return false;
+    }
+    maybeNavigateToBound(event) {
+        if (!this.panelOpen())
+            return false;
+        if (event.key === 'Home') {
+            event.preventDefault();
+            this.activeOptionIndex.set(this.getFirstEnabledOptionIndex());
+            this.syncActiveStates();
+            return true;
+        }
+        if (event.key === 'End') {
+            event.preventDefault();
+            this.activeOptionIndex.set(this.getLastEnabledOptionIndex());
+            this.syncActiveStates();
+            return true;
+        }
+        return false;
+    }
+    onSearchInput(event) {
+        const target = event.target;
+        const value = target.value;
+        this.searchQuery.set(value);
+        this.searchChange.emit(value);
+        this.activeOptionIndex.set(-1);
+        this.syncActiveStates();
+        this.syncVisibility();
+    }
+    onSearchKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusNextOption(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusNextOption(-1);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                event.stopPropagation();
+                this.selectActiveOption();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                if (this.searchQuery()) {
+                    this.searchQuery.set('');
+                    this.searchChange.emit('');
+                    this.syncVisibility();
+                    this.syncActiveStates();
+                }
+                else {
+                    this.popoverTrigger?.close();
+                }
+                break;
+            case 'Tab':
+                this.popoverTrigger?.close();
+                break;
+            case 'Backspace':
+                if (!this.searchQuery() &&
+                    !this.isEffectivelyDisabled() &&
+                    !this.isEffectivelyReadonly()) {
+                    event.preventDefault();
+                    const selected = this.selectedOptions();
+                    if (selected.length > 0) {
+                        this.toggleOption(selected[selected.length - 1]);
+                    }
+                }
+                break;
+        }
+    }
+    onPanelClick(event) {
+        event.stopPropagation();
+    }
+    onPanelKeydown(event) {
+        event.stopPropagation();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusNextOption(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusNextOption(-1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.selectActiveOption();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.popoverTrigger?.close();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.activeOptionIndex.set(this.getFirstEnabledOptionIndex());
+                break;
+            case 'End':
+                event.preventDefault();
+                this.activeOptionIndex.set(this.getLastEnabledOptionIndex());
+                break;
+        }
+    }
+    onTriggerFocus() {
+        this.internalFocused.set(true);
+    }
+    onTriggerBlur() {
+        this.internalFocused.set(false);
+    }
+    subscribeToOptionInteractions() {
+        this.optionInteractionSubscriptions.forEach((fn) => fn());
+        this.optionInteractionSubscriptions = [];
+        this.options.forEach((opt) => {
+            const sub = opt.optionInteraction.subscribe(({ option }) => {
+                this.toggleOption(option);
+            });
+            this.optionInteractionSubscriptions.push(() => sub.unsubscribe());
+        });
+    }
+    setOptionsMultiSelectMode() {
+        this.options.forEach((opt) => {
+            opt.setSelectionMode('multiple');
+            opt.setShowSelectionIndicator(true);
+        });
+    }
+    setOptionsSelectedState() {
+        const value = this.internalValue();
+        const comp = this.compareWith();
+        this.options.forEach((opt) => {
+            const isSelected = value.some((v) => comp(opt.value(), v));
+            opt.setSelected(isSelected);
+        });
+    }
+    setOptionGroupDisabledState() {
+        this.optionGroups.forEach((group) => {
+            group.options.forEach((opt) => {
+                opt.setGroupDisabledState(group.isEffectivelyDisabled());
+            });
+        });
+    }
+    syncActiveStates() {
+        const idx = this.activeOptionIndex();
+        const opts = this.visibleOptions();
+        this.options.forEach((opt) => opt.setActive(false));
+        if (idx >= 0 && idx < opts.length) {
+            opts[idx].setActive(true);
+        }
+    }
+    syncVisibility() {
+        const query = this.searchQuery().trim();
+        if (!query) {
+            this.options.forEach((o) => o.setHidden(false));
+            this.optionGroups.forEach((g) => g.setHidden(false));
+            return;
+        }
+        const visible = new Set(this.visibleOptions());
+        this.options.forEach((o) => o.setHidden(!visible.has(o)));
+        this.optionGroups.forEach((g) => {
+            const anyVisible = g.options.some((o) => visible.has(o));
+            g.setHidden(!anyVisible);
+        });
+    }
+    getOptionDisplayLabel(option) {
+        const dw = this.displayWith();
+        if (dw) {
+            const result = dw(option.value());
+            if (result !== undefined)
+                return result;
+        }
+        const label = option.labelText();
+        if (label)
+            return label;
+        const native = this.getOptionNativeText(option);
+        if (native)
+            return native;
+        return '';
+    }
+    getOptionNativeText(option) {
+        const nativeEl = option.elementRef;
+        // SECURITY_EXCEPTION: nativeElement access needed to read option text for search filtering. Read-only, SSR-safe.
+        if (nativeEl?.nativeElement) {
+            // SECURITY_EXCEPTION: nativeElement.textContent needed to read option text for search filtering. Read-only, SSR-safe.
+            return nativeEl.nativeElement.textContent?.trim() || '';
+        }
+        return '';
+    }
+    optionMatchesSearch(option, query) {
+        const label = (option.labelText() || '').toLowerCase();
+        const desc = (option.descriptionText() || '').toLowerCase();
+        const native = this.getOptionNativeText(option).toLowerCase();
+        const normalizedQuery = query
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '');
+        const normalizedLabel = label
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '');
+        const normalizedDesc = desc
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '');
+        const normalizedNative = native
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '');
+        return (normalizedLabel.includes(normalizedQuery) ||
+            normalizedDesc.includes(normalizedQuery) ||
+            normalizedNative.includes(normalizedQuery));
+    }
+    markAsTouched() {
+        if (!this.touched()) {
+            this.touched.set(true);
+            this.onTouched();
+        }
+    }
+    selectActiveOption() {
+        const idx = this.activeOptionIndex();
+        const opts = this.visibleOptions();
+        if (idx >= 0 && idx < opts.length) {
+            this.toggleOption(opts[idx]);
+        }
+    }
+    focusNextOption(direction) {
+        const opts = this.visibleOptions();
+        if (opts.length === 0)
+            return;
+        let current = this.activeOptionIndex();
+        if (current < 0 || current >= opts.length) {
+            current = direction === 1 ? -1 : opts.length;
+        }
+        let next = current + direction;
+        while (next >= 0 && next < opts.length) {
+            if (!opts[next].isEffectivelyDisabled()) {
+                this.activeOptionIndex.set(next);
+                this.syncActiveStates();
+                return;
+            }
+            next += direction;
+        }
+        if (direction === 1 && next >= opts.length) {
+            this.activeOptionIndex.set(this.getFirstEnabledOptionIndex());
+            this.syncActiveStates();
+        }
+        else if (direction === -1 && next < 0) {
+            this.activeOptionIndex.set(this.getLastEnabledOptionIndex());
+            this.syncActiveStates();
+        }
+    }
+    getFirstEnabledOptionIndex() {
+        const opts = this.visibleOptions();
+        for (let i = 0; i < opts.length; i++) {
+            if (!opts[i].isEffectivelyDisabled())
+                return i;
+        }
+        return -1;
+    }
+    getLastEnabledOptionIndex() {
+        const opts = this.visibleOptions();
+        for (let i = opts.length - 1; i >= 0; i--) {
+            if (!opts[i].isEffectivelyDisabled())
+                return i;
+        }
+        return -1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisMultiSelectComponent, isStandalone: true, selector: "solaris-multi-select", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, emptyTextKey: { classPropertyName: "emptyTextKey", publicName: "emptyTextKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, loadingTextKey: { classPropertyName: "loadingTextKey", publicName: "loadingTextKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabelKey: { classPropertyName: "clearLabelKey", publicName: "clearLabelKey", isSignal: true, isRequired: false, transformFunction: null }, removeChipLabel: { classPropertyName: "removeChipLabel", publicName: "removeChipLabel", isSignal: true, isRequired: false, transformFunction: null }, removeChipLabelKey: { classPropertyName: "removeChipLabelKey", publicName: "removeChipLabelKey", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, noResultsTextKey: { classPropertyName: "noResultsTextKey", publicName: "noResultsTextKey", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholderKey: { classPropertyName: "searchPlaceholderKey", publicName: "searchPlaceholderKey", isSignal: true, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, panelMatchTriggerWidth: { classPropertyName: "panelMatchTriggerWidth", publicName: "panelMatchTriggerWidth", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, manualInvalid: { classPropertyName: "manualInvalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabelKey: { classPropertyName: "selectAllLabelKey", publicName: "selectAllLabelKey", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleChips: { classPropertyName: "maxVisibleChips", publicName: "maxVisibleChips", isSignal: true, isRequired: false, transformFunction: null }, selectedCountLabel: { classPropertyName: "selectedCountLabel", publicName: "selectedCountLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedCountLabelKey: { classPropertyName: "selectedCountLabelKey", publicName: "selectedCountLabelKey", isSignal: true, isRequired: false, transformFunction: null }, overflowLabel: { classPropertyName: "overflowLabel", publicName: "overflowLabel", isSignal: true, isRequired: false, transformFunction: null }, overflowLabelKey: { classPropertyName: "overflowLabelKey", publicName: "overflowLabelKey", isSignal: true, isRequired: false, transformFunction: null }, minSelected: { classPropertyName: "minSelected", publicName: "minSelected", isSignal: true, isRequired: false, transformFunction: null }, maxSelected: { classPropertyName: "maxSelected", publicName: "maxSelected", isSignal: true, isRequired: false, transformFunction: null }, showSelectionTooltip: { classPropertyName: "showSelectionTooltip", publicName: "showSelectionTooltip", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", cleared: "cleared", openChange: "openChange", searchChange: "searchChange", valueChange: "valueChange", selectionChange: "selectionChange" }, host: { attributes: { "solaris-multi-select": "" }, properties: { "attr.id": "elementId()", "attr.data-size": "size()", "attr.data-open": "panelOpen() ? \"\" : null", "attr.aria-label": "ariaLabelText() ?? null", "attr.data-has-value": "hasValue() ? \"\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SolarisMultiSelectComponent),
+                multi: true,
+            },
+            {
+                provide: SolarisFormControl,
+                useExisting: forwardRef(() => SolarisMultiSelectComponent),
+            },
+        ], queries: [{ propertyName: "options", predicate: SolarisOptionComponent, descendants: true }, { propertyName: "optionGroups", predicate: SolarisOptionGroupComponent, descendants: true }], viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }, { propertyName: "triggerElement", first: true, predicate: ["triggerEl"], descendants: true, read: ElementRef }, { propertyName: "formFieldElement", first: true, predicate: ["formFieldRef"], descendants: true, read: ElementRef }, { propertyName: "triggerContentRef", first: true, predicate: ["triggerContent"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<solaris-form-field\r\n  #formFieldRef\r\n  [control]=\"this\"\r\n  [label]=\"labelText()\"\r\n  [hint]=\"hintText()\"\r\n  [error]=\"errorText()\"\r\n  [appearance]=\"appearance()\"\r\n  [size]=\"size()\"\r\n  [density]=\"effectiveDensity()\"\r\n  [radius]=\"radius()\"\r\n  [invalid]=\"isEffectivelyInvalid()\"\r\n  [required]=\"requiredInput()\"\r\n  solaris-popover-trigger\r\n  [solarisPopoverDisabled]=\"!canOpen()\"\r\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\r\n  [class.solaris-multi-select--panel-open]=\"panelOpen()\"\r\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\r\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\r\n  [solarisPopoverPlacement]=\"'bottom'\"\r\n  [solarisPopoverAlign]=\"'start'\"\r\n  [solarisPopoverOffset]=\"0\"\r\n  [solarisPopoverPadding]=\"'none'\"\r\n  [solarisPopoverRadius]=\"radius()\"\r\n  [solarisPopoverTopConnected]=\"true\"\r\n  [solarisPopoverMinWidth]=\"panelMinWidth()\"\r\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\r\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\r\n  [solarisPopoverCloseOnEscape]=\"false\"\r\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\r\n>\r\n  @if (icon(); as iconName) {\r\n    <solaris-icon solaris-form-prefix [name]=\"iconName\" [decorative]=\"true\" />\r\n  }\r\n  <ng-content select=\"[solaris-form-prefix]\" />\r\n\r\n  <div\r\n    #triggerEl\r\n    class=\"solaris-multi-select__trigger\"\r\n    [id]=\"elementId() + '--trigger'\"\r\n    solaris-form-field-trigger\r\n    role=\"combobox\"\r\n    tabindex=\"0\"\r\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\r\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\r\n    (keydown)=\"onTriggerKeydown($event)\"\r\n    (focus)=\"onTriggerFocus()\"\r\n    (blur)=\"onTriggerBlur()\"\r\n  >\r\n    <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\r\n      @if (displayMode() === 'auto') {\r\n        @if (hasValue()) {\r\n          @if (showCountOnly()) {\r\n            <span\r\n              class=\"solaris-multi-select__chip\"\r\n              [solarisTooltip]=\"countTooltipText()\"\r\n              [solarisTooltipTrigger]=\"'hover'\"\r\n              tabindex=\"0\"\r\n            >\r\n              <span class=\"solaris-multi-select__chip-label\">{{\r\n                summaryText()\r\n              }}</span>\r\n            </span>\r\n          } @else {\r\n            <div\r\n              class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\r\n            >\r\n              @for (opt of autoVisibleChips(); track opt) {\r\n                <span class=\"solaris-multi-select__chip\" role=\"listitem\">\r\n                  <span class=\"solaris-multi-select__chip-label\">{{\r\n                    getOptionDisplayLabel(opt)\r\n                  }}</span>\r\n                  @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"solaris-multi-select__chip-remove\"\r\n                      [attr.aria-label]=\"removeChipAriaLabel()\"\r\n                      (click)=\"removeChip(opt, $event)\"\r\n                      tabindex=\"-1\"\r\n                    >\r\n                      <solaris-icon name=\"x\" [decorative]=\"true\" />\r\n                    </button>\r\n                  }\r\n                </span>\r\n              }\r\n              @if (autoShowOverflow()) {\r\n                <span\r\n                  class=\"solaris-multi-select__chip-overflow\"\r\n                  [solarisTooltip]=\"autoOverflowTooltipText()\"\r\n                  [solarisTooltipTrigger]=\"'hover'\"\r\n                  tabindex=\"0\"\r\n                  [attr.aria-label]=\"\r\n                    '+ ' +\r\n                    autoOverflowCount() +\r\n                    ' ' +\r\n                    selectedLabels().join(', ')\r\n                  \"\r\n                  >+{{ autoOverflowCount() }}</span\r\n                >\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n        @if (searchable() && panelOpen()) {\r\n          <input\r\n            #searchInput\r\n            type=\"text\"\r\n            class=\"solaris-multi-select__search-input\"\r\n            [attr.placeholder]=\"searchPlaceholderText()\"\r\n            [value]=\"searchQuery()\"\r\n            (input)=\"onSearchInput($event)\"\r\n            (keydown)=\"onSearchKeydown($event)\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            role=\"searchbox\"\r\n            autocomplete=\"off\"\r\n          />\r\n        }\r\n        @if (!hasValue() && !(searchable() && panelOpen())) {\r\n          <span class=\"solaris-multi-select__value\">\r\n            <span class=\"solaris-multi-select__placeholder\">{{\r\n              placeholderText()\r\n            }}</span>\r\n          </span>\r\n        }\r\n      } @else {\r\n        @if (searchable() && panelOpen()) {\r\n          <input\r\n            #searchInput\r\n            type=\"text\"\r\n            class=\"solaris-multi-select__search-input\"\r\n            [attr.placeholder]=\"searchPlaceholderText()\"\r\n            [value]=\"searchQuery()\"\r\n            (input)=\"onSearchInput($event)\"\r\n            (keydown)=\"onSearchKeydown($event)\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            role=\"searchbox\"\r\n            autocomplete=\"off\"\r\n          />\r\n        } @else {\r\n          @if (hasValue()) {\r\n            @if (displayMode() === 'chips') {\r\n              <div class=\"solaris-multi-select__chips\">\r\n                @for (\r\n                  opt of selectedOptions().slice(0, maxVisibleChips());\r\n                  track opt\r\n                ) {\r\n                  <span class=\"solaris-multi-select__chip\" role=\"listitem\">\r\n                    <span class=\"solaris-multi-select__chip-label\">{{\r\n                      getOptionDisplayLabel(opt)\r\n                    }}</span>\r\n                    @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"solaris-multi-select__chip-remove\"\r\n                        [attr.aria-label]=\"removeChipAriaLabel()\"\r\n                        (click)=\"removeChip(opt, $event)\"\r\n                        tabindex=\"-1\"\r\n                      >\r\n                        <solaris-icon name=\"x\" [decorative]=\"true\" />\r\n                      </button>\r\n                    }\r\n                  </span>\r\n                }\r\n                @if (overflowCount() > 0) {\r\n                  <span\r\n                    class=\"solaris-multi-select__chip-overflow\"\r\n                    [attr.aria-label]=\"\r\n                      '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\r\n                    \"\r\n                  >\r\n                    {{ overflowText() }}\r\n                  </span>\r\n                }\r\n              </div>\r\n            } @else if (displayMode() === 'comma') {\r\n              <span class=\"solaris-multi-select__value\">\r\n                <span class=\"solaris-multi-select__value-text\">{{\r\n                  commaText()\r\n                }}</span>\r\n              </span>\r\n            } @else {\r\n              <span\r\n                class=\"solaris-multi-select__chip\"\r\n                [solarisTooltip]=\"countTooltipText()\"\r\n                [solarisTooltipTrigger]=\"'hover'\"\r\n                tabindex=\"0\"\r\n              >\r\n                <span class=\"solaris-multi-select__chip-label\">{{\r\n                  summaryText()\r\n                }}</span>\r\n              </span>\r\n            }\r\n          } @else {\r\n            <span class=\"solaris-multi-select__value\">\r\n              <span class=\"solaris-multi-select__placeholder\">{{\r\n                placeholderText()\r\n              }}</span>\r\n            </span>\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <span class=\"solaris-multi-select__actions\">\r\n      @if (canClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"solaris-multi-select__clear\"\r\n          [attr.aria-label]=\"clearAriaLabel()\"\r\n          (click)=\"clearValue(); $event.stopPropagation()\"\r\n          tabindex=\"-1\"\r\n        >\r\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\r\n        </button>\r\n      }\r\n\r\n      <solaris-icon\r\n        class=\"solaris-multi-select__dropdown-icon\"\r\n        name=\"chevron-down\"\r\n        [decorative]=\"true\"\r\n        size=\"sm\"\r\n      />\r\n    </span>\r\n  </div>\r\n\r\n  <ng-content select=\"[solaris-form-suffix]\" />\r\n</solaris-form-field>\r\n\r\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\r\n  <div\r\n    class=\"solaris-multi-select__panel\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"'true'\"\r\n    [attr.id]=\"panelId\"\r\n    tabindex=\"-1\"\r\n    (click)=\"onPanelClick($event)\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    @if (selectAll() && !loading()) {\r\n      <div\r\n        class=\"solaris-multi-select__select-all\"\r\n        role=\"option\"\r\n        aria-selected=\"false\"\r\n        tabindex=\"-1\"\r\n        (click)=\"handleSelectAll()\"\r\n        (keydown.enter)=\"handleSelectAll()\"\r\n        (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\r\n        [class.solaris-multi-select__select-all--readonly]=\"\r\n          isEffectivelyReadonly()\r\n        \"\r\n      >\r\n        <span\r\n          class=\"solaris-multi-select__select-all-checkbox\"\r\n          [class.solaris-multi-select__select-all-checkbox--checked]=\"\r\n            isAllSelected()\r\n          \"\r\n          [class.solaris-multi-select__select-all-checkbox--partial]=\"\r\n            isPartialSelected()\r\n          \"\r\n        >\r\n          @if (isAllSelected()) {\r\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\r\n              <solaris-icon name=\"check\" [decorative]=\"true\" />\r\n            </span>\r\n          } @else if (isPartialSelected()) {\r\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\r\n              <solaris-icon name=\"minus\" [decorative]=\"true\" />\r\n            </span>\r\n          }\r\n        </span>\r\n        <span class=\"solaris-multi-select__select-all-label\">{{\r\n          selectAllLabelText()\r\n        }}</span>\r\n      </div>\r\n    }\r\n\r\n    @if (loading()) {\r\n      <div class=\"solaris-multi-select__loading\">\r\n        <span class=\"solaris-multi-select__loading-text\">{{\r\n          loadingTextValue()\r\n        }}</span>\r\n      </div>\r\n    } @else if (showNoResults()) {\r\n      <div class=\"solaris-multi-select__no-results\">\r\n        <span class=\"solaris-multi-select__no-results-text\">{{\r\n          noResultsTextValue()\r\n        }}</span>\r\n      </div>\r\n    } @else if (showEmpty()) {\r\n      <div class=\"solaris-multi-select__empty\">\r\n        <span class=\"solaris-multi-select__empty-text\">{{\r\n          emptyTextValue()\r\n        }}</span>\r\n      </div>\r\n    } @else {\r\n      <div\r\n        class=\"solaris-multi-select__options\"\r\n        [style.max-height]=\"panelMaxHeight()\"\r\n      >\r\n        <ng-content select=\"solaris-option, solaris-option-group\" />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{--solaris-multi-select-chip-gap: var(--solaris-spacing-1);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-text-muted);--solaris-multi-select-font-size: var(--solaris-font-size-md);--solaris-multi-select-chip-color: var(--solaris-text-default);--solaris-multi-select-value-color: var(--solaris-text-default);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-multi-select-placeholder-color: var(--solaris-text-muted);--solaris-multi-select-chip-remove-size: var(--solaris-font-size-md);--solaris-multi-select-chip-background: var(--solaris-surface-subtle);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans, system-ui)}.solaris-multi-select__trigger{flex:1;min-width:0;display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-2);padding:0;outline:none;border:none;background:transparent;cursor:pointer}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) ease;flex-shrink:0}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) ease}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__clear:hover{color:var(--solaris-text-default)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) ease}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) ease}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-border-default)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-base);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-font-size-sm);height:var(--solaris-font-size-sm)}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:.5}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "size", "radius", "appearance", "control"] }, { kind: "directive", type: SolarisFormFieldTriggerDirective, selector: "[solaris-form-field-trigger]" }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "directive", type: SolarisPopoverDirective, selector: "ng-template[solaris-popover]", exportAs: ["solarisPopover"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]", inputs: ["solarisPopoverTriggerFor", "solarisPopoverOpen", "solarisPopoverDisabled", "solarisPopoverPlacement", "solarisPopoverAlign", "solarisPopoverOffset", "solarisPopoverMatchTriggerWidth", "solarisPopoverMinWidth", "solarisPopoverMaxWidth", "solarisPopoverCloseOnOutsideClick", "solarisPopoverCloseOnEscape", "solarisPopoverRestoreFocus", "solarisPopoverAutoFocus", "solarisPopoverScrollStrategy", "solarisPopoverPanelRole", "solarisPopoverAriaHasPopup", "solarisPopoverAppearance", "solarisPopoverPadding", "solarisPopoverRadius", "solarisPopoverTopConnected"], outputs: ["solarisPopoverOpened", "solarisPopoverClosed", "solarisPopoverOpenChange"] }, { kind: "directive", type: SolarisTooltipDirective, selector: "[solaris-tooltip], [solarisTooltip], [solarisTooltipFor]", inputs: ["solarisTooltip", "solarisTooltipKey", "solarisTooltipFor", "solarisTooltipTitle", "solarisTooltipTitleKey", "solarisTooltipIcon", "solarisTooltipIconDecorative", "solarisTooltipTrigger", "solarisTooltipPlacement", "solarisTooltipOffset", "solarisTooltipDisabled", "solarisTooltipCloseable", "solarisTooltipCloseLabel", "solarisTooltipCloseLabelKey", "solarisTooltipShowDelay", "solarisTooltipHideDelay", "solarisTooltipAppearance", "solarisTooltipSize", "solarisTooltipRadius", "solarisTooltipMaxWidth", "solarisTooltipArrow", "solarisTooltipOpen"], outputs: ["solarisTooltipOpened", "solarisTooltipClosed", "solarisTooltipOpenChange"], exportAs: ["solarisTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-multi-select', standalone: true, imports: [
+                        SolarisFormFieldComponent,
+                        SolarisFormFieldTriggerDirective,
+                        SolarisFormPrefixDirective,
+                        SolarisFormSuffixDirective,
+                        SolarisIconComponent,
+                        SolarisPopoverDirective,
+                        SolarisPopoverTriggerDirective,
+                        SolarisTooltipDirective,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SolarisMultiSelectComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: SolarisFormControl,
+                            useExisting: forwardRef(() => SolarisMultiSelectComponent),
+                        },
+                    ], host: {
+                        'solaris-multi-select': '',
+                        '[attr.id]': 'elementId()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-open]': 'panelOpen() ? "" : null',
+                        '[attr.aria-label]': 'ariaLabelText() ?? null',
+                        '[attr.data-has-value]': 'hasValue() ? "" : null',
+                    }, template: "<solaris-form-field\r\n  #formFieldRef\r\n  [control]=\"this\"\r\n  [label]=\"labelText()\"\r\n  [hint]=\"hintText()\"\r\n  [error]=\"errorText()\"\r\n  [appearance]=\"appearance()\"\r\n  [size]=\"size()\"\r\n  [density]=\"effectiveDensity()\"\r\n  [radius]=\"radius()\"\r\n  [invalid]=\"isEffectivelyInvalid()\"\r\n  [required]=\"requiredInput()\"\r\n  solaris-popover-trigger\r\n  [solarisPopoverDisabled]=\"!canOpen()\"\r\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\r\n  [class.solaris-multi-select--panel-open]=\"panelOpen()\"\r\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\r\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\r\n  [solarisPopoverPlacement]=\"'bottom'\"\r\n  [solarisPopoverAlign]=\"'start'\"\r\n  [solarisPopoverOffset]=\"0\"\r\n  [solarisPopoverPadding]=\"'none'\"\r\n  [solarisPopoverRadius]=\"radius()\"\r\n  [solarisPopoverTopConnected]=\"true\"\r\n  [solarisPopoverMinWidth]=\"panelMinWidth()\"\r\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\r\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\r\n  [solarisPopoverCloseOnEscape]=\"false\"\r\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\r\n>\r\n  @if (icon(); as iconName) {\r\n    <solaris-icon solaris-form-prefix [name]=\"iconName\" [decorative]=\"true\" />\r\n  }\r\n  <ng-content select=\"[solaris-form-prefix]\" />\r\n\r\n  <div\r\n    #triggerEl\r\n    class=\"solaris-multi-select__trigger\"\r\n    [id]=\"elementId() + '--trigger'\"\r\n    solaris-form-field-trigger\r\n    role=\"combobox\"\r\n    tabindex=\"0\"\r\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\r\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\r\n    (keydown)=\"onTriggerKeydown($event)\"\r\n    (focus)=\"onTriggerFocus()\"\r\n    (blur)=\"onTriggerBlur()\"\r\n  >\r\n    <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\r\n      @if (displayMode() === 'auto') {\r\n        @if (hasValue()) {\r\n          @if (showCountOnly()) {\r\n            <span\r\n              class=\"solaris-multi-select__chip\"\r\n              [solarisTooltip]=\"countTooltipText()\"\r\n              [solarisTooltipTrigger]=\"'hover'\"\r\n              tabindex=\"0\"\r\n            >\r\n              <span class=\"solaris-multi-select__chip-label\">{{\r\n                summaryText()\r\n              }}</span>\r\n            </span>\r\n          } @else {\r\n            <div\r\n              class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\r\n            >\r\n              @for (opt of autoVisibleChips(); track opt) {\r\n                <span class=\"solaris-multi-select__chip\" role=\"listitem\">\r\n                  <span class=\"solaris-multi-select__chip-label\">{{\r\n                    getOptionDisplayLabel(opt)\r\n                  }}</span>\r\n                  @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"solaris-multi-select__chip-remove\"\r\n                      [attr.aria-label]=\"removeChipAriaLabel()\"\r\n                      (click)=\"removeChip(opt, $event)\"\r\n                      tabindex=\"-1\"\r\n                    >\r\n                      <solaris-icon name=\"x\" [decorative]=\"true\" />\r\n                    </button>\r\n                  }\r\n                </span>\r\n              }\r\n              @if (autoShowOverflow()) {\r\n                <span\r\n                  class=\"solaris-multi-select__chip-overflow\"\r\n                  [solarisTooltip]=\"autoOverflowTooltipText()\"\r\n                  [solarisTooltipTrigger]=\"'hover'\"\r\n                  tabindex=\"0\"\r\n                  [attr.aria-label]=\"\r\n                    '+ ' +\r\n                    autoOverflowCount() +\r\n                    ' ' +\r\n                    selectedLabels().join(', ')\r\n                  \"\r\n                  >+{{ autoOverflowCount() }}</span\r\n                >\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n        @if (searchable() && panelOpen()) {\r\n          <input\r\n            #searchInput\r\n            type=\"text\"\r\n            class=\"solaris-multi-select__search-input\"\r\n            [attr.placeholder]=\"searchPlaceholderText()\"\r\n            [value]=\"searchQuery()\"\r\n            (input)=\"onSearchInput($event)\"\r\n            (keydown)=\"onSearchKeydown($event)\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            role=\"searchbox\"\r\n            autocomplete=\"off\"\r\n          />\r\n        }\r\n        @if (!hasValue() && !(searchable() && panelOpen())) {\r\n          <span class=\"solaris-multi-select__value\">\r\n            <span class=\"solaris-multi-select__placeholder\">{{\r\n              placeholderText()\r\n            }}</span>\r\n          </span>\r\n        }\r\n      } @else {\r\n        @if (searchable() && panelOpen()) {\r\n          <input\r\n            #searchInput\r\n            type=\"text\"\r\n            class=\"solaris-multi-select__search-input\"\r\n            [attr.placeholder]=\"searchPlaceholderText()\"\r\n            [value]=\"searchQuery()\"\r\n            (input)=\"onSearchInput($event)\"\r\n            (keydown)=\"onSearchKeydown($event)\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            role=\"searchbox\"\r\n            autocomplete=\"off\"\r\n          />\r\n        } @else {\r\n          @if (hasValue()) {\r\n            @if (displayMode() === 'chips') {\r\n              <div class=\"solaris-multi-select__chips\">\r\n                @for (\r\n                  opt of selectedOptions().slice(0, maxVisibleChips());\r\n                  track opt\r\n                ) {\r\n                  <span class=\"solaris-multi-select__chip\" role=\"listitem\">\r\n                    <span class=\"solaris-multi-select__chip-label\">{{\r\n                      getOptionDisplayLabel(opt)\r\n                    }}</span>\r\n                    @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"solaris-multi-select__chip-remove\"\r\n                        [attr.aria-label]=\"removeChipAriaLabel()\"\r\n                        (click)=\"removeChip(opt, $event)\"\r\n                        tabindex=\"-1\"\r\n                      >\r\n                        <solaris-icon name=\"x\" [decorative]=\"true\" />\r\n                      </button>\r\n                    }\r\n                  </span>\r\n                }\r\n                @if (overflowCount() > 0) {\r\n                  <span\r\n                    class=\"solaris-multi-select__chip-overflow\"\r\n                    [attr.aria-label]=\"\r\n                      '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\r\n                    \"\r\n                  >\r\n                    {{ overflowText() }}\r\n                  </span>\r\n                }\r\n              </div>\r\n            } @else if (displayMode() === 'comma') {\r\n              <span class=\"solaris-multi-select__value\">\r\n                <span class=\"solaris-multi-select__value-text\">{{\r\n                  commaText()\r\n                }}</span>\r\n              </span>\r\n            } @else {\r\n              <span\r\n                class=\"solaris-multi-select__chip\"\r\n                [solarisTooltip]=\"countTooltipText()\"\r\n                [solarisTooltipTrigger]=\"'hover'\"\r\n                tabindex=\"0\"\r\n              >\r\n                <span class=\"solaris-multi-select__chip-label\">{{\r\n                  summaryText()\r\n                }}</span>\r\n              </span>\r\n            }\r\n          } @else {\r\n            <span class=\"solaris-multi-select__value\">\r\n              <span class=\"solaris-multi-select__placeholder\">{{\r\n                placeholderText()\r\n              }}</span>\r\n            </span>\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <span class=\"solaris-multi-select__actions\">\r\n      @if (canClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"solaris-multi-select__clear\"\r\n          [attr.aria-label]=\"clearAriaLabel()\"\r\n          (click)=\"clearValue(); $event.stopPropagation()\"\r\n          tabindex=\"-1\"\r\n        >\r\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\r\n        </button>\r\n      }\r\n\r\n      <solaris-icon\r\n        class=\"solaris-multi-select__dropdown-icon\"\r\n        name=\"chevron-down\"\r\n        [decorative]=\"true\"\r\n        size=\"sm\"\r\n      />\r\n    </span>\r\n  </div>\r\n\r\n  <ng-content select=\"[solaris-form-suffix]\" />\r\n</solaris-form-field>\r\n\r\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\r\n  <div\r\n    class=\"solaris-multi-select__panel\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"'true'\"\r\n    [attr.id]=\"panelId\"\r\n    tabindex=\"-1\"\r\n    (click)=\"onPanelClick($event)\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    @if (selectAll() && !loading()) {\r\n      <div\r\n        class=\"solaris-multi-select__select-all\"\r\n        role=\"option\"\r\n        aria-selected=\"false\"\r\n        tabindex=\"-1\"\r\n        (click)=\"handleSelectAll()\"\r\n        (keydown.enter)=\"handleSelectAll()\"\r\n        (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\r\n        [class.solaris-multi-select__select-all--readonly]=\"\r\n          isEffectivelyReadonly()\r\n        \"\r\n      >\r\n        <span\r\n          class=\"solaris-multi-select__select-all-checkbox\"\r\n          [class.solaris-multi-select__select-all-checkbox--checked]=\"\r\n            isAllSelected()\r\n          \"\r\n          [class.solaris-multi-select__select-all-checkbox--partial]=\"\r\n            isPartialSelected()\r\n          \"\r\n        >\r\n          @if (isAllSelected()) {\r\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\r\n              <solaris-icon name=\"check\" [decorative]=\"true\" />\r\n            </span>\r\n          } @else if (isPartialSelected()) {\r\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\r\n              <solaris-icon name=\"minus\" [decorative]=\"true\" />\r\n            </span>\r\n          }\r\n        </span>\r\n        <span class=\"solaris-multi-select__select-all-label\">{{\r\n          selectAllLabelText()\r\n        }}</span>\r\n      </div>\r\n    }\r\n\r\n    @if (loading()) {\r\n      <div class=\"solaris-multi-select__loading\">\r\n        <span class=\"solaris-multi-select__loading-text\">{{\r\n          loadingTextValue()\r\n        }}</span>\r\n      </div>\r\n    } @else if (showNoResults()) {\r\n      <div class=\"solaris-multi-select__no-results\">\r\n        <span class=\"solaris-multi-select__no-results-text\">{{\r\n          noResultsTextValue()\r\n        }}</span>\r\n      </div>\r\n    } @else if (showEmpty()) {\r\n      <div class=\"solaris-multi-select__empty\">\r\n        <span class=\"solaris-multi-select__empty-text\">{{\r\n          emptyTextValue()\r\n        }}</span>\r\n      </div>\r\n    } @else {\r\n      <div\r\n        class=\"solaris-multi-select__options\"\r\n        [style.max-height]=\"panelMaxHeight()\"\r\n      >\r\n        <ng-content select=\"solaris-option, solaris-option-group\" />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{--solaris-multi-select-chip-gap: var(--solaris-spacing-1);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-text-muted);--solaris-multi-select-font-size: var(--solaris-font-size-md);--solaris-multi-select-chip-color: var(--solaris-text-default);--solaris-multi-select-value-color: var(--solaris-text-default);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-multi-select-placeholder-color: var(--solaris-text-muted);--solaris-multi-select-chip-remove-size: var(--solaris-font-size-md);--solaris-multi-select-chip-background: var(--solaris-surface-subtle);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans, system-ui)}.solaris-multi-select__trigger{flex:1;min-width:0;display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-2);padding:0;outline:none;border:none;background:transparent;cursor:pointer}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) ease;flex-shrink:0}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) ease}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__clear:hover{color:var(--solaris-text-default)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) ease}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) ease}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-border-default)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-base);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-font-size-sm);height:var(--solaris-font-size-sm)}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:.5}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { popoverTrigger: [{
+                type: ViewChild,
+                args: [SolarisPopoverTriggerDirective]
+            }], searchInputRef: [{
+                type: ViewChild,
+                args: ['searchInput', { read: ElementRef }]
+            }], triggerElement: [{
+                type: ViewChild,
+                args: ['triggerEl', { read: ElementRef }]
+            }], formFieldElement: [{
+                type: ViewChild,
+                args: ['formFieldRef', { read: ElementRef }]
+            }], options: [{
+                type: ContentChildren,
+                args: [SolarisOptionComponent, { descendants: true }]
+            }], optionGroups: [{
+                type: ContentChildren,
+                args: [SolarisOptionGroupComponent, { descendants: true }]
+            }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], emptyTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTextKey", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], loadingTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTextKey", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], clearLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabelKey", required: false }] }], removeChipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeChipLabel", required: false }] }], removeChipLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeChipLabelKey", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], noResultsTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsTextKey", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholderKey", required: false }] }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], panelMatchTriggerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMatchTriggerWidth", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], manualInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], selectAllLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabelKey", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], maxVisibleChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleChips", required: false }] }], selectedCountLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountLabel", required: false }] }], selectedCountLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountLabelKey", required: false }] }], overflowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowLabel", required: false }] }], overflowLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowLabelKey", required: false }] }], minSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSelected", required: false }] }], maxSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelected", required: false }] }], showSelectionTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionTooltip", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], triggerContentRef: [{
+                type: ViewChild,
+                args: ['triggerContent', { read: ElementRef }]
+            }] } });
+//# sourceMappingURL=multi-select.component.js.map