@yoobic/yobi 8.5.0-4 → 8.5.0-40

package/dist/collection/components/form/form-text-area/form-text-area.js

@@ -1,6 +1,6 @@
 import { Keyboard } from '@capacitor/keyboard';
-import { debounce, enableKeyboardResize, findParent, getAsyncExtraData, isFirefox, isIOS, isNativeMobile, isNullOrUndefined, isWeb, replaceAtTagToMentionTag, safeScrollIntoView, translate, translateMulti, updateLinkPreviews } from '@shared/utils';
-import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
+import { debounce, enableKeyboardResize, findParent, getAsyncExtraData, isFirefox, isIOS, isNativeMobile, isNullOrUndefined, isWeb, replaceAtTagToMentionTag, safeScrollIntoView, sanitizeInputValue, translate, translateMulti, updateLinkPreviews } from '@shared/utils';
+import { forceUpdate, h, Host } from '@stencil/core';
 import { isString } from 'lodash-es';
 import { getAppContext, sanitizeHTML } from '../../../utils/helpers/common-helpers';
 import { onInputBlurred, onInputClear, onInputFocused, setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
@@ -20,6 +20,7 @@ export class YooFormTextAreaComponent {
     this.validateInput = true;
     this.autoInitialRows = false;
     this.focusOnRendered = false;
+    this.sanitizeValue = false;
     this.mentionedUsers = [];
     this.allowLinkUpdate = true;
     this.updateSegmentsCountDebounce = debounce(() => this.updateSegmentsCount(), 2000);
@@ -38,7 +39,7 @@ export class YooFormTextAreaComponent {
       this.syncMentionIds();
     }
     else if (!this.isRichText) {
-      this.inputEl.value = value;
+      this.inputEl.value = this.sanitizeInputValue(value);
     }
   }
   allowMentionChanged() {
@@ -105,6 +106,7 @@ export class YooFormTextAreaComponent {
   }
   componentWillLoad() {
     setValidator(this);
+    this.value = this.sanitizeInputValue();
     this.emitValueAndSetValidity = debounce((value, inputElement, forceNullValidation, validateInput, skipValueAssignment, preventInputChangedEvent) => {
       setValueAndValidateInput(value, inputElement, forceNullValidation, validateInput, skipValueAssignment, preventInputChangedEvent);
       this.validityChanged.emit(this.validity);
@@ -150,7 +152,7 @@ export class YooFormTextAreaComponent {
       }
     }
     //Timeout here to wait until the content on the textarea get loaded and the textarea got its final size (to be refactored alongside with the component later on 
-    setTimeout(() => {
+    !this.isRichText && setTimeout(() => {
       this.updateTextareaSize();
     }, 1000);
     if (this.focusOnRendered) {
@@ -166,6 +168,9 @@ export class YooFormTextAreaComponent {
       this.inputEl.removeEventListener('compositionend', this.compEndListener);
     }
   }
+  sanitizeInputValue(value = this.value) {
+    return !this.isRichText && this.sanitizeValue ? sanitizeInputValue(value) : value;
+  }
   setTextareaMaxLengh() {
     if (this.maxCharacters && this.inputEl && !this.allowMention && !this.allowCustomInput) {
       this.inputEl.maxLength = this.maxCharacters;
@@ -368,10 +373,7 @@ export class YooFormTextAreaComponent {
     onInputFocused(this, tag);
   }
   renderSegmentsCount() {
-    return this.displaySegmentsCount && this.segmentsCount >= 0 && h("div", { class: "segments-count" },
-      translate('SEGMENTS'),
-      ": ",
-      this.segmentsCount.toLocaleString());
+    return this.displaySegmentsCount && this.segmentsCount >= 0 && h("div", { class: "segments-count" }, translate('SEGMENTS'), ": ", this.segmentsCount.toLocaleString());
   }
   renderLinkPreviews() {
     return (h("yoo-links-preview", { closeable: true, inline: true, links: this.linkPreviews, showErrors: false, onLinkPreviewChanged: (ev) => this.onLinkPreviewChanged(ev) }));
@@ -393,22 +395,14 @@ export class YooFormTextAreaComponent {
           }
           ev.preventDefault();
         }, contenteditable: "true", placeholder: translate(this.placeholder), readonly: this.readonly, rows: this.rows, onBlur: (ev) => onInputBlurred(ev, this, 'textarea'), onInput: () => this.onInputChanged(), onFocus: () => this.onInputFocused('textarea'), onKeyPress: (ev) => this.onKeyPress(ev), onKeyDown: (ev) => this.onKeyDown(ev), onTouchStart: (ev) => ev.stopPropagation(), tabindex: this.inputTabIndex }),
-      this.clearable && (h("div", { class: { 'icon-suffix-focus last icon-close': true }, style: { display: hasValue ? undefined : 'none' }, onClick: () => (hasValue ? this.clearInput() : null) },
-        h("yoo-icon", { size: this.getIconSize(), name: "cross" })))
+      this.clearable && (h("div", { class: { 'icon-suffix-focus last icon-close': true }, style: { display: hasValue ? undefined : 'none' }, onClick: () => (hasValue ? this.clearInput() : null) }, h("yoo-icon", { size: this.getIconSize(), name: "cross" })))
     ];
   }
   renderEditable() {
     var _a;
     return [
-      h("div", { class: "outer-container" },
-        h("div", { class: "inner-container" },
-          this.isRichText ? this.renderMentionContainer() : this.renderTextArea(),
-          h("slot", { name: "placeholder" })),
-        h("slot", { name: "right" }),
-        ((_a = this.inlineActions) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
-          this.inlineActions.map((action) => (h("yoo-tooltip", { content: translate(action.text), placement: "top" },
-            h("div", { class: "icon-suffix", onClick: () => action.handler() },
-              h("yoo-icon", { name: action.icon, color: action.iconColor })))))),
+      h("div", { class: "outer-container" }, h("div", { class: "inner-container" }, this.isRichText ? this.renderMentionContainer() : this.renderTextArea(), h("slot", { name: "placeholder" })), h("slot", { name: "right" }), ((_a = this.inlineActions) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+        this.inlineActions.map((action) => (h("yoo-tooltip", { content: translate(action.text), placement: "top" }, h("div", { class: "icon-suffix", onClick: () => action.handler() }, h("yoo-icon", { name: action.icon, color: action.iconColor })))))),
       this.renderSegmentsCount(),
       this.allowLinkPreview && this.renderLinkPreviews()
     ];
@@ -421,906 +415,940 @@ export class YooFormTextAreaComponent {
   }
   static get is() { return "yoo-form-text-area"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["form-text-area.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["form-text-area.css"]
-  }; }
-  static get properties() { return {
-    "validators": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "(Validator<string> | IValidatorEntry)[]",
-        "resolved": "(IValidatorEntry | Validator<string>)[]",
-        "references": {
-          "Validator": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          },
-          "IValidatorEntry": {
-            "location": "import",
-            "path": "@shared/interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["form-text-area.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["form-text-area.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "validators": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(Validator<string> | IValidatorEntry)[]",
+          "resolved": "(IValidatorEntry | Validator<string>)[]",
+          "references": {
+            "Validator": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            },
+            "IValidatorEntry": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    },
-    "mentions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IMention[]",
-        "resolved": "IMention[]",
-        "references": {
-          "IMention": {
-            "location": "import",
-            "path": "@shared/interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "mentions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IMention[]",
+          "resolved": "IMention[]",
+          "references": {
+            "IMention": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "asyncValidators": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "AsyncValidator<string>[]",
-        "resolved": "AsyncValidator<string>[]",
-        "references": {
-          "AsyncValidator": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "asyncValidators": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "AsyncValidator<string>[]",
+          "resolved": "AsyncValidator<string>[]",
+          "references": {
+            "AsyncValidator": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "readonly",
-      "reflect": false
-    },
-    "initialRows": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "initial-rows",
-      "reflect": false,
-      "defaultValue": "2"
-    },
-    "maxRows": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max-rows",
-      "reflect": false
-    },
-    "resizable": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'both' | 'vertical' | 'horizontal' | 'none'",
-        "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "resizable",
-      "reflect": false,
-      "defaultValue": "'both'"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "disableEnter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disable-enter",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "mentionFitMaxRows": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "mention-fit-max-rows",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disableTab": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disable-tab",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "validity": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "validity",
-      "reflect": false
-    },
-    "linkPreviews": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "ILinkPreview[]",
-        "resolved": "ILinkPreview[]",
-        "references": {
-          "ILinkPreview": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": false
+      },
+      "initialRows": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "initial-rows",
+        "reflect": false,
+        "defaultValue": "2"
+      },
+      "maxRows": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-rows",
+        "reflect": false
+      },
+      "resizable": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'both' | 'vertical' | 'horizontal' | 'none'",
+          "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "resizable",
+        "reflect": false,
+        "defaultValue": "'both'"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "disableEnter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disable-enter",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "mentionFitMaxRows": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "mention-fit-max-rows",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disableTab": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disable-tab",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "validity": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "validity",
+        "reflect": false
+      },
+      "linkPreviews": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "ILinkPreview[]",
+          "resolved": "ILinkPreview[]",
+          "references": {
+            "ILinkPreview": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "allowLinkPreview": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-link-preview",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "validateInput": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "validate-input",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "inputTabIndex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "input-tab-index",
+        "reflect": false
+      },
+      "otherIds": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    },
-    "allowLinkPreview": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "allow-link-preview",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "validateInput": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "validate-input",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "inputTabIndex": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "input-tab-index",
-      "reflect": false
-    },
-    "otherIds": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "maxCharacters": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max-characters",
-      "reflect": false
-    },
-    "autoInitialRows": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "auto-initial-rows",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "focusOnRendered": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "focus-on-rendered",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "inlineActions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IButton[]",
-        "resolved": "IButton[]",
-        "references": {
-          "IButton": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "maxCharacters": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-characters",
+        "reflect": false
+      },
+      "autoInitialRows": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auto-initial-rows",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "focusOnRendered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "focus-on-rendered",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "inlineActions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IButton[]",
+          "resolved": "IButton[]",
+          "references": {
+            "IButton": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "displaySegmentsCount": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "display-segments-count",
-      "reflect": false
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "TBaseSize",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {
-          "TBaseSize": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "displaySegmentsCount": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "display-segments-count",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TBaseSize",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "TBaseSize": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": true
+      },
+      "allowMention": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-mention",
+        "reflect": false
+      },
+      "mentionConfigs": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ type: string, id: string }",
+          "resolved": "{ type: string; id: string; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": true
-    },
-    "allowMention": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "allow-mention",
-      "reflect": false
-    },
-    "mentionConfigs": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "{ type: string, id: string }",
-        "resolved": "{ type: string; id: string; }",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "translations": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ITranslation[]",
-        "resolved": "ITranslation[]",
-        "references": {
-          "ITranslation": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "translations": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ITranslation[]",
+          "resolved": "ITranslation[]",
+          "references": {
+            "ITranslation": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "disableInput": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Disable user to input on textarea"
-      },
-      "attribute": "disable-input",
-      "reflect": false
-    },
-    "clearable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "clearable",
-      "reflect": false
-    },
-    "allowCustomInput": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Use paragraph instead of textarea to allwo custom input inside textarea"
-      },
-      "attribute": "allow-custom-input",
-      "reflect": false
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "debounce": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "debounce",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "rows": {},
-    "composeText": {},
-    "segmentsCount": {}
-  }; }
-  static get events() { return [{
-      "method": "validityChanged",
-      "name": "validityChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "inputBlurred",
-      "name": "inputBlurred",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "inputFocused",
-      "name": "inputFocused",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "inputChanged",
-      "name": "inputChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "enterPressed",
-      "name": "enterPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "tabPressed",
-      "name": "tabPressed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "sanitizeValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sanitize-value",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disableInput": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Disable user to input on textarea"
+        },
+        "attribute": "disable-input",
+        "reflect": false
+      },
+      "clearable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clearable",
+        "reflect": false
+      },
+      "allowCustomInput": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Use paragraph instead of textarea to allwo custom input inside textarea"
+        },
+        "attribute": "allow-custom-input",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "debounce": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "debounce",
+        "reflect": false
       }
-    }, {
-      "method": "mentionsChanged",
-      "name": "mentionsChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "IMentionEvent",
-        "resolved": "IMentionEvent",
-        "references": {
-          "IMentionEvent": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "rows": {},
+      "composeText": {},
+      "segmentsCount": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "validityChanged",
+        "name": "validityChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         }
-      }
-    }, {
-      "method": "linkPreviewChanged",
-      "name": "linkPreviewChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{ linkPreviews: ILinkPreview[] }",
-        "resolved": "{ linkPreviews: ILinkPreview[]; }",
-        "references": {
-          "ILinkPreview": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
+      }, {
+        "method": "inputBlurred",
+        "name": "inputBlurred",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
         }
-      }
-    }, {
-      "method": "translationValueUpdated",
-      "name": "translationValueUpdated",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{ key: string, value: string }",
-        "resolved": "{ key: string; value: string; }",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }, {
+        "method": "inputFocused",
+        "name": "inputFocused",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "inputChanged",
+        "name": "inputChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "enterPressed",
+        "name": "enterPressed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "tabPressed",
+        "name": "tabPressed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "mentionsChanged",
+        "name": "mentionsChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IMentionEvent",
+          "resolved": "IMentionEvent",
+          "references": {
+            "IMentionEvent": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        }
+      }, {
+        "method": "linkPreviewChanged",
+        "name": "linkPreviewChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "setBlur": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "complexType": {
+          "original": "{ linkPreviews: ILinkPreview[] }",
+          "resolved": "{ linkPreviews: ILinkPreview[]; }",
+          "references": {
+            "ILinkPreview": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        }
+      }, {
+        "method": "translationValueUpdated",
+        "name": "translationValueUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ key: string, value: string }",
+          "resolved": "{ key: string; value: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "hasText": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "setBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<boolean>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "getText": {
-      "complexType": {
-        "signature": "() => Promise<string>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "hasText": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
         },
-        "return": "Promise<string>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "updateValueAndFocus": {
-      "complexType": {
-        "signature": "(value: string, insert?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "getText": {
+        "complexType": {
+          "signature": "() => Promise<string>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<string>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "getFocusedElement": {
-      "complexType": {
-        "signature": "() => Promise<IInsertElementProp>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "updateValueAndFocus": {
+        "complexType": {
+          "signature": "(value: string, insert?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
           },
-          "IInsertElementProp": {
-            "location": "import",
-            "path": "../../../utils/helpers/form-text-area-helpers"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<IInsertElementProp>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "restoreFocus": {
-      "complexType": {
-        "signature": "(item: IInsertElementProp) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "getFocusedElement": {
+        "complexType": {
+          "signature": "() => Promise<IInsertElementProp>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IInsertElementProp": {
+              "location": "import",
+              "path": "../../../utils/helpers/form-text-area-helpers"
+            }
           },
-          "IInsertElementProp": {
-            "location": "import",
-            "path": "../../../utils/helpers/form-text-area-helpers"
-          }
+          "return": "Promise<IInsertElementProp>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "clear": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "restoreFocus": {
+        "complexType": {
+          "signature": "(item: IInsertElementProp) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IInsertElementProp": {
+              "location": "import",
+              "path": "../../../utils/helpers/form-text-area-helpers"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "clear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "onValueChanged"
-    }, {
-      "propName": "allowMention",
-      "methodName": "allowMentionChanged"
-    }, {
-      "propName": "allowCustomInput",
-      "methodName": "allowMentionChanged"
-    }]; }
-  static get listeners() { return [{
-      "name": "keyboardDidShow",
-      "method": "onKeyboardShown",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "onValueChanged"
+      }, {
+        "propName": "allowMention",
+        "methodName": "allowMentionChanged"
+      }, {
+        "propName": "allowCustomInput",
+        "methodName": "allowMentionChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "keyboardDidShow",
+        "method": "onKeyboardShown",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }