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

package/dist/collection/components/key-value-pair/vds-key-value-pair.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/key-value-pair/vds-key-value-pair.js

@@ -9,7 +9,7 @@ export class VdsKeyValuePair {
         this.valueSize = 'headline-small';
     }
     render() {
-        return (h(Host, { key: 'e29b860fc3a18ec8ca41e806fe58f69be6341c7b' }, h("div", { key: 'b5cdf9cc30be102d017c34b94d3718053b2b5965', class: `vds-key-value-pair__container label-position--${this.labelPosition}` }, h("div", { key: 'fc5fa29e128c53d9b07a852a68c1f2988a6bf321', class: "label__container" }, h("span", { key: '25b69d67ee578940a0457c41a1084e9deb481a0d', class: `label vds-font-${this.labelSize}` }, this.label), h("slot", { key: 'c9bdd442397a2a4f1d9808c6dc22ead7534bce4c', name: "label-slot" })), h("div", { key: '2d704a3af55572b74d49419291096b59863022af', class: "value__container" }, h("span", { key: 'df03223a3e9ea4c94fde44252a1acf8b63ea14e5', class: `value vds-font-${this.valueSize}` }, this.value), h("slot", { key: 'ba88a9d7426bb2050f89aa57b6ecf804f28d9358', name: "value-slot" })))));
+        return (h(Host, { key: 'a5e1c65374c85b8e8d0fe05ca7b1625739f03719' }, h("div", { key: 'e301769bffd8c5526ff3c33933ad82138eaee261', class: `vds-key-value-pair__container label-position--${this.labelPosition}` }, h("div", { key: '9ac305dc12230cefac5561ff63fe9d5a8426f3a2', class: "label__container" }, h("span", { key: '110a57a74293160ae7f6ccc958e52a558ddece1b', class: `label vds-font-${this.labelSize}` }, this.label), h("slot", { key: 'f916b851a51eba1739d0804b37654cbb56925abc', name: "label-slot" })), h("div", { key: 'c476f35ee35b17bb2a1badf3d2060c62c4c5ba41', class: "value__container" }, h("span", { key: '0d73be9c1e73da3bae884a6bc12f60043f586991', class: `value vds-font-${this.valueSize}` }, this.value), h("slot", { key: 'dfe20b445a08a6c73797adbef9880ada7abc0ad6', name: "value-slot" })))));
     }
     static get is() { return "vds-key-value-pair"; }
     static get encapsulation() { return "shadow"; }
@@ -27,7 +27,6 @@ export class VdsKeyValuePair {
         return {
             "labelPosition": {
                 "type": "string",
-                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'bottom'",
@@ -43,11 +42,11 @@ export class VdsKeyValuePair {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-position",
                 "defaultValue": "'top'"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -62,11 +61,11 @@ export class VdsKeyValuePair {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "labelSize": {
                 "type": "string",
-                "attribute": "label-size",
                 "mutable": false,
                 "complexType": {
                     "original": "Typography",
@@ -88,11 +87,11 @@ export class VdsKeyValuePair {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-size",
                 "defaultValue": "'body-medium'"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -107,11 +106,11 @@ export class VdsKeyValuePair {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "valueSize": {
                 "type": "string",
-                "attribute": "value-size",
                 "mutable": false,
                 "complexType": {
                     "original": "Typography",
@@ -133,6 +132,7 @@ export class VdsKeyValuePair {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "value-size",
                 "defaultValue": "'headline-small'"
             }
         };

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

@@ -12,12 +12,12 @@ export class VdsLabel {
         return (h("span", { class: "volt__label--required" }, "*"));
     }
     getIcon() {
-        return (h("vds-icon", { "svg-icon": this.icon, color: "brand-main", size: "2rem" }));
+        return (h("vds-icon", { "svg-icon": this.icon, color: "static-brand-main", size: "2rem" }));
     }
     render() {
-        return (h(Host, { key: '48fdbc978d37e7e65506b36b4edb3407e5dc4315', class: this.disabled ? "vds-label--disabled" : "" }, h("div", { key: '676fde2c7c7c2659100f2e68749377fc79a4602a', class: `volt__label
+        return (h(Host, { key: 'c7b8fb79d18fc5fc53fa0322c32470ed2bcee171', class: this.disabled ? "vds-label--disabled" : "" }, h("div", { key: '5f3e5d3d6548f087fd33f53b49a651fbafacae40', class: `volt__label
                      volt__label--size-${this.size}
-                     ${this.disabled ? "volt__label--disabled" : ""}` }, h("label", { key: 'e75aba97b2a1243db754bd019b89c3265592f1d1', part: "label" }, this.labelValue, this.required && this.getRequired(), this.icon && this.getIcon()))));
+                     ${this.disabled ? "volt__label--disabled" : ""}` }, h("label", { key: '1420f06b24758d23db1ee106e5493eb303129ae9', part: "label" }, this.labelValue, this.required && this.getRequired(), this.icon && this.getIcon()))));
     }
     static get is() { return "vds-label"; }
     static get encapsulation() { return "shadow"; }
@@ -35,7 +35,6 @@ export class VdsLabel {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "\"small\" | \"large\" | \"medium\"",
@@ -51,11 +50,11 @@ export class VdsLabel {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -71,11 +70,11 @@ export class VdsLabel {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -91,11 +90,11 @@ export class VdsLabel {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "labelValue": {
                 "type": "string",
-                "attribute": "label-value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -110,11 +109,11 @@ export class VdsLabel {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label-value"
             },
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -129,7 +128,8 @@ export class VdsLabel {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "icon"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"vds-label.js","sourceRoot":"","sources":["../../../src/components/label/vds-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAsB,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAOlE,MAAM,OAAO,QAAQ;IALrB;QAME,iCAAiC;QACzB,SAAI,GAAiC,QAAQ,CAAC;QACtD,mCAAmC;QAC3B,aAAQ,GAAY,KAAK,CAAC;QAClC,6DAA6D;QACrD,aAAQ,GAAY,KAAK,CAAA;KA+BlC;IAzBS,WAAW;QACjB,OAAO,CACL,YAAM,KAAK,EAAE,uBAAuB,QAAU,CAC/C,CAAA;IACH,CAAC;IAEO,OAAO;QACb,OAAO,CACL,4BAAoB,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,GAAY,CAC1E,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;YACrD,4DAAK,KAAK,EAAE;yCACqB,IAAI,CAAC,IAAI;uBAC3B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE;gBAC3D,8DAAO,IAAI,EAAE,OAAO;oBACjB,IAAI,CAAC,UAAU;oBAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE;oBAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,CAC5E,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-label',\n  styleUrl: 'vds-label.scss',\n  shadow: true,\n})\nexport class VdsLabel {\n  /** Sets the size of the label */\n  @Prop() size: \"small\" | \"large\" | \"medium\" = \"medium\";\n  /** Sets label in disabled state */\n  @Prop() disabled: boolean = false;\n  /** Sets the label as required element adding * at the end */\n  @Prop() required: boolean = false\n  /** Sets the label text */\n  @Prop() labelValue!: string;\n  /** Displays icon at the end of the text */\n  @Prop() icon: string;\n\n  private getRequired(): HTMLStencilElement {\n    return (\n      <span class={\"volt__label--required\"}>*</span>\n    )\n  }\n\n  private getIcon(): HTMLStencilElement {\n    return (\n      <vds-icon svg-icon={this.icon} color=\"brand-main\" size=\"2rem\"></vds-icon>\n    )\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? \"vds-label--disabled\" : \"\"}>\n        <div class={`volt__label\n                     volt__label--size-${this.size}\n                     ${this.disabled ? \"volt__label--disabled\" : \"\"}`}>\n          <label part={\"label\"}>\n            {this.labelValue}{this.required && this.getRequired()}{this.icon && this.getIcon()}\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"vds-label.js","sourceRoot":"","sources":["../../../src/components/label/vds-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAsB,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAOlE,MAAM,OAAO,QAAQ;IALrB;QAME,iCAAiC;QACzB,SAAI,GAAiC,QAAQ,CAAC;QACtD,mCAAmC;QAC3B,aAAQ,GAAY,KAAK,CAAC;QAClC,6DAA6D;QACrD,aAAQ,GAAY,KAAK,CAAA;KA+BlC;IAzBS,WAAW;QACjB,OAAO,CACL,YAAM,KAAK,EAAE,uBAAuB,QAAU,CAC/C,CAAA;IACH,CAAC;IAEO,OAAO;QACb,OAAO,CACL,4BAAoB,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,GAAY,CACjF,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;YACrD,4DAAK,KAAK,EAAE;yCACqB,IAAI,CAAC,IAAI;uBAC3B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE;gBAC3D,8DAAO,IAAI,EAAE,OAAO;oBACjB,IAAI,CAAC,UAAU;oBAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE;oBAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,CAC5E,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-label',\n  styleUrl: 'vds-label.scss',\n  shadow: true,\n})\nexport class VdsLabel {\n  /** Sets the size of the label */\n  @Prop() size: \"small\" | \"large\" | \"medium\" = \"medium\";\n  /** Sets label in disabled state */\n  @Prop() disabled: boolean = false;\n  /** Sets the label as required element adding * at the end */\n  @Prop() required: boolean = false\n  /** Sets the label text */\n  @Prop() labelValue!: string;\n  /** Displays icon at the end of the text */\n  @Prop() icon: string;\n\n  private getRequired(): HTMLStencilElement {\n    return (\n      <span class={\"volt__label--required\"}>*</span>\n    )\n  }\n\n  private getIcon(): HTMLStencilElement {\n    return (\n      <vds-icon svg-icon={this.icon} color=\"static-brand-main\" size=\"2rem\"></vds-icon>\n    )\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? \"vds-label--disabled\" : \"\"}>\n        <div class={`volt__label\n                     volt__label--size-${this.size}\n                     ${this.disabled ? \"volt__label--disabled\" : \"\"}`}>\n          <label part={\"label\"}>\n            {this.labelValue}{this.required && this.getRequired()}{this.icon && this.getIcon()}\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -45,7 +45,7 @@ export class VdsLink {
         return h("vds-icon", { svgIcon: this.informativeIcon, size: this.variant === "footer" ? "1rem" : size, color: "color-link-default" });
     }
     render() {
-        return (h(Host, { key: '707d08b871293bc2cb49f58a60dc7dfd4eacdb66' }, h("a", { key: 'bb0b85941e873eff8daaa7d81ae9f771ef969d53', class: combineClasses(`vds-link vds-link--variant-${this.variant}`, `vds-link vds-link--size-${this.size}`), href: this.url, target: this.target, rel: this.rel }, h("span", { key: 'b9e6bf775faabb49f98b8db0d94c0a636aa307a3', class: combineClasses(`vds-link--container`, `vds-link--icon-position-${this.iconPosition}`) }, this.informativeIcon && this.getIcon(), h("span", { key: 'e4bf728b48fc551de8f027e8feb2b8ddd20b9a0e', class: combineClasses(`vds-link--content ${this.underline ? "vds-link--underline" : ""}`) }, this.value)))));
+        return (h(Host, { key: 'bbfe7a3d1a594ee00a6c0c39ca06c3c195bdfbb6' }, h("a", { key: '47abdf52cc06e68b2e8c9b3e0be6925773943cdc', class: combineClasses(`vds-link vds-link--variant-${this.variant}`, `vds-link vds-link--size-${this.size}`), href: this.url, target: this.target, rel: this.rel }, h("span", { key: '47ba34bdddde5f13f2f930669c6f8f4f62efb45e', class: combineClasses(`vds-link--container`, `vds-link--icon-position-${this.iconPosition}`) }, this.informativeIcon && this.getIcon(), h("span", { key: 'ad8411b3eb4982f0762ba577158a0ac1e594098b', class: combineClasses(`vds-link--content ${this.underline ? "vds-link--underline" : ""}`) }, this.value)))));
     }
     static get is() { return "vds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -63,7 +63,6 @@ export class VdsLink {
         return {
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -78,11 +77,11 @@ export class VdsLink {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "iconPosition": {
                 "type": "string",
-                "attribute": "icon-position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"right\" | \"left\"",
@@ -98,11 +97,11 @@ export class VdsLink {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "icon-position",
                 "defaultValue": "\"right\""
             },
             "underline": {
                 "type": "boolean",
-                "attribute": "underline",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -118,11 +117,11 @@ export class VdsLink {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "underline",
                 "defaultValue": "false"
             },
             "url": {
                 "type": "string",
-                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -138,11 +137,11 @@ export class VdsLink {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "url",
                 "defaultValue": "\"#\""
             },
             "target": {
                 "type": "string",
-                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\"",
@@ -158,11 +157,11 @@ export class VdsLink {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "target",
                 "defaultValue": "\"_self\""
             },
             "rel": {
                 "type": "string",
-                "attribute": "rel",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -178,11 +177,11 @@ export class VdsLink {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "rel",
                 "defaultValue": "null"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "\"large\" | \"medium\" | \"small\" | \"extra-small\" | \"2x-small\"",
@@ -198,11 +197,11 @@ export class VdsLink {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "informativeIcon": {
                 "type": "string",
-                "attribute": "informative-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -217,11 +216,11 @@ export class VdsLink {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "informative-icon"
             },
             "variant": {
                 "type": "string",
-                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "\"primary\" | \"secondary\" | \"footer\"",
@@ -240,6 +239,7 @@ export class VdsLink {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "\"primary\""
             }
         };

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

@@ -16,6 +16,7 @@ export class VdsMenu {
         this.backdrop = false;
         this.menuOpened = false;
         this.isSubmenu = false;
+        this.floatingCleanUp = () => { };
     }
     async emitValue() {
         if (this.menuOpened) {
@@ -131,15 +132,15 @@ export class VdsMenu {
         }
     }
     render() {
-        return (h(Host, { key: 'ed0e9ffe864186b2e99dda4e6c68a674af3ca5a7', style: this.setMaxWidthAndHeight() }, this.backdrop && this.menuOpened ? h("div", { class: "vds__menu--backdrop", onClick: () => this.close() }) : null, h("div", { key: 'c922235e1586d9cf41ec3e62b9ef86d15c06e739', class: "vds__menu--trigger", onClick: (evt) => {
+        return (h(Host, { key: '185c3d3c12da29c2363fbf715bd3d12245a111d2', style: this.setMaxWidthAndHeight() }, this.backdrop && this.menuOpened ? h("div", { class: "vds__menu--backdrop", onClick: () => this.close() }) : null, h("div", { key: 'e84681c10210cfe5cba84d46e19598098de5d37d', class: "vds__menu--trigger", onClick: (evt) => {
                 this.handleClick(evt);
             }, ref: (triggerEl) => {
                 if (triggerEl)
                     this.actionElementRef = triggerEl;
-            } }, h("slot", { key: '177d2bef3e6266bf12156ffc5fe824f3892c2098', name: "menu-trigger" })), h("div", { key: '2559753887f2fba3b5b3bfcfb439019a7b0e1ff1', class: combineClasses("vds__menu--container", this.maxHeight ? "has-scroll" : "", this.isSubmenu ? `vds__menu--submenu-${this.position}` : ""), ref: (menuEl) => {
+            } }, h("slot", { key: '70df140c8aa15ff63e19c18dff56fc5b4dac5b13', name: "menu-trigger" })), h("div", { key: '02443d9bf4a8f69a87908040b9aa13379189e893', class: combineClasses("vds__menu--container", this.maxHeight ? "has-scroll" : "", this.isSubmenu ? `vds__menu--submenu-${this.position}` : ""), ref: (menuEl) => {
                 if (menuEl)
                     this.menuElementRef = menuEl;
-            } }, h("slot", { key: 'bbcbed245686b7806bca7dd5358fd4bd2be3c6de', name: "menu-content" }))));
+            } }, h("slot", { key: 'aa734575ff1f0d854e1aa13d19020d51954369d4', name: "menu-content" }))));
     }
     static get is() { return "vds-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -157,7 +158,6 @@ export class VdsMenu {
         return {
             "position": {
                 "type": "string",
-                "attribute": "position",
                 "mutable": true,
                 "complexType": {
                     "original": "\"top\" | \"bottom\" | \"right\" | \"left\"",
@@ -173,11 +173,11 @@ export class VdsMenu {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "position",
                 "defaultValue": "\"bottom\""
             },
             "maxWidth": {
                 "type": "string",
-                "attribute": "max-width",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -192,11 +192,11 @@ export class VdsMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "max-width"
             },
             "maxHeight": {
                 "type": "string",
-                "attribute": "max-height",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -211,11 +211,11 @@ export class VdsMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "max-height"
             },
             "event": {
                 "type": "string",
-                "attribute": "event",
                 "mutable": true,
                 "complexType": {
                     "original": "\"hover\" | \"click\"",
@@ -231,11 +231,11 @@ export class VdsMenu {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "event",
                 "defaultValue": "\"click\""
             },
             "autoPosition": {
                 "type": "boolean",
-                "attribute": "auto-position",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -251,11 +251,11 @@ export class VdsMenu {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "auto-position",
                 "defaultValue": "false"
             },
             "backdrop": {
                 "type": "boolean",
-                "attribute": "backdrop",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -271,6 +271,7 @@ export class VdsMenu {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "backdrop",
                 "defaultValue": "false"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"vds-menu.js","sourceRoot":"","sources":["../../../src/components/menu/vds-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, State, h, Element, EventEmitter, Event, Method } from \"@stencil/core\";\nimport { HTMLStencilElement, Watch } from \"@stencil/core/internal\";\nimport { updateFloatingBoxPosition } from \"../../utils/floating-engine-utils\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { queryElementFromShadowRoot } from \"../../utils/node-utils\";\n\n@Component({\n  tag: \"vds-menu\",\n  styleUrl: \"vds-menu.scss\",\n  shadow: true,\n})\nexport class VdsMenu {\n\n  @Element() hostEl: HTMLElement;\n  /** Defines the position where the menu will be opened */\n  @Prop({ mutable: true }) position: \"top\" | \"bottom\" | \"right\" | \"left\" = \"bottom\";\n  /** Sets the maximum width of the menu\"s content */\n  @Prop({ mutable: true }) maxWidth: string;\n  /** Sets the maximum height of the menu\"s content */\n  @Prop({ mutable: true }) maxHeight: string;\n  /** The type of event that will trigger the popover */\n  @Prop({ mutable: true }) event: \"hover\" | \"click\" = \"click\";\n  /** Toggles the floating container auto-positioning based on available window space. \n   * False by default as it may cause positioning issues in some situations, use with caution \n   * */\n  @Prop({ mutable: true }) autoPosition: boolean = false;\n  /** Set backdrop when show the menu */\n  @Prop({ mutable: true }) backdrop: boolean = false;\n\n  @State() menuOpened: boolean = false;\n  /** Emits event when menu gets opens */\n  @Event() opened: EventEmitter<void>;\n  /** Emits event when menu gets closes */\n  @Event() closed: EventEmitter<void>;\n\n  private actionElementRef: HTMLElement;\n  private menuElementRef: HTMLElement;\n  private floatingCleanUp: () => void;\n\n  private isSubmenu: boolean = false;\n\n  @Watch(\"menuOpened\")\n  async emitValue(): Promise<void> {\n    if (this.menuOpened) {\n      this.opened.emit();\n      this.menuElementRef.style.display = \"inline-flex\";\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.menuElementRef, null, this.position, this.autoPosition);\n    } else {\n      this.closeNestedMenus();\n      this.closed.emit();\n      this.menuElementRef.style.display = \"none\";\n      this.floatingCleanUp();\n    }\n  }\n\n  /* Close the menu when click outside */\n  @Listen(\"click\", { target: \"window\" })\n  handleClickOut(evt: MouseEvent): void {\n    const isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside && !this.backdrop) {\n      this.menuOpened = false;\n    }\n  }\n  \n  handleHoverOut(event: Event): void {\n    if (this.event === \"hover\") {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.close();\n      }\n    }\n  }\n  \n  /* Close all nested menus recursively */\n  private closeNestedMenus(): void {\n    const menuContent = this.menuElementRef.querySelector('slot[name=\"menu-content\"]') as HTMLSlotElement;\n    if (menuContent) {\n      const elements = Array.from(menuContent.children);\n      for (const element of elements) {\n        const nestedMenu = element.querySelector('vds-menu');\n        if (nestedMenu) {\n          nestedMenu.close();\n        }\n      }\n    }\n  }\n  \n  /* Open the menu with click on the trigger element  */\n  async handleClick(evt: Event): Promise<void> {\n    if (this.event === \"click\") {\n      const clickedElement = evt.target as HTMLElement;\n      if (clickedElement && !this.menuOpened) {\n        this.menuOpened = true;\n      }\n    }\n  }\n\n  /* Listen when Menu Item element is clicked to close Menu window */\n  @Listen(\"clicked\")\n  handleMenuItemClicked(): void {\n    this.close();\n  }\n\n  /* Open the menu from other element  */\n  @Method()\n  public async open(): Promise<void> {\n    this.menuOpened = true;\n  }\n\n  /* Close the menu from other element  */\n  @Method()\n  public async close(): Promise<void> {\n    this.closeNestedMenus();\n    this.menuOpened = false;\n  }\n  /**\n   *  Gets the target that will manage the menu\n   *  returns a promise with the target HTMLElement.\n   */\n  @Method()\n  public async getTarget(): Promise<HTMLElement | null> {\n    return document.querySelector(\".vds__menu--trigger\") as HTMLElement;\n  }\n\n  private handleHover(event: Event): void {\n    if (this.event === \"hover\") {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.menuOpened = true;\n      }\n    }\n  }\n\n  private setMaxWidthAndHeight() {\n    return { \"--menu-max-width\": this.maxWidth, \"--menu-max-height\": this.maxHeight }\n  }\n\n  componentWillLoad() {\n    const triggerItem = Array.from(this.hostEl.children).find(\n      (child) => child.matches('vds-menu-item[slot=\"menu-trigger\"]')\n    );\n    if (triggerItem) {\n      this.isSubmenu = true;\n      this.backdrop = false;\n      this.autoPosition = false;\n    }\n  }\n\n  componentDidLoad() {\n    this.actionElementRef = queryElementFromShadowRoot(this.hostEl, \".vds__menu--trigger\");\n    this.menuElementRef = queryElementFromShadowRoot(this.hostEl, \".vds__menu--container\");\n    if (this.event === \"click\") {\n      this.actionElementRef.addEventListener(\"click\", this.handleClick.bind(this));\n    } else if (this.event === \"hover\") {\n      this.actionElementRef.addEventListener(\"mouseenter\", this.handleHover.bind(this));\n      this.menuElementRef.addEventListener(\"mouseleave\", this.handleHoverOut.bind(this));\n    }\n  }\n\n  componentDidRender() {\n    updateFloatingBoxPosition(this.actionElementRef, this.menuElementRef, null, this.position, this.autoPosition);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener(\"click\", this.handleClickOut.bind(this));\n    if (this.event === \"click\") {\n      this.actionElementRef.removeEventListener(\"click\", this.handleClick.bind(this));\n    } else if (this.event === \"hover\") {\n      this.actionElementRef.removeEventListener(\"mouseenter\", this.handleHover.bind(this));\n      this.menuElementRef.removeEventListener(\"mouseleave\", this.handleHoverOut.bind(this));\n    }\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host style={this.setMaxWidthAndHeight()}>\n        {this.backdrop && this.menuOpened ? <div class=\"vds__menu--backdrop\" onClick={() => this.close()}></div> : null}\n        <div class=\"vds__menu--trigger\"\n          onClick={(evt: MouseEvent) => {\n            this.handleClick(evt);\n          }}\n          ref={(triggerEl) => { if (triggerEl) this.actionElementRef = triggerEl; }}\n        >\n          <slot name=\"menu-trigger\"></slot>\n        </div>\n        <div\n          class={combineClasses(\n            \"vds__menu--container\",\n            this.maxHeight ? \"has-scroll\" : \"\",\n            this.isSubmenu ? `vds__menu--submenu-${this.position}` : \"\"\n          )}\n          ref={(menuEl) => { if (menuEl) this.menuElementRef = menuEl; }}\n        >\n          <slot name=\"menu-content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"vds-menu.js","sourceRoot":"","sources":["../../../src/components/menu/vds-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAgB,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC9G,OAAO,EAAsB,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAOpE,MAAM,OAAO,OAAO;IA8BlB;QA3BA,yDAAyD;QAChC,aAAQ,GAAwC,QAAQ,CAAC;QAKlF,sDAAsD;QAC7B,UAAK,GAAsB,OAAO,CAAC;QAC5D;;aAEK;QACoB,iBAAY,GAAY,KAAK,CAAC;QACvD,sCAAsC;QACb,aAAQ,GAAY,KAAK,CAAC;QAE1C,eAAU,GAAY,KAAK,CAAC;QAU7B,cAAS,GAAY,KAAK,CAAC;QAGjC,IAAI,CAAC,eAAe,GAAG,GAAG,EAAE,GAAG,CAAC,CAAC;KAClC;IAGD,KAAK,CAAC,SAAS;QACb,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,GAAG,aAAa,CAAC;YAClD,IAAI,CAAC,eAAe,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7I,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC3C,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED,uCAAuC;IAEvC,cAAc,CAAC,GAAe;QAC5B,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAc,CAAC,CAAC;QAC/D,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACrC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,cAAc,CAAC,KAAY;QACzB,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,EAAE,CAAC;YAC3B,MAAM,cAAc,GAAG,KAAK,CAAC,MAAqB,CAAC;YACnD,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;QACH,CAAC;IACH,CAAC;IAED,wCAAwC;IAChC,gBAAgB;QACtB,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAoB,CAAC;QACtG,IAAI,WAAW,EAAE,CAAC;YAChB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;YAClD,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;gBAC/B,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;gBACrD,IAAI,UAAU,EAAE,CAAC;oBACf,UAAU,CAAC,KAAK,EAAE,CAAC;gBACrB,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,sDAAsD;IACtD,KAAK,CAAC,WAAW,CAAC,GAAU;QAC1B,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,EAAE,CAAC;YAC3B,MAAM,cAAc,GAAG,GAAG,CAAC,MAAqB,CAAC;YACjD,IAAI,cAAc,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;gBACvC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACzB,CAAC;QACH,CAAC;IACH,CAAC;IAED,mEAAmE;IAEnE,qBAAqB;QACnB,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED,uCAAuC;IAEhC,KAAK,CAAC,IAAI;QACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACzB,CAAC;IAED,wCAAwC;IAEjC,KAAK,CAAC,KAAK;QAChB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IACD;;;OAGG;IAEI,KAAK,CAAC,SAAS;QACpB,OAAO,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAgB,CAAC;IACtE,CAAC;IAEO,WAAW,CAAC,KAAY;QAC9B,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,EAAE,CAAC;YAC3B,MAAM,cAAc,GAAG,KAAK,CAAC,MAAqB,CAAC;YACnD,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACzB,CAAC;QACH,CAAC;IACH,CAAC;IAEO,oBAAoB;QAC1B,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,QAAQ,EAAE,mBAAmB,EAAE,IAAI,CAAC,SAAS,EAAE,CAAA;IACnF,CAAC;IAED,iBAAiB;QACf,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CACvD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,oCAAoC,CAAC,CAC/D,CAAC;QACF,IAAI,WAAW,EAAE,CAAC;YAChB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,GAAG,0BAA0B,CAAC,IAAI,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;QACvF,IAAI,CAAC,cAAc,GAAG,0BAA0B,CAAC,IAAI,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;QACvF,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/E,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,EAAE,CAAC;YAClC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAClF,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACrF,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,yBAAyB,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAChH,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACpE,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAClF,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,EAAE,CAAC;YAClC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACrF,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACxF,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE;YACrC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,GAAQ,CAAC,CAAC,CAAC,IAAI;YAC/G,4DAAK,KAAK,EAAC,oBAAoB,EAC7B,OAAO,EAAE,CAAC,GAAe,EAAE,EAAE;oBAC3B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;gBACxB,CAAC,EACD,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,GAAG,IAAI,SAAS;oBAAE,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC,CAAC,CAAC;gBAEzE,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;YACN,4DACE,KAAK,EAAE,cAAc,CACnB,sBAAsB,EACtB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAClC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,sBAAsB,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAC5D,EACD,GAAG,EAAE,CAAC,MAAM,EAAE,EAAE,GAAG,IAAI,MAAM;oBAAE,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC;gBAE9D,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Listen, Prop, State, h, Element, EventEmitter, Event, Method } from \"@stencil/core\";\nimport { HTMLStencilElement, Watch } from \"@stencil/core/internal\";\nimport { updateFloatingBoxPosition } from \"../../utils/floating-engine-utils\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { queryElementFromShadowRoot } from \"../../utils/node-utils\";\n\n@Component({\n  tag: \"vds-menu\",\n  styleUrl: \"vds-menu.scss\",\n  shadow: true,\n})\nexport class VdsMenu {\n\n  @Element() hostEl: HTMLElement;\n  /** Defines the position where the menu will be opened */\n  @Prop({ mutable: true }) position: \"top\" | \"bottom\" | \"right\" | \"left\" = \"bottom\";\n  /** Sets the maximum width of the menu\"s content */\n  @Prop({ mutable: true }) maxWidth: string;\n  /** Sets the maximum height of the menu\"s content */\n  @Prop({ mutable: true }) maxHeight: string;\n  /** The type of event that will trigger the popover */\n  @Prop({ mutable: true }) event: \"hover\" | \"click\" = \"click\";\n  /** Toggles the floating container auto-positioning based on available window space. \n   * False by default as it may cause positioning issues in some situations, use with caution \n   * */\n  @Prop({ mutable: true }) autoPosition: boolean = false;\n  /** Set backdrop when show the menu */\n  @Prop({ mutable: true }) backdrop: boolean = false;\n\n  @State() menuOpened: boolean = false;\n  /** Emits event when menu gets opens */\n  @Event() opened: EventEmitter<void>;\n  /** Emits event when menu gets closes */\n  @Event() closed: EventEmitter<void>;\n\n  private actionElementRef: HTMLElement;\n  private menuElementRef: HTMLElement;\n  private floatingCleanUp: () => void;\n\n  private isSubmenu: boolean = false;\n  \n  constructor() {\n    this.floatingCleanUp = () => { };\n  }\n\n  @Watch(\"menuOpened\")\n  async emitValue(): Promise<void> {\n    if (this.menuOpened) {\n      this.opened.emit();\n      this.menuElementRef.style.display = \"inline-flex\";\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.menuElementRef, null, this.position, this.autoPosition);\n    } else {\n      this.closeNestedMenus();\n      this.closed.emit();\n      this.menuElementRef.style.display = \"none\";\n      this.floatingCleanUp();\n    }\n  }\n\n  /* Close the menu when click outside */\n  @Listen(\"click\", { target: \"window\" })\n  handleClickOut(evt: MouseEvent): void {\n    const isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside && !this.backdrop) {\n      this.menuOpened = false;\n    }\n  }\n  \n  handleHoverOut(event: Event): void {\n    if (this.event === \"hover\") {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.close();\n      }\n    }\n  }\n  \n  /* Close all nested menus recursively */\n  private closeNestedMenus(): void {\n    const menuContent = this.menuElementRef.querySelector('slot[name=\"menu-content\"]') as HTMLSlotElement;\n    if (menuContent) {\n      const elements = Array.from(menuContent.children);\n      for (const element of elements) {\n        const nestedMenu = element.querySelector('vds-menu');\n        if (nestedMenu) {\n          nestedMenu.close();\n        }\n      }\n    }\n  }\n  \n  /* Open the menu with click on the trigger element  */\n  async handleClick(evt: Event): Promise<void> {\n    if (this.event === \"click\") {\n      const clickedElement = evt.target as HTMLElement;\n      if (clickedElement && !this.menuOpened) {\n        this.menuOpened = true;\n      }\n    }\n  }\n\n  /* Listen when Menu Item element is clicked to close Menu window */\n  @Listen(\"clicked\")\n  handleMenuItemClicked(): void {\n    this.close();\n  }\n\n  /* Open the menu from other element  */\n  @Method()\n  public async open(): Promise<void> {\n    this.menuOpened = true;\n  }\n\n  /* Close the menu from other element  */\n  @Method()\n  public async close(): Promise<void> {\n    this.closeNestedMenus();\n    this.menuOpened = false;\n  }\n  /**\n   *  Gets the target that will manage the menu\n   *  returns a promise with the target HTMLElement.\n   */\n  @Method()\n  public async getTarget(): Promise<HTMLElement | null> {\n    return document.querySelector(\".vds__menu--trigger\") as HTMLElement;\n  }\n\n  private handleHover(event: Event): void {\n    if (this.event === \"hover\") {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.menuOpened = true;\n      }\n    }\n  }\n\n  private setMaxWidthAndHeight() {\n    return { \"--menu-max-width\": this.maxWidth, \"--menu-max-height\": this.maxHeight }\n  }\n\n  componentWillLoad() {\n    const triggerItem = Array.from(this.hostEl.children).find(\n      (child) => child.matches('vds-menu-item[slot=\"menu-trigger\"]')\n    );\n    if (triggerItem) {\n      this.isSubmenu = true;\n      this.backdrop = false;\n      this.autoPosition = false;\n    }\n  }\n\n  componentDidLoad() {\n    this.actionElementRef = queryElementFromShadowRoot(this.hostEl, \".vds__menu--trigger\");\n    this.menuElementRef = queryElementFromShadowRoot(this.hostEl, \".vds__menu--container\");\n    if (this.event === \"click\") {\n      this.actionElementRef.addEventListener(\"click\", this.handleClick.bind(this));\n    } else if (this.event === \"hover\") {\n      this.actionElementRef.addEventListener(\"mouseenter\", this.handleHover.bind(this));\n      this.menuElementRef.addEventListener(\"mouseleave\", this.handleHoverOut.bind(this));\n    }\n  }\n\n  componentDidRender() {\n    updateFloatingBoxPosition(this.actionElementRef, this.menuElementRef, null, this.position, this.autoPosition);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener(\"click\", this.handleClickOut.bind(this));\n    if (this.event === \"click\") {\n      this.actionElementRef.removeEventListener(\"click\", this.handleClick.bind(this));\n    } else if (this.event === \"hover\") {\n      this.actionElementRef.removeEventListener(\"mouseenter\", this.handleHover.bind(this));\n      this.menuElementRef.removeEventListener(\"mouseleave\", this.handleHoverOut.bind(this));\n    }\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host style={this.setMaxWidthAndHeight()}>\n        {this.backdrop && this.menuOpened ? <div class=\"vds__menu--backdrop\" onClick={() => this.close()}></div> : null}\n        <div class=\"vds__menu--trigger\"\n          onClick={(evt: MouseEvent) => {\n            this.handleClick(evt);\n          }}\n          ref={(triggerEl) => { if (triggerEl) this.actionElementRef = triggerEl; }}\n        >\n          <slot name=\"menu-trigger\"></slot>\n        </div>\n        <div\n          class={combineClasses(\n            \"vds__menu--container\",\n            this.maxHeight ? \"has-scroll\" : \"\",\n            this.isSubmenu ? `vds__menu--submenu-${this.position}` : \"\"\n          )}\n          ref={(menuEl) => { if (menuEl) this.menuElementRef = menuEl; }}\n        >\n          <slot name=\"menu-content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}