@i-cell/ids-angular 0.0.0-watch

package/fesm2022/i-cell-ids-angular-select.mjs

@@ -0,0 +1,549 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive, inject, ElementRef, ChangeDetectorRef, input, signal, computed, viewChild, contentChildren, contentChild, effect, isDevMode, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { SuccessStateMatcher, ErrorStateMatcher, IdsFormFieldControl, IdsFormFieldComponent, formFieldControlClass, IdsOptionComponent, IDS_OPTION_GROUP, _countGroupLabelsBeforeOption, _getOptionScrollPosition, IDS_FORM_FIELD_CONTROL, IDS_OPTION_PARENT_COMPONENT } from '@i-cell/ids-angular/forms';
+import { LiveAnnouncer, ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import { SelectionModel } from '@angular/cdk/collections';
+import { hasModifierKey } from '@angular/cdk/keycodes';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ValueChangeEvent, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { coerceNumberAttribute, createClassList } from '@i-cell/ids-angular/core';
+import { IdsIconComponent } from '@i-cell/ids-angular/icon';
+import { filter, first } from 'rxjs';
+
+const IDS_SELECT_DEFAULT_CONFIG = new InjectionToken('IDS_SELECT_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_SELECT_DEFAULT_CONFIG_FACTORY,
+});
+function IDS_SELECT_DEFAULT_CONFIG_FACTORY() {
+    return {
+        errorStateMatcher: ErrorStateMatcher,
+        successStateMatcher: SuccessStateMatcher,
+        typeaheadDebounceInterval: 200,
+    };
+}
+
+class IdsSelectTriggerDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSelectTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsSelectTriggerDirective, isStandalone: true, selector: "ids-select-trigger", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSelectTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ids-select-trigger',
+                    standalone: true,
+                }]
+        }] });
+
+const selectConnectedPositions = [
+    {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+    },
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+    },
+    {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        panelClass: 'ids-select-panel-above',
+    },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        panelClass: 'ids-select-panel-above',
+    },
+];
+
+const defaultConfig = IDS_SELECT_DEFAULT_CONFIG_FACTORY();
+class IdsSelectComponent extends IdsFormFieldControl {
+    get _hostName() {
+        return 'select';
+    }
+    get _empty() {
+        return Boolean(this._selectionModel?.isEmpty());
+    }
+    get selected() {
+        return this.multiSelect() ? this._selectionModel?.selected : this._selectionModel?.selected?.[0];
+    }
+    get _triggerValue() {
+        if (this._empty) {
+            return '';
+        }
+        if (this.multiSelect()) {
+            const selectedOptions = this._selectionModel?.selected?.map((option) => option.viewValue());
+            return selectedOptions?.join(', ') || '';
+        }
+        return this._selectionModel?.selected?.[0].viewValue() || '';
+    }
+    constructor() {
+        super();
+        this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_SELECT_DEFAULT_CONFIG);
+        this._elementRef = inject(ElementRef);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._liveAnnouncer = inject(LiveAnnouncer);
+        this._parentFormField = inject(IdsFormFieldComponent);
+        this._connectedPositions = selectConnectedPositions;
+        this._overlayWidth = 0;
+        this.multiSelect = input(false, ...(ngDevMode ? [{ debugName: "multiSelect" }] : []));
+        this.errorStateMatcher = input(inject(this._defaultConfig.errorStateMatcher), ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : []));
+        this.successStateMatcher = input(inject(this._defaultConfig.successStateMatcher), ...(ngDevMode ? [{ debugName: "successStateMatcher" }] : []));
+        this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel", alias: 'aria-label' }] : [{ alias: 'aria-label' }]));
+        this.ariaLabelledby = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledby", alias: 'aria-labelledby' }] : [{ alias: 'aria-labelledby' }]));
+        this.valueCompareFn = input((o1, o2) => o1 === o2, ...(ngDevMode ? [{ debugName: "valueCompareFn" }] : []));
+        this.sortCompareFn = input(...(ngDevMode ? [undefined, { debugName: "sortCompareFn" }] : []));
+        this.tabIndex = input(0, ...(ngDevMode ? [{ debugName: "tabIndex", transform: coerceNumberAttribute }] : [{ transform: coerceNumberAttribute }]));
+        this.typeaheadDebounceInterval = input(this._defaultConfig.typeaheadDebounceInterval, ...(ngDevMode ? [{ debugName: "typeaheadDebounceInterval", transform: coerceNumberAttribute }] : [{ transform: coerceNumberAttribute }]));
+        this.isPanelOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPanelOpen" }] : []));
+        this.parentSize = computed(() => this._parentFormField.parentOrSelfSize(), ...(ngDevMode ? [{ debugName: "parentSize" }] : []));
+        this.parentVariant = computed(() => this._parentFormField.parentOrSelfVariant(), ...(ngDevMode ? [{ debugName: "parentVariant" }] : []));
+        this._focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : []));
+        this._canOpen = computed(() => !this.isPanelOpen() && !this.disabled() && !this.readonly() && this.options().length > 0, ...(ngDevMode ? [{ debugName: "_canOpen" }] : []));
+        this._hostClasses = computed(() => this._getHostClasses([
+            this.parentSize(),
+            this.parentVariant(),
+            this.disabled() ? 'disabled' : null,
+            this.readonly() ? 'readonly' : null,
+        ], [formFieldControlClass]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        this._panelClasses = computed(() => createClassList(`${this._hostClassName}-panel`, [
+            this.parentSize(),
+            this.parentVariant(),
+        ]), ...(ngDevMode ? [{ debugName: "_panelClasses" }] : []));
+        this._panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "_panel" }] : []));
+        this._overlayDir = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "_overlayDir" }] : []));
+        this.options = contentChildren(IdsOptionComponent, ...(ngDevMode ? [{ debugName: "options", descendants: true }] : [{ descendants: true }]));
+        this.optionGroups = contentChildren(IDS_OPTION_GROUP, ...(ngDevMode ? [{ debugName: "optionGroups", descendants: true }] : [{ descendants: true }]));
+        this._customTrigger = contentChild(IdsSelectTriggerDirective, ...(ngDevMode ? [{ debugName: "_customTrigger" }] : []));
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        this._skipPredicate = (option) => {
+            if (this.isPanelOpen()) {
+                return false;
+            }
+            return option.disabledInput();
+        };
+        this.onContainerClick = () => {
+            if (!this._focused() && !this.readonly() && !this.disabled()) {
+                this.focus();
+                this.open();
+            }
+        };
+        effect(() => {
+            this._keyManager?.withTypeAhead(this.typeaheadDebounceInterval());
+        });
+    }
+    ngOnInit() {
+        if (!this._parentFormField) {
+            throw this._createHostError('Select must be in a form field');
+        }
+        this._selectionModel = new SelectionModel(this.multiSelect(), undefined, false, this.valueCompareFn());
+        queueMicrotask(() => {
+            const control = this.ngControl()?.control;
+            if (control) {
+                control.events
+                    .pipe(filter((event) => event instanceof ValueChangeEvent), takeUntilDestroyed(this._destroyRef))
+                    .subscribe(() => {
+                    this._changeDetectorRef.markForCheck();
+                });
+            }
+        });
+        this._initErrorStateTracker();
+    }
+    ngAfterContentInit() {
+        this._initKeyManager();
+        this._selectionModel?.select(...this.options().filter((item) => item.selected()));
+        this._subscribeOptionChanges();
+    }
+    ngAfterViewInit() {
+        queueMicrotask(() => {
+            const controlDir = this.ngControl();
+            if (controlDir?.control) {
+                controlDir.control.events.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => this.updateErrorAndSuccessState());
+            }
+        });
+    }
+    updateErrorAndSuccessState() {
+        this._errorStateTracker?.updateErrorState();
+        this._successStateTracker?.updateSuccessState();
+    }
+    ngOnDestroy() {
+        this._keyManager?.destroy();
+    }
+    _initKeyManager() {
+        this._keyManager = new ActiveDescendantKeyManager(this.options())
+            .withTypeAhead(this.typeaheadDebounceInterval())
+            .withVerticalOrientation()
+            .withHorizontalOrientation('ltr')
+            .withHomeAndEnd()
+            .withPageUpDown()
+            .withAllowedModifierKeys(['shiftKey'])
+            .skipPredicate(this._skipPredicate);
+        this._keyManager.tabOut.subscribe(() => {
+            if (this.isPanelOpen()) {
+                if (!this.multiSelect() && this._keyManager?.activeItem) {
+                    this._keyManager.activeItem.selectViaInteraction();
+                }
+                this.focus();
+                this.close();
+            }
+        });
+        this._keyManager.change.subscribe(() => {
+            if (this.isPanelOpen() && this._panel()) {
+                this._scrollOptionIntoView(this._keyManager?.activeItemIndex || 0);
+            }
+        });
+    }
+    _subscribeOptionChanges() {
+        this.options().forEach((option) => {
+            option.onSelectionChange.subscribe((change) => {
+                this._handleOptionChange(change);
+            });
+        });
+    }
+    _handleOptionChange(change) {
+        const { source, selected, isUserInput } = change;
+        if (!this.multiSelect()) {
+            this._clearSelection();
+        }
+        source.selected.set(selected);
+        if (isUserInput) {
+            this._keyManager?.setActiveItem(source);
+        }
+        if (isUserInput && !this.multiSelect() && this.isPanelOpen()) {
+            this.close();
+            this.focus();
+        }
+        if (this.multiSelect()) {
+            this._sortValues();
+            if (isUserInput) {
+                this.focus();
+            }
+        }
+        if (selected) {
+            this._selectionModel?.select(source);
+        }
+        else {
+            this._selectionModel?.deselect(source);
+        }
+        this._handleChange();
+        this._onTouched();
+    }
+    _handleKeydown(event) {
+        if (!this.disabled() && !this.readonly()) {
+            this.isPanelOpen() ? this._handleOpenedPanelKeydown(event) : this._handleClosedPanelKeydown(event);
+        }
+    }
+    _handleClosedPanelKeydown(event) {
+        const manager = this._keyManager;
+        const key = event.key;
+        const isArrowKey = key === 'ArrowDown' ||
+            key === 'ArrowUp' ||
+            key === 'ArrowLeft' ||
+            key === 'ArrowRight';
+        const isOpenKey = key === 'Enter' || key === ' ';
+        if ((!manager?.isTyping() && isOpenKey && !hasModifierKey(event)) || isArrowKey) {
+            event.preventDefault();
+            this.open();
+        }
+        else if (!this.multiSelect()) {
+            const previouslySelectedOption = this.selected;
+            manager?.onKeydown(event);
+            const selectedOption = this.selected;
+            if (selectedOption?.viewValue() && previouslySelectedOption !== selectedOption) {
+                // eslint-disable-next-line no-magic-numbers
+                this._liveAnnouncer.announce(selectedOption.viewValue(), 10000);
+            }
+        }
+    }
+    _handleOpenedPanelKeydown(event) {
+        const manager = this._keyManager;
+        const key = event.key;
+        const isArrowKey = key === 'ArrowDown' || key === 'ArrowUp';
+        const isTyping = manager?.isTyping();
+        if (isArrowKey && event.altKey) {
+            event.preventDefault();
+            this.close();
+        }
+        else if (!isTyping &&
+            (key === 'Enter' || key === ' ') &&
+            manager?.activeItem &&
+            !hasModifierKey(event)) {
+            event.preventDefault();
+            manager.activeItem.selectViaInteraction();
+        }
+        else if (!isTyping && this.multiSelect() && key === 'a' && event.ctrlKey) {
+            event.preventDefault();
+            const hasDeselectedOptions = this.options().some((opt) => !opt.disabled && !opt.selected());
+            this.options().forEach((option) => {
+                if (!option.disabled) {
+                    hasDeselectedOptions ? option.select() : option.deselect();
+                }
+            });
+        }
+        else {
+            const previouslyFocusedIndex = manager?.activeItemIndex;
+            manager?.onKeydown(event);
+            if (this.multiSelect() &&
+                isArrowKey &&
+                event.shiftKey &&
+                manager?.activeItem &&
+                manager?.activeItemIndex !== previouslyFocusedIndex) {
+                manager?.activeItem.selectViaInteraction();
+            }
+        }
+    }
+    _positioningSettled() {
+        this._scrollOptionIntoView(this._keyManager?.activeItemIndex || 0);
+    }
+    _scrollOptionIntoView(index) {
+        const option = this.options()[index];
+        if (option) {
+            const panel = this._panel().nativeElement;
+            const labelCount = _countGroupLabelsBeforeOption(index, this.options(), this.optionGroups());
+            const element = option.getHostElement();
+            if (index === 0 && labelCount === 1) {
+                panel.scrollTop = 0;
+            }
+            else {
+                panel.scrollTop = _getOptionScrollPosition(element.offsetTop, element.offsetHeight, panel.scrollTop, panel.offsetHeight);
+            }
+        }
+    }
+    _sortValues() {
+        if (this.multiSelect()) {
+            const options = this.options();
+            const sortComparator = this.sortCompareFn();
+            this._selectionModel?.sort((a, b) => (sortComparator
+                ? sortComparator(a, b, options)
+                : options.indexOf(a) - options.indexOf(b)));
+        }
+    }
+    _getOverlayWidth(preferredOrigin) {
+        const refToMeasure = preferredOrigin instanceof CdkOverlayOrigin
+            ? preferredOrigin.elementRef
+            : preferredOrigin || this._elementRef;
+        return refToMeasure.nativeElement.getBoundingClientRect().width;
+    }
+    _panelAttached() {
+        this._overlayDir()?.positionChange.pipe(first()).subscribe(() => {
+            this._changeDetectorRef.detectChanges();
+            this._positioningSettled();
+        });
+    }
+    toggle() {
+        this.isPanelOpen() ? this.close() : this.open();
+    }
+    open() {
+        if (!this._canOpen()) {
+            return;
+        }
+        if (this._parentFormField) {
+            this._preferredOverlayOrigin = this._parentFormField?.getConnectedOverlayOrigin();
+        }
+        this._overlayWidth = this._getOverlayWidth(this._preferredOverlayOrigin);
+        this.isPanelOpen.set(true);
+        this._keyManager?.withHorizontalOrientation(null);
+        this._highlightCorrectOption();
+        this._changeDetectorRef.markForCheck();
+    }
+    close() {
+        if (this.isPanelOpen()) {
+            this.isPanelOpen.set(false);
+            this._keyManager?.withHorizontalOrientation('ltr');
+            this._changeDetectorRef.markForCheck();
+            this._onTouched();
+        }
+    }
+    // #region ControlValueAccessor implementation
+    writeValue(value) {
+        this._setSelectionByValue(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+        this._changeDetectorRef.markForCheck();
+    }
+    // #endregion
+    _setSelectionByValue(value) {
+        this.options().forEach((option) => {
+            option.setInactiveStyles();
+            option.selected.set(false);
+        });
+        this._selectionModel?.clear();
+        this._rawValue = value;
+        if (this.options().length === 0) {
+            return;
+        }
+        if (this.multiSelect() && value) {
+            if (!Array.isArray(value)) {
+                throw this._createHostError('value must be an array in multiple-selection mode');
+            }
+            value.forEach((currentValue) => this._selectValue(currentValue));
+            this._sortValues();
+        }
+        else {
+            const correspondingOption = this._selectValue(value);
+            if (correspondingOption) {
+                this._keyManager?.updateActiveItem(correspondingOption);
+            }
+            else if (!this.isPanelOpen()) {
+                this._keyManager?.updateActiveItem(-1);
+            }
+        }
+    }
+    _selectValue(value) {
+        const valueCompareFn = this.valueCompareFn();
+        const correspondingOption = this.options().find((option) => {
+            if (this._selectionModel?.isSelected(option)) {
+                return false;
+            }
+            try {
+                return valueCompareFn?.(option.value(), value);
+            }
+            catch (error) {
+                if (isDevMode()) {
+                    console.warn(error);
+                }
+                return false;
+            }
+        });
+        if (correspondingOption) {
+            correspondingOption.selected.set(true);
+            this._selectionModel?.select(correspondingOption);
+        }
+        return correspondingOption;
+    }
+    _clearSelection() {
+        this._selectionModel?.clear();
+        this.options().forEach((option) => {
+            option.selected.set(false);
+        });
+    }
+    _handleChange() {
+        const selectionModelValues = this._selectionModel?.selected?.map((item) => item.value());
+        if (this.multiSelect()) {
+            this._onChange(selectionModelValues);
+        }
+        else {
+            this._onChange(selectionModelValues?.[0]);
+        }
+        this._changeDetectorRef.markForCheck();
+    }
+    _highlightCorrectOption() {
+        if (this._keyManager) {
+            if (this._empty) {
+                let firstEnabledOptionIndex = -1;
+                for (let index = 0; index < this.options().length; index++) {
+                    const option = this.options()[index];
+                    if (!option.disabled) {
+                        firstEnabledOptionIndex = index;
+                        break;
+                    }
+                }
+                this._keyManager.setActiveItem(firstEnabledOptionIndex);
+            }
+            else {
+                if (this._selectionModel) {
+                    this._keyManager.setActiveItem(this._selectionModel.selected[0]);
+                }
+            }
+        }
+    }
+    isOptionPreSelectedByValue(optionValue) {
+        if (this._rawValue === undefined) {
+            return false;
+        }
+        if (this.multiSelect() && Array.isArray(this._rawValue)) {
+            return this._rawValue.some((value) => optionValue != null && value === optionValue);
+        }
+        return optionValue === this._rawValue;
+    }
+    _onFocus() {
+        if (!this.disabled()) {
+            this._focused.set(true);
+        }
+    }
+    _onBlur() {
+        this._focused.set(false);
+        this._keyManager?.cancelTypeahead();
+        if (!this.disabled() && !this.isPanelOpen()) {
+            this._onTouched();
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    _getAriaActiveDescendant() {
+        if (this.isPanelOpen() && this._keyManager?.activeItem) {
+            return this._keyManager.activeItem.id();
+        }
+        return null;
+    }
+    focus(options) {
+        this._elementRef.nativeElement.focus(options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsSelectComponent, isStandalone: true, selector: "ids-select[ngModel]:not([formControl]):not([formControlName]),\n              ids-select[formControl]:not([ngModel]):not([formControlName]),\n              ids-select[formControlName]:not([ngModel]):not([formControl])", inputs: { multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, successStateMatcher: { classPropertyName: "successStateMatcher", publicName: "successStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, valueCompareFn: { classPropertyName: "valueCompareFn", publicName: "valueCompareFn", isSignal: true, isRequired: false, transformFunction: null }, sortCompareFn: { classPropertyName: "sortCompareFn", publicName: "sortCompareFn", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDebounceInterval: { classPropertyName: "typeaheadDebounceInterval", publicName: "typeaheadDebounceInterval", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "select", "aria-autocomplete": "none", "aria-haspopup": "listbox" }, listeners: { "keydown": "_handleKeydown($event)", "focus": "focus()", "blur": "_onBlur()" }, properties: { "attr.tabindex": "disabled() ? -1 : tabIndex()", "attr.aria-controls": "isPanelOpen() ? id() + \"-panel\" : null", "attr.aria-owns": "isPanelOpen() ? id() + \"-panel\" : null", "attr.aria-expanded": "isPanelOpen()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledby() || null", "attr.aria-required": "required().toString()", "attr.aria-disabled": "disabled().toString()", "attr.aria-invalid": "hasErrorState()", "attr.aria-activedescendant": "_getAriaActiveDescendant()" } }, providers: [
+            { provide: IDS_FORM_FIELD_CONTROL, useExisting: IdsSelectComponent },
+            { provide: IDS_OPTION_PARENT_COMPONENT, useExisting: IdsSelectComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => IdsSelectComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "options", predicate: IdsOptionComponent, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: IDS_OPTION_GROUP, descendants: true, isSignal: true }, { propertyName: "_customTrigger", first: true, predicate: IdsSelectTriggerDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #trigger #fallbackOverlayOrigin=\"cdkOverlayOrigin\" cdk-overlay-origin class=\"ids-select__trigger\" (click)=\"open()\">\n  <div class=\"ids-select__value\">\n    @if (_empty) {\n      <span class=\"ids-select__placeholder\">{{ placeholder() }}</span>\n    } @else {\n      <span class=\"ids-select__value-text\">\n        @if (_customTrigger()) {\n          <ng-content select=\"ids-select-trigger\" />\n        } @else {\n          {{ _triggerValue }}\n        }\n      </span>\n    }\n  </div>\n\n  <div class=\"ids-select__arrow\">\n    <ids-icon fontIcon=\"chevron-down\" />\n  </div>\n</div>\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isPanelOpen()\"\n  [cdkConnectedOverlayPositions]=\"_connectedPositions\"\n  [cdkConnectedOverlayWidth]=\"_overlayWidth\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"_panelAttached()\"\n  (detach)=\"close()\"\n>\n  <div\n    #panel\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id() + '-panel'\"\n    [attr.aria-multiselectable]=\"multiSelect()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby()\"\n    [class]=\"_panelClasses()\"\n    (keydown)=\"_handleKeydown($event)\"\n  >\n    <ng-content />\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `ids-select[ngModel]:not([formControl]):not([formControlName]),
+              ids-select[formControl]:not([ngModel]):not([formControlName]),
+              ids-select[formControlName]:not([ngModel]):not([formControl])`, imports: [
+                        CdkOverlayOrigin,
+                        CdkConnectedOverlay,
+                        IdsIconComponent,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: IDS_FORM_FIELD_CONTROL, useExisting: IdsSelectComponent },
+                        { provide: IDS_OPTION_PARENT_COMPONENT, useExisting: IdsSelectComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => IdsSelectComponent),
+                            multi: true,
+                        },
+                    ], host: {
+                        'role': 'select',
+                        'aria-autocomplete': 'none',
+                        'aria-haspopup': 'listbox',
+                        '[attr.tabindex]': 'disabled() ? -1 : tabIndex()',
+                        '[attr.aria-controls]': 'isPanelOpen() ? id() + "-panel" : null',
+                        '[attr.aria-owns]': 'isPanelOpen() ? id() + "-panel" : null',
+                        '[attr.aria-expanded]': 'isPanelOpen()',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-labelledby]': 'ariaLabelledby() || null',
+                        '[attr.aria-required]': 'required().toString()',
+                        '[attr.aria-disabled]': 'disabled().toString()',
+                        '[attr.aria-invalid]': 'hasErrorState()',
+                        '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',
+                        '(keydown)': '_handleKeydown($event)',
+                        '(focus)': 'focus()',
+                        '(blur)': '_onBlur()',
+                    }, template: "<div #trigger #fallbackOverlayOrigin=\"cdkOverlayOrigin\" cdk-overlay-origin class=\"ids-select__trigger\" (click)=\"open()\">\n  <div class=\"ids-select__value\">\n    @if (_empty) {\n      <span class=\"ids-select__placeholder\">{{ placeholder() }}</span>\n    } @else {\n      <span class=\"ids-select__value-text\">\n        @if (_customTrigger()) {\n          <ng-content select=\"ids-select-trigger\" />\n        } @else {\n          {{ _triggerValue }}\n        }\n      </span>\n    }\n  </div>\n\n  <div class=\"ids-select__arrow\">\n    <ids-icon fontIcon=\"chevron-down\" />\n  </div>\n</div>\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isPanelOpen()\"\n  [cdkConnectedOverlayPositions]=\"_connectedPositions\"\n  [cdkConnectedOverlayWidth]=\"_overlayWidth\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"_panelAttached()\"\n  (detach)=\"close()\"\n>\n  <div\n    #panel\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id() + '-panel'\"\n    [attr.aria-multiselectable]=\"multiSelect()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby()\"\n    [class]=\"_panelClasses()\"\n    (keydown)=\"_handleKeydown($event)\"\n  >\n    <ng-content />\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IDS_SELECT_DEFAULT_CONFIG, IDS_SELECT_DEFAULT_CONFIG_FACTORY, IdsSelectComponent, IdsSelectTriggerDirective };
+//# sourceMappingURL=i-cell-ids-angular-select.mjs.map