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

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

@@ -5,7 +5,7 @@ import { GenerateVdsSvg } from "../../utils/icon-generation.utils";
 export class VdsIcon {
     constructor() {
         /** Set icon color based in volt palette */
-        this.color = 'brand-main';
+        this.color = 'static-brand-main';
     }
     async componentWillLoad() {
         if (this.isValidUrl(this.svgIcon) && this.isValidSvgUrl(this.svgIcon)) {
@@ -64,7 +64,7 @@ export class VdsIcon {
         return svgs.default[`${this.svgIcon}.svg`];
     }
     render() {
-        return (h(Host, { key: '6f239066b1496a9ed04a3752fb67c7851297eee0', class: combineClasses('volt-icon', `color-${this.color}`) }, this.isInternalIcon(this.svgIcon) || this.isSvgString(this.svgIcon) ?
+        return (h(Host, { key: '5ddd9d6c96d27900dca1dcdd678e7c65ec4bd9f0', class: combineClasses('volt-icon', `color-${this.color}`) }, this.isInternalIcon(this.svgIcon) || this.isSvgString(this.svgIcon) ?
             (h("div", { part: "svg-icon", style: this.getSize(), class: combineClasses('volt-icon-svg'), innerHTML: this.getSvgContent() }))
             :
                 (h("img", { style: this.getSize(), src: this.svgIcon, alt: `${this.alt} icon` }))));
@@ -85,7 +85,6 @@ export class VdsIcon {
         return {
             "svgIcon": {
                 "type": "string",
-                "attribute": "svg-icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -100,11 +99,11 @@ export class VdsIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "svg-icon"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -119,15 +118,15 @@ export class VdsIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": true,
                 "complexType": {
                     "original": "IconColors | Colors",
-                    "resolved": "\"color-background-disabled\" | \"color-background-brand-default\" | \"color-background-brand-hover\" | \"color-background-brand-press\" | \"color-background-caution-default\" | \"color-background-caution-lowest-default\" | \"color-background-caution-lowest-hover\" | \"color-background-caution-lowest-press\" | \"color-background-danger-default\" | \"color-background-danger-high-default\" | \"color-background-danger-high-hover\" | \"color-background-danger-high-press\" | \"color-background-danger-lowest-default\" | \"color-background-danger-lowest-hover\" | \"color-background-danger-lowest-press\" | \"color-background-general-default\" | \"color-background-general-lowest-default\" | \"color-background-general-lowest-hover\" | \"color-background-general-lowest-press\" | \"color-background-healthy-default\" | \"color-background-healthy-lowest-default\" | \"color-background-healthy-lowest-hover\" | \"color-background-healthy-lowest-press\" | \"color-background-information-default\" | \"color-background-information-lowest-default\" | \"color-background-information-lowest-hover\" | \"color-background-information-lowest-press\" | \"color-background-neutral-default\" | \"color-background-neutral-hover\" | \"color-background-neutral-press\" | \"color-background-neutral-lowest-default\" | \"color-background-neutral-lowest-hover\" | \"color-background-neutral-lowest-press\" | \"color-background-warning-default\" | \"color-background-warning-lowest-default\" | \"color-background-warning-lowest-hover\" | \"color-background-warning-lowest-press\" | \"color-border-high\" | \"color-border-medium\" | \"color-border-low\" | \"color-border-lower\" | \"color-border-lowest\" | \"color-border-brand\" | \"color-border-brand-hover\" | \"color-border-disabled\" | \"color-border-danger\" | \"color-border-healthy\" | \"color-border-caution\" | \"color-border-warning\" | \"color-border-information\" | \"color-border-general\" | \"color-border-focus-1\" | \"color-border-focus-2\" | \"color-border-white-high\" | \"color-border-white-medium\" | \"color-border-white-low\" | \"color-border-white-lower\" | \"color-border-white-lowest\" | \"color-icon-high\" | \"color-icon-medium\" | \"color-icon-low\" | \"color-icon-disabled\" | \"color-icon-healthy\" | \"color-icon-caution\" | \"color-icon-warning\" | \"color-icon-danger\" | \"color-icon-information\" | \"color-icon-general\" | \"color-icon-brand-default\" | \"color-icon-brand-hover\" | \"color-icon-brand-press\" | \"color-icon-white-high\" | \"color-icon-white-medium\" | \"color-icon-white-low\" | \"color-interaction-black-medium\" | \"color-interaction-black-low\" | \"color-interaction-black-lower\" | \"color-interaction-black-lowest\" | \"color-interaction-brand-medium\" | \"color-interaction-brand-low\" | \"color-interaction-brand-lower\" | \"color-interaction-brand-lowest\" | \"color-interaction-danger-medium\" | \"color-interaction-danger-low\" | \"color-interaction-danger-lower\" | \"color-interaction-danger-lowest\" | \"color-interaction-white-medium\" | \"color-interaction-white-low\" | \"color-interaction-white-lower\" | \"color-interaction-white-lowest\" | \"color-interaction-backdrop\" | \"color-link-default\" | \"color-link-hover\" | \"color-link-press\" | \"color-text-high\" | \"color-text-medium\" | \"color-text-low\" | \"color-text-disabled\" | \"color-text-brand\" | \"color-text-caution-high\" | \"color-text-caution-medium\" | \"color-text-danger-high\" | \"color-text-danger-medium\" | \"color-text-general-high\" | \"color-text-general-medium\" | \"color-text-healthy-high\" | \"color-text-healthy-medium\" | \"color-text-information-high\" | \"color-text-information-medium\" | \"color-text-warning-high\" | \"color-text-warning-medium\" | \"color-text-white-high\" | \"color-text-white-medium\" | \"color-text-white-low\" | \"surface-higher\" | \"surface-high\" | \"surface-medium\" | \"surface-low\" | \"surface-lower\" | \"surface-neutral-default\" | \"surface-neutral-hover\" | \"surface-neutral-press\" | \"surface-overlay-default\" | \"surface-overlay-hover\" | \"surface-overlay-press\" | \"surface-elevation-01\" | \"surface-elevation-02\" | \"surface-elevation-03\" | \"surface-elevation-04\" | \"box-shadow-color-01\" | \"box-shadow-color-02\" | \"brand-50\" | \"brand-100\" | \"brand-200\" | \"brand-300\" | \"brand-400\" | \"brand-500\" | \"brand-main\" | \"brand-600\" | \"brand-700\" | \"brand-800\" | \"brand-900\" | \"brand-950\" | \"brand-1000\" | \"brand-1000-medium\" | \"brand-1000-low\" | \"brand-1000-lower\" | \"brand-1000-lowest\" | \"green-50\" | \"green-100\" | \"green-200\" | \"green-300\" | \"green-400\" | \"green-500\" | \"green-main\" | \"green-600\" | \"green-700\" | \"green-800\" | \"green-900\" | \"green-950\" | \"grey-50\" | \"grey-100\" | \"grey-200\" | \"grey-300\" | \"grey-400\" | \"grey-500\" | \"grey-main\" | \"grey-600\" | \"grey-700\" | \"grey-800\" | \"grey-900\" | \"grey-950\" | \"neutral-50\" | \"neutral-100\" | \"neutral-200\" | \"neutral-300\" | \"neutral-400\" | \"neutral-500\" | \"neutral-main\" | \"neutral-600\" | \"neutral-700\" | \"neutral-800\" | \"neutral-900\" | \"neutral-950\" | \"neutral-400-medium\" | \"neutral-400-low\" | \"neutral-400-lower\" | \"neutral-800-medium\" | \"neutral-800-low\" | \"orange-50\" | \"orange-100\" | \"orange-200\" | \"orange-300\" | \"orange-400\" | \"orange-500\" | \"orange-main\" | \"orange-600\" | \"orange-700\" | \"orange-800\" | \"orange-900\" | \"orange-950\" | \"red-50\" | \"red-100\" | \"red-200\" | \"red-300\" | \"red-400\" | \"red-500\" | \"red-main\" | \"red-600\" | \"red-700\" | \"red-800\" | \"red-900\" | \"red-950\" | \"yellow-50\" | \"yellow-100\" | \"yellow-200\" | \"yellow-300\" | \"yellow-400\" | \"yellow-500\" | \"yellow-main\" | \"yellow-600\" | \"yellow-700\" | \"yellow-800\" | \"yellow-900\" | \"yellow-950\" | \"white\" | \"black\"",
+                    "resolved": "\"color-background-disabled\" | \"color-background-brand-default\" | \"color-background-brand-hover\" | \"color-background-brand-press\" | \"color-background-caution-default\" | \"color-background-caution-lowest-default\" | \"color-background-caution-lowest-hover\" | \"color-background-caution-lowest-press\" | \"color-background-danger-default\" | \"color-background-danger-high-default\" | \"color-background-danger-high-hover\" | \"color-background-danger-high-press\" | \"color-background-danger-lowest-default\" | \"color-background-danger-lowest-hover\" | \"color-background-danger-lowest-press\" | \"color-background-general-default\" | \"color-background-general-lowest-default\" | \"color-background-general-lowest-hover\" | \"color-background-general-lowest-press\" | \"color-background-healthy-default\" | \"color-background-healthy-lowest-default\" | \"color-background-healthy-lowest-hover\" | \"color-background-healthy-lowest-press\" | \"color-background-information-default\" | \"color-background-information-lowest-default\" | \"color-background-information-lowest-hover\" | \"color-background-information-lowest-press\" | \"color-background-neutral-default\" | \"color-background-neutral-hover\" | \"color-background-neutral-press\" | \"color-background-neutral-lowest-default\" | \"color-background-neutral-lowest-hover\" | \"color-background-neutral-lowest-press\" | \"color-background-warning-default\" | \"color-background-warning-lowest-default\" | \"color-background-warning-lowest-hover\" | \"color-background-warning-lowest-press\" | \"color-border-high\" | \"color-border-medium\" | \"color-border-low\" | \"color-border-lower\" | \"color-border-lowest\" | \"color-border-brand\" | \"color-border-brand-hover\" | \"color-border-disabled\" | \"color-border-danger\" | \"color-border-healthy\" | \"color-border-caution\" | \"color-border-warning\" | \"color-border-information\" | \"color-border-general\" | \"color-border-focus-1\" | \"color-border-focus-2\" | \"color-border-white-high\" | \"color-border-white-medium\" | \"color-border-white-low\" | \"color-border-white-lower\" | \"color-border-white-lowest\" | \"color-icon-high\" | \"color-icon-medium\" | \"color-icon-low\" | \"color-icon-disabled\" | \"color-icon-healthy\" | \"color-icon-caution\" | \"color-icon-warning\" | \"color-icon-danger\" | \"color-icon-information\" | \"color-icon-general\" | \"color-icon-brand-default\" | \"color-icon-brand-hover\" | \"color-icon-brand-press\" | \"color-icon-white-high\" | \"color-icon-white-medium\" | \"color-icon-white-low\" | \"color-interaction-black-medium\" | \"color-interaction-black-low\" | \"color-interaction-black-lower\" | \"color-interaction-black-lowest\" | \"color-interaction-brand-medium\" | \"color-interaction-brand-low\" | \"color-interaction-brand-lower\" | \"color-interaction-brand-lowest\" | \"color-interaction-danger-medium\" | \"color-interaction-danger-low\" | \"color-interaction-danger-lower\" | \"color-interaction-danger-lowest\" | \"color-interaction-white-medium\" | \"color-interaction-white-low\" | \"color-interaction-white-lower\" | \"color-interaction-white-lowest\" | \"color-interaction-backdrop\" | \"color-link-default\" | \"color-link-hover\" | \"color-link-press\" | \"color-text-high\" | \"color-text-medium\" | \"color-text-low\" | \"color-text-disabled\" | \"color-text-brand\" | \"color-text-caution-high\" | \"color-text-caution-medium\" | \"color-text-danger-high\" | \"color-text-danger-medium\" | \"color-text-general-high\" | \"color-text-general-medium\" | \"color-text-healthy-high\" | \"color-text-healthy-medium\" | \"color-text-information-high\" | \"color-text-information-medium\" | \"color-text-warning-high\" | \"color-text-warning-medium\" | \"color-text-white-high\" | \"color-text-white-medium\" | \"color-text-white-low\" | \"surface-higher\" | \"surface-high\" | \"surface-medium\" | \"surface-low\" | \"surface-lower\" | \"surface-neutral-default\" | \"surface-neutral-hover\" | \"surface-neutral-press\" | \"surface-overlay-default\" | \"surface-overlay-hover\" | \"surface-overlay-press\" | \"surface-elevation-01\" | \"surface-elevation-02\" | \"surface-elevation-03\" | \"surface-elevation-04\" | \"box-shadow-color-01\" | \"box-shadow-color-02\" | \"static-brand-50\" | \"static-brand-100\" | \"static-brand-200\" | \"static-brand-300\" | \"static-brand-400\" | \"static-brand-500\" | \"static-brand-main\" | \"static-brand-600\" | \"static-brand-700\" | \"static-brand-800\" | \"static-brand-900\" | \"static-brand-950\" | \"static-brand-1000\" | \"static-brand-1000-medium\" | \"static-brand-1000-low\" | \"static-brand-1000-lower\" | \"static-brand-1000-lowest\" | \"static-green-50\" | \"static-green-100\" | \"static-green-200\" | \"static-green-300\" | \"static-green-400\" | \"static-green-500\" | \"static-green-main\" | \"static-green-600\" | \"static-green-700\" | \"static-green-800\" | \"static-green-900\" | \"static-green-950\" | \"static-grey-50\" | \"static-grey-100\" | \"static-grey-200\" | \"static-grey-300\" | \"static-grey-400\" | \"static-grey-500\" | \"static-grey-main\" | \"static-grey-600\" | \"static-grey-700\" | \"static-grey-800\" | \"static-grey-900\" | \"static-grey-950\" | \"static-neutral-50\" | \"static-neutral-100\" | \"static-neutral-200\" | \"static-neutral-300\" | \"static-neutral-400\" | \"static-neutral-500\" | \"static-neutral-main\" | \"static-neutral-600\" | \"static-neutral-700\" | \"static-neutral-800\" | \"static-neutral-900\" | \"static-neutral-950\" | \"static-neutral-400-medium\" | \"static-neutral-400-low\" | \"static-neutral-400-lower\" | \"static-neutral-800-medium\" | \"static-neutral-800-low\" | \"static-orange-50\" | \"static-orange-100\" | \"static-orange-200\" | \"static-orange-300\" | \"static-orange-400\" | \"static-orange-500\" | \"static-orange-main\" | \"static-orange-600\" | \"static-orange-700\" | \"static-orange-800\" | \"static-orange-900\" | \"static-orange-950\" | \"static-red-50\" | \"static-red-100\" | \"static-red-200\" | \"static-red-300\" | \"static-red-400\" | \"static-red-500\" | \"static-red-main\" | \"static-red-600\" | \"static-red-700\" | \"static-red-800\" | \"static-red-900\" | \"static-red-950\" | \"static-yellow-50\" | \"static-yellow-100\" | \"static-yellow-200\" | \"static-yellow-300\" | \"static-yellow-400\" | \"static-yellow-500\" | \"static-yellow-main\" | \"static-yellow-600\" | \"static-yellow-700\" | \"static-yellow-800\" | \"static-yellow-900\" | \"static-yellow-950\" | \"static-white\" | \"static-white-medium\" | \"static-white-low\" | \"static-white-lower\" | \"static-white-lowest\" | \"static-black\" | \"static-black-medium\" | \"static-black-low\" | \"static-black-lower\" | \"static-black-lowest\"",
                     "references": {
                         "IconColors": {
                             "location": "import",
@@ -150,11 +149,11 @@ export class VdsIcon {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'brand-main'"
+                "attribute": "color",
+                "defaultValue": "'static-brand-main'"
             },
             "alt": {
                 "type": "string",
-                "attribute": "alt",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -169,7 +168,8 @@ export class VdsIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "alt"
             }
         };
     }

package/dist/collection/components/icon/vds-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"vds-icon.js","sourceRoot":"","sources":["../../../src/components/icon/vds-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { Element, HostElement, Prop } from '@stencil/core/internal';\nimport * as svgs from '../../constants/icon-sprite';\nimport { Colors, IconColors } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { GenerateVdsSvg } from '../../utils/icon-generation.utils';\n\n@Component({\n  tag: 'vds-icon',\n  styleUrl: 'vds-icon.scss',\n  shadow: true,\n})\nexport class VdsIcon {\n  /** Set svg icon name to display */\n  @Prop({ mutable: true }) svgIcon: string;\n  /** Set icon size in px or rem, IE: 1.25rem */\n  @Prop({ mutable: true }) size: string;\n  /** Set icon color based in volt palette */\n  @Prop({ mutable: true }) color: IconColors | Colors = 'brand-main';\n  /** Set alt text for accesibility */\n  @Prop({ mutable: true }) alt: string;\n\n  @Element() host: HTMLDivElement;  \n  \n  private svgContent: string;\n\n  async componentWillLoad(): Promise<void> {\n    if (this.isValidUrl(this.svgIcon) && this.isValidSvgUrl(this.svgIcon)) {\n      this.svgContent = await this.setSvgContent(this.svgIcon);\n    }\n  }\n\n  private isSvgString(svgIcon: string): boolean {\n    return svgIcon?.trim().startsWith('<svg')?? false;\n  }\n\n  private isValidUrl(svgIcon: string): boolean {\n    try {\n      new URL(svgIcon);\n      return true;\n    } catch (err) {\n      return false;\n    }\n  }\n\n  private isInternalIcon(svgIcon: string): boolean {\n    const icons = Object.keys(svgs.default);\n\n    return icons.some(icon => icon === svgIcon+'.svg');\n  }\n  private isValidSvgUrl(svgIcon: string): boolean {\n    return svgIcon?.endsWith('.svg');\n  }\n\n  private async setSvgContent(svgIcon: string): Promise<string | null> {\n    return await this.fetchSvgContent(svgIcon);\n  }\n\n  private async fetchSvgContent(url: string): Promise<string | null> {\n    try {\n      const response = await fetch(url);\n      return !response.ok ? null : await response.text();\n    } catch (error) {\n      return null;\n    }\n  }\n  private getSize() {\n    if (this.size && this.size.indexOf(',') > -1) {\n      const sizes = this.size.split(',');\n      return {\n        width: sizes[0] ? sizes[0] : '1rem',\n        height: sizes[1] ? sizes[1] : '1rem',\n      };\n    }\n    return { width: this.size ? this.size : '1rem', height: this.size ? this.size : '1rem' };\n  }\n\n  private getSvgContent(): string {\n    if (this.isSvgString(this.svgIcon)) {\n      return GenerateVdsSvg(this.svgIcon);\n    }\n\n    if (this.isValidSvgUrl(this.svgIcon) && this.svgContent) {\n      return GenerateVdsSvg(this.svgContent);\n    }\n\n    return svgs.default[`${this.svgIcon}.svg`];\n  }\n\n  render(): HostElement {\n    return (\n      <Host class={combineClasses('volt-icon', `color-${this.color}`)}>\n        {this.isInternalIcon(this.svgIcon) || this.isSvgString(this.svgIcon) ? \n          (\n            <div\n              part=\"svg-icon\"\n              style={this.getSize()}\n              class={combineClasses('volt-icon-svg')}\n              innerHTML={this.getSvgContent()}>\n            </div>\n          ) \n          : \n          (\n            <img style={this.getSize()} src={this.svgIcon} alt={`${this.alt} icon`} />\n          )\n        }\n      </Host>\n    );\n  }\n}"]}
+{"version":3,"file":"vds-icon.js","sourceRoot":"","sources":["../../../src/components/icon/vds-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { Element, HostElement, Prop } from '@stencil/core/internal';\nimport * as svgs from '../../constants/icon-sprite';\nimport { Colors, IconColors } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { GenerateVdsSvg } from '../../utils/icon-generation.utils';\n\n@Component({\n  tag: 'vds-icon',\n  styleUrl: 'vds-icon.scss',\n  shadow: true,\n})\nexport class VdsIcon {\n  /** Set svg icon name to display */\n  @Prop({ mutable: true }) svgIcon: string;\n  /** Set icon size in px or rem, IE: 1.25rem */\n  @Prop({ mutable: true }) size: string;\n  /** Set icon color based in volt palette */\n  @Prop({ mutable: true }) color: IconColors | Colors = 'static-brand-main';\n  /** Set alt text for accesibility */\n  @Prop({ mutable: true }) alt: string;\n\n  @Element() host: HTMLDivElement;  \n  \n  private svgContent: string;\n\n  async componentWillLoad(): Promise<void> {\n    if (this.isValidUrl(this.svgIcon) && this.isValidSvgUrl(this.svgIcon)) {\n      this.svgContent = await this.setSvgContent(this.svgIcon);\n    }\n  }\n\n  private isSvgString(svgIcon: string): boolean {\n    return svgIcon?.trim().startsWith('<svg')?? false;\n  }\n\n  private isValidUrl(svgIcon: string): boolean {\n    try {\n      new URL(svgIcon);\n      return true;\n    } catch (err) {\n      return false;\n    }\n  }\n\n  private isInternalIcon(svgIcon: string): boolean {\n    const icons = Object.keys(svgs.default);\n\n    return icons.some(icon => icon === svgIcon+'.svg');\n  }\n  private isValidSvgUrl(svgIcon: string): boolean {\n    return svgIcon?.endsWith('.svg');\n  }\n\n  private async setSvgContent(svgIcon: string): Promise<string | null> {\n    return await this.fetchSvgContent(svgIcon);\n  }\n\n  private async fetchSvgContent(url: string): Promise<string | null> {\n    try {\n      const response = await fetch(url);\n      return !response.ok ? null : await response.text();\n    } catch (error) {\n      return null;\n    }\n  }\n  private getSize() {\n    if (this.size && this.size.indexOf(',') > -1) {\n      const sizes = this.size.split(',');\n      return {\n        width: sizes[0] ? sizes[0] : '1rem',\n        height: sizes[1] ? sizes[1] : '1rem',\n      };\n    }\n    return { width: this.size ? this.size : '1rem', height: this.size ? this.size : '1rem' };\n  }\n\n  private getSvgContent(): string {\n    if (this.isSvgString(this.svgIcon)) {\n      return GenerateVdsSvg(this.svgIcon);\n    }\n\n    if (this.isValidSvgUrl(this.svgIcon) && this.svgContent) {\n      return GenerateVdsSvg(this.svgContent);\n    }\n\n    return svgs.default[`${this.svgIcon}.svg`];\n  }\n\n  render(): HostElement {\n    return (\n      <Host class={combineClasses('volt-icon', `color-${this.color}`)}>\n        {this.isInternalIcon(this.svgIcon) || this.isSvgString(this.svgIcon) ? \n          (\n            <div\n              part=\"svg-icon\"\n              style={this.getSize()}\n              class={combineClasses('volt-icon-svg')}\n              innerHTML={this.getSvgContent()}>\n            </div>\n          ) \n          : \n          (\n            <img style={this.getSize()} src={this.svgIcon} alt={`${this.alt} icon`} />\n          )\n        }\n      </Host>\n    );\n  }\n}"]}

package/dist/collection/components/icon-button/vds-icon-button.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);
@@ -1013,4 +1027,8 @@
 
 :host-context(.vds-icon-button--disabled) {
   pointer-events: none;
+}
+
+:host-context(.breadcrumb) .vds-icon-button__element:focus-visible {
+  outline: none;
 }

package/dist/collection/components/icon-button/vds-icon-button.js

@@ -21,7 +21,7 @@ export class VdsIconButton {
         shadowSubmitForm(this.hostEl);
     }
     render() {
-        return (h(Host, { key: '24a70db035999a301b74b3d82ade90716b43d4f7', class: combineClasses(`vds-icon-button`, this.disabled ? "vds-icon-button--disabled" : "") }, h("button", Object.assign({ key: '23fa3caf95ae19ae0f47ea5cbc2543195912f152', class: combineClasses(`vds-icon-button__element`, `vds-icon-button__variant--${this.variant}`, `vds-icon-button__size--${this.size}`, this.disabled ? "vds-icon-button-disabled" : ""), "aria-label": this.setAriaLabel, type: "button", disabled: this.disabled || null }, cloneAttributes(this.hostEl, "disabled", "class", "style")), h("vds-icon", { key: '65269751a986b1613cef4831c2435b969f5ca640', "svg-icon": this.icon, size: ICON_SIZE[this.size] }))));
+        return (h(Host, { key: '8ce2c379d57f2f4122451042b38c30dad6cca41a', class: combineClasses(`vds-icon-button`, this.disabled ? "vds-icon-button--disabled" : "") }, h("button", Object.assign({ key: 'bea8493fc9652c0799890f4256aa12d26a9b611c', class: combineClasses(`vds-icon-button__element`, `vds-icon-button__variant--${this.variant}`, `vds-icon-button__size--${this.size}`, this.disabled ? "vds-icon-button-disabled" : ""), "aria-label": this.setAriaLabel, type: "button", disabled: this.disabled || null }, cloneAttributes(this.hostEl, "disabled", "class", "style")), h("vds-icon", { key: '5ec08546a2a73ca3fe43f4da7342f1cbe83a81c9', "svg-icon": this.icon, size: ICON_SIZE[this.size] }))));
     }
     static get is() { return "vds-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -39,7 +39,6 @@ export class VdsIconButton {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "\"large\" | \"medium\" | \"small\" | \"extra-small\"",
@@ -55,11 +54,11 @@ export class VdsIconButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "variant": {
                 "type": "string",
-                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "\"primary\" | \"secondary\" | \"tertiary\"",
@@ -75,11 +74,11 @@ export class VdsIconButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "\"primary\""
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -95,11 +94,11 @@ export class VdsIconButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -114,11 +113,11 @@ export class VdsIconButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "icon"
             },
             "setAriaLabel": {
                 "type": "string",
-                "attribute": "set-aria-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -133,7 +132,8 @@ export class VdsIconButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "set-aria-label"
             }
         };
     }

package/dist/collection/components/input/vds-basic-input.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/input/vds-basic-input.js

@@ -2,13 +2,15 @@ import { Host, h } from "@stencil/core";
 import { isValidIcon, toggleFocusClass, getIconColor, setInputStyles, setTouchedClass, setDirtyClass, maskInput } from "./vds-basic-input.utils";
 import { combineClasses } from "../../utils/combine-classes";
 import { cloneAttributes } from "../../utils/clone-attributes";
-import { shadowSubmitForm } from "../../utils/form";
+import { emitInputEvent, shadowSubmitForm } from "../../utils/form";
 export class VdsBasicInput {
     constructor() {
         /** Sets the input size. */
         this.size = "medium";
         /** Sets input type in the DOM. Check HTML 5 Input type. */
         this.type = "text";
+        /** Sets the input value. */
+        this.value = "";
         /** Toggles the required sign in the field */
         this.isRequired = false;
         /** Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction) */
@@ -18,6 +20,7 @@ export class VdsBasicInput {
         this.setFormValue();
     }
     setFormValue() {
+        emitInputEvent(this.hostEl, this.value);
         if (this.internals && !!this.internals.setFormValue) {
             this.internals.setFormValue(this.value);
         }
@@ -117,7 +120,7 @@ export class VdsBasicInput {
     /**
        * Clears value prop from the vds-input element.
        *
-       * @returns Promise<voiid>
+       * @returns Promise<void>
        */
     clear() {
         return new Promise((resolve) => {
@@ -130,13 +133,13 @@ export class VdsBasicInput {
         if (this.type === "datetime") {
             console.warn("The type datetime has been deprecated.Please use datetime-local.");
         }
-        return (h(Host, { key: '66b0128418fe3b7673a69ccd9b875f39a985e2dc', class: this.disabled ? "vds-basic-input--disabled" : "" }, h("div", { key: '7dd35182a8003c189936e81012c80e047f0bae6a', ref: (el) => {
+        return (h(Host, { key: '092953067ee8e9716f6a835ad6921f21b35dfc75', class: this.disabled ? "vds-basic-input--disabled" : "" }, h("div", { key: 'bcaa81ae31065cb2760f1860d99a98b2fb0bdab3', ref: (el) => {
                 if (el)
                     this.inputContainerRef = el;
-            }, class: combineClasses("vds__input__container", `vds__input--size-${this.size}`, this.error && "vds__input__container--error", this.isReadonly && "vds__input__container--readonly", this.disabled && "vds__input__container--disabled") }, this.getInputIcon(this.informativeIcon), h("input", Object.assign({ key: 'f7222b70a9d719015864ec256234350a397b384c', ref: (el) => {
+            }, class: combineClasses("vds__input__container", `vds__input--size-${this.size}`, this.error && "vds__input__container--error", this.isReadonly && "vds__input__container--readonly", this.disabled && "vds__input__container--disabled") }, this.getInputIcon(this.informativeIcon), h("input", Object.assign({ key: 'aaeda7cc72f965f5c61a711bdcb37f2e64d68c41', ref: (el) => {
                 if (el)
                     this.inputEl = el;
-            }, class: "vds__input", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.isRequired, readOnly: this.isReadonly, onInput: (evt) => this.handleInput(evt), onFocus: () => this.toggleFocusClass(), onBlur: () => this.toggleFocusClass(), style: this.setInputStyles() }, cloneAttributes(this.hostEl, "class", "value", "disabled", "placeholder", "label", "style"))), h("slot", { key: '472ce9e22a9c8ee078b69ee2ed2856fb08d34ce6', name: "secondaryActionIcon" }), h("slot", { key: '1aa398222c7ab3661d74c619bedc684176513ec8', name: "primaryActionIcon" }))));
+            }, class: "vds__input", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.isRequired, readOnly: this.isReadonly, onInput: (evt) => this.handleInput(evt), onFocus: () => this.toggleFocusClass(), onBlur: () => this.toggleFocusClass(), style: this.setInputStyles() }, cloneAttributes(this.hostEl, "class", "value", "disabled", "placeholder", "label", "style"))), h("slot", { key: '3937435a84d228ddc18c3968e2e63bf66f3068e8', name: "secondaryActionIcon" }), h("slot", { key: 'fc2c441eedb6cd682e79e6ae4d598aa8ad31143e', name: "primaryActionIcon" }))));
     }
     static get is() { return "vds-basic-input"; }
     static get encapsulation() { return "shadow"; }
@@ -155,7 +158,6 @@ export class VdsBasicInput {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": true,
                 "complexType": {
                     "original": "\"small\" | \"medium\" | \"large\"",
@@ -171,11 +173,11 @@ export class VdsBasicInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": true,
                 "complexType": {
                     "original": "VdsInputType",
@@ -197,11 +199,11 @@ export class VdsBasicInput {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "type",
                 "defaultValue": "\"text\""
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -216,11 +218,12 @@ export class VdsBasicInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "\"\""
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -235,11 +238,11 @@ export class VdsBasicInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "placeholder"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -254,11 +257,11 @@ export class VdsBasicInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "disabled"
             },
             "isReadonly": {
                 "type": "boolean",
-                "attribute": "is-readonly",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -273,11 +276,11 @@ export class VdsBasicInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "is-readonly"
             },
             "error": {
                 "type": "boolean",
-                "attribute": "error",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -292,11 +295,11 @@ export class VdsBasicInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "error"
             },
             "isRequired": {
                 "type": "boolean",
-                "attribute": "is-required",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -312,11 +315,11 @@ export class VdsBasicInput {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "is-required",
                 "defaultValue": "false"
             },
             "informativeIcon": {
                 "type": "string",
-                "attribute": "informative-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -331,11 +334,11 @@ export class VdsBasicInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "informative-icon"
             },
             "formatter": {
                 "type": "unknown",
-                "attribute": "formatter",
                 "mutable": true,
                 "complexType": {
                     "original": "Function",
@@ -358,7 +361,6 @@ export class VdsBasicInput {
             },
             "allowedStyles": {
                 "type": "unknown",
-                "attribute": "allowed-styles",
                 "mutable": true,
                 "complexType": {
                     "original": "{ [key: string]: string }[]",
@@ -453,7 +455,7 @@ export class VdsBasicInput {
                     "text": "Clears value prop from the vds-input element.",
                     "tags": [{
                             "name": "returns",
-                            "text": "Promise<voiid>"
+                            "text": "Promise<void>"
                         }]
                 }
             }

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

@@ -1 +1 @@
-{"version":3,"file":"vds-basic-input.js","sourceRoot":"","sources":["../../../src/components/input/vds-basic-input.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  VdsInputType,\n  isValidIcon,\n  toggleFocusClass,\n  getIconColor,\n  setInputStyles,\n  setTouchedClass,\n  setDirtyClass, \n  maskInput\n} from './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 { shadowSubmitForm } from '../../utils/form';\n\n@Component({\n  tag: 'vds-basic-input',\n  styleUrl: 'vds-basic-input.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsBasicInput {\n  /** Sets the input size. */\n  @Prop({ mutable: true }) size: \"small\" | \"medium\" | \"large\" = \"medium\";\n  /** Sets input type in the DOM. Check HTML 5 Input type. */\n  @Prop({ mutable: true, reflect: true }) type: VdsInputType = \"text\";\n  /** Sets the input value. */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  /** Sets the input placeholder. */\n  @Prop({ mutable: true, reflect: true }) placeholder: string;\n  /** Sets the input in disabled state. */\n  @Prop({ mutable: true, reflect: true }) disabled: boolean;\n  /** Sets the input in readonly state. */\n  @Prop({ mutable: true, reflect: true }) isReadonly: boolean;\n  /** Sets the input 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  /** Allows user to define a information icon inside the input at its left . */\n  @Prop() informativeIcon: string;\n  /** Sets character formatting for user input. Useful for adding a mask to the input. */\n  @Prop({ mutable: true }) formatter?: Function;\n  /** Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction) */\n  @Prop({ mutable: true }) allowedStyles: { [key: string]: string }[] = [];\n\n  @Element() hostEl: HTMLInputElement;    \n  \n\t/**  Emits updated input value */\n\t@Event() changeInput: EventEmitter<string>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private inputContainerRef: HTMLDivElement;\n  private inputEl: HTMLInputElement;\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   * Displays vds-icon when icon string is valid\n   *\n   * @returns HTMLStencilElement\n   */\n  private getInputIcon(icon: string): HTMLStencilElement {\n    if(!isValidIcon(icon)) return null;\n\n    const inputState = this.disabled ? \"disabled\" : this.isReadonly ? \"readonly\" : \"normal\";\n    const size = this.size === \"medium\" ? \"1rem\" : this.size === \"small\" ? \"0.75rem\" : \"1.25rem\";\n    return (<vds-icon class=\"vds-input__informative-icon\" svgIcon={icon} size={size} color={getIconColor(inputState)}></vds-icon>);\n  }\n\n  /**\n   * Toggle class vds__input__container--focus in focus/blur input's event\n   *\n   * @returns void\n   */\n  private toggleFocusClass(): void {\n    this.inputContainerRef && toggleFocusClass(this.inputContainerRef);\n  }\n\n  /**\n   * Sets input inline styles for the allowedStyles \n   * [direction, text-align, textAlign, text-transform, textTransform, unicode-bidi, unicodeBidi]\n   *\n   * @returns void\n   */\n  private setInputStyles(): { [key: string]: string } {\n    return setInputStyles(this.allowedStyles);\n\t}\n\n  /**\n   * Sets value from input's event target.\n   * Emits change, input and changeInput events.\n   * Sets input as dirty when input'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 HTMLInputElement;\n    const inputEvent = new InputEvent(\"input\");\n    setDirtyClass(this.hostEl);\n    if(this.formatter) {\n      const maskValue = maskInput(this.formatter, target.value, this.value, evt.data, target, evt);\n      (evt.currentTarget as HTMLInputElement).value = maskValue;\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\t * Executes method when input's keyup event is triggered.\n\t *\n\t * @returns void\n\t */\n  @Listen(\"keyup\")\n\thandleEnterKey(event: KeyboardEvent): void {\n\t\tif (event.key === \"Enter\") {\n\t\t\tshadowSubmitForm(this.hostEl);\n\t\t}\n\t}\n\n  /**\n\t * Executes method when vds-input 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-input element.\n\t *\n\t * @returns Promise<void>\n\t */\n\t@Method()\n\tsetFocus(): Promise<void> {\n    return new Promise((resolve) => {\n      this.inputEl.focus();\n      resolve();\n    });\n\t}\n\n  /**\n\t * Gets value prop from the vds-input 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\t * Clears value prop from the vds-input element.\n\t *\n\t * @returns Promise<voiid>\n\t */\n\t@Method()\n\tclear(): Promise<void> {\n    return new Promise((resolve) => {\n      this.value = \"\";\n      this.inputEl.value = \"\";\n      resolve();\n    });\n\t}\n\n  render(): HTMLStencilElement {\n    if(this.type === \"datetime\"){ console.warn(\"The type datetime has been deprecated.Please use datetime-local.\")}\n    return (\n      <Host class={this.disabled ? \"vds-basic-input--disabled\" : \"\"}>\n        <div\n          ref={(el): void => { if(el) this.inputContainerRef = el} }\n          class={combineClasses(\n            \"vds__input__container\",\n            `vds__input--size-${this.size}`,\n            this.error && \"vds__input__container--error\",\n            this.isReadonly && \"vds__input__container--readonly\",\n            this.disabled && \"vds__input__container--disabled\"\n          )}\n        >\n          {this.getInputIcon(this.informativeIcon)}\n          <input\n            ref={(el): void => { if(el) this.inputEl = el} }\n            class={\"vds__input\"}\n            type={this.type}\n            value={this.value}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            required={this.isRequired}\n            readOnly={this.isReadonly}\n            onInput={(evt): void => this.handleInput(evt)}\n            onFocus={(): void => this.toggleFocusClass()}\n            onBlur={(): void => this.toggleFocusClass()}\n            style={this.setInputStyles()}\n            {...cloneAttributes(\n              this.hostEl,\n              \"class\",\n              \"value\",\n              \"disabled\",\n              \"placeholder\",\n              \"label\",\n              \"style\",\n            )}\n          />\n          <slot name=\"secondaryActionIcon\" />\n          <slot name=\"primaryActionIcon\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"vds-basic-input.js","sourceRoot":"","sources":["../../../src/components/input/vds-basic-input.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,EAEL,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,eAAe,EACf,aAAa,EACb,SAAS,EACV,MAAM,yBAAyB,CAAC;AACjC,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,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQpE,MAAM,OAAO,aAAa;IAN1B;QAOE,2BAA2B;QACF,SAAI,GAAiC,QAAQ,CAAC;QACvE,2DAA2D;QACnB,SAAI,GAAiB,MAAM,CAAC;QACpE,4BAA4B;QACY,UAAK,GAAW,EAAE,CAAC;QAS3D,6CAA6C;QACL,eAAU,GAAY,KAAK,CAAC;QAKpE,gGAAgG;QACvE,kBAAa,GAAgC,EAAE,CAAC;KA2L1E;IA/KC,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAGD,YAAY;QACV,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAExC,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,YAAY,CAAC,IAAY;QAC/B,IAAG,CAAC,WAAW,CAAC,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC;QAEnC,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;QACxF,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;QAC7F,OAAO,CAAC,gBAAU,KAAK,EAAC,6BAA6B,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,GAAa,CAAC,CAAC;IACjI,CAAC;IAED;;;;OAIG;IACK,gBAAgB;QACtB,IAAI,CAAC,iBAAiB,IAAI,gBAAgB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACrE,CAAC;IAED;;;;;OAKG;IACK,cAAc;QACpB,OAAO,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC7C,CAAC;IAEA;;;;;;;OAOG;IACK,WAAW,CAAC,GAAe;QACjC,GAAG,CAAC,eAAe,EAAE,CAAC;QACtB,MAAM,MAAM,GAAG,GAAG,CAAC,MAA0B,CAAC;QAC9C,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;QAC3C,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC3B,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;YAC5F,GAAG,CAAC,aAAkC,CAAC,KAAK,GAAG,SAAS,CAAC;YAC1D,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;IAED;;;;SAIE;IAEH,cAAc,CAAC,KAAoB;QAClC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC3B,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/B,CAAC;IACF,CAAC;IAEA;;;;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,OAAO,CAAC,KAAK,EAAE,CAAC;YACrB,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;;;;SAIE;IAEH,KAAK;QACF,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;YACxB,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;IACN,CAAC;IAEA,MAAM;QACJ,IAAG,IAAI,CAAC,IAAI,KAAK,UAAU,EAAC,CAAC;YAAC,OAAO,CAAC,IAAI,CAAC,kEAAkE,CAAC,CAAA;QAAA,CAAC;QAC/G,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE;YAC3D,4DACE,GAAG,EAAE,CAAC,EAAE,EAAQ,EAAE,GAAG,IAAG,EAAE;oBAAE,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAA,CAAA,CAAC,EACxD,KAAK,EAAE,cAAc,CACnB,uBAAuB,EACvB,oBAAoB,IAAI,CAAC,IAAI,EAAE,EAC/B,IAAI,CAAC,KAAK,IAAI,8BAA8B,EAC5C,IAAI,CAAC,UAAU,IAAI,iCAAiC,EACpD,IAAI,CAAC,QAAQ,IAAI,iCAAiC,CACnD;gBAEA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC;gBACxC,4EACE,GAAG,EAAE,CAAC,EAAE,EAAQ,EAAE,GAAG,IAAG,EAAE;wBAAE,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA,CAAA,CAAC,EAC9C,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,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,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,EAC3C,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IACxB,eAAe,CACjB,IAAI,CAAC,MAAM,EACX,OAAO,EACP,OAAO,EACP,UAAU,EACV,aAAa,EACb,OAAO,EACP,OAAO,CACR,EACD;gBACF,6DAAM,IAAI,EAAC,qBAAqB,GAAG;gBACnC,6DAAM,IAAI,EAAC,mBAAmB,GAAG,CAC7B,CACD,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  VdsInputType,\n  isValidIcon,\n  toggleFocusClass,\n  getIconColor,\n  setInputStyles,\n  setTouchedClass,\n  setDirtyClass, \n  maskInput\n} from './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 { emitInputEvent, shadowSubmitForm } from '../../utils/form';\n\n@Component({\n  tag: 'vds-basic-input',\n  styleUrl: 'vds-basic-input.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsBasicInput {\n  /** Sets the input size. */\n  @Prop({ mutable: true }) size: \"small\" | \"medium\" | \"large\" = \"medium\";\n  /** Sets input type in the DOM. Check HTML 5 Input type. */\n  @Prop({ mutable: true, reflect: true }) type: VdsInputType = \"text\";\n  /** Sets the input value. */\n  @Prop({ mutable: true, reflect: true }) value: string = \"\";\n  /** Sets the input placeholder. */\n  @Prop({ mutable: true, reflect: true }) placeholder: string;\n  /** Sets the input in disabled state. */\n  @Prop({ mutable: true, reflect: true }) disabled: boolean;\n  /** Sets the input in readonly state. */\n  @Prop({ mutable: true, reflect: true }) isReadonly: boolean;\n  /** Sets the input 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  /** Allows user to define a information icon inside the input at its left . */\n  @Prop() informativeIcon: string;\n  /** Sets character formatting for user input. Useful for adding a mask to the input. */\n  @Prop({ mutable: true }) formatter?: Function;\n  /** Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction) */\n  @Prop({ mutable: true }) allowedStyles: { [key: string]: string }[] = [];\n\n  @Element() hostEl: HTMLInputElement;    \n  \n\t/**  Emits updated input value */\n\t@Event() changeInput: EventEmitter<string>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private inputContainerRef: HTMLDivElement;\n  private inputEl: HTMLInputElement;\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   * Displays vds-icon when icon string is valid\n   *\n   * @returns HTMLStencilElement\n   */\n  private getInputIcon(icon: string): HTMLStencilElement {\n    if(!isValidIcon(icon)) return null;\n\n    const inputState = this.disabled ? \"disabled\" : this.isReadonly ? \"readonly\" : \"normal\";\n    const size = this.size === \"medium\" ? \"1rem\" : this.size === \"small\" ? \"0.75rem\" : \"1.25rem\";\n    return (<vds-icon class=\"vds-input__informative-icon\" svgIcon={icon} size={size} color={getIconColor(inputState)}></vds-icon>);\n  }\n\n  /**\n   * Toggle class vds__input__container--focus in focus/blur input's event\n   *\n   * @returns void\n   */\n  private toggleFocusClass(): void {\n    this.inputContainerRef && toggleFocusClass(this.inputContainerRef);\n  }\n\n  /**\n   * Sets input inline styles for the allowedStyles \n   * [direction, text-align, textAlign, text-transform, textTransform, unicode-bidi, unicodeBidi]\n   *\n   * @returns void\n   */\n  private setInputStyles(): { [key: string]: string } {\n    return setInputStyles(this.allowedStyles);\n\t}\n\n  /**\n   * Sets value from input's event target.\n   * Emits change, input and changeInput events.\n   * Sets input as dirty when input'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 HTMLInputElement;\n    const inputEvent = new InputEvent(\"input\");\n    setDirtyClass(this.hostEl);\n    if(this.formatter) {\n      const maskValue = maskInput(this.formatter, target.value, this.value, evt.data, target, evt);\n      (evt.currentTarget as HTMLInputElement).value = maskValue;\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\t * Executes method when input's keyup event is triggered.\n\t *\n\t * @returns void\n\t */\n  @Listen(\"keyup\")\n\thandleEnterKey(event: KeyboardEvent): void {\n\t\tif (event.key === \"Enter\") {\n\t\t\tshadowSubmitForm(this.hostEl);\n\t\t}\n\t}\n\n  /**\n\t * Executes method when vds-input 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-input element.\n\t *\n\t * @returns Promise<void>\n\t */\n\t@Method()\n\tsetFocus(): Promise<void> {\n    return new Promise((resolve) => {\n      this.inputEl.focus();\n      resolve();\n    });\n\t}\n\n  /**\n\t * Gets value prop from the vds-input 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\t * Clears value prop from the vds-input element.\n\t *\n\t * @returns Promise<void>\n\t */\n\t@Method()\n\tclear(): Promise<void> {\n    return new Promise((resolve) => {\n      this.value = \"\";\n      this.inputEl.value = \"\";\n      resolve();\n    });\n\t}\n\n  render(): HTMLStencilElement {\n    if(this.type === \"datetime\"){ console.warn(\"The type datetime has been deprecated.Please use datetime-local.\")}\n    return (\n      <Host class={this.disabled ? \"vds-basic-input--disabled\" : \"\"}>\n        <div\n          ref={(el): void => { if(el) this.inputContainerRef = el} }\n          class={combineClasses(\n            \"vds__input__container\",\n            `vds__input--size-${this.size}`,\n            this.error && \"vds__input__container--error\",\n            this.isReadonly && \"vds__input__container--readonly\",\n            this.disabled && \"vds__input__container--disabled\"\n          )}\n        >\n          {this.getInputIcon(this.informativeIcon)}\n          <input\n            ref={(el): void => { if(el) this.inputEl = el} }\n            class={\"vds__input\"}\n            type={this.type}\n            value={this.value}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            required={this.isRequired}\n            readOnly={this.isReadonly}\n            onInput={(evt): void => this.handleInput(evt)}\n            onFocus={(): void => this.toggleFocusClass()}\n            onBlur={(): void => this.toggleFocusClass()}\n            style={this.setInputStyles()}\n            {...cloneAttributes(\n              this.hostEl,\n              \"class\",\n              \"value\",\n              \"disabled\",\n              \"placeholder\",\n              \"label\",\n              \"style\",\n            )}\n          />\n          <slot name=\"secondaryActionIcon\" />\n          <slot name=\"primaryActionIcon\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -45,9 +45,9 @@ const codeTemplate = (args) => {
         type="${args.type}"
         value="${args.value}"
         placeholder="${args.placeholder}"
-        ${args.disabled ? `disabled="${args.disabled}"` : ""}
-        ${args.isReadonly ? `is-readonly="${args.isReadonly}` : ""}
-        ${args.error ? `error="${args.error}"` : ""}
+        ${args.disabled ? "disabled" : ""}
+        ${args.isReadonly ? "is-readonly" : ""}
+        ${args.error ? "error" : ""}
         informative-icon="${args.informativeIcon}"
         is-required="${args.isRequired}"
         min="${args.min}"

package/dist/collection/components/input/vds-basic-input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"vds-basic-input.stories.js","sourceRoot":"","sources":["../../../src/components/input/vds-basic-input.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nexport default {\n    title: 'VDS/Components/Input/Basic Input',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n      },\n    argTypes: {\n        size: {\n            options: [\"small\", \"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n        type: {\n            options: [\"number\", \"text\", \"date\", \"tel\", \"datetime\",\"datetime-local\", \"email\", \"submit\", \"password\", \"month\", \"time\", \"url\", \"week\"],\n            control: { type: \"select\" }\n        },\n        informativeIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n        primaryActionIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n        secondaryActionIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n    },\n};\n\nconst styles = `\n    div {\n       margin: 20px;\n       width: 400px; \n    }\n`;\n \nconst codeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<div>\n    <vds-basic-input\n        size=\"${args.size}\"\n        type=\"${args.type}\"\n        value=\"${args.value}\"\n        placeholder=\"${args.placeholder}\"\n        ${args.disabled ? `disabled=\"${args.disabled}\"` : \"\"}\n        ${args.isReadonly ? `is-readonly=\"${args.isReadonly}` : \"\"}\n        ${args.error ? `error=\"${args.error}\"` : \"\"}\n        informative-icon=\"${args.informativeIcon}\"\n        is-required=\"${args.isRequired}\"\n        min=\"${args.min}\"\n        max=\"${args.max}\"\n    >\n        ${args.secondaryActionIcon && \n            `<vds-icon-button\n                slot=\"secondaryActionIcon\"\n                icon=\"${args.secondaryActionIcon}\"\n                variant=\"secondary\"\n                size=\"${args.size === \"medium\" ? \"small\" : args.size === \"large\" ? \"medium\" : \"extra-small\"}\">\n            </vds-icon-button>`}\n        ${args.primaryActionIcon && \n            `<vds-icon-button\n                slot=\"primaryActionIcon\"\n                icon=\"${args.primaryActionIcon}\"\n                variant=\"secondary\"\n                size=\"${args.size === \"medium\" ? \"small\" : args.size === \"large\" ? \"medium\" : \"extra-small\"}\">\n            </vds-icon-button>`}\n    </vds-basic-input>\n    \n</div>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    size: \"medium\",\n    type: \"text\",\n    value: \"\",\n    placeholder: \"\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    informativeIcon: undefined,\n    primaryActionIcon: undefined,\n    secondaryActionIcon: undefined,\n    isRequired: false,\n    min: \"\" ,\n    max: \"\"\n};"]}
+{"version":3,"file":"vds-basic-input.stories.js","sourceRoot":"","sources":["../../../src/components/input/vds-basic-input.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nexport default {\n    title: 'VDS/Components/Input/Basic Input',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n      },\n    argTypes: {\n        size: {\n            options: [\"small\", \"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n        type: {\n            options: [\"number\", \"text\", \"date\", \"tel\", \"datetime\",\"datetime-local\", \"email\", \"submit\", \"password\", \"month\", \"time\", \"url\", \"week\"],\n            control: { type: \"select\" }\n        },\n        informativeIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n        primaryActionIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n        secondaryActionIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n    },\n};\n\nconst styles = `\n    div {\n       margin: 20px;\n       width: 400px; \n    }\n`;\n \nconst codeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<div>\n    <vds-basic-input\n        size=\"${args.size}\"\n        type=\"${args.type}\"\n        value=\"${args.value}\"\n        placeholder=\"${args.placeholder}\"\n        ${args.disabled ? \"disabled\" : \"\"}\n        ${args.isReadonly ? \"is-readonly\" : \"\"}\n        ${args.error ? \"error\" : \"\"}\n        informative-icon=\"${args.informativeIcon}\"\n        is-required=\"${args.isRequired}\"\n        min=\"${args.min}\"\n        max=\"${args.max}\"\n    >\n        ${args.secondaryActionIcon && \n            `<vds-icon-button\n                slot=\"secondaryActionIcon\"\n                icon=\"${args.secondaryActionIcon}\"\n                variant=\"secondary\"\n                size=\"${args.size === \"medium\" ? \"small\" : args.size === \"large\" ? \"medium\" : \"extra-small\"}\">\n            </vds-icon-button>`}\n        ${args.primaryActionIcon && \n            `<vds-icon-button\n                slot=\"primaryActionIcon\"\n                icon=\"${args.primaryActionIcon}\"\n                variant=\"secondary\"\n                size=\"${args.size === \"medium\" ? \"small\" : args.size === \"large\" ? \"medium\" : \"extra-small\"}\">\n            </vds-icon-button>`}\n    </vds-basic-input>\n    \n</div>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    size: \"medium\",\n    type: \"text\",\n    value: \"\",\n    placeholder: \"\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    informativeIcon: undefined,\n    primaryActionIcon: undefined,\n    secondaryActionIcon: undefined,\n    isRequired: false,\n    min: \"\" ,\n    max: \"\"\n};"]}