@educarehq/solaris-ui 0.2.0 → 0.3.1

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

@@ -1,1119 +0,0 @@
-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