q2-tecton-elements 1.18.0 → 1.19.1

package/dist/collection/components/q2-textarea/index.js

@@ -1,10 +1,9 @@
-import { Component, Prop, Event, Element, State, h, Watch, Listen } from '@stencil/core';
+import { h } from '@stencil/core';
 import { createGuid, isEventFromElement, labelDOM, loc, messagesDOM, overrideFocus, setMessageHeight } from 'src/utils';
 export class Q2Textarea {
   constructor() {
     this.scheduledAfterRender = [];
     this.guid = createGuid();
-    this.resize = 'vertical';
     this.checkRows = () => {
       const { contentContainer, rows, textareaField, resize } = this;
       if (!rows || ['none', 'horizontal'].includes(resize))
@@ -80,6 +79,23 @@ export class Q2Textarea {
       document.removeEventListener('mousemove', this.onMouseMove);
       this.downParams = null;
     };
+    this.value = undefined;
+    this.label = undefined;
+    this.hideLabel = undefined;
+    this.hideMessages = undefined;
+    this.optional = undefined;
+    this.placeholder = undefined;
+    this.disabled = undefined;
+    this.readonly = undefined;
+    this.spellcheck = undefined;
+    this.maxlength = undefined;
+    this.rows = undefined;
+    this.cols = undefined;
+    this.resize = 'vertical';
+    this.errors = undefined;
+    this.hints = undefined;
+    this.hasFocus = undefined;
+    this.downParams = undefined;
   }
   /////// LIFECYCLE HOOKS ////////
   componentWillLoad() {
@@ -177,353 +193,354 @@ export class Q2Textarea {
   }
   /////// VIEW METHODS ///////
   render() {
-    return (h("div", { class: this.wrapperClasses },
-      labelDOM(this),
-      h("div", { class: "content-container", ref: el => (this.contentContainer = el) },
-        this.inputDOM(),
-        this.maxlength ? this.maxLengthDOM() : '',
-        messagesDOM(this))));
+    return (h("div", { class: this.wrapperClasses }, labelDOM(this), h("div", { class: "content-container", ref: el => (this.contentContainer = el) }, this.inputDOM(), this.maxlength ? this.maxLengthDOM() : '', messagesDOM(this))));
   }
   maxLengthDOM() {
     var _a;
-    return (h("div", { class: "max-length", "aria-hidden": "true" },
-      ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0,
-      "/",
-      this.maxlength));
+    return (h("div", { class: "max-length", "aria-hidden": "true" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, "/", this.maxlength));
   }
   inputDOM() {
-    return (h("div", { class: "input-container" },
-      h("textarea", { id: this.inputId, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, "test-id": "inputField", maxLength: this.maxlength, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-required": `${!this.optional}`, "aria-label": this.hideLabel && this.label, spellcheck: this.spellcheck, rows: this.rows || 3, cols: this.cols, value: this.value, ref: el => (this.textareaField = el), readonly: !!this.readonly, disabled: !!this.disabled, maxlength: this.maxlength, onInput: this.onTextareaInput, onChange: this.onTextareaChange, onFocus: this.onTextareaFocus, onBlur: this.onTextareaBlur }),
-      this.hasError ? (h("q2-icon", { type: "error", class: "icon-error" })) : (''),
-      this.showResize && (h("button", { onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart, class: "btn-resize", "aria-label": loc('tecton.element.input.resize'), tabIndex: -1 },
-        h("svg", { "aria-hidden": "true", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" },
-          h("path", { d: "M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11", fill: "none", "stroke-stroke-linecap": "square" }))))));
+    return (h("div", { class: "input-container" }, h("textarea", { id: this.inputId, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, "test-id": "inputField", maxLength: this.maxlength, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-required": `${!this.optional}`, "aria-label": this.hideLabel && this.label, spellcheck: this.spellcheck, rows: this.rows || 3, cols: this.cols, value: this.value, ref: el => (this.textareaField = el), readonly: !!this.readonly, disabled: !!this.disabled, maxlength: this.maxlength, onInput: this.onTextareaInput, onChange: this.onTextareaChange, onFocus: this.onTextareaFocus, onBlur: this.onTextareaBlur }), this.hasError ? (h("q2-icon", { type: "error", class: "icon-error" })) : (''), this.showResize && (h("button", { onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart, class: "btn-resize", "aria-label": loc('tecton.element.input.resize'), tabIndex: -1 }, h("svg", { "aria-hidden": "true", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11", fill: "none", "stroke-stroke-linecap": "square" }))))));
   }
   static get is() { return "q2-textarea"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "hideLabel": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hide-label",
-      "reflect": true
-    },
-    "hideMessages": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hide-messages",
-      "reflect": true
-    },
-    "optional": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "optional",
-      "reflect": true
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placeholder",
-      "reflect": true
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": true
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "readonly",
-      "reflect": true
-    },
-    "spellcheck": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "attribute": "spellcheck",
-      "reflect": true
-    },
-    "maxlength": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "hideLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-label",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "hideMessages": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-messages",
+        "reflect": true
       },
-      "attribute": "maxlength",
-      "reflect": true
-    },
-    "rows": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "optional": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "optional",
+        "reflect": true
       },
-      "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": true
       },
-      "attribute": "rows",
-      "reflect": true
-    },
-    "cols": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": true
       },
-      "attribute": "cols",
-      "reflect": true
-    },
-    "resize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'none' | 'vertical' | 'horizontal' | 'both'",
-        "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
-        "references": {}
+      "spellcheck": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "spellcheck",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "maxlength": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "maxlength",
+        "reflect": true
       },
-      "attribute": "resize",
-      "reflect": true,
-      "defaultValue": "'vertical'"
-    },
-    "errors": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
+      "rows": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "rows",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "hints": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
+      "cols": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "cols",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "hasFocus": {},
-    "downParams": {}
-  }; }
-  static get events() { return [{
-      "method": "input",
-      "name": "input",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "resize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'none' | 'vertical' | 'horizontal' | 'both'",
+          "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "resize",
+        "reflect": true,
+        "defaultValue": "'vertical'"
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "errors": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "hints": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "hasFocus": {},
+      "downParams": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "input",
+        "name": "input",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "valueObserver"
-    }, {
-      "propName": "rows",
-      "methodName": "rowsObserver"
-    }, {
-      "propName": "cols",
-      "methodName": "colsObserver"
-    }, {
-      "propName": "hints",
-      "methodName": "hintsObserver"
-    }, {
-      "propName": "errors",
-      "methodName": "errorsObserver"
-    }]; }
-  static get listeners() { return [{
-      "name": "focus",
-      "method": "onHostElementFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "change",
-      "method": "onHostElementChange",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "valueObserver"
+      }, {
+        "propName": "rows",
+        "methodName": "rowsObserver"
+      }, {
+        "propName": "cols",
+        "methodName": "colsObserver"
+      }, {
+        "propName": "hints",
+        "methodName": "hintsObserver"
+      }, {
+        "propName": "errors",
+        "methodName": "errorsObserver"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "focus",
+        "method": "onHostElementFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "change",
+        "method": "onHostElementChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }