@mgdis/mg-components 6.9.0 → 6.10.1

package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js

@@ -0,0 +1,1443 @@
+import { h } from "@stencil/core";
+import { allItemsAreString, ClassList, getObjectValueFromKey, isValidString, nextTick, Page, Paginate, Cursor, toString, isObject } from "@mgdis/stencil-helpers";
+import { widths, classReadonly, classDisabled } from "../mg-input/mg-input.conf";
+import { initLocales } from "../../../../locales";
+import { Keys } from "../../../../utils/events.utils";
+/**
+ * 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';
+        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';
+        return isValidRequest && isValidResponse;
+    }
+    else {
+        return isValidRoot;
+    }
+};
+/**
+ * Map new URL from old url
+ * @param newValue - new URL value
+ * @param oldValue - previous URL value
+ * @returns updated url
+ */
+const mapUrl = (newValue, oldValue) => {
+    if (!Boolean(newValue))
+        return;
+    else if (URL.canParse(newValue)) {
+        return newValue;
+    }
+    // build new URL
+    const params = newValue.includes('?') && newValue.split('?').pop();
+    if (Boolean(params)) {
+        const { origin, pathname } = new URL(oldValue);
+        return `${origin}${pathname}?${params}`;
+    }
+    else {
+        return newValue;
+    }
+};
+export class MgInputCombobox {
+    constructor() {
+        /************
+         * Internal *
+         ************/
+        // Classes
+        this.classFocus = 'mg-u-is-focused';
+        // hasDisplayedError (triggered by blur event)
+        this.hasDisplayedError = 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 => option.value === event.target.id));
+            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;
+            this.filter = this.input.value;
+        };
+        /**
+         * Handle `blur` event
+         */
+        this.handleFilterBlur = () => {
+            // skip process if popover is displayed
+            if (this.popoverDisplay)
+                return;
+            // 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) => {
+            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 = this.option || this.options.items.find(this.isCurrentOption);
+                    // Sets the value to the content of the focused option in the listbox.
+                    if (this.popoverDisplay)
+                        this.setValue(this.page.total > 0 ? option : null);
+                    // 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) => {
+            var _a;
+            (_a = this.element.shadowRoot.querySelector(`li:nth-of-type(${(index || 0) + this.page.baseIndex})`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+        };
+        /**
+         * 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 errorMessage - errorMessage override
+         */
+        this.setErrorMessage = (errorMessage) => {
+            // Set error message
+            this.errorMessage = undefined;
+            // Does have a custom error message
+            if (!this.valid && errorMessage !== undefined) {
+                this.errorMessage = errorMessage;
+            }
+            // required
+            else if (!this.valid && this.input.validity.valueMissing) {
+                this.errorMessage = this.messages.errors.required;
+            }
+        };
+        /**
+         * Get filtered options from `filter` input value
+         * @returns filtered options
+         */
+        this.optionsFilter = (option) => (this.filter === '' ? true : option.title.toLocaleLowerCase().includes(this.filter.toLocaleLowerCase()));
+        /**
+         * Loading wrapper with a given action
+         * @param action - wrapped loading action
+         * @returns promisified action
+         */
+        this.loadingWrapper = (action) => {
+            let promise;
+            let index;
+            // cache initial loading action if not defined
+            if (!Boolean(this.loadingAction)) {
+                this.loadingAction = action.name;
+            }
+            // update index
+            if (Boolean(this.option) && this.loadingAction !== 'load-more') {
+                index = this.page.items.findIndex(option => option.value.toString() === this.option.value.toString());
+            }
+            else if (this.loadingAction === 'load-more') {
+                index = this.page.items.length - this.page.baseIndex;
+            }
+            // when action require a loadMore we fetch the API else we report action to next tick
+            // Set "load 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.options.items.filter(this.optionsFilter);
+                // 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.loadMore.emit();
+            if (Boolean(this.fetchurl)) {
+                return this.getOptions(typeof this.page.next === 'string' ? this.page.next : undefined).then(nextPage => {
+                    if (!Boolean(nextPage))
+                        return;
+                    // 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 (Boolean(this.fetchurl)) {
+                return this.getOptions().then(page => {
+                    if (!Boolean(page))
+                        return;
+                    // 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.options.getPage(0, this.optionsFilter);
+            }
+        };
+        /**
+         * Fetch request
+         * @param url - to fetch
+         * @returns new page from url
+         */
+        this.getOptions = async (url = this.fetchurl) => {
+            // add text filter
+            const updateUrl = (typeof url === 'string' ? url : url.toString()).replaceAll(this.fetchmappings.request.filter, encodeURIComponent(this.filter));
+            try {
+                const response = await fetch(updateUrl, this.fetchoptions).then(response => response.json());
+                if (!response)
+                    return null;
+                const items = getObjectValueFromKey(response, this.fetchmappings.response.items).map((item) => ({
+                    title: getObjectValueFromKey(item, this.fetchmappings.response.itemTitle),
+                    value: getObjectValueFromKey(item, this.fetchmappings.response.itemValue),
+                }));
+                const total = Number(getObjectValueFromKey(response, this.fetchmappings.response.total, 0));
+                const next = mapUrl(getObjectValueFromKey(response, this.fetchmappings.response.next), this.fetchurl.toString());
+                return { items, total, next, top: items.length };
+            }
+            catch (_a) { }
+        };
+    }
+    watchValue(newValue) {
+        this.filter = this.getValueTitle();
+        this.valueChange.emit(newValue);
+    }
+    watchItems(newValue) {
+        if (Boolean(this.fetchurl) && !Boolean(newValue)) {
+            // skip newValue check
+            return;
+        }
+        else if (Boolean(this.fetchurl) && Boolean(newValue)) {
+            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 (Boolean(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 && !URL.canParse(newValue)) {
+            throw new Error(`<mg-input-combobox> prop "fetchurl" value must be URL or string. Passed value: ${toString(newValue)}.`);
+        }
+    }
+    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)}.`);
+        }
+        else {
+            new Request(this.fetchurl, newValue);
+        }
+    }
+    watchFetchMappings(newValue) {
+        if (Boolean(this.fetchurl) && !Boolean(newValue)) {
+            throw new Error(`<mg-input-combobox> prop "fetchmappings" is required with "fetchurl" prop.`);
+        }
+        else if (Boolean(newValue) && !isFetchmappings(newValue)) {
+            throw new Error(`<mg-input-combobox> prop "fetchmappings" value must be { request: RequestMappingType, response: ResponseMappingType }. Passed value: ${toString(newValue)}.`);
+        }
+    }
+    watchOptions(newValue) {
+        this.page = newValue.getPage(0, Boolean(this.filter) ? this.optionsFilter : undefined);
+    }
+    watchFilter(newValue) {
+        this.loadingWrapper({ name: 'load-data' });
+        this.filterChange.emit(newValue);
+    }
+    watchPopoverDisplay(newValue) {
+        if (newValue) {
+            this.classCollection.add(this.classFocus);
+            this.input.focus();
+            this.scrollToIndex(0);
+        }
+        else {
+            // remove visual focus
+            this.option = null;
+            // reset filter with value
+            this.filter = this.getValueTitle();
+            this.classCollection.delete(this.classFocus);
+            this.handlerInProgress = 'blur';
+            this.displayError().finally(() => {
+                // reset guard
+                this.handlerInProgress = undefined;
+            });
+        }
+    }
+    /**
+     * Public method to play input focus
+     */
+    async setFocus() {
+        this.input.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
+     */
+    async setError(valid, errorMessage) {
+        if (typeof valid !== 'boolean') {
+            throw new Error('<mg-input-combobox> method "setError()" param "valid" must be a boolean.');
+        }
+        else if (!isValidString(errorMessage)) {
+            throw new Error('<mg-input-combobox> method "setError()" param "errorMessage" must be a string.');
+        }
+        else {
+            this.setValidity(valid);
+            this.setErrorMessage(valid ? undefined : errorMessage);
+            this.hasDisplayedError = this.invalid;
+        }
+    }
+    /**
+     * Reset value, validity and error state
+     */
+    async reset() {
+        if (this.readonly)
+            return;
+        this.setValue(null);
+        this.option = null;
+        this.filter = '';
+        this.checkValidity();
+        this.errorMessage = undefined;
+        this.hasDisplayedError = false;
+    }
+    /**
+     * Set value prop
+     * @param newValue - slected option item
+     */
+    setValue(newValue) {
+        if (!isItem(newValue)) {
+            this.value = '';
+        }
+        else {
+            this.value = allItemsAreString(this.items || this.options.items) ? newValue.title : Object.assign({}, newValue);
+        }
+    }
+    /**
+     * Method to set validity values
+     * @param newValue - valid new value
+     */
+    setValidity(newValue) {
+        const oldValidValue = this.valid;
+        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 !== oldValidValue))
+            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 (Boolean(this.fetchurl)) {
+            this.watchFetchUrl(this.fetchurl);
+            this.watchFetchOptions(this.fetchoptions);
+            this.watchFetchMappings(this.fetchmappings);
+            this.loadingWrapper({ name: 'load-data' });
+        }
+        this.watchValue(this.value);
+        this.watchOptions(this.options);
+        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 && Boolean(this.filter))
+            popoverContent = 'notfound';
+        else if (((_c = this.page) === null || _c === void 0 ? void 0 : _c.items.length) === 0)
+            popoverContent = 'notavailable';
+        return (h("mg-input", { key: 'b8c4c6d18bb1d16ff0a8494ddb698cb4e0198e43', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? [popoverContent] : [], 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': Boolean((_d = this.input) === null || _d === void 0 ? void 0 : _d.offsetWidth) ? `${this.input.offsetWidth}px` : undefined,
+                '--mg-c-input-append-x': withResetButton ? '2' : '1',
+            }, "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": Boolean((_e = this.option) === null || _e === void 0 ? void 0 : _e.value) ? this.option.value : typeof this.value === 'string' ? this.value : (_f = this.value) === null || _f === void 0 ? void 0 : _f.value, 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 => {
+                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': this.option === option,
+                        'mg-c-input__input-list-item--selected': this.isCurrentOption(option),
+                    }, key: option.title, id: option.value.toString(), "aria-selected": this.isCurrentOption(option).toString(), 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.combobox.loadMore)),
+        ], 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)))))));
+    }
+    static get is() { return "mg-input-combobox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-combobox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-combobox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | Option",
+                    "resolved": "string | { title: string; value: unknown; }",
+                    "references": {
+                        "Option": {
+                            "location": "import",
+                            "path": "../../../../types",
+                            "id": "src/types/index.ts::Option"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define component value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(string | Option)[]",
+                    "resolved": "(string | Option)[]",
+                    "references": {
+                        "Option": {
+                            "location": "import",
+                            "path": "../../../../types",
+                            "id": "src/types/index.ts::Option"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define components items"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "itemsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "```\nCountries\n```"
+                        }],
+                    "text": "Define items label\nInclude short description. Required for accessibility."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "items-label",
+                "reflect": false
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input name\nIf not set the value equals the identifier"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "this.identifier"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input label"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "labelOnTop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if label is displayed on top"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-on-top",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "labelHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if label is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-hide",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help combobox."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if input is required"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if input is readonly"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "mgWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "Width",
+                    "resolved": "\"full\" | 16 | 2 | 4",
+                    "references": {
+                        "Width": {
+                            "location": "import",
+                            "path": "../mg-input/mg-input.conf",
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input width"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mg-width",
+                "reflect": false,
+                "defaultValue": "'full'"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a tooltip message next to the input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "tooltip",
+                "reflect": false
+            },
+            "tooltipPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipPosition",
+                    "resolved": "\"input\" | \"label\"",
+                    "references": {
+                        "TooltipPosition": {
+                            "location": "import",
+                            "path": "../mg-input/mg-input.conf",
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define tooltip position"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "tooltip-position",
+                "reflect": false,
+                "defaultValue": "'input'"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a help text under the input, usually expected data format and example"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "help-text",
+                "reflect": false
+            },
+            "fetchurl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | URL",
+                    "resolved": "URL | string",
+                    "references": {
+                        "URL": {
+                            "location": "global",
+                            "id": "global::URL"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "```\n{\n  url: \"http://myapi.com?$select='href,name'&my-custom-param='my-custom-value'\", // url to fetch\n}\n```"
+                        }],
+                    "text": "Define API url to fetch"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "fetchurl",
+                "reflect": false
+            },
+            "fetchoptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RequestInit",
+                    "resolved": "RequestInit",
+                    "references": {
+                        "RequestInit": {
+                            "location": "global",
+                            "id": "global::RequestInit"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "see",
+                            "text": "{@link https://developer.mozilla.org/en-US/docs/Web/API/RequestInit}"
+                        }, {
+                            "name": "example",
+                            "text": "JSON headers:\n```json\n{\n\"headers\": {\n\"authorization\": \"my-token\"\n}\n}\n```"
+                        }],
+                    "text": "Define fetch options object\nRequire `fetchurl` prop to be defined otherwith it will be ignored if defined"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "fetchmappings": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ request: RequestMappingType; response: ResponseMappingType }",
+                    "resolved": "{ request: RequestMappingType; response: ResponseMappingType; }",
+                    "references": {
+                        "RequestMappingType": {
+                            "location": "import",
+                            "path": "./mg-input-combobox.conf",
+                            "id": "src/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.ts::RequestMappingType"
+                        },
+                        "ResponseMappingType": {
+                            "location": "import",
+                            "path": "./mg-input-combobox.conf",
+                            "id": "src/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.ts::ResponseMappingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "```\n{\n request: {\n    filter: 'name', // `filter` key\n  },\n  response: {\n    total: 'body.data.total', // response object mapping to get `total` value\n    items: 'body.data.results' // response object mapping to get `items` value\n    next: 'body.next' // response object mapping to get `next` items\n    itemTitle: 'name', // item property to map on item['title']\n    itemValue: 'href', // item property to map on item['value']\n  }\n}\n```"
+                        }],
+                    "text": "Define fetch request mappings.\nRequired with `fetchurl`"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "valid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input valid state"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "valid",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input invalid state"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "invalid",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "options": {},
+            "option": {},
+            "filter": {},
+            "classCollection": {},
+            "errorMessage": {},
+            "popoverDisplay": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "value-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when value change"
+                },
+                "complexType": {
+                    "original": "HTMLMgInputComboboxElement['value']",
+                    "resolved": "string | { title: string; value: unknown; }",
+                    "references": {
+                        "HTMLMgInputComboboxElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgInputComboboxElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "filterChange",
+                "name": "filter-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when filter change"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "loadMore",
+                "name": "load-more",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when `load-more` is called"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "inputValid",
+                "name": "input-valid",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when checking validity"
+                },
+                "complexType": {
+                    "original": "HTMLMgInputComboboxElement['valid']",
+                    "resolved": "boolean",
+                    "references": {
+                        "HTMLMgInputComboboxElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgInputComboboxElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Public method to play input focus",
+                    "tags": []
+                }
+            },
+            "displayError": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Display input error if it exists.",
+                    "tags": []
+                }
+            },
+            "setError": {
+                "complexType": {
+                    "signature": "(valid: MgInputCombobox[\"valid\"], errorMessage: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "valid",
+                            "type": "boolean",
+                            "docs": "- value indicating the validity"
+                        }, {
+                            "name": "errorMessage",
+                            "type": "string",
+                            "docs": "- the error message to display"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "MgInputCombobox": {
+                            "location": "global",
+                            "id": "global::MgInputCombobox"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set an error and display a custom error message.\nThis method can be used to set the component's error state from its concombobox by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given concombobox.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "valid - value indicating the validity"
+                        }, {
+                            "name": "param",
+                            "text": "errorMessage - the error message to display"
+                        }]
+                }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reset value, validity and error state",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValue"
+            }, {
+                "propName": "items",
+                "methodName": "watchItems"
+            }, {
+                "propName": "identifier",
+                "methodName": "watchIdentifier"
+            }, {
+                "propName": "readonly",
+                "methodName": "watchReadonly"
+            }, {
+                "propName": "required",
+                "methodName": "watchValidityChange"
+            }, {
+                "propName": "readonly",
+                "methodName": "watchValidityChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchValidityChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabled"
+            }, {
+                "propName": "mgWidth",
+                "methodName": "watchMgWidth"
+            }, {
+                "propName": "fetchurl",
+                "methodName": "watchFetchUrl"
+            }, {
+                "propName": "fetchoptions",
+                "methodName": "watchFetchOptions"
+            }, {
+                "propName": "fetchmappings",
+                "methodName": "watchFetchMappings"
+            }, {
+                "propName": "options",
+                "methodName": "watchOptions"
+            }, {
+                "propName": "filter",
+                "methodName": "watchFilter"
+            }, {
+                "propName": "popoverDisplay",
+                "methodName": "watchPopoverDisplay"
+            }];
+    }
+}
+//# sourceMappingURL=mg-input-combobox.js.map