@mgdis/mg-components 6.24.0 → 6.26.0

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

@@ -3,7 +3,7 @@ import { ClassList, cleanString, isValidString, toString } from "@mgdis/core-ui-
 import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { checkboxTypes, SectionKind, } from "./mg-input-checkbox.conf";
 import { MgInputCheckboxList } from "./MgInputCheckboxList";
-import { classDisabled, classReadonly, classFieldset, classVerticalList } from "../mg-input/mg-input.conf";
+import { classDisabled, classReadonly, classFieldset, classVerticalList, } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 import { Status } from "../../mg-tabs/mg-tabs.conf";
 import { MgInputCheckboxPaginated } from "./MgInputCheckboxPaginated";
@@ -13,7 +13,10 @@ import { MgInputCheckboxPaginated } from "./MgInputCheckboxPaginated";
  * @returns match item type
  */
 const isCheckboxItems = (items) => Array.isArray(items) &&
-    items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);
+    items.every((item) => typeof item === 'object' &&
+        typeof item.title === 'string' &&
+        (item.value === null || typeof item.value === 'boolean') &&
+        item.value !== undefined);
 export class MgInputCheckbox {
     constructor() {
         // hasDisplayedError (triggered by blur event)
@@ -103,7 +106,7 @@ export class MgInputCheckbox {
          * @param event - input event
          */
         this.handleInput = (event) => {
-            this.updateCheckboxItems('value', Boolean(event.target.checked), item => item._id === event.target.id);
+            this.updateCheckboxItems('value', Boolean(event.target.checked), (item) => item._id === event.target.id);
             this.updateValues();
             this.checkValidity();
             this.setErrorMessage();
@@ -122,11 +125,12 @@ export class MgInputCheckbox {
                     return;
                 }
                 const enableInputs = Array.from(this.element.shadowRoot.querySelectorAll('input'))
-                    .filter(input => !input.hasAttribute('disabled'))
+                    .filter((input) => !input.hasAttribute('disabled'))
                     .map(({ id }) => id);
-                const originInputIndex = enableInputs.findIndex(id => id === event.target.id);
+                const originInputIndex = enableInputs.findIndex((id) => id === event.target.id);
                 // close popover when tab trigger focus outside its DOM
-                if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) || (originInputIndex === 0 && event.shiftKey && this.searchInput === undefined))
+                if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) ||
+                    (originInputIndex === 0 && event.shiftKey && this.searchInput === undefined))
                     this.mgPopover.display = false;
             }
         };
@@ -172,13 +176,13 @@ export class MgInputCheckbox {
                 this.checkValidity();
             }
             // init active tab to selected if some values are checked
-            this.activeTab = this.checkboxItems.some(items => items.value) ? 2 : 1;
+            this.activeTab = this.checkboxItems.some((items) => items.value) ? 2 : 1;
         };
         /**
          * Update values
          */
         this.updateValues = () => {
-            this.value = this.checkboxItems.map(o => {
+            this.value = this.checkboxItems.map((o) => {
                 delete o._handleBlur;
                 delete o._handleInput;
                 delete o._handleKeydown;
@@ -195,7 +199,7 @@ export class MgInputCheckbox {
          * Method to update searchResults
          */
         this.updateSearchResults = () => {
-            this.searchResults = this.checkboxItems.filter(item => cleanString(item.title).includes(cleanString(this.searchValue)));
+            this.searchResults = this.checkboxItems.filter((item) => cleanString(item.title).includes(cleanString(this.searchValue)));
         };
         /**
          * Method to validate if one of inputs value is checked id required
@@ -267,7 +271,7 @@ export class MgInputCheckbox {
          * Manage items to display depending on the search state
          * @returns items to display
          */
-        this.getDisplayItems = () => (this.searchValue.length > 0 ? this.searchResults : this.checkboxItems);
+        this.getDisplayItems = () => this.searchValue.length > 0 ? this.searchResults : this.checkboxItems;
         /**
          * get list of selected checkboxItems
          * @returns selected checkboxItems
@@ -292,7 +296,7 @@ export class MgInputCheckbox {
          * @returns The rendered readonly value.
          */
         this.renderReadonly = (readonlyValue) => {
-            return this.inputVerticalList ? (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map(value => (h("li", { key: value }, h("b", null, value)))))) : (h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
+            return this.inputVerticalList ? (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map((value) => (h("li", { key: value }, h("b", null, value)))))) : (h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
         };
         /**
          * Renders the MgInputCheckboxList component.
@@ -403,7 +407,7 @@ export class MgInputCheckbox {
         // - 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 => {
+        return new Promise((resolve) => {
             requestAnimationFrame(() => {
                 this.checkValidity();
                 this.setErrorMessage();
@@ -443,14 +447,14 @@ export class MgInputCheckbox {
      */
     async reset() {
         if (!this.readonly) {
-            this.value = this.value.map(item => (Object.assign(Object.assign({}, item), { value: false })));
+            this.value = this.value.map((item) => (Object.assign(Object.assign({}, item), { value: false })));
             // 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 => {
+            return new Promise((resolve) => {
                 requestAnimationFrame(() => {
                     // unlock validity check by reseting customErrorMessage
                     this.customErrorMessage = { lock: false };
@@ -483,7 +487,7 @@ export class MgInputCheckbox {
      * @param condition - condtion to applu change on item
      */
     updateCheckboxItems(key, newValue, condition) {
-        this.checkboxItems = this.checkboxItems.map(item => {
+        this.checkboxItems = this.checkboxItems.map((item) => {
             if ((typeof condition === 'function' && condition(item)) || condition === undefined)
                 item[key] = newValue;
             return item;
@@ -536,7 +540,7 @@ export class MgInputCheckbox {
         const handleMassAction = (kind) => () => {
             const displayItems = this.getDisplayItems();
             // update only displayed items
-            displayItems.forEach(item => {
+            displayItems.forEach((item) => {
                 if (!item.disabled) {
                     item.value = kind !== SectionKind.SELECTED;
                 }
@@ -553,9 +557,13 @@ export class MgInputCheckbox {
         ];
         return (h("mg-tabs", { identifier: `${this.identifier}-tabs`, class: "mg-c-input__tabs", label: this.messages.input.checkbox.sections.label, items: sections.map((section, key) => ({
                 label: section.messages.title,
-                badge: { value: section.checkboxes.length, label: this.messages.input.checkbox.sections.badge.label, role: 'information' },
+                badge: {
+                    value: section.checkboxes.length,
+                    label: this.messages.input.checkbox.sections.badge.label,
+                    role: 'information',
+                },
                 status: key + 1 === this.activeTab ? Status.ACTIVE : Status.VISIBLE,
-            })), activeTab: this.activeTab, "onActive-tab-change": this.handleActiveTabChange }, sections.map(section => {
+            })), activeTab: this.activeTab, "onActive-tab-change": this.handleActiveTabChange }, sections.map((section) => {
             var _a;
             return (h(MgInputCheckboxPaginated, Object.assign({}, section, { limit: (_a = this.paginatedLimits[section.key]) !== null && _a !== void 0 ? _a : this.paginatedStep, handleLoadMore: () => this.handlePaginatedLoadMore(section.key) })));
         })));
@@ -573,12 +581,12 @@ export class MgInputCheckbox {
             checkboxes: this.getDisplayItems(),
         };
         const checkboxesPaginatedSearchProps = Object.assign(Object.assign({}, props), { messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.search), { showMore: this.messages.input.showMore }), key: SectionKind.SEARCH, limit: (_a = this.paginatedLimits[SectionKind.SEARCH]) !== null && _a !== void 0 ? _a : this.paginatedStep, handleLoadMore: () => this.handlePaginatedLoadMore(SectionKind.SEARCH) });
-        return (h("div", { class: "mg-c-input__input-container" }, h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), display: this.hasOpenedPopover, "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
+        return (h("div", { class: "mg-c-input__input-container" }, h("mg-popover", { identifier: this.getMgPopoverIdentifier(), display: this.hasOpenedPopover, "onDisplay-change": this.handleMgPopoverDisplayChange, "data-fallback-placement": "bottom-end", ref: (el) => {
                 if (el !== null)
                     this.mgPopover = el;
             } }, h("mg-button", { variant: "secondary", "aria-describedby": `${this.identifier}-title` }, h("mg-icon", { icon: "list" }), this.getSelectValuesButtonMessage()), h("div", { slot: "content", class: "mg-c-input__content" }, this.displaySearchInput ? ([
             h("mg-input-text", { key: "input-search", identifier: `${this.identifier}-input-search`, icon: "magnifying-glass", type: "search", placeholder: this.messages.input.checkbox.sections.search.label, label: this.messages.input.checkbox.sections.search.label, mgWidth: "full", value: this.searchValue, labelHide: true, characterLeftHide: true, name: "q", "onValue-change": this.handleSearchChange }),
-            this.searchValue.length > 0 ? h(MgInputCheckboxPaginated, Object.assign({}, checkboxesPaginatedSearchProps)) : this.renderCheckboxTabs(props),
+            this.searchValue.length > 0 ? (h(MgInputCheckboxPaginated, Object.assign({}, checkboxesPaginatedSearchProps))) : (this.renderCheckboxTabs(props)),
         ]) : (h(MgInputCheckboxList, Object.assign({}, props, { id: this.checkboxesId, name: this.name, invalid: this.invalid }))))), this.displaySelectedValues ? (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (h("b", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
     }
     /**
@@ -597,7 +605,7 @@ export class MgInputCheckbox {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: '45c7481c738c254f20892d9c38ba53fd4d22cd7a', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
+        return (h("mg-input", { key: '8e403fd79ca8a9bb2db5545e946a3763eb156551', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
     }
     static get is() { return "mg-input-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -1065,7 +1073,7 @@ export class MgInputCheckbox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when checking validity"
+                    "text": "Emitted event when checking validity"
                 },
                 "complexType": {
                     "original": "HTMLMgInputCheckboxElement['valid']",

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { ClassList, Cursor, Page, Paginate, allItemsAreString, formatID, getObjectValueFromKey, isObject, isValidString, nextTick, toString, } from "@mgdis/core-ui-helpers/dist/utils";
 import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
-import { widths, classReadonly, classDisabled } from "../mg-input/mg-input.conf";
+import { widths, classReadonly, classDisabled, } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 import { Keys } from "../../../../utils/events.utils";
 /**
@@ -9,7 +9,10 @@ import { Keys } from "../../../../utils/events.utils";
  * @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;
+const isItem = (item) => item &&
+    typeof item === 'object' &&
+    typeof item.title === 'string' &&
+    item.value !== undefined;
 /**
  * Check if objects are items
  * @param items - items to check
@@ -25,9 +28,10 @@ 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)))
+        if ([request, response].some((property) => !isObject(property)))
             return false;
-        const isValidRequest = typeof request.filter === 'string' && (request.filterTransform === undefined || typeof request.filterTransform === 'function');
+        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' &&
@@ -74,6 +78,10 @@ export class MgInputCombobox {
          * Define input width
          */
         this.mgWidth = 'full';
+        /**
+         * Define the popover placement
+         */
+        this.popoverPlacement = 'bottom-start';
         /**
          * Define tooltip position
          */
@@ -89,7 +97,11 @@ export class MgInputCombobox {
         /**
          * Component classes
          */
-        this.classCollection = new ClassList(['mg-c-input--combobox', 'mg-c-input--has-icon', 'mg-c-input--input-append']);
+        this.classCollection = new ClassList([
+            'mg-c-input--combobox',
+            'mg-c-input--has-icon',
+            'mg-c-input--input-append',
+        ]);
         /**
          * Popover display state
          */
@@ -99,7 +111,7 @@ export class MgInputCombobox {
          * @param event - option element click event
          */
         this.handleOptionClick = (event) => {
-            this.setValue(this.options.items.find(option => toString(option.value) === event.target.dataset.value));
+            this.setValue(this.options.items.find((option) => toString(option.value) === event.target.dataset.value));
             this.popoverDisplay = false;
         };
         /**
@@ -294,7 +306,8 @@ export class MgInputCombobox {
                 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' });
+                (_a = this.element.shadowRoot
+                    .querySelector(`li:nth-of-type(${(index || 0) + this.page.baseIndex})`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
             });
         };
         /**
@@ -343,7 +356,7 @@ export class MgInputCombobox {
          * 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()));
+        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
@@ -357,7 +370,7 @@ export class MgInputCombobox {
             (_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));
+                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;
@@ -387,7 +400,9 @@ export class MgInputCombobox {
             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));
+                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);
@@ -411,7 +426,7 @@ export class MgInputCombobox {
         this.goToNextPage = () => {
             this.showMore.emit();
             if (this.fetchurl !== undefined) {
-                return this.getOptions(typeof this.page.next === 'string' ? this.page.next : undefined).then(nextPage => {
+                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];
@@ -435,7 +450,7 @@ export class MgInputCombobox {
          */
         this.updatePage = async () => {
             if (this.fetchurl !== undefined) {
-                return this.getOptions().then(page => {
+                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 });
@@ -453,7 +468,9 @@ export class MgInputCombobox {
          */
         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 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);
@@ -503,7 +520,7 @@ export class MgInputCombobox {
         }
         // String array
         else if (allItemsAreString(newValue)) {
-            this.options = new Paginate(newValue.map(item => ({ title: item, value: item })), { total: newValue.length });
+            this.options = new Paginate(newValue.map((item) => ({ title: item, value: item })), { total: newValue.length });
         }
         // Object array
         else if (isItems(newValue)) {
@@ -545,7 +562,7 @@ export class MgInputCombobox {
     }
     watchMgWidth(newValue) {
         // reset width class
-        widths.forEach(width => {
+        widths.forEach((width) => {
             this.classCollection.delete(`mg-c-input--width-${width}`);
         });
         // apply new width
@@ -611,7 +628,7 @@ export class MgInputCombobox {
         // - 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 => {
+        return new Promise((resolve) => {
             requestAnimationFrame(() => {
                 this.checkValidity();
                 this.setErrorMessage();
@@ -660,7 +677,7 @@ export class MgInputCombobox {
             // - 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 => {
+            return new Promise((resolve) => {
                 requestAnimationFrame(() => {
                     // unlock validity check by reseting customErrorMessage
                     this.customErrorMessage = { lock: false };
@@ -761,14 +778,14 @@ export class MgInputCombobox {
         else {
             activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
         }
-        return (h("mg-input", { key: '5c24478bb10ab8f1d292d38a9be162e370b0fdb2', 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: {
+        return (h("mg-input", { key: 'c8cff9468c9bfdcc6dd5c96c1452ad81620e050c', 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: this.popoverPlacement, display: this.popoverDisplay, 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 => {
+            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
@@ -778,7 +795,7 @@ export class MgInputCombobox {
                         '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.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;
@@ -1075,6 +1092,33 @@ export class MgInputCombobox {
                 "attribute": "mg-width",
                 "defaultValue": "'full'"
             },
+            "popoverPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@popperjs/core",
+                            "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::Placement",
+                            "referenceLocation": "Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the popover placement"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popover-placement",
+                "defaultValue": "'bottom-start'"
+            },
             "tooltip": {
                 "type": "string",
                 "mutable": false,
@@ -1288,7 +1332,7 @@ export class MgInputCombobox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when value change"
+                    "text": "Emitted event when value change"
                 },
                 "complexType": {
                     "original": "HTMLMgInputComboboxElement['value']",
@@ -1308,7 +1352,7 @@ export class MgInputCombobox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when filter change"
+                    "text": "Emitted event when filter change"
                 },
                 "complexType": {
                     "original": "string",
@@ -1323,7 +1367,7 @@ export class MgInputCombobox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when `load-more` is called"
+                    "text": "Emitted event when `load-more` is called"
                 },
                 "complexType": {
                     "original": "void",
@@ -1338,7 +1382,7 @@ export class MgInputCombobox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when checking validity"
+                    "text": "Emitted event when checking validity"
                 },
                 "complexType": {
                     "original": "HTMLMgInputComboboxElement['valid']",
@@ -1358,7 +1402,7 @@ export class MgInputCombobox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when fetch API throw an error"
+                    "text": "Emitted event when fetch API throw an error"
                 },
                 "complexType": {
                     "original": "Error",

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

@@ -72,7 +72,9 @@ export class MgInputDate {
                 text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText.expectedFormat));
             }
             // Replace pattern and date variables
-            return text.replace('{pattern}', this.renderPattern()).replace('{date}', localeDate(dateToString(new Date('2025-12-24')), this.systemLocale));
+            return text
+                .replace('{pattern}', this.renderPattern())
+                .replace('{date}', localeDate(dateToString(new Date('2025-12-24')), this.systemLocale));
         };
         /**
          * Handle input event
@@ -114,7 +116,9 @@ export class MgInputDate {
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || (this.input.checkValidity() && (this.value === null || this.isValidPattern(this.value))));
+            this.setValidity(this.readonly ||
+                this.disabled ||
+                (this.input.checkValidity() && (this.value === null || this.isValidPattern(this.value))));
         };
         /**
          * get input error code
@@ -132,7 +136,9 @@ export class MgInputDate {
                 error = 'required';
             }
             // min & max
-            else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
+            else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) &&
+                ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                this.max !== DEFAULT_MAX_DATE) {
                 error = 'minMax';
             }
             // min
@@ -252,7 +258,7 @@ export class MgInputDate {
         // - 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 => {
+        return new Promise((resolve) => {
             requestAnimationFrame(() => {
                 this.checkValidity();
                 this.setErrorMessage();
@@ -299,7 +305,7 @@ export class MgInputDate {
             // - 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 => {
+            return new Promise((resolve) => {
                 requestAnimationFrame(() => {
                     // unlock validity check by reseting customErrorMessage
                     this.customErrorMessage = { lock: false };
@@ -359,7 +365,7 @@ export class MgInputDate {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '7c6abb93dd859ba55d62860f4fac79ec29273fac', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        return (h("mg-input", { key: 'c13dd54974bd7c8381bcefbe847fe79f2270506c', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }))));
@@ -714,7 +720,7 @@ export class MgInputDate {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when value change"
+                    "text": "Emitted event when value change"
                 },
                 "complexType": {
                     "original": "HTMLMgInputDateElement['value']",
@@ -734,7 +740,7 @@ export class MgInputDate {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when checking validity"
+                    "text": "Emitted event when checking validity"
                 },
                 "complexType": {
                     "original": "HTMLMgInputDateElement['valid']",

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

@@ -5,7 +5,8 @@ import { localeByte } from "@mgdis/core-ui-helpers/dist/locale";
 import { classDisabled } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 const allItemsAreFile = (items) => {
-    return Array.isArray(items) && items.every(item => isObject(item) && typeof item.name === 'string' && typeof item.size === 'number');
+    return (Array.isArray(items) &&
+        items.every((item) => isObject(item) && typeof item.name === 'string' && typeof item.size === 'number'));
 };
 export class MgInputFile {
     constructor() {
@@ -149,7 +150,7 @@ export class MgInputFile {
          * @returns boolean - true if max size is exceeded
          */
         this.isMaxSizeExceeded = () => {
-            return this.maxSize >= 0 && this.files.some(file => file.size > this.maxSize);
+            return this.maxSize >= 0 && this.files.some((file) => file.size > this.maxSize);
         };
         /**
          * Render files
@@ -157,7 +158,7 @@ export class MgInputFile {
          */
         this.renderFiles = () => {
             const fileListId = `${this.identifier}-file-list`;
-            const renderFileName = (file) => (h("span", { class: "mg-c-input__file-item-name" }, file.name, file.size > 0 ? h("span", { class: "mg-c-input__file-item-size" }, ` ${localeByte(file.size, this.locale)}`) : undefined));
+            const renderFileName = (file) => (h("span", { class: "mg-c-input__file-item-name" }, file.name, file.size > 0 ? (h("span", { class: "mg-c-input__file-item-size" }, ` ${localeByte(file.size, this.locale)}`)) : undefined));
             const renderDeleteButton = () => (h("mg-button", { variant: "flat", class: "mg-c-input__file-delete-button", "is-icon": true, label: this.messages.input.file.deleteButton, type: "button", disabled: this.disabled, "aria-controls": [this.identifier, fileListId].join(' '), onClick: this.handleDeleteFileClick }, h("mg-icon", { icon: "cross" })));
             if (this.files.length === 0) {
                 return null;
@@ -246,7 +247,7 @@ export class MgInputFile {
         // - 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 => {
+        return new Promise((resolve) => {
             requestAnimationFrame(() => {
                 this.checkValidity();
                 this.setErrorMessage();
@@ -292,7 +293,7 @@ export class MgInputFile {
         // - 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 => {
+        return new Promise((resolve) => {
             requestAnimationFrame(() => {
                 // unlock validity check by resetting customErrorMessage
                 this.customErrorMessage = { lock: false };
@@ -334,9 +335,9 @@ export class MgInputFile {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '0ca01b9b4697f55406262e93438946c2fe12e5f5', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("div", { key: '99fe30d5339687054392ca2fd8773af76af35396', class: "mg-c-input__file-container" }, h("input", { key: '84d9bee62d4c0c5975b561cc3e261905c759556f', name: this.name, id: this.identifier, class: "mg-u-visually-hidden", type: "file", multiple: this.multiple === true, capture: this.capture, accept: this.accept, disabled: this.disabled, required: this.files.length === 0 && this.required, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-invalid": (this.invalid === true).toString(), ref: (el) => {
+        return (h("mg-input", { key: '3c4c0ebdd1661e381f0002b2ae68dcf454097913', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("div", { key: 'bd7665fe8c6e01ec4e04fbbbf9cc21ccc4128b17', class: "mg-c-input__file-container" }, h("input", { key: 'f27d10160115ec1ff5163a1c55aa2658779c6fd7', name: this.name, id: this.identifier, class: "mg-u-visually-hidden", type: "file", multiple: this.multiple === true, capture: this.capture, accept: this.accept, disabled: this.disabled, required: this.files.length === 0 && this.required, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-invalid": (this.invalid === true).toString(), ref: (el) => {
                 this.inputElement = el;
-            } }), h("mg-button", { key: '1b6694f7c36fa2c8a2c5347d93a9cb07678e9363', variant: "secondary", class: "mg-c-input__file-button", type: "button", disabled: this.disabled, onClick: this.handleButtonClick, onBlur: this.handleButtonBlur, tabindex: "-1", ref: (el) => {
+            } }), h("mg-button", { key: 'd16c4cbd95d676bcddb895659aab37f0f9c396eb', variant: "secondary", class: "mg-c-input__file-button", type: "button", disabled: this.disabled, onClick: this.handleButtonClick, onBlur: this.handleButtonBlur, tabindex: "-1", ref: (el) => {
                 this.fileButtonElement = el;
             } }, this.messages.input.file.browse), this.renderFiles())));
     }