@mgdis/mg-components 6.20.0 → 6.22.0

package/dist/components/mg-input-combobox.js

@@ -1,940 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { P as Paginate, C as ClassList, t as toString, e as Cursor, n as nextTick, h as Page, j as getObjectValueFromKey, d as allItemsAreString, i as isValidString, k as isObject, f as formatID } from './index2.js';
-import { d as defineCustomElement$8, c as classReadonly, a as classDisabled, w as widths } from './mg-input2.js';
-import { i as initLocales } from './index3.js';
-import { K as Keys } from './events.utils.js';
-import { d as defineCustomElement$b } from './mg-button2.js';
-import { d as defineCustomElement$a } from './mg-card2.js';
-import { d as defineCustomElement$9 } from './mg-icon2.js';
-import { d as defineCustomElement$7 } from './mg-input-title2.js';
-import { d as defineCustomElement$6 } from './mg-loader2.js';
-import { d as defineCustomElement$5 } from './mg-popover2.js';
-import { d as defineCustomElement$4 } from './mg-popover-content2.js';
-import { d as defineCustomElement$3 } from './mg-tooltip2.js';
-import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
-
-const mgInputComboboxCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--combobox mg-popover{--mg-c-popover-overflow:auto;--mg-c-popover-padding-vertical:0;--mg-c-popover-padding-horizontal:0;--mg-c-popover-min-width:var(--mg-c-input-list-width);--mg-c-popover-max-height:calc(50 * var(--mg-b-size-8) - var(--mg-b-size-32))}.mg-c-input.mg-c-input--combobox .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--combobox .mg-c-input__box{cursor:pointer}.mg-c-input.mg-c-input--combobox .mg-c-input__popover-container{display:flex;flex-direction:column;gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--combobox .mg-c-input__load-more{padding:0 var(--mg-b-size-8) var(--mg-b-size-4)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list{padding:0;margin:0;cursor:pointer;list-style:none}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item{display:flex;padding:var(--mg-b-size-8)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item:hover,.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--focus-visible{background-color:var(--mg-b-color-neutral-20)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--selected{font-weight:700}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--selected mg-icon{margin-left:auto}.mg-c-input.mg-c-input--combobox.mg-c-input--width-2 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + var(--mg-b-size-24) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-4 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + var(--mg-b-size-48) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-16 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + calc(23 * var(--mg-b-size-8)) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full mg-popover{--mg-c-popover-max-width:var(--mg-c-input-list-width, var(--mg-c-popover-max-width))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full .mg-c-input__input-group-container{display:flex;width:100%}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full .mg-c-input__box{flex:1}.mg-c-input.mg-c-input--combobox.mg-c-input--input-append .mg-c-input__box{padding-right:calc(var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--input-append .mg-c-input__box-append{position:absolute;top:0;right:0}";
-
-/**
- * Check if object is an item
- * @param item - object to check
- * @returns True if object is an item
- */
-const isItem = (item) => item && typeof item === 'object' && typeof item.title === 'string' && item.value !== undefined;
-/**
- * Check if objects are items
- * @param items - items to check
- * @returns True if objects are items
- */
-const isItems = (items) => Array.isArray(items) && items.every(isItem);
-/**
- * Check if object is valid combobox fetchmappings
- * @param value - to validate
- * @returns truthy if mapping is valid
- */
-const isFetchmappings = (value) => {
-    const isValidRoot = isObject(value) && Object.hasOwn(value, 'request') && Object.hasOwn(value, 'response');
-    if (isValidRoot) {
-        const { request, response } = value;
-        if ([request, response].some(property => !isObject(property)))
-            return false;
-        const isValidRequest = typeof request.filter === 'string' && (request.filterTransform === undefined || typeof request.filterTransform === 'function');
-        const isValidResponse = typeof response === 'object' &&
-            typeof response.total === 'string' &&
-            typeof response.items === 'string' &&
-            typeof response.next === 'string' &&
-            typeof response.itemTitle === 'string' &&
-            (typeof response.itemValue === 'string' || response.itemValue === undefined);
-        return isValidRequest && isValidResponse;
-    }
-    else {
-        return isValidRoot;
-    }
-};
-const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.valueChange = createEvent(this, "value-change", 7);
-        this.filterChange = createEvent(this, "filter-change", 7);
-        this.showMore = createEvent(this, "load-more", 7);
-        this.inputValid = createEvent(this, "input-valid", 7);
-        this.fetchError = createEvent(this, "fetch-error", 7);
-        // hasDisplayedError (triggered by blur event)
-        this.hasDisplayedError = false;
-        this.customErrorMessage = { lock: false };
-        /**
-         * Input name
-         * If not set the value equals the identifier
-         */
-        this.name = this.identifier;
-        /**
-         * Define if label is displayed on top
-         */
-        this.labelOnTop = false;
-        /**
-         * Define if label is visible
-         */
-        this.labelHide = false;
-        /**
-         * Define if input is required
-         */
-        this.required = false;
-        /**
-         * Define if input is readonly
-         */
-        this.readonly = false;
-        /**
-         * Define if input is disabled
-         */
-        this.disabled = false;
-        /**
-         * Define input width
-         */
-        this.mgWidth = 'full';
-        /**
-         * Define tooltip position
-         */
-        this.tooltipPosition = 'input';
-        /**
-         * Formated items for display
-         */
-        this.options = new Paginate([]);
-        /**
-         * Option filter
-         */
-        this.filter = '';
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-input--combobox', 'mg-c-input--has-icon', 'mg-c-input--input-append']);
-        /**
-         * Popover display state
-         */
-        this.popoverDisplay = false;
-        /**
-         * Handle `click` event on option
-         * @param event - option element click event
-         */
-        this.handleOptionClick = (event) => {
-            this.setValue(this.options.items.find(option => toString(option.value) === event.target.dataset.value));
-            this.popoverDisplay = false;
-        };
-        /**
-         * Handle `click` event on reset button
-         * @param event - click event
-         */
-        this.handleResetButton = (event) => {
-            event.stopPropagation();
-            this.reset().then(() => {
-                this.input.focus();
-            });
-        };
-        /**
-         * Handle `display-change` event on mg-popover
-         */
-        this.handlePopoverDisplay = (event) => {
-            this.popoverDisplay = event.detail;
-        };
-        /**
-         * Handle input event
-         */
-        this.handleFilterInput = () => {
-            this.checkValidity();
-            if (this.hasDisplayedError)
-                this.setErrorMessage();
-            if (!this.popoverDisplay)
-                this.popoverDisplay = true;
-            // update filter with debounce to prevent filter update overload
-            if (!this.debounce) {
-                this.debounce = true;
-                setTimeout(() => {
-                    this.filter = this.input.value;
-                    this.debounce = false;
-                }, 250);
-            }
-        };
-        /**
-         * Handle `blur` event
-         */
-        this.handleFilterBlur = (event) => {
-            if (this.popoverDisplay) {
-                // prevent blur event to bubble up and reset input focus process when popover is open
-                event.stopImmediatePropagation();
-                this.input.focus();
-            }
-            else {
-                // Display Error
-                this.handlerInProgress = 'blur';
-                this.displayError().finally(() => {
-                    // reset guard
-                    this.handlerInProgress = undefined;
-                });
-            }
-        };
-        /**
-         * Handle `focus` event
-         */
-        this.handleFilterFocus = () => {
-            // ensure visual focus is always clear on focus when component isn't in loading state
-            if (!this.isLoading) {
-                this.option = null;
-            }
-        };
-        /**
-         * Handle load-more <mg-button> `click`
-         */
-        this.handleLoadMoreButton = () => {
-            this.loadingWrapper({ name: 'load-more', cursor: Cursor.NEXT }).then(() => {
-                this.input.focus();
-            });
-        };
-        /**
-         * Handle `keypress` event
-         * @param event - keyboard event
-         */
-        this.handleFilterKeydown = (event) => {
-            var _a;
-            if (this.disabled || event.ctrlKey || event.shiftKey)
-                return;
-            let guard = false;
-            // override keys actions
-            switch (event.key) {
-                case Keys.TAB:
-                case Keys.ENTER: {
-                    guard = event.key === Keys.ENTER;
-                    const option = (_a = this.option) !== null && _a !== void 0 ? _a : this.options.items.find(this.isCurrentOption);
-                    // Sets the value to the content of the focused option in the listbox.
-                    if (this.popoverDisplay) {
-                        this.setValue(option);
-                    }
-                    // Closes the popover.
-                    this.popoverDisplay = false;
-                    break;
-                }
-                case Keys.DOWN:
-                case Keys.ARROWDOWN:
-                case Keys.UP:
-                case Keys.ARROWUP: {
-                    guard = true;
-                    if (this.isLoading || this.page.total === 0) {
-                        this.popoverDisplay = true;
-                        break;
-                    }
-                    if (Boolean(event.altKey) && [Keys.DOWN, Keys.ARROWDOWN].includes(event.key)) {
-                        // Opens the popover without moving focus or changing selection.
-                        this.popoverDisplay = true;
-                        break;
-                    }
-                    // define cursor
-                    let cursor;
-                    const isNavigationStart = this.popoverDisplay && isItem(this.option);
-                    if ([Keys.DOWN, Keys.ARROWDOWN].includes(event.key)) {
-                        // If the filter is not empty and the popover is displayed, moves visual focus to the first suggested value.
-                        // If the filter is empty and the popover is not displayed, opens the popover and moves visual focus to the first option.
-                        // Moves visual focus to the next option.
-                        // If visual focus is on the last option, moves visual focus to the first option.
-                        cursor = isNavigationStart ? Cursor.NEXT : Cursor.FIRST;
-                    }
-                    else if ([Keys.UP, Keys.ARROWUP].includes(event.key)) {
-                        // If the filter is not empty and the popover is displayed, moves visual focus to the last suggested value.
-                        // If the filter is empty, first opens the popover if it is not already displayed and then moves visual focus to the last option.
-                        // Moves visual focus to the previous option.
-                        // If visual focus is on the first option, moves visual focus to the last option.
-                        cursor = isNavigationStart ? Cursor.PREVIOUS : Cursor.LAST;
-                    }
-                    // update scroll and visual focused option in wrapper
-                    this.loadingWrapper({ name: 'scroll', cursor });
-                    // open popover
-                    this.popoverDisplay = true;
-                    break;
-                }
-                case Keys.LEFT:
-                case Keys.ARROWLEFT:
-                case Keys.HOME:
-                case Keys.RIGHT:
-                case Keys.ARROWRIGHT:
-                case Keys.END: {
-                    // skip process if visual focus is not in popover
-                    if (!isItem(this.option))
-                        break;
-                    guard = true;
-                    // Remove visual focus from popover options
-                    this.option = null;
-                    let index;
-                    if (Keys.HOME === event.key) {
-                        // Moves visual focus to the textbox and places the editing cursor at the beginning of the field.
-                        index = 0;
-                    }
-                    else if (Keys.END === event.key) {
-                        // Moves visual focus to the textbox and places the editing cursor at the end of the field.
-                        index = this.filter.length;
-                    }
-                    if (typeof index === 'number') {
-                        this.input.setSelectionRange(index, index);
-                    }
-                    break;
-                }
-                case Keys.ESC:
-                case Keys.ESCAPE: {
-                    guard = true;
-                    if (this.popoverDisplay) {
-                        // If the popover is displayed, closes it.
-                        this.popoverDisplay = false;
-                    }
-                    else {
-                        // If the popover is not displayed, clears the filter.
-                        this.setValue(null);
-                        this.filter = '';
-                        // Sets visual focus on the textbox.
-                        this.option = null;
-                    }
-                    break;
-                }
-                default: {
-                    // Remove visual focus from popover options
-                    this.option = null;
-                    break;
-                }
-            }
-            if (guard) {
-                event.stopPropagation();
-                event.preventDefault();
-            }
-        };
-        /**
-         * Scroll to next option from cursor
-         * @param index - targeted option index to scroll into
-         */
-        this.scrollToIndex = (index) => {
-            // ensure we have an opened popover element on screen when the scrollIntiView is called
-            requestAnimationFrame(() => {
-                var _a;
-                if (!this.popoverDisplay)
-                    return;
-                (_a = this.element.shadowRoot.querySelector(`li:nth-of-type(${(index || 0) + this.page.baseIndex})`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
-            });
-        };
-        /**
-         * Is option the current value
-         * @param option - option to match with
-         * @returns true if option is the current value
-         */
-        this.isCurrentOption = (option) => (isItem(this.value) ? this.value.value : this.value) === option.value;
-        /**
-         * get value prop title
-         * @returns value title
-         */
-        this.getValueTitle = () => {
-            if (this.value && isItem(this.value))
-                return this.value.title;
-            else if (typeof this.value === 'string')
-                return this.value;
-            else
-                return '';
-        };
-        /**
-         * Check if input is valid
-         */
-        this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || this.input.checkValidity());
-        };
-        /**
-         * Set input error message
-         * @param fromSetErrorContext - context come from `setError` method
-         */
-        this.setErrorMessage = (fromSetErrorContext = false) => {
-            // Set error message
-            this.errorMessage = undefined;
-            if (!this.valid) {
-                // Does have a new custom error message OR does have a custom error message locked
-                if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
-                    this.errorMessage = this.customErrorMessage.message;
-                }
-                // required
-                else if (this.input.validity.valueMissing) {
-                    this.errorMessage = this.messages.errors.required;
-                }
-            }
-        };
-        /**
-         * Get first page with filter applied
-         * @returns first page with filter applied
-         */
-        this.getFirstPage = () => this.options.getPage(0, option => this.filter === '' || option.title.toLocaleLowerCase().includes(this.filter.toLocaleLowerCase()));
-        /**
-         * Loading wrapper with a given action
-         * @param action - wrapped loading action
-         * @returns promisified action
-         */
-        this.loadingWrapper = (action) => {
-            var _a;
-            let promise;
-            let index;
-            // cache initial loading action if not defined
-            (_a = this.loadingAction) !== null && _a !== void 0 ? _a : (this.loadingAction = action.name);
-            // update index
-            if (Boolean(this.option) && this.loadingAction !== 'load-more') {
-                index = this.page.items.findIndex(option => toString(option.value) === toString(this.option.value));
-            }
-            else if (this.loadingAction === 'load-more') {
-                index = this.page.items.length - this.page.baseIndex;
-            }
-            // when action require a showMore we fetch the API else we report action to next tick
-            // Set "Show more" if action match OR if next item not available in the current page
-            if (action.name === 'load-more') {
-                // wait for new element render and update scroll position
-                // set component loading
-                this.isLoading = true;
-                promise = this.goToNextPage;
-            }
-            else if (action.cursor === Cursor.NEXT &&
-                this.page.items.length <= this.page.total &&
-                index + this.page.baseIndex === this.page.items.length &&
-                index + this.page.baseIndex < this.page.total) {
-                // trigger load-more from button to benefit from `disabled-on-click`
-                this.loadMoreElement.click();
-                return;
-            }
-            else if (action.name === 'scroll') {
-                promise = nextTick;
-            }
-            else {
-                promise = this.updatePage;
-            }
-            return promise()
-                .then(() => {
-                // parse full items list from options
-                const options = this.filter === '' ? this.options.items : this.options.items.filter(option => option.title.includes(this.filter));
-                // update visual focus
-                if (action.name !== 'load-data') {
-                    index = this.page.getIndexFromCursor(action.cursor, this.loadingAction === 'load-more' && index >= 0 ? options[index] : this.option);
-                }
-                this.option = options[index];
-                // update scroll position
-                this.scrollToIndex(index);
-            })
-                .finally(() => {
-                // reset loading after next render
-                requestAnimationFrame(() => {
-                    this.isLoading = false;
-                    this.loadingAction = undefined;
-                });
-            });
-        };
-        /**
-         * Go to next page
-         * @returns promise
-         */
-        this.goToNextPage = () => {
-            this.showMore.emit();
-            if (this.fetchurl !== undefined) {
-                return this.getOptions(typeof this.page.next === 'string' ? this.page.next : undefined).then(nextPage => {
-                    if (nextPage !== undefined) {
-                        // merge items from current page and next page
-                        const items = [...this.page.items, ...nextPage.items];
-                        // create new options pagination withe merged items
-                        this.options = new Paginate(items, { total: nextPage.total, next: nextPage.next, top: items.length });
-                    }
-                });
-            }
-            else {
-                return nextTick(() => {
-                    if (typeof this.page.next === 'function') {
-                        const nextPage = this.page.next();
-                        this.page = new Page(Object.assign(Object.assign({}, nextPage), { items: [...this.page.items, ...nextPage.items] }));
-                    }
-                });
-            }
-        };
-        /**
-         * Go to next page
-         * @returns promise
-         */
-        this.updatePage = async () => {
-            if (this.fetchurl !== undefined) {
-                return this.getOptions().then(page => {
-                    if (page !== undefined) {
-                        // reset current options pagination from API response
-                        this.options = new Paginate(page.items, { total: page.total, next: page.next, top: page.top });
-                    }
-                });
-            }
-            else {
-                this.page = this.getFirstPage();
-            }
-        };
-        /**
-         * Fetch request
-         * @param url - to fetch
-         * @returns new page from url
-         */
-        this.getOptions = async (url = this.fetchurl) => {
-            // add text filter to url
-            const filter = typeof this.fetchmappings.request.filterTransform === 'function' ? this.fetchmappings.request.filterTransform(this.filter) : this.filter;
-            const updateUrl = (typeof url === 'string' ? url : url.toString()).replaceAll(this.fetchmappings.request.filter, encodeURIComponent(filter));
-            try {
-                const response = await fetch(updateUrl, this.fetchoptions);
-                if (!response.ok) {
-                    this.fetchError.emit(new Error(`${response.status} - ${response.statusText}`));
-                    return;
-                }
-                const json = await response.json();
-                const items = getObjectValueFromKey(json, this.fetchmappings.response.items).map((item) => {
-                    var _a;
-                    return ({
-                        title: getObjectValueFromKey(item, this.fetchmappings.response.itemTitle),
-                        value: (_a = getObjectValueFromKey(item, this.fetchmappings.response.itemValue)) !== null && _a !== void 0 ? _a : item,
-                    });
-                });
-                const total = Number(getObjectValueFromKey(json, this.fetchmappings.response.total, 0));
-                let next = getObjectValueFromKey(json, this.fetchmappings.response.next);
-                if (URL.canParse(updateUrl) && Boolean(next) && !URL.canParse(next)) {
-                    const previousUrl = new URL(updateUrl);
-                    if (previousUrl.pathname.endsWith(next.split('?')[0])) {
-                        next = new URL(next, previousUrl).toString();
-                    }
-                }
-                return { items, total, next, top: items.length };
-            }
-            catch (error) {
-                this.fetchError.emit(error);
-            }
-        };
-    }
-    watchValue(newValue) {
-        this.filter = this.getValueTitle();
-        this.valueChange.emit(newValue);
-    }
-    watchItems(newValue) {
-        if (this.fetchurl !== undefined && newValue === undefined) {
-            // skip newValue check
-            return;
-        }
-        else if (this.fetchurl !== undefined && newValue !== undefined) {
-            throw new Error(`<mg-input-combobox> prop "items" values cannot be use with "fetchurl" prop defined. Passed value: ${toString(newValue)}.`);
-        }
-        // Empty options
-        else if (Array.isArray(newValue) && newValue.length === 0) {
-            this.options = new Paginate([]);
-        }
-        // String array
-        else if (allItemsAreString(newValue)) {
-            this.options = new Paginate(newValue.map(item => ({ title: item, value: item })), { total: newValue.length });
-        }
-        // Object array
-        else if (isItems(newValue)) {
-            this.options = new Paginate(newValue, { total: newValue.length });
-        }
-        else {
-            throw new Error(`<mg-input-combobox> prop "items" values must be the same type, string or Option. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    watchIdentifier(newValue) {
-        if (isValidString(newValue)) {
-            this.popoverId = `${newValue}-popover`;
-            this.element.dataset.mgPopoverGuard = this.popoverId;
-        }
-    }
-    watchReadonly(newValue) {
-        if (newValue)
-            this.classCollection.add(classReadonly);
-        else
-            this.classCollection.delete(classReadonly);
-    }
-    watchValidityChange(newValue, _oldValue, prop) {
-        if (this.input === undefined)
-            return;
-        this.input[prop] = newValue;
-        this.checkValidity();
-        if (this.hasDisplayedError) {
-            this.setErrorMessage();
-            this.hasDisplayedError = false;
-        }
-    }
-    watchDisabled(newValue) {
-        if (newValue) {
-            this.classCollection.add(classDisabled);
-        }
-        else {
-            this.classCollection.delete(classDisabled);
-        }
-    }
-    watchMgWidth(newValue) {
-        // reset width class
-        widths.forEach(width => {
-            this.classCollection.delete(`mg-c-input--width-${width}`);
-        });
-        // apply new width
-        if (newValue !== undefined)
-            this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
-        this.classCollection = new ClassList(this.classCollection.classes);
-    }
-    watchFetchUrl(newValue) {
-        if (newValue !== undefined) {
-            this.loadingWrapper({ name: 'load-data' });
-        }
-    }
-    watchFetchOptions(newValue) {
-        if (this.fetchurl && newValue && !isObject(newValue)) {
-            throw new Error(`<mg-input-combobox> prop "fetchoptions" value must be a valid RequestInit. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    watchFetchMappings(newValue) {
-        if (this.fetchurl !== undefined && !isObject(newValue)) {
-            throw new Error(`<mg-input-combobox> prop "fetchmappings" is required with "fetchurl" prop.`);
-        }
-        else if (newValue !== undefined && !isFetchmappings(newValue)) {
-            throw new Error(`<mg-input-combobox> prop "fetchmappings" value must be { request: RequestMappingType, response: ResponseMappingType }. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    watchOptions() {
-        this.page = this.getFirstPage();
-    }
-    watchFilter(newValue) {
-        this.loadingWrapper({ name: 'load-data' });
-        this.filterChange.emit(newValue);
-    }
-    watchPopoverDisplay(newValue) {
-        if (newValue) {
-            this.input.focus();
-        }
-        else {
-            // remove visual focus
-            this.option = null;
-            // reset filter with value
-            this.filter = this.getValueTitle();
-            this.handlerInProgress = 'blur';
-            this.displayError().finally(() => {
-                // reset guard
-                this.handlerInProgress = undefined;
-            });
-        }
-    }
-    /**
-     * Set focus on input.
-     */
-    async setFocus() {
-        var _a;
-        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /**
-     * Display input error if it exists.
-     */
-    displayError() {
-        // Use `Promise` as requested for stencil method
-        // Use `requestAnimationFrame` to ensure:
-        // - DOM is fully updated before validation
-        // - Async operations are completed
-        // - No timing issues with Stencil's render cycle
-        // - Keep everything in sync both inside and outside the component
-        return new Promise(resolve => {
-            requestAnimationFrame(() => {
-                this.checkValidity();
-                this.setErrorMessage();
-                this.hasDisplayedError = this.invalid;
-                resolve();
-            });
-        });
-    }
-    /**
-     * Set an error and display a custom error message.
-     * This method can be used to set the component's error state from its concombobox by passing a boolean value to the `valid` parameter.
-     * It must be paired with an error message to display for the given concombobox.
-     * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
-     * @param valid - value indicating the validity
-     * @param errorMessage - the error message to display
-     * @param errorMessageLock - lock the error message and validity state
-     */
-    async setError(valid, errorMessage, errorMessageLock = false) {
-        if (typeof valid !== 'boolean') {
-            throw new Error('<mg-input-combobox> method "setError()" param "valid" must be a boolean.');
-        }
-        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
-            throw new Error('<mg-input-combobox> method "setError()" param "errorMessage" must be a string.');
-        }
-        else {
-            this.customErrorMessage = {
-                lock: valid ? false : errorMessageLock,
-                message: valid ? undefined : errorMessage,
-            };
-            this.setValidity(valid);
-            this.setErrorMessage(true);
-            this.hasDisplayedError = this.invalid;
-        }
-    }
-    /**
-     * Reset value, validity and error state
-     */
-    async reset() {
-        if (!this.readonly) {
-            this.setValue(null);
-            this.option = null;
-            this.filter = '';
-            // Use `Promise` as requested for stencil method
-            // Use `requestAnimationFrame` to ensure:
-            // - DOM is fully updated before validation
-            // - Async operations are completed
-            // - No timing issues with Stencil's render cycle
-            // - Keep everything in sync both inside and outside the component
-            return new Promise(resolve => {
-                requestAnimationFrame(() => {
-                    // unlock validity check by reseting customErrorMessage
-                    this.customErrorMessage = { lock: false };
-                    this.checkValidity();
-                    this.errorMessage = undefined;
-                    this.hasDisplayedError = false;
-                    resolve();
-                });
-            });
-        }
-    }
-    /**
-     * Set value prop
-     * @param newValue - slected option item
-     */
-    setValue(newValue) {
-        if (!isItem(newValue)) {
-            this.value = '';
-        }
-        else if (allItemsAreString(this.items || this.options.items)) {
-            this.value = newValue.title;
-        }
-        else {
-            this.value = Object.assign({}, newValue);
-        }
-    }
-    /**
-     * Method to set validity values
-     * @param newValue - valid new value
-     */
-    setValidity(newValue) {
-        const oldValue = this.valid;
-        if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
-            this.valid = newValue;
-        }
-        this.invalid = !this.valid;
-        // We need to send valid event even if it is the same value
-        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue))
-            this.inputValid.emit(this.valid);
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if component props are well configured on init
-     * @returns timeout
-     */
-    componentWillLoad() {
-        // Get locales
-        this.messages = initLocales(this.element).messages;
-        // Validate
-        this.watchIdentifier(this.identifier);
-        this.watchItems(this.items);
-        if (this.fetchurl !== undefined) {
-            this.watchFetchOptions(this.fetchoptions);
-            this.watchFetchMappings(this.fetchmappings);
-            this.loadingWrapper({ name: 'load-data' });
-        }
-        this.watchValue(this.value);
-        this.watchOptions();
-        this.watchMgWidth(this.mgWidth);
-        this.watchReadonly(this.readonly);
-        this.watchDisabled(this.disabled);
-        // Check validity when component is ready
-        // return a promise to process action only in the FIRST render().
-        // https://stenciljs.com/docs/component-lifecycle#componentwillload
-        return setTimeout(() => {
-            this.checkValidity();
-        }, 0);
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        var _a, _b, _c, _d, _e, _f;
-        const listId = `${this.identifier}-list`;
-        const readonlyValue = this.getValueTitle();
-        const withResetButton = this.value && !this.disabled;
-        let popoverContent;
-        if (((_a = this.page) === null || _a === void 0 ? void 0 : _a.items.length) > 0) {
-            popoverContent = 'list';
-        }
-        else if (((_b = this.page) === null || _b === void 0 ? void 0 : _b.items.length) === 0 && this.filter.length > 0) {
-            popoverContent = 'notfound';
-        }
-        else if (((_c = this.page) === null || _c === void 0 ? void 0 : _c.items.length) === 0) {
-            popoverContent = 'notavailable';
-        }
-        let activeDescendant;
-        if (((_d = this.option) === null || _d === void 0 ? void 0 : _d.value) !== undefined) {
-            activeDescendant = this.option.value;
-        }
-        else if (typeof this.value === 'string') {
-            activeDescendant = this.value;
-        }
-        else {
-            activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
-        }
-        return (h("mg-input", { key: 'ee8222484fa6546a422eb724fdea67402644c0cc', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
-                '--mg-c-input-list-width': ((_f = this.input) === null || _f === void 0 ? void 0 : _f.offsetWidth) > 0 ? `${this.input.offsetWidth}px` : undefined,
-            }, "data-fallback-placement": "bottom-end", "onDisplay-change": this.handlePopoverDisplay }, h("div", { class: "mg-c-input__input-group-container" }, h("mg-icon", { icon: "magnifying-glass" }), h("input", { type: "text", role: "combobox", class: "mg-c-input__box mg-c-input__box--width", value: this.filter, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.popoverDisplay.toString(), "aria-controls": listId, "aria-invalid": (this.invalid === true).toString(), "aria-activedescendant": formatID(activeDescendant), onInput: this.handleFilterInput, onBlur: this.handleFilterBlur, onFocus: this.handleFilterFocus, onKeyDown: this.handleFilterKeydown, ref: (el) => {
-                if (el !== null)
-                    this.input = el;
-            } }), withResetButton ? (h("mg-button", { class: "mg-c-input__box-append mg-c-input__reset", variant: "flat", "is-icon": true, label: this.messages.general.reset, "aria-controls": this.identifier, tabindex: "-1", onClick: this.handleResetButton }, h("mg-icon", { icon: "cross" }))) : (h("mg-button", { class: "mg-c-input__box-append", variant: "flat", "is-icon": true, label: this.itemsLabel, tabindex: "-1", disabled: this.disabled }, h("mg-icon", { icon: `chevron-${this.popoverDisplay ? 'up' : 'down'}` })))), h("div", { slot: "content", class: "mg-c-input__popover-container" }, popoverContent === 'list' && [
-            // eslint-disable-next-line jsx-a11y/role-supports-aria-props
-            h("ul", { key: "list", class: "mg-c-input__input-list", role: "listbox", id: listId, "aria-label": this.itemsLabel, "aria-setsize": this.page.total }, this.page.items.map(option => {
-                var _a;
-                return (
-                // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                h("li", { role: "option", class: {
-                        'mg-c-input__input-list-item': true,
-                        'mg-c-input__input-list-item--focus-visible': JSON.stringify((_a = this.option) === null || _a === void 0 ? void 0 : _a.value) === JSON.stringify(option.value),
-                        'mg-c-input__input-list-item--selected': this.isCurrentOption(option),
-                    }, key: option.title, id: formatID(option.value), "aria-selected": this.isCurrentOption(option).toString(), "data-value": toString(option.value), onClick: this.handleOptionClick }, option.title, this.isCurrentOption(option) && h("mg-icon", { icon: "check" })));
-            })),
-            this.isLoading && h("mg-loader", { key: "loader", message: this.messages.input.combobox.search, class: { 'mg-u-visually-hidden': Boolean(this.page.next) } }),
-            this.page.next && (h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, disabled: this.isLoading, "full-width": true, "disable-on-click": true, onClick: this.handleLoadMoreButton, "aria-controls": listId, ref: (el) => {
-                    if (el !== null)
-                        this.loadMoreElement = el;
-                } }, h("mg-icon", { icon: "chevron-down" }), this.messages.input.showMore)),
-        ], popoverContent === 'notfound' && (h("p", { id: popoverContent, class: "mg-c-input__popover-info" }, this.messages.input.combobox.notFound)), popoverContent === 'notavailable' && (h("p", { id: popoverContent, class: "mg-c-input__popover-info" }, this.messages.input.combobox.notAvailable)))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "value": ["watchValue"],
-        "items": ["watchItems"],
-        "identifier": ["watchIdentifier"],
-        "readonly": ["watchReadonly", "watchValidityChange"],
-        "required": ["watchValidityChange"],
-        "disabled": ["watchValidityChange", "watchDisabled"],
-        "mgWidth": ["watchMgWidth"],
-        "fetchurl": ["watchFetchUrl"],
-        "fetchoptions": ["watchFetchOptions"],
-        "fetchmappings": ["watchFetchMappings"],
-        "options": ["watchOptions"],
-        "filter": ["watchFilter"],
-        "popoverDisplay": ["watchPopoverDisplay"]
-    }; }
-    static get style() { return mgInputComboboxCss; }
-}, [257, "mg-input-combobox", {
-        "value": [1537],
-        "items": [16],
-        "itemsLabel": [1, "items-label"],
-        "identifier": [1],
-        "name": [1],
-        "label": [1],
-        "labelOnTop": [4, "label-on-top"],
-        "labelHide": [4, "label-hide"],
-        "placeholder": [1],
-        "required": [4],
-        "readonly": [4],
-        "disabled": [4],
-        "mgWidth": [8, "mg-width"],
-        "tooltip": [1],
-        "tooltipPosition": [1, "tooltip-position"],
-        "helpText": [1, "help-text"],
-        "fetchurl": [1],
-        "fetchoptions": [16],
-        "fetchmappings": [16],
-        "valid": [1028],
-        "invalid": [1028],
-        "isLoading": [32],
-        "options": [32],
-        "option": [32],
-        "filter": [32],
-        "classCollection": [32],
-        "errorMessage": [32],
-        "popoverDisplay": [32],
-        "setFocus": [64],
-        "displayError": [64],
-        "setError": [64],
-        "reset": [64]
-    }, undefined, {
-        "value": ["watchValue"],
-        "items": ["watchItems"],
-        "identifier": ["watchIdentifier"],
-        "readonly": ["watchReadonly", "watchValidityChange"],
-        "required": ["watchValidityChange"],
-        "disabled": ["watchValidityChange", "watchDisabled"],
-        "mgWidth": ["watchMgWidth"],
-        "fetchurl": ["watchFetchUrl"],
-        "fetchoptions": ["watchFetchOptions"],
-        "fetchmappings": ["watchFetchMappings"],
-        "options": ["watchOptions"],
-        "filter": ["watchFilter"],
-        "popoverDisplay": ["watchPopoverDisplay"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-input-combobox", "mg-button", "mg-card", "mg-icon", "mg-input", "mg-input-title", "mg-loader", "mg-popover", "mg-popover-content", "mg-tooltip", "mg-tooltip-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-input-combobox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgInputCombobox$1);
-            }
-            break;
-        case "mg-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "mg-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "mg-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "mg-input-title":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "mg-loader":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mg-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mg-popover-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mg-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-tooltip-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const MgInputCombobox = MgInputCombobox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgInputCombobox, defineCustomElement };
+import{transformTag as t,proxyCustomElement as i,HTMLElement as s,createEvent as o,h as e}from"@stencil/core/internal/client";import{P as n,C as a,t as r,e as c,n as h,h as p,j as m,d as l,i as u,k as g,f as d}from"./index2.js";import{c as b,b as v,w as f}from"./mg-input.conf.js";import{i as w}from"./index3.js";import{K as _}from"./events.utils.js";import{d as x}from"./mg-button2.js";import{d as y}from"./mg-card2.js";import{d as z}from"./mg-icon2.js";import{d as k}from"./mg-input2.js";import{d as E}from"./mg-input-title2.js";import{d as j}from"./mg-loader2.js";import{d as F}from"./mg-popover2.js";import{d as O}from"./mg-popover-content2.js";import{d as q}from"./mg-tooltip2.js";import{d as C}from"./mg-tooltip-content2.js";const D=t=>t&&"object"==typeof t&&"string"==typeof t.title&&void 0!==t.value,P=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=o(this,"value-change",7),this.filterChange=o(this,"filter-change",7),this.showMore=o(this,"load-more",7),this.inputValid=o(this,"input-valid",7),this.fetchError=o(this,"fetch-error",7),this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.mgWidth="full",this.tooltipPosition="input",this.options=new n([]),this.filter="",this.classCollection=new a(["mg-c-input--combobox","mg-c-input--has-icon","mg-c-input--input-append"]),this.popoverDisplay=!1,this.handleOptionClick=t=>{this.setValue(this.options.items.find((i=>r(i.value)===t.target.dataset.value))),this.popoverDisplay=!1},this.handleResetButton=t=>{t.stopPropagation(),this.reset().then((()=>{this.input.focus()}))},this.handlePopoverDisplay=t=>{this.popoverDisplay=t.detail},this.handleFilterInput=()=>{this.checkValidity(),this.hasDisplayedError&&this.setErrorMessage(),this.popoverDisplay||(this.popoverDisplay=!0),this.debounce||(this.debounce=!0,setTimeout((()=>{this.filter=this.input.value,this.debounce=!1}),250))},this.handleFilterBlur=t=>{this.popoverDisplay?(t.stopImmediatePropagation(),this.input.focus()):(this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0})))},this.handleFilterFocus=()=>{this.isLoading||(this.option=null)},this.handleLoadMoreButton=()=>{this.loadingWrapper({name:"load-more",cursor:c.NEXT}).then((()=>{this.input.focus()}))},this.handleFilterKeydown=t=>{var i;if(this.disabled||t.ctrlKey||t.shiftKey)return;let s=!1;switch(t.key){case _.TAB:case _.ENTER:{s=t.key===_.ENTER;const o=null!==(i=this.option)&&void 0!==i?i:this.options.items.find(this.isCurrentOption);this.popoverDisplay&&this.setValue(o),this.popoverDisplay=!1;break}case _.DOWN:case _.ARROWDOWN:case _.UP:case _.ARROWUP:{if(s=!0,this.isLoading||0===this.page.total){this.popoverDisplay=!0;break}if(t.altKey&&[_.DOWN,_.ARROWDOWN].includes(t.key)){this.popoverDisplay=!0;break}let i;const o=this.popoverDisplay&&D(this.option);[_.DOWN,_.ARROWDOWN].includes(t.key)?i=o?c.NEXT:c.FIRST:[_.UP,_.ARROWUP].includes(t.key)&&(i=o?c.PREVIOUS:c.LAST),this.loadingWrapper({name:"scroll",cursor:i}),this.popoverDisplay=!0;break}case _.LEFT:case _.ARROWLEFT:case _.HOME:case _.RIGHT:case _.ARROWRIGHT:case _.END:{if(!D(this.option))break;let i;s=!0,this.option=null,_.HOME===t.key?i=0:_.END===t.key&&(i=this.filter.length),"number"==typeof i&&this.input.setSelectionRange(i,i);break}case _.ESC:case _.ESCAPE:s=!0,this.popoverDisplay?this.popoverDisplay=!1:(this.setValue(null),this.filter="",this.option=null);break;default:this.option=null}s&&(t.stopPropagation(),t.preventDefault())},this.scrollToIndex=t=>{requestAnimationFrame((()=>{var i;this.popoverDisplay&&(null===(i=this.element.shadowRoot.querySelector(`li:nth-of-type(${(t||0)+this.page.baseIndex})`))||void 0===i||i.scrollIntoView({block:"nearest"}))}))},this.isCurrentOption=t=>(D(this.value)?this.value.value:this.value)===t.value,this.getValueTitle=()=>this.value&&D(this.value)?this.value.title:"string"==typeof this.value?this.value:"",this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||this.input.checkValidity())},this.setErrorMessage=(t=!1)=>{this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:this.input.validity.valueMissing&&(this.errorMessage=this.messages.errors.required))},this.getFirstPage=()=>this.options.getPage(0,(t=>""===this.filter||t.title.toLocaleLowerCase().includes(this.filter.toLocaleLowerCase()))),this.loadingWrapper=t=>{var i;let s,o;if(null!==(i=this.loadingAction)&&void 0!==i||(this.loadingAction=t.name),this.option&&"load-more"!==this.loadingAction?o=this.page.items.findIndex((t=>r(t.value)===r(this.option.value))):"load-more"===this.loadingAction&&(o=this.page.items.length-this.page.baseIndex),"load-more"===t.name)this.isLoading=!0,s=this.goToNextPage;else{if(t.cursor===c.NEXT&&this.page.items.length<=this.page.total&&o+this.page.baseIndex===this.page.items.length&&o+this.page.baseIndex<this.page.total)return void this.loadMoreElement.click();s="scroll"===t.name?h:this.updatePage}return s().then((()=>{const i=""===this.filter?this.options.items:this.options.items.filter((t=>t.title.includes(this.filter)));"load-data"!==t.name&&(o=this.page.getIndexFromCursor(t.cursor,"load-more"===this.loadingAction&&o>=0?i[o]:this.option)),this.option=i[o],this.scrollToIndex(o)})).finally((()=>{requestAnimationFrame((()=>{this.isLoading=!1,this.loadingAction=void 0}))}))},this.goToNextPage=()=>(this.showMore.emit(),void 0!==this.fetchurl?this.getOptions("string"==typeof this.page.next?this.page.next:void 0).then((t=>{if(void 0!==t){const i=[...this.page.items,...t.items];this.options=new n(i,{total:t.total,next:t.next,top:i.length})}})):h((()=>{if("function"==typeof this.page.next){const t=this.page.next();this.page=new p(Object.assign(Object.assign({},t),{items:[...this.page.items,...t.items]}))}}))),this.updatePage=async()=>{if(void 0!==this.fetchurl)return this.getOptions().then((t=>{void 0!==t&&(this.options=new n(t.items,{total:t.total,next:t.next,top:t.top}))}));this.page=this.getFirstPage()},this.getOptions=async(t=this.fetchurl)=>{const i="function"==typeof this.fetchmappings.request.filterTransform?this.fetchmappings.request.filterTransform(this.filter):this.filter,s=("string"==typeof t?t:""+t).replaceAll(this.fetchmappings.request.filter,encodeURIComponent(i));try{const t=await fetch(s,this.fetchoptions);if(!t.ok)return void this.fetchError.emit(Error(`${t.status} - ${t.statusText}`));const i=await t.json(),o=m(i,this.fetchmappings.response.items).map((t=>{var i;return{title:m(t,this.fetchmappings.response.itemTitle),value:null!==(i=m(t,this.fetchmappings.response.itemValue))&&void 0!==i?i:t}})),e=Number(m(i,this.fetchmappings.response.total,0));let n=m(i,this.fetchmappings.response.next);if(URL.canParse(s)&&n&&!URL.canParse(n)){const t=new URL(s);t.pathname.endsWith(n.split("?")[0])&&(n=""+new URL(n,t))}return{items:o,total:e,next:n,top:o.length}}catch(t){this.fetchError.emit(t)}}}watchValue(t){this.filter=this.getValueTitle(),this.valueChange.emit(t)}watchItems(t){if(void 0===this.fetchurl||void 0!==t){if(void 0!==this.fetchurl&&void 0!==t)throw Error(`<mg-input-combobox> prop "items" values cannot be use with "fetchurl" prop defined. Passed value: ${r(t)}.`);if(Array.isArray(t)&&0===t.length)this.options=new n([]);else if(l(t))this.options=new n(t.map((t=>({title:t,value:t}))),{total:t.length});else{if(!(t=>Array.isArray(t)&&t.every(D))(t))throw Error(`<mg-input-combobox> prop "items" values must be the same type, string or Option. Passed value: ${r(t)}.`);this.options=new n(t,{total:t.length})}}}watchIdentifier(t){u(t)&&(this.popoverId=t+"-popover",this.element.dataset.mgPopoverGuard=this.popoverId)}watchReadonly(t){t?this.classCollection.add(b):this.classCollection.delete(b)}watchValidityChange(t,i,s){void 0!==this.input&&(this.input[s]=t,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}watchDisabled(t){t?this.classCollection.add(v):this.classCollection.delete(v)}watchMgWidth(t){f.forEach((t=>{this.classCollection.delete("mg-c-input--width-"+t)})),void 0!==t&&this.classCollection.add("mg-c-input--width-"+this.mgWidth),this.classCollection=new a(this.classCollection.classes)}watchFetchUrl(t){void 0!==t&&this.loadingWrapper({name:"load-data"})}watchFetchOptions(t){if(this.fetchurl&&t&&!g(t))throw Error(`<mg-input-combobox> prop "fetchoptions" value must be a valid RequestInit. Passed value: ${r(t)}.`)}watchFetchMappings(t){if(void 0!==this.fetchurl&&!g(t))throw Error('<mg-input-combobox> prop "fetchmappings" is required with "fetchurl" prop.');if(void 0!==t&&!(t=>{const i=g(t)&&Object.hasOwn(t,"request")&&Object.hasOwn(t,"response");if(i){const{request:i,response:s}=t;return![i,s].some((t=>!g(t)))&&!("string"!=typeof i.filter||void 0!==i.filterTransform&&"function"!=typeof i.filterTransform||"object"!=typeof s||"string"!=typeof s.total||"string"!=typeof s.items||"string"!=typeof s.next||"string"!=typeof s.itemTitle||"string"!=typeof s.itemValue&&void 0!==s.itemValue)}return i})(t))throw Error(`<mg-input-combobox> prop "fetchmappings" value must be { request: RequestMappingType, response: ResponseMappingType }. Passed value: ${r(t)}.`)}watchOptions(){this.page=this.getFirstPage()}watchFilter(t){this.loadingWrapper({name:"load-data"}),this.filterChange.emit(t)}watchPopoverDisplay(t){t?this.input.focus():(this.option=null,this.filter=this.getValueTitle(),this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0})))}async setFocus(){var t;null===(t=this.input)||void 0===t||t.focus()}displayError(){return new Promise((t=>{requestAnimationFrame((()=>{this.checkValidity(),this.setErrorMessage(),this.hasDisplayedError=this.invalid,t()}))}))}async setError(t,i,s=!1){if("boolean"!=typeof t)throw Error('<mg-input-combobox> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!u(i))throw Error('<mg-input-combobox> method "setError()" param "errorMessage" must be a string.');this.customErrorMessage={lock:!t&&s,message:t?void 0:i},this.setValidity(t),this.setErrorMessage(!0),this.hasDisplayedError=this.invalid}async reset(){if(!this.readonly)return this.setValue(null),this.option=null,this.filter="",new Promise((t=>{requestAnimationFrame((()=>{this.customErrorMessage={lock:!1},this.checkValidity(),this.errorMessage=void 0,this.hasDisplayedError=!1,t()}))}))}setValue(t){this.value=D(t)?l(this.items||this.options.items)?t.title:Object.assign({},t):""}setValidity(t){const i=this.valid;this.customErrorMessage.lock&&(void 0===this.customErrorMessage.message||t)||(this.valid=t),this.invalid=!this.valid,(void 0===this.handlerInProgress||"blur"===this.handlerInProgress&&this.valid!==i)&&this.inputValid.emit(this.valid)}componentWillLoad(){return this.messages=w(this.element).messages,this.watchIdentifier(this.identifier),this.watchItems(this.items),void 0!==this.fetchurl&&(this.watchFetchOptions(this.fetchoptions),this.watchFetchMappings(this.fetchmappings),this.loadingWrapper({name:"load-data"})),this.watchValue(this.value),this.watchOptions(),this.watchMgWidth(this.mgWidth),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled),setTimeout((()=>{this.checkValidity()}),0)}render(){var t,i,s,o,n,a;const c=this.identifier+"-list",h=this.getValueTitle(),p=this.value&&!this.disabled;let m,l;return(null===(t=this.page)||void 0===t?void 0:t.items.length)>0?m="list":0===(null===(i=this.page)||void 0===i?void 0:i.items.length)&&this.filter.length>0?m="notfound":0===(null===(s=this.page)||void 0===s?void 0:s.items.length)&&(m="notavailable"),l=void 0!==(null===(o=this.option)||void 0===o?void 0:o.value)?this.option.value:"string"==typeof this.value?this.value:null===(n=this.value)||void 0===n?void 0:n.value,e("mg-input",{key:"d16350f2e21e492932e7264c076454a249e1f5f2",label:this.label,identifier:this.identifier,class:this.classCollection.classes.join(" "),ariaDescribedbyIDs:m&&"list"!==m?m:void 0,labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&void 0===this.value?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?h&&e("b",{class:"mg-c-input__readonly-value"},h):e("mg-popover",{identifier:this.popoverId,placement:"bottom-start",display:this.popoverDisplay,"arrow-hide":!0,style:{"--mg-c-input-list-width":(null===(a=this.input)||void 0===a?void 0:a.offsetWidth)>0?this.input.offsetWidth+"px":void 0},"data-fallback-placement":"bottom-end","onDisplay-change":this.handlePopoverDisplay},e("div",{class:"mg-c-input__input-group-container"},e("mg-icon",{icon:"magnifying-glass"}),e("input",{type:"text",role:"combobox",class:"mg-c-input__box mg-c-input__box--width",value:this.filter,id:this.identifier,name:this.name,placeholder:this.placeholder,title:this.placeholder,disabled:this.disabled,required:this.required,autocomplete:"off","aria-autocomplete":"list","aria-expanded":""+this.popoverDisplay,"aria-controls":c,"aria-invalid":""+(!0===this.invalid),"aria-activedescendant":d(l),onInput:this.handleFilterInput,onBlur:this.handleFilterBlur,onFocus:this.handleFilterFocus,onKeyDown:this.handleFilterKeydown,ref:t=>{null!==t&&(this.input=t)}}),p?e("mg-button",{class:"mg-c-input__box-append mg-c-input__reset",variant:"flat","is-icon":!0,label:this.messages.general.reset,"aria-controls":this.identifier,tabindex:"-1",onClick:this.handleResetButton},e("mg-icon",{icon:"cross"})):e("mg-button",{class:"mg-c-input__box-append",variant:"flat","is-icon":!0,label:this.itemsLabel,tabindex:"-1",disabled:this.disabled},e("mg-icon",{icon:"chevron-"+(this.popoverDisplay?"up":"down")}))),e("div",{slot:"content",class:"mg-c-input__popover-container"},"list"===m&&[e("ul",{key:"list",class:"mg-c-input__input-list",role:"listbox",id:c,"aria-label":this.itemsLabel,"aria-setsize":this.page.total},this.page.items.map((t=>{var i;return e("li",{role:"option",class:{"mg-c-input__input-list-item":!0,"mg-c-input__input-list-item--focus-visible":JSON.stringify(null===(i=this.option)||void 0===i?void 0:i.value)===JSON.stringify(t.value),"mg-c-input__input-list-item--selected":this.isCurrentOption(t)},key:t.title,id:d(t.value),"aria-selected":""+this.isCurrentOption(t),"data-value":r(t.value),onClick:this.handleOptionClick},t.title,this.isCurrentOption(t)&&e("mg-icon",{icon:"check"}))}))),this.isLoading&&e("mg-loader",{key:"loader",message:this.messages.input.combobox.search,class:{"mg-u-visually-hidden":!!this.page.next}}),this.page.next&&e("mg-button",{key:"load-more",variant:"flat",class:"mg-c-input__load-more",tabIndex:-1,disabled:this.isLoading,"full-width":!0,"disable-on-click":!0,onClick:this.handleLoadMoreButton,"aria-controls":c,ref:t=>{null!==t&&(this.loadMoreElement=t)}},e("mg-icon",{icon:"chevron-down"}),this.messages.input.showMore)],"notfound"===m&&e("p",{id:m,class:"mg-c-input__popover-info"},this.messages.input.combobox.notFound),"notavailable"===m&&e("p",{id:m,class:"mg-c-input__popover-info"},this.messages.input.combobox.notAvailable))))}get element(){return this}static get watchers(){return{value:[{watchValue:0}],items:[{watchItems:0}],identifier:[{watchIdentifier:0}],readonly:[{watchReadonly:0},{watchValidityChange:0}],required:[{watchValidityChange:0}],disabled:[{watchValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}],fetchurl:[{watchFetchUrl:0}],fetchoptions:[{watchFetchOptions:0}],fetchmappings:[{watchFetchMappings:0}],options:[{watchOptions:0}],filter:[{watchFilter:0}],popoverDisplay:[{watchPopoverDisplay:0}]}}static get style(){return".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--combobox mg-popover{--mg-c-popover-overflow:auto;--mg-c-popover-spacing-vertical:0;--mg-c-popover-spacing-horizontal:0;--mg-c-popover-min-width:var(--mg-c-input-list-width);--mg-c-popover-max-height:calc(50 * var(--mg-b-size-8) - var(--mg-b-size-32))}.mg-c-input.mg-c-input--combobox .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--combobox .mg-c-input__box{cursor:pointer}.mg-c-input.mg-c-input--combobox .mg-c-input__popover-container{display:flex;flex-direction:column;gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--combobox .mg-c-input__load-more{padding:0 var(--mg-b-size-8) var(--mg-b-size-4)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list{padding:0;margin:0;cursor:pointer;list-style:none}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item{display:flex;padding:var(--mg-b-size-8)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item:hover,.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--focus-visible{background-color:var(--mg-b-color-neutral-20)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--selected{font-weight:700}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--selected mg-icon{margin-left:auto}.mg-c-input.mg-c-input--combobox.mg-c-input--width-2 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + var(--mg-b-size-24) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-4 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + var(--mg-b-size-48) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-16 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + calc(23 * var(--mg-b-size-8)) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full mg-popover{--mg-c-popover-max-width:var(--mg-c-input-list-width, var(--mg-c-popover-max-width))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full .mg-c-input__input-group-container{display:flex;width:100%}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full .mg-c-input__box{flex:1}.mg-c-input.mg-c-input--combobox.mg-c-input--input-append .mg-c-input__box{padding-right:calc(var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--input-append .mg-c-input__box-append{position:absolute;top:0;right:0}"}},[1,"mg-input-combobox",{value:[1537],items:[16],itemsLabel:[1,"items-label"],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],placeholder:[1],required:[4],readonly:[4],disabled:[4],mgWidth:[8,"mg-width"],tooltip:[1],tooltipPosition:[1,"tooltip-position"],helpText:[1,"help-text"],fetchurl:[1],fetchoptions:[16],fetchmappings:[16],valid:[1028],invalid:[1028],isLoading:[32],options:[32],option:[32],filter:[32],classCollection:[32],errorMessage:[32],popoverDisplay:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{watchValue:0}],items:[{watchItems:0}],identifier:[{watchIdentifier:0}],readonly:[{watchReadonly:0},{watchValidityChange:0}],required:[{watchValidityChange:0}],disabled:[{watchValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}],fetchurl:[{watchFetchUrl:0}],fetchoptions:[{watchFetchOptions:0}],fetchmappings:[{watchFetchMappings:0}],options:[{watchOptions:0}],filter:[{watchFilter:0}],popoverDisplay:[{watchPopoverDisplay:0}]}]);function V(){"undefined"!=typeof customElements&&["mg-input-combobox","mg-button","mg-card","mg-icon","mg-input","mg-input-title","mg-loader","mg-popover","mg-popover-content","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-combobox":customElements.get(t(i))||customElements.define(t(i),P);break;case"mg-button":customElements.get(t(i))||x();break;case"mg-card":customElements.get(t(i))||y();break;case"mg-icon":customElements.get(t(i))||z();break;case"mg-input":customElements.get(t(i))||k();break;case"mg-input-title":customElements.get(t(i))||E();break;case"mg-loader":customElements.get(t(i))||j();break;case"mg-popover":customElements.get(t(i))||F();break;case"mg-popover-content":customElements.get(t(i))||O();break;case"mg-tooltip":customElements.get(t(i))||q();break;case"mg-tooltip-content":customElements.get(t(i))||C()}}))}V();const I=P,M=V;export{I as MgInputCombobox,M as defineCustomElement}