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/menu-group-header/vds-menu-group-header.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/menu-group-header/vds-menu-group-header.js CHANGED Viewed

@@ -6,7 +6,7 @@ export class VdsMenuGroupHeader {
         this.size = 'medium';
     }
     render() {
-        return (h(Host, { key: '275679b409722fe2ebfee944548538b055e80048' }, generateGroupHeaderContainer(this.size)));
+        return (h(Host, { key: 'ff996db4f991a83c2cf506ae203cbe123cb9c7f5' }, generateGroupHeaderContainer(this.size)));
     }
     static get is() { return "vds-menu-group-header"; }
     static get encapsulation() { return "shadow"; }
@@ -24,7 +24,6 @@ export class VdsMenuGroupHeader {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "GroupHeaderSize",
@@ -46,6 +45,7 @@ export class VdsMenuGroupHeader {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             }
         };

package/dist/collection/components/menu-item/vds-menu-item.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);
@@ -1042,4 +1056,58 @@ vds-checkbox::part(checkbox-container) {
 :host(.vds-menu-item--disabled) {
   pointer-events: none;
+}
+:host-context(.breadcrumb) .vds-menu-item {
+  padding: 0;
+}
+:host-context(.breadcrumb) .vds-menu-item ::slotted(a) {
+  color: var(--color-text-high);
+  text-decoration: none;
+  background: none;
+  width: 100%;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+}
+:host-context(.breadcrumb) .vds-menu-item.vds-menu-item--size-medium ::slotted(a) {
+  min-height: var(--spacing-10);
+  padding: var(--spacing-03) var(--spacing-04);
+  font-family: "Roboto Flex", sans-serif;
+  font-size: 0.875rem;
+  font-weight: 300;
+  line-height: 1.25rem;
+  letter-spacing: normal;
+}
+:host-context(.breadcrumb) .vds-menu-item.vds-menu-item--size-large ::slotted(a) {
+  min-height: var(--spacing-13);
+  padding: var(--spacing-04) var(--spacing-05);
+  font-family: "Roboto Flex", sans-serif;
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 1.5rem;
+  letter-spacing: normal;
+}
+:host-context(.breadcrumb) .vds-menu-item.vds-menu-item--active ::slotted(a) {
+  background-color: var(--color-interaction-brand-lower);
+  color: var(--color-link-press);
+}
+:host-context(.breadcrumb) .vds-menu-item.vds-menu-item--active ::slotted(a):hover {
+  background-color: var(--color-interaction-brand-lowest);
+}
+:host-context(.breadcrumb) .vds-menu-item.vds-menu-item--active.vds-menu-item--danger ::slotted(a) {
+  background-color: var(--color-interaction-danger-lower);
+}
+:host-context(.breadcrumb) .vds-menu-item.vds-menu-item--active.vds-menu-item--danger ::slotted(a):hover {
+  background-color: var(--color-interaction-danger-lowest);
+}
+:host-context(.breadcrumb) .vds-menu-item.vds-menu-item--danger ::slotted(a) {
+  color: var(--color-text-danger-medium);
+}
+:host-context(.breadcrumb) .vds-menu-item.vds-menu-item--danger ::slotted(a):hover {
+  background-color: var(--color-interaction-danger-lowest);
+}
+:host-context(.breadcrumb) .vds-menu-item.vds-menu-item--disabled ::slotted(a) {
+  color: var(--color-text-disabled);
+  background: var(--surface-medium);
 }

package/dist/collection/components/menu-item/vds-menu-item.js CHANGED Viewed

@@ -99,7 +99,6 @@ export class VdsMenuItem {
         return {
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -115,11 +114,11 @@ export class VdsMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -134,11 +133,11 @@ export class VdsMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "icon"
             },
             "isActive": {
                 "type": "boolean",
-                "attribute": "is-active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -154,11 +153,11 @@ export class VdsMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-active",
                 "defaultValue": "false"
             },
             "hasChildren": {
                 "type": "boolean",
-                "attribute": "has-children",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -174,11 +173,11 @@ export class VdsMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "has-children",
                 "defaultValue": "false"
             },
             "linkHref": {
                 "type": "string",
-                "attribute": "link-href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -194,11 +193,11 @@ export class VdsMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "link-href",
                 "defaultValue": "null"
             },
             "linkTarget": {
                 "type": "string",
-                "attribute": "link-target",
                 "mutable": true,
                 "complexType": {
                     "original": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\"",
@@ -214,11 +213,11 @@ export class VdsMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "link-target",
                 "defaultValue": "\"_self\""
             },
             "linkRel": {
                 "type": "string",
-                "attribute": "link-rel",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -234,11 +233,11 @@ export class VdsMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "link-rel",
                 "defaultValue": "null"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -253,11 +252,11 @@ export class VdsMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "value"
             },
             "setAriaLabel": {
                 "type": "string",
-                "attribute": "set-aria-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -272,11 +271,11 @@ export class VdsMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "set-aria-label"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": true,
                 "complexType": {
                     "original": "\"medium\" | \"large\"",
@@ -292,11 +291,11 @@ export class VdsMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "hasCheckmark": {
                 "type": "boolean",
-                "attribute": "has-checkmark",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -312,11 +311,11 @@ export class VdsMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "has-checkmark",
                 "defaultValue": "false"
             },
             "isSelected": {
                 "type": "boolean",
-                "attribute": "is-selected",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -332,11 +331,11 @@ export class VdsMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "is-selected",
                 "defaultValue": "false"
             },
             "checkmarkVariant": {
                 "type": "string",
-                "attribute": "checkmark-variant",
                 "mutable": false,
                 "complexType": {
                     "original": "\"checkbox\" |\"checkmark\"",
@@ -352,11 +351,11 @@ export class VdsMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "checkmark-variant",
                 "defaultValue": "\"checkmark\""
             },
             "checkmarkAlignment": {
                 "type": "string",
-                "attribute": "checkmark-alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "\"start\" |\"end\"",
@@ -372,11 +371,11 @@ export class VdsMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "checkmark-alignment",
                 "defaultValue": "\"start\""
             },
             "danger": {
                 "type": "boolean",
-                "attribute": "danger",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -392,6 +391,7 @@ export class VdsMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "danger",
                 "defaultValue": "false"
             }
         };

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class VdsMenuList {
     render() {
-        return (h(Host, { key: '1a99152816c092f6deacdecf47c16dccabb7c041' }, h("div", { key: '306ed68dcc0c873ec88e3eec3971905d2589af61', class: "vds__menu-list--container" }, h("slot", { key: 'e2bcce5b2fab5e259a9f6df73495705222e023fc' }))));
+        return (h(Host, { key: '30e772724703ab71817dcce911ce30334ab76e44' }, h("div", { key: '6d298e28c1d473b499ff819196fb488234e29007', class: "vds__menu-list--container" }, h("slot", { key: '53bc795e11cb0baba4c08f6517f431b3f1df0dc0' }))));
     }
     static get is() { return "vds-menu-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -79,7 +79,7 @@ export class VdsNotification {
     render() {
         const custom = this.colors ? this.setCustomColors() : null;
         this.setIcon();
-        return (h(Host, { key: '34a9cc0d1aa39e81409fd7b002d358548e11365b', style: custom }, h("div", { key: '6804c9a9938e8ddc654b192b9a6c69db1f246157', class: combineClasses('vds__notification--container', 'vds__notification--status-' + this.status) }, h("div", { key: '1cdb8e02d564d8fa67fcbc7dabede906cf259cbf', class: "vds__notification--container-body" }, h("div", { key: '789fa386981325f569b6f2a47aa9522d0174b11f', class: "vds__notification--icon" }, h("vds-icon", { key: 'c0183258cded2a0cc2641bbf84785ce17771433d', size: "1.5rem", svgIcon: this.currentIcon, color: this.currentColor })), h("div", { key: '621a8a173b820030162db668b9279977b39e6885', class: "vds__notification--content" }, h("div", { key: '61d004a8104ce79ef0ab5d207f8deba68b3f1182', class: `vds__notification--information ${this.variant === "toast" ? "vds-notification__information--toast" : ""}` }, h("div", { key: 'bf48b7e1c1230a2f0f50de8cf2c0706bfe5a1343', class: "vds__notification--title" }, h("slot", { key: 'e6be9e59f243758191ac60280e388d915d196706', name: "header" })), h("div", { key: '66543b96d6ad825c841738157f0a7a97999f4cb4', class: "vds__notification--message" }, h("slot", { key: '3c8be0959ecef894664edf0e054db783e054a5d8', name: "body" }))), this.variant === "toast" && this.renderActions())), h("div", { key: '279a75abe9ad12f6c6cde6dfb7754e0ee35bc27e', class: "vds-notification__close-area" }, this.variant === "inline" && this.renderActions(), this.showCloseBtn()))));
+        return (h(Host, { key: '6b327aa065fe644b57451f1e0215141b3bf34499', style: custom }, h("div", { key: '0a393fe2f955a3cf5ad2aa86e609e424c1768aec', class: combineClasses('vds__notification--container', 'vds__notification--status-' + this.status) }, h("div", { key: '55fc5c0342192bf0c4f1f84b38e22a8d648966c1', class: "vds__notification--container-body" }, h("div", { key: 'ff3b8284b15aac5cba6a8742e9303e95b555559c', class: "vds__notification--icon" }, h("vds-icon", { key: '8158e90c91958de4038a054fcda8087680d7f8ca', size: "1.5rem", svgIcon: this.currentIcon, color: this.currentColor })), h("div", { key: '17d7a651280f0c244c759b7b236131d2c05ad586', class: "vds__notification--content" }, h("div", { key: '163949d317dab2f3b70e4bdcfe56ceabc953b7d2', class: `vds__notification--information ${this.variant === "toast" ? "vds-notification__information--toast" : ""}` }, h("div", { key: '914bab97b7419a9bb5501034e945d7be0e06fd6e', class: "vds__notification--title" }, h("slot", { key: '3baf7a62bc82385d2d91b040c474d6e3fc39265a', name: "header" })), h("div", { key: '2325b7671fafb392df6612e0db0af399147aca68', class: "vds__notification--message" }, h("slot", { key: '20f881717f55f0d1fc8714bd944b6e3d45685485', name: "body" }))), this.variant === "toast" && this.renderActions())), h("div", { key: 'a108251b8c20d1b4ebdaf5e92e57583d3cccecb6', class: "vds-notification__close-area" }, this.variant === "inline" && this.renderActions(), this.showCloseBtn()))));
     }
     static get is() { return "vds-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -97,7 +97,6 @@ export class VdsNotification {
         return {
             "variant": {
                 "type": "string",
-                "attribute": "variant",
                 "mutable": true,
                 "complexType": {
                     "original": "\"toast\" | \"inline\"",
@@ -113,11 +112,11 @@ export class VdsNotification {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "\"inline\""
             },
             "status": {
                 "type": "string",
-                "attribute": "status",
                 "mutable": true,
                 "complexType": {
                     "original": "NotificationStatus",
@@ -139,11 +138,11 @@ export class VdsNotification {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "status",
                 "defaultValue": "\"informative\""
             },
             "colors": {
                 "type": "unknown",
-                "attribute": "colors",
                 "mutable": true,
                 "complexType": {
                     "original": "NotificationsCustomColors",
@@ -167,7 +166,6 @@ export class VdsNotification {
             },
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -182,11 +180,11 @@ export class VdsNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "icon"
             },
             "showCloseButton": {
                 "type": "boolean",
-                "attribute": "show-close-button",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -202,11 +200,11 @@ export class VdsNotification {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-close-button",
                 "defaultValue": "true"
             },
             "removeOnClose": {
                 "type": "boolean",
-                "attribute": "remove-on-close",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -222,6 +220,7 @@ export class VdsNotification {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "remove-on-close",
                 "defaultValue": "true"
             }
         };

package/dist/collection/components/notification/vds-notification.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"vds-notification.js","sourceRoot":"","sources":["../../../src/components/notification/vds-notification.tsx"],"names":[],"mappings":"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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACA","sourcesContent":["import { Component, Host, h, Prop, State,Element, Event, EventEmitter, Method } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { NotificationsCustomColors, NotificationStatus } from './vds-notification-utils';\n\n@Component({\n tag: 'vds-notification',\n styleUrl: 'vds-notification.scss',\n shadow: true,\n})\nexport class VdsNotification {\n/** Define variant of the notification /\n@Prop({mutable: true}) variant: \"toast\" \| \"inline\" = \"inline\";\n/* Define status type of the notification /\n@Prop({mutable: true}) status: NotificationStatus = \"informative\";\n/* Define custom status color of notification /\n@Prop({mutable: true}) colors?: NotificationsCustomColors;\n/* Define custom Icon for the notification / \n@Prop({mutable: true}) icon?: string;\n/* Show / Hide the notification close button /\n@Prop({mutable: true}) showCloseButton: boolean = true;\n/* When set to true, the element will be removed from DOM when pressing the close button. /\n@Prop({mutable: true}) removeOnClose: boolean = true;\n\n@State() currentIcon: string = undefined;\n@State() currentColor: Colors = undefined;\n\n@Element() hostEl: HTMLElement;\n\n/* Emits event when popover gets closed /\n@Event() closed: EventEmitter<void>;\n\n\nprivate setCustomBackground(customization): { [key: string]: string } {\n return customization?.background ? { '--notification-background': `var(--${customization.background})` } : {};\n}\n\nprivate setCustomBorder(customization): { [key: string]: string } {\n return customization?.border ? { '--notification-border': `var(--${customization.border})` } : {};\n}\nprivate setCustomIcon(customization): { [key: string]: string } {\n return customization?.icon ? { '--notification-icon-color': `var(--${customization.icon})` } : {};\n}\nprivate setCustomColors(): { [key: string]: string } {\n const customization = this.colors;\n if (!customization) {\n return null;\n }\n return {\n ...this.setCustomBackground(customization),\n ...this.setCustomBorder(customization),\n ...this.setCustomIcon(customization)\n };\n}\n\nprivate setIcon(){\n switch (this.status) {\n case 'informative':\n this.currentIcon = 'information';\n this.currentColor = \"color-icon-information\";\n break;\n case 'danger':\n this.currentIcon = 'information';\n this.currentColor= 'color-icon-danger';\n break;\n case 'warning':\n this.currentIcon = 'caution';\n this.currentColor= 'color-icon-warning';\n break;\n case 'healthy':\n this.currentIcon = 'healthy';\n this.currentColor= 'color-icon-healthy';\n break;\n case 'custom':\n this.currentIcon = this.icon;\n this.currentColor= this.colors?.icon? this.colors.icon : null;\n break;\n default:\n this.currentIcon = 'unknown';\n this.currentColor= 'color-icon-information';\n break;\n }\n}\n\nprivate handleClose(){\n this.closed.emit();\n if (this.removeOnClose) {\n this.hostEl.remove();\n }\n}\n/ Close the Notification from other element */ \n@Method()\npublic async close(): Promise<void> {\n this.handleClose();\n}\n\nprivate showCloseBtn(){\n return (this.showCloseButton ?\n (<div class=\"vds__notification--close-btn\">\n <vds-icon-button \n size=\"medium\" \n variant=\"secondary\" \n icon='close'\n setAriaLabel='close'\n onClick={() => this.handleClose()}\n > \n </vds-icon-button>\n </div>)\n :null);\n}\n private renderActions(): HTMLStencilElement {\n return (\n <div\n class={`vds__notification--actions ${this.variant === \"toast\" ? \"vds-notification__actions--toast\" : \"\"}`}\n >\n <slot name=\"actions\"></slot>\n </div>\n );\n }\n\nrender(): HTMLStencilElement {\n const custom = this.colors? this.setCustomColors() : null;\n this.setIcon();\n\n return (\n <Host style={custom}>\n <div class={combineClasses(\n 'vds__notification--container',\n 'vds__notification--status-'+ this.status,\n )}\n >\n <div class={\"vds__notification--container-body\"}>\n <div class=\"vds__notification--icon\">\n <vds-icon size=\"1.5rem\" svgIcon={this.currentIcon} color={this.currentColor}></vds-icon>\n </div>\n <div class=\"vds__notification--content\">\n <div class={`vds__notification--information ${this.variant === \"toast\" ? \"vds-notification__information--toast\" : \"\"}`}>\n <div class=\"vds__notification--title\">\n <slot name=\"header\"></slot>\n </div>\n <div class=\"vds__notification--message\">\n <slot name=\"body\"></slot>\n </div>\n </div>\n {this.variant === \"toast\" && this.renderActions()}\n </div>\n </div>\n <div class=\"vds-notification__close-area\">\n {this.variant === \"inline\" && this.renderActions()}\n {this.showCloseBtn()}\n </div>\n </div>\n </Host>\n );\n}\n}"]}
1	+ {"version":3,"file":"vds-notification.js","sourceRoot":"","sources":["../../../src/components/notification/vds-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State,Element, Event, EventEmitter, Method } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { NotificationsCustomColors, NotificationStatus } from './vds-notification-utils';\n\n@Component({\n tag: 'vds-notification',\n styleUrl: 'vds-notification.scss',\n shadow: true,\n})\nexport class VdsNotification {\n/** Define variant of the notification /\n@Prop({mutable: true}) variant: \"toast\" \| \"inline\" = \"inline\";\n/* Define status type of the notification /\n@Prop({mutable: true}) status: NotificationStatus = \"informative\";\n/* Define custom status color of notification /\n@Prop({mutable: true}) colors?: NotificationsCustomColors;\n/* Define custom Icon for the notification / \n@Prop({mutable: true}) icon?: string;\n/* Show / Hide the notification close button /\n@Prop({mutable: true}) showCloseButton: boolean = true;\n/* When set to true, the element will be removed from DOM when pressing the close button. /\n@Prop({mutable: true}) removeOnClose: boolean = true;\n\n@State() currentIcon: string = undefined;\n@State() currentColor: Colors = undefined;\n\n@Element() hostEl: HTMLElement;\n\n/* Emits event when popover gets closed /\n@Event() closed: EventEmitter<void>;\n\n\nprivate setCustomBackground(customization): { [key: string]: string } {\n return customization?.background ? { '--notification-background': `var(--${customization.background})` } : {};\n}\n\nprivate setCustomBorder(customization): { [key: string]: string } {\n return customization?.border ? { '--notification-border': `var(--${customization.border})` } : {};\n}\nprivate setCustomIcon(customization): { [key: string]: string } {\n return customization?.icon ? { '--notification-icon-color': `var(--${customization.icon})` } : {};\n}\nprivate setCustomColors(): { [key: string]: string } {\n const customization = this.colors;\n if (!customization) {\n return null;\n }\n return {\n ...this.setCustomBackground(customization),\n ...this.setCustomBorder(customization),\n ...this.setCustomIcon(customization)\n };\n}\n\nprivate setIcon(){\n switch (this.status) {\n case 'informative':\n this.currentIcon = 'information';\n this.currentColor = \"color-icon-information\";\n break;\n case 'danger':\n this.currentIcon = 'information';\n this.currentColor= 'color-icon-danger';\n break;\n case 'warning':\n this.currentIcon = 'caution';\n this.currentColor= 'color-icon-warning';\n break;\n case 'healthy':\n this.currentIcon = 'healthy';\n this.currentColor= 'color-icon-healthy';\n break;\n case 'custom':\n this.currentIcon = this.icon;\n this.currentColor= this.colors?.icon? this.colors.icon : null;\n break;\n default:\n this.currentIcon = 'unknown';\n this.currentColor= 'color-icon-information';\n break;\n }\n}\n\nprivate handleClose(){\n this.closed.emit();\n if (this.removeOnClose) {\n this.hostEl.remove();\n }\n}\n/ Close the Notification from other element */ \n@Method()\npublic async close(): Promise<void> {\n this.handleClose();\n}\n\nprivate showCloseBtn(){\n return (this.showCloseButton ?\n (<div class=\"vds__notification--close-btn\">\n <vds-icon-button \n size=\"medium\" \n variant=\"secondary\" \n icon='close'\n setAriaLabel='close'\n onClick={() => this.handleClose()}\n > \n </vds-icon-button>\n </div>)\n :null);\n}\n private renderActions(): HTMLStencilElement {\n return (\n <div\n class={`vds__notification--actions ${this.variant === \"toast\" ? \"vds-notification__actions--toast\" : \"\"}`}\n >\n <slot name=\"actions\"></slot>\n </div>\n );\n }\n\nrender(): HTMLStencilElement {\n const custom = this.colors? this.setCustomColors() : null;\n this.setIcon();\n\n return (\n <Host style={custom}>\n <div class={combineClasses(\n 'vds__notification--container',\n 'vds__notification--status-'+ this.status,\n )}\n >\n <div class={\"vds__notification--container-body\"}>\n <div class=\"vds__notification--icon\">\n <vds-icon size=\"1.5rem\" svgIcon={this.currentIcon} color={this.currentColor}></vds-icon>\n </div>\n <div class=\"vds__notification--content\">\n <div class={`vds__notification--information ${this.variant === \"toast\" ? \"vds-notification__information--toast\" : \"\"}`}>\n <div class=\"vds__notification--title\">\n <slot name=\"header\"></slot>\n </div>\n <div class=\"vds__notification--message\">\n <slot name=\"body\"></slot>\n </div>\n </div>\n {this.variant === \"toast\" && this.renderActions()}\n </div>\n </div>\n <div class=\"vds-notification__close-area\">\n {this.variant === \"inline\" && this.renderActions()}\n {this.showCloseBtn()}\n </div>\n </div>\n </Host>\n );\n}\n}"]}

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