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

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

@@ -34,6 +34,7 @@ const codeTemplate = (args) => {
         close-aria-label="${args.closeAriaLabel}"
         toggle="${args.toggle}"
         informative-icon="${args.informativeIcon}"
+        hide-check-icon="${args.hideCheckIcon}"
     ></vds-chip>
 </div>
 `;
@@ -49,6 +50,7 @@ BasicUsage.args = {
     toggle: true,
     menu: true,
     informativeIcon: "local-containers",
+    hideCheckIcon: true,
 };
 const codeTemplateInputChip = (args) => {
     return `
@@ -81,4 +83,63 @@ export const FilterChips = codeTemplateFilterChip.bind({});
 FilterChips.args = {
     size: "medium",
 };
-//# sourceMappingURL=vds-chip.stories.js.map
+const stylesCustom = `
+    vds-chip { 
+        --vds-chip-background-color: transparent;
+        --vds-chip-background-hover-color: var(--color-interaction-white-lowest);
+        --vds-chip-background-press-color: var(--color-interaction-white-lower);
+        --vds-chip-border-color: var(--color-border-white-medium);
+        --vds-chip-content-color: var(--color-text-white-medium);
+        --vds-chip-icon-color: var(--color-icon-white-medium);
+
+        --vds-chip-active-background-color: var(--static-white);
+        --vds-chip-active-background-hover-color: var(--color-background-general-lowest-hover);
+        --vds-chip-active-background-press-color: var(--color-background-general-lowest-press);
+        --vds-chip-active-border-color: transparent;
+        --vds-chip-active-content-color: var(--static-black);
+        --vds-chip-active-icon-color: var(--static-black);
+    }
+
+    .chip__content { 
+        background-color: var(--static-black);
+        padding: 20px;
+        display: flex; 
+    }
+
+    body {
+        background-color: var(--static-black);
+        height: 100vh;
+    }
+`;
+const codeTemplateCustom = (args) => {
+    return `
+<style>${stylesCustom}</style>
+<div class="chip__content">
+    <vds-chip
+        value="${args.value}"
+        close="${args.close}"
+        menu="${args.menu}"
+        active="${args.active}"
+        disabled="${args.disabled}"
+        size="${args.size}"
+        close-aria-label="${args.closeAriaLabel}"
+        toggle="${args.toggle}"
+        informative-icon="${args.informativeIcon}"
+        hide-check-icon="${args.hideCheckIcon}"
+    ></vds-chip>
+</div>
+`;
+};
+export const CustomStyles = codeTemplateCustom.bind({});
+CustomStyles.args = {
+    value: "Traveling",
+    close: false,
+    active: true,
+    disabled: false,
+    size: "medium",
+    closeAriaLabel: "Close icon",
+    toggle: true,
+    menu: true,
+    informativeIcon: "",
+    hideCheckIcon: true,
+};

package/dist/collection/components/dialog/vds-dialog.css

@@ -509,6 +509,7 @@
   --spacing-18:4.25rem;
   --spacing-19:4.5rem;
   --spacing-20:4.75rem;
+  --spacing-21:5rem;
   --opacity-64:0.64;
   --opacity-32:0.32;
   --opacity-16:0.16;
@@ -761,6 +762,11 @@
   --elevation-layer-3:6;
   --elevation-layer-4:8;
   --elevation-layer-5:12;
+  --elevation-layer-6:16;
+  --elevation-layer-7:20;
+  --elevation-layer-8:24;
+  --elevation-layer-9:28;
+  --elevation-layer-10:32;
   --border-thickness-01:0.0625rem;
   --border-thickness-02:0.078125rem;
   --border-thickness-03:0.09375rem;
@@ -770,6 +776,16 @@
   --border-thickness-07:0.15625rem;
   --border-thickness-08:0.171875rem;
   --border-thickness-09:0.1875rem;
+  --duration-instant:0ms;
+  --duration-short:100ms;
+  --duration-medium:200ms;
+  --duration-long:300ms;
+  --duration-extra-long:500ms;
+  --easing-standard:cubic-bezier(0.2, 0, 0, 1);
+  --easing-emphasized:cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate:cubic-bezier(0, 0, 0, 1);
+  --easing-accelerate:cubic-bezier(0.3, 0, 1, 1);
+  --easing-linear:linear;
 }
 
 :root body .vds-font-display-large {
@@ -893,20 +909,11 @@
   gap: var(--spacing-03);
 }
 
-.vds__menu--backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: grayscale(100%) opacity(0.5);
-  pointer-events: auto;
-}
-
 :host {
   display: block;
   width: fit-content;
+  --vds-dialog-backdrop-background-color: var(--color-interaction-black-lower);
+  --vds-dialog-content-z-index: var(--elevation-layer-10);
 }
 :host .vds__dialog__trigger {
   display: inline-block;
@@ -918,6 +925,8 @@
   border: none;
   outline: none;
   padding: 0;
+  z-index: var(--vds-dialog-content-z-index);
+  overflow: visible;
 }
 :host .vds__dialog.vds__dialog__container--open {
   display: flex;
@@ -925,7 +934,7 @@
   padding: 1.3rem;
 }
 :host .vds__dialog.vds__dialog--backdrop::backdrop {
-  background: var(--color-interaction-black-lower);
+  background: var(--vds-dialog-backdrop-background-color);
 }
 :host .vds__dialog.vds__dialog--no-backdrop {
   overlay: auto !important;
@@ -934,7 +943,6 @@
   inset-block-end: 0px;
   user-select: text;
   visibility: visible;
-  overflow: auto;
 }
 :host .vds__dialog__container {
   display: flex;
@@ -945,7 +953,6 @@
   border-radius: var(--radius-large);
   background: var(--surface-medium);
   position: relative;
-  z-index: var(--elevation-layer-3);
   box-shadow: var(--elevation-shadow-3), inset 0 0 0 0.0625rem var(--color-border-lowest);
 }
 :host .vds__dialog__container.vds__dialog__spacing--spacing-00 {
@@ -1010,4 +1017,7 @@
 }
 :host .vds__dialog__container.vds__dialog__spacing--spacing-20 {
   padding: var(--spacing-20);
+}
+:host .vds__dialog__container.vds__dialog__spacing--spacing-21 {
+  padding: var(--spacing-21);
 }

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

@@ -1,21 +1,59 @@
 import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
+/**
+ * @component vds-dialog
+ * @description A dialog component that displays modal or non-modal content with customizable dimensions, backdrop, and spacing. Supports trigger-based opening and outside-click closing.
+ * @slot dialog-trigger - The element that triggers the dialog when clicked
+ * @slot - The default slot for dialog content
+ */
 export class VdsDialog {
     constructor() {
-        /** Sets the padding around the dialog */
+        /**
+         * Sets the padding around the dialog
+         * @type {Spacing}
+         * @default "spacing-07"
+         */
         this.padding = "spacing-07";
-        /** Toggles the background behind the dialog */
+        /**
+         * Toggles the background behind the dialog
+         * @type {boolean}
+         * @default true
+         */
         this.backdrop = true;
-        /** Sets the width size of the dialog */
+        /**
+         * Sets the width size of the dialog
+         * @type {string}
+         * @default "37.5rem"
+         */
         this.width = "37.5rem";
-        /** Sets the minimum width size of the dialog */
+        /**
+         * Sets the minimum width size of the dialog
+         * @type {string}
+         * @default "20rem"
+         */
         this.minWidth = "20rem";
-        /** Sets the maximum width  size of the dialog */
+        /**
+         * Sets the maximum width size of the dialog
+         * @type {string}
+         * @default "80%"
+         */
         this.maxWidth = "80%";
-        /** Avoids user to close dialog by clicking outside */
+        /**
+         * Avoids user to close dialog by clicking outside
+         * @type {boolean}
+         * @default false
+         */
         this.preventOutsideClose = false;
+        /**
+         * Internal state tracking whether the dialog is open
+         * @type {boolean}
+         */
         this.isOpen = undefined;
     }
+    /**
+     * Lifecycle hook that runs after component is loaded
+     * @returns {void}
+     */
     componentDidLoad() {
         this.setHTMLElementEvents();
     }
@@ -23,8 +61,9 @@ export class VdsDialog {
      * Opens the dialog element. This method displays the dialog modally
      * with a backdrop if the `backdrop` property is set to `true`. Otherwise,
      * it opens the dialog non-modally without a backdrop.
-     *
-     * @returns {Promise<void>} A promise that resolves when the dialog is opened.
+     * @method
+     * @public
+     * @returns {Promise<void>} A promise that resolves when the dialog is opened
      */
     open() {
         this.isOpen = true;
@@ -34,8 +73,9 @@ export class VdsDialog {
     }
     /**
      * Closes the dialog element. This method hides the dialog.
-     *
-     * @returns {Promise<void>} A promise that resolves when the dialog is closed.
+     * @method
+     * @public
+     * @returns {Promise<void>} A promise that resolves when the dialog is closed
      */
     close() {
         this.isOpen = false;
@@ -45,8 +85,9 @@ export class VdsDialog {
     }
     /**
      * Returns the main element container of the dialog.
-     *
-     * @returns {Promise<HTMLDialogElement>} A promise that resolves returning the dialog main element.
+     * @method
+     * @public
+     * @returns {Promise<HTMLDialogElement>} A promise that resolves returning the dialog main element
      */
     getContainer() {
         return Promise.resolve(this.dialog);
@@ -54,26 +95,30 @@ export class VdsDialog {
     /**
      * Listens for "closeButton" events on the children elements.
      * This method calls the `close()` method to close the dialog when the button is clicked.
-     *
      * @returns {void}
      */
     closeButtonHandle() {
         this.close();
     }
     /**
-     * Listens for "keydown" events on the children elements, when the Escape key is press down
+     * Listens for "keydown" events on the children elements, when the Escape key is pressed down
      * it closes the dialog.
-     *
+     * @param {KeyboardEvent} ev - The keyboard event
      * @returns {void}
      */
     handleEscKey(ev) {
         if (ev.key === "Escape") {
-            this.close();
+            if (!this.preventOutsideClose) {
+                this.close();
+            }
+            else {
+                ev.preventDefault();
+            }
         }
     }
     /**
      * Opens the dialog when the trigger element is clicked
-     *
+     * @private
      * @returns {void}
      */
     handleClick() {
@@ -82,8 +127,9 @@ export class VdsDialog {
     /**
      * Closes the dialog when the backdrop element is clicked.
      * The HTMLDialog adds a ::backdrop element when is open with showDialog. This element returns as target
-     * the DIALOG element; when clicking on the content it returns the element that was click.
-     *
+     * the DIALOG element; when clicking on the content it returns the element that was clicked.
+     * @private
+     * @param {Event} evt - The click event
      * @returns {void}
      */
     handleClose(evt) {
@@ -92,10 +138,9 @@ export class VdsDialog {
         }
     }
     /**
+     * Creates a styles object based on the component's properties (`width`, `minWidth`, `maxWidth`)
      * @private
-     * Creates a styles object based on the component's properties (`width`, `minWidth`, `maxWidth`).
-     *
-     * @returns {Object} An object containing CSS styles for the component.
+     * @returns {{ [key: string]: string }} An object containing CSS styles for the component
      */
     setStyles() {
         const styles = {};
@@ -105,27 +150,30 @@ export class VdsDialog {
         return styles;
     }
     /**
-     * @private
      * Sets up event listeners for the dialog component elements.
-     *
      * - Listens for "click" events on the `trigger` element and calls `handleClick`.
      * - Listens for "click" events on the `dialog` element and calls `handleClose`.
-     *
+     * @private
+     * @returns {void}
      */
     setHTMLElementEvents() {
         this.trigger.addEventListener("click", this.handleClick.bind(this));
         this.dialog.addEventListener("click", this.handleClose.bind(this));
     }
+    /**
+     * Renders the dialog component
+     * @returns {HTMLStencilElement} The rendered dialog element
+     */
     render() {
-        return (h(Host, { key: '0848b15e9aafc4677acca9403e92849599b56a9d' }, h("div", { key: 'c2a2fbc50d75428c419fe962d9fcfc4595deec8f', ref: (el) => {
+        return (h(Host, { key: '2c13ab0723ce3a46f09d2f355edeadb051795f6e' }, h("div", { key: '6332a13de12dee113a414e5d419b375b339bcda3', ref: (el) => {
                 if (el) {
                     this.trigger = el;
                 }
-            }, class: "vds__dialog__trigger" }, h("slot", { key: 'bfaffe8f5f98845ac457210e63a5bfc1baead9a4', name: "dialog-trigger" })), h("dialog", { key: 'b594f5eb23b7eb87dcc03daf628268005c2a8ab2', ref: (el) => {
+            }, class: "vds__dialog__trigger" }, h("slot", { key: '6b360e5bb1e51983e9c5e192e2edee1b442c46e5', name: "dialog-trigger" })), h("dialog", { key: '9f7c5de1678d88f47c0c143f0c3850066fc9d845', ref: (el) => {
                 if (el) {
                     this.dialog = el;
                 }
-            }, style: { maxWidth: this.maxWidth }, class: combineClasses("vds__dialog", this.backdrop ? "vds__dialog--backdrop" : "vds__dialog--no-backdrop", this.isOpen ? "vds__dialog__container--open" : "") }, h("div", { key: 'd4efb30daa301be0e8eb731429b951e9e8767c1f', class: combineClasses("vds__dialog__container", `vds__dialog__spacing--${this.padding}`), style: this.setStyles() }, h("slot", { key: 'a5df7d035f03913f0e9780acabc5699bf6d614d1' })))));
+            }, style: { maxWidth: this.maxWidth }, class: combineClasses("vds__dialog", this.backdrop ? "vds__dialog--backdrop" : "vds__dialog--no-backdrop", this.isOpen ? "vds__dialog__container--open" : "") }, h("div", { key: 'f9bba6afd4efccfea2fcbbd1cccbd8271e5fc2da', class: combineClasses("vds__dialog__container", `vds__dialog__spacing--${this.padding}`), style: this.setStyles() }, h("slot", { key: 'a1eb17429adeb4539611f0b9c284171bec3b88db' })))));
     }
     static get is() { return "vds-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -146,19 +194,26 @@ export class VdsDialog {
                 "mutable": false,
                 "complexType": {
                     "original": "Spacing",
-                    "resolved": "\"spacing-00\" | \"spacing-01\" | \"spacing-02\" | \"spacing-03\" | \"spacing-04\" | \"spacing-05\" | \"spacing-06\" | \"spacing-07\" | \"spacing-08\" | \"spacing-09\" | \"spacing-10\" | \"spacing-11\" | \"spacing-12\" | \"spacing-13\" | \"spacing-14\" | \"spacing-15\" | \"spacing-16\" | \"spacing-17\" | \"spacing-18\" | \"spacing-19\" | \"spacing-20\"",
+                    "resolved": "\"spacing-00\" | \"spacing-01\" | \"spacing-02\" | \"spacing-03\" | \"spacing-04\" | \"spacing-05\" | \"spacing-06\" | \"spacing-07\" | \"spacing-08\" | \"spacing-09\" | \"spacing-10\" | \"spacing-11\" | \"spacing-12\" | \"spacing-13\" | \"spacing-14\" | \"spacing-15\" | \"spacing-16\" | \"spacing-17\" | \"spacing-18\" | \"spacing-19\" | \"spacing-20\" | \"spacing-21\"",
                     "references": {
                         "Spacing": {
                             "location": "import",
                             "path": "../../definitions/spacing",
-                            "id": "src/definitions/spacing.ts::Spacing"
+                            "id": "src/definitions/spacing.ts::Spacing",
+                            "referenceLocation": "Spacing"
                         }
                     }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{Spacing}"
+                        }, {
+                            "name": "default",
+                            "text": "\"spacing-07\""
+                        }],
                     "text": "Sets the padding around the dialog"
                 },
                 "getter": false,
@@ -178,7 +233,13 @@ export class VdsDialog {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
                     "text": "Toggles the background behind the dialog"
                 },
                 "getter": false,
@@ -198,7 +259,13 @@ export class VdsDialog {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"37.5rem\""
+                        }],
                     "text": "Sets the width size of the dialog"
                 },
                 "getter": false,
@@ -218,7 +285,13 @@ export class VdsDialog {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"20rem\""
+                        }],
                     "text": "Sets the minimum width size of the dialog"
                 },
                 "getter": false,
@@ -238,8 +311,14 @@ export class VdsDialog {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the maximum width  size of the dialog"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"80%\""
+                        }],
+                    "text": "Sets the maximum width size of the dialog"
                 },
                 "getter": false,
                 "setter": false,
@@ -258,7 +337,13 @@ export class VdsDialog {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Avoids user to close dialog by clicking outside"
                 },
                 "getter": false,
@@ -282,8 +367,14 @@ export class VdsDialog {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits the event when opens dialog"
+                    "tags": [{
+                            "name": "event",
+                            "text": "opened"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<string>}"
+                        }],
+                    "text": "Emits the event when dialog opens"
                 },
                 "complexType": {
                     "original": "string",
@@ -297,8 +388,14 @@ export class VdsDialog {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits the event when opens dialog"
+                    "tags": [{
+                            "name": "event",
+                            "text": "closed"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<string>}"
+                        }],
+                    "text": "Emits the event when dialog closes"
                 },
                 "complexType": {
                     "original": "string",
@@ -324,8 +421,14 @@ export class VdsDialog {
                 "docs": {
                     "text": "Opens the dialog element. This method displays the dialog modally\nwith a backdrop if the `backdrop` property is set to `true`. Otherwise,\nit opens the dialog non-modally without a backdrop.",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "A promise that resolves when the dialog is opened."
+                            "text": "A promise that resolves when the dialog is opened"
                         }]
                 }
             },
@@ -344,8 +447,14 @@ export class VdsDialog {
                 "docs": {
                     "text": "Closes the dialog element. This method hides the dialog.",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "A promise that resolves when the dialog is closed."
+                            "text": "A promise that resolves when the dialog is closed"
                         }]
                 }
             },
@@ -368,8 +477,14 @@ export class VdsDialog {
                 "docs": {
                     "text": "Returns the main element container of the dialog.",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "A promise that resolves returning the dialog main element."
+                            "text": "A promise that resolves returning the dialog main element"
                         }]
                 }
             }
@@ -392,4 +507,3 @@ export class VdsDialog {
             }];
     }
 }
-//# sourceMappingURL=vds-dialog.js.map

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

@@ -28,6 +28,7 @@ const codeTemplate = (args) => {
 <vds-dialog
     padding="${args.padding}"
     backdrop="${args.backdrop}"
+    prevent-outside-close="${args.preventOutsideClose}"
     width="${args.width}"
     minWidth="${args.minWidth}"
     maxWidth="${args.maxWidth}"
@@ -57,6 +58,7 @@ BasicUsage.args = {
     width: "600px",
     minWidth: "320px",
     showCloseButton: true,
+    preventOutsideClose: false,
     header: true,
     footer: true
 };
@@ -116,7 +118,7 @@ const scrollCodeTemplate = () => {
         <vds-dialog-header slot="header" show-close-button="true">
             Scroll long text dialog title
         </vds-dialog-header>
-        <vds-dialog-body>
+        <vds-dialog-body style="height: 300px">
             <p>
                 Content description here. Quis vel facilisi habitant enim mattis risus integer augue.  
                 Quis vel facilisi habitant enim mattis risus integer augue. Quis vel facilisi habitant 
@@ -203,7 +205,7 @@ export const fluid = fluidCodeTemplate.bind({});
 const focusElementCodeTemplate = () => {
     return `
 <style>${styles}</style>
-<vds-dialog prevent-outside-close>
+<vds-dialog>
     <vds-button class="p5" slot="dialog-trigger">Open</vds-button>
     <vds-dialog-modal>
         <vds-dialog-header slot="header" show-close-button="true">
@@ -251,4 +253,3 @@ const formCodeTemplate = () => {
 `;
 };
 export const form = formCodeTemplate.bind({});
-//# sourceMappingURL=vds-dialog.stories.js.map

package/dist/collection/components/dialog-action-footer/vds-dialog-action-footer.css

@@ -509,6 +509,7 @@
   --spacing-18:4.25rem;
   --spacing-19:4.5rem;
   --spacing-20:4.75rem;
+  --spacing-21:5rem;
   --opacity-64:0.64;
   --opacity-32:0.32;
   --opacity-16:0.16;
@@ -761,6 +762,11 @@
   --elevation-layer-3:6;
   --elevation-layer-4:8;
   --elevation-layer-5:12;
+  --elevation-layer-6:16;
+  --elevation-layer-7:20;
+  --elevation-layer-8:24;
+  --elevation-layer-9:28;
+  --elevation-layer-10:32;
   --border-thickness-01:0.0625rem;
   --border-thickness-02:0.078125rem;
   --border-thickness-03:0.09375rem;
@@ -770,6 +776,16 @@
   --border-thickness-07:0.15625rem;
   --border-thickness-08:0.171875rem;
   --border-thickness-09:0.1875rem;
+  --duration-instant:0ms;
+  --duration-short:100ms;
+  --duration-medium:200ms;
+  --duration-long:300ms;
+  --duration-extra-long:500ms;
+  --easing-standard:cubic-bezier(0.2, 0, 0, 1);
+  --easing-emphasized:cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate:cubic-bezier(0, 0, 0, 1);
+  --easing-accelerate:cubic-bezier(0.3, 0, 1, 1);
+  --easing-linear:linear;
 }
 
 :root body .vds-font-display-large {
@@ -893,17 +909,6 @@
   gap: var(--spacing-03);
 }
 
-.vds__menu--backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: grayscale(100%) opacity(0.5);
-  pointer-events: auto;
-}
-
 :host {
   display: block;
   width: 100%;