npm - wabtec-internal-volt-basic-components - Versions diffs - 1.0.0 → 1.2.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (773) hide show

package/dist/collection/components/sidenav-item-category/vds-sidenav-item-category.css CHANGED Viewed

@@ -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/sidenav-item-category/vds-sidenav-item-category.js CHANGED Viewed

@@ -44,7 +44,7 @@ export class VdsSidenavItemCategory {
         }
     }
     render() {
-        return (h(Host, { key: '4fbd60f466280a93de1cf659af3ef832f716d538' }, h("div", { key: '0bd28e91b9583798ac0045febbf2f0e1a2e3e513', class: "vds-sidenav-item-category" }, h("div", { key: '5a213c8d5513199f0af8f3aba7ad7955e9ee23f5', class: "vds-sidenav-item-category__header" }, this.setView(), this.setSlot()), h("div", { key: 'd3e34a012d2ef402e967e9dc6242d2caf217b393', class: "vds-sidenav-item-category__content" }, h("slot", { key: '3e6b1345bf437728c9252becf6644e29b20b6b4d', name: "category-items" })))));
+        return (h(Host, { key: '017fac9b9cc74d098b14e21c10bee50f794c0e52' }, h("div", { key: 'a27e77f3a3d777b9765904acc9ee5e6d512c23f9', class: "vds-sidenav-item-category" }, h("div", { key: '6e3cb37a40414911d14fbdf51775e069af9a4b0a', class: "vds-sidenav-item-category__header" }, this.setView(), this.setSlot()), h("div", { key: '277c3bcdb986a0f5ebb9cfa1e62c27ee49966035', class: "vds-sidenav-item-category__content" }, h("slot", { key: '925168658ffa0d1c930d8b82e050da3da035b1ac', name: "category-items" })))));
     }
     static get is() { return "vds-sidenav-item-category"; }
     static get encapsulation() { return "shadow"; }
@@ -62,7 +62,6 @@ export class VdsSidenavItemCategory {
         return {
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -77,11 +76,11 @@ export class VdsSidenavItemCategory {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "expanded": {
                 "type": "boolean",
-                "attribute": "expanded",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -97,11 +96,11 @@ export class VdsSidenavItemCategory {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "expanded",
                 "defaultValue": "false"
             },
             "isStatic": {
                 "type": "boolean",
-                "attribute": "is-static",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -117,11 +116,11 @@ export class VdsSidenavItemCategory {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-static",
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "GroupHeaderSize",
@@ -143,6 +142,7 @@ export class VdsSidenavItemCategory {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             }
         };

package/dist/collection/components/sidenav-item-input/vds-sidenav-item-input.css CHANGED Viewed

@@ -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/sidenav-item-input/vds-sidenav-item-input.js CHANGED Viewed

@@ -1,9 +1,12 @@
 import { Host, h } from "@stencil/core";
 import { cloneAttributes } from "../../utils/clone-attributes";
+import { emitInputEvent } from "../../utils/form";
 export class VdsSidenavItemInput {
     constructor() {
         /** When true expands the nav item to show both text and icon. When false, only shows the icon */
         this.expanded = true;
+        /** Sets the input's value. */
+        this.value = "";
         /** Allows user to define a search icon inside the input at its right (zoom by default) . */
         this.actionIcon = "zoom";
         this.inputIcon = this.actionIcon;
@@ -12,6 +15,7 @@ export class VdsSidenavItemInput {
         this.setFormValue();
     }
     setFormValue() {
+        emitInputEvent(this.hostEl, this.value);
         if (this.internals && !!this.internals.setFormValue) {
             this.internals.setFormValue(this.value);
         }
@@ -106,7 +110,7 @@ export class VdsSidenavItemInput {
         return h("vds-sidenav-item", { onClick: (evt) => { this.handleCollapseIconClick(evt); }, icon: this.actionIcon, expanded: false });
     }
     render() {
-        return (h(Host, { key: 'fe50c45e2b1bcd1823d0b9f90f81e588a5e8f8e7', class: this.disabled ? 'vds__sidenav-item-input--disabled' : '' }, this.expanded ? this.renderInput() : this.renderIcon()));
+        return (h(Host, { key: 'ec9848d49266fee8c3bffd610d449a32d3e7f210', class: this.disabled ? 'vds__sidenav-item-input--disabled' : '' }, this.expanded ? this.renderInput() : this.renderIcon()));
     }
     static get is() { return "vds-sidenav-item-input"; }
     static get encapsulation() { return "shadow"; }
@@ -125,7 +129,6 @@ export class VdsSidenavItemInput {
         return {
             "expanded": {
                 "type": "boolean",
-                "attribute": "expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -141,11 +144,11 @@ export class VdsSidenavItemInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "expanded",
                 "defaultValue": "true"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -160,11 +163,12 @@ export class VdsSidenavItemInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "\"\""
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -179,11 +183,11 @@ export class VdsSidenavItemInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "placeholder"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -198,11 +202,11 @@ export class VdsSidenavItemInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "disabled"
             },
             "isReadonly": {
                 "type": "boolean",
-                "attribute": "is-readonly",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -217,11 +221,11 @@ export class VdsSidenavItemInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "is-readonly"
             },
             "error": {
                 "type": "boolean",
-                "attribute": "error",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -236,11 +240,11 @@ export class VdsSidenavItemInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "error"
             },
             "informativeIcon": {
                 "type": "string",
-                "attribute": "informative-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -255,11 +259,11 @@ export class VdsSidenavItemInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "informative-icon"
             },
             "actionIcon": {
                 "type": "string",
-                "attribute": "action-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -275,11 +279,11 @@ export class VdsSidenavItemInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "action-icon",
                 "defaultValue": "\"zoom\""
             },
             "formatter": {
                 "type": "unknown",
-                "attribute": "formatter",
                 "mutable": true,
                 "complexType": {
                     "original": "Function",

package/dist/collection/components/sidenav-item-input/vds-sidenav-item-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"vds-sidenav-item-input.js","sourceRoot":"","sources":["../../../src/components/sidenav-item-input/vds-sidenav-item-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,eAAe,EAAsB,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;~~AAS~~/D,MAAM,OAAO,mBAAmB;IANhC;QAOE,iGAAiG;QACzF,aAAQ,GAAY,IAAI,CAAC;~~QAajC~~,4FAA4F;QACpF,eAAU,GAAW,MAAM,CAAC;QAe3B,cAAS,GAAW,IAAI,CAAC,UAAU,CAAC;~~KA+J9C~~;~~IA3JC~~,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAGD,YAAY;QACV,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;YACpD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAED;;;;SAIE;IAEH,QAAQ;QACL,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;IAClC,CAAC;IAEA;;;;SAIE;IAEH,QAAQ;QACL,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;IAClC,CAAC;IAEA;;;;SAIE;IAEH,KAAK;QACF,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC;QACjC,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;IAC5B,CAAC;IAEA;;;;;;;SAOE;IACM,iBAAiB,CAAC,GAAqC;QAC7D,GAAG,CAAC,cAAc,EAAE,CAAC;QAErB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;QAEnE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAED;;;;;;;;SAQE;IACM,eAAe,CAAC,GAAe;QACrC,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,EAAE,CAAC;YAC/B,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;YACvC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3B,CAAC;IAED;;;;;;SAME;IACM,uBAAuB,CAAC,GAAe;QAC7C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAClC,CAAC;IAED;;;;SAIE;IACM,WAAW;QACjB,OAAO,qCACL,GAAG,EAAE,CAAC,EAAE,EAAQ,EAAE;gBAChB,IAAI,EAAE,EAAE,CAAC;oBACP,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;gBACpB,CAAC;YACH,CAAC,EACD,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,wBAAwB,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,aAAa,EAAE,CAAC,GAAG,EAAQ,EAAE,GAAG,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAC1D,eAAe,CACjB,IAAI,CAAC,MAAM,EACX,OAAO,EACP,OAAO,EACP,UAAU,EACV,aAAa,EACb,OAAO,EACP,OAAO,CACR;YAED,uBACE,IAAI,EAAC,mBAAmB,EACxB,OAAO,EAAE,CAAC,GAAG,EAAQ,EAAE,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EACtD,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,GACG,CACF,CAAA;IACpB,CAAC;IAED;;;;SAIE;IACM,UAAU;QAChB,OAAO,wBACD,OAAO,EAAE,CAAC,GAAG,EAAQ,EAAE,GAAG,IAAI,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC9D,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,QAAQ,EAAE,KAAK,GACG,CAAA;IAC1B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,EAAE,IAClE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAClD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { AttachInternals, HTMLStencilElement, State, Watch } from '@stencil/core/internal';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { VdsBasicInputCustomEvent } from '../../components';\n\n@Component({\n tag: 'vds-sidenav-item-input',\n styleUrl: 'vds-sidenav-item-input.scss',\n shadow: true,\n formAssociated: true\n})\nexport class VdsSidenavItemInput {\n /** When true expands the nav item to show both text and icon. When false, only shows the icon /\n @Prop() expanded: boolean = true;\n /* Sets the input's value. /\n @Prop({ mutable: true, reflect: true }) value: string;\n /* Sets the input's 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 /* Allows user to define a information icon inside the input at its left . /\n @Prop() informativeIcon: string;\n /* Allows user to define a search icon inside the input at its right (zoom by default) . /\n @Prop() actionIcon: string = \"zoom\";\n /* Sets character formatting for user input. Useful for adding a mask to the input. /\n @Prop({ mutable: true }) formatter?: Function;\n\n /* Emits an event when the user change the value /\n @Event() changeInput: EventEmitter<string>;\n /* Emits an event when the user clicks on input's icon /\n @Event() iconClick: EventEmitter<MouseEvent>;\n /* Emits an event when the user clicks on icon when expanded is false /\n @Event() collapseIconClick: EventEmitter<MouseEvent>;\n\n @Element() hostEl: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n \n @State() inputIcon: string = this.actionIcon;\n\n private inputEl: HTMLVdsBasicInputElement;\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\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 this.inputEl.setFocus();\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 this.inputEl.getValue();\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 this.value = \"\";\n this.inputEl.clear();\n this.inputIcon = this.actionIcon;\n return Promise.resolve();\n\t}\n\n /\n\t Handles change input event from vds-basic-input\n * Emits changeInput event.\n * Sets icon to close when value is not blank otherwise zoom.\n\t \n @params evt - VdsBasicInputCustomEvent\n\t * @returns void\n\t /\n private handleChangeInput(evt: VdsBasicInputCustomEvent<string>): void {\n evt.preventDefault();\n \n this.value = evt.detail;\n this.inputIcon = evt.detail.length > 0 ? \"close\" : this.actionIcon;\n\n this.changeInput.emit(this.value);\n }\n\n /\n\t Handles click event from vds-icon-button inside the input.\n * Emits iconClick event.\n * When inputIcon equals close, vds-basic-input gets clear.\n * When inputIcon equals zoom, vds-basic-input gets focus.\n\t \n @params evt - MouseEvent\n\t * @returns void\n\t /\n private handleIconClick(evt: MouseEvent): void {\n if (this.inputIcon === \"close\") {\n this.clear();\n }\n if (this.inputIcon === this.actionIcon) {\n this.setFocus();\n }\n this.iconClick.emit(evt);\n }\n\n /\n\t Handles click event from vds-icon-button when expanded is false\n * Emits collapseIconClick event.\n\t \n @params evt - MouseEvent\n\t * @returns void\n\t /\n private handleCollapseIconClick(evt: MouseEvent): void {\n this.collapseIconClick.emit(evt)\n }\n\n /\n\t Renders input when expanded is to set true.\n\t \n\t @returns HTMLStencilElement\n\t /\n private renderInput(): HTMLStencilElement {\n return <vds-basic-input\n ref={(el): void => {\n if (el) {\n this.inputEl = el;\n }\n }}\n size={\"medium\"}\n type={\"text\"}\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n isReadonly={this.isReadonly}\n formatter={this.formatter}\n class={\"vds-sidenav-item-input\"}\n error={this.error}\n informativeIcon={this.informativeIcon}\n onChangeInput={(evt): void => { this.handleChangeInput(evt); }}\n {...cloneAttributes(\n this.hostEl,\n \"class\",\n \"value\",\n \"disabled\",\n \"placeholder\",\n \"label\",\n \"style\"\n )}\n >\n <vds-icon-button\n slot=\"primaryActionIcon\"\n onClick={(evt): void => { this.handleIconClick(evt); }}\n icon={this.inputIcon}\n variant=\"secondary\"\n disabled={this.disabled}\n size=\"medium\">\n </vds-icon-button>\n </vds-basic-input>\n }\n\n /\n\t Renders sidenav-item icon when expanded is to set false.\n\t \n\t @returns HTMLStencilElement\n\t */\n private renderIcon(): HTMLStencilElement {\n return <vds-sidenav-item\n onClick={(evt): void => { this.handleCollapseIconClick(evt); }}\n icon={this.actionIcon}\n expanded={false}\n ></vds-sidenav-item>\n }\n\n render(): HTMLStencilElement {\n return (\n <Host class={this.disabled ? 'vds__sidenav-item-input--disabled' : ''}>\n {this.expanded ? this.renderInput() : this.renderIcon() }\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"vds-sidenav-item-input.js","sourceRoot":"","sources":["../../../src/components/sidenav-item-input/vds-sidenav-item-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { AttachInternals, HTMLStencilElement, State, Watch } from '@stencil/core/internal';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { VdsBasicInputCustomEvent } from '../../components';\nimport { emitInputEvent } from '../../utils/form';\n\n@Component({\n tag: 'vds-sidenav-item-input',\n styleUrl: 'vds-sidenav-item-input.scss',\n shadow: true,\n formAssociated: true\n})\nexport class VdsSidenavItemInput {\n /** When true expands the nav item to show both text and icon. When false, only shows the icon /\n @Prop() expanded: boolean = true;\n /* Sets the input's value. /\n @Prop({ mutable: true, reflect: true }) value: string = \"\";\n /* Sets the input's 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 /* Allows user to define a information icon inside the input at its left . /\n @Prop() informativeIcon: string;\n /* Allows user to define a search icon inside the input at its right (zoom by default) . /\n @Prop() actionIcon: string = \"zoom\";\n /* Sets character formatting for user input. Useful for adding a mask to the input. /\n @Prop({ mutable: true }) formatter?: Function;\n\n /* Emits an event when the user change the value /\n @Event() changeInput: EventEmitter<string>;\n /* Emits an event when the user clicks on input's icon /\n @Event() iconClick: EventEmitter<MouseEvent>;\n /* Emits an event when the user clicks on icon when expanded is false /\n @Event() collapseIconClick: EventEmitter<MouseEvent>;\n\n @Element() hostEl: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n \n @State() inputIcon: string = this.actionIcon;\n\n private inputEl: HTMLVdsBasicInputElement;\n\n componentDidLoad(): void {\n this.setFormValue();\n }\n\n @Watch(\"value\")\n setFormValue(): void {\n emitInputEvent(this.hostEl, this.value);\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.value);\n }\n }\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 this.inputEl.setFocus();\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 this.inputEl.getValue();\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 this.value = \"\";\n this.inputEl.clear();\n this.inputIcon = this.actionIcon;\n return Promise.resolve();\n\t}\n\n /\n\t Handles change input event from vds-basic-input\n * Emits changeInput event.\n * Sets icon to close when value is not blank otherwise zoom.\n\t \n @params evt - VdsBasicInputCustomEvent\n\t * @returns void\n\t /\n private handleChangeInput(evt: VdsBasicInputCustomEvent<string>): void {\n evt.preventDefault();\n \n this.value = evt.detail;\n this.inputIcon = evt.detail.length > 0 ? \"close\" : this.actionIcon;\n\n this.changeInput.emit(this.value);\n }\n\n /\n\t Handles click event from vds-icon-button inside the input.\n * Emits iconClick event.\n * When inputIcon equals close, vds-basic-input gets clear.\n * When inputIcon equals zoom, vds-basic-input gets focus.\n\t \n @params evt - MouseEvent\n\t * @returns void\n\t /\n private handleIconClick(evt: MouseEvent): void {\n if (this.inputIcon === \"close\") {\n this.clear();\n }\n if (this.inputIcon === this.actionIcon) {\n this.setFocus();\n }\n this.iconClick.emit(evt);\n }\n\n /\n\t Handles click event from vds-icon-button when expanded is false\n * Emits collapseIconClick event.\n\t \n @params evt - MouseEvent\n\t * @returns void\n\t /\n private handleCollapseIconClick(evt: MouseEvent): void {\n this.collapseIconClick.emit(evt)\n }\n\n /\n\t Renders input when expanded is to set true.\n\t \n\t @returns HTMLStencilElement\n\t /\n private renderInput(): HTMLStencilElement {\n return <vds-basic-input\n ref={(el): void => {\n if (el) {\n this.inputEl = el;\n }\n }}\n size={\"medium\"}\n type={\"text\"}\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n isReadonly={this.isReadonly}\n formatter={this.formatter}\n class={\"vds-sidenav-item-input\"}\n error={this.error}\n informativeIcon={this.informativeIcon}\n onChangeInput={(evt): void => { this.handleChangeInput(evt); }}\n {...cloneAttributes(\n this.hostEl,\n \"class\",\n \"value\",\n \"disabled\",\n \"placeholder\",\n \"label\",\n \"style\"\n )}\n >\n <vds-icon-button\n slot=\"primaryActionIcon\"\n onClick={(evt): void => { this.handleIconClick(evt); }}\n icon={this.inputIcon}\n variant=\"secondary\"\n disabled={this.disabled}\n size=\"medium\">\n </vds-icon-button>\n </vds-basic-input>\n }\n\n /\n\t Renders sidenav-item icon when expanded is to set false.\n\t \n\t @returns HTMLStencilElement\n\t */\n private renderIcon(): HTMLStencilElement {\n return <vds-sidenav-item\n onClick={(evt): void => { this.handleCollapseIconClick(evt); }}\n icon={this.actionIcon}\n expanded={false}\n ></vds-sidenav-item>\n }\n\n render(): HTMLStencilElement {\n return (\n <Host class={this.disabled ? 'vds__sidenav-item-input--disabled' : ''}>\n {this.expanded ? this.renderInput() : this.renderIcon() }\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/skeleton-loading/vds-skeleton-loading.css CHANGED Viewed

@@ -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/skeleton-loading/vds-skeleton-loading.js CHANGED Viewed

@@ -20,7 +20,7 @@ export class VdsSkeletonLoading {
         return style;
     }
     render() {
-        return (h(Host, { key: '5f113617b9d095090ad15d907f11342f9793992e', role: "progressbar", "aria-busy": "true" }, h("div", { key: 'bc0274d3ef423dd8b2559ecaba52421c20df9893', class: combineClasses("vds-skeleton", `vds-skeleton__variant--${this.variant}`), style: this.getStyles(), "aria-hidden": "true" })));
+        return (h(Host, { key: '556c614cac9e6eff4f48aa35c8ad49259d07b116', role: "progressbar", "aria-busy": "true" }, h("div", { key: 'a4196961500ef89773bf499c3eea13b50a32ef0b', class: combineClasses("vds-skeleton", `vds-skeleton__variant--${this.variant}`), style: this.getStyles(), "aria-hidden": "true" })));
     }
     static get is() { return "vds-skeleton-loading"; }
     static get encapsulation() { return "shadow"; }
@@ -38,7 +38,6 @@ export class VdsSkeletonLoading {
         return {
             "variant": {
                 "type": "string",
-                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "\"rectangular\" | \"circular\"",
@@ -54,11 +53,11 @@ export class VdsSkeletonLoading {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "\"rectangular\""
             },
             "width": {
                 "type": "string",
-                "attribute": "width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -74,11 +73,11 @@ export class VdsSkeletonLoading {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "width",
                 "defaultValue": "this.variant === \"circular\" ? \"1.75rem\" : \"100%\""
             },
             "height": {
                 "type": "string",
-                "attribute": "height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -94,6 +93,7 @@ export class VdsSkeletonLoading {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "height",
                 "defaultValue": "this.variant === \"circular\" ? \"1.75rem\" : \"2.25rem\""
             }
         };

package/dist/collection/components/slider-continuous/vds-basic-slider-continuous.css CHANGED Viewed

@@ -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/slider-continuous/vds-basic-slider-continuous.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
 import { forceUpdate } from "@stencil/core/internal";
 import { getPositionBasedOnValue, getTrackFillBasedOnValue, logWarnings } from "../../utils/slider.utils";
+import { emitInputEvent } from "../../utils/form";
 export class VdsBasicSliderContinuous {
     constructor() {
         /** Sets the size of the slider. */
@@ -63,6 +64,9 @@ export class VdsBasicSliderContinuous {
      * @returns {void}
      */
     setInputValue() {
+        if (this.value === null || this.value === undefined || isNaN(this.value)) {
+            this.value = this.minValue;
+        }
         const stringValue = this.value.toString();
         this.thumbPosition = this.getValuePosition();
         this.shownValue = stringValue;
@@ -72,6 +76,7 @@ export class VdsBasicSliderContinuous {
         if (this.trackContainerEl && !this.customBackground) {
             this.trackContainerEl.style.background = getTrackFillBasedOnValue(this.value, this.maxValue, this.minValue);
         }
+        emitInputEvent(this.host, this.value.toString());
         this.changeInput.emit(this.value);
     }
     /**
@@ -225,7 +230,7 @@ export class VdsBasicSliderContinuous {
             } }), h("div", { class: "vds-slider__thumb", style: { left: this.thumbPosition } }, h("vds-icon", { svgIcon: this.icon, size: this.size === "medium" ? "1.25rem" : "1.5rem", class: "slider-thumb" })), this.getShowValue() && this.renderShownValue()));
     }
     render() {
-        return (h(Host, { key: 'b032a5d567e3aea02740c85d25091578f93f8e62', class: combineClasses("vds-slider", this.disabled ? "vds-slider--disabled" : "") }, h("div", { key: 'fbebac353490caf6a871600a61a38e8eb8375d1c', class: combineClasses("vds-slider-continuous__container", `vds-slider-continuous__container--${this.size}`, `vds-slider-continuous__container--orientation-${this.orientation}`, this.colors ? "vds-slider-continuous__container--custom-colors" : "vds-slider-continuous__container--colors", this.disabled ? "vds-slider-continuous__container--disabled" : "", this.displayLimits ? "vds-slider-continuous__container--display-limits" : ""), style: this.setColors() }, h("div", { key: 'c762dda59e0d73c0baeaa6a407e87f5c2b953936', class: combineClasses("vds-slider-continuous__content"), "aria-label": this.setAriaLabel }, this.renderSlider()), this.displayLimits && this.renderValueReferences())));
+        return (h(Host, { key: '892cc702be1a44b5edbe32684ba6a0af4fe1354a', class: combineClasses("vds-slider", this.disabled ? "vds-slider--disabled" : "") }, h("div", { key: 'e2d53dd86591a70dc110eedfda176afed5a1a517', class: combineClasses("vds-slider-continuous__container", `vds-slider-continuous__container--${this.size}`, `vds-slider-continuous__container--orientation-${this.orientation}`, this.colors ? "vds-slider-continuous__container--custom-colors" : "vds-slider-continuous__container--colors", this.disabled ? "vds-slider-continuous__container--disabled" : "", this.displayLimits ? "vds-slider-continuous__container--display-limits" : ""), style: this.setColors() }, h("div", { key: 'fde03f01289abff67b265ae676392306a3beec97', class: combineClasses("vds-slider-continuous__content"), "aria-label": this.setAriaLabel }, this.renderSlider()), this.displayLimits && this.renderValueReferences())));
     }
     static get is() { return "vds-basic-slider-continuous"; }
     static get encapsulation() { return "shadow"; }
@@ -244,7 +249,6 @@ export class VdsBasicSliderContinuous {
         return {
             "value": {
                 "type": "number",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -259,11 +263,11 @@ export class VdsBasicSliderContinuous {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "\"medium\" | \"large\"",
@@ -279,11 +283,11 @@ export class VdsBasicSliderContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "orientation": {
                 "type": "string",
-                "attribute": "orientation",
                 "mutable": false,
                 "complexType": {
                     "original": "\"horizontal\" | \"vertical\"",
@@ -299,11 +303,11 @@ export class VdsBasicSliderContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "orientation",
                 "defaultValue": "\"horizontal\""
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -319,11 +323,11 @@ export class VdsBasicSliderContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "minValue": {
                 "type": "number",
-                "attribute": "min-value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -339,11 +343,11 @@ export class VdsBasicSliderContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "min-value",
                 "defaultValue": "0"
             },
             "maxValue": {
                 "type": "number",
-                "attribute": "max-value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -359,11 +363,11 @@ export class VdsBasicSliderContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "max-value",
                 "defaultValue": "100"
             },
             "step": {
                 "type": "number",
-                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -378,11 +382,11 @@ export class VdsBasicSliderContinuous {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "step"
             },
             "setAriaLabel": {
                 "type": "string",
-                "attribute": "set-aria-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -397,11 +401,11 @@ export class VdsBasicSliderContinuous {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "set-aria-label"
             },
             "displayLabel": {
                 "type": "string",
-                "attribute": "display-label",
                 "mutable": false,
                 "complexType": {
                     "original": "\"on\" | \"off\" | \"auto\"",
@@ -417,11 +421,11 @@ export class VdsBasicSliderContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "display-label",
                 "defaultValue": "\"on\""
             },
             "displayLimits": {
                 "type": "boolean",
-                "attribute": "display-limits",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -437,11 +441,11 @@ export class VdsBasicSliderContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "display-limits",
                 "defaultValue": "true"
             },
             "colors": {
                 "type": "string",
-                "attribute": "colors",
                 "mutable": false,
                 "complexType": {
                     "original": "{ [key: string]: string } | string",
@@ -456,11 +460,11 @@ export class VdsBasicSliderContinuous {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "colors"
             },
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -476,6 +480,7 @@ export class VdsBasicSliderContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "icon",
                 "defaultValue": "\"thumb\""
             }
         };