igniteui-webcomponents 4.5.0 → 4.7.0

package/components/select/select.js

@@ -7,312 +7,437 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html } from 'lit';
 import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { live } from 'lit/directives/live.js';
-import { styleMap } from 'lit/directives/style-map.js';
+import IgcSelectGroupComponent from './select-group.js';
+import IgcSelectHeaderComponent from './select-header.js';
+import IgcSelectItemComponent from './select-item.js';
+import { styles } from './themes/select.base.css.js';
+import { all } from './themes/themes.js';
 import { themeSymbol, themes } from '../../theming/theming-decorator.js';
+import { addKeybindings, altKey, arrowDown, arrowLeft, arrowRight, arrowUp, endKey, enterKey, escapeKey, homeKey, spaceBar, tabKey, } from '../common/controllers/key-bindings.js';
+import { addRootClickHandler } from '../common/controllers/root-click.js';
+import { addRootScrollHandler } from '../common/controllers/root-scroll.js';
 import { alternateName } from '../common/decorators/alternateName.js';
 import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
+import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
+import { IgcBaseComboBoxLikeComponent, getActiveItems, getItems, getNextActiveItem, getPreviousActiveItem, setInitialSelectionState, } from '../common/mixins/combo-box.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/form-associated-required.js';
 import { partNameMap } from '../common/util.js';
 import { requiredValidator } from '../common/validators.js';
-import IgcDropdownComponent from '../dropdown/dropdown.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcInputComponent from '../input/input.js';
-import IgcSelectGroupComponent from './select-group.js';
-import IgcSelectHeaderComponent from './select-header.js';
-import IgcSelectItemComponent from './select-item.js';
-import { styles } from './themes/light/select.base.css.js';
-import { styles as bootstrap } from './themes/light/select.bootstrap.css.js';
-import { styles as fluent } from './themes/light/select.fluent.css.js';
-import { styles as indigo } from './themes/light/select.indigo.css.js';
-import { styles as material } from './themes/light/select.material.css.js';
-let IgcSelectComponent = class IgcSelectComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcDropdownComponent)) {
+import IgcPopoverComponent from '../popover/popover.js';
+let IgcSelectComponent = class IgcSelectComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcBaseComboBoxLikeComponent)) {
     static register() {
-        registerComponent(this, IgcIconComponent, IgcInputComponent, IgcSelectGroupComponent, IgcSelectHeaderComponent, IgcSelectItemComponent);
+        registerComponent(this, IgcIconComponent, IgcInputComponent, IgcPopoverComponent, IgcSelectGroupComponent, IgcSelectHeaderComponent, IgcSelectItemComponent);
+    }
+    get isMaterialTheme() {
+        return this[themeSymbol] === 'material';
+    }
+    get _activeItems() {
+        return Array.from(getActiveItems(this, IgcSelectItemComponent.tagName));
+    }
+    get hasExpandedIcon() {
+        return this._expandedIconSlot.length > 0;
+    }
+    get hasPrefixes() {
+        return this.inputPrefix.length > 0;
+    }
+    get hasSuffixes() {
+        return this.inputSuffix.length > 0;
+    }
+    get hasHelperText() {
+        return this.helperText.length > 0;
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._updateValue(value);
+        const item = this.getItem(this._value);
+        item ? this.setSelectedItem(item) : this.clearSelectedItem();
+    }
+    get items() {
+        return Array.from(getItems(this, IgcSelectItemComponent.tagName));
+    }
+    get groups() {
+        return Array.from(getItems(this, IgcSelectGroupComponent.tagName));
+    }
+    get selectedItem() {
+        return this._selectedItem;
+    }
+    scrollStrategyChanged() {
+        this._rootScrollController.update({ resetListeners: true });
+    }
+    openChange() {
+        this._rootClickController.update();
+        this._rootScrollController.update();
     }
     constructor() {
         super();
-        this.searchTerm = '';
-        this.lastKeyTime = Date.now();
+        this._searchTerm = '';
+        this._lastKeyTime = 0;
+        this._rootClickController = addRootClickHandler(this, {
+            hideCallback: () => this._hide(true),
+        });
+        this._rootScrollController = addRootScrollHandler(this, {
+            hideCallback: () => this._hide(true),
+        });
+        this._selectedItem = null;
         this.validators = [requiredValidator];
-        this.targetKeyHandlers = new Map(Object.entries({
-            ' ': this.onTargetEnterKey,
-            Tab: this.onTargetTabKey,
-            Escape: this.onEscapeKey,
-            Enter: this.onTargetEnterKey,
-            ArrowLeft: this.onTargetArrowLeftKeyDown,
-            ArrowRight: this.onTargetArrowRightKeyDown,
-            ArrowUp: this.onTargetArrowUpKeyDown,
-            ArrowDown: this.onTargetArrowDownKeyDown,
-            Home: this.onTargetHomeKey,
-            End: this.onTargetEndKey,
-        }));
         this.outlined = false;
+        this.distance = 0;
+        this.placement = 'bottom-start';
         this.positionStrategy = 'fixed';
+        this.scrollStrategy = 'scroll';
         this.sameWidth = true;
         this.flip = true;
-        this.size = 'medium';
-        this.addEventListener('igcChange', () => {
-            if (this.open)
-                this.target.focus();
-        });
-    }
-    handleFocusout() { }
-    inputSlotChanged() {
-        this.requestUpdate();
-    }
-    focus(options) {
-        this.target.focus(options);
-    }
-    blur() {
-        this.target.blur();
-        super.blur();
-    }
-    reportValidity() {
-        const valid = super.reportValidity();
-        if (!valid)
-            this.target.focus();
-        return valid;
+        addKeybindings(this, {
+            skip: () => this.disabled,
+            bindingDefaults: { preventDefault: true, triggers: ['keydownRepeat'] },
+        })
+            .set([altKey, arrowDown], this.altArrowDown)
+            .set([altKey, arrowUp], this.altArrowUp)
+            .set(arrowDown, this.onArrowDown)
+            .set(arrowUp, this.onArrowUp)
+            .set(arrowLeft, this.onArrowUp)
+            .set(arrowRight, this.onArrowDown)
+            .set(tabKey, this.onTabKey, { preventDefault: false })
+            .set(escapeKey, this.onEscapeKey)
+            .set(homeKey, this.onHomeKey)
+            .set(endKey, this.onEndKey)
+            .set(spaceBar, this.onSpaceBarKey)
+            .set(enterKey, this.onEnterKey);
+        this.addEventListener('keydown', this.handleSearch);
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('focusout', this.handleFocusOut);
     }
     async firstUpdated() {
-        super.firstUpdated();
         await this.updateComplete;
-        if (!this.selectedItem && this.value) {
-            this.updateSelected();
+        const selected = setInitialSelectionState(this.items);
+        if (this.value && !selected) {
+            this._selectItem(this.getItem(this.value), false);
         }
-        else if (this.selectedItem && !this.value) {
-            this._defaultValue = this.selectedItem.value;
+        if (selected && selected.value !== this.value) {
+            this._defaultValue = selected.value;
+            this._selectItem(selected, false);
         }
         if (this.autofocus) {
-            this.target.focus();
+            this.focus();
         }
         this.updateValidity();
     }
-    updateValue() {
-        var _a;
-        this.value = (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value;
-    }
-    updateSelected() {
-        var _a;
-        if (this.allItems.length === 0) {
-            this.setFormValue(null);
-            this.updateValidity();
-            this.setInvalidState();
+    handleFocusIn({ relatedTarget }) {
+        this._dirty = true;
+        if (this.contains(relatedTarget) || this.open) {
             return;
         }
-        if (((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) !== this.value) {
-            const matches = this.allItems.filter((i) => i.value === this.value);
-            const index = this.allItems.indexOf(matches.at(-1));
-            if (index === -1) {
-                this.value = undefined;
-                this.clearSelection();
-                this.setFormValue(null);
-                this.updateValidity();
-                this.setInvalidState();
-                return;
-            }
-            this.select(index);
+        this.emitEvent('igcFocus');
+    }
+    handleFocusOut({ relatedTarget }) {
+        if (this.contains(relatedTarget)) {
+            return;
         }
-        this.setFormValue(this.value);
-        this.updateValidity();
-        this.setInvalidState();
+        this.checkValidity();
+        this.emitEvent('igcBlur');
     }
-    selectNext() {
-        var _a;
-        const activeItemIndex = [...this.allItems].indexOf((_a = this.selectedItem) !== null && _a !== void 0 ? _a : this.activeItem);
-        const next = this.getNearestSiblingFocusableItemIndex(activeItemIndex !== null && activeItemIndex !== void 0 ? activeItemIndex : -1, 1);
-        this.selectItem(this.allItems[next], true);
-    }
-    selectPrev() {
-        var _a;
-        const activeItemIndex = [...this.allItems].indexOf((_a = this.selectedItem) !== null && _a !== void 0 ? _a : this.activeItem);
-        const prev = this.getNearestSiblingFocusableItemIndex(activeItemIndex !== null && activeItemIndex !== void 0 ? activeItemIndex : -1, -1);
-        this.selectItem(this.allItems[prev], true);
-    }
-    selectInteractiveItem(index) {
-        const item = this.allItems
-            .filter((i) => !i.disabled)
-            .at(index);
-        if (item.value !== this.value) {
-            this.selectItem(item, true);
+    handleClick(event) {
+        const item = event.target;
+        if (this._activeItems.includes(item)) {
+            this._selectItem(item);
         }
     }
-    searchItem(event) {
+    handleChange(item) {
+        return this.emitEvent('igcChange', { detail: item });
+    }
+    handleSearch(event) {
         if (!/^.$/u.test(event.key)) {
             return;
         }
-        const currentTime = Date.now();
-        if (currentTime - this.lastKeyTime > 500) {
-            this.searchTerm = '';
+        event.preventDefault();
+        const now = Date.now();
+        if (now - this._lastKeyTime > 500) {
+            this._searchTerm = '';
         }
-        this.searchTerm += event.key;
-        this.lastKeyTime = currentTime;
-        const item = this.allItems
-            .filter((i) => !i.disabled)
-            .find((i) => {
-            var _a;
-            return (_a = i.textContent) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase().startsWith(this.searchTerm.toLowerCase());
-        });
-        if (item && this.value !== item.value) {
-            this.open ? this.activateItem(item) : this.selectItem(item);
+        this._lastKeyTime = now;
+        this._searchTerm += event.key.toLocaleLowerCase();
+        const item = this._activeItems.find((item) => item.textContent
+            ?.trim()
+            .toLocaleLowerCase()
+            .startsWith(this._searchTerm));
+        if (item) {
+            this.open ? this.activateItem(item) : this._selectItem(item);
         }
     }
-    handleFocus() {
-        this._dirty = true;
-        if (this.open)
-            return;
-        this.emitEvent('igcFocus');
+    onEnterKey() {
+        this.open && this._activeItem
+            ? this._selectItem(this._activeItem)
+            : this.handleAnchorClick();
     }
-    handleBlur() {
-        this.setInvalidState();
-        if (this.open)
-            return;
-        this.emitEvent('igcBlur');
+    onSpaceBarKey() {
+        if (!this.open) {
+            this.handleAnchorClick();
+        }
     }
-    onTargetTabKey() {
-        this.target.blur();
-        if (this.open)
-            this.hide();
+    onArrowDown() {
+        const item = getNextActiveItem(this.items, this._activeItem);
+        this.open ? this._navigateToActiveItem(item) : this._selectItem(item);
     }
-    onTargetEnterKey() {
-        !this.open ? this.target.click() : this.onEnterKey();
+    onArrowUp() {
+        const item = getPreviousActiveItem(this.items, this._activeItem);
+        this.open ? this._navigateToActiveItem(item) : this._selectItem(item);
     }
-    onTargetArrowLeftKeyDown() {
-        !this.open ? this.selectPrev() : this.onArrowUpKeyDown();
+    altArrowDown() {
+        if (!this.open) {
+            this._show(true);
+        }
     }
-    onTargetArrowRightKeyDown() {
-        !this.open ? this.selectNext() : this.onArrowDownKeyDown();
+    async altArrowUp() {
+        if (this.open && (await this._hide(true))) {
+            this.input.focus();
+        }
     }
-    onTargetArrowUpKeyDown(event) {
-        if (event.altKey) {
-            this.toggle();
+    async onEscapeKey() {
+        if (await this._hide(true)) {
+            this.input.focus();
         }
-        else {
-            !this.open ? this.selectPrev() : this.onArrowUpKeyDown();
+    }
+    onTabKey(event) {
+        if (this.open) {
+            event.preventDefault();
+            this._selectItem(this._activeItem);
+            this._hide(true);
         }
     }
-    onTargetArrowDownKeyDown(event) {
-        if (event.altKey) {
-            this.toggle();
+    onHomeKey() {
+        const item = this._activeItems.at(0);
+        this.open ? this._navigateToActiveItem(item) : this._selectItem(item);
+    }
+    onEndKey() {
+        const item = this._activeItems.at(-1);
+        this.open ? this._navigateToActiveItem(item) : this._selectItem(item);
+    }
+    inputSlotChanged() {
+        this.requestUpdate();
+    }
+    activateItem(item) {
+        if (this._activeItem) {
+            this._activeItem.active = false;
         }
-        else {
-            !this.open ? this.selectNext() : this.onArrowDownKeyDown();
+        this._activeItem = item;
+        this._activeItem.active = true;
+    }
+    setSelectedItem(item) {
+        if (this._selectedItem) {
+            this._selectedItem.selected = false;
         }
+        this._selectedItem = item;
+        this._selectedItem.selected = true;
+        return this._selectedItem;
     }
-    onTargetHomeKey() {
-        !this.open ? this.selectInteractiveItem(0) : this.onHomeKey();
+    _selectItem(item, emit = true) {
+        if (!item) {
+            this.clearSelectedItem();
+            this._updateValue();
+            return null;
+        }
+        const items = this.items;
+        const [previous, current] = [
+            items.indexOf(this._selectedItem),
+            items.indexOf(item),
+        ];
+        if (previous === current) {
+            return this._selectedItem;
+        }
+        const newItem = this.setSelectedItem(item);
+        this.activateItem(newItem);
+        this._updateValue(newItem.value);
+        if (emit)
+            this.handleChange(newItem);
+        if (emit && this.open)
+            this.input.focus();
+        if (emit && !this.keepOpenOnSelect)
+            this._hide(true);
+        return this._selectedItem;
     }
-    onTargetEndKey() {
-        !this.open ? this.selectInteractiveItem(-1) : this.onEndKey();
+    _navigateToActiveItem(item) {
+        if (item) {
+            this.activateItem(item);
+            item.scrollIntoView({ behavior: 'auto', block: 'nearest' });
+        }
     }
-    handleTargetKeyDown(event) {
-        var _a;
-        event.stopPropagation();
-        if (this.targetKeyHandlers.has(event.key)) {
-            event.preventDefault();
-            (_a = this.targetKeyHandlers.get(event.key)) === null || _a === void 0 ? void 0 : _a.call(this, event);
+    _updateValue(value) {
+        this._value = value;
+        this.setFormValue(this._value ? this._value : null);
+        this.updateValidity();
+        this.setInvalidState();
+    }
+    clearSelectedItem() {
+        if (this._selectedItem) {
+            this._selectedItem.selected = false;
         }
-        else {
-            this.searchItem(event);
+        this._selectedItem = null;
+    }
+    getItem(value) {
+        return this.items.find((item) => item.value === value);
+    }
+    _stopPropagation(e) {
+        e.stopPropagation();
+    }
+    focus(options) {
+        this.input.focus(options);
+    }
+    blur() {
+        this.input.blur();
+        super.blur();
+    }
+    reportValidity() {
+        const valid = super.reportValidity();
+        if (!valid)
+            this.input.focus();
+        return valid;
+    }
+    navigateTo(value) {
+        const item = typeof value === 'string' ? this.getItem(value) : this.items[value];
+        if (item) {
+            this._navigateToActiveItem(item);
         }
+        return item ?? null;
     }
-    get hasPrefixes() {
-        return this.inputPrefix.length > 0;
+    select(value) {
+        const item = typeof value === 'string' ? this.getItem(value) : this.items[value];
+        return item ? this._selectItem(item, false) : null;
     }
-    get hasSuffixes() {
-        return this.inputSuffix.length > 0;
+    clearSelection() {
+        this._updateValue();
+        this.clearSelectedItem();
     }
-    render() {
-        var _a, _b;
-        const openIcon = this[themeSymbol] === 'material' ? 'keyboard_arrow_up' : 'arrow_drop_up';
-        const closeIcon = this[themeSymbol] === 'material'
+    renderInputSlots() {
+        const prefixName = this.hasPrefixes ? 'prefix' : '';
+        const suffixName = this.hasSuffixes ? 'suffix' : '';
+        return html `
+      <span slot=${prefixName}>
+        <slot name="prefix" @slotchange=${this.inputSlotChanged}></slot>
+      </span>
+
+      <span slot=${suffixName}>
+        <slot name="suffix" @slotchange=${this.inputSlotChanged}></slot>
+      </span>
+    `;
+    }
+    renderToggleIcon() {
+        const parts = partNameMap({ 'toggle-icon': true, filled: this.value });
+        const iconHidden = this.open && this.hasExpandedIcon;
+        const iconExpandedHidden = !this.hasExpandedIcon || !this.open;
+        const openIcon = this.isMaterialTheme
+            ? 'keyboard_arrow_up'
+            : 'arrow_drop_up';
+        const closeIcon = this.isMaterialTheme
             ? 'keyboard_arrow_down'
             : 'arrow_drop_down';
         return html `
-      <div
-        role="combobox"
-        tabindex=${this.disabled ? -1 : 0}
-        aria-controls="dropdown"
-        aria-describedby="helper-text"
-        aria-disabled=${this.disabled}
-        @focusin=${this.handleFocus}
-        @focusout=${this.handleBlur}
-        @keydown=${this.handleTargetKeyDown}
-        @click=${this.handleTargetClick}
-      >
-        <igc-input
-          id="input"
-          readonly
-          exportparts="container: input, input: native-input, label, prefix, suffix"
-          value=${ifDefined((_b = (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim())}
-          placeholder=${ifDefined(this.placeholder)}
-          label=${ifDefined(this.label)}
-          size=${this.size}
-          tabindex="-1"
-          .disabled=${this.disabled}
-          .required=${this.required}
-          .invalid=${live(this.invalid)}
-          .outlined=${this.outlined}
-          @igcBlur=${(e) => e.stopPropagation()}
-          @igcFocus=${(e) => e.stopPropagation()}
+      <span slot="suffix" part=${parts} aria-hidden="true">
+        <slot
+          name="toggle-icon"
+          ?hidden=${iconHidden}
+          @slotchange=${this.inputSlotChanged}
         >
-          <span slot=${this.hasPrefixes ? 'prefix' : ''}>
-            <slot name="prefix" @slotchange=${this.inputSlotChanged}></slot>
-          </span>
-          <span slot=${this.hasSuffixes ? 'suffix' : ''}>
-            <slot name="suffix" @slotchange=${this.inputSlotChanged}></slot>
-          </span>
-          <span
-            slot="suffix"
-            part="${partNameMap({
-            'toggle-icon': true,
-            filled: this.value,
-        })}"
-          >
-            <slot name="toggle-icon">
-              <igc-icon
-                size=${this.size}
-                name=${this.open ? openIcon : closeIcon}
-                collection="internal"
-                aria-hidden="true"
-              ></igc-icon>
-            </slot>
-          </span>
-        </igc-input>
-      </div>
+          <igc-icon
+            name=${this.open ? openIcon : closeIcon}
+            collection="internal"
+          ></igc-icon>
+        </slot>
+        <slot
+          name="toggle-icon-expanded"
+          ?hidden=${iconExpandedHidden}
+          @slotchange=${this.inputSlotChanged}
+        ></slot>
+      </span>
+    `;
+    }
+    renderHelperText() {
+        return html `
       <div
         id="helper-text"
         part="helper-text"
-        ?hidden="${this.helperText.length === 0}"
+        slot="anchor"
+        ?hidden=${!this.hasHelperText}
       >
-        <slot name="helper-text" @slotchange="${this.inputSlotChanged}"></slot>
+        <slot name="helper-text" @slotchange=${this.inputSlotChanged}></slot>
       </div>
+    `;
+    }
+    renderInputAnchor() {
+        const value = this.selectedItem?.textContent?.trim();
+        return html `
+      <igc-input
+        id="input"
+        slot="anchor"
+        role="combobox"
+        readonly
+        aria-controls="dropdown"
+        aria-describedby="helper-text"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        exportparts="container: input, input: native-input, label, prefix, suffix"
+        tabIndex=${this.disabled ? -1 : 0}
+        value=${ifDefined(value)}
+        placeholder=${ifDefined(this.placeholder)}
+        label=${ifDefined(this.label)}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .invalid=${this.invalid}
+        .outlined=${this.outlined}
+        @click=${this.handleAnchorClick}
+        @igcFocus=${this._stopPropagation}
+        @igcBlur=${this._stopPropagation}
+      >
+        ${this.renderInputSlots()} ${this.renderToggleIcon()}
+      </igc-input>
+
+      ${this.renderHelperText()}
+    `;
+    }
+    renderDropdown() {
+        return html `<div part="base" .inert=${!this.open}>
       <div
-        part="base"
-        style=${styleMap({ position: this.positionStrategy })}
+        id="dropdown"
+        role="listbox"
+        part="list"
+        aria-labelledby="input"
         @click=${this.handleClick}
-        ${this.toggleController.toggleDirective}
       >
-        <div id="dropdown" role="listbox" part="list" aria-labelledby="input">
-          <slot name="header"></slot>
-          <slot></slot>
-          <slot name="footer"></slot>
-        </div>
+        <slot name="header"></slot>
+        <slot></slot>
+        <slot name="footer"></slot>
       </div>
-    `;
+    </div>`;
+    }
+    render() {
+        return html `<igc-popover
+      ?open=${this.open}
+      flip
+      shift
+      same-width
+      strategy="fixed"
+      .offset=${this.distance}
+      .placement=${this.placement}
+      >${this.renderInputAnchor()} ${this.renderDropdown()}
+    </igc-popover>`;
     }
 };
 IgcSelectComponent.tagName = 'igc-select';
 IgcSelectComponent.styles = styles;
 __decorate([
-    queryAssignedElements({ flatten: true, selector: 'igc-select-item' })
-], IgcSelectComponent.prototype, "items", void 0);
+    state()
+], IgcSelectComponent.prototype, "_selectedItem", void 0);
+__decorate([
+    state()
+], IgcSelectComponent.prototype, "_activeItem", void 0);
 __decorate([
-    queryAssignedElements({ flatten: true, selector: 'igc-select-group' })
-], IgcSelectComponent.prototype, "groups", void 0);
+    query(IgcInputComponent.tagName, true)
+], IgcSelectComponent.prototype, "input", void 0);
 __decorate([
     queryAssignedElements({ slot: 'helper-text' })
 ], IgcSelectComponent.prototype, "helperText", void 0);
@@ -323,32 +448,44 @@ __decorate([
     queryAssignedElements({ slot: 'prefix' })
 ], IgcSelectComponent.prototype, "inputPrefix", void 0);
 __decorate([
-    state()
-], IgcSelectComponent.prototype, "selectedItem", void 0);
-__decorate([
-    query('div[role="combobox"]')
-], IgcSelectComponent.prototype, "target", void 0);
+    queryAssignedElements({ slot: 'toggle-icon-expanded' })
+], IgcSelectComponent.prototype, "_expandedIconSlot", void 0);
 __decorate([
-    property({ reflect: false })
-], IgcSelectComponent.prototype, "value", void 0);
+    property()
+], IgcSelectComponent.prototype, "value", null);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], IgcSelectComponent.prototype, "outlined", void 0);
 __decorate([
     property({ type: Boolean })
 ], IgcSelectComponent.prototype, "autofocus", void 0);
+__decorate([
+    property({ type: Number })
+], IgcSelectComponent.prototype, "distance", void 0);
 __decorate([
     property()
 ], IgcSelectComponent.prototype, "label", void 0);
 __decorate([
     property()
 ], IgcSelectComponent.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], IgcSelectComponent.prototype, "placement", void 0);
+__decorate([
+    property({ attribute: 'scroll-strategy' })
+], IgcSelectComponent.prototype, "scrollStrategy", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'same-width' })
 ], IgcSelectComponent.prototype, "sameWidth", void 0);
 __decorate([
     property({ type: Boolean })
 ], IgcSelectComponent.prototype, "flip", void 0);
+__decorate([
+    watch('scrollStrategy', { waitUntilFirstUpdate: true })
+], IgcSelectComponent.prototype, "scrollStrategyChanged", null);
+__decorate([
+    watch('open', { waitUntilFirstUpdate: true })
+], IgcSelectComponent.prototype, "openChange", null);
 __decorate([
     alternateName('focusComponent')
 ], IgcSelectComponent.prototype, "focus", null);
@@ -356,17 +493,14 @@ __decorate([
     alternateName('blurComponent')
 ], IgcSelectComponent.prototype, "blur", null);
 __decorate([
-    watch('selectedItem')
-], IgcSelectComponent.prototype, "updateValue", null);
+    blazorSuppress()
+], IgcSelectComponent.prototype, "navigateTo", null);
 __decorate([
-    watch('value')
-], IgcSelectComponent.prototype, "updateSelected", null);
+    blazorSuppress()
+], IgcSelectComponent.prototype, "select", null);
 IgcSelectComponent = __decorate([
-    themes({
-        light: { bootstrap, material, fluent, indigo },
-        dark: { bootstrap, material, fluent, indigo },
-    }, true),
-    blazorAdditionalDependencies('IgcIconComponent, IgcInputComponent, IgcSelectGroupComponent, IgcSelectHeaderComponent, IgcSelectItemComponent')
+    themes(all, true),
+    blazorAdditionalDependencies('IgcIconComponent, IgcInputComponent, IgcPopoverComponent, IgcSelectGroupComponent, IgcSelectHeaderComponent, IgcSelectItemComponent')
 ], IgcSelectComponent);
 export default IgcSelectComponent;
 //# sourceMappingURL=select.js.map