@riverty/web-components 6.2.1 → 6.3.0

package/dist/cjs/r-select.cjs.entry.js

@@ -1,1101 +0,0 @@
-'use strict';
-
-var index = require('./index-BnETQtSf.js');
-var formData = require('./formData-B2DZyLxP.js');
-var styleObserver = require('./style-observer-D9zSP9wP.js');
-
-const selectCss = ":host{display:inline-flex;flex-direction:column;width:var(--width, auto);transition:width 0.2s ease-out;max-width:none;opacity:1;outline:none}:host slot{display:contents}:host(:hover:not([disabled]:not([disabled=false]))){--r-select--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([expanded]:not([expanded=false])){--r-select--options--visibility:visible;--r-select--options--z-index:1;--r-select--background-color:var(--r-background-interactive-softest, #fff);--r-select--value--border-color:var(--r-border-soft, #686868);--r-select--value--background-color:var(--r-background-interactive-softest, #fff);--r-select--trailing-icon--transform:rotate(180deg)}:host([invalid]:not([invalid=false])){--r-select--container--background-color:var(--r-status-error-soft, #fef6f6);--r-select--value--border-color:var(--r-status-error-regular, #b00c15);--r-select--options--border-color:var(--r-status-error-regular, #b00c15)}:host([disabled]:not([disabled=false])){--r-select--opacity:0.4;--r-select--pointer-events:none;--r-select--cursor:not-allowed}:host([data-is-placeholder=true]){--r-select--value-diplay--color:var(--r-text-soft, #686868)}:host([data-max-width=set]){width:100%;--r-select--options--right:0}:host([full-width]){width:100%}:host([data-listbox-position=top]){--r-select--options--top:auto;--r-select--options--bottom:2.875em;--r-select--options--border-width:1px 1px 0 1px}:host([data-listbox-position=bottom]){--r-select--options--top:100%;--r-select--options--bottom:auto;--r-select--options--border-width:0 1px 1px 1px}:host([data-readonly=true]){--r-select--color:var(--r-text-soft, #686868);--r-select--value--background-color:var(--r-background-soft, #f3f1f0);--r-select--value--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-select--value--cursor:text;--r-select--value-arrow--visiblility:hidden}.r-select{display:var(--r-select--display, flex);flex-grow:var(--r-select--flex-grow, 1);flex-direction:var(--r-select--flex-direction, column);position:var(--r-select--position, relative);box-sizing:var(--r-select--box-sizing, border-box);max-width:var(--r-select--max-width, 100%);min-width:var(--r-select--min-width, fit-content);font-family:var(--r-select--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-select--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-select--font-size, var(--r-font-size-400, 1rem));text-align:var(--r-select--text-align, left);color:var(--r-select--color, var(--r-text-regular, #282828));opacity:var(--r-select--opacity, 1);pointer-events:var(--r-select--pointer-events, auto);cursor:var(--r-select--cursor, pointer)}.r-select--label__margin-bottom{margin-bottom:var(--r-select--label--margin-bottom, var(--r-spacing-025, 0.25rem))}.r-select--label-container{display:var(--r-select--label-container--display, flex);gap:var(--r-select--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-select--label-container--align-items, center);justify-content:var(--r-select--label-container--align-items, space-between)}.r-select--label-container ::slotted([slot=popover]){display:var(--r-select--popover--display, inline-flex);height:var(--r-select--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-select--popover--align-items, center);justify-content:var(--r-select--popover--justify-content, center);margin-right:var(--r-select--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-select--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-select--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-select--trailing-icon{transform:var(--r-select--trailing-icon--transform, rotate(0deg));transition:var(--r-select--trailing-icon--transition, transform 0.15s)}.r-select ::slotted([name=leading]){display:var(--r-select--value--leading-icon--display, flex);align-items:var(--r-select--value--leading-icon--align-items, center);color:var(--r-select--value--leading-icon--color, var(--r-icon-soft, #686868))}.r-select--container{background-color:var(--r-select--container--background-color, var(--r-background-softest, #fff));opacity:var(--r-select--container--opacity, 1);pointer-events:var(--r-select--container--pointer-events, auto)}.r-select--input{height:var(--r-select--input--height, 100%);width:var(--r-select--input--width, 100%);border:var(--r-select--input--border, none);outline:var(--r-select--input--outline, none);background-color:var(--r-select--input--background-color, inherit);color:var(--r-select--input--color, inherit);font-family:var(--r-select--input--font-family, inherit);font-size:var(--r-select--input--font-size, inherit);font-weight:var(--r-select--input--font-weight, inherit);padding:var(--r-select--input--padding, 0)}.r-select--native{position:var(--r-select--native--position, fixed);top:var(--r-select--native--top, -100vh);z-index:var(--r-select--native--z-index, -1);opacity:var(--r-select--native--opacity, 0);font-size:var(--r-select--native--font-size, 1rem);padding:var(--r-select--native--padding, 0 calc(48px + 0.75em) 0 0.75em)}.r-select--value:not([aria-readonly=true]):not(:has(input:read-only)):not(:has(input:disabled)):active{--r-select--value--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}.r-select--value[aria-disabled=false]:focus,.r-select--value:has(input:focus){outline:var(--r-select--value--outline, none);--r-select--value--z-index:2;--r-select--value--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-select--value--outline:2px solid var(--r-border-focused, #0071e3);--r-select--value--outline-offset:2px}.r-select--value{position:var(--r-select--value--position, relative);display:var(--r-select--value--display, inline-grid);grid-template-columns:var(--r-select--value--grid-template-columns, 1fr 1.75rem);box-sizing:var(--r-select--value--box-sizing, border-box);align-items:var(--r-select--value--align-items, center);justify-content:var(--r-select--value--justify-content, space-between);text-align:var(--r-select--value--text-align, left);min-width:var(--r-select--value--min-width, 100%);min-height:var(--r-select--value--min-height, var(--r-spacing-275, 2.75rem));padding:var(--r-select--value--padding, 0);white-space:var(--r-select--value--white-space, nowrap);background-color:var(--r-select--value--background-color, transparent);border-width:var(--r-select--value--border-width, 1px);border-style:var(--r-select--value--border-style, solid);border-color:var(--r-select--value--border-color, var(--r-border-soft, #686868));box-shadow:var(--r-select--value--box-shadow, none);outline:var(--r-select--value--outline, none);outline-offset:var(--r-select--value--outline-offset, 0);z-index:var(--r-select--value--z-index, 0);cursor:var(--r-select--value--cursor, inherit)}.r-select--value-display{display:var(--r-select--value-diplay--display, flex);gap:var(--r-select--value-diplay--gap, 0.5em);align-items:var(--r-select--value-diplay--align-tems, center);flex:var(--r-select--value-diplay--flex, 1);padding:var(--r-select--value-diplay--padding, 0 0.75em);overflow:var(--r-select--value-diplay--overflow, hidden);text-overflow:var(--r-select--value-diplay--text-overflow, ellipsis);color:var(--r-select--value-diplay--color, inherit);min-width:var(--r-select--value-diplay--min-width, fit-content);height:var(--r-select--value-diplay--height, 100%)}.r-select--value-selected{display:var(--r-select--value-diplay--display, flex);gap:var(--r-select--value-diplay--gap, 0.75em);align-items:var(--r-select--value-diplay--align-items, center)}.r-select--value-arrow{display:var(--r-select--value-arrow--display, flex);align-items:var(--r-select--value-arrow--align-items, center);justify-content:var(--r-select--value-arrow--justify-content, center);padding:var(--r-select--value-arrow--padding, 0 0.75em 0 0);visibility:var(--r-select--value-arrow--visiblility, visible)}.r-select--value-arrow-button{height:var(--r-select--value-arrow-button--height, 100%);background-color:var(--r-select--value-arrow-button--background-color, transparent);color:var(--r-select--value-arrow-button--color, inherit);border:var(--r-select--value-arrow-button--border, none);outline:var(--r-select--value-arrow-button--outline, none);cursor:var(--r-select--value-arrow-button--cursor, inherit)}.r-select--options{visibility:var(--r-select--options--visibility, hidden);position:var(--r-select--options--position, absolute);top:var(--r-select--options--top, 100%);right:var(--r-select--options--right, 0);bottom:var(--r-select--options--bottom, auto);left:var(--r-select--options--left, 0);margin:var(--r-select--options--margin, 0);padding:var(--r-select--options--padding, 0);list-style:var(--r-select--options--list-style, none);max-height:var(--r-select--options--max-height, 14.375em);min-width:var(--r-select--options--min-width, fit-content);overflow-y:var(--r-select--options--overflow-y, auto);background-color:var(--r-select--options--background-color, var(--r-background-interactive-softest, #fff));border-style:var(--r-select--options--border-style, solid);border-color:var(--r-select--options--border-color, var(--r-border-soft, #686868));border-width:var(--r-select--options--border-width, 0 1px 1px 1px);z-index:var(--r-select--options--z-index, -1)}.r-select--message{margin-top:var(--r-select--message--margin-top, var(--r-spacing-025, 0.25rem))}.hidden{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}@media (prefers-reduced-motion){:host{transition:none}}";
-
-const Select = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.rValidate = index.createEvent(this, "rValidate");
-        this.rChange = index.createEvent(this, "rChange");
-        this.rReset = index.createEvent(this, "rReset");
-        /** Define if select should render as a text item or a block */
-        this.fullWidth = false;
-        /** Define wether listbox appears on top or at the bottom of the select  */
-        this.listboxPosition = 'bottom';
-        /**
-         * Defines aria label for combobox toggle button
-         * @default "Toggle combobox"
-         */
-        this.toggleButtonAriaLabel = 'Toggle combobox';
-        /**
-         * Defines the text that will be displayed if no results are found
-         * @default "No results found"
-         */
-        this.noResultsFound = 'No results found';
-        /** Custom validity state passed after validation */
-        this.validityState = '';
-        /** Custom validity message passed after validation */
-        this.validityMessage = '';
-        /** Is select expanded */
-        this.isExpanded = false;
-        /** Current state, reflecting if select is readonly */
-        this.isReadonly = false;
-        /** Save current value */
-        this.currentValue = '';
-        /** Value that must be displayed as selected option */
-        this.valueToDisplay = '';
-        this.isInitializing = false;
-        this.isResetting = false;
-        this.focusedOption = null;
-        this.isValueFocused = false;
-        this.isNoResultsFound = false;
-        /** Indicates if the user has interacted with the select (focused/clicked) */
-        this.touched = false;
-        /** Indicates if the value has been changed by user interaction */
-        this.dirty = false;
-        this.handleSlotChange = () => {
-            setTimeout(() => {
-                this.initialize();
-                this.defineHostWidth();
-            }, 0);
-        };
-        /**
-         * Initial attributes state
-         * */
-        this.initial = {};
-        /** Unique id */
-        this.uniqueId = `r-select-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
-        this.getValidityStateData = (element) => {
-            let validityState = '';
-            let validityMessage = '';
-            for (const state in element.validity) {
-                if (element.validity[state]) {
-                    validityState = state;
-                    if (this[state + 'Message']) {
-                        validityMessage = this[state + 'Message'];
-                        return { validityState, validityMessage };
-                    }
-                    validityMessage = element.validationMessage;
-                }
-            }
-            return { validityState, validityMessage };
-        };
-        this.validateFormElement = (element = null) => {
-            if (element === null)
-                return;
-            if (this.isNoValidate)
-                return;
-            if (this.error)
-                return;
-            const { validityState, validityMessage } = this.getValidityStateData(element);
-            this.validityState = validityState;
-            this.validityMessage = validityMessage;
-            const isValid = this.validityState === 'valid';
-            this.valid = isValid;
-            this.invalid = !isValid;
-            this.rValidate.emit({
-                state: this.validityState,
-                message: this.validityMessage
-            });
-        };
-        // Typeahead buffer + last matched index
-        this.typeaheadBuffer = '';
-        this.typeaheadTimeout = null;
-        this.lastTypeaheadIndex = -1;
-        this.contributeToFormData = (event) => {
-            formData.appendControlToFormData(this.nativeElement, event.formData);
-        };
-        this.onValueClick = (e) => {
-            var _a;
-            if (this.disabled)
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            // Mark as touched when user clicks on the select
-            this.touched = true;
-            this.toggle();
-            if (!this.isExpanded)
-                return;
-            if (this.combobox)
-                (_a = this.valueElement) === null || _a === void 0 ? void 0 : _a.focus();
-            this.defineListboxPositionState();
-        };
-        // Returns a handler for a key
-        this.keyboardEventHandlerFactory = (code, altKey = false) => {
-            switch (code) {
-                case 'Enter':
-                    return () => {
-                        var _a;
-                        if (this.isExpanded) {
-                            const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
-                            if (newValue !== this.currentValue) {
-                                this.dirty = true;
-                            }
-                            this.setValueFromUserInteraction(newValue);
-                            return;
-                        }
-                        this.expand();
-                        this.setOptionFocus(this.selectedElement);
-                    };
-                case 'Escape':
-                    return () => {
-                        this.collapse();
-                        this.reportValidity();
-                    };
-                case 'ArrowUp':
-                    return () => {
-                        var _a;
-                        if (!this.isExpanded) {
-                            this.expand();
-                            const indexToFocus = this.combobox ? this.optionElements.length - 1 : 0;
-                            this.setOptionFocus(this.selectedElement || this.optionElements[indexToFocus]);
-                            return;
-                        }
-                        if (this.focusedOption && altKey) {
-                            const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
-                            if (newValue !== this.currentValue) {
-                                this.dirty = true;
-                            }
-                            this.setValueFromUserInteraction(newValue);
-                            return;
-                        }
-                        if (!this.combobox && this.focusedOption === this.optionElements[0])
-                            return;
-                        if (this.focusedOption) {
-                            this.focusPrevOption();
-                            return;
-                        }
-                        this.setOptionFocus(this.selectedElement || this.optionElements[0]);
-                    };
-                case 'ArrowDown':
-                    return () => {
-                        if (!this.isExpanded) {
-                            this.expand();
-                            if (altKey)
-                                return;
-                            this.setOptionFocus(this.selectedElement || this.optionElements[0]);
-                            return;
-                        }
-                        if (!this.combobox && this.focusedOption === this.optionElements[this.optionElements.length - 1])
-                            return;
-                        if (this.focusedOption) {
-                            this.focusNextOption();
-                            return;
-                        }
-                        this.setOptionFocus(this.selectedElement || this.optionElements[0]);
-                    };
-                case 'Home':
-                    return () => {
-                        if (!this.isExpanded) {
-                            this.expand();
-                            this.setOptionFocus(this.selectedElement || this.optionElements[0]);
-                            return;
-                        }
-                        this.setOptionFocus(this.optionElements[0]);
-                    };
-                case 'End':
-                    return () => {
-                        if (!this.isExpanded) {
-                            this.expand();
-                            this.setOptionFocus(this.selectedElement || this.optionElements[this.optionElements.length - 1]);
-                            return;
-                        }
-                        this.setOptionFocus(this.optionElements[this.optionElements.length - 1]);
-                    };
-                case 'PageUp': {
-                    return () => {
-                        if (!this.isExpanded)
-                            return;
-                        if (this.focusedOption === null)
-                            return;
-                        const currentIndex = this.optionElementsArray.indexOf(this.focusedOption);
-                        if (currentIndex === -1)
-                            return;
-                        const targetIndex = currentIndex - 10 >= 0 ? currentIndex - 10 : 0;
-                        this.setOptionFocus(this.optionElements[targetIndex]);
-                    };
-                }
-                case 'PageDown': {
-                    return () => {
-                        if (!this.isExpanded)
-                            return;
-                        if (this.focusedOption === null)
-                            return;
-                        const currentIndex = this.optionElementsArray.indexOf(this.focusedOption);
-                        if (currentIndex === -1)
-                            return;
-                        const lastIndex = this.optionElements.length - 1;
-                        const targetIndex = currentIndex + 10 <= lastIndex ? currentIndex + 10 : lastIndex;
-                        this.setOptionFocus(this.optionElements[targetIndex]);
-                    };
-                }
-                case 'Tab':
-                    return () => {
-                        var _a;
-                        const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
-                        if (newValue !== this.currentValue) {
-                            this.dirty = true;
-                        }
-                        this.setValueFromUserInteraction(newValue);
-                    };
-                default:
-                    // No matching key handler: intentional no-op
-                    return () => { };
-            }
-        };
-        this.onValueKeydown = (e) => {
-            e.stopPropagation();
-            const preventCodes = [
-                'ArrowUp',
-                'ArrowDown',
-                'Home',
-                'End',
-                'PageUp',
-                'PageDown',
-                'Space',
-                'Enter',
-                'Escape'
-            ];
-            if (preventCodes.includes(e.code)) {
-                e.preventDefault();
-            }
-            else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-                // Tab will also be skipped here
-                if (!this.isExpanded)
-                    this.expand();
-                this.handleTypeahead(e.key);
-                return;
-            }
-            switch (e.code) {
-                case 'Space':
-                    this.keyboardEventHandlerFactory('Enter')();
-                    break;
-                case 'Tab':
-                    if (this.focusedOption === null)
-                        break;
-                    this.keyboardEventHandlerFactory('Tab')();
-                    break;
-                default:
-                    this.keyboardEventHandlerFactory(e.code, e.altKey)();
-                    break;
-            }
-        };
-        this.onComboboxKeydown = (e) => {
-            e.stopPropagation();
-            const preventCodes = [
-                'ArrowUp',
-                'ArrowDown',
-                'Home',
-                'End',
-                'PageUp',
-                'PageDown',
-                'Enter',
-                'Escape'
-            ];
-            if (preventCodes.includes(e.code)) {
-                e.preventDefault();
-            }
-            switch (e.code) {
-                case 'Tab':
-                    if (this.focusedOption === null) {
-                        this.collapse();
-                        break;
-                    }
-                    this.keyboardEventHandlerFactory('Tab')();
-                    break;
-                case 'Escape':
-                    if (this.isExpanded) {
-                        this.keyboardEventHandlerFactory('Escape')();
-                        return;
-                    }
-                    this.valueElement.value = '';
-                    const newValue = '';
-                    if (newValue !== this.currentValue) {
-                        this.dirty = true;
-                    }
-                    this.setValueFromUserInteraction(newValue);
-                    this.reportValidity();
-                    break;
-                default:
-                    this.keyboardEventHandlerFactory(e.code, e.altKey)();
-                    break;
-            }
-        };
-        this.onValueBlur = () => {
-            this.isValueFocused = false;
-            const { isBusy, isExpanded } = this;
-            if (isBusy || isExpanded)
-                return;
-            this.reportValidity();
-        };
-        this.onValueFocus = () => {
-            this.isValueFocused = true;
-            // Mark as touched when user focuses on the select
-            this.touched = true;
-        };
-        this.filterOptionsListByComboboxValue = (value = '') => {
-            const options = Array.from(this.host.querySelectorAll('r-select-option:not([data-no-results="true"])'));
-            options.forEach((option) => {
-                var _a, _b;
-                const optionText = (_b = (_a = option === null || option === void 0 ? void 0 : option.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.toLowerCase();
-                const hasMatch = optionText.search(value.toLowerCase()) !== -1;
-                option.setAttribute('aria-hidden', `${!hasMatch}`);
-            });
-            this.isNoResultsFound = options.every((option) => (option === null || option === void 0 ? void 0 : option.getAttribute('aria-hidden')) === 'true');
-            if (this.isNoResultsFound) {
-                this.statusElement.innerHTML = this.noResultsFound;
-                setTimeout(() => {
-                    this.statusElement.innerText = '';
-                }, 1000);
-            }
-        };
-        this.clearComboboxOptions = () => {
-            if (!this.combobox)
-                return;
-            this.filterOptionsListByComboboxValue();
-        };
-        this.onComboboxChange = (event) => {
-            this.filterOptionsListByComboboxValue(event.target.value);
-        };
-        this.onComboboxInput = (event) => {
-            this.filterOptionsListByComboboxValue(event.target.value);
-            if (!this.isExpanded) {
-                this.expand();
-                this.defineListboxPositionState();
-            }
-        };
-        this.onSubmitForm = (event) => {
-            if (this.isNoValidate)
-                return;
-            this.reportValidity();
-            if (this.invalid) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        };
-        // Clear validation results and emit rReset event
-        this.onResetForm = () => {
-            // Clear validation results
-            this.resetValidation();
-            // Reset touched and dirty states
-            this.markAsPristine();
-            // Restore initial value
-            this.setValue(this.initial['value']);
-            // Emit rReset
-            this.rReset.emit({
-                element: this.host,
-                value: this.currentValue
-            });
-        };
-        this.renderSelect = (comboboxAttrs) => {
-            var _a, _b;
-            return (index.h("span", Object.assign({ class: "r-select--value", role: "combobox" }, comboboxAttrs, { ref: el => this.valueElement = el, onClick: this.isInteractive ? this.onValueClick : null, onKeyDown: this.isInteractive ? this.onValueKeydown : null, onBlur: this.isInteractive ? this.onValueBlur : null, onFocus: this.isInteractive ? this.onValueFocus : null }), index.h("span", { class: "r-select--value-display" }, this.isLeadingSlotRendered ? index.h("slot", { name: "leading" }) : null, index.h("span", { class: "r-select--value-selected", innerHTML: ((_b = (_a = this.valueToDisplay) === null || _a === void 0 ? void 0 : _a.trim) === null || _b === void 0 ? void 0 : _b.call(_a)) || this.placeholder || '' })), index.h("span", { class: "r-select--value-arrow" }, index.h("r-icon", { class: "r-select--trailing-icon", name: "angle-down", size: "s" }))));
-        };
-        this.renderCombobox = (comboboxAttrs) => {
-            var _a, _b, _c;
-            return (index.h("div", { class: "r-select--value", onClick: this.isInteractive ? this.onValueClick : null, ref: el => this.comboboxContainerElement = el }, index.h("div", { class: "r-select--value-display" }, this.isLeadingSlotRendered ? index.h("slot", { name: "leading" }) : null, index.h("input", Object.assign({ role: "combobox", autocomplete: "off", "aria-autocomplete": "list", disabled: this.disabled, readonly: this.readonly, type: "text" }, comboboxAttrs, { class: "r-select--input", ref: el => this.valueElement = el, onKeyDown: this.isInteractive ? this.onComboboxKeydown : null, onBlur: this.isInteractive ? this.onValueBlur : null, onFocus: this.isInteractive ? this.onValueFocus : null, onChange: this.isInteractive ? this.onComboboxChange : null, onInput: this.isInteractive ? this.onComboboxInput : null, placeholder: this.placeholder || '', value: ((_c = (_b = (_a = this.selectedElement) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim) === null || _c === void 0 ? void 0 : _c.call(_b)) || '' }))), index.h("button", { "aria-label": this.toggleButtonAriaLabel, "aria-expanded": `${this.expanded || false}`, "aria-controls": `${this.uniqueId}-list`, disabled: this.disabled, tabindex: "-1", class: "r-select--value-arrow-button r-select--value-arrow" }, index.h("r-icon", { class: "r-select--trailing-icon", name: "angle-down", size: "s" })), index.h("div", { class: "visually-hidden", role: "status", ref: (el) => this.statusElement = el })));
-        };
-    }
-    /** Sets the component into `readonly` state  */
-    async setReadonly() {
-        this.collapse();
-        this.resetValidation();
-        this.isReadonly = true;
-    }
-    /** Clears readonly state from the component */
-    async clearReadonly() {
-        this.isReadonly = false;
-    }
-    handleListboxPositionChange() {
-        this.defineListboxPositionState();
-    }
-    handleExpandedChange() {
-        this.expanded ? this.expand() : this.collapse();
-    }
-    handleReadonlyChange() {
-        this.readonly ? this.setReadonly() : this.clearReadonly();
-    }
-    handleValueChange(value, oldValue) {
-        if (this.isInitializing)
-            return;
-        // Only process if this is not the initial load (oldValue is defined)
-        if (oldValue !== undefined && oldValue !== value) {
-            // This is a programmatic change from parent attribute
-            // Do NOT mark as dirty, do NOT emit rChange
-            this._renderSelected(value, false);
-            this.clearComboboxOptions();
-        }
-    }
-    /** Listen for custom event triggered by "onClick" event on `<r-select-option>` */
-    optionSelectAction(e) {
-        e.stopPropagation();
-        if (this.disabled)
-            return;
-        // Mark as dirty only if value actually changes
-        if (e.target.value !== this.currentValue) {
-            this.dirty = true;
-        }
-        this.setValueFromUserInteraction(e.target.value);
-    }
-    tooltipFocusAction() {
-        this.collapse();
-        this.reportValidity();
-    }
-    onMouseup(e) {
-        if (!this.isExpanded)
-            return;
-        e.stopPropagation();
-        if (!this.host.contains(e.target)) {
-            this.collapse();
-            this.reportValidity();
-        }
-    }
-    onKeyup(e) {
-        if (!this.isExpanded)
-            return;
-        e.stopPropagation();
-        const path = e.composedPath ? e.composedPath() : [];
-        const isInsideSelect = path.includes(this.host);
-        if (!isInsideSelect) {
-            this.collapse();
-            this.reportValidity();
-        }
-    }
-    /**
-     * Listen on window scroll
-     * and update tooltip position if needed
-     */
-    handleScrolling() {
-        if (this.isExpanded)
-            this.defineListboxPositionState();
-    }
-    /**
-     * Listen on window resizing
-     * and update tooltip position if needed
-     */
-    handleResizing() {
-        if (this.isExpanded)
-            this.defineListboxPositionState();
-    }
-    /**
-     * Set value of the select programmatically.
-     * Does NOT mark as dirty or emit change events.
-     * Use this for programmatic value updates.
-     */
-    async setValue(value = '') {
-        // Clear validation results
-        this.resetValidation();
-        // Don't emit change event for programmatic updates
-        this._renderSelected(value, false);
-        this.clearComboboxOptions();
-    }
-    /**
-     * Internal method to set value from user interaction.
-     * Assumes dirty flag is already set by the caller.
-     * Will emit rChange if dirty flag is true.
-     */
-    setValueFromUserInteraction(value = '') {
-        // Clear validation results
-        this.resetValidation();
-        // Emit change event for user interactions (if dirty is set)
-        this._renderSelected(value, true);
-        this.clearComboboxOptions();
-    }
-    /** Set value of the select */
-    async getValue() {
-        return this.currentValue || '';
-    }
-    /** Reset select to its initial state */
-    async reset() {
-        // Clear validation results
-        this.resetValidation();
-        // Reset touched and dirty states
-        this.markAsPristine();
-        // Collapse options listbox
-        this.collapse();
-        // Restore unfiltered list
-        this.clearComboboxOptions();
-        // If value has not changed --> nothing to reset
-        if (this.currentValue === this.initial['value'])
-            return;
-        // If initial value is not an empty string
-        if (this.initial['value'] !== '' && this.initiallySelectedElement) {
-            this.isResetting = true;
-            this.setValue(this.initial['value']);
-            this.isResetting = false;
-            return;
-        }
-        // Clear any selected option
-        this.deselectOptions();
-        // Set value of the select to null
-        this.currentValue = '';
-        this.valueToDisplay = '';
-    }
-    /**
-     * Clears validation results.
-     */
-    async resetValidation() {
-        // Clear validity message
-        this.validityMessage = null;
-        // Clear validity state
-        this.validityState = null;
-        // Reset props to initial
-        this.invalid = this.initial['invalid'];
-        this.valid = !this.invalid;
-    }
-    /**
-     * Returns whether the select has been touched (focused/clicked by user).
-     * @returns A boolean indicating whether the select has been touched.
-     */
-    async isTouched() {
-        return this.touched;
-    }
-    /**
-     * Returns whether the select value has been changed by user interaction.
-     * @returns A boolean indicating whether the select is dirty.
-     */
-    async isDirty() {
-        return this.dirty;
-    }
-    /**
-     * Marks the select as untouched and pristine (not dirty).
-     */
-    async markAsPristine() {
-        this.touched = false;
-        this.dirty = false;
-    }
-    /**
-     * Validates the textarea without triggering UI and returns a boolean indicating its validity.
-     * @returns A boolean indicating whether the textarea is valid.
-     */
-    async checkValidity() {
-        const { validityState } = this.getValidityStateData(this.nativeElement);
-        return validityState === 'valid';
-    }
-    /** Check validity and reveal validation state and message */
-    async reportValidity() {
-        this.validateFormElement(this.nativeElement);
-        return this.validityState === 'valid';
-    }
-    /** Set focus on the element */
-    async setFocus() {
-        var _a;
-        (_a = this.valueElement) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /** Remove focus from the element */
-    async setBlur() {
-        var _a;
-        (_a = this.valueElement) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    /** Expand options listbox */
-    async expand() {
-        this.isExpanded = true;
-    }
-    /** Collapse options listbox */
-    async collapse() {
-        this.isExpanded = false;
-        if (this.isBusy)
-            return;
-        this.clearOptionsFocus();
-        this.setComboboxValueOnCollapse();
-    }
-    /**
-     * Retrieves the currently focused option within this select component.
-     *
-     * The focused option is identified by the presence of the `data-focused="true"`
-     * attribute on an `r-select-option` element inside the component's host.
-     *
-     * @returns Promise resolving to the focused `HTMLRSelectOptionElement`, or `null`
-     * if no option is currently marked as focused.
-     */
-    async getFocusedOption() {
-        return this.host.querySelector('r-select-option[data-focused="true"]') || null;
-    }
-    /**
-     * Sets focus to the option at the specified index.
-     *
-     * Retrieves the option element from the internal optionElements collection
-     * and delegates focusing logic to `setOptionFocus`.
-     *
-     * @param index - Zero-based index of the option to focus. If the index is out of bounds
-     * or the corresponding option element is unavailable, the method will no-op.
-     *
-     * @returns A promise that resolves with the result of `setOptionFocus`, typically indicating
-     * success or failure of applying focus (implementation dependent).
-     */
-    async setFocusedOption(index) {
-        return this.setOptionFocus(this.optionElements[index]);
-    }
-    clearOptionsFocus() {
-        var _a;
-        this.focusedOption = null;
-        try {
-            this.valueElement.ariaActiveDescendantElement = null;
-        }
-        catch (_b) {
-            (_a = this.valueElement) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-activedescendant');
-        }
-        this.focusedOptions.forEach(option => option.setBlur());
-    }
-    setComboboxValueOnCollapse() {
-        var _a, _b, _c;
-        if (!this.combobox)
-            return;
-        this.valueElement.value = ((_c = (_b = (_a = this.selectedElement) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim) === null || _c === void 0 ? void 0 : _c.call(_b)) || '';
-        this.clearComboboxOptions();
-    }
-    get focusedOptions() {
-        return Array.from(this.host.querySelectorAll('r-select-option[data-focused="true"]'));
-    }
-    toggle() {
-        this.isExpanded = !this.isExpanded;
-    }
-    get selectedElement() {
-        return this.host.querySelector(`r-select-option[value="${this.currentValue}"]`);
-    }
-    get initiallySelectedElement() {
-        return this.host.querySelector(`r-select-option[value="${this.initial['value']}"]`) || null;
-    }
-    /** Identify wrapping form element */
-    get parentFormEl() {
-        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
-    }
-    /**
-     * Determine whether this element should be ignored
-     * during Constraint Validation API validation.
-     * */
-    get isNoValidate() {
-        var _a;
-        return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
-            this.novalidate ||
-            false);
-    }
-    get optionElements() {
-        return this.host.querySelectorAll('r-select-option:not([disabled]:not([disabled="false"])):not([aria-hidden="true"])') || null;
-    }
-    get optionElementsArray() {
-        return Array.from(this.optionElements);
-    }
-    deselectOptions() {
-        if (!this.optionElements)
-            return;
-        this.optionElements.forEach(option => option.clearSelected());
-    }
-    get isBusy() {
-        return this.isInitializing || this.isResetting;
-    }
-    _renderSelected(value = '', emitValue = true) {
-        var _a, _b;
-        // Update value of `<r-select>`
-        this.currentValue = value;
-        if (this.currentValue === null)
-            this.host.removeAttribute('value');
-        else
-            this.host.setAttribute('value', this.currentValue);
-        const elementToSelect = this.host.querySelector(`r-select-option[value="${(_a = this.currentValue) === null || _a === void 0 ? void 0 : _a.trim()}"]`);
-        this.valueToDisplay = (elementToSelect === null || elementToSelect === void 0 ? void 0 : elementToSelect.innerHTML) || (elementToSelect === null || elementToSelect === void 0 ? void 0 : elementToSelect.textContent) || this.currentValue || '';
-        // Switch `selected` value for each option
-        (_b = this.optionElements) === null || _b === void 0 ? void 0 : _b.forEach(option => {
-            option.value === value ? option.setSelected() : option.clearSelected();
-        });
-        this._renderNativeOption();
-        if (this.isExpanded)
-            this.collapse();
-        if (!this.isBusy) {
-            this.reportValidity();
-        }
-        // Only emit rChange if:
-        // 1. emitValue is true
-        // 2. Not during initialization or reset
-        // 3. The component is dirty (user has interacted)
-        if (emitValue && !this.isBusy && this.dirty) {
-            this.rChange.emit({
-                element: this.host,
-                value: value
-            });
-        }
-    }
-    setOptionFocus(element = this.selectedElement) {
-        if (!element)
-            return;
-        if (this.optionElements === null)
-            return;
-        // Helper: fallback to scrollIntoView
-        const _scrollIntoViewFallback = (element, container) => {
-            const top = element.offsetTop;
-            const bottom = top + element.offsetHeight;
-            const viewTop = container.scrollTop;
-            const viewBottom = viewTop + container.clientHeight;
-            if (top < viewTop) {
-                container.scrollTop = top;
-            }
-            else if (bottom > viewBottom) {
-                container.scrollTop = bottom - container.clientHeight;
-            }
-        };
-        // Helper: defines if scrollIntoView can be used or calls optional fallback
-        const _scrollIntoView = (element, container) => {
-            var _a, _b;
-            if (!container)
-                return;
-            // Try native scrollIntoView first (some browsers optimize this)
-            try {
-                (_a = element.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(element, {
-                    block: 'nearest',
-                    inline: 'nearest'
-                });
-            }
-            catch (_c) {
-                // Older Safari without options signature
-                (_b = element.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(element, false);
-            }
-            // Manual correction if still out of view
-            const optRect = element.getBoundingClientRect();
-            const contRect = container.getBoundingClientRect();
-            const outside = optRect.top < contRect.top || optRect.bottom > contRect.bottom;
-            if (outside) {
-                _scrollIntoViewFallback(element, container);
-            }
-        };
-        requestAnimationFrame(() => {
-            var _a;
-            this.clearOptionsFocus();
-            element.setFocus();
-            this.focusedOption = element;
-            try {
-                this.valueElement.ariaActiveDescendantElement = element;
-            }
-            catch (_b) {
-                (_a = this.valueElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', element.id);
-            }
-            _scrollIntoView(element, this.listboxElement);
-        });
-    }
-    focusPrevOption(currentElement = this.focusedOption || this.selectedElement) {
-        if (this.optionElements === null)
-            return;
-        const currentIndex = this.optionElementsArray.indexOf(currentElement);
-        const prevIndex = currentIndex - 1;
-        const isPrevIndex = prevIndex >= 0;
-        const prevElement = isPrevIndex ? this.optionElements[prevIndex] : this.optionElements[this.optionElements.length - 1];
-        this.setOptionFocus(prevElement);
-    }
-    focusNextOption(currentElement = this.focusedOption || this.selectedElement) {
-        if (this.optionElements === null)
-            return;
-        const currentIndex = this.optionElementsArray.indexOf(currentElement);
-        const nextIndex = currentIndex + 1;
-        const lastIndex = this.optionElements.length - 1;
-        const isNextIndex = nextIndex <= lastIndex;
-        const nextElement = isNextIndex ? this.optionElements[nextIndex] : this.optionElements[0];
-        this.setOptionFocus(nextElement);
-    }
-    /**
-     * Return option elements whose label starts with the filter text (case-insensitive).
-     */
-    filterOptions(options, filter) {
-        if (!filter)
-            return [];
-        const f = filter.toLowerCase();
-        return options.filter(o => !o.disabled &&
-            (o.textContent || '').trim().toLowerCase().startsWith(f));
-    }
-    /**
-     * Return the index (within the provided array) of an option matching the filter.
-     * If the filter is multiple iterations of the same letter (e.g. 'aaa'), cycle through
-     * first-letter matches starting from startIndex.
-     * Returns -1 if no match.
-     */
-    getIndexByLetter(options, filter, startIndex = 0) {
-        if (!options.length || !filter)
-            return -1;
-        const ordered = [...options.slice(startIndex), ...options.slice(0, startIndex)];
-        const matchesFull = this
-            .filterOptions(ordered, filter)
-            .sort((a, b) => ((a.textContent || '').trim().toLowerCase())
-            .localeCompare((b.textContent || '').trim().toLowerCase()));
-        const allSame = filter.split('').every(c => c === filter[0]);
-        if (matchesFull[0]) {
-            return options.indexOf(matchesFull[0]);
-        }
-        else if (allSame) {
-            const firstLetterMatches = this.filterOptions(ordered, filter[0]);
-            if (firstLetterMatches[0]) {
-                return options.indexOf(firstLetterMatches[0]);
-            }
-            return -1;
-        }
-        return -1;
-    }
-    handleTypeahead(char) {
-        const RESET_MS = 500;
-        clearTimeout(this.typeaheadTimeout);
-        const options = this.optionElementsArray;
-        // Append character
-        this.typeaheadBuffer += char.toLowerCase();
-        const allSame = this.typeaheadBuffer.split('').every(c => c === this.typeaheadBuffer[0]);
-        // Starting point for search:
-        let startIndex;
-        if (allSame && this.lastTypeaheadIndex !== -1) {
-            // Cycle through same-letter matches
-            startIndex = (this.lastTypeaheadIndex + 1) % options.length;
-        }
-        else {
-            const focusBase = (this.focusedOption || this.selectedElement);
-            const baseIndex = options.indexOf(focusBase);
-            startIndex = baseIndex === -1 ? 0 : (baseIndex + 1) % options.length;
-        }
-        const idx = this.getIndexByLetter(options, this.typeaheadBuffer, startIndex);
-        if (idx !== -1) {
-            this.lastTypeaheadIndex = idx;
-            const el = options[idx];
-            if (!this.isExpanded)
-                this.expand();
-            this.setOptionFocus(el);
-        }
-        // Reset buffer after inactivity
-        this.typeaheadTimeout = setTimeout(() => {
-            this.typeaheadBuffer = '';
-        }, RESET_MS);
-    }
-    connectFormEventListeners() {
-        if (!this.parentFormEl)
-            return;
-        this.parentFormEl.addEventListener('formdata', this.contributeToFormData);
-        this.parentFormEl.addEventListener('submit', this.onSubmitForm, { capture: true });
-        this.parentFormEl.addEventListener('reset', this.onResetForm);
-    }
-    disconnectFormEventListeners() {
-        if (!this.parentFormEl)
-            return;
-        this.parentFormEl.removeEventListener('formdata', this.contributeToFormData);
-        this.parentFormEl.removeEventListener('submit', this.onSubmitForm);
-        this.parentFormEl.removeEventListener('reset', this.onResetForm);
-    }
-    defineHostWidth() {
-        if (this.fullWidth)
-            return;
-        const nativeWidth = this.host.shadowRoot.querySelector('.r-select--native').getBoundingClientRect().width;
-        const valueWidth = (this.combobox ? this.comboboxContainerElement : this.valueElement).getBoundingClientRect().width;
-        const listWidth = this.listboxElement.getBoundingClientRect().width;
-        const structuralWidth = Math.max(nativeWidth, valueWidth, listWidth);
-        this.host.style.setProperty('--width', `${structuralWidth}px`);
-    }
-    _renderNativeOption() {
-        var _a, _b, _c, _d, _e;
-        const optionElement = document.createElement("option");
-        const optionText = document.createTextNode((_c = (_b = (_a = this.selectedElement) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim) === null || _c === void 0 ? void 0 : _c.call(_b));
-        optionElement.value = this.currentValue;
-        optionElement.selected = true;
-        optionElement.appendChild(optionText);
-        if (!this.nativeElement)
-            return;
-        this.nativeElement.innerHTML = '';
-        (_d = this.nativeElement) === null || _d === void 0 ? void 0 : _d.appendChild(optionElement);
-        this.nativeElement.value = this.currentValue;
-        (_e = this.nativeElement) === null || _e === void 0 ? void 0 : _e.setAttribute('value', this.currentValue);
-    }
-    notVisible(element) {
-        return getComputedStyle(element).overflow !== "visible";
-    }
-    /**
-     * Finds first element's parent with not visible overflow.
-     * @param element -- parent element
-     * @param initEl -- initial(child) element
-     */
-    findOverflowParent(element) {
-        var _a, _b;
-        if (((_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.nodeType) === Node.DOCUMENT_FRAGMENT_NODE) {
-            return this.findOverflowParent((_b = element.parentNode) === null || _b === void 0 ? void 0 : _b.host);
-        }
-        if (this.notVisible(element)) {
-            return element;
-        }
-        if (element.parentElement) {
-            return this.findOverflowParent(element.parentElement);
-        }
-        return null;
-    }
-    get ariaDescribedBy() {
-        const describedBy = `${this.uniqueId}-message`;
-        return this.hint ? `${this.uniqueId}-hint ${describedBy}` : describedBy;
-    }
-    /**
-      * Parent with non visible overflow
-      */
-    get overflowedParent() {
-        return this.findOverflowParent(this.host.parentElement);
-    }
-    /**
-     * Available space at the top
-     */
-    get top() {
-        var _a, _b;
-        return (!this.overflowedParent ?
-            (_a = this.valueElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().top :
-            Math.abs(this.overflowedParent.getBoundingClientRect().top - ((_b = this.valueElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().top)));
-    }
-    /**
-     * Available space at the bottom
-     */
-    get bottom() {
-        var _a;
-        function calculateBottomSpace(element) {
-            return window.innerHeight - element.getBoundingClientRect().top - element.getBoundingClientRect().height;
-        }
-        const styles = window.getComputedStyle(this.messageContainer);
-        const messageContainerHeight = ((_a = this.messageContainer) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) + parseFloat(styles['marginTop']);
-        const calculatedHostBottomSpace = calculateBottomSpace(this.host) + messageContainerHeight;
-        return !this.overflowedParent ? calculatedHostBottomSpace + messageContainerHeight : Math.abs(calculateBottomSpace(this.overflowedParent) - calculatedHostBottomSpace);
-    }
-    /**
-     * Set correct tooltip position.
-     * First it checks the available space for a defined position and then sets the new one based on the available space.
-     */
-    defineListboxPositionState() {
-        var _a, _b;
-        const isBottomSpace = ((_a = this.listboxElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) < this.bottom;
-        const isTopSpace = ((_b = this.listboxElement) === null || _b === void 0 ? void 0 : _b.offsetHeight) < this.top;
-        const isTop = this.listboxPosition === 'top';
-        const isBottom = this.listboxPosition === 'bottom';
-        /** Don't change the position if there is sufficient space for the listbox
-         * or insufficient space for another position.
-         * */
-        if ((isTop && (isTopSpace || !isBottomSpace)) || (isBottom && (isBottomSpace || !isTopSpace))) {
-            this.listboxPositionState = this.listboxPosition;
-            return;
-        }
-        switch (this.listboxPosition) {
-            case 'top':
-                this.listboxPositionState = !isTopSpace ? 'bottom' : 'top';
-                break;
-            case 'bottom':
-                this.listboxPositionState = !isBottomSpace ? 'top' : 'bottom';
-                break;
-        }
-    }
-    initialize() {
-        var _a;
-        const currentValue = this.value || '';
-        this.initial['value'] = this.value || '';
-        this.initial['invalid'] = this.invalid || false;
-        this.listboxPositionState = this.listboxPosition;
-        // Search for the option to select
-        const elementToSelect = this.optionElementsArray.find((el) => el.value.trim() === currentValue);
-        // Select the matching element if found
-        if (elementToSelect) {
-            this.isInitializing = true;
-            this.setValue(currentValue);
-            this.isInitializing = false;
-            return;
-        }
-        if (this.placeholder)
-            return;
-        if (this.combobox)
-            return;
-        const firstOption = (_a = this.optionElements) === null || _a === void 0 ? void 0 : _a[0];
-        if (firstOption) {
-            this.isInitializing = true;
-            this.setValue(firstOption === null || firstOption === void 0 ? void 0 : firstOption.value);
-            this.isInitializing = false;
-        }
-    }
-    initializeStyleObserver() {
-        if (this.listboxWidthObserver || !this.listboxElement)
-            return;
-        const observerCallback = () => {
-            if (!this.listboxElement)
-                return;
-            // Only recompute if listbox grew beyond current host width
-            const listboxWidth = this.listboxElement.getBoundingClientRect().width;
-            const hostWidth = this.host.getBoundingClientRect().width;
-            if (listboxWidth <= hostWidth)
-                return;
-            this.defineHostWidth();
-        };
-        this.listboxWidthObserver = new styleObserver.StyleObserver(observerCallback);
-        this.listboxWidthObserver
-            .observe([this.listboxElement], ['width']);
-    }
-    get hasError() {
-        var _a;
-        return this.invalid && ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    }
-    get hasValidationError() {
-        var _a;
-        return this.validityState !== 'valid' && ((_a = this.validityMessage) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    }
-    get hasMessage() {
-        return this.hasError || this.hasValidationError;
-    }
-    get isInteractive() {
-        return !this.disabled && !this.isReadonly;
-    }
-    get hasLeadingSlot() {
-        return !!this.host.querySelector('[slot="leading"]');
-    }
-    get hasOptionIcon() {
-        return !!this.optionElementsArray.find(el => !!el.querySelector('[slot="icon"]'));
-    }
-    get isLeadingSlotRendered() {
-        return this.hasLeadingSlot && this.hasOptionIcon && !this.currentValue;
-    }
-    get isPlaceholder() {
-        var _a, _b;
-        const { placeholder } = this;
-        return (((_b = (_a = this.valueToDisplay) === null || _a === void 0 ? void 0 : _a.trim) === null || _b === void 0 ? void 0 : _b.call(_a)) || placeholder || '') === placeholder;
-    }
-    connectedCallback() {
-        this.connectFormEventListeners();
-    }
-    disconnectedCallback() {
-        this.disconnectFormEventListeners();
-    }
-    componentWillLoad() {
-        this.isExpanded = this.expanded;
-        this.isReadonly = this.readonly;
-    }
-    componentDidLoad() {
-        this.defineListboxPositionState();
-        this.initializeStyleObserver();
-    }
-    render() {
-        var _a;
-        const { uniqueId, disabled, isExpanded, fieldIndicator, invalid, placeholder, required, hint, label, internal } = this;
-        const labelAttr = label ? {
-            fieldIndicator
-        } : {};
-        const isRequired = this.isInteractive ? !!required : false;
-        const comboboxAttrs = {
-            id: `${uniqueId}-value`,
-            tabindex: `${disabled ? -1 : 0}`,
-            'aria-controls': `${uniqueId}-list`,
-            'aria-describedby': this.ariaDescribedBy,
-            'aria-disabled': `${disabled || false}`,
-            'aria-expanded': `${isExpanded || false}`,
-            'aria-invalid': `${invalid || false}`,
-            'aria-readonly': `${!this.isInteractive || false}`,
-            'aria-required': `${isRequired}`,
-            'aria-labelledby': `${uniqueId}-label`
-        };
-        const listboxAttrs = {
-            'aria-label': label
-        };
-        const nativeAttrs = {
-            placeholder,
-            name: this.name,
-            value: this.currentValue,
-            'aria-hidden': 'true',
-            tabindex: '-1',
-            invalid,
-            disabled,
-            required: isRequired
-        };
-        return (index.h(index.Host, { key: 'f52fa96bdacace6070cd2baa15f8fab939d05916', "data-value": this.currentValue, expanded: !this.disabled && this.isExpanded, "data-listbox-position": this.listboxPositionState, "data-initial-value": this.initial['value'], "data-is-placeholder": `${!!this.isPlaceholder}`, "data-value-focused": `${!!this.isValueFocused}`, "data-option-focused": `${!!this.focusedOption}`, "data-validity-state": `${this.validityState || ''}`, "data-validity-message": `${this.validityMessage || ''}`, "data-readonly": `${!!this.isReadonly}`, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, index.h("div", { key: '80326d43674f8caac11678ca4d5a6ca8178f9454', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, index.h("div", { key: '25fa25960350a338c7c9156d38c974c0ad8a0861', class: internal ? 'visually-hidden' : 'r-select--label-container' }, index.h("label", { key: 'b52ac4d91e32df39459492bbeaf166d2a71d165c', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, index.h("r-label", Object.assign({ key: 'ac75955086f424e781baf66e6853cbc89ec20d56' }, labelAttr), label)), index.h("slot", { key: '4cd953da5c64a473070ce4b8a3e5721a36561685', name: "popover" })), hint &&
-            index.h("r-hint", { key: '2d6a2e9eae51d56f31886725274c637e76ab4d75', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), index.h("div", { key: '8107a1d2475d11d6e827d7394ade84f9c4c85ea5', class: "r-select" }, index.h("select", Object.assign({ key: 'd7a60a4ff2f8f568da1ea90d859d5de78a1e73ef', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), index.h("div", { key: '9d49470c7e4cc179dfd93cb1233e2bbf86ac7641', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), index.h("div", Object.assign({ key: '9594f3439c7591a4e4ef359a205a55d1c56dbb80', role: "listbox", tabindex: "-1", id: `${uniqueId}-list`, class: "r-select--options", ref: el => this.listboxElement = el }, listboxAttrs), (this.isNoResultsFound || !((_a = this.optionElements) === null || _a === void 0 ? void 0 : _a.length)) && index.h("r-select-option", { key: 'ae0ef701ff3e7db4c17aba7d57265122c3bf6587', "data-no-results": "true", value: "no_results" }, this.noResultsFound), index.h("slot", { key: '012fcee55283c7bc5a3230ff23b692eca33d853b', onSlotchange: this.handleSlotChange })))), index.h("div", { key: '94fc769d8eeb0bd92f1d12d553b033a3de9ad8dc', id: `${uniqueId}-message`, "aria-live": "polite", "aria-atomic": "true", ref: (el) => this.messageContainer = el, class: this.hasMessage && !internal ? 'r-select--message' : 'visually-hidden' }, this.hasMessage && index.h("r-hint", { key: '881e60130bd3cbc9004aacbb027911357286a516', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage))));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "listboxPosition": ["handleListboxPositionChange"],
-        "expanded": ["handleExpandedChange"],
-        "readonly": ["handleReadonlyChange"],
-        "value": ["handleValueChange"]
-    }; }
-};
-Select.style = selectCss;
-
-exports.r_select = Select;