@mgdis/mg-components 6.4.0 → 6.6.0

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

@@ -0,0 +1,846 @@
+import { h } from "@stencil/core";
+import { ClassList, isValidString, toString } from "@mgdis/stencil-helpers";
+import { classReadonly, classDisabled } from "../mg-input/mg-input.conf";
+import { initLocales } from "../../../../locales";
+import { defineEditor } from "./editor";
+export class MgInputRichTextEditor {
+    constructor() {
+        // hasDisplayedError (triggered by blur event)
+        this.hasDisplayedError = false;
+        // Classes
+        this.classFocus = 'mg-u-is-focused';
+        /**
+         * Define the value of the editor
+         * Can be either HTML string or plain text
+         */
+        this.value = '';
+        /**
+         * Define if label is visible
+         */
+        this.labelHide = false;
+        /**
+         * Define the number of visible text lines for the control
+         */
+        this.rows = 5;
+        /**
+         * Define if input is required
+         */
+        this.required = false;
+        /**
+         * Define if the editor is readonly
+         */
+        this.readonly = false;
+        /**
+         * Define if input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Define tooltip position
+         */
+        this.tooltipPosition = 'input';
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-input--rich-text-editor']);
+        /**
+         * Check if the field is empty taking into account the value format
+         * @returns truthy is value is invalid
+         */
+        this.isEmpty = () => {
+            const textContent = this.getTextContent();
+            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());
+        /**
+         * Check if input is valid
+         */
+        this.checkValidity = () => {
+            this.setValidity(this.readonly || this.disabled || ((this.required ? !this.isEmpty() : true) && this.getPatternValidity()));
+        };
+        /**
+         * Set input error message
+         * @param errorMessage - errorMessage override
+         */
+        this.setErrorMessage = (errorMessage) => {
+            this.errorMessage = undefined;
+            if (this.valid)
+                return;
+            else if (isValidString(errorMessage)) {
+                this.errorMessage = errorMessage;
+            }
+            else if (this.required && this.isEmpty()) {
+                this.errorMessage = this.messages.errors.required;
+            }
+            else if (!this.getPatternValidity()) {
+                this.errorMessage = this.patternErrorMessage;
+            }
+        };
+        /**
+         * Handle focus event
+         */
+        this.handleFocus = () => {
+            this.classCollection.add(this.classFocus);
+            this.classCollection = new ClassList(this.classCollection.classes);
+        };
+        /**
+         * Handles the blur event on the editor
+         * Checks validity and displays error messages if necessary
+         */
+        this.handleBlur = () => {
+            // Manage focus
+            this.classCollection.delete(this.classFocus);
+            this.classCollection = new ClassList(this.classCollection.classes);
+            if (!this.readonly) {
+                this.checkValidity();
+                this.setErrorMessage();
+                if (!this.valid) {
+                    this.hasDisplayedError = true;
+                }
+            }
+        };
+        /**
+         * 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);
+            // Check validity but do not display the error message if the error message is already displayed
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        };
+    }
+    watchReadonly(newValue) {
+        if (newValue)
+            this.classCollection.add(classReadonly);
+        else
+            this.classCollection.delete(classReadonly);
+    }
+    watchDisabled(newValue) {
+        var _a, _b;
+        if (newValue) {
+            this.classCollection.add(classDisabled);
+            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.disable();
+        }
+        else {
+            this.classCollection.delete(classDisabled);
+            (_b = this.editor) === null || _b === void 0 ? void 0 : _b.enable();
+        }
+    }
+    handleValidityChange() {
+        if (this.editor !== undefined && this.editor !== null) {
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+                this.hasDisplayedError = false;
+            }
+        }
+    }
+    validatePattern(newValue) {
+        if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {
+            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)}'".`);
+        }
+    }
+    /**
+     * Get editor content as HTML
+     * @returns HTML content of the editor
+     */
+    async getHTML() {
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                resolve(this.editor.getSemanticHTML());
+            });
+        });
+    }
+    /**
+     * Get editor content as plain text
+     * @returns Plain text content of the editor
+     */
+    async getText() {
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                resolve(this.editor.getText());
+            });
+        });
+    }
+    /**
+     * Display input error if it exists.
+     */
+    async displayError() {
+        // Use `Promise` as requested for stencil method
+        // Use `requestAnimationFrame` to ensure:
+        // - DOM is fully updated before validation
+        // - Async operations are completed
+        // - No timing issues with Stencil's render cycle
+        // - Keep everything in sync both inside and outside the component
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                this.checkValidity();
+                this.setErrorMessage();
+                this.hasDisplayedError = this.invalid;
+                resolve();
+            });
+        });
+    }
+    /**
+     * Set an error and display a custom error message.
+     * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+     * It must be paired with an error message to display for the given context.
+     * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+     * @param valid - value indicating the validity
+     * @param errorMessage - the error message to display
+     */
+    async setError(valid, errorMessage) {
+        if (typeof valid !== 'boolean') {
+            throw new Error('<mg-input-rich-text-editor> method "setError()" param "valid" must be a boolean.');
+        }
+        else if (!isValidString(errorMessage)) {
+            throw new Error('<mg-input-rich-text-editor> method "setError()" param "errorMessage" must be a string.');
+        }
+        else {
+            this.setValidity(valid);
+            this.setErrorMessage(valid ? undefined : errorMessage);
+            this.hasDisplayedError = this.invalid;
+        }
+    }
+    /**
+     * Reset value, validity and error state
+     */
+    async reset() {
+        if (!this.readonly) {
+            this.value = '';
+            this.editor.setText('');
+            this.checkValidity();
+            this.errorMessage = undefined;
+            this.hasDisplayedError = false;
+        }
+    }
+    /**
+     * Method to set validity values
+     * @param newValue - valid new value
+     */
+    setValidity(newValue) {
+        const oldValidValue = this.valid;
+        this.valid = newValue;
+        this.invalid = !this.valid;
+        if (this.valid !== oldValidValue) {
+            this.inputValid.emit(this.valid);
+        }
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     * @returns timeout
+     */
+    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);
+        // Check validity when component is ready
+        // return a promise to process action only in the FIRST render().
+        // https://stenciljs.com/docs/component-lifecycle#componentwillload
+        return setTimeout(() => {
+            this.checkValidity();
+        }, 0);
+    }
+    /**
+     * add listeners and render editor element
+     */
+    componentDidLoad() {
+        if (this.readonly)
+            return;
+        this.editor = defineEditor(this.wrapperElement, {
+            theme: 'snow',
+            modules: this.modules,
+            readOnly: this.readonly || this.disabled,
+            placeholder: this.placeholder,
+            value: this.value,
+            handleTextChange: this.handleTextChange,
+            handleBlur: this.handleBlur,
+            handleFocus: this.handleFocus,
+        });
+    }
+    /**
+     * Render
+     * @returns HTML mg-input Element
+     */
+    render() {
+        return (h("mg-input", { key: '4cc25a69bf7658bd1c487eb9cf22378f9cf0d473', 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)))));
+    }
+    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"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../../../../node_modules/quill/dist/quill.snow.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the value of the editor\nCan be either HTML string or plain text"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input label"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "labelOnTop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if label is displayed on top"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-on-top",
+                "reflect": false
+            },
+            "labelHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if label is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-hide",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the number of visible text lines for the control"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "rows",
+                "reflect": false,
+                "defaultValue": "5"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if input is required"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if the editor is readonly"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input pattern to validate\nPlease refer to the Pattern section in the input documentation for detailed information on using regular expressions in components."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "pattern",
+                "reflect": false
+            },
+            "patternErrorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input pattern error message"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "pattern-error-message",
+                "reflect": false
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a tooltip message next to the input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "tooltip",
+                "reflect": false
+            },
+            "tooltipPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipPosition",
+                    "resolved": "\"input\" | \"label\"",
+                    "references": {
+                        "TooltipPosition": {
+                            "location": "import",
+                            "path": "../mg-input/mg-input.conf",
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define tooltip position"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "tooltip-position",
+                "reflect": false,
+                "defaultValue": "'input'"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a help text under the input, usually expected data format and example"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "help-text",
+                "reflect": false
+            },
+            "valid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input valid state"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "valid",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input invalid state"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "invalid",
+                "reflect": false
+            },
+            "modules": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "EditorOptionsType['modules']",
+                    "resolved": "{ [x: string]: unknown; }",
+                    "references": {
+                        "EditorOptionsType": {
+                            "location": "import",
+                            "path": "./editor",
+                            "id": "src/components/molecules/inputs/mg-input-rich-text-editor/editor/index.ts::EditorOptionsType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Editor modules configuration"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "classCollection": {},
+            "errorMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "inputValid",
+                "name": "input-valid",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when checking validity"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "valueChange",
+                "name": "value-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when value change"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getHTML": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Get editor content as HTML",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "HTML content of the editor"
+                        }]
+                }
+            },
+            "getText": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Get editor content as plain text",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Plain text content of the editor"
+                        }]
+                }
+            },
+            "displayError": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Display input error if it exists.",
+                    "tags": []
+                }
+            },
+            "setError": {
+                "complexType": {
+                    "signature": "(valid: MgInputRichTextEditor[\"valid\"], errorMessage: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "valid",
+                            "type": "boolean",
+                            "docs": "- value indicating the validity"
+                        }, {
+                            "name": "errorMessage",
+                            "type": "string",
+                            "docs": "- the error message to display"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "MgInputRichTextEditor": {
+                            "location": "global",
+                            "id": "global::MgInputRichTextEditor"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "valid - value indicating the validity"
+                        }, {
+                            "name": "param",
+                            "text": "errorMessage - the error message to display"
+                        }]
+                }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reset value, validity and error state",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "readonly",
+                "methodName": "watchReadonly"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabled"
+            }, {
+                "propName": "required",
+                "methodName": "handleValidityChange"
+            }, {
+                "propName": "readonly",
+                "methodName": "handleValidityChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleValidityChange"
+            }, {
+                "propName": "pattern",
+                "methodName": "validatePattern"
+            }, {
+                "propName": "patternErrorMessage",
+                "methodName": "validatePattern"
+            }];
+    }
+}
+//# sourceMappingURL=mg-input-rich-text-editor.js.map