xv-webcomponents 0.1.44 → 0.1.48

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

@@ -0,0 +1,411 @@
+import { Host, h } from "@stencil/core";
+import { SIZE_VAR } from "../../types/enum";
+export class XvTextarea {
+    constructor() {
+        this.value = '';
+        this.loading = false;
+        this.rows = 4;
+        this.size = SIZE_VAR.MD;
+        this.onInput = (e) => {
+            const target = e.target;
+            const val = target.value;
+            if (val.length <= this.max) {
+                this.value = val;
+                this.valueChange.emit(val);
+                this.internals.setFormValue(this.value);
+            }
+        };
+    }
+    componentWillLoad() {
+        this.value && this.internals.setFormValue(this.value);
+    }
+    render() {
+        return (h(Host, { key: '3bc07e9f443313fd4dbc0545237ab7bc970ebc12', class: { disabled: !!this.disabled } }, h("label", { key: '1076f7c69d7ed672cd9efcb0b11e5be97bac9724', class: "control" }, (this.label || this.max) && (h("p", { key: '8bfe509434fbfc8653c7705fa160de1fc160157c', class: "control_label" }, h("span", { key: '2e9ceb720b141847ac58091b2bd0112ea1f44559' }, this.label, this.info && h("xv-tooltip-v2", { key: 'e0aa0a93a4e6f6452bb2ccf3cef52856d8441c20', message: this.info })), this.max !== undefined && !this.counterHide && (h("span", { key: '8e2e1406ccdb108fc02e1df13fd12ac6a1e21c35', class: "control_label__count" }, this.value.length || 0, "/", this.max)))), h("div", { key: '923b1285a9ae16f7bdef75c708b7970482f67cf8', class: {
+                'control_input': true,
+                readonly: !!this.readonly,
+                error: this.error !== undefined,
+                warning: this.warning !== undefined,
+            } }, h("textarea", { key: '14cec83f411224a5823a1fbabdd2b408eb1b7284', class: { 'no-resize': !!this.noResize }, name: this.name, rows: this.rows, value: this.value, maxLength: this.max, disabled: this.disabled, readOnly: this.readonly, placeholder: this.placeholder, onInput: this.onInput }), h("div", { key: '3de6d4a96e4582d39e0dcc3959134477a4df701c', class: "control_input__icons" }, this._renderIcon()))), this.helper && h("p", { key: 'cd5bc0a6aba0820fda297033c177e222f6d1e764', class: "message" }, this.helper), typeof this.error === 'string' ? (h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (h("p", { class: "message warning" }, this.warning)) : null));
+    }
+    _renderIcon() {
+        if (this.loading)
+            return h("xv-loader-v2", { size: SIZE_VAR.XS });
+        if (this.error !== undefined) {
+            return h("span", { class: "status-icon error", "aria-hidden": "true" }, "!");
+        }
+        else if (this.warning !== undefined) {
+            return h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0");
+        }
+        return null;
+    }
+    static get is() { return "xv-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-textarea.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "helper": {
+                "type": "string",
+                "attribute": "helper",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "info": {
+                "type": "string",
+                "attribute": "info",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "error": {
+                "type": "any",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "warning": {
+                "type": "any",
+                "attribute": "warning",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "block": {
+                "type": "boolean",
+                "attribute": "block",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "counterHide": {
+                "type": "boolean",
+                "attribute": "counter-hide",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "noResize": {
+                "type": "boolean",
+                "attribute": "no-resize",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "max": {
+                "type": "number",
+                "attribute": "max",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "rows": {
+                "type": "number",
+                "attribute": "rows",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "4"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SIZE_VAR",
+                    "resolved": "SIZE_VAR.LG | SIZE_VAR.MD | SIZE_VAR.SM | SIZE_VAR.XL | SIZE_VAR.XS",
+                    "references": {
+                        "SIZE_VAR": {
+                            "location": "import",
+                            "path": "../../types/enum",
+                            "id": "src/types/enum.ts::SIZE_VAR"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "SIZE_VAR.MD"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=xv-textarea.js.map

package/dist/collection/components/xv-textarea/xv-textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-textarea.js","sourceRoot":"","sources":["../../../src/components/xv-textarea/xv-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, AttachInternals, Event, EventEmitter } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-textarea',\n  styleUrl: 'xv-textarea.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class XvTextarea {\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() name?: string;\n  @Prop() label?: string;\n  @Prop() placeholder?: string;\n  @Prop() helper?: string;\n  @Prop() info?: string;\n  @Prop() error?: string | boolean;\n  @Prop() warning?: string | boolean;\n  @Prop() disabled?: boolean;\n  @Prop() readonly?: boolean;\n  @Prop() block?: boolean;\n  @Prop({ attribute: 'counter-hide' }) counterHide?: boolean;\n  @Prop() noResize?: boolean;\n  @Prop() loading: boolean = false;\n  @Prop() max?: number;\n  @Prop() rows: number = 4;\n  @Prop({ reflect: true }) size: SIZE_VAR = SIZE_VAR.MD;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event() valueChange: EventEmitter<string>;\n\n  private onInput = (e: Event) => {\n    const target = e.target as HTMLTextAreaElement;\n    const val = target.value;\n\n    if (val.length <= this.max) {\n      this.value = val;\n      this.valueChange.emit(val);\n      this.internals.setFormValue(this.value);\n    }\n  };\n\n  componentWillLoad() {\n    this.value && this.internals.setFormValue(this.value);\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: !!this.disabled }}>\n        <label class=\"control\">\n          {(this.label || this.max) && (\n            <p class=\"control_label\">\n              <span>\n                {this.label}\n                {this.info && <xv-tooltip-v2 message={this.info}></xv-tooltip-v2>}\n              </span>\n              {this.max !== undefined && !this.counterHide && (\n                <span class=\"control_label__count\">{this.value.length || 0}/{this.max}</span>\n              )}\n            </p>\n          )}\n          <div class={{\n            'control_input': true,\n            readonly: !!this.readonly,\n            error: this.error !== undefined,\n            warning: this.warning !== undefined,\n          }}>\n             <textarea\n               class={{ 'no-resize': !!this.noResize }}\n               name={this.name}\n               rows={this.rows}\n               value={this.value}\n               maxLength={this.max}\n               disabled={this.disabled}\n               readOnly={this.readonly}\n               placeholder={this.placeholder}\n               onInput={this.onInput}\n             ></textarea>\n\n            <div class=\"control_input__icons\">\n              {this._renderIcon()}\n            </div>\n          </div>\n        </label>\n\n        {this.helper && <p class=\"message\">{this.helper}</p>}\n        {typeof this.error === 'string' ? (\n          <p class=\"message error\">{this.error}</p>\n        ) : typeof this.warning === 'string' ? (\n          <p class=\"message warning\">{this.warning}</p>\n        ) : null}\n      </Host>\n    );\n  }\n\n  private _renderIcon() {\n    if (this.loading) return <xv-loader-v2 size={SIZE_VAR.XS} />;\n\n    if (this.error !== undefined) {\n      return <span class=\"status-icon error\" aria-hidden=\"true\">!</span>\n    } else if (this.warning !== undefined) {\n      return <span class=\"status-icon warning\" aria-hidden=\"true\">⚠</span>\n    }\n\n    return null;\n  }\n}\n"]}