@momentum-design/components 0.112.6 → 0.113.0

package/dist/components/combobox/combobox.component.js

@@ -1,20 +1,748 @@
-import { html } from 'lit';
-import { Component } from '../../models';
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html, nothing } 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 { ElementStore } from '../../utils/controllers/ElementStore';
+import { KEYS } from '../../utils/keys';
+import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
+import { CaptureDestroyEventForChildElement } from '../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement';
+import { LIFE_CYCLE_EVENTS } from '../../utils/mixins/lifecycle/lifecycle.contants';
+import { ROLE } from '../../utils/roles';
+import { TAG_NAME as DIVIDER_TAG_NAME } from '../divider/divider.constants';
+import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+import { DEFAULTS as FORMFIELD_DEFAULTS, VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
+import Input from '../input/input.component';
+import { AUTO_COMPLETE } from '../input/input.constants';
+import { TAG_NAME as OPTIONGROUP_TAG_NAME } from '../optgroup/optgroup.constants';
+import { TAG_NAME as OPTION_TAG_NAME } from '../option/option.constants';
+import { DEFAULTS as POPOVER_DEFAULTS, POPOVER_PLACEMENT, TRIGGER } from '../popover/popover.constants';
+import { TAG_NAME as SELECTLISTBOX_TAG_NAME } from '../selectlistbox/selectlistbox.constants';
+import { AUTOCOMPLETE_LIST, ICON_NAME, TRIGGER_ID } from './combobox.constants';
+import { ComboboxEventManager } from './combobox.events';
 import styles from './combobox.styles';
 /**
- * combobox component, which ...
+ * The Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.
+ * Users can type text to filter the options and select their desired choice.
+ *
+ * When the user starts typing, the filter uses a "starts with" search and displays options based on the text entered by the user.
+ * If the user entered text that doesn't match with any of the options, then the text in the `no-result-text` attribute will be displayed.
+ *
+ * If there is no text in the `no-result-text` attribute then nothing will be shown.
+ *
+ * Combobox is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
+ * The component ensures accessibility and usability while handling various use cases, including long text truncation with tooltip support.
+ *
+ * Every mdc-option should have a `value` attribute set to ensure proper form submission.
+ *
+ * To set a default option, use the `selected` attribute on the `mdc-option` element.
+ *
+ * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-combobox` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
+ *
+ * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-selectlistbox` element. Read more about it in Options documentation.
+ *
+ * To understand more about combobox and its patterns, refer to this [WCAG example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).
+ *
+ * @dependency mdc-buttonsimple
+ * @dependency mdc-icon
+ * @dependency mdc-input
+ * @dependency mdc-listitem
+ * @dependency mdc-popover
  *
  * @tagname mdc-combobox
  *
- * @slot default - This is a default/unnamed slot
+ * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
  *
- * @cssproperty --custom-property-name - Description of the CSS custom property
+ * @event click - (React: onClick) This event is dispatched when the combobox is clicked.
+ * @event change - (React: onChange) This event is dispatched when the combobox is changed.
+ * @event input - (React: onInput) This event is dispatched when the combobox is changed.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the combobox.
+ * @event focus - (React: onFocus) This event is dispatched when the combobox receives focus.
+ *
+ * @cssproperty --mdc-combobox-border-color - The border color of the combobox
+ * @cssproperty --mdc-combobox-icon-color - The icon color of the combobox
+ * @cssproperty --mdc-combobox-listbox-height - The height of the listbox inside the combobox
+ * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox
+ * @cssproperty --mdc-combobox-width - The width of the combobox
+ * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered
+ * @cssproperty --mdc-combobox-focused-background-color - The background color of the combobox when focused
+ * @cssproperty --mdc-combobox-error-border-color - The border color of the combobox when in error state
+ * @cssproperty --mdc-combobox-warning-border-color - The border color of the combobox when in warning state
+ * @cssproperty --mdc-combobox-success-border-color - The border color of the combobox when in success state
+ * @cssproperty --mdc-combobox-primary-border-color - The border color of the combobox when in primary state
+ * @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled
+ * @cssproperty --mdc-combobox-focused-border-color - The border color of the combobox when focused
+ *
+ * @csspart internal-native-input - The internal native input element of the combobox.
+ * @csspart mdc-input - The input element of the combobox.
+ * @csspart no-result-text - The no result text element of the combobox.
+ * @csspart combobox__base - The base container element of the combobox.
+ * @csspart combobox__button - The button element of the combobox.
+ * @csspart combobox__button-icon - The icon element of the button of the combobox.
  */
-class Combobox extends Component {
+class Combobox extends CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)))) {
+    /** @internal */
+    get navItems() {
+        return this.itemsStore.items;
+    }
+    constructor() {
+        super();
+        /**
+         * readonly attribute of the combobox field. If true, the combobox is read-only.
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * The placement of the popover within Combobox.
+         * This defines the position of the popover relative to the combobox input field.
+         *
+         * Possible values:
+         *  - 'top-start'
+         *  - 'bottom-start'
+         * @default 'bottom-start'
+         */
+        this.placement = POPOVER_PLACEMENT.BOTTOM_START;
+        /**
+         * This describes the clipping element(s) or area relative to which the overflow of the popover will be checked.
+         * The default is 'clippingAncestors', which are the overflow ancestors that can cause the element to be clipped.
+         * Possible values:
+         *  - 'clippingAncestors'
+         *  - any css selector
+         *
+         * @default 'clippingAncestors'
+         *
+         * @see [Floating UI - boundary](https://floating-ui.com/docs/detectOverflow#boundary)
+         */
+        this.boundary = POPOVER_DEFAULTS.BOUNDARY;
+        /**
+         * The strategy of the popover within Combobox.
+         * This determines how the popover is positioned in the DOM.
+         *
+         * In case `boundary` is set to something other than 'clippingAncestors',
+         * it might be necessary to set the `strategy` to 'fixed' to ensure that the popover
+         * is not getting clipped by scrollable containers enclosing the combobox.
+         *
+         * @default absolute
+         * @see [Floating UI - strategy](https://floating-ui.com/docs/computePosition#strategy)
+         */
+        this.strategy = POPOVER_DEFAULTS.STRATEGY;
+        /**
+         * The z-index of the popover within Combobox.
+         *
+         * Override this to make sure this stays on top of other components.
+         * @default 1000
+         */
+        this.popoverZIndex = POPOVER_DEFAULTS.Z_INDEX;
+        /** @internal */
+        this.isOpen = false;
+        /** @internal */
+        this.filteredValue = '';
+        /** @internal */
+        this.initialSelectedOption = null;
+        this.handleUpdateError = (error) => {
+            if (this.onerror) {
+                this.onerror(error);
+            }
+        };
+        /**
+         * Update the focus when an item is removed.
+         * If there is a next item, focus it. If not, focus the previous item.
+         *
+         * @internal
+         */
+        this.handleDestroyEvent = (event) => {
+            const destroyedElement = event.target;
+            if (!this.isValidItem(destroyedElement) || destroyedElement.tabIndex !== 0) {
+                return;
+            }
+            const destroyedItemIndex = this.navItems.findIndex(node => node === destroyedElement);
+            if (destroyedItemIndex === -1) {
+                return;
+            }
+            let newIndex = destroyedItemIndex + 1;
+            if (newIndex >= this.navItems.length) {
+                newIndex = destroyedItemIndex - 1;
+            }
+        };
+        this.addEventListener(LIFE_CYCLE_EVENTS.DESTROYED, this.handleDestroyEvent);
+        // This must be initialized after the destroyed event listener
+        // to keep the element in the itemStore in order to move the focus correctly
+        this.itemsStore = new ElementStore(this, {
+            isValidItem: this.isValidItem,
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateComplete
+            .then(() => {
+            if (this.inputElement) {
+                this.setInputValidity();
+                this.internals.setFormValue(this.inputElement.value);
+            }
+        })
+            .catch(this.handleUpdateError);
+    }
+    isValidItem(item) {
+        return item.matches(`${OPTION_TAG_NAME}:not([disabled])`);
+    }
+    openPopover() {
+        this.isOpen = true;
+    }
+    closePopover() {
+        this.isOpen = false;
+    }
+    toggleDropdown() {
+        this.isOpen = !this.isOpen;
+    }
+    compareOptionWithValue(option, value) {
+        const optionValue = option.getAttribute('label') || '';
+        return optionValue.toLowerCase().startsWith(value === null || value === void 0 ? void 0 : value.toLowerCase());
+    }
+    getFirstSelectedOption() {
+        return this.navItems.find(el => el.hasAttribute('selected'));
+    }
+    getVisibleOptions(internalValue) {
+        return this.navItems.filter(option => this.compareOptionWithValue(option, internalValue));
+    }
+    setSelectedValue(option) {
+        // this.value is the actual value of the component
+        this.value = (option === null || option === void 0 ? void 0 : option.getAttribute('value')) || '';
+        // this.filteredValue is the visible label of the component
+        this.filteredValue = (option === null || option === void 0 ? void 0 : option.getAttribute('label')) || '';
+        this.internals.setFormValue(this.value);
+        this.updateHiddenOptions();
+        this.updateSelectedOption(option);
+        this.setInputValidity();
+        this.resetHelpText();
+        ComboboxEventManager.onInputCombobox(this, option);
+        ComboboxEventManager.onChangeCombobox(this, option);
+    }
+    /**
+     * Resets the selected value to an empty string and clears the form value.
+     * This method is called when there is a change on the input.
+     */
+    resetSelectedValue() {
+        this.value = '';
+        this.internals.setFormValue(this.value);
+        this.resetHelpText();
+    }
+    resetHelpText() {
+        if (this.invalidCustomValueText && this.helpText === this.invalidCustomValueText) {
+            this.helpText = '';
+            this.helpTextType = VALIDATION.DEFAULT;
+        }
+    }
+    /**
+     * This function is called when the attribute changes.
+     * It updates the validity of the input field based on the input field's validity.
+     *
+     * @param name - attribute name
+     * @param old - old value
+     * @param value - new value
+     */
+    attributeChangedCallback(name, old, value) {
+        super.attributeChangedCallback(name, old, value);
+        if (name === 'validation-message') {
+            this.updateComplete
+                .then(() => {
+                this.setInputValidity();
+            })
+                .catch(this.handleUpdateError);
+        }
+    }
+    async firstUpdated(_changedProperties) {
+        await this.updateComplete;
+        // set the element to auto focus if autoFocusOnMount is set to true
+        // before running the super method, so that the AutoFocusOnMountMixin can use it
+        // to focus the correct element
+        if (this.inputElement && this.autoFocusOnMount) {
+            this.elementToAutoFocus = this.inputElement;
+        }
+        super.firstUpdated(_changedProperties);
+        const firstSelectedOption = this.getFirstSelectedOption();
+        if (firstSelectedOption) {
+            this.initialSelectedOption = firstSelectedOption;
+            this.setSelectedValue(firstSelectedOption);
+        }
+        else if (this.value) {
+            const validOption = this.navItems.find(option => option.value === this.value);
+            this.setSelectedValue(validOption);
+        }
+        else if (this.placeholder) {
+            this.setInputValidity();
+        }
+        this.navItems.forEach(option => {
+            option.setAttribute('tabindex', '-1');
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('slottedListboxes') || changedProperties.has('isOpen')) {
+            // Ensure the element exists and has the ariaControlsElements property
+            if (this.visualCombobox && 'ariaControlsElements' in this.visualCombobox) {
+                this.visualCombobox.ariaControlsElements = this.slottedListboxes;
+            }
+            if (this.dropDownButton && 'ariaControlsElements' in this.dropDownButton) {
+                this.dropDownButton.ariaControlsElements = this.slottedListboxes;
+            }
+        }
+        if (changedProperties.has('disabled') || changedProperties.has('readonly')) {
+            if (this.disabled || this.readonly) {
+                // If the combobox is disabled or readonly,
+                // we close the popover if it is open.
+                this.closePopover();
+            }
+        }
+    }
+    /**
+     * Sets the validity of the input element based on the selected option.
+     * If the selected option is not set and the combobox is required,
+     * it sets a custom validation message.
+     * If the selected option is set or the combobox is not required,
+     * it clears the custom validation message.
+     * This method is called to ensure that the combobox component behaves correctly
+     * in form validation scenarios, especially when the combobox is required.
+     * @internal
+     */
+    setInputValidity() {
+        var _a, _b;
+        if (!this.value && this.required) {
+            if (this.validationMessage) {
+                (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity(this.validationMessage);
+            }
+            else {
+                (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.setCustomValidity('');
+            }
+            this.setValidity();
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    /**
+     * Resets the combobox to its initially selected option.
+     * @internal
+     */
+    formResetCallback() {
+        var _a;
+        const optionToResetTo = this.initialSelectedOption || null;
+        // Restore the selected option
+        this.setSelectedValue(optionToResetTo);
+        // Reset the filtered text (typed value shown in input)
+        this.filteredValue = (_a = optionToResetTo === null || optionToResetTo === void 0 ? void 0 : optionToResetTo.label) !== null && _a !== void 0 ? _a : '';
+        // Force revalidation after reset
+        this.setInputValidity();
+    }
+    /** @internal */
+    formStateRestoreCallback(state) {
+        const optionToRestoreTo = this.navItems.find(option => option.value === state || option.label === state);
+        this.setSelectedValue(optionToRestoreTo || null);
+    }
+    /**
+     * When the native input is focused, visually highlight the dropdown options (the "visual combobox"),
+     * so users can see which option is active, even though the actual DOM focus remains on the input box.
+     * This ensures that after actions like form submission, users can still interact with the dropdown options
+     * through visual cues, while keyboard focus stays on the input field.
+     * @internal
+     */
+    handleNativeInputFocus() {
+        this.visualCombobox.focus();
+    }
+    /**
+     * Resets the focused option in the dropdown list.
+     * This method removes the 'data-focused' attribute from all options that currently have it,
+     * effectively clearing any visual indication of focus within the dropdown.
+     * It is typically called when the user navigates away from the dropdown or when the dropdown is closed,
+     * ensuring that no option remains visually highlighted as focused.
+     * @internal
+     */
+    resetFocusedOption() {
+        this.navItems
+            .filter(option => option.hasAttribute('data-focused'))
+            .forEach(option => this.updateOptionAttributes(option, false));
+    }
+    updateSelectedOption(newOption) {
+        this.navItems.forEach(option => {
+            option.removeAttribute('selected');
+        });
+        newOption === null || newOption === void 0 ? void 0 : newOption.setAttribute('selected', '');
+    }
+    /**
+     * Updates the visual focus state of a specific option in the dropdown list based on 'data-focused' attribute.
+     * It also updates the 'aria-selected' attribute for a11y purposes.
+     *
+     * @param option - The option element to update focus state for.
+     * @param value - The new focus state to set (true for focused, false for unfocused).
+     */
+    updateOptionAttributes(option, value) {
+        if (option === undefined)
+            return;
+        if (value) {
+            option.setAttribute('data-focused', '');
+        }
+        else {
+            option.removeAttribute('data-focused');
+        }
+        option.setAttribute('aria-selected', value.toString());
+    }
+    /**
+     * Handles the blur event of the combobox.
+     * This method is called when the combobox loses focus.
+     * It checks if the combobox has a focused option and sets the selected value to that option and closes the popover.
+     * If the combobox does not have a focused option and the filtered value is not empty,
+     * it sets the help text to the invalid custom value text and closes the popover.
+     * It also updates the input validity.
+     */
+    handleBlurChange() {
+        const options = this.getVisibleOptions(this.filteredValue);
+        const activeIndex = options.findIndex(option => option.hasAttribute('data-focused'));
+        if (activeIndex !== -1) {
+            this.setSelectedValue(options[activeIndex]);
+            this.closePopover();
+            return;
+        }
+        if (activeIndex === -1 &&
+            this.filteredValue !== '' &&
+            this.invalidCustomValueText &&
+            !this.getFirstSelectedOption()) {
+            this.helpText = this.invalidCustomValueText;
+            this.helpTextType = VALIDATION.ERROR;
+        }
+        // In common cases (when no selection made and focus moved away), close the popover.
+        this.setInputValidity();
+    }
+    updateFocusAndScrollIntoView(options, oldIndex, newIndex) {
+        var _a;
+        this.updateOptionAttributes(options[oldIndex], false);
+        this.updateOptionAttributes(options[newIndex], true);
+        (_a = options[newIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+    }
+    handleInputKeydown(event) {
+        const options = this.getVisibleOptions(this.filteredValue);
+        const activeIndex = options.findIndex(option => option.hasAttribute('data-focused'));
+        switch (event.key) {
+            case KEYS.ARROW_DOWN: {
+                this.openPopover();
+                const newIndex = options.length - 1 === activeIndex ? 0 : activeIndex + 1;
+                this.updateFocusAndScrollIntoView(options, activeIndex, newIndex);
+                event.preventDefault();
+                break;
+            }
+            case KEYS.ARROW_UP: {
+                this.openPopover();
+                const newIndex = activeIndex === -1 || activeIndex === 0 ? options.length - 1 : activeIndex - 1;
+                this.updateFocusAndScrollIntoView(options, activeIndex, newIndex);
+                event.preventDefault();
+                break;
+            }
+            case KEYS.ENTER: {
+                if (activeIndex === -1)
+                    return;
+                this.setSelectedValue(options[activeIndex]);
+                if (this.isOpen === true) {
+                    this.closePopover();
+                }
+                break;
+            }
+            case KEYS.ESCAPE: {
+                if (activeIndex !== -1) {
+                    this.updateOptionAttributes(options[activeIndex], false);
+                }
+                if (options.length && this.shouldDisplayPopover(options.length)) {
+                    this.closePopover();
+                }
+                else {
+                    this.resetSelectedValue();
+                    // clear the visible value
+                    this.filteredValue = '';
+                }
+                break;
+            }
+            case KEYS.TAB: {
+                this.closePopover();
+                break;
+            }
+            case KEYS.HOME:
+            case KEYS.END: {
+                this.resetFocusedOption();
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    /**
+     * Updates the hidden state of options based on the current filtered value.
+     * If an option does not match the current filtered value, it is hidden.
+     * Otherwise, it is made visible.
+     * Additionally, it updates the hidden state of option groups and dividers based on the current filtered value.
+     */
+    updateHiddenOptions() {
+        this.navItems.forEach(option => {
+            if (!this.compareOptionWithValue(option, this.filteredValue)) {
+                option.setAttribute('data-hidden', '');
+                this.hideOptionGroupAndDivider(option);
+            }
+            else {
+                option.removeAttribute('data-hidden');
+                this.showOptionGroupAndDivider(option);
+            }
+        });
+    }
+    hideOptionGroupAndDivider(option) {
+        var _a, _b, _c;
+        if ((_a = option.parentElement) === null || _a === void 0 ? void 0 : _a.matches(OPTIONGROUP_TAG_NAME)) {
+            const optionGroupChildren = (_b = Array.from(option.parentElement.children)) === null || _b === void 0 ? void 0 : _b.filter(option => !option.hasAttribute('data-hidden'));
+            if (optionGroupChildren.length === 0) {
+                option.parentElement.setAttribute('data-hidden', '');
+                if ((_c = option.parentElement.nextElementSibling) === null || _c === void 0 ? void 0 : _c.matches(DIVIDER_TAG_NAME)) {
+                    option.parentElement.nextElementSibling.setAttribute('data-hidden', '');
+                }
+            }
+        }
+    }
+    showOptionGroupAndDivider(option) {
+        var _a, _b, _c;
+        if ((_a = option.parentElement) === null || _a === void 0 ? void 0 : _a.matches(OPTIONGROUP_TAG_NAME)) {
+            const optionGroupChildren = (_b = Array.from(option.parentElement.children)) === null || _b === void 0 ? void 0 : _b.filter(option => !option.hasAttribute('data-hidden'));
+            if (optionGroupChildren.length > 0) {
+                option.parentElement.removeAttribute('data-hidden');
+                if ((_c = option.parentElement.nextElementSibling) === null || _c === void 0 ? void 0 : _c.matches(DIVIDER_TAG_NAME)) {
+                    option.parentElement.nextElementSibling.removeAttribute('data-hidden');
+                }
+            }
+        }
+    }
+    handleInputChange(event) {
+        var _a;
+        this.filteredValue = event.target.value;
+        this.resetSelectedValue();
+        this.resetFocusedOption();
+        this.updateHiddenOptions();
+        // remove the selected attribute on input change
+        (_a = this.getFirstSelectedOption()) === null || _a === void 0 ? void 0 : _a.removeAttribute('selected');
+        if (this.isOpen === false) {
+            this.openPopover();
+        }
+    }
+    handleOptionsClick(event) {
+        var _a;
+        // ensure we get the actual option element even if the click target is a child node
+        const option = (_a = event.target.closest(OPTION_TAG_NAME)) !== null && _a !== void 0 ? _a : null;
+        if (option && !option.hasAttribute('disabled')) {
+            this.setSelectedValue(option);
+            this.closePopover();
+            // Focus on the combobox after click
+            this.updateComplete.then(() => this.handleNativeInputFocus()).catch(this.handleUpdateError);
+        }
+    }
+    shouldDisplayPopover(optionsLength) {
+        if (this.disabled || this.readonly) {
+            return false;
+        }
+        if (optionsLength) {
+            return this.isOpen;
+        }
+        if (this.noResultText) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Renders the native input element.
+     * This input is hidden and is used for internal purposes only.
+     * The value of the selected option is set as the value of this input.
+     * @internal
+     */
+    renderNativeInput() {
+        return html `
+      <input
+        id="${this.inputId}"
+        name="${this.name}"
+        type="text"
+        .value="${live(this.value)}"
+        aria-hidden="true"
+        part="internal-native-input"
+        tabindex="-1"
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        autocomplete="${AUTO_COMPLETE.OFF}"
+        @focus=${this.handleNativeInputFocus}
+        @invalid=${this.setInputValidity}
+      />
+    `;
+    }
+    /**
+     * Renders the base input element with accessibility.
+     * This input is displayed on the screen and is used for user interaction only.
+     * The label of the selected option is set as the value of this input.
+     * @internal
+     */
+    renderBaseInput() {
+        var _a;
+        return html `
+      <input
+        id="${this.id}"
+        slot="input"
+        ?disabled="${this.disabled}"
+        .value="${live(this.filteredValue)}"
+        autocomplete="${AUTO_COMPLETE.OFF}"
+        class="input"
+        part="mdc-input"
+        placeholder="${ifDefined(this.placeholder)}"
+        role="${ROLE.COMBOBOX}"
+        ?readonly="${this.readonly}"
+        ?required="${this.required}"
+        @input=${this.handleInputChange}
+        @keydown=${this.handleInputKeydown}
+        @blur="${this.handleBlurChange}"
+        aria-autocomplete="${AUTOCOMPLETE_LIST}"
+        aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
+        aria-disabled="${this.disabled ? 'true' : 'false'}"
+        aria-expanded="${this.isOpen ? 'true' : 'false'}"
+        aria-haspopup="${ROLE.LISTBOX}"
+        aria-invalid="${this.helpTextType === VALIDATION.ERROR ? 'true' : 'false'}"
+        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+        aria-labelledby="${this.label ? FORMFIELD_DEFAULTS.HEADING_ID : ''}"
+        aria-readonly="${this.readonly ? 'true' : 'false'}"
+        aria-required="${this.required ? 'true' : 'false'}"
+      />
+    `;
+    }
+    renderNoResultsText(optionsLength) {
+        return optionsLength === 0 && this.noResultText
+            ? html `<mdc-listitem part="no-result-text" tabindex="-1" role="" label="${this.noResultText}"></mdc-listitem>`
+            : nothing;
+    }
     render() {
-        return html `<p>This is a dummy combobox component!</p>
-      <slot></slot>`;
+        var _a;
+        const options = this.getVisibleOptions(this.filteredValue);
+        return html `
+      ${this.renderLabel()}
+      <div part="combobox__base" id="${TRIGGER_ID}">
+        ${this.renderNativeInput()}
+        <mdc-input
+          @click="${() => this.toggleDropdown()}"
+          ?disabled="${this.disabled}"
+          ?readonly="${this.readonly}"
+          help-text-type="${this.helpTextType}"
+        >
+          ${this.renderBaseInput()}
+        </mdc-input>
+        <mdc-buttonsimple
+          @click="${() => this.toggleDropdown()}"
+          part="combobox__button"
+          ?disabled="${this.disabled}"
+          tabindex="-1"
+          aria-expanded="${this.isOpen ? 'true' : 'false'}"
+          aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+        >
+          <mdc-icon
+            part="combobox__button-icon"
+            name="${this.shouldDisplayPopover(options.length) ? ICON_NAME.ARROW_UP : ICON_NAME.ARROW_DOWN}"
+            size="1"
+            length-unit="rem"
+          ></mdc-icon>
+        </mdc-buttonsimple>
+        <mdc-popover
+          ?visible="${this.shouldDisplayPopover(options.length)}"
+          @closebyescape="${() => {
+            this.closePopover();
+        }}"
+          @closebyoutsideclick="${() => {
+            this.closePopover();
+            this.handleNativeInputFocus();
+        }}"
+          backdrop
+          backdrop-append-to="${ifDefined(this.backdropAppendTo)}"
+          boundary="${ifDefined(this.boundary)}"
+          disable-aria-expanded
+          exportparts="popover-content"
+          hide-on-escape
+          hide-on-outside-click
+          is-backdrop-invisible
+          placement="${this.placement}"
+          role=""
+          size
+          strategy="${ifDefined(this.strategy)}"
+          trigger="${TRIGGER.MANUAL}"
+          triggerid="${TRIGGER_ID}"
+          z-index="${ifDefined(this.popoverZIndex)}"
+        >
+          ${this.renderNoResultsText(options.length)}
+          <slot @click="${this.handleOptionsClick}"></slot>
+        </mdc-popover>
+      </div>
+      ${this.renderHelperText()}
+    `;
     }
 }
-Combobox.styles = [...Component.styles, ...styles];
+Combobox.styles = [...FormfieldWrapper.styles, ...Input.styles, ...styles];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Combobox.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Combobox.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Combobox.prototype, "placement", void 0);
+__decorate([
+    property({ type: String, attribute: 'no-result-text', reflect: true }),
+    __metadata("design:type", String)
+], Combobox.prototype, "noResultText", void 0);
+__decorate([
+    property({ type: String, attribute: 'invalid-custom-value-text', reflect: true }),
+    __metadata("design:type", String)
+], Combobox.prototype, "invalidCustomValueText", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Combobox.prototype, "boundary", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Combobox.prototype, "strategy", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'popover-z-index' }),
+    __metadata("design:type", Number)
+], Combobox.prototype, "popoverZIndex", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'backdrop-append-to' }),
+    __metadata("design:type", String)
+], Combobox.prototype, "backdropAppendTo", void 0);
+__decorate([
+    query(`[role="${ROLE.COMBOBOX}"]`),
+    __metadata("design:type", HTMLInputElement)
+], Combobox.prototype, "visualCombobox", void 0);
+__decorate([
+    query(`[part="combobox__button"]`),
+    __metadata("design:type", HTMLElement)
+], Combobox.prototype, "dropDownButton", void 0);
+__decorate([
+    queryAssignedElements({ selector: SELECTLISTBOX_TAG_NAME }),
+    __metadata("design:type", Array)
+], Combobox.prototype, "slottedListboxes", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Combobox.prototype, "isOpen", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Combobox.prototype, "filteredValue", void 0);
 export default Combobox;