wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/textarea/vds-basic-textarea.js

@@ -0,0 +1,532 @@
+import { Host, h } from "@stencil/core";
+import { toggleFocusClass, setTouchedClass, setDirtyClass, maskInput, setInputStyles } from "../input/vds-basic-input.utils";
+import { combineClasses } from "../../utils/combine-classes";
+import { cloneAttributes } from "../../utils/clone-attributes";
+import spacingVars from "../../constants/spacing-vars";
+export class VdsBasicTextarea {
+    constructor() {
+        /** Sets the textarea's size. */
+        this.size = "medium";
+        /** Toggles the required sign in the field */
+        this.isRequired = false;
+        /** Sets custom allowed styles to textarea (text-align, text-transform, unicode-bidi, direction) */
+        this.allowedStyles = [];
+        /** Sets the min-height for the textarea. This property works combining with autogrow=true only.
+         * - Default for medium: '4.5rem'
+         * - Default for large: '6rem'
+         *
+         * This value is automatically adjusted according to the 'size' property.
+         * @default '4.5rem' (when size is 'medium')
+        */
+        this.minHeight = this.size === "large" ? "6rem" : this.size === "small" ? "3rem" : "4.5rem";
+        /** Sets the max-height for the textarea. This property works combining with autogrow=true only.
+         * - Default for medium: '12.15rem'
+         * - Default for large: '18rem'
+         *
+         * This value is automatically adjusted according to the 'size' property.
+         * @default '12.15rem' (when size is 'medium')
+        */
+        this.maxHeight = this.size === "large" ? "18rem" : "12.15rem";
+        /** Makes the textarea grows with its content. This property works combining with maxHeight and minHeight. This prop not works combining with property height defined. */
+        this.autogrow = true;
+    }
+    componentDidLoad() {
+        this.setFormValue();
+    }
+    setFormValue() {
+        if (this.internals && !!this.internals.setFormValue) {
+            this.internals.setFormValue(this.value);
+        }
+    }
+    /**
+     * Toggle class vds__textarea__container--focus in focus/blur textarea's event
+     *
+     * @returns void
+     */
+    toggleFocusClass() {
+        this.textareaContainerRef && toggleFocusClass(this.textareaContainerRef, "textarea");
+    }
+    /**
+     * Sets value from textarea's event target.
+     * Emits change, input and changeInput events.
+     * Sets textarea as dirty when textarea's event is triggered.
+     * Executes formatter prop function on every inputed value.
+     *
+     * @returns void
+     */
+    handleInput(evt) {
+        evt.stopPropagation();
+        const target = evt.target;
+        const inputEvent = new InputEvent("input");
+        setDirtyClass(this.hostEl);
+        if (this.formatter) {
+            const maskValue = maskInput(this.formatter, target.value, this.value, evt.data, target, evt);
+            this.value = maskValue;
+        }
+        else {
+            this.value = target.value;
+        }
+        this.changeInput.emit(this.value);
+        this.hostEl.dispatchEvent(inputEvent);
+    }
+    /**
+     * Sets textarea inline styles for the allowedStyle, height and width
+     * [direction, text-align, textAlign, text-transform, textTransform, unicode-bidi, unicodeBidi]
+     *
+     * @returns { [key: string]: string }
+     */
+    setTextareaStyles() {
+        const inputedStyles = Object.assign({}, setInputStyles(this.allowedStyles));
+        if (this.autogrow) {
+            inputedStyles.fieldSizing = "content";
+        }
+        const styles = this.setSizesStyles(inputedStyles) || {};
+        const paddingOffset = this.size === "large" ? spacingVars["spacing-04"] : this.size === "small" ? spacingVars["spacing-02"] : spacingVars["spacing-03"];
+        if (styles.height && !this.autogrow) {
+            styles.height = `calc(${styles.height} - ${paddingOffset} * 2)`;
+        }
+        if (styles.minHeight) {
+            styles.minHeight = `calc(${styles.minHeight} - ${paddingOffset} * 2)`;
+        }
+        if (styles.maxHeight) {
+            styles.maxHeight = `calc(${styles.maxHeight} - ${paddingOffset} * 2)`;
+        }
+        return styles;
+    }
+    /**
+     * Sets textarea inline styles for the height and width
+     *
+     * @returns { [key: string]: string }
+     */
+    setSizesStyles(styles = {}) {
+        if (this.width) {
+            styles.width = this.width;
+        }
+        if (this.height) {
+            styles.height = this.height;
+        }
+        if (this.maxHeight) {
+            styles.maxHeight = this.maxHeight;
+        }
+        if (this.minHeight) {
+            styles.minHeight = this.minHeight;
+        }
+        return styles;
+    }
+    /**
+       * Executes method when vds-textarea gets focus.
+       *
+       * @returns void
+       */
+    handleFocus() {
+        setTouchedClass(this.hostEl);
+    }
+    /**
+       * Sets focus on the vds-textarea element.
+       *
+       * @returns Promise<void>
+       */
+    setFocus() {
+        return new Promise((resolve) => {
+            this.textAreaEl.focus();
+            resolve();
+        });
+    }
+    /**
+       * Gets value prop from the vds-textarea element.
+       *
+       * @returns Promise<string>
+       */
+    getValue() {
+        return new Promise((resolve) => {
+            resolve(this.value);
+        });
+    }
+    render() {
+        return (h(Host, { key: '400f6c0345910e2ee8dda5bc426fb7a8675803d9', class: this.disabled ? "vds-basic-textarea--disabled" : "" }, h("div", { key: 'd667d3160bbf7bde2ecc649ecf084fadf6009720', ref: (el) => {
+                if (el)
+                    this.textareaContainerRef = el;
+            }, class: combineClasses("vds__textarea__container", `vds__textarea--size-${this.size}`, this.error && "vds__textarea__container--error", this.isReadonly && "vds__textarea__container--readonly", this.disabled && "vds__textarea__container--disabled"), style: this.setSizesStyles() }, h("textarea", Object.assign({ key: '25f193b360c92400f4802ec6adb046bf032575af', ref: (el) => {
+                if (el)
+                    this.textAreaEl = el;
+            }, class: "vds__textarea", value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.isRequired, readOnly: this.isReadonly, style: this.setTextareaStyles(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.toggleFocusClass(), onBlur: () => this.toggleFocusClass() }, cloneAttributes(this.hostEl, "class", "value", "disabled", "placeholder", "label", "style"))), h("slot", { key: 'eeeb73ebb6e3c030f5b5d46db9b28b62365b33ed', name: "secondaryActionIcon" }), h("slot", { key: '046a986270f73211b97cfc009e90dd043e142849', name: "primaryActionIcon" }))));
+    }
+    static get is() { return "vds-basic-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-basic-textarea.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-basic-textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"small\" | \"medium\" | \"large\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the textarea's size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the textarea's value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the textarea's placeholder."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the textarea in disabled state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "isReadonly": {
+                "type": "boolean",
+                "attribute": "is-readonly",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the textarea in readonly state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "error": {
+                "type": "boolean",
+                "attribute": "error",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the textarea in error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "isRequired": {
+                "type": "boolean",
+                "attribute": "is-required",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the required sign in the field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "formatter": {
+                "type": "unknown",
+                "attribute": "formatter",
+                "mutable": true,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets character formatting for user inputs. Useful for adding a mask to the textarea."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "allowedStyles": {
+                "type": "unknown",
+                "attribute": "allowed-styles",
+                "mutable": true,
+                "complexType": {
+                    "original": "{ [key: string]: string }[]",
+                    "resolved": "{ [key: string]: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets custom allowed styles to textarea (text-align, text-transform, unicode-bidi, direction)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "width": {
+                "type": "string",
+                "attribute": "width",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the width of the textarea."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "height": {
+                "type": "string",
+                "attribute": "height",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the height of the textarea. This prop not works combining with autogrow=true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "minHeight": {
+                "type": "string",
+                "attribute": "min-height",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'4.5rem' (when size is 'medium')"
+                        }],
+                    "text": "Sets the min-height for the textarea. This property works combining with autogrow=true only. \n- Default for medium: '4.5rem'\n- Default for large: '6rem'\n\nThis value is automatically adjusted according to the 'size' property."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "this.size === \"large\" ? \"6rem\" : this.size === \"small\" ? \"3rem\" : \"4.5rem\""
+            },
+            "maxHeight": {
+                "type": "string",
+                "attribute": "max-height",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'12.15rem' (when size is 'medium')"
+                        }],
+                    "text": "Sets the max-height for the textarea. This property works combining with autogrow=true only. \n- Default for medium: '12.15rem'\n- Default for large: '18rem'\n\nThis value is automatically adjusted according to the 'size' property."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "this.size === \"large\" ? \"18rem\" : \"12.15rem\""
+            },
+            "autogrow": {
+                "type": "boolean",
+                "attribute": "autogrow",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the textarea grows with its content. This property works combining with maxHeight and minHeight. This prop not works combining with property height defined."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeInput",
+                "name": "changeInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits updated textarea value"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the vds-textarea element.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }]
+                }
+            },
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Gets value prop from the vds-textarea element.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<string>"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "setFormValue"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "focus",
+                "method": "handleFocus",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=vds-basic-textarea.js.map

package/dist/collection/components/textarea/vds-basic-textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-basic-textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/vds-basic-textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,OAAO,EACP,KAAK,EAEL,MAAM,EACP,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,SAAS,EACT,cAAc,EACf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAsB,MAAM,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC5F,OAAO,WAAW,MAAM,8BAA8B,CAAC;AAQvD,MAAM,OAAO,gBAAgB;IAN7B;QAOE,gCAAgC;QACP,SAAI,GAAiC,QAAQ,CAAC;QAWvE,6CAA6C;QACL,eAAU,GAAY,KAAK,CAAA;QAGnE,mGAAmG;QAC1E,kBAAa,GAAgC,EAAE,CAAC;QAKzE;;;;;;UAME;QACuB,cAAS,GAAW,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;QACxH;;;;;;UAME;QACuB,cAAS,GAAW,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC;QAC1F,yKAAyK;QAChJ,aAAQ,GAAY,IAAI,CAAC;KA+LnD;IAnLC,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAGD,YAAY;QACV,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;YACpD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAED;;;;OAIG;IACK,gBAAgB;QACtB,IAAI,CAAC,oBAAoB,IAAI,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;IACvF,CAAC;IAED;;;;;;;OAOG;IACK,WAAW,CAAC,GAAe;QACjC,GAAG,CAAC,eAAe,EAAE,CAAC;QACtB,MAAM,MAAM,GAAG,GAAG,CAAC,MAA6B,CAAC;QACjD,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;QAC3C,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAE3B,IAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YAClB,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;YAC7F,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC5B,CAAC;QAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACtC,CAAC;IAGD;;;;;OAKG;IACO,iBAAiB;QACvB,MAAM,aAAa,qBAAO,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,CAAE,CAAC;QAE/D,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,aAAa,CAAC,WAAW,GAAG,SAAS,CAAC;QACxC,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QACxD,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAA;QAEvJ,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACpC,MAAM,CAAC,MAAM,GAAG,QAAQ,MAAM,CAAC,MAAM,MAAM,aAAa,OAAO,CAAC;QAClE,CAAC;QAED,IAAI,MAAM,CAAC,SAAS,EAAE,CAAC;YACrB,MAAM,CAAC,SAAS,GAAG,QAAQ,MAAM,CAAC,SAAS,MAAM,aAAa,OAAO,CAAC;QACxE,CAAC;QAED,IAAI,MAAM,CAAC,SAAS,EAAE,CAAC;YACrB,MAAM,CAAC,SAAS,GAAG,QAAQ,MAAM,CAAC,SAAS,MAAM,aAAa,OAAO,CAAC;QACxE,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAED;;;;OAIG;IACK,cAAc,CAAC,SAAoC,EAAE;QAC3D,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC9B,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACpC,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACpC,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAEH;;;;SAIE;IAEH,WAAW;QACR,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;IAEA;;;;SAIE;IAEH,QAAQ;QACL,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;YACxB,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;IACN,CAAC;IAEA;;;;SAIE;IAEH,QAAQ;QACL,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,CAAC,CAAC;IACN,CAAC;IAEA,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,EAAE;YAC5D,4DACE,GAAG,EAAE,CAAC,EAAE,EAAQ,EAAE,GAAG,IAAG,EAAE;oBAAE,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAA,CAAA,CAAC,EAC3D,KAAK,EAAE,cAAc,CACnB,0BAA0B,EAC1B,uBAAuB,IAAI,CAAC,IAAI,EAAE,EAClC,IAAI,CAAC,KAAK,IAAI,iCAAiC,EAC/C,IAAI,CAAC,UAAU,IAAI,oCAAoC,EACvD,IAAI,CAAC,QAAQ,IAAI,oCAAoC,CACtD,EACD,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;gBAE5B,+EACE,GAAG,EAAE,CAAC,EAAE,EAAQ,EAAE,GAAG,IAAG,EAAE;wBAAE,IAAI,CAAC,UAAU,GAAG,EAAE,CAAA,CAAA,CAAC,EACjD,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAC/B,OAAO,EAAE,CAAC,GAAG,EAAQ,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,GAAS,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAC5C,MAAM,EAAE,GAAS,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,IACvC,eAAe,CACjB,IAAI,CAAC,MAAM,EACX,OAAO,EACP,OAAO,EACP,UAAU,EACV,aAAa,EACb,OAAO,EACP,OAAO,CACR,EACS;gBACZ,6DAAM,IAAI,EAAC,qBAAqB,GAAG;gBACnC,6DAAM,IAAI,EAAC,mBAAmB,GAAG,CAC7B,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Event,\n  EventEmitter,\n  Method\n} from '@stencil/core';\nimport {\n  toggleFocusClass,\n  setTouchedClass,\n  setDirtyClass, \n  maskInput,\n  setInputStyles\n} from '../input/vds-basic-input.utils';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { AttachInternals, HTMLStencilElement, Listen, Watch } from '@stencil/core/internal';\nimport spacingVars from '../../constants/spacing-vars';\n\n@Component({\n  tag: 'vds-basic-textarea',\n  styleUrl: 'vds-basic-textarea.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsBasicTextarea {\n  /** Sets the textarea's size. */\n  @Prop({ mutable: true }) size: \"small\" | \"medium\" | \"large\" = \"medium\";\n  /** Sets the textarea's value. */\n  @Prop({ mutable: true }) value: string;\n  /** Sets the textarea's placeholder. */\n  @Prop({ mutable: true }) placeholder: string;\n  /** Sets the textarea in disabled state. */\n  @Prop({ mutable: true }) disabled: boolean;\n  /** Sets the textarea in readonly state. */\n  @Prop({ mutable: true }) isReadonly: boolean;\n  /** Sets the textarea in error state. */\n  @Prop({ mutable: true, reflect: true }) error: boolean;\n  /** Toggles the required sign in the field */\n  @Prop({ mutable: true, reflect: true }) isRequired: boolean = false \n  /** Sets character formatting for user inputs. Useful for adding a mask to the textarea. */\n  @Prop({ mutable: true }) formatter: Function;\n  /** Sets custom allowed styles to textarea (text-align, text-transform, unicode-bidi, direction) */\n  @Prop({ mutable: true }) allowedStyles: { [key: string]: string }[] = [];\n  /** Sets the width of the textarea. */\n  @Prop({ mutable: true }) width: string;\n  /** Sets the height of the textarea. This prop not works combining with autogrow=true. */\n  @Prop({ mutable: true }) height: string;\n  /** Sets the min-height for the textarea. This property works combining with autogrow=true only. \n   * - Default for medium: '4.5rem'\n   * - Default for large: '6rem'\n   * \n   * This value is automatically adjusted according to the 'size' property.\n   * @default '4.5rem' (when size is 'medium')\n  */\n  @Prop({ mutable: true }) minHeight: string = this.size === \"large\" ? \"6rem\" : this.size === \"small\" ? \"3rem\" : \"4.5rem\";\n  /** Sets the max-height for the textarea. This property works combining with autogrow=true only. \n   * - Default for medium: '12.15rem'\n   * - Default for large: '18rem'\n   * \n   * This value is automatically adjusted according to the 'size' property.\n   * @default '12.15rem' (when size is 'medium')\n  */\n  @Prop({ mutable: true }) maxHeight: string = this.size === \"large\" ? \"18rem\" : \"12.15rem\";\n  /** Makes the textarea grows with its content. This property works combining with maxHeight and minHeight. This prop not works combining with property height defined. */\n  @Prop({ mutable: true }) autogrow: boolean = true;\n\n  @Element() hostEl: HTMLVdsBasicTextareaElement;    \n\n\t/**  Emits updated textarea value */\n\t@Event() changeInput: EventEmitter<string>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private textareaContainerRef: HTMLDivElement;\n  private textAreaEl: HTMLTextAreaElement;\n\n  componentDidLoad(): void {\n    this.setFormValue();\n  }\n\n  @Watch(\"value\")\n  setFormValue(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.value);\n    }\n  }\n\n  /**\n   * Toggle class vds__textarea__container--focus in focus/blur textarea's event\n   *\n   * @returns void\n   */\n  private toggleFocusClass(): void {\n    this.textareaContainerRef && toggleFocusClass(this.textareaContainerRef, \"textarea\");\n  }\n\n  /**\n   * Sets value from textarea's event target.\n   * Emits change, input and changeInput events.\n   * Sets textarea as dirty when textarea's event is triggered.\n   * Executes formatter prop function on every inputed value.\n   *\n   * @returns void\n   */\n  private handleInput(evt: InputEvent): void {\n    evt.stopPropagation();\n    const target = evt.target as HTMLTextAreaElement; \n    const inputEvent = new InputEvent(\"input\");\n    setDirtyClass(this.hostEl);\n\n    if(this.formatter) {\n      const maskValue = maskInput(this.formatter, target.value, this.value, evt.data, target, evt);\n      this.value = maskValue;\n    } else {\n      this.value = target.value;\n    }\n\n    this.changeInput.emit(this.value);\n\t\tthis.hostEl.dispatchEvent(inputEvent);\n  }\n\n\n  /**\n   * Sets textarea inline styles for the allowedStyle, height and width\n   * [direction, text-align, textAlign, text-transform, textTransform, unicode-bidi, unicodeBidi]\n   *\n   * @returns { [key: string]: string }\n   */\n    private setTextareaStyles(): { [key: string]: string } {\n      const inputedStyles = {...setInputStyles(this.allowedStyles) };\n\n      if (this.autogrow) {\n        inputedStyles.fieldSizing = \"content\";\n      }\n\n      const styles = this.setSizesStyles(inputedStyles) || {};\n      const paddingOffset = this.size === \"large\" ? spacingVars[\"spacing-04\"] : this.size === \"small\" ? spacingVars[\"spacing-02\"] : spacingVars[\"spacing-03\"]\n\n      if (styles.height && !this.autogrow) {\n        styles.height = `calc(${styles.height} - ${paddingOffset} * 2)`;\n      }\n\n      if (styles.minHeight) {\n        styles.minHeight = `calc(${styles.minHeight} - ${paddingOffset} * 2)`;\n      }\n\n      if (styles.maxHeight) {\n        styles.maxHeight = `calc(${styles.maxHeight} - ${paddingOffset} * 2)`;\n      }\n      \n      return styles;\n    }\n\n    /**\n     * Sets textarea inline styles for the height and width\n     *\n     * @returns { [key: string]: string }\n     */\n    private setSizesStyles(styles: { [key: string]: string } = {}): { [key: string]: string } {\n      if (this.width) {\n        styles.width = this.width;\n      }\n\n      if (this.height) {\n        styles.height = this.height;\n      }\n\n      if (this.maxHeight) {\n        styles.maxHeight = this.maxHeight;\n      }\n\n      if (this.minHeight) {\n        styles.minHeight = this.minHeight;\n      }\n\n      return styles;\n    }\n\n  /**\n\t * Executes method when vds-textarea gets focus.\n\t *\n\t * @returns void\n\t */\n\t@Listen(\"focus\")\n\thandleFocus(): void {\n    setTouchedClass(this.hostEl);\n\t}\n\n  /**\n\t * Sets focus on the vds-textarea element.\n\t *\n\t * @returns Promise<void>\n\t */\n\t@Method()\n\tsetFocus(): Promise<void> {\n    return new Promise((resolve) => {\n      this.textAreaEl.focus();\n      resolve();\n    });\n\t}\n\n  /**\n\t * Gets value prop from the vds-textarea element.\n\t *\n\t * @returns Promise<string>\n\t */\n\t@Method()\n\tgetValue(): Promise<string> {\n    return new Promise((resolve) => {\n      resolve(this.value);\n    });\n\t}\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? \"vds-basic-textarea--disabled\" : \"\"}>\n          <div\n            ref={(el): void => { if(el) this.textareaContainerRef = el} }\n            class={combineClasses(\n              \"vds__textarea__container\",\n              `vds__textarea--size-${this.size}`,\n              this.error && \"vds__textarea__container--error\",\n              this.isReadonly && \"vds__textarea__container--readonly\",\n              this.disabled && \"vds__textarea__container--disabled\"\n            )}\n            style={this.setSizesStyles()}\n          >\n            <textarea\n              ref={(el): void => { if(el) this.textAreaEl = el} }\n              class={\"vds__textarea\"}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.isRequired}\n              readOnly={this.isReadonly}\n              style={this.setTextareaStyles()}\n              onInput={(evt): void => this.handleInput(evt)}\n              onFocus={(): void => this.toggleFocusClass()}\n              onBlur={(): void => this.toggleFocusClass()}\n              {...cloneAttributes(\n                this.hostEl,\n                \"class\",\n                \"value\",\n                \"disabled\",\n                \"placeholder\",\n                \"label\",\n                \"style\"\n              )}\n            ></textarea>\n            <slot name=\"secondaryActionIcon\" />\n            <slot name=\"primaryActionIcon\" />\n          </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/textarea/vds-basic-textarea.stories.js

@@ -0,0 +1,113 @@
+export default {
+    title: 'VDS/Components/Textarea/basic-textarea',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+    },
+    argTypes: {
+        size: {
+            options: ["small", "medium", "large"],
+            control: { type: "select" }
+        },
+    },
+};
+const styles = `
+    div {
+       margin: 20px;
+       width: 400px; 
+    }
+`;
+const codeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<div>
+    <form>
+        <vds-basic-textarea
+            size="${args.size}"
+            label="${args.label}"
+            value="${args.value}"
+            placeholder="${args.placeholder}"
+            ${args.disabled ? `disabled="${args.disabled}"` : ""}
+            ${args.isReadonly ? `is-readonly="${args.isReadonly}` : ""}
+            ${args.error ? `error="${args.error}"` : ""}
+            autogrow="${args.autogrow}"
+            is-required="${args.isRequired}"
+            width="${args.width}"
+            height="${args.height}"
+            ${args.maxHeight ? `max-height="${args.maxHeight}"` : ""}
+            ${args.minHeight ? `min-height="${args.minHeight}"` : ""}
+        >
+        </vds-basic-textarea>
+    </form>
+</div>
+`;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    size: "medium",
+    value: "",
+    placeholder: "Placeholder 1",
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    isRequired: false,
+    autogrow: false,
+    height: "",
+    width: "",
+    maxHeight: "",
+    minHeight: ""
+};
+const codeTemplateWithSlottedIcons = (args) => {
+    return `
+<style>${styles}</style>
+<div>
+    <form>
+        <vds-basic-textarea
+            size="${args.size}"
+            label="${args.label}"
+            value="${args.value}"
+            placeholder="${args.placeholder}"
+            disabled="${args.disabled}"
+            autogrow="${args.autogrow}"
+            is-readonly="${args.isReadonly}"
+            error="${args.error}"
+            is-required="${args.isRequired}"
+            width="${args.width}"
+            height="${args.height}"
+            ${args.maxHeight ? `max-height="${args.maxHeight}"` : ""}
+            ${args.minHeight ? `min-height="${args.minHeight}"` : ""}
+        >  
+        <vds-icon-button
+            slot="secondaryActionIcon"
+            icon="add"
+            variant="secondary"
+            size="${args.size === 'medium' ? 'small' : 'medium'}">
+        </vds-icon-button>
+        <vds-icon-button
+            slot="primaryActionIcon"
+            icon="zoom"
+            variant="secondary"
+            size="${args.size === 'medium' ? 'small' : 'medium'}">
+        </vds-icon-button>
+        </vds-basic-textarea>
+    </form>
+</div>
+`;
+};
+export const BasicUsageWithSlottedIcons = codeTemplateWithSlottedIcons.bind({});
+BasicUsageWithSlottedIcons.args = {
+    size: "medium",
+    value: "",
+    placeholder: "Placeholder 1",
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    isRequired: false,
+    autogrow: false,
+    height: "",
+    width: "",
+    maxHeight: "",
+    minHeight: ""
+};
+//# sourceMappingURL=vds-basic-textarea.stories.js.map