@dubai-design-system/components-js 3.12.10 → 3.12.11

package/dist/collection/components/dda-textarea/dda-textarea.js

@@ -4,118 +4,66 @@ import "quill/dist/quill.snow.css";
 export class DdaTextarea {
     constructor() {
         this.value = '';
-        this.show_info_icon = false;
-        this.characterCount = 0;
-        this.internalValue = '';
-    }
-    // ✅ NEW: External value getter
-    async getValue() {
-        return this.internalValue || this.value || '';
-    }
-    async setValue(val) {
-        this.internalValue = val;
-        this.onChanged.emit(val);
-    }
-    async reset() {
-        this.internalValue = '';
-        // this.inputChanged.emit('');
-        this.onChanged.emit('');
+        this.characterCount = 0; // State to track the character count
     }
     componentDidLoad() {
-        var _a;
         if (this.enable_rich_editor) {
             const editor = this.el.querySelector('#editor');
             this.quill = new Quill(editor, {
                 modules: {
                     toolbar: [
-                        ['bold', 'italic', 'underline', 'strike'],
+                        ['bold', 'italic', 'underline', 'strike'], // toggled buttons
                         ['blockquote', 'code-block'],
-                        [{ list: 'ordered' }, { list: 'bullet' }],
-                        [{ script: 'sub' }, { script: 'super' }],
-                        [{ indent: '-1' }, { indent: '+1' }],
-                        [{ direction: 'rtl' }],
-                        [{ header: [1, 2, 3, 4, 5, 6, false] }],
-                        [{ color: [] }, { background: [] }],
-                        [{ font: [] }],
-                        [{ align: [] }],
-                        ['clean'],
-                        ['link', 'image', 'video'],
+                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+                        [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
+                        [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
+                        [{ 'direction': 'rtl' }], // text direction
+                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+                        [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
+                        [{ 'font': [] }],
+                        [{ 'align': [] }],
+                        ['clean'], // remove formatting button
+                        ['link', 'image', 'video'] // link and image, video
                     ],
                 },
                 theme: 'snow',
                 placeholder: this.placeholder,
             });
             this.quill.on('text-change', () => {
-                const content = this.quill.root.innerHTML;
-                this.internalValue = content;
-                this.characterCount = this.quill.getText().trim().length;
-                this.textareaChanged.emit(); // optional
-                this.onChanged.emit();
+                this.value = this.quill.root.innerHTML;
+                this.characterCount = this.quill.getText().length - 1; // Update character count
             });
-            if (this.value) {
-                this.quill.root.innerHTML = this.value;
-                this.internalValue = this.value;
-                this.characterCount = this.quill.getText().trim().length;
-            }
-        }
-        else {
-            this.internalValue = this.value;
-            this.characterCount = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
         }
     }
     handleInput(event) {
-        const val = event.target.value;
-        this.internalValue = val;
-        this.characterCount = val.length;
-        this.textareaChanged.emit(event);
-        this.onChanged.emit(val);
-        this.el.dispatchEvent(new InputEvent('input', event));
-    }
-    handleBlur(event) {
-        const val = event.target.value.trim();
-        this.textareaBlurred.emit({ name: this.textarea_name, value: val });
-        this.onBlurred.emit(val);
-        this.el.dispatchEvent(new FocusEvent('blur', {
-            bubbles: true,
-            composed: true,
-            relatedTarget: event.target,
-        }));
+        if (!this.enable_rich_editor) {
+            this.value = event.target.value;
+            this.characterCount = event.target.value.length; // Update character count
+        }
     }
     render() {
         const textareaClass = [
             'dda-input-container dda-richtext-editor',
             this.validation_type ? `dda-validation-${this.validation_type}` : '',
             this.input_status ? `dda-input-${this.input_status}` : '',
-            this.custom_class,
-            this.component_mode,
-            this.textarea_name,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        return (h(Host, { key: '0e08517cea3fe0f247facf0ec1bfde73f20d9234' }, h("div", { key: 'e5354b352ab7c3bad0a9a06f7f4315c8b8debb0d', class: textareaClass }, this.label && (h("label", { key: '418a4633ca45ae6d476ffefae2ba1d447bdd06d5', htmlFor: this.input_id, class: "dda-input-label" }, this.label)), this.enable_rich_editor ? (h("div", { id: "editor", class: "dda-richeditor-field" })) : (h("textarea", { id: this.input_id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.internalValue || this.value, "aria-invalid": this.validation_type === 'error' ? 'true' : 'false', class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, onInput: event => this.handleInput(event), onBlur: event => this.handleBlur(event), onFocus: (event) => {
-                this.el.dispatchEvent(new FocusEvent('focus', {
-                    bubbles: true,
-                    composed: true,
-                    relatedTarget: event.relatedTarget,
-                }));
-            }, onKeyDown: (event) => {
-                this.el.dispatchEvent(new KeyboardEvent('keydown', {
-                    bubbles: true,
-                    composed: true,
-                    key: event.key,
-                    code: event.code,
-                    ctrlKey: event.ctrlKey,
-                    shiftKey: event.shiftKey,
-                    altKey: event.altKey,
-                    metaKey: event.metaKey,
-                    repeat: event.repeat,
-                }));
-            } })), this.validation_type === 'error' && this.error_message ? (h("div", { class: "dda-error-message", id: this.validation_id }, h("span", { class: "dda-d-flex dda-items-center dda-gap-2" }, this.show_info_icon && (h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "info")), this.error_message), h("span", { class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))) : (h("div", { class: "dda-helper-text", id: this.validation_id }, h("span", { class: "dda-d-flex dda-items-center dda-gap-2" }, this.show_info_icon && (h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "info")), this.helper_text), h("span", { class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
+            this.custom_class, this.component_mode, this.textarea_name,
+        ].filter(Boolean).join(' ');
+        return (h(Host, { key: '526ef730ca35987cbe8b0d0ddee68a7a44b9c011' }, h("div", { key: '28a02038494692efdac97bcd74c2b9a4a2cfc354', class: textareaClass }, this.label && h("label", { key: 'ede2d805ac6adc01b32b0ccfb9d20196953089f3', htmlFor: this.input_id, class: "dda-input-label" }, this.label), this.enable_rich_editor ? (h("div", { id: "editor", class: "dda-richeditor-field" })) : (h("textarea", { id: this.input_id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-textarea", maxLength: this.max_characters })), this.helper_text && (h("div", { key: '2c82052df04e4e01f06af9eaa788da28e5c66df0', class: "dda-helper-text" }, h("span", { key: 'de738b9edf2cfdfb8d933e0e55db45af3418297e', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '9dd57848081c3b120d7e8154c899e8eb4a07fe39', class: "material-icons  material-symbols-outlined" }, "info"), " ", this.helper_text), h("span", { key: '880a886279652df965424aedd3891e17f2a0172b', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: '83e0061cc4575c340d3505694317f9954244f944', class: "dda-error-message" }, h("span", { key: '5c33386da5261f3a4b52b675a966a576988a0498', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '660f6cac35a3d3ee8b6b4abf73d75b151d2ed1bb', class: "material-icons  material-symbols-outlined" }, "info"), " ", this.error_message), h("span", { key: 'c94ee50aa22ddac0be150a72f3f743edeff26c51', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
     }
     static get is() { return "dda-textarea"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../global/global.css", "../../global/input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../global/global.css", "../../global/input.css"]
+        };
+    }
     static get properties() {
         return {
-            "label": {
+            "placeholder": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -131,10 +79,10 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
-            "placeholder": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -150,27 +98,8 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
-                "reflect": false
-            },
-            "max_characters": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "max_characters",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "value": {
                 "type": "string",
@@ -188,11 +117,11 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "''"
             },
-            "input_id": {
+            "error_message": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -208,10 +137,10 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error_message"
             },
-            "textarea_name": {
+            "validation_type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -220,17 +149,17 @@ export class DdaTextarea {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "textarea_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "validation_type"
             },
-            "aria_label": {
+            "input_status": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -246,28 +175,8 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
-            },
-            "show_info_icon": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "show_info_icon",
                 "reflect": false,
-                "defaultValue": "false"
+                "attribute": "input_status"
             },
             "helper_text": {
                 "type": "string",
@@ -285,10 +194,10 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
-            "error_message": {
+            "custom_class": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -297,22 +206,22 @@ export class DdaTextarea {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "custom_class"
             },
-            "validation_type": {
-                "type": "string",
+            "enable_rich_editor": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -323,15 +232,15 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "enable_rich_editor"
             },
-            "validation_id": {
-                "type": "string",
+            "max_characters": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
@@ -342,10 +251,10 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "max_characters"
             },
-            "input_status": {
+            "component_mode": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -361,10 +270,10 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_status",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
-            "custom_class": {
+            "input_id": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -373,17 +282,17 @@ export class DdaTextarea {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
-            "component_mode": {
+            "aria_label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -399,120 +308,34 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             },
-            "enable_rich_editor": {
-                "type": "boolean",
+            "textarea_name": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "enable_rich_editor",
-                "reflect": false
+                "reflect": false,
+                "attribute": "textarea_name"
             }
         };
     }
     static get states() {
         return {
-            "characterCount": {},
-            "internalValue": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "textareaChanged",
-                "name": "textareaChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "onChanged",
-                "name": "onChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "textareaBlurred",
-                "name": "textareaBlurred",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ name: string; value: string }",
-                    "resolved": "{ name: string; value: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "onBlurred",
-                "name": "onBlurred",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "getValue": {
-                "complexType": {
-                    "signature": "() => Promise<string>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<string>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
+            "characterCount": {}
         };
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=dda-textarea.js.map