wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/progress-circular/vds-progress-circular.js

@@ -0,0 +1,243 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+export class VdsProgressCircular {
+    constructor() {
+        /**
+         * Defines the color based on the status:
+         * error -> color-background-critical-default,
+         * success -> color-background-general-healthy-default,
+         * default -> color-background-brand-default
+         */
+        this.status = 'default';
+        /**
+         * Sets the loop duration time for the indeterminate loop progress in miliseconds.
+         * Determinate and indeterminate state will be defined by adding or not the duration.
+         */
+        this.duration = 500;
+        /**
+         * Set the size scale of the component based on 1 === 52px (3.5rem).
+         * Common values:
+         * - 0.25 (extra small): 13px
+         * - 0.5 (small): 26px
+         * - 1 (medium): 52px
+         * - 1.5 (large): 78px
+         * Minimum scale is 0.25
+         */
+        this.scale = 1;
+        this.customColors = false;
+    }
+    /**
+     * Calculates and returns the styling for the progress circle based on the current value.
+     * This is used to create the stroke-dasharray and stroke-dashoffset for the SVG circle,
+     * which visually represents the progress percentage.
+     *
+     * @private
+     * @returns {Object} An object containing the CSS styles for the SVG circle's stroke.
+     */
+    setProgress() {
+        this.progress = this.value < 0 ? 0 : this.value > 100 ? 100 : this.value;
+        const radius = 24;
+        const circumference = 2 * Math.PI * radius;
+        const strokeDashoffset = circumference * (1 - this.progress / 100);
+        return {
+            strokeDasharray: `${circumference}`,
+            strokeDashoffset: `${strokeDashoffset}`,
+        };
+    }
+    /**
+     * Returns the animation for the indeterminate slider.
+     * Using the duration prop we return an animation effect in ms.
+     * Going from top to bottom using the value as the progress.
+     *
+     * @private
+     * @returns { animation: string }
+     */
+    setDurationAnimation() {
+        return this.duration > 0 ? { animation: `rotate ${this.duration}ms linear infinite` } : {};
+    }
+    /**
+     * Ensures that the scale is clamped to a minimum value of 0.25.
+     *
+     * @private
+     * @param {number} scale - The new scale value.
+     */
+    setScale(scale) {
+        this.scale = Math.max(0.25, scale);
+    }
+    /**
+     * Sets custom colors for the progress bar.
+     *
+     * @private
+     * @returns {Object} An object containing the CSS styles for the custom colors.
+     */
+    setCustomColors() {
+        const colors = typeof this.colors === 'string' ? JSON.parse(this.colors) : this.colors;
+        const style = Object.assign(Object.assign({}, ((colors === null || colors === void 0 ? void 0 : colors.backgroundTrack) && { '--progress-circular-background-track': `var(--${colors.backgroundTrack})` })), ((colors === null || colors === void 0 ? void 0 : colors.backgroundProgress) && { '--progress-circular-background-track-fill': `var(--${colors.backgroundProgress})` }));
+        this.activateCustomColors(colors);
+        return style;
+    }
+    /**
+     * Activates custom colors.
+     *
+     * @private
+     * @param {Object} colors - The colors object.
+     * @returns {void}
+     */
+    activateCustomColors(colors) {
+        this.customColors = !!colors && (!!colors['backgroundTrack'] || !!colors['backgroundProgress']);
+    }
+    componentWillLoad() {
+        this.setScale(this.scale);
+    }
+    render() {
+        return (h(Host, { key: '456f4ab12108bc4ace0f6758ee6cd78ddad745b3', style: this.setCustomColors() }, h("div", { key: '713b7477ec0e0374e884cfd63d04f02a73122c42', class: combineClasses('vds-progress-circular__container', this.customColors ? 'vds-progress-circular__container--custom-colors' : 'vds-progress-circular__container--default-colors'), style: { '--size': `calc(3.5rem * ${this.scale})` } }, h("svg", { key: '88fb7624dc8d1b1c7a3dbef5741b4652a1399179', class: combineClasses('vds-progress-circular__track', `vds-progress-circular__track--${this.status}`), viewBox: "0 0 52 52" }, h("circle", { key: '5458808a06c0e93c75208b514b5eeb6854c6a5a7', cx: "26", cy: "26", r: "24", fill: "none" })), h("svg", { key: '4d339463ed6ea16623e34712ad18e237e39b1e7c', class: combineClasses('vds-progress-circular__track-fill', `vds-progress-circular__track-fill--${this.status}`), style: this.setDurationAnimation(), viewBox: "0 0 52 52" }, h("circle", { key: 'f506c2bc1d97315b3b0463252441d37a805b76db', cx: "26", cy: "26", r: "24", fill: "none", style: this.setProgress() })))));
+    }
+    static get is() { return "vds-progress-circular"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-progress-circular.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-progress-circular.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the percentage filled value from 0 to 100"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "status": {
+                "type": "string",
+                "attribute": "status",
+                "mutable": false,
+                "complexType": {
+                    "original": "'error' | 'success' | 'default'",
+                    "resolved": "\"default\" | \"error\" | \"success\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color based on the status:\nerror -> color-background-critical-default,\nsuccess -> color-background-general-healthy-default,\ndefault -> color-background-brand-default"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "duration": {
+                "type": "number",
+                "attribute": "duration",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the loop duration time for the indeterminate loop progress in miliseconds.\nDeterminate and indeterminate state will be defined by adding or not the duration."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "500"
+            },
+            "setAriaLabel": {
+                "type": "string",
+                "attribute": "set-aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the aria label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "colors": {
+                "type": "string",
+                "attribute": "colors",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string } | string",
+                    "resolved": "string | { [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the progress indicator color from the Volt palette:\nbackgroundProgress - ThemeColors,\nbackgroundTrack - ThemeColors"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "scale": {
+                "type": "number",
+                "attribute": "scale",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the size scale of the component based on 1 === 52px (3.5rem).\nCommon values:\n- 0.25 (extra small): 13px\n- 0.5 (small): 26px\n- 1 (medium): 52px\n- 1.5 (large): 78px\nMinimum scale is 0.25"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "1"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "progress": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "duration",
+                "methodName": "setDurationAnimation"
+            }, {
+                "propName": "scale",
+                "methodName": "setScale"
+            }];
+    }
+}
+//# sourceMappingURL=vds-progress-circular.js.map

package/dist/collection/components/progress-circular/vds-progress-circular.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-progress-circular.js","sourceRoot":"","sources":["../../../src/components/progress-circular/vds-progress-circular.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-progress-circular',\n  styleUrl: 'vds-progress-circular.scss',\n  shadow: true,\n})\nexport class VdsProgressCircular {\n  /** Sets the percentage filled value from 0 to 100 */\n  @Prop() value: number;\n  /** \n   * Defines the color based on the status:\n   * error -> color-background-critical-default,\n   * success -> color-background-general-healthy-default,\n   * default -> color-background-brand-default\n   */\n  @Prop() status: 'error' | 'success' | 'default' = 'default';\n  /** \n   * Sets the loop duration time for the indeterminate loop progress in miliseconds.\n   * Determinate and indeterminate state will be defined by adding or not the duration.\n   */\n  @Prop() duration: number = 500;\n  /** Sets the aria label */\n  @Prop() setAriaLabel: string;\n  /** \n   * Sets the progress indicator color from the Volt palette:\n   * backgroundProgress - ThemeColors,\n   * backgroundTrack - ThemeColors\n   */\n  @Prop() colors: { [key: string]: string } | string;\n  /** \n   * Set the size scale of the component based on 1 === 52px (3.5rem).\n   * Common values:\n   * - 0.25 (extra small): 13px\n   * - 0.5 (small): 26px\n   * - 1 (medium): 52px\n   * - 1.5 (large): 78px\n   * Minimum scale is 0.25\n   */\n  @Prop() scale: number = 1;\n\n  /**\n   * State variable to hold the progress value.\n   */\n  @State() progress: number;\n\n  private customColors = false;\n\n  /**\n   * Calculates and returns the styling for the progress circle based on the current value.\n   * This is used to create the stroke-dasharray and stroke-dashoffset for the SVG circle,\n   * which visually represents the progress percentage.\n   *\n   * @private\n   * @returns {Object} An object containing the CSS styles for the SVG circle's stroke.\n   */\n  private setProgress(): { strokeDasharray: string; strokeDashoffset: string } {\n    this.progress = this.value < 0 ? 0 : this.value > 100 ? 100 : this.value;\n    const radius = 24;\n    const circumference = 2 * Math.PI * radius;\n\n    const strokeDashoffset = circumference * (1 - this.progress / 100);\n\n    return {\n      strokeDasharray: `${circumference}`,\n      strokeDashoffset: `${strokeDashoffset}`,\n    };\n  }\n\n  /**\n   * Returns the animation for the indeterminate slider.\n   * Using the duration prop we return an animation effect in ms.\n   * Going from top to bottom using the value as the progress.\n   *\n   * @private\n   * @returns { animation: string }\n   */\n  @Watch('duration')\n  private setDurationAnimation(): { animation: string } | {} {\n    return this.duration > 0 ? { animation: `rotate ${this.duration}ms linear infinite` } : {};\n  }\n\n  /**\n   * Ensures that the scale is clamped to a minimum value of 0.25.\n   *\n   * @private\n   * @param {number} scale - The new scale value.\n   */\n  @Watch('scale')\n  private setScale(scale: number): void {\n    this.scale = Math.max(0.25, scale);\n  }\n\n  /**\n   * Sets custom colors for the progress bar.\n   *\n   * @private\n   * @returns {Object} An object containing the CSS styles for the custom colors.\n   */\n  private setCustomColors(): { [key: string]: string } {\n    const colors = typeof this.colors === 'string' ? JSON.parse(this.colors) : this.colors;\n    const style = {\n      ...(colors?.backgroundTrack && { '--progress-circular-background-track': `var(--${colors.backgroundTrack})` }),\n      ...(colors?.backgroundProgress && { '--progress-circular-background-track-fill': `var(--${colors.backgroundProgress})` }),\n    };\n    this.activateCustomColors(colors);\n\n    return style;\n  }\n\n  /**\n   * Activates custom colors.\n   *\n   * @private\n   * @param {Object} colors - The colors object.\n   * @returns {void}\n   */\n  private activateCustomColors(colors: { [key: string]: string }): void {\n    this.customColors = !!colors && (!!colors['backgroundTrack'] || !!colors['backgroundProgress']);\n  }\n\n  componentWillLoad() {\n    this.setScale(this.scale);\n  }\n\n  render() {\n    return (\n      <Host style={this.setCustomColors()}>\n        <div\n          class={combineClasses(\n            'vds-progress-circular__container',\n            this.customColors ? 'vds-progress-circular__container--custom-colors' : 'vds-progress-circular__container--default-colors',\n          )}\n          style={{ '--size': `calc(3.5rem * ${this.scale})` }}\n        >\n          <svg\n            class={combineClasses(\n              'vds-progress-circular__track',\n              `vds-progress-circular__track--${this.status}`,\n            )}\n            viewBox=\"0 0 52 52\"\n          >\n            <circle cx=\"26\" cy=\"26\" r=\"24\" fill=\"none\" />\n          </svg>\n          <svg\n            class={combineClasses(\n              'vds-progress-circular__track-fill',\n              `vds-progress-circular__track-fill--${this.status}`,\n            )}\n            style={this.setDurationAnimation()}\n            viewBox=\"0 0 52 52\"\n          >\n            <circle cx=\"26\" cy=\"26\" r=\"24\" fill=\"none\" style={this.setProgress()} />\n          </svg>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/progress-circular/vds-progress-circular.stories.js

@@ -0,0 +1,96 @@
+export default {
+    title: 'VDS/Components/Progress Indicators/Circular',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+    },
+    argTypes: {
+        status: {
+            options: ["error", "success", "default"],
+            control: { type: "select" }
+        },
+        scale: {
+            control: {
+                type: 'number',
+                min: 0.25,
+                step: 0.125,
+            },
+        },
+    },
+};
+let styles = `
+.content {
+    margin: 10px;
+}
+`;
+const codeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<div class="content">
+    <vds-progress-circular
+      value="${args.value}"
+      status="${args.status}"
+      set-aria-label="${args.setAriaLabel}"
+      duration="${args.duration}"
+      scale="${args.scale}"
+    ></vds-progress-circular>
+</div>
+`;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    value: 59,
+    status: "default",
+    setAriaLabel: "I'm a vds progress circular",
+    duration: 0,
+    scale: 1,
+};
+const codeAnimationWithDurationTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<div class="content">
+    <vds-progress-circular
+      value="${args.value}"
+      status="${args.status}"
+      set-aria-label="${args.setAriaLabel}"
+      duration="${args.duration}"
+      scale="${args.scale}"
+    ></vds-progress-circular>
+</div>
+`;
+};
+export const AnimationUsage = codeAnimationWithDurationTemplate.bind({});
+AnimationUsage.args = {
+    value: 80,
+    status: "default",
+    setAriaLabel: "I'm a vds progress circular",
+    duration: 1000,
+    scale: 1,
+};
+const codeCustomColorsTemplate = (args) => {
+    return `
+<style>
+    ${styles}
+</style>
+<div class='content'>
+    <vds-progress-circular
+      value='${args.value}'
+      status='${args.status}'
+      set-aria-label='${args.setAriaLabel}'
+      duration='${args.duration}'
+      scale="${args.scale}"
+      colors='{"backgroundTrack": "color-background-caution-default", "backgroundProgress": "color-background-healthy-default"}'
+    ></vds-progress-circular>
+</div>
+`;
+};
+export const customColorsUsage = codeCustomColorsTemplate.bind({});
+customColorsUsage.args = {
+    value: 30,
+    status: "default",
+    setAriaLabel: "I'm a vds progress circular",
+    duration: 500,
+    scale: 1,
+};
+//# sourceMappingURL=vds-progress-circular.stories.js.map

package/dist/collection/components/progress-circular/vds-progress-circular.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-progress-circular.stories.js","sourceRoot":"","sources":["../../../src/components/progress-circular/vds-progress-circular.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACX,KAAK,EAAE,6CAA6C;IACpD,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACH,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,OAAO,EAAE,CAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;YACzC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,KAAK,EAAE;YACH,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,IAAI;gBACT,IAAI,EAAE,KAAK;aACZ;SACJ;KACJ;CACJ,CAAC;AACF,IAAI,MAAM,GAAG;;;;CAIZ,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1B,OAAO;SACF,MAAM;;;eAGA,IAAI,CAAC,KAAK;gBACT,IAAI,CAAC,MAAM;wBACH,IAAI,CAAC,YAAY;kBACvB,IAAI,CAAC,QAAQ;eAChB,IAAI,CAAC,KAAK;;;CAGxB,CAAC;AACF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,SAAS;IACjB,YAAY,EAAE,6BAA6B;IAC3C,QAAQ,EAAE,CAAC;IACX,KAAK,EAAE,CAAC;CACX,CAAA;AAGD,MAAM,iCAAiC,GAAG,CAAC,IAAI,EAAE,EAAE;IAC/C,OAAO;SACF,MAAM;;;eAGA,IAAI,CAAC,KAAK;gBACT,IAAI,CAAC,MAAM;wBACH,IAAI,CAAC,YAAY;kBACvB,IAAI,CAAC,QAAQ;eAChB,IAAI,CAAC,KAAK;;;CAGxB,CAAC;AACF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,iCAAiC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzE,cAAc,CAAC,IAAI,GAAG;IAClB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,SAAS;IACjB,YAAY,EAAE,6BAA6B;IAC3C,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,CAAC;CACX,CAAA;AAED,MAAM,wBAAwB,GAAG,CAAC,IAAI,EAAE,EAAE;IACtC,OAAO;;MAEL,MAAM;;;;eAIG,IAAI,CAAC,KAAK;gBACT,IAAI,CAAC,MAAM;wBACH,IAAI,CAAC,YAAY;kBACvB,IAAI,CAAC,QAAQ;eAChB,IAAI,CAAC,KAAK;;;;CAIxB,CAAC;AACF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEnE,iBAAiB,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,SAAS;IACjB,YAAY,EAAE,6BAA6B;IAC3C,QAAQ,EAAE,GAAG;IACb,KAAK,EAAE,CAAC;CACX,CAAA","sourcesContent":["export default {\n    title: 'VDS/Components/Progress Indicators/Circular',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n      },\n    argTypes: {\n        status: {\n            options: [ \"error\", \"success\", \"default\"],\n            control: { type: \"select\" }\n        },\n        scale: {\n            control: {\n              type: 'number',\n              min: 0.25,\n              step: 0.125,\n            },\n        },\n    },\n};\nlet styles = `\n.content {\n    margin: 10px;\n}\n`;\n \nconst codeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<div class=\"content\">\n    <vds-progress-circular\n      value=\"${args.value}\"\n      status=\"${args.status}\"\n      set-aria-label=\"${args.setAriaLabel}\"\n      duration=\"${args.duration}\"\n      scale=\"${args.scale}\"\n    ></vds-progress-circular>\n</div>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    value: 59,\n    status: \"default\",\n    setAriaLabel: \"I'm a vds progress circular\",\n    duration: 0,\n    scale: 1,\n}\n\n\nconst codeAnimationWithDurationTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<div class=\"content\">\n    <vds-progress-circular\n      value=\"${args.value}\"\n      status=\"${args.status}\"\n      set-aria-label=\"${args.setAriaLabel}\"\n      duration=\"${args.duration}\"\n      scale=\"${args.scale}\"\n    ></vds-progress-circular>\n</div>\n`;\n}\n\nexport const AnimationUsage = codeAnimationWithDurationTemplate.bind({});\n\nAnimationUsage.args = {\n    value: 80,\n    status: \"default\",\n    setAriaLabel: \"I'm a vds progress circular\",\n    duration: 1000,\n    scale: 1,\n}\n\nconst codeCustomColorsTemplate = (args) => {\n    return `\n<style>\n    ${styles}\n</style>\n<div class='content'>\n    <vds-progress-circular\n      value='${args.value}'\n      status='${args.status}'\n      set-aria-label='${args.setAriaLabel}'\n      duration='${args.duration}'\n      scale=\"${args.scale}\"\n      colors='{\"backgroundTrack\": \"color-background-caution-default\", \"backgroundProgress\": \"color-background-healthy-default\"}'\n    ></vds-progress-circular>\n</div>\n`;\n}\n\nexport const customColorsUsage = codeCustomColorsTemplate.bind({});\n\ncustomColorsUsage.args = {\n    value: 30,\n    status: \"default\",\n    setAriaLabel: \"I'm a vds progress circular\",\n    duration: 500,\n    scale: 1,\n}\n"]}