@mgdis/mg-components 6.21.0 → 6.22.1

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

@@ -2,17 +2,25 @@ import { h } from "@stencil/core";
 import { ClassList, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
 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";
 export class MgInputRichTextEditor {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // Custom error message
         this.customErrorMessage = { lock: false };
         /**
          * Define the value of the editor
          * Can be either HTML string or plain text
          */
         this.value = '';
+        /**
+         * Input name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
         /**
          * Define if label is displayed on top
          */
@@ -22,7 +30,8 @@ export class MgInputRichTextEditor {
          */
         this.labelHide = false;
         /**
-         * Define the number of visible text lines for the control
+         * Define the number of visible text lines for the editor.
+         * Impacts the editor height. Content can grow beyond this minimum.
          */
         this.rows = 5;
         /**
@@ -50,19 +59,19 @@ export class MgInputRichTextEditor {
          * @returns truthy is value is invalid
          */
         this.isEmpty = () => {
-            const textContent = this.getTextContent();
+            const textContent = this.editor.editor.textContent.trim();
             return !(isValidString(textContent) && textContent !== '\n');
         };
-        /**
-         * Extract the text without HTML tags from value
-         * @returns text content
-         */
-        this.getTextContent = () => this.value.replace(/<[^>]*>/g, '').trim();
         /**
          * Get pattern validity
          * @returns is pattern valid
          */
-        this.getPatternValidity = () => this.pattern === undefined || new RegExp(`^${this.pattern}$`, 'u').test(this.getTextContent());
+        this.getPatternValidity = () => {
+            if (this.pattern === undefined)
+                return true;
+            const textContent = this.editor.editor.textContent.trim();
+            return new RegExp(`^${this.pattern}$`, 'u').test(textContent);
+        };
         /**
          * Check if input is valid
          */
@@ -115,17 +124,22 @@ export class MgInputRichTextEditor {
          * Handle `text-change` event
          */
         this.handleTextChange = () => {
-            // Get HTML content
-            const htmlContent = this.editor.getSemanticHTML();
-            this.value = htmlContent;
-            // Emit the HTML content for form compatibility
-            this.valueChange.emit(htmlContent);
+            // Get HTML content and sanitize before storing and emitting
+            this.value = this.sanitizer.sanitize(this.editor.value);
+            // Emit the sanitized HTML content for form compatibility
+            this.valueChange.emit(this.value);
             // Check validity but do not display the error message if the error message is already displayed
             this.checkValidity();
             if (this.hasDisplayedError) {
                 this.setErrorMessage();
             }
         };
+        /**
+         * Initialize sanitizer with current sanitizerOptions
+         */
+        this.initializeSanitizer = () => {
+            this.sanitizer = new Sanitizer(this.sanitizerOptions);
+        };
     }
     watchReadonly(newValue) {
         if (newValue)
@@ -134,14 +148,26 @@ export class MgInputRichTextEditor {
             this.classCollection.delete(classReadonly);
     }
     watchDisabled(newValue) {
-        var _a, _b;
+        var _a, _b, _c;
         if (newValue) {
             this.classCollection.add(classDisabled);
-            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.disable();
+            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.setReadOnly(true);
         }
         else {
             this.classCollection.delete(classDisabled);
-            (_b = this.editor) === null || _b === void 0 ? void 0 : _b.enable();
+            (_b = this.editor) === null || _b === void 0 ? void 0 : _b.setReadOnly(false);
+        }
+        // Propagate aria-disabled and tabIndex to the WYSIWYG element
+        const wysiwygEl = (_c = this.editor) === null || _c === void 0 ? void 0 : _c.editor;
+        if (wysiwygEl !== undefined) {
+            if (newValue) {
+                wysiwygEl.setAttribute('aria-disabled', 'true');
+            }
+            else {
+                wysiwygEl.removeAttribute('aria-disabled');
+            }
+            // tabIndex -1 when disabled to exclude from Tab navigation
+            wysiwygEl.tabIndex = newValue ? -1 : 0;
         }
     }
     handleValidityChange() {
@@ -158,6 +184,19 @@ export class MgInputRichTextEditor {
             throw new Error(`<mg-input-rich-text-editor> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${toString(this.pattern)}'" and "patternErrorMessage='${toString(this.patternErrorMessage)}'".`);
         }
     }
+    watchModules(newValue) {
+        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)}".`);
+        }
+    }
+    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)}".`);
+        }
+        if (this.sanitizer !== undefined) {
+            this.initializeSanitizer();
+        }
+    }
     /**
      * Set focus on input.
      */
@@ -166,26 +205,18 @@ export class MgInputRichTextEditor {
         (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
     }
     /**
-     * Get editor content in HTML format
-     * @returns HTML content of the editor
+     * Get editor content as HTML
+     * @returns HTML content of the editor (sanitized)
      */
-    getEditorHTML() {
-        return new Promise(resolve => {
-            requestAnimationFrame(() => {
-                resolve(this.editor.getSemanticHTML());
-            });
-        });
+    async getEditorHTML() {
+        return this.sanitizer.sanitize(this.editor.value);
     }
     /**
      * Get editor content in plain text format
      * @returns Plain text content of the editor
      */
     async getEditorText() {
-        return new Promise(resolve => {
-            requestAnimationFrame(() => {
-                resolve(this.editor.getText());
-            });
-        });
+        return this.editor.editor.textContent.trim();
     }
     /**
      * Display input error if it exists.
@@ -238,7 +269,7 @@ export class MgInputRichTextEditor {
     async reset() {
         if (!this.readonly) {
             this.value = '';
-            this.editor.setText('');
+            this.editor.value = '';
             // Use `Promise` as requested for stencil method
             // Use `requestAnimationFrame` to ensure:
             // - DOM is fully updated before validation
@@ -281,13 +312,16 @@ export class MgInputRichTextEditor {
     componentWillLoad() {
         // Get locales
         this.messages = initLocales(this.element).messages;
-        this.element.style.setProperty('--mg-c-input-rich-text-editor-rows', this.rows.toString());
         // Validate
         this.validatePattern(this.pattern);
         this.validatePattern(this.patternErrorMessage);
         // Watch
         this.watchReadonly(this.readonly);
         this.watchDisabled(this.disabled);
+        this.watchModules(this.modules);
+        this.watchSanitizerOptions(this.sanitizerOptions);
+        // Initialize sanitizer with optional configuration
+        this.initializeSanitizer();
         // Check validity when component is ready
         // return a promise to process action only in the FIRST render().
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -296,20 +330,44 @@ export class MgInputRichTextEditor {
         }, 0);
     }
     /**
-     * add listeners and render editor element
+     * Add listeners and render editor element
      */
     componentDidLoad() {
+        var _a;
         if (!this.readonly) {
-            this.editor = defineEditor(this.wrapperElement, {
-                theme: 'snow',
-                modules: this.modules,
+            this.editor = defineEditor(this.element, this.editorElement, {
+                modules: (_a = this.modules) !== null && _a !== void 0 ? _a : DEFAULT_MODULES,
                 readOnly: this.readonly || this.disabled,
+                disabled: this.disabled,
                 placeholder: this.placeholder,
-                value: this.value,
+                value: this.sanitizer.sanitize(this.value),
+                rows: this.rows,
                 handleTextChange: this.handleTextChange,
                 handleBlur: this.handleBlur,
                 handleFocus: this.handleFocus,
             });
+            // Track the initial title element set up by defineEditor
+            this.currentTitleElement = this.element.shadowRoot.querySelector('mg-input-title');
+        }
+    }
+    /**
+     * Re-apply accessibility attributes after re-renders.
+     * When state changes (disabled, readonly, etc.) trigger a re-render,
+     * mg-input's renderLabel() may destroy and recreate mg-input-title,
+     * which loses the id and click handler needed for aria-labelledby.
+     */
+    componentDidRender() {
+        if (this.editor !== undefined && !this.readonly) {
+            const titleElement = this.element.shadowRoot.querySelector('mg-input-title');
+            if (titleElement !== null && titleElement !== this.currentTitleElement) {
+                const titleId = `${this.identifier}-title`;
+                titleElement.id = titleId;
+                titleElement.addEventListener('click', () => {
+                    var _a;
+                    (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
+                });
+                this.currentTitleElement = titleElement;
+            }
         }
     }
     /**
@@ -317,20 +375,21 @@ export class MgInputRichTextEditor {
      * @returns HTML mg-input Element
      */
     render() {
-        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)))));
+        return (h("mg-input", { key: '019cea088aa4a3938d533d7214ba7a8a1e750c0d', 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;
+            } })))));
     }
     static get is() { return "mg-input-rich-text-editor"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../../../../node_modules/quill/dist/quill.snow.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
+            "$": ["./editor/custom-properties.scss", "../../../../../node_modules/jodit/es2021/jodit.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../../../../node_modules/quill/dist/quill.snow.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
+            "$": ["editor/custom-properties.css", "../../../../../node_modules/jodit/es2021/jodit.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
         };
     }
     static get properties() {
@@ -374,6 +433,26 @@ export class MgInputRichTextEditor {
                 "reflect": false,
                 "attribute": "identifier"
             },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input name\nIf not set the value equals the identifier"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "this.identifier"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -464,7 +543,7 @@ export class MgInputRichTextEditor {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Define the number of visible text lines for the control"
+                    "text": "Define the number of visible text lines for the editor.\nImpacts the editor height. Content can grow beyond this minimum."
                 },
                 "getter": false,
                 "setter": false,
@@ -599,7 +678,8 @@ export class MgInputRichTextEditor {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },
@@ -635,16 +715,43 @@ export class MgInputRichTextEditor {
                 "attribute": "help-text"
             },
             "modules": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonsOption",
+                    "resolved": "(string | ButtonsGroup | IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton>)[] | string",
+                    "references": {
+                        "ButtonsOption": {
+                            "location": "import",
+                            "path": "./editor/editor.conf",
+                            "id": "src/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.conf.ts::ButtonsOption",
+                            "referenceLocation": "ButtonsOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Editor modules configuration.\nMust be passed as an array (e.g. modules=['bold', 'italic', '|', 'ul', 'ol']).\nUse `|` for a separator/divider in the toolbar.\nAvailable modules:\n- **Text formatting**: `bold`, `italic`, `underline`, `strikethrough`, `eraser`\n- **Lists**: `ul` (unordered list), `ol` (ordered list)\n- **Text positioning**: `superscript`, `subscript`\n- **Colors**: `brush` (text color/background)\n- **Media**: `link`, `image`, `file`\n- **Tables**: `table`\n- **History**: `undo`, `redo`\n- **Other**: `print`, `source` (HTML source editor)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modules"
+            },
+            "sanitizerOptions": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "EditorOptionsType['modules']",
-                    "resolved": "string | unknown",
+                    "original": "SanitizerOptions",
+                    "resolved": "{ disallowAttributes?: Record<string, string[]>; disallowTags?: string[]; }",
                     "references": {
-                        "EditorOptionsType": {
+                        "SanitizerOptions": {
                             "location": "import",
-                            "path": "./editor",
-                            "id": "src/components/molecules/inputs/mg-input-rich-text-editor/editor/index.ts::EditorOptionsType"
+                            "path": "@mgdis/sanitize-html",
+                            "id": "../sanitize-html/dist/index.d.ts::SanitizerOptions",
+                            "referenceLocation": "SanitizerOptions"
                         }
                     }
                 },
@@ -652,7 +759,7 @@ export class MgInputRichTextEditor {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Editor modules configuration"
+                    "text": "Sanitizer configuration in native format.\nUse disallowTags (array of tag names) and/or disallowAttributes (object mapping tag names to string arrays).\nUse \"*\" as tag key to disallow attributes on all tags."
                 },
                 "getter": false,
                 "setter": false
@@ -768,10 +875,10 @@ export class MgInputRichTextEditor {
                     "return": "Promise<string>"
                 },
                 "docs": {
-                    "text": "Get editor content in HTML format",
+                    "text": "Get editor content as HTML",
                     "tags": [{
                             "name": "returns",
-                            "text": "HTML content of the editor"
+                            "text": "HTML content of the editor (sanitized)"
                         }]
                 }
             },
@@ -896,6 +1003,12 @@ export class MgInputRichTextEditor {
             }, {
                 "propName": "patternErrorMessage",
                 "methodName": "validatePattern"
+            }, {
+                "propName": "modules",
+                "methodName": "watchModules"
+            }, {
+                "propName": "sanitizerOptions",
+                "methodName": "watchSanitizerOptions"
             }];
     }
 }

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

@@ -129,11 +129,19 @@ export class MgInputSelect {
             }
         };
         /**
-         * Method to compare item.title with input.value
+         * Method to compare item with input.value
          * @param item - item to compare with
          * @returns truthy if input.value is an item
          */
-        this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
+        this.isInputValue = (item) => {
+            if (this.input === undefined)
+                return false;
+            // String items keep native DOM values.
+            if (allItemsAreString(this.items))
+                return item.title === this.input.value;
+            // Object items use stringified values.
+            return toString(item.value) === this.input.value;
+        };
         /**
          * Handle blur event
          */
@@ -178,7 +186,10 @@ export class MgInputSelect {
          * @param option - to render
          * @returns render option
          */
-        this.renderOption = (option) => (h("option", { key: option.title, value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
+        this.renderOption = (option) => {
+            const serializedValue = allItemsAreString(this.items) ? option.title : toString(option.value);
+            return (h("option", { key: serializedValue, value: serializedValue, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
+        };
     }
     validateValue(newValue) {
         setTimeout(() => {
@@ -372,7 +383,7 @@ export class MgInputSelect {
      */
     render() {
         const readonlyValue = this.getReadonlyValue();
-        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) => {
+        return (h("mg-input", { key: '7d544e8f67a37d5781697da10d3d4f47cc5027e3', 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
@@ -421,7 +432,8 @@ export class MgInputSelect {
                         "SelectOption": {
                             "location": "import",
                             "path": "./mg-input-select.conf",
-                            "id": "src/components/molecules/inputs/mg-input-select/mg-input-select.conf.ts::SelectOption"
+                            "id": "src/components/molecules/inputs/mg-input-select/mg-input-select.conf.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
                         }
                     }
                 },
@@ -661,7 +673,8 @@ export class MgInputSelect {
                         "Width": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width",
+                            "referenceLocation": "Width"
                         }
                     }
                 },
@@ -705,7 +718,8 @@ export class MgInputSelect {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },
@@ -801,7 +815,7 @@ export class MgInputSelect {
                 },
                 "complexType": {
                     "original": "HTMLMgInputCheckboxElement['value']",
-                    "resolved": "CheckboxValue[]",
+                    "resolved": "ICheckboxValue[]",
                     "references": {
                         "HTMLMgInputCheckboxElement": {
                             "location": "global",

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: '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
+        return (h("mg-input", { key: '068e38b82ef4e2254fb8d37f21ecf11dc4f3a012', 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: {
@@ -528,7 +528,8 @@ export class MgInputText {
                         "TextType": {
                             "location": "import",
                             "path": "./mg-input-text.conf",
-                            "id": "src/components/molecules/inputs/mg-input-text/mg-input-text.conf.ts::TextType"
+                            "id": "src/components/molecules/inputs/mg-input-text/mg-input-text.conf.ts::TextType",
+                            "referenceLocation": "TextType"
                         }
                     }
                 },
@@ -549,12 +550,13 @@ export class MgInputText {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "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\"",
+                    "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\" | \"pause\" | \"pause-outline\" | \"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",
                             "path": "../../../../components",
-                            "id": "src/components.d.ts::IconType"
+                            "id": "src/components.d.ts::IconType",
+                            "referenceLocation": "IconType"
                         }
                     }
                 },
@@ -598,7 +600,8 @@ export class MgInputText {
                         "OptionType": {
                             "location": "import",
                             "path": "./mg-input-text.conf",
-                            "id": "src/components/molecules/inputs/mg-input-text/mg-input-text.conf.ts::OptionType"
+                            "id": "src/components/molecules/inputs/mg-input-text/mg-input-text.conf.ts::OptionType",
+                            "referenceLocation": "OptionType"
                         }
                     }
                 },
@@ -701,7 +704,8 @@ export class MgInputText {
                         "Width": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width",
+                            "referenceLocation": "Width"
                         }
                     }
                 },
@@ -784,7 +788,8 @@ export class MgInputText {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },

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: '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: {
+        return (h("mg-input", { key: '021aa902aa952730d98fbc2eaa5136975b484319', 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',
@@ -535,7 +535,8 @@ export class MgInputTextarea {
                         "Width": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width",
+                            "referenceLocation": "Width"
                         }
                     }
                 },
@@ -638,7 +639,8 @@ export class MgInputTextarea {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },