wabtec-internal-volt-basic-components 1.0.0 → 1.2.0

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

@@ -3,10 +3,13 @@ import { toggleFocusClass, setTouchedClass, setDirtyClass, maskInput, setInputSt
 import { combineClasses } from "../../utils/combine-classes";
 import { cloneAttributes } from "../../utils/clone-attributes";
 import spacingVars from "../../constants/spacing-vars";
+import { emitInputEvent } from "../../utils/form";
 export class VdsBasicTextarea {
     constructor() {
         /** Sets the textarea's size. */
         this.size = "medium";
+        /** Sets the textarea's value. */
+        this.value = "";
         /** Toggles the required sign in the field */
         this.isRequired = false;
         /** Sets custom allowed styles to textarea (text-align, text-transform, unicode-bidi, direction) */
@@ -34,6 +37,7 @@ export class VdsBasicTextarea {
         this.setFormValue();
     }
     setFormValue() {
+        emitInputEvent(this.hostEl, this.value);
         if (this.internals && !!this.internals.setFormValue) {
             this.internals.setFormValue(this.value);
         }
@@ -142,14 +146,26 @@ export class VdsBasicTextarea {
             resolve(this.value);
         });
     }
+    /**
+     * Clears value prop from the vds-basic-textarea element.
+     *
+     * @returns Promise<void>
+     */
+    clear() {
+        return new Promise((resolve) => {
+            this.value = "";
+            this.textAreaEl.value = "";
+            resolve();
+        });
+    }
     render() {
-        return (h(Host, { key: '400f6c0345910e2ee8dda5bc426fb7a8675803d9', class: this.disabled ? "vds-basic-textarea--disabled" : "" }, h("div", { key: 'd667d3160bbf7bde2ecc649ecf084fadf6009720', ref: (el) => {
+        return (h(Host, { key: 'ce0880d208505fd7ce98188e0b42710c3fd0d901', class: this.disabled ? "vds-basic-textarea--disabled" : "" }, h("div", { key: '691447f20944dba91cde04da18c1700f5577dacc', 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) => {
+            }, 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: '2231289858287d7fa6ed08490b98d70e1e385a65', 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" }))));
+            }, 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: 'ba2ed5615fadab6c503c7a43b49dd90dcb18d40c', name: "secondaryActionIcon" }), h("slot", { key: '6b28d89f56daeb3260e05ec4bd4cb9af4f700e7a', name: "primaryActionIcon" }))));
     }
     static get is() { return "vds-basic-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -168,7 +184,6 @@ export class VdsBasicTextarea {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": true,
                 "complexType": {
                     "original": "\"small\" | \"medium\" | \"large\"",
@@ -184,11 +199,11 @@ export class VdsBasicTextarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -203,11 +218,12 @@ export class VdsBasicTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "\"\""
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -222,11 +238,11 @@ export class VdsBasicTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -241,11 +257,11 @@ export class VdsBasicTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "disabled"
             },
             "isReadonly": {
                 "type": "boolean",
-                "attribute": "is-readonly",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -260,11 +276,11 @@ export class VdsBasicTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "is-readonly"
             },
             "error": {
                 "type": "boolean",
-                "attribute": "error",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -279,11 +295,11 @@ export class VdsBasicTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "error"
             },
             "isRequired": {
                 "type": "boolean",
-                "attribute": "is-required",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -299,11 +315,11 @@ export class VdsBasicTextarea {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "is-required",
                 "defaultValue": "false"
             },
             "formatter": {
                 "type": "unknown",
-                "attribute": "formatter",
                 "mutable": true,
                 "complexType": {
                     "original": "Function",
@@ -326,7 +342,6 @@ export class VdsBasicTextarea {
             },
             "allowedStyles": {
                 "type": "unknown",
-                "attribute": "allowed-styles",
                 "mutable": true,
                 "complexType": {
                     "original": "{ [key: string]: string }[]",
@@ -345,7 +360,6 @@ export class VdsBasicTextarea {
             },
             "width": {
                 "type": "string",
-                "attribute": "width",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -360,11 +374,11 @@ export class VdsBasicTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "width"
             },
             "height": {
                 "type": "string",
-                "attribute": "height",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -379,11 +393,11 @@ export class VdsBasicTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "height"
             },
             "minHeight": {
                 "type": "string",
-                "attribute": "min-height",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -402,11 +416,11 @@ export class VdsBasicTextarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "min-height",
                 "defaultValue": "this.size === \"large\" ? \"6rem\" : this.size === \"small\" ? \"3rem\" : \"4.5rem\""
             },
             "maxHeight": {
                 "type": "string",
-                "attribute": "max-height",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -425,11 +439,11 @@ export class VdsBasicTextarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "max-height",
                 "defaultValue": "this.size === \"large\" ? \"18rem\" : \"12.15rem\""
             },
             "autogrow": {
                 "type": "boolean",
-                "attribute": "autogrow",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -445,6 +459,7 @@ export class VdsBasicTextarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "autogrow",
                 "defaultValue": "true"
             }
         };
@@ -508,6 +523,26 @@ export class VdsBasicTextarea {
                             "text": "Promise<string>"
                         }]
                 }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears value prop from the vds-basic-textarea element.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }]
+                }
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"vds-basic-textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/vds-basic-textarea.tsx"],"names":[],"mappings":"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","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"]}
+{"version":3,"file":"vds-basic-textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/vds-basic-textarea.tsx"],"names":[],"mappings":"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","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';\nimport { emitInputEvent } from '../../utils/form';\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    emitInputEvent(this.hostEl, this.value);\n\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  /**\n   * Clears value prop from the vds-basic-textarea element.\n   *\n   * @returns Promise<void>\n   */\n  @Method()\n  clear(): Promise<void> {\n    return new Promise((resolve) => {\n      this.value = \"\";\n      this.textAreaEl.value = \"\";\n      resolve();\n    });\n  }\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/tooltip/vds-tooltip.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
 :root {
   font-family: "Roboto Flex", sans-serif, sans-serif;
   box-sizing: border-box;
@@ -481,6 +480,13 @@
   --height-12:0.75rem;
 }
 
+@font-face {
+  font-family: "Roboto Flex";
+  src: url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");
+  font-weight: 100 1000;
+  font-stretch: 25% 151%;
+  font-style: normal;
+}
 :root body {
   --spacing-00:0rem;
   --spacing-01:0.125rem;
@@ -733,7 +739,15 @@
   --static-dataviz-div-red-blue-650:#163670;
   --static-dataviz-div-red-blue-700:#0B194C;
   --static-white:#ffffff;
+  --static-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --static-white-low:rgba(255, 255, 255, 0.3215686275);
+  --static-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --static-white-lowest:rgba(255, 255, 255, 0.1215686275);
   --static-black:#000000;
+  --static-black-medium:rgba(0, 0, 0, 0.6392156863);
+  --static-black-low:rgba(0, 0, 0, 0.3215686275);
+  --static-black-lower:rgba(0, 0, 0, 0.1607843137);
+  --static-black-lowest:rgba(0, 0, 0, 0.1215686275);
   --elevation-shadow-0:none;
   --elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);
   --elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);

package/dist/collection/components/tooltip/vds-tooltip.js

@@ -104,18 +104,18 @@ export class VdsTooltip {
         }
     }
     render() {
-        return (h(Host, { key: 'cc5a5df9e60891d7cff9049e54d479cec558324d', style: this.setMaxWidth() }, h("div", { key: '19332374cc2f16c799e0769196b76274246644dd', class: "vds__tooltip-trigger", onClick: (evt) => {
+        return (h(Host, { key: 'd936c55e708f6572909b283ac46e7910a6844416', style: this.setMaxWidth() }, h("div", { key: '24bf56c54cc650c4df53c8ddd6d2d4138c008ce7', class: "vds__tooltip-trigger", onClick: (evt) => {
                 this.handleClick(evt);
             }, ref: (triggerEl) => {
                 if (triggerEl)
                     this.actionElementRef = triggerEl;
-            } }, h("slot", { key: '03a39d74cb27027cef4d4299d86e9041e461d087', name: "tooltip-trigger" })), h("div", { key: '4243cdfb39225a7a839dd646f684da91cbef16c6', class: "vds__tooltip-container", ref: (tooltipEl) => {
+            } }, h("slot", { key: 'fdfe92e9bb1f6da214685e29e25f1d9e3bf9e785', name: "tooltip-trigger" })), h("div", { key: 'c31103d1b8ac82e96afc017c05d5ab3c688d5fe7', class: "vds__tooltip-container", ref: (tooltipEl) => {
                 if (tooltipEl)
                     this.tooltipElementRef = tooltipEl;
-            } }, h("div", { key: '0c502784f8b09f8818cf071eb368a26ef5a51bf8' }, this.type === 'standard' || this.type === 'manual' ? h("span", { class: "vds__tooltip-container-text" }, this.text) : h("slot", { name: "tooltip-content" })), h("div", { key: 'a93a118bbf7d20e7ce48469a4ff8e8dc30e3df87', class: "vds__tooltip-arrow", ref: (tooltipArrowEl) => {
+            } }, h("div", { key: '7806307702329619fd8a2ba3f53936b503f9ddaf' }, this.type === 'standard' || this.type === 'manual' ? h("span", { class: "vds__tooltip-container-text" }, this.text) : h("slot", { name: "tooltip-content" })), h("div", { key: '8fb5bc210cc969a2722ed297cc5e539b9e6d6a70', class: "vds__tooltip-arrow", ref: (tooltipArrowEl) => {
                 if (tooltipArrowEl)
                     this.arrowElementRef = tooltipArrowEl;
-            } }, h("svg", { key: '7c8e3569573d499cb67acae9f0fb85e2d7429f4c', class: "vds__tooltip-arrow-img", width: "8", height: "4", viewBox: "0 0 8 4", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '6b88e4dd0529cf2ef50cf866fc8a738fb0140cc2', id: "tooltip-caret-filled-small", d: "M0 0L4 4L8 0H0Z", fill: "var(--surface-overlay-default)" }))))));
+            } }, h("svg", { key: '0df738281da38846dc0c51089622ca1aba70d994', class: "vds__tooltip-arrow-img", width: "8", height: "4", viewBox: "0 0 8 4", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3640cf38e897faad29d8a424a3efbeab292cf68f', id: "tooltip-caret-filled-small", d: "M0 0L4 4L8 0H0Z", fill: "var(--surface-overlay-default)" }))))));
     }
     static get is() { return "vds-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -133,7 +133,6 @@ export class VdsTooltip {
         return {
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "\"standard\" | \"custom\" | \"manual\"",
@@ -149,11 +148,11 @@ export class VdsTooltip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "\"standard\""
             },
             "text": {
                 "type": "string",
-                "attribute": "text",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -168,11 +167,11 @@ export class VdsTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "text"
             },
             "position": {
                 "type": "string",
-                "attribute": "position",
                 "mutable": true,
                 "complexType": {
                     "original": "'top' | 'bottom' | 'right' | 'left'",
@@ -188,11 +187,11 @@ export class VdsTooltip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "position",
                 "defaultValue": "'top'"
             },
             "maxWidth": {
                 "type": "string",
-                "attribute": "max-width",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -208,11 +207,11 @@ export class VdsTooltip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "max-width",
                 "defaultValue": "\"10rem\""
             },
             "event": {
                 "type": "string",
-                "attribute": "event",
                 "mutable": true,
                 "complexType": {
                     "original": "'hover' | 'click'",
@@ -228,11 +227,11 @@ export class VdsTooltip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "event",
                 "defaultValue": "'hover'"
             },
             "autoPosition": {
                 "type": "boolean",
-                "attribute": "auto-position",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -248,6 +247,7 @@ export class VdsTooltip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "auto-position",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/upload-drag/vds-upload-drag.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
 :root {
   font-family: "Roboto Flex", sans-serif, sans-serif;
   box-sizing: border-box;
@@ -481,6 +480,13 @@
   --height-12:0.75rem;
 }
 
+@font-face {
+  font-family: "Roboto Flex";
+  src: url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");
+  font-weight: 100 1000;
+  font-stretch: 25% 151%;
+  font-style: normal;
+}
 :root body {
   --spacing-00:0rem;
   --spacing-01:0.125rem;
@@ -733,7 +739,15 @@
   --static-dataviz-div-red-blue-650:#163670;
   --static-dataviz-div-red-blue-700:#0B194C;
   --static-white:#ffffff;
+  --static-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --static-white-low:rgba(255, 255, 255, 0.3215686275);
+  --static-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --static-white-lowest:rgba(255, 255, 255, 0.1215686275);
   --static-black:#000000;
+  --static-black-medium:rgba(0, 0, 0, 0.6392156863);
+  --static-black-low:rgba(0, 0, 0, 0.3215686275);
+  --static-black-lower:rgba(0, 0, 0, 0.1607843137);
+  --static-black-lowest:rgba(0, 0, 0, 0.1215686275);
   --elevation-shadow-0:none;
   --elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);
   --elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);

package/dist/collection/components/upload-drag/vds-upload-drag.js

@@ -45,7 +45,7 @@ export class VdsUploadDrag {
         this.fileSelected.emit(files);
     }
     render() {
-        return (h(Host, { key: 'ccf2f981a3a06e500504d48827230868aec6da99', onClick: this.handleClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '8b94929477a6757adeb4e12173adc7330e4e48fe', type: "file", ref: el => (this.fileInput = el), onChange: this.handleFileInputChange, multiple: this.multiple, accept: this.accept, capture: this.capture, hidden: true }), h("vds-card", { key: 'd4d7614b842814d099f6e81f3dfbc6fde3b53d12', padding: "spacing-09", shadowBox: "elevation-shadow-0", class: { 'vds-card--drag-active': this.isDragging } }, h("div", { key: 'ecba860696469fa5fd1efe3fad5252142485d4a1', class: "vds-upload__content" }, h("slot", { key: 'dc64bb83a9244ddbb9b174822b5f8c531ab0d134', name: "icon" }), h("div", { key: '45735c2361c82c2326b19799138efa216bc796bf', class: "vds-upload__body" }, h("span", { key: 'c7332b825a8a4a17009e67b234a1770a1893cf29', class: "vds-upload__title" }, this.title), h("span", { key: '2c4100068ed459378ecea65d31e77c75c673f9af', class: "vds-upload__description" }, this.description))))));
+        return (h(Host, { key: '3182c23c04af0a53868de282f93bcb48b8f8731c', onClick: this.handleClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: 'b433d96a591ddba5c9baa558b92bdc6f8de66c21', type: "file", ref: el => (this.fileInput = el), onChange: this.handleFileInputChange, multiple: this.multiple, accept: this.accept, capture: this.capture, hidden: true }), h("vds-card", { key: '8484c4aa33412fceb784459c94bf4faea701feb5', padding: "spacing-09", shadowBox: "elevation-shadow-0", class: { 'vds-card--drag-active': this.isDragging } }, h("div", { key: '2de60a85e634e7ec5742564ba7b88c8a80d0168f', class: "vds-upload__content" }, h("slot", { key: '990b2aba63c5962c7f6ce4d72752519d72438ad4', name: "icon" }), h("div", { key: 'b49608d6262113792c73e2bed6d10fe8f478daac', class: "vds-upload__body" }, h("span", { key: '8ab3024dc21cb9017838e3158d59b85101f83d0a', class: "vds-upload__title" }, this.title), h("span", { key: '2a5ef09f29b464449fedece286a97ba067a78c5a', class: "vds-upload__description" }, this.description))))));
     }
     static get is() { return "vds-upload-drag"; }
     static get encapsulation() { return "shadow"; }
@@ -63,7 +63,6 @@ export class VdsUploadDrag {
         return {
             "title": {
                 "type": "string",
-                "attribute": "title",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -79,11 +78,11 @@ export class VdsUploadDrag {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "title",
                 "defaultValue": "'Click or drag file to this area to upload'"
             },
             "description": {
                 "type": "string",
-                "attribute": "description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -99,11 +98,11 @@ export class VdsUploadDrag {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "description",
                 "defaultValue": "'Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files'"
             },
             "multiple": {
                 "type": "boolean",
-                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -119,11 +118,11 @@ export class VdsUploadDrag {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "multiple",
                 "defaultValue": "true"
             },
             "accept": {
                 "type": "string",
-                "attribute": "accept",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -138,11 +137,11 @@ export class VdsUploadDrag {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "accept"
             },
             "capture": {
                 "type": "string",
-                "attribute": "capture",
                 "mutable": false,
                 "complexType": {
                     "original": "'user' | 'environment'",
@@ -157,7 +156,8 @@ export class VdsUploadDrag {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "capture"
             }
         };
     }

package/dist/collection/components/upload-item/vds-upload-item.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
 :root {
   font-family: "Roboto Flex", sans-serif, sans-serif;
   box-sizing: border-box;
@@ -481,6 +480,13 @@
   --height-12:0.75rem;
 }
 
+@font-face {
+  font-family: "Roboto Flex";
+  src: url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");
+  font-weight: 100 1000;
+  font-stretch: 25% 151%;
+  font-style: normal;
+}
 :root body {
   --spacing-00:0rem;
   --spacing-01:0.125rem;
@@ -733,7 +739,15 @@
   --static-dataviz-div-red-blue-650:#163670;
   --static-dataviz-div-red-blue-700:#0B194C;
   --static-white:#ffffff;
+  --static-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --static-white-low:rgba(255, 255, 255, 0.3215686275);
+  --static-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --static-white-lowest:rgba(255, 255, 255, 0.1215686275);
   --static-black:#000000;
+  --static-black-medium:rgba(0, 0, 0, 0.6392156863);
+  --static-black-low:rgba(0, 0, 0, 0.3215686275);
+  --static-black-lower:rgba(0, 0, 0, 0.1607843137);
+  --static-black-lowest:rgba(0, 0, 0, 0.1215686275);
   --elevation-shadow-0:none;
   --elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);
   --elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);
@@ -967,8 +981,6 @@ vds-checkbox::part(checkbox-container) {
   cursor: pointer;
   width: 100%;
   color: var(--color-text-high);
-  cursor: default;
-  border-radius: var(--radius-medium);
 }
 :host .vds-upload-item:focus:not(:focus-visible) {
   outline: none;
@@ -983,6 +995,10 @@ vds-checkbox::part(checkbox-container) {
 :host .vds-upload-item:hover {
   background-color: var(--color-interaction-black-lowest);
 }
+:host .vds-upload-item {
+  cursor: default;
+  border-radius: var(--radius-medium);
+}
 :host .vds-upload-item.vds-upload-item--size-medium {
   min-height: var(--spacing-10);
   padding: var(--spacing-03) var(--spacing-04);