@mgdis/mg-components 6.13.1 → 6.14.0

package/dist/collection/locales/index.js

@@ -9,4 +9,3 @@ const messages = { en, fr };
  * @returns messages object
  */
 export const initLocales = defineLocales(messages, defaultLocale);
-//# sourceMappingURL=index.js.map

package/dist/collection/types/index.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=index.js.map

package/dist/collection/utils/behaviors.utils.js

@@ -77,4 +77,3 @@ export class OverflowBehavior {
         this._resizeObserver.observe(this.parentElement);
     }
 }
-//# sourceMappingURL=behaviors.utils.js.map

package/dist/collection/utils/events.utils.js

@@ -19,4 +19,3 @@ export const Keys = {
     NUMPADENTER: 'NumpadEnter',
     SPACE: 'Space',
 };
-//# sourceMappingURL=events.utils.js.map

package/dist/collection/utils/playwright.fixture.js

@@ -20,4 +20,3 @@ export const test = base.extend({
         await use(page);
     },
 });
-//# sourceMappingURL=playwright.fixture.js.map

package/dist/collection/utils/unit.test.utils.js

@@ -20,4 +20,3 @@ export const mockWindowFrames = () => {
         value: { length: 0 },
     });
 };
-//# sourceMappingURL=unit.test.utils.js.map

package/dist/components/events.utils.js

@@ -21,6 +21,3 @@ const Keys = {
 };
 
 export { Keys as K };
-//# sourceMappingURL=events.utils.js.map
-
-//# sourceMappingURL=events.utils.js.map

package/dist/components/index.js

@@ -1,4 +1 @@
-export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
-//# sourceMappingURL=index.js.map
-
-//# sourceMappingURL=index.js.map
+export { getAssetPath, render, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';

package/dist/components/index2.js

@@ -406,6 +406,3 @@ const getChildWindows = (localWindow, windows = []) => {
 };
 
 export { ClassList as C, Paginate as P, isValideID as a, isTagName as b, createID as c, allItemsAreString as d, cleanString as e, formatID as f, getWindows as g, Cursor as h, isValidString as i, Page as j, getObjectValueFromKey as k, isObject as l, focusableElements as m, nextTick as n, dateRegExp as o, dateToString as p, isValidNumber as q, toString as t };
-//# sourceMappingURL=index2.js.map
-
-//# sourceMappingURL=index2.js.map

package/dist/components/index3.js

@@ -462,6 +462,3 @@ const messages = { en, fr };
 const initLocales = defineLocales(messages, defaultLocale);
 
 export { localeDatePattern as a, localeNumber as b, localeUnit as c, localePercent as d, localeCurrency as e, initLocales as i, localeDate as l };
-//# sourceMappingURL=index3.js.map
-
-//# sourceMappingURL=index3.js.map

package/dist/components/mg-action-more.js

@@ -250,6 +250,3 @@ const MgActionMore = MgActionMore$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgActionMore, defineCustomElement };
-//# sourceMappingURL=mg-action-more.js.map
-
-//# sourceMappingURL=mg-action-more.js.map

package/dist/components/mg-alert.js

@@ -22,9 +22,9 @@ const MgAlert$1 = /*@__PURE__*/ proxyCustomElement(class MgAlert extends HTMLEle
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.componentShow = createEvent(this, "component-show", 7);
-        this.componentHide = createEvent(this, "component-hide", 7);
-        this.componentClose = createEvent(this, "component-close", 7);
+        this.componentShow = createEvent(this, "component-show", 3);
+        this.componentHide = createEvent(this, "component-hide", 3);
+        this.componentClose = createEvent(this, "component-close", 3);
         /************
          * Internal *
          ************/
@@ -159,7 +159,7 @@ const MgAlert$1 = /*@__PURE__*/ proxyCustomElement(class MgAlert extends HTMLEle
      * @returns HTML Element
      */
     render() {
-        return (h("mg-message", { key: '12216af414367fc3eea31cffb2d7e38c724038a3', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: 'bdab00611363a879e8d2bd23442e62ab5e7238e3' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
+        return (h("mg-message", { key: '397a9a25b825bc75479d4562bff61dedc8ddc891', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: '793fb1e88b5d68bd41598f020748ea2fb02d7f3b' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -220,6 +220,3 @@ const MgAlert = MgAlert$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgAlert, defineCustomElement };
-//# sourceMappingURL=mg-alert.js.map
-
-//# sourceMappingURL=mg-alert.js.map

package/dist/components/mg-badge.js

@@ -4,6 +4,3 @@ const MgBadge = MgBadge$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgBadge, defineCustomElement };
-//# sourceMappingURL=mg-badge.js.map
-
-//# sourceMappingURL=mg-badge.js.map

package/dist/components/mg-badge2.js

@@ -109,6 +109,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgBadge as M, defineCustomElement as d };
-//# sourceMappingURL=mg-badge2.js.map
-
-//# sourceMappingURL=mg-badge2.js.map

package/dist/components/mg-button.js

@@ -4,6 +4,3 @@ const MgButton = MgButton$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgButton, defineCustomElement };
-//# sourceMappingURL=mg-button.js.map
-
-//# sourceMappingURL=mg-button.js.map

package/dist/components/mg-button2.js

@@ -271,6 +271,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgButton as M, defineCustomElement as d };
-//# sourceMappingURL=mg-button2.js.map
-
-//# sourceMappingURL=mg-button2.js.map

package/dist/components/mg-card.js

@@ -4,6 +4,3 @@ const MgCard = MgCard$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgCard, defineCustomElement };
-//# sourceMappingURL=mg-card.js.map
-
-//# sourceMappingURL=mg-card.js.map

package/dist/components/mg-card2.js

@@ -1,25 +1,77 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { C as ClassList } from './index2.js';
 
-const mgCardCss = "/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-min-width: Defines the min-width property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default));box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
+/**
+ * List of all possibles radius size
+ */
+const radiusSizes = ['xsmall', 'small', 'medium'];
+
+const mgCardCss = "/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-min-width: Defines the min-width property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-12`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}.mg-c-card.mg-c-card--shadow{--mg-c-card-border:var(--mg-b-color-neutral-20);box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card.mg-c-card--radius-xsmall{--mg-c-card-border-radius:var(--mg-b-size-4)}.mg-c-card.mg-c-card--radius-small{--mg-c-card-border-radius:var(--mg-b-size-8)}";
 
 const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Add box-shadow style
+         */
+        this.shadow = false;
+        /**
+         * Define the border radius size
+         */
+        this.radiusSize = 'medium';
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-card']);
+    }
+    watchShadow(newValue) {
+        if (newValue) {
+            this.classCollection.add('mg-c-card--shadow');
+        }
+        else {
+            this.classCollection.delete('mg-c-card--shadow');
+        }
+    }
+    watchRadiusSize(newValue, oldValue) {
+        if (oldValue !== undefined && radiusSizes.includes(oldValue)) {
+            this.classCollection.delete(`mg-c-card--radius-${oldValue}`);
+        }
+        if (radiusSizes.includes(newValue)) {
+            this.classCollection.add(`mg-c-card--radius-${newValue}`);
+        }
     }
     /*************
      * Lifecycle *
      *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad() {
+        this.watchShadow(this.shadow);
+        this.watchRadiusSize(this.radiusSize);
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'e59cabb09dbc28c148770b57de98f130c4479b75', class: "mg-c-card" }, h("slot", { key: 'b6e679317bddd23e73443c601992b7b344d6dc72' })));
+        return (h("div", { key: '6f83c5f7f9e0aacf502e407450cfdf039635a1f1', class: this.classCollection.join() }, h("slot", { key: '6bf8c02d3c3c9d0719e45af96b41f54289e31961' })));
     }
+    static get watchers() { return {
+        "shadow": ["watchShadow"],
+        "radiusSize": ["watchRadiusSize"]
+    }; }
     static get style() { return mgCardCss; }
-}, [1, "mg-card"]);
+}, [1, "mg-card", {
+        "shadow": [4],
+        "radiusSize": [1, "radius-size"],
+        "classCollection": [32]
+    }, undefined, {
+        "shadow": ["watchShadow"],
+        "radiusSize": ["watchRadiusSize"]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -36,6 +88,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgCard as M, defineCustomElement as d };
-//# sourceMappingURL=mg-card2.js.map
-
-//# sourceMappingURL=mg-card2.js.map

package/dist/components/mg-character-left.js

@@ -4,6 +4,3 @@ const MgCharacterLeft = MgCharacterLeft$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgCharacterLeft, defineCustomElement };
-//# sourceMappingURL=mg-character-left.js.map
-
-//# sourceMappingURL=mg-character-left.js.map

package/dist/components/mg-character-left2.js

@@ -71,6 +71,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgCharacterLeft as M, defineCustomElement as d };
-//# sourceMappingURL=mg-character-left2.js.map
-
-//# sourceMappingURL=mg-character-left2.js.map

package/dist/components/mg-details.js

@@ -100,6 +100,3 @@ const MgDetails = MgDetails$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgDetails, defineCustomElement };
-//# sourceMappingURL=mg-details.js.map
-
-//# sourceMappingURL=mg-details.js.map

package/dist/components/mg-divider.js

@@ -4,6 +4,3 @@ const MgDivider = MgDivider$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgDivider, defineCustomElement };
-//# sourceMappingURL=mg-divider.js.map
-
-//# sourceMappingURL=mg-divider.js.map

package/dist/components/mg-divider2.js

@@ -45,6 +45,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgDivider as M, defineCustomElement as d };
-//# sourceMappingURL=mg-divider2.js.map
-
-//# sourceMappingURL=mg-divider2.js.map

package/dist/components/mg-form.js

@@ -297,6 +297,3 @@ const MgForm = MgForm$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgForm, defineCustomElement };
-//# sourceMappingURL=mg-form.js.map
-
-//# sourceMappingURL=mg-form.js.map

package/dist/components/mg-icon.js

@@ -4,6 +4,3 @@ const MgIcon = MgIcon$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgIcon, defineCustomElement };
-//# sourceMappingURL=mg-icon.js.map
-
-//# sourceMappingURL=mg-icon.js.map

package/dist/components/mg-icon2.js

@@ -178,6 +178,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgIcon as M, defineCustomElement as d };
-//# sourceMappingURL=mg-icon2.js.map
-
-//# sourceMappingURL=mg-icon2.js.map

package/dist/components/mg-illustrated-message.js

@@ -125,6 +125,3 @@ const MgIllustratedMessage = MgIllustratedMessage$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgIllustratedMessage, defineCustomElement };
-//# sourceMappingURL=mg-illustrated-message.js.map
-
-//# sourceMappingURL=mg-illustrated-message.js.map

package/dist/components/mg-input-checkbox-paginated.js

@@ -4,6 +4,3 @@ const MgInputCheckboxPaginated = MgInputCheckboxPaginated$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputCheckboxPaginated, defineCustomElement };
-//# sourceMappingURL=mg-input-checkbox-paginated.js.map
-
-//# sourceMappingURL=mg-input-checkbox-paginated.js.map

package/dist/components/mg-input-checkbox-paginated2.js

@@ -215,6 +215,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgInputCheckboxPaginated as M, SectionKind as S, MgInputCheckboxList as a, checkboxTypes as c, defineCustomElement as d };
-//# sourceMappingURL=mg-input-checkbox-paginated2.js.map
-
-//# sourceMappingURL=mg-input-checkbox-paginated2.js.map

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

@@ -566,7 +566,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: '172d56836709aa7acb69bb1b00d71366fad1858a', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], 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: 'a6afc33b5c437000945fca2d825526123a7c4fdf', 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));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -715,6 +715,3 @@ const MgInputCheckbox = MgInputCheckbox$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputCheckbox, defineCustomElement };
-//# sourceMappingURL=mg-input-checkbox.js.map
-
-//# sourceMappingURL=mg-input-checkbox.js.map

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

@@ -759,7 +759,7 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
         else {
             activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
         }
-        return (h("mg-input", { key: 'd11ca521c7f2400edd4fa006a929cf6b2d19ef80', 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: {
+        return (h("mg-input", { key: '08016aeb2db2bd5c700faa5951166a39d14dc045', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
                 '--mg-c-input-list-width': Boolean((_f = this.input) === null || _f === void 0 ? void 0 : _f.offsetWidth) ? `${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)
@@ -917,6 +917,3 @@ const MgInputCombobox = MgInputCombobox$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputCombobox, defineCustomElement };
-//# sourceMappingURL=mg-input-combobox.js.map
-
-//# sourceMappingURL=mg-input-combobox.js.map

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

@@ -374,7 +374,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '9afadd8001b3db8101678116996a28c88fc047be', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], 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: '1c9a935b76acf5c3ca6a2f53904f31508d265b49', 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;
             } }))));
@@ -464,6 +464,3 @@ const MgInputDate = MgInputDate$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputDate, defineCustomElement };
-//# sourceMappingURL=mg-input-date.js.map
-
-//# sourceMappingURL=mg-input-date.js.map

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

@@ -470,7 +470,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '4b882a2d468ea59b1ece7cb59cdb8372ce4d2299', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: '61da1f6ccfcb9932895dc79e7e189fca7083a4ee', 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 === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
             ? this.readonlyValue && this.renderReadonly()
             : [
                 h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
@@ -585,6 +585,3 @@ const MgInputNumeric = MgInputNumeric$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputNumeric, defineCustomElement };
-//# sourceMappingURL=mg-input-numeric.js.map
-
-//# sourceMappingURL=mg-input-numeric.js.map

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

@@ -250,7 +250,7 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class MgInputPassword
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '00d40d4c4c8b9ca57e9c9f34575e69ec535aea22', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], 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 ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: 'b10f4e1d629bc56d0505739d19047a2b73c6baaa', 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 === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: this.displayPassword ? 'eye-slash' : 'eye' }))))));
@@ -345,6 +345,3 @@ const MgInputPassword = MgInputPassword$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputPassword, defineCustomElement };
-//# sourceMappingURL=mg-input-password.js.map
-
-//# sourceMappingURL=mg-input-password.js.map

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

@@ -284,7 +284,7 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '9460e2802454e18c1f79ebc63bef0b5e4712acf8', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
+        return (h("mg-input", { key: '704aded91c21206a8b8ccced19a1a9c1ad55745e', 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 ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
                 if (el !== null)
                     this.inputs[index] = el;
             } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));
@@ -376,6 +376,3 @@ const MgInputRadio = MgInputRadio$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputRadio, defineCustomElement };
-//# sourceMappingURL=mg-input-radio.js.map
-
-//# sourceMappingURL=mg-input-radio.js.map

package/dist/components/mg-input-rich-text-editor.js

@@ -31540,6 +31540,3 @@ const MgInputRichTextEditor = MgInputRichTextEditor$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputRichTextEditor, defineCustomElement };
-//# sourceMappingURL=mg-input-rich-text-editor.js.map
-
-//# sourceMappingURL=mg-input-rich-text-editor.js.map

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

@@ -4,6 +4,3 @@ const MgInputSelect = MgInputSelect$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputSelect, defineCustomElement };
-//# sourceMappingURL=mg-input-select.js.map
-
-//# sourceMappingURL=mg-input-select.js.map

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

@@ -101,6 +101,22 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
          * Component classes
          */
         this.classCollection = new ClassList(['mg-c-input--select']);
+        /**
+         * Method to get readonly value from value
+         * @returns readonly value
+         */
+        this.getReadonlyValue = () => {
+            var _a;
+            if (allItemsAreString(this.items) && typeof this.value === 'string') {
+                return this.items.find(item => item === this.value);
+            }
+            else if (allItemsAreOptions(this.items)) {
+                return (_a = this.items.find(item => item.value === this.value)) === null || _a === void 0 ? void 0 : _a.title;
+            }
+            else {
+                return null;
+            }
+        };
         /**
          * Handle input event
          */
@@ -174,16 +190,6 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
         this.renderOption = (option) => (h("option", { key: option.title, value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
     }
     validateValue(newValue) {
-        var _a, _b;
-        if (allItemsAreString(this.items) && typeof newValue === 'string') {
-            this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== undefined ? this.input.value : newValue;
-        }
-        else if (allItemsAreOptions(this.items)) {
-            this.readonlyValue = (_b = this.items.find(item => item.value === newValue)) === null || _b === void 0 ? void 0 : _b.title;
-        }
-        else {
-            this.readonlyValue = null;
-        }
         setTimeout(() => {
             this.checkValidity();
             if (this.hasDisplayedError) {
@@ -365,7 +371,8 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'c755e68979b8cb479f409c0ac99d4fc47d1e4c25', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        const readonlyValue = this.getReadonlyValue();
+        return (h("mg-input", { key: '2a0599578526b7c110b8f8e01dcb233ed2d523cf', 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 && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
@@ -405,7 +412,6 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
         "errorMessage": [32],
         "options": [32],
         "valueExist": [32],
-        "readonlyValue": [32],
         "setFocus": [64],
         "displayError": [64],
         "setError": [64],
@@ -459,6 +465,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgInputSelect as M, defineCustomElement as d };
-//# sourceMappingURL=mg-input-select2.js.map
-
-//# sourceMappingURL=mg-input-select2.js.map

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

@@ -4,6 +4,3 @@ const MgInputText = MgInputText$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputText, defineCustomElement };
-//# sourceMappingURL=mg-input-text.js.map
-
-//# sourceMappingURL=mg-input-text.js.map

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

@@ -382,7 +382,7 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class MgInputText extends H
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '76e332d40fea8e1897da15271989f29d710c6550', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], 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
+        return (h("mg-input", { key: 'e8249550f7077c38f87b768ef68837dec35cd08e', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, 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
             ? this.value && this.renderReadonly()
             : [
                 h("div", { key: "input", class: "mg-c-input__with-character-left", style: {
@@ -498,6 +498,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgInputText as M, defineCustomElement as d };
-//# sourceMappingURL=mg-input-text2.js.map
-
-//# sourceMappingURL=mg-input-text2.js.map

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

@@ -302,7 +302,7 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '7bcbb8d4ca3244f2278ebad0b85f83be0187a996', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], 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 ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__with-character-left" }, h("textarea", { class: {
+        return (h("mg-input", { key: 'b52470b9b12c35a62d656609ea345a0545d2429b', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, 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 ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__with-character-left" }, h("textarea", { class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--width': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',
@@ -413,6 +413,3 @@ const MgInputTextarea = MgInputTextarea$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputTextarea, defineCustomElement };
-//# sourceMappingURL=mg-input-textarea.js.map
-
-//# sourceMappingURL=mg-input-textarea.js.map

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

@@ -4,6 +4,3 @@ const MgInputTitle = MgInputTitle$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputTitle, defineCustomElement };
-//# sourceMappingURL=mg-input-title.js.map
-
-//# sourceMappingURL=mg-input-title.js.map

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

@@ -77,6 +77,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgInputTitle as M, defineCustomElement as d };
-//# sourceMappingURL=mg-input-title2.js.map
-
-//# sourceMappingURL=mg-input-title2.js.map

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

@@ -265,7 +265,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
      */
     render() {
         const checkedItem = this.getCheckedItem(this.checked);
-        return (h("mg-input", { key: '2e92c411cfa6fdcbcc6ed0546eed6e804ed4d9cb', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked, ref: el => {
+        return (h("mg-input", { key: '3cfa56cd1d8fdaba4e505027db7fae0385bac941', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked, ref: el => {
                 if (el !== null)
                     this.button = el;
             } }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
@@ -357,6 +357,3 @@ const MgInputToggle = MgInputToggle$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputToggle, defineCustomElement };
-//# sourceMappingURL=mg-input-toggle.js.map
-
-//# sourceMappingURL=mg-input-toggle.js.map