@mgdis/mg-components 6.19.0 → 6.21.0

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

@@ -460,7 +460,7 @@ export class MgInputNumeric {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'c47f7c310587fc3bb4e7d5ffd07854a2297958df', 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
+        return (h("mg-input", { key: 'b158c0ec7f43ee02bbdbb275c169876fcdff92ac', 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) => {

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

@@ -248,7 +248,7 @@ export class MgInputPassword {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '845c075a44c50043776b7577642254d772629eef', 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) => {
+        return (h("mg-input", { key: '403d92641197b3ad397a0db527944dba4137f83a', 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' }))))));

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

@@ -284,7 +284,7 @@ export class MgInputRadio {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '9290ab8e5048dd6806985ab55d13bd8b0dd93bd1', 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) => {
+        return (h("mg-input", { key: '8d26edd50d44fbba4fee5fa6ef36aa3c455b1e5b', 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))))))));

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

@@ -166,10 +166,10 @@ export class MgInputRichTextEditor {
         (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
     }
     /**
-     * Get editor content as HTML
+     * Get editor content in HTML format
      * @returns HTML content of the editor
      */
-    getHTML() {
+    getEditorHTML() {
         return new Promise(resolve => {
             requestAnimationFrame(() => {
                 resolve(this.editor.getSemanticHTML());
@@ -177,10 +177,10 @@ export class MgInputRichTextEditor {
         });
     }
     /**
-     * Get editor content as plain text
+     * Get editor content in plain text format
      * @returns Plain text content of the editor
      */
-    async getText() {
+    async getEditorText() {
         return new Promise(resolve => {
             requestAnimationFrame(() => {
                 resolve(this.editor.getText());
@@ -317,7 +317,7 @@ export class MgInputRichTextEditor {
      * @returns HTML mg-input Element
      */
     render() {
-        return (h("mg-input", { key: '5e807e1059704a6624a1fda63ab56a6f9a51230f', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { ref: el => {
+        return (h("mg-input", { key: '26e4f26987e66541a6b21c7888ed7acd4e4ccad6', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { ref: el => {
                 this.wrapperElement = el;
             }, id: this.identifier, class: "mg-c-input__wrapper" }, h("div", null)))));
     }
@@ -325,12 +325,12 @@ export class MgInputRichTextEditor {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["./editor/editor.scss", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
+            "$": ["../../../../../node_modules/quill/dist/quill.snow.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["editor/editor.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
+            "$": ["../../../../../node_modules/quill/dist/quill.snow.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
         };
     }
     static get properties() {
@@ -639,7 +639,7 @@ export class MgInputRichTextEditor {
                 "mutable": false,
                 "complexType": {
                     "original": "EditorOptionsType['modules']",
-                    "resolved": "{ [x: string]: unknown; }",
+                    "resolved": "string | unknown",
                     "references": {
                         "EditorOptionsType": {
                             "location": "import",
@@ -755,7 +755,7 @@ export class MgInputRichTextEditor {
                     "tags": []
                 }
             },
-            "getHTML": {
+            "getEditorHTML": {
                 "complexType": {
                     "signature": "() => Promise<string>",
                     "parameters": [],
@@ -768,14 +768,14 @@ export class MgInputRichTextEditor {
                     "return": "Promise<string>"
                 },
                 "docs": {
-                    "text": "Get editor content as HTML",
+                    "text": "Get editor content in HTML format",
                     "tags": [{
                             "name": "returns",
                             "text": "HTML content of the editor"
                         }]
                 }
             },
-            "getText": {
+            "getEditorText": {
                 "complexType": {
                     "signature": "() => Promise<string>",
                     "parameters": [],
@@ -788,7 +788,7 @@ export class MgInputRichTextEditor {
                     "return": "Promise<string>"
                 },
                 "docs": {
-                    "text": "Get editor content as plain text",
+                    "text": "Get editor content in plain text format",
                     "tags": [{
                             "name": "returns",
                             "text": "Plain text content of the editor"

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

@@ -372,7 +372,7 @@ export class MgInputSelect {
      */
     render() {
         const readonlyValue = this.getReadonlyValue();
-        return (h("mg-input", { key: '928c7d4ebccfe38ae86630d2cb8c06f07ca09a8a', 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) => {
+        return (h("mg-input", { key: 'e7857da9c724cb582217b944cb723308d7efedbe', 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

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

@@ -375,7 +375,7 @@ export class MgInputText {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'b6360c95530daf744ae5c3eb5cc41d6c81c3e35c', 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: 'cefd22e81ad535ff0ffd99d274c5eb616110ddd6', 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__input-group-container", style: {
@@ -549,7 +549,7 @@ export class MgInputText {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"key\" | \"list\" | \"copy\" | \"history\" | \"location\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
+                    "resolved": "\"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"download\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"history\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"key\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"link\" | \"list\" | \"loader\" | \"location\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"table\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
                     "references": {
                         "IconType": {
                             "location": "import",

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

@@ -284,7 +284,7 @@ export class MgInputTextarea {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'a43b8b1572249e31fb6ea5bd9244639698629218', 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__input-group-container" }, h("textarea", { class: {
+        return (h("mg-input", { key: 'dc646a42eee0c10394666218521ebfc1ab79a789', 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__input-group-container" }, h("textarea", { class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--width': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',

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

@@ -6,7 +6,7 @@ import { classDisabled, classReadonly } from "../mg-input/mg-input.conf";
  * @param option - radio option
  * @returns toggle option type is valid
  */
-const isOption = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
+const isOption = (option) => typeof option === 'object' && typeof option.title === 'string';
 /**
  * @slot item-1 - Left option toggle content
  * @slot item-2 - Right option toggle content
@@ -56,10 +56,6 @@ export class MgInputToggle {
          * Component classes
          */
         this.classCollection = new ClassList(['mg-c-input--toggle']);
-        /**
-         * Checked internal value
-         */
-        this.checked = false;
         /**
          * Set input error message
          * @param errorMessage - errorMessage override
@@ -73,10 +69,11 @@ export class MgInputToggle {
             }
         };
         /**
-         * Change checked value
+         * Handle switch button to update value
          */
-        this.toggleChecked = () => {
-            this.checked = !this.checked;
+        this.handleSwitchButton = () => {
+            const currentOptionIndex = this.getCurrentOptionIndex(this.value);
+            this.value = this.options[currentOptionIndex === 0 ? 1 : 0].value;
         };
         /**
          * Slots validation
@@ -114,24 +111,51 @@ export class MgInputToggle {
          * @param checked - checked item
          * @returns toggle value
          */
-        this.getCheckedItem = (checked) => {
-            var _a;
-            if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) === 2) {
-                return this.options[checked ? 1 : 0];
-            }
-            else {
-                return null;
-            }
+        this.getCurrentOptionIndex = (value) => {
+            return this.options.findIndex(option => toString(option.value) === toString(value)) === 1 ? 1 : 0;
+        };
+        /**
+         * Check if value is checked
+         * @param value - toggle value
+         * @returns truthy if value is checked
+         */
+        this.isChecked = (value) => {
+            return this.getCurrentOptionIndex(value) === 1;
         };
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    handleValue(newValue) {
-        // Swich to the right option
-        this.setChecked();
-        // Emit value-change event
-        this.valueChange.emit(newValue);
+    watchValue(newValue, oldValue) {
+        // A "true" attribute can be represented by an empty string
+        // We need to convert it to a boolean true value
+        if (newValue === '') {
+            this.value = true;
+            // Return early to prevent infinite loop
+            return;
+        }
+        // https://stenciljs.com/docs/properties
+        // According to the Stencil documentation, when a prop is declared as `any`, boolean values can be bound as boolean attributes.
+        // However, depending on the integration context (e.g., Vue.js), they may also be interpreted as string attributes.
+        // To avoid incorrect type interpretation when a boolean is received as a string,
+        // we normalize the value and convert it to a proper boolean before internal use.
+        else if (['true', 'false'].includes(newValue) && this.options.every(option => typeof option.value === 'boolean')) {
+            this.value = newValue === 'true';
+            // Return early to prevent infinite loop
+            return;
+        }
+        if (this.isChecked(newValue)) {
+            this.classCollection.add(this.classIsActive);
+        }
+        else {
+            this.classCollection.delete(this.classIsActive);
+        }
+        // when value is reassigned programmatically from previous `watchValue` call
+        // `oldValue` can be a string while `newValue` is boolean or vice versa
+        // so we need to compare them as strings to prevent infinite loop and unnecessary event emission
+        if (toString(newValue) !== toString(oldValue)) {
+            // Emit value-change event
+            this.valueChange.emit(newValue);
+        }
     }
-    validateItems(newValue) {
+    watchItems(newValue) {
         if (typeof newValue === 'object' && this.items.length !== 2) {
             throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${toString(newValue)}.`);
         }
@@ -144,7 +168,7 @@ export class MgInputToggle {
             this.options = newValue;
         }
         else {
-            throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${toString(newValue)}.`);
+            throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleOption. Passed value: ${toString(newValue)}.`);
         }
     }
     watchIsOnOff(newValue) {
@@ -177,15 +201,6 @@ export class MgInputToggle {
         else
             this.classCollection.delete(classDisabled);
     }
-    handleChecked(newValue) {
-        // style
-        if (newValue)
-            this.classCollection.add(this.classIsActive);
-        else
-            this.classCollection.delete(this.classIsActive);
-        // update value
-        this.value = this.getCheckedItem(newValue).value;
-    }
     /**
      * Set focus on input.
      */
@@ -220,7 +235,6 @@ export class MgInputToggle {
     async reset() {
         if (!this.readonly) {
             this.value = this.options[0].value;
-            this.setChecked();
             // Use `Promise` as requested for stencil method
             // Use `requestAnimationFrame` to ensure:
             // - DOM is fully updated before validation
@@ -235,28 +249,6 @@ export class MgInputToggle {
             });
         }
     }
-    /**
-     * set checked state
-     */
-    setChecked() {
-        const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);
-        if ([0, 1].includes(optionTrueValueIndex)) {
-            // has "value" props type is not a boolean, it is bind/render as an attributes/props
-            // true props will be represent by "true" string so we convert it has boolean
-            // true attribute will be represent by "" string so we convert it has boolean
-            // https://stenciljs.com/docs/properties
-            if (['', 'true'].includes(this.value) && this.options.find(option => option.value) !== undefined) {
-                this.value = true;
-            }
-            // when options are boolean values and ordered as [true,false] instead [false,true]
-            // we need to reversed the checked value logic
-            const selectedValue = this.value === this.options[optionTrueValueIndex].value;
-            this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;
-        }
-        else {
-            this.checked = this.value === this.options[1].value;
-        }
-    }
     /*************
      * Lifecycle *
      *************/
@@ -264,13 +256,9 @@ export class MgInputToggle {
      * Check if component props are well configured on init
      */
     componentWillLoad() {
-        // Check items format
-        this.validateItems(this.items);
-        // Check slots
+        this.watchItems(this.items);
         this.validateSlots();
-        // init checked value
-        this.setChecked();
-        // apply handler
+        this.watchValue(this.value);
         this.watchIsIcon(this.isIcon);
         this.watchIsOnOff(this.isOnOff);
         this.watchReadonly(this.readonly);
@@ -281,8 +269,8 @@ export class MgInputToggle {
      * @returns HTML Element
      */
     render() {
-        const checkedItem = this.getCheckedItem(this.checked);
-        return (h("mg-input", { key: '4d87ed13bbd3d3a54303c21001247e1251417326', 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 => {
+        const currentOption = this.options[this.getCurrentOptionIndex(this.value)];
+        return (h("mg-input", { key: '75a58e79ddd78a6a5656b6a3ef497087fbbb0638', 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 ? (currentOption && h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.isChecked(this.value).toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.handleSwitchButton, 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" }))))));
@@ -302,12 +290,18 @@ export class MgInputToggle {
     static get properties() {
         return {
             "value": {
-                "type": "any",
+                "type": "unknown",
                 "mutable": true,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "ToggleOption['value']",
+                    "resolved": "unknown",
+                    "references": {
+                        "ToggleOption": {
+                            "location": "import",
+                            "path": "../../../../types",
+                            "id": "src/types/index.ts::Option"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -316,21 +310,19 @@ export class MgInputToggle {
                     "text": "Component value"
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value"
+                "setter": false
             },
             "items": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string[] | ToggleValue[]",
-                    "resolved": "ToggleValue[] | string[]",
+                    "original": "string[] | ToggleOption[]",
+                    "resolved": "Option[] | string[]",
                     "references": {
-                        "ToggleValue": {
+                        "ToggleOption": {
                             "location": "import",
-                            "path": "./mg-input-toggle.conf",
-                            "id": "src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf.ts::ToggleValue"
+                            "path": "../../../../types",
+                            "id": "src/types/index.ts::Option"
                         }
                     }
                 },
@@ -592,8 +584,7 @@ export class MgInputToggle {
             "classCollection": {},
             "options": {},
             "errorMessage": {},
-            "valid": {},
-            "checked": {}
+            "valid": {}
         };
     }
     static get events() {
@@ -609,7 +600,7 @@ export class MgInputToggle {
                 },
                 "complexType": {
                     "original": "HTMLMgInputToggleElement['value']",
-                    "resolved": "any",
+                    "resolved": "unknown",
                     "references": {
                         "HTMLMgInputToggleElement": {
                             "location": "global",
@@ -707,10 +698,10 @@ export class MgInputToggle {
     static get watchers() {
         return [{
                 "propName": "value",
-                "methodName": "handleValue"
+                "methodName": "watchValue"
             }, {
                 "propName": "items",
-                "methodName": "validateItems"
+                "methodName": "watchItems"
             }, {
                 "propName": "isOnOff",
                 "methodName": "watchIsOnOff"
@@ -723,9 +714,6 @@ export class MgInputToggle {
             }, {
                 "propName": "disabled",
                 "methodName": "watchDisabled"
-            }, {
-                "propName": "checked",
-                "methodName": "handleChecked"
             }];
     }
 }

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

@@ -141,7 +141,7 @@ export class MgActionMore {
                     [`${this.classBase}__chevron--rotate`]: this.expanded === true,
                 } }, h("mg-icon", { icon: "chevron-down" })));
         }
-        return (h(Host, { key: 'd75e1a5326ea3a1414f8048858e5ee3fee51760e', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: 'b671a6c35cb3a9fa6eb7b2329f0f595e78b573b5', class: this.classBase }, h("mg-popover", { key: '38a38123d34ca868d0587123c2ab6b11550da8f0', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: '030b9360917b79edfc8df325d5ca5cfa08356c81', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: 'a47ca6b078ca160d1cbb13c964df3abede5f373c' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: 'ac38c705625cb5716a7e8aabd25d596db3d5adef', slot: "content" }, h("mg-menu", { key: 'cd382a65f69ba3c303a74d6b7444fcf0ccf9d1c5', direction: directions.VERTICAL, label: this.messages.label }, this.items.map(item => {
+        return (h(Host, { key: 'bef7d0e0c5a991f321ca930d65fa458873fc7564', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: '4e47d1513749cc1ac15ef8febd2fb914e362bbee', class: this.classBase }, h("mg-popover", { key: 'ab6dfc93422f03b49a78d2896196aa6901841aef', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: '921f17c4ede5f1783dc336429539b0b082902fdd', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: '19bf9e015cbd82d8dffc62269de735607ab4f2bb' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: '56a43a5adebd31264742c0ef8905ccb0bd8fb581', slot: "content" }, h("mg-menu", { key: '70520957ac07a3190ef753ee435996af96dbc5b5', direction: directions.VERTICAL, label: this.messages.label }, this.items.map(item => {
             var _a, _b;
             return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider", "full-width": true })) : (h("mg-menu-item", { key: item.label, status: item.status || Status.VISIBLE, target: item.target, href: item.href,
                 // eslint-disable-next-line react/jsx-no-bind

package/dist/collection/components/molecules/mg-alert/mg-alert.js

@@ -142,7 +142,7 @@ export class MgAlert {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-message", { key: '4b974a10812e527a2c481ec00f22324ab490a135', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: '9133a3cca56d67e75e8c3f018c52838c31e908f2' }), 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: '6085a45d00c4762bae88d98e89f44c20d5f9b6c4', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: '55491d1b41609883958680c14a2ddb8dd84a3bd4' }), 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" }))))));
     }
     static get is() { return "mg-alert"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-details/mg-details.js

@@ -53,7 +53,7 @@ export class MgDetails {
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: 'bbaac6909fa5f3fbd3236b2a8ace0f7c80b2580b', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '2ed8228b63403dd9b386bf3fa70c9094516b6f0e' }, h("slot", { key: '5461d77d2b2869b14737a5c7cfc40a1f9584ee03', name: "summary" }), h("span", { key: 'bb089365bdeaa7b934b97cff6f5f7c67587048e1', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'dc1a30338703ad4182d50f9953a903ae0f68ecb1', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'a32cbaf9e38b71540deeaa8980895c34a7288ecb', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'b9c2bc7d681da8ac8b4dec5ff25287bc68975fb6', class: "mg-c-details__details" }, h("slot", { key: '069f05b4c133ff13055681e0b05bb98744303137', name: "details" }))));
+        return (h("details", { key: '17840b16bee77489062320bd7a679d6e4765a6f6', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: 'be713c922be8c97cdfb803cd1a59a34de708fe5e' }, h("slot", { key: 'cebdbaee05189542496143208945ab1f685702ef', name: "summary" }), h("span", { key: '7a2ad4790c1a1b905e5fc65fc518c133139c0889', class: "mg-c-details__toggle" }, h("mg-icon", { key: '628862cb0c1768c44c07033f2148ed7979bdad2b', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'b2bb91aa70f91ea654d944d7f00c21d6ab0e3ebf', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '9432a42632e4c002d717a2851e372d6b40296c6f', class: "mg-c-details__details" }, h("slot", { key: '008041bac5a1c3bf5eb7a172537750e6fa38aabc', name: "details" }))));
     }
     static get is() { return "mg-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-fieldset/mg-fieldset.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, isValidString } from "@mgdis/core-ui-helpers/dist/utils";
-import { classReadonly } from "../inputs/mg-input/mg-input.conf";
+import { classReadonly, isMgInputFile } from "../inputs/mg-input/mg-input.conf";
 export class MgFieldset {
     constructor() {
         /**
@@ -44,7 +44,16 @@ export class MgFieldset {
             // Set inputs readonly or disabled based on form configuration
             // Othewise listen to events
             this.mgInputs.forEach(input => {
-                if (this.readonly) {
+                // manage special display case for mg-input-file
+                if (input.nodeName === 'MG-INPUT-FILE') {
+                    if (this.readonly) {
+                        input.setAttribute('hidden', '');
+                    }
+                    else {
+                        input.removeAttribute('hidden');
+                    }
+                }
+                if (this.readonly && !isMgInputFile(input)) {
                     input.readonly = true;
                 }
                 else if (this.disabled) {
@@ -124,7 +133,7 @@ export class MgFieldset {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'b8b7c203bb2ed22cc9344389af5a6ae8d85af6d5', label: this.legend, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: !this.legendHide, labelHeading: this.legendHeading, labelBorderDisplay: this.legendHeading && this.legendBorderDisplay, labelHide: this.legendHide, inputsOnBottom: this.legendHeading !== undefined, tooltip: this.tooltip, tooltipPosition: 'label', helpText: this.helpText, errorMessage: !this.valid && isValidString(this.errorMessage) ? this.errorMessage : undefined }, h("span", { key: 'c0e7480b14b0a8e136dd951bdce7275b65b59b48', class: "mg-c-input__input-group" }, h("slot", { key: '021e7b126cef9437e64622d8ef59219b09c06e9f' }))));
+        return (h("mg-input", { key: '31ccb9f783687845080fc7f184cc54b7343fab65', label: this.legend, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: !this.legendHide, labelHeading: this.legendHeading, labelBorderDisplay: this.legendHeading && this.legendBorderDisplay, labelHide: this.legendHide, inputsOnBottom: this.legendHeading !== undefined, tooltip: this.tooltip, tooltipPosition: 'label', helpText: this.helpText, errorMessage: !this.valid && isValidString(this.errorMessage) ? this.errorMessage : undefined }, h("span", { key: 'eedf1c66eaf88bee037c11b812844bb5a92175c1', class: "mg-c-input__input-group" }, h("slot", { key: 'a28f6759a63873ef4a228820b4310b42fcf1d3c7' }))));
     }
     static get is() { return "mg-fieldset"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-form/mg-form.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { createID, ClassList, toString, isValideID } from "@mgdis/core-ui-helpers/dist/utils";
 import { initLocales } from "../../../locales";
+import { isMgInputFile } from "../inputs/mg-input/mg-input.conf";
 import { requiredMessageStatus, roles } from "./mg-form.conf";
 /**
  * @slot - Form content
@@ -111,7 +112,16 @@ export class MgForm {
                 if (this.labelOnTop) {
                     input.labelOnTop = true;
                 }
-                if (this.readonly) {
+                // manage special display case for mg-input-file
+                if (input.nodeName === 'MG-INPUT-FILE') {
+                    if (this.readonly) {
+                        input.setAttribute('hidden', '');
+                    }
+                    else {
+                        input.removeAttribute('hidden');
+                    }
+                }
+                if (this.readonly && !isMgInputFile(input)) {
                     input.readonly = true;
                 }
                 else if (this.disabled) {
@@ -232,7 +242,7 @@ export class MgForm {
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: '8b698b2a33af00e36691abab5adff5488b736218', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '2e1fb5c4030ecb99d1f18c57d5c3fe238db4d12e', innerHTML: this.requiredMessageText }), h("slot", { key: '568fb8ac9ab0e3521899c05472592ebd15cc91fa' }), !this.readonly && !this.disabled && h("slot", { key: 'd4f38320de58f3b1d491083a34d1b5366d22b935', name: "actions" })));
+        return (h("form", { key: 'b2e3d218d978f1194b2c461ab75cae7d491bc2c3', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: 'dd6db1a740f5fe525c3b652c2128aba6185970b8', innerHTML: this.requiredMessageText }), h("slot", { key: '5221d0c8fa5e30749c82d01490b402d9e46a63cd' }), !this.readonly && !this.disabled && h("slot", { key: 'fb2595b8c5df85b9cefac0f43e54e463d529fff4', name: "actions" })));
     }
     static get is() { return "mg-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,7 +81,7 @@ export class MgIllustratedMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'c9d8c8bfd2792b1cf5e78ab9d168d597b20e9a1e', class: this.classCollection.join() }, h("div", { key: 'cc8fa03147b9e59e6e8e015be9ed2b8dddd92ded', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '83a4ec2223c4e74511beb7c0abfa10e77cee425d', name: "illustration" })), h("div", { key: 'dbb4d13ca5324cab889fa2acc9b9b22522d7a8ec', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '9e74d84becf29539ec9c37e8ad1e317714f3c86c', name: "title" }), h("slot", { key: 'ae97d25c19b76ca092560d2555ebd6a87f542ffe', name: "details" }))));
+        return (h("div", { key: 'f2bcf91e8d639736514a55a73d0182339eda1455', class: this.classCollection.join() }, h("div", { key: '46f862fc2a3daf2f217c55feebd41abb76252de2', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: 'e2a0e9752a6739a684fd2668a8e8f0f792a0c38b', name: "illustration" })), h("div", { key: 'b037dd43ae59c07ca122b68b56dc3230a7aa94f2', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '3a99f08cfb68bd51fbd015d213bb462acbfdda1a', name: "title" }), h("slot", { key: '14490ee1e7f9470f433c6249d502bd0a4dd77ca3', name: "details" }))));
     }
     static get is() { return "mg-illustrated-message"; }
     static get encapsulation() { return "shadow"; }