@mgdis/mg-components 6.24.0 → 6.26.0

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

@@ -5,9 +5,33 @@ import { classReadonly, classDisabled } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 import { Sanitizer } from "@mgdis/sanitize-html";
 import { defineEditor } from "./editor";
-import { DEFAULT_MODULES } from "./mg-input-rich-text-editor.conf";
+import { icons } from "../../../../assets/icons";
+import { DEFAULT_MODULES, } from "./mg-input-rich-text-editor.conf";
+/**
+ * RichTextEditorCustomAction type guard
+ * @param action - customActions array entry
+ * @returns true if action matches RichTextEditorCustomAction shape
+ */
+const isValidCustomAction = (action) => {
+    const candidate = action;
+    return (typeof candidate === 'object' &&
+        candidate !== null &&
+        isValidString(candidate.name) &&
+        isValidString(candidate.label) &&
+        isValidString(candidate.icon));
+};
+/**
+ * Check if an array contains duplicate values
+ * @param values - values to check
+ * @returns true if at least one value appears more than once
+ */
+const hasDuplicates = (values) => new Set(values).size !== values.length;
 export class MgInputRichTextEditor {
     constructor() {
+        // Snapshot of the selection captured when a custom action is triggered.
+        // Lets consumers read/replace the selection after an async operation (e.g. a network request),
+        // even though focus has moved to the toolbar button or their own UI meanwhile.
+        this.savedSelection = null;
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         // Custom error message
@@ -134,6 +158,44 @@ export class MgInputRichTextEditor {
             if (this.hasDisplayedError) {
                 this.setErrorMessage();
             }
+            // Content changed: any previously snapshotted selection range is now stale
+            this.savedSelection = null;
+        };
+        /**
+         * Capture the current selection (plain text, sanitized HTML and a cloned range).
+         * @returns Selection snapshot
+         */
+        this.captureSelection = () => {
+            const selection = this.editor.s;
+            return {
+                text: selection.range.toString(),
+                html: this.sanitizer.sanitize(selection.html),
+                range: selection.range.cloneRange(),
+            };
+        };
+        /**
+         * Handle a custom action button click.
+         * Snapshots the current selection then emits the `custom-action` event with the action name.
+         * @param name - the triggered action name
+         */
+        this.handleCustomAction = (name) => {
+            if (this.readonly || this.disabled)
+                return;
+            this.savedSelection = this.captureSelection();
+            this.customAction.emit(name);
+        };
+        /**
+         * Handle Jodit `changeSelection` event: emit the `selection-change` event.
+         */
+        this.handleSelectionChange = () => {
+            if (this.editor === undefined || this.readonly || this.disabled)
+                return;
+            const selection = this.editor.s;
+            this.selectionChange.emit({
+                text: selection.range.toString(),
+                html: this.sanitizer.sanitize(selection.html),
+                isCollapsed: selection.isCollapsed(),
+            });
         };
         /**
          * Initialize sanitizer with current sanitizerOptions
@@ -186,10 +248,29 @@ export class MgInputRichTextEditor {
         }
     }
     watchModules(newValue) {
-        if (newValue !== undefined && (!Array.isArray(newValue) || newValue.length === 0 || !newValue.every(isValidString))) {
+        if (newValue !== undefined &&
+            (!Array.isArray(newValue) || newValue.length === 0 || !newValue.every(isValidString))) {
             throw new Error(`<mg-input-rich-text-editor> prop "modules" must be a non-empty array of strings. Passed value: "${toString(newValue)}".`);
         }
     }
+    watchCustomActions(newValue) {
+        if (newValue === undefined)
+            return;
+        if (!Array.isArray(newValue) ||
+            !newValue.every(isValidCustomAction) ||
+            hasDuplicates(newValue.map((action) => action.name))) {
+            throw new Error(`<mg-input-rich-text-editor> prop "customActions" must be an array of objects with non-empty and unique "name", non-empty "label" and non-empty "icon". Passed value: "${toString(newValue)}".`);
+        }
+        // Restrict icons to the design system icon set (mg-icon names) for consistent theming and maintenance
+        const actionWithInvalidIcon = newValue.find((action) => !Object.hasOwn(icons, action.icon));
+        if (actionWithInvalidIcon !== undefined) {
+            throw new Error(`<mg-input-rich-text-editor> prop "customActions" icon must be a valid mg-icon name. Passed value: "${toString(actionWithInvalidIcon.icon)}".`);
+        }
+        // Two custom actions sharing the same icon would be visually indistinguishable in the toolbar
+        if (hasDuplicates(newValue.map((action) => action.icon))) {
+            throw new Error(`<mg-input-rich-text-editor> prop "customActions" icon must be unique across actions. Passed value: "${toString(newValue)}".`);
+        }
+    }
     watchSanitizerOptions(newValue) {
         if (newValue !== undefined && (typeof newValue !== 'object' || newValue === null || Array.isArray(newValue))) {
             throw new Error(`<mg-input-rich-text-editor> prop "sanitizerOptions" must be an object. Passed value: "${toString(newValue)}".`);
@@ -219,6 +300,46 @@ export class MgInputRichTextEditor {
     async getEditorText() {
         return this.editor.editor.textContent.trim();
     }
+    /**
+     * Get the current text selection as plain text.
+     * When a custom action is in progress, returns the selection snapshotted when the action was triggered.
+     * @returns Plain text of the selection (empty string if nothing is selected)
+     */
+    async getSelectedText() {
+        var _a, _b;
+        if (this.savedSelection !== null)
+            return this.savedSelection.text;
+        return (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.s.range.toString()) !== null && _b !== void 0 ? _b : '';
+    }
+    /**
+     * Get the current text selection as HTML.
+     * When a custom action is in progress, returns the selection snapshotted when the action was triggered.
+     * @returns Sanitized HTML of the selection (empty string if nothing is selected)
+     */
+    async getSelectedHTML() {
+        var _a, _b;
+        if (this.savedSelection !== null)
+            return this.savedSelection.html;
+        return this.sanitizer.sanitize((_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.s.html) !== null && _b !== void 0 ? _b : '');
+    }
+    /**
+     * Replace the current text selection with the given content.
+     * When a custom action is in progress, the selection snapshotted when the action was triggered is
+     * restored first, so the replacement targets the right range even after focus moved away (e.g. during
+     * an async network request). No-op when the editor is readonly or disabled.
+     * @param content - HTML (or plain text) content to insert in place of the selection. It is sanitized.
+     */
+    async replaceSelection(content) {
+        if (this.readonly || this.disabled || this.editor === undefined)
+            return;
+        const sanitized = this.sanitizer.sanitize(content);
+        // Restore the snapshotted selection (survives focus changes during async work)
+        if (this.savedSelection !== null) {
+            this.editor.s.selectRange(this.savedSelection.range);
+            this.savedSelection = null;
+        }
+        this.editor.s.insertHTML(sanitized);
+    }
     /**
      * Display input error if it exists.
      */
@@ -229,7 +350,7 @@ export class MgInputRichTextEditor {
         // - Async operations are completed
         // - No timing issues with Stencil's render cycle
         // - Keep everything in sync both inside and outside the component
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             requestAnimationFrame(() => {
                 this.checkValidity();
                 this.setErrorMessage();
@@ -277,7 +398,7 @@ export class MgInputRichTextEditor {
             // - Async operations are completed
             // - No timing issues with Stencil's render cycle
             // - Keep everything in sync both inside and outside the component
-            return new Promise(resolve => {
+            return new Promise((resolve) => {
                 requestAnimationFrame(() => {
                     // unlock validity check by reseting customErrorMessage
                     this.customErrorMessage = { lock: false };
@@ -321,6 +442,7 @@ export class MgInputRichTextEditor {
         this.watchReadonly(this.readonly);
         this.watchDisabled(this.disabled);
         this.watchModules(this.modules);
+        this.watchCustomActions(this.customActions);
         this.watchSanitizerOptions(this.sanitizerOptions);
         // Initialize sanitizer with optional configuration
         this.initializeSanitizer();
@@ -339,6 +461,7 @@ export class MgInputRichTextEditor {
         if (!this.readonly) {
             this.editor = defineEditor(this.element, this.editorElement, {
                 modules: (_a = this.modules) !== null && _a !== void 0 ? _a : DEFAULT_MODULES,
+                customActions: this.customActions,
                 readOnly: this.readonly || this.disabled,
                 disabled: this.disabled,
                 placeholder: this.placeholder,
@@ -347,6 +470,8 @@ export class MgInputRichTextEditor {
                 handleTextChange: this.handleTextChange,
                 handleBlur: this.handleBlur,
                 handleFocus: this.handleFocus,
+                handleCustomAction: this.handleCustomAction,
+                handleSelectionChange: this.handleSelectionChange,
             });
             // Track the initial title element set up by defineEditor
             this.currentTitleElement = this.element.shadowRoot.querySelector('mg-input-title');
@@ -377,7 +502,7 @@ export class MgInputRichTextEditor {
      * @returns HTML mg-input Element
      */
     render() {
-        return (h("mg-input", { key: '0236e3c0a380087557c381077ad382029a6b7ec7', 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", { id: this.identifier, class: "mg-c-input__wrapper" }, h("textarea", { name: this.name, ref: (el) => {
+        return (h("mg-input", { key: 'c42ba3eb1eafa645fa0774d65090c7819168ffd7', 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", { id: this.identifier, class: "mg-c-input__wrapper" }, h("textarea", { name: this.name, ref: (el) => {
                 if (el !== null)
                     this.editorElement = el;
             } })))));
@@ -386,12 +511,12 @@ export class MgInputRichTextEditor {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["./editor/custom-properties.scss", "../../../../../node_modules/jodit/es2021/jodit.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
+            "$": ["../../../../assets/jodit/jodit.css", "./editor/custom-properties.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["editor/custom-properties.css", "../../../../../node_modules/jodit/es2021/jodit.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
+            "$": ["../../../../assets/jodit/jodit.css", "editor/custom-properties.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
         };
     }
     static get properties() {
@@ -742,6 +867,30 @@ export class MgInputRichTextEditor {
                 "reflect": false,
                 "attribute": "modules"
             },
+            "customActions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RichTextEditorCustomAction[]",
+                    "resolved": "RichTextEditorCustomAction[]",
+                    "references": {
+                        "RichTextEditorCustomAction": {
+                            "location": "import",
+                            "path": "./mg-input-rich-text-editor.conf",
+                            "id": "src/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.conf.ts::RichTextEditorCustomAction",
+                            "referenceLocation": "RichTextEditorCustomAction"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Inject custom action buttons in the toolbar (e.g. to insert merge fields or apply custom formatting).\nButtons are appended after the built-in `modules`.\nEach action is an object `{ name, label, icon }`:\n- `name`: unique identifier, returned in the `custom-action` event detail on click.\n- `label`: accessible label used as the button tooltip and aria-label.\n- `icon`: design system `mg-icon` name rendered inside the button, unique across actions.\nThe action behaviour is the consumer's responsibility: listen to `custom-action`,\nthen read/write the selection with `getSelectedText()` / `getSelectedHTML()` / `replaceSelection()`."
+                },
+                "getter": false,
+                "setter": false
+            },
             "sanitizerOptions": {
                 "type": "unknown",
                 "mutable": false,
@@ -821,7 +970,7 @@ export class MgInputRichTextEditor {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when checking validity"
+                    "text": "Emitted event when checking validity"
                 },
                 "complexType": {
                     "original": "boolean",
@@ -836,13 +985,50 @@ export class MgInputRichTextEditor {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when value change"
+                    "text": "Emitted event when value change"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "customAction",
+                "name": "custom-action",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted event when a custom action button is clicked.\nThe detail contains the action `name`."
                 },
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "selectionChange",
+                "name": "selection-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted event when the text selection changes.\nThe detail contains the selected `text`, sanitized `html` and whether the selection `isCollapsed`."
+                },
+                "complexType": {
+                    "original": "SelectionChange",
+                    "resolved": "{ text: string; html: string; isCollapsed: boolean; }",
+                    "references": {
+                        "SelectionChange": {
+                            "location": "import",
+                            "path": "./mg-input-rich-text-editor.conf",
+                            "id": "src/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.conf.ts::SelectionChange",
+                            "referenceLocation": "SelectionChange"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -904,6 +1090,70 @@ export class MgInputRichTextEditor {
                         }]
                 }
             },
+            "getSelectedText": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Get the current text selection as plain text.\nWhen a custom action is in progress, returns the selection snapshotted when the action was triggered.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Plain text of the selection (empty string if nothing is selected)"
+                        }]
+                }
+            },
+            "getSelectedHTML": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Get the current text selection as HTML.\nWhen a custom action is in progress, returns the selection snapshotted when the action was triggered.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Sanitized HTML of the selection (empty string if nothing is selected)"
+                        }]
+                }
+            },
+            "replaceSelection": {
+                "complexType": {
+                    "signature": "(content: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "content",
+                            "type": "string",
+                            "docs": "- HTML (or plain text) content to insert in place of the selection. It is sanitized."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Replace the current text selection with the given content.\nWhen a custom action is in progress, the selection snapshotted when the action was triggered is\nrestored first, so the replacement targets the right range even after focus moved away (e.g. during\nan async network request). No-op when the editor is readonly or disabled.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "content - HTML (or plain text) content to insert in place of the selection. It is sanitized."
+                        }]
+                }
+            },
             "displayError": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -1008,6 +1258,9 @@ export class MgInputRichTextEditor {
             }, {
                 "propName": "modules",
                 "methodName": "watchModules"
+            }, {
+                "propName": "customActions",
+                "methodName": "watchCustomActions"
             }, {
                 "propName": "sanitizerOptions",
                 "methodName": "watchSanitizerOptions"

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { ClassList, allItemsAreString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
-import { classReadonly, classDisabled, widths } from "../mg-input/mg-input.conf";
+import { classReadonly, classDisabled, widths, } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 /**
  * Check if item is a well configured option
@@ -14,13 +14,15 @@ const isOption = (option) => typeof option === 'object' && typeof option.title =
  * @param items - select option
  * @returns select option array type is valid
  */
-const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption(item));
+const allItemsAreOptions = (items) => Array.isArray(items) && items.every((item) => isOption(item));
 /**
  * Check if item is a well configured optgroup
  * @param optgroup - select option
  * @returns select optgroup type is valid
  */
-const isOptGroup = (optgroup) => typeof optgroup === 'object' && typeof optgroup.group === 'string' && allItemsAreOptions(optgroup.options);
+const isOptGroup = (optgroup) => typeof optgroup === 'object' &&
+    typeof optgroup.group === 'string' &&
+    allItemsAreOptions(optgroup.options);
 /**
  * Ensure options can be unambiguously differentiated by their title
  * Two options can share the same title only when they belong to different groups
@@ -49,7 +51,7 @@ const validateUniqueTitles = (items) => {
 const groupOptions = (acc, { group, title, value, disabled }) => {
     if (group !== undefined) {
         // Check if group is already created
-        const optGroup = acc.find(grp => grp.group === group);
+        const optGroup = acc.find((grp) => grp.group === group);
         // Add to group
         if (optGroup !== undefined) {
             optGroup.options.push({ title, value, disabled });
@@ -117,10 +119,10 @@ export class MgInputSelect {
         this.getReadonlyValue = () => {
             var _a;
             if (allItemsAreString(this.items) && typeof this.value === 'string') {
-                return this.items.find(item => item === this.value);
+                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;
+                return (_a = this.items.find((item) => item.value === this.value)) === null || _a === void 0 ? void 0 : _a.title;
             }
             else {
                 return null;
@@ -131,7 +133,7 @@ export class MgInputSelect {
          * The select value is the position of an option in this list, so it uniquely identifies an option even when several share the same title
          * @returns flat select options
          */
-        this.getOptions = () => this.options.flatMap(option => (isOptGroup(option) ? option.options : [option]));
+        this.getOptions = () => this.options.flatMap((option) => (isOptGroup(option) ? option.options : [option]));
         /**
          * Get the option matching the current select value
          * @returns matching option or undefined
@@ -145,7 +147,7 @@ export class MgInputSelect {
             // The select value is normally the render index of the selected option
             const optionByIndex = options[Number(this.input.value)];
             // Fallback for an unknown value injected programmatically (stored as a disabled option keyed by its own value)
-            return optionByIndex !== null && optionByIndex !== void 0 ? optionByIndex : options.find(option => option.value === this.input.value);
+            return optionByIndex !== null && optionByIndex !== void 0 ? optionByIndex : options.find((option) => option.value === this.input.value);
         };
         /**
          * Handle input event
@@ -230,18 +232,18 @@ export class MgInputSelect {
         }
         // String array
         else if (allItemsAreString(newValue)) {
-            validateUniqueTitles(newValue.map(item => ({ title: item })));
+            validateUniqueTitles(newValue.map((item) => ({ title: item })));
             if (typeof this.value === 'string') {
                 this.valueExist = newValue.includes(this.value);
             }
-            this.options = newValue.map(item => ({ title: item, value: item }));
+            this.options = newValue.map((item) => ({ title: item, value: item }));
         }
         // Object array
         else if (allItemsAreOptions(newValue)) {
             validateUniqueTitles(newValue);
-            this.valueExist = newValue.map(item => item.value).includes(this.value);
+            this.valueExist = newValue.map((item) => item.value).includes(this.value);
             // Grouped object options
-            if (newValue.some(item => Boolean(item.group))) {
+            if (newValue.some((item) => Boolean(item.group))) {
                 this.options = newValue.reduce(groupOptions, []);
             }
             // Standart object options
@@ -277,7 +279,7 @@ export class MgInputSelect {
     }
     watchMgWidth(newValue) {
         // reset width class
-        widths.forEach(width => {
+        widths.forEach((width) => {
             this.classCollection.delete(`mg-c-input--width-${width}`);
         });
         // apply new width
@@ -301,7 +303,7 @@ export class MgInputSelect {
         // - Async operations are completed
         // - No timing issues with Stencil's render cycle
         // - Keep everything in sync both inside and outside the component
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             requestAnimationFrame(() => {
                 this.checkValidity();
                 this.setErrorMessage();
@@ -348,7 +350,7 @@ export class MgInputSelect {
             // - Async operations are completed
             // - No timing issues with Stencil's render cycle
             // - Keep everything in sync both inside and outside the component
-            return new Promise(resolve => {
+            return new Promise((resolve) => {
                 requestAnimationFrame(() => {
                     // unlock validity check by reseting customErrorMessage
                     this.customErrorMessage = { lock: false };
@@ -411,11 +413,11 @@ export class MgInputSelect {
         const readonlyValue = this.getReadonlyValue();
         // Running index shared across groups, so each option gets a unique value matching its position in getOptions()
         let optionIndex = 0;
-        return (h("mg-input", { key: '9e51eff6ef7158aa1786a893985e4d1d202e94ed', 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: 'aab8c17ced01c0afbec9114f280ee2b7fa73cdfc', 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
-        h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (h("optgroup", { label: option.group, key: option.group }, option.options.map(groupedOption => this.renderOption(groupedOption, optionIndex++)))) : (isOption(option) && this.renderOption(option, optionIndex++)))))));
+        h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map((option) => isOptGroup(option) ? (h("optgroup", { label: option.group, key: option.group }, option.options.map((groupedOption) => this.renderOption(groupedOption, optionIndex++)))) : (isOption(option) && this.renderOption(option, optionIndex++)))))));
     }
     static get is() { return "mg-input-select"; }
     static get encapsulation() { return "shadow"; }
@@ -839,7 +841,7 @@ export class MgInputSelect {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when value change"
+                    "text": "Emitted event when value change"
                 },
                 "complexType": {
                     "original": "HTMLMgInputCheckboxElement['value']",
@@ -859,7 +861,7 @@ export class MgInputSelect {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when checking validity"
+                    "text": "Emitted event when checking validity"
                 },
                 "complexType": {
                     "original": "HTMLMgInputCheckboxElement['valid']",

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

@@ -2,14 +2,16 @@ import { h } from "@stencil/core";
 import { ClassList, allItemsAreString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { helpTextTypes, textTypes } from "./mg-input-text.conf";
-import { widths, classReadonly, classDisabled, classDisplayCharacterLeft } from "../mg-input/mg-input.conf";
+import { widths, classReadonly, classDisabled, classDisplayCharacterLeft, } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 /**
  * Check if object is an option
  * @param option - object to validate
  * @returns true id object is an option
  */
-const isOption = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
+const isOption = (option) => typeof option === 'object' &&
+    typeof option.title === 'string' &&
+    option.value !== undefined;
 /**
  * Check if datalist options are well structured.
  * @param options - Datalist options to check.
@@ -86,7 +88,8 @@ export class MgInputText {
          */
         this.validatePattern = () => {
             if ((this.pattern !== undefined || this.patternErrorMessage !== undefined) && // At least one is defined
-                (!isValidString(this.pattern) || (!helpTextTypes.includes(this.type) && !isValidString(this.patternErrorMessage))) // Both must be defined
+                (!isValidString(this.pattern) ||
+                    (!helpTextTypes.includes(this.type) && !isValidString(this.patternErrorMessage))) // Both must be defined
             ) {
                 throw new Error(`<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${this.pattern}'" and "patternErrorMessage='${this.patternErrorMessage}'".`);
             }
@@ -159,7 +162,7 @@ export class MgInputText {
                     this.slotContent = slotAppendInput[0].textContent;
                 }
             }
-            else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
+            else if (slotAppendInput.filter((slot) => slot.nodeName === 'MG-BUTTON').length > 1) {
                 this.classCollection.add(this.classIsInputGroupAppend);
                 this.classCollection.add(this.classHasButtonsGroupAppend);
             }
@@ -180,7 +183,7 @@ export class MgInputText {
     handleValue(newValue) {
         var _a, _b;
         if ((_a = this.datalistoptions) === null || _a === void 0 ? void 0 : _a.every(isOption)) {
-            this.valueChange.emit(((_b = this.datalistoptions.find(option => option.title === newValue)) === null || _b === void 0 ? void 0 : _b.value) || newValue);
+            this.valueChange.emit(((_b = this.datalistoptions.find((option) => option.title === newValue)) === null || _b === void 0 ? void 0 : _b.value) || newValue);
         }
         else {
             this.valueChange.emit(newValue);
@@ -228,7 +231,7 @@ export class MgInputText {
     }
     watchMgWidth(newValue) {
         // reset width class
-        widths.forEach(width => {
+        widths.forEach((width) => {
             this.classCollection.delete(`mg-c-input--width-${width}`);
         });
         // apply new width
@@ -268,7 +271,7 @@ export class MgInputText {
         // - Async operations are completed
         // - No timing issues with Stencil's render cycle
         // - Keep everything in sync both inside and outside the component
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             requestAnimationFrame(() => {
                 this.checkValidity();
                 this.setErrorMessage();
@@ -315,7 +318,7 @@ export class MgInputText {
             // - Async operations are completed
             // - No timing issues with Stencil's render cycle
             // - Keep everything in sync both inside and outside the component
-            return new Promise(resolve => {
+            return new Promise((resolve) => {
                 requestAnimationFrame(() => {
                     // unlock validity check by reseting customErrorMessage
                     this.customErrorMessage = { lock: false };
@@ -377,15 +380,17 @@ export class MgInputText {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '5758548bc9e5b1319e5d2f4832339d2f95d9d436', 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: '3454b5f94af7b47a2c94b1416f59f840552ef70a', 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: {
-                        '--mg-c-character-left-message-length': (!this.characterLeftHide ? this.maxlength.toString().length * 2 + 1 : 0).toString(),
+                        '--mg-c-character-left-message-length': (!this.characterLeftHide
+                            ? this.maxlength.toString().length * 2 + 1
+                            : 0).toString(),
                     } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type === 'emails' ? 'email' : this.type, multiple: this.type === 'emails', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                         if (el !== null)
                             this.input = el;
-                    } }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (h("option", { value: isOption(option) ? option.title : option, key: option }))))), !this.characterLeftHide && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))),
+                    } }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map((option) => (h("option", { value: isOption(option) ? option.title : option, key: option }))))), !this.characterLeftHide && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))),
                 h("slot", { key: "slot", name: "append-input" }),
             ]));
     }
@@ -901,7 +906,7 @@ export class MgInputText {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when value change"
+                    "text": "Emitted event when value change"
                 },
                 "complexType": {
                     "original": "HTMLMgInputTextElement['value']",
@@ -921,7 +926,7 @@ export class MgInputText {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when checking validity"
+                    "text": "Emitted event when checking validity"
                 },
                 "complexType": {
                     "original": "HTMLMgInputTextElement['valid']",