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

package/dist/collection/components/stepper-item-header/vds-stepper-item-header.js

@@ -0,0 +1,114 @@
+import { Host, h } from "@stencil/core";
+export class VdsStepperItemHeader {
+    constructor() {
+        /** Sets the stepper item header in disabled state */
+        this.disabled = false;
+        /** Sets the text alignment */
+        this.textAlignment = 'left';
+    }
+    render() {
+        if (!this.title && !this.description) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: {
+                'vds-stepper-item-header': true,
+                'vds-stepper-item-header--disabled': this.disabled,
+                [`vds-stepper-item-header--text-align-${this.textAlignment}`]: true,
+            } }, this.title && h("div", { class: "vds-stepper-item-header__title" }, this.title), this.description && h("div", { class: "vds-stepper-item-header__description" }, this.description))));
+    }
+    static get is() { return "vds-stepper-item-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-stepper-item-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-stepper-item-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the text in the title label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the text in the description label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the stepper item header in disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "textAlignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'center' | 'left'",
+                    "resolved": "\"center\" | \"left\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text alignment"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-alignment",
+                "defaultValue": "'left'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=vds-stepper-item-header.js.map

package/dist/collection/components/stepper-item-header/vds-stepper-item-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-stepper-item-header.js","sourceRoot":"","sources":["../../../src/components/stepper-item-header/vds-stepper-item-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,oBAAoB;IALjC;QAUE,qDAAqD;QAC7C,aAAQ,GAAY,KAAK,CAAC;QAClC,8BAA8B;QACtB,kBAAa,GAAsB,MAAM,CAAC;KAqBnD;IAnBC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACrC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CACL,EAAC,IAAI;YACH,WACE,KAAK,EAAE;oBACL,yBAAyB,EAAE,IAAI;oBAC/B,mCAAmC,EAAE,IAAI,CAAC,QAAQ;oBAClD,CAAC,uCAAuC,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI;iBACpE;gBAEA,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,gCAAgC,IAAE,IAAI,CAAC,KAAK,CAAO;gBAC5E,IAAI,CAAC,WAAW,IAAI,WAAK,KAAK,EAAC,sCAAsC,IAAE,IAAI,CAAC,WAAW,CAAO,CAC3F,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'vds-stepper-item-header',\n  styleUrl: 'vds-stepper-item-header.scss',\n  shadow: true,\n})\nexport class VdsStepperItemHeader {\n  /** Define the text in the title label */\n  @Prop() title: string;\n  /** Define the text in the description label */\n  @Prop() description: string;\n  /** Sets the stepper item header in disabled state */\n  @Prop() disabled: boolean = false;\n  /** Sets the text alignment */\n  @Prop() textAlignment: 'center' | 'left' = 'left';\n\n  render() {\n    if (!this.title && !this.description) {\n      return null;\n    }\n    return (\n      <Host>\n        <div\n          class={{\n            'vds-stepper-item-header': true,\n            'vds-stepper-item-header--disabled': this.disabled,\n            [`vds-stepper-item-header--text-align-${this.textAlignment}`]: true,\n          }}\n        >\n          {this.title && <div class=\"vds-stepper-item-header__title\">{this.title}</div>}\n          {this.description && <div class=\"vds-stepper-item-header__description\">{this.description}</div>}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stepper-item-header/vds-stepper-item-header.stories.js

@@ -0,0 +1,28 @@
+export default {
+    title: 'VDS/Components/Stepper/Stepper-Item-Header',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?node-id=33183-129736&m=dev',
+        },
+    },
+};
+const codeTemplate = args => {
+    return `
+    <vds-stepper-item-header
+      title="${args.title}"
+      description="${args.description}"
+      ${args.disabled ? 'disabled' : ''}
+    ></vds-stepper-item-header>
+  `;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    title: 'Step Title',
+    description: 'Step description',
+    disabled: false,
+};
+//# sourceMappingURL=vds-stepper-item-header.stories.js.map

package/dist/collection/components/stepper-item-header/vds-stepper-item-header.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-stepper-item-header.stories.js","sourceRoot":"","sources":["../../../src/components/stepper-item-header/vds-stepper-item-header.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,4CAA4C;IACnD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,uFAAuF;SAC7F;KACF;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;;eAEM,IAAI,CAAC,KAAK;qBACJ,IAAI,CAAC,WAAW;QAC7B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;GAEpC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,KAAK;CAChB,CAAC","sourcesContent":["export default {\n  title: 'VDS/Components/Stepper/Stepper-Item-Header',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n    design: {\n      type: 'figma',\n      url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?node-id=33183-129736&m=dev',\n    },\n  },\n};\n\nconst codeTemplate = args => {\n  return `\n    <vds-stepper-item-header\n      title=\"${args.title}\"\n      description=\"${args.description}\"\n      ${args.disabled ? 'disabled' : ''}\n    ></vds-stepper-item-header>\n  `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  title: 'Step Title',\n  description: 'Step description',\n  disabled: false,\n};\n"]}

package/dist/collection/components/switch/vds-switch.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);
@@ -892,6 +906,8 @@
 
 :host {
   display: inline-block;
+  --vds-switch-state-off: var(--color-background-brand-press);
+  --vds-switch-state-on: var(--color-background-brand-default);
 }
 :host input {
   outline: none;
@@ -946,12 +962,12 @@
   height: var(--spacing-07);
 }
 :host .vds-switch__container .switch-icon::part(svg-icon) {
-  color: var(--color-background-brand-press);
-  fill: var(--color-background-brand-press);
+  color: var(--vds-switch-state-off);
+  fill: var(--vds-switch-state-off);
 }
 :host .vds-switch__container.vds-switch--checked .switch-icon::part(svg-icon) {
-  color: var(--color-background-brand-default);
-  fill: var(--color-background-brand-default);
+  color: var(--vds-switch-state-on);
+  fill: var(--vds-switch-state-on);
 }
 :host .vds-switch__container.vds-switch--disabled .switch-icon::part(svg-icon) {
   color: var(--color-icon-general);

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

@@ -94,7 +94,7 @@ export class VdsSwitch {
     }
     render() {
         var _a;
-        return (h(Host, { key: '620638faf864c1a4346d29c8d409c81bec18f624', state: this.state, class: this.disabled ? "vds-switch--disabled" : "" }, h("div", { key: '7fe299653ac969b4fb21a99dcf960c556086730e', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds-switch__container", `vds-switch__container--size-${this.size}`, `vds-switch__container--label-alignment-${this.labelAlignment}`, this.checked ? "vds-switch--checked" : "", this.disabled ? "vds-switch--disabled" : "") }, h("div", { key: 'e57f3c08ca8dbe7dacf681fa6a97a977634dbf4d', class: "vds-switch" }, h("input", { key: '6d016b651732cdf6dbaa6eba8191b06e69f4341a', type: "checkbox", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderSwitch()), this.labelValue && this.renderLabel())));
+        return (h(Host, { key: '43cc4e4fd3c91937ba73406f15202e9f57e8a893', state: this.state, class: this.disabled ? "vds-switch--disabled" : "" }, h("div", { key: '1c7349fde28961e9baff109ff9381b1e3b0888e3', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds-switch__container", `vds-switch__container--size-${this.size}`, `vds-switch__container--label-alignment-${this.labelAlignment}`, this.checked ? "vds-switch--checked" : "", this.disabled ? "vds-switch--disabled" : "") }, h("div", { key: 'c0bd99188302ffbee43c5655ee592b19c0acf995', class: "vds-switch" }, h("input", { key: 'a63df6950183c16002c820fcccf683e8c866b0aa', type: "checkbox", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderSwitch()), this.labelValue && this.renderLabel())));
     }
     static get is() { return "vds-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -113,7 +113,6 @@ export class VdsSwitch {
         return {
             "labelValue": {
                 "type": "string",
-                "attribute": "label-value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -128,11 +127,11 @@ export class VdsSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "label-value"
             },
             "checked": {
                 "type": "boolean",
-                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -148,11 +147,11 @@ export class VdsSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -168,11 +167,11 @@ export class VdsSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": true,
                 "complexType": {
                     "original": "\"medium\" | \"large\"",
@@ -188,11 +187,11 @@ export class VdsSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "isRequired": {
                 "type": "boolean",
-                "attribute": "is-required",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -208,11 +207,11 @@ export class VdsSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-required",
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -227,11 +226,11 @@ export class VdsSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "value"
             },
             "labelAlignment": {
                 "type": "string",
-                "attribute": "label-alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "\"start\" | \"end\"",
@@ -247,6 +246,7 @@ export class VdsSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-alignment",
                 "defaultValue": "\"end\""
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"vds-switch.js","sourceRoot":"","sources":["../../../src/components/switch/vds-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, Event, EventEmitter, AttachInternals, Watch, Method } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { getIconSize } from '../../utils/icon-attr.utils';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-switch',\n  styleUrl: 'vds-switch.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsSwitch {\n  /** Sets the text to be shown in the switch */\n  @Prop({ reflect: true, mutable: true }) labelValue: string;\n  /** Sets the switch in checked state */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /** Sets the switch in disabled state */\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  /** Sets the switch's size */\n  @Prop({ mutable: true }) size: \"medium\" | \"large\" = \"medium\";\n  /** Toggles the required sign in the field */\n  @Prop({ mutable: true }) isRequired: boolean = false;\n  /** Sets the value in the input. Usually uses checked prop as string. \n  *  Used to manage Reactive forms and other native functionality */\n  @Prop({ reflect: true, mutable: true }) value: string;\n  /** Aligns the label in relation to the switch*/\n  @Prop() labelAlignment: \"start\" | \"end\" = \"end\";\n\n  @Element() hostEl: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /** Makes a custom change to target property using checked (use for React components) */\n  @Event() check: EventEmitter<boolean>;\n\n  private state: \"checked\" | \"unchecked\" = \"unchecked\";\n\n  componentWillRender(): void {\n    this.setSwitchState();\n  }\n\n  componentDidLoad(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time checked value changes.\n   * Sets form value in order to work properly with native forms\n   *\n   * @returns void\n   */\n  @Watch(\"checked\")\n  setCheckedStates(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time the switch is being click.\n   * Executes toggleCheck method.\n   *\n   * @param event - MouseEvent\n   * @returns void\n   */\n\thandleClick(_: MouseEvent): void {\n\t\tthis.toggleCheck();\n\t}\n\n   /**\n   * Toggles switch value.\n   * Emits check event with checked value.\n   *\n   * @returns Promise<void>\n   */\n  @Method()\n  toggleCheck(): Promise<void> {\n    if (!this.disabled) {\n      const inputEvent = new InputEvent(\"input\");\n\t\t\tthis.checked = !this.checked;\n      this.value = this.checked.toString();\n\t\t\tthis.check.emit(this.checked);\n      this.hostEl.dispatchEvent(inputEvent);\n\t\t}\n    return Promise.resolve();\n  }\n\n  /**\n   * Determine state of the switch based on the checked property.\n   * When checked is true, state is checked.\n   * When checked is false, state is unchecked.\n   *\n   * @returns void\n   */\n  private setSwitchState(): void {\n    this.state = this.checked ? \"checked\" : \"unchecked\";\n  }\n\n  /**\n   * Returns the icon prop based on the state and calculate the size.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderSwitch(): HTMLStencilElement {\n    const size = getIconSize(this.size);\n    switch(this.state) {\n      case \"checked\":\n        return <vds-icon class=\"switch-icon\" svgIcon={`switch-on`} size={size}></vds-icon>;\n      default:\n        return <vds-icon class=\"switch-icon switch-icon-off\" svgIcon={`switch-off`} size={size}></vds-icon>;\n    }\n  }\n\n   /**\n   * Returns the vds-label for the switch when there is a label provided.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderLabel(): HTMLStencilElement {\n    return <vds-label\n      class={\"switch-label\"}\n      labelValue={this.labelValue}\n      required={this.isRequired}\n      size={this.size}\n      disabled={this.disabled}></vds-label>\n  }\n\n\n  render() {\n    return (\n      <Host state={this.state} class={this.disabled ? \"vds-switch--disabled\" : \"\"}>\n        <div\n          onClick={(evt): void => {this.handleClick(evt)}}\n          class={combineClasses(\n            \"vds-switch__container\",\n            `vds-switch__container--size-${this.size}`,\n            `vds-switch__container--label-alignment-${this.labelAlignment}`,\n            this.checked ? \"vds-switch--checked\" : \"\",\n            this.disabled ? \"vds-switch--disabled\" : \"\"\n          )}\n        >\n          <div class=\"vds-switch\">\n            <input\n              type={\"checkbox\"}\n              checked={this.checked}\n              value={this.value}\n              id={this.hostEl?.id}\n              disabled={this.disabled} />\n            {this.renderSwitch()}\n          </div>\n          {this.labelValue && this.renderLabel()}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"vds-switch.js","sourceRoot":"","sources":["../../../src/components/switch/vds-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, Event, EventEmitter, AttachInternals, Watch, Method } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { getIconSize } from '../../utils/icon-attr.utils';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-switch',\n  styleUrl: 'vds-switch.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsSwitch {\n  /** Sets the text to be shown in the switch */\n  @Prop({ reflect: true, mutable: true }) labelValue: string;\n  /** Sets the switch in checked state */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /** Sets the switch in disabled state */\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  /** Sets the switch's size */\n  @Prop({ mutable: true }) size: \"medium\" | \"large\" = \"medium\";\n  /** Toggles the required sign in the field */\n  @Prop({ mutable: true }) isRequired: boolean = false;\n  /** Sets the value in the input. Usually uses checked prop as string. \n  *  Used to manage Reactive forms and other native functionality */\n  @Prop({ reflect: true, mutable: true }) value: string;\n  /** Aligns the label in relation to the switch*/\n  @Prop() labelAlignment: \"start\" | \"end\" = \"end\";\n\n  @Element() hostEl: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /** Makes a custom change to target property using checked (use for React components) */\n  @Event() check: EventEmitter<boolean>;\n\n  private state: \"checked\" | \"unchecked\" = \"unchecked\";\n\n  componentWillRender(): void {\n    this.setSwitchState();\n  }\n\n  componentDidLoad(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time checked value changes.\n   * Sets form value in order to work properly with native forms\n   *\n   * @returns void\n   */\n  @Watch(\"checked\")\n  setCheckedStates(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time the switch is being click.\n   * Executes toggleCheck method.\n   *\n   * @param event - MouseEvent\n   * @returns void\n   */\n\thandleClick(_: MouseEvent): void {\n\t\tthis.toggleCheck();\n\t}\n\n   /**\n   * Toggles switch value.\n   * Emits check event with checked value.\n   *\n   * @returns Promise<void>\n   */\n  @Method()\n  toggleCheck(): Promise<void> {\n    if (!this.disabled) {\n      const inputEvent = new InputEvent(\"input\");\n\t\t\tthis.checked = !this.checked;\n      this.value = this.checked.toString();\n\t\t\tthis.check.emit(this.checked);\n      this.hostEl.dispatchEvent(inputEvent);\n\t\t}\n    return Promise.resolve();\n  }\n\n  /**\n   * Determine state of the switch based on the checked property.\n   * When checked is true, state is checked.\n   * When checked is false, state is unchecked.\n   *\n   * @returns void\n   */\n  private setSwitchState(): void {\n    this.state = this.checked ? \"checked\" : \"unchecked\";\n  }\n\n  /**\n   * Returns the icon prop based on the state and calculate the size.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderSwitch(): HTMLStencilElement {\n    const size = getIconSize(this.size);\n    switch(this.state) {\n      case \"checked\":\n        return <vds-icon class=\"switch-icon\" svgIcon={`switch-on`} size={size}></vds-icon>;\n      default:\n        return <vds-icon class=\"switch-icon switch-icon-off\" svgIcon={`switch-off`} size={size}></vds-icon>;\n    }\n  }\n\n   /**\n   * Returns the vds-label for the switch when there is a label provided.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderLabel(): HTMLStencilElement {\n    return <vds-label\n      class={\"switch-label\"}\n      labelValue={this.labelValue}\n      required={this.isRequired}\n      size={this.size}\n      disabled={this.disabled}></vds-label>\n  }\n\n  render() {\n    return (\n      <Host state={this.state} class={this.disabled ? \"vds-switch--disabled\" : \"\"}>\n        <div\n          onClick={(evt): void => {this.handleClick(evt)}}\n          class={combineClasses(\n            \"vds-switch__container\",\n            `vds-switch__container--size-${this.size}`,\n            `vds-switch__container--label-alignment-${this.labelAlignment}`,\n            this.checked ? \"vds-switch--checked\" : \"\",\n            this.disabled ? \"vds-switch--disabled\" : \"\"\n          )}\n        >\n          <div class=\"vds-switch\">\n            <input\n              type={\"checkbox\"}\n              checked={this.checked}\n              value={this.value}\n              id={this.hostEl?.id}\n              disabled={this.disabled} />\n            {this.renderSwitch()}\n          </div>\n          {this.labelValue && this.renderLabel()}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/switch/vds-switch.stories.js

@@ -7,12 +7,12 @@ export default {
     },
     argTypes: {
         size: {
-            options: ["medium", "large"],
-            control: { type: "select" }
+            options: ['medium', 'large'],
+            control: { type: 'select' },
         },
         labelAlignment: {
-            options: ["start", "end"],
-            control: { type: "select" }
+            options: ['start', 'end'],
+            control: { type: 'select' },
         },
     },
 };
@@ -22,16 +22,16 @@ const styles = `
        width: 400px; 
     }
 `;
-const codeTemplate = (args) => {
+const codeTemplate = args => {
     return `
 <style>${styles}</style>
 <div>
     <vds-switch
         size="${args.size}"
         label-value="${args.labelValue}"
-        checked="${args.checked}"
-        disabled="${args.disabled}"
-        is-required="${args.isRequired}"
+        ${args.checked ? 'checked' : ''}
+        ${args.disabled ? 'disabled' : ''}
+        ${args.isRequired ? 'is-required' : ''}
         label-alignment="${args.labelAlignment}"
     >
     </vds-switch>
@@ -40,11 +40,43 @@ const codeTemplate = (args) => {
 };
 export const BasicUsage = codeTemplate.bind({});
 BasicUsage.args = {
-    size: "medium",
-    labelValue: "Label 1",
+    size: 'medium',
+    labelValue: 'Label 1',
     checked: false,
     disabled: false,
     isRequired: false,
-    labelAlignment: "end"
+    labelAlignment: 'end',
+};
+const customColorsCodeTemplate = args => {
+    return `
+<style>
+    ${styles}
+    .custom-switch {
+        --vds-switch-state-off: var(--color-background-danger-default);
+        --vds-switch-state-on: var(--color-background-healthy-default);
+    }
+</style>
+<div>
+    <vds-switch
+        class="custom-switch"
+        size="${args.size}"
+        label-value="${args.labelValue}"
+        ${args.checked ? 'checked' : ''}
+        ${args.disabled ? 'disabled' : ''}
+        ${args.isRequired ? 'is-required' : ''}
+        label-alignment="${args.labelAlignment}"
+    >
+    </vds-switch>
+</div>
+`;
+};
+export const CustomColorsUsage = customColorsCodeTemplate.bind({});
+CustomColorsUsage.args = {
+    size: 'medium',
+    labelValue: 'Label 1',
+    checked: false,
+    disabled: false,
+    isRequired: false,
+    labelAlignment: 'end',
 };
 //# sourceMappingURL=vds-switch.stories.js.map

package/dist/collection/components/switch/vds-switch.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"vds-switch.stories.js","sourceRoot":"","sources":["../../../src/components/switch/vds-switch.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACX,KAAK,EAAE,gCAAgC;IACvC,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACJ;IACD,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC;YACzB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;CAKd,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1B,OAAO;SACF,MAAM;;;gBAGC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,UAAU;mBACnB,IAAI,CAAC,OAAO;oBACX,IAAI,CAAC,QAAQ;uBACV,IAAI,CAAC,UAAU;2BACX,IAAI,CAAC,cAAc;;;;CAI7C,CAAC;AACF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IACd,IAAI,EAAE,QAAQ;IACd,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,KAAK;IACjB,cAAc,EAAE,KAAK;CACxB,CAAA","sourcesContent":["export default {\n    title: 'VDS/Components/Switches/Switch',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n    },\n    argTypes: {\n        size: {\n            options: [\"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n        labelAlignment: {\n            options: [\"start\", \"end\"],\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-switch\n        size=\"${args.size}\"\n        label-value=\"${args.labelValue}\"\n        checked=\"${args.checked}\"\n        disabled=\"${args.disabled}\"\n        is-required=\"${args.isRequired}\"\n        label-alignment=\"${args.labelAlignment}\"\n    >\n    </vds-switch>\n</div>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    size: \"medium\",\n    labelValue: \"Label 1\",\n    checked: false,\n    disabled: false,\n    isRequired: false,\n    labelAlignment: \"end\"\n}"]}
+{"version":3,"file":"vds-switch.stories.js","sourceRoot":"","sources":["../../../src/components/switch/vds-switch.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,cAAc,EAAE;YACd,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC;YACzB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;CAKd,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;SACA,MAAM;;;gBAGC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,UAAU;UAC5B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UAC7B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;2BACnB,IAAI,CAAC,cAAc;;;;CAI7C,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,IAAI,EAAE,QAAQ;IACd,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,KAAK;IACjB,cAAc,EAAE,KAAK;CACtB,CAAC;AAEF,MAAM,wBAAwB,GAAG,IAAI,CAAC,EAAE;IACtC,OAAO;;MAEH,MAAM;;;;;;;;;gBASI,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,UAAU;UAC5B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UAC7B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;2BACnB,IAAI,CAAC,cAAc;;;;CAI7C,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEnE,iBAAiB,CAAC,IAAI,GAAG;IACvB,IAAI,EAAE,QAAQ;IACd,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,KAAK;IACjB,cAAc,EAAE,KAAK;CACtB,CAAC","sourcesContent":["export default {\n  title: 'VDS/Components/Switches/Switch',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n  },\n  argTypes: {\n    size: {\n      options: ['medium', 'large'],\n      control: { type: 'select' },\n    },\n    labelAlignment: {\n      options: ['start', 'end'],\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-switch\n        size=\"${args.size}\"\n        label-value=\"${args.labelValue}\"\n        ${args.checked ? 'checked' : ''}\n        ${args.disabled ? 'disabled' : ''}\n        ${args.isRequired ? 'is-required' : ''}\n        label-alignment=\"${args.labelAlignment}\"\n    >\n    </vds-switch>\n</div>\n`;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  size: 'medium',\n  labelValue: 'Label 1',\n  checked: false,\n  disabled: false,\n  isRequired: false,\n  labelAlignment: 'end',\n};\n\nconst customColorsCodeTemplate = args => {\n  return `\n<style>\n    ${styles}\n    .custom-switch {\n        --vds-switch-state-off: var(--color-background-danger-default);\n        --vds-switch-state-on: var(--color-background-healthy-default);\n    }\n</style>\n<div>\n    <vds-switch\n        class=\"custom-switch\"\n        size=\"${args.size}\"\n        label-value=\"${args.labelValue}\"\n        ${args.checked ? 'checked' : ''}\n        ${args.disabled ? 'disabled' : ''}\n        ${args.isRequired ? 'is-required' : ''}\n        label-alignment=\"${args.labelAlignment}\"\n    >\n    </vds-switch>\n</div>\n`;\n};\n\nexport const CustomColorsUsage = customColorsCodeTemplate.bind({});\n\nCustomColorsUsage.args = {\n  size: 'medium',\n  labelValue: 'Label 1',\n  checked: false,\n  disabled: false,\n  isRequired: false,\n  labelAlignment: 'end',\n};\n"]}

package/dist/collection/components/tab/vds-tab.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);