wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/badge-pill/vds-badge-pill.js

@@ -0,0 +1,227 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+import { BADGE_VARIANTS } from "./vds-badge-pill.utils";
+import { getIconSizeUpdated } from "../../utils/icon-attr.utils";
+export class VdsBadgePill {
+    constructor() {
+        /** Sets the badge's size */
+        this.size = 'medium';
+        /** Sets the color of the badge, it provides special colors such as warning, danger, healthy, information, neutral
+         *  If you pass a color from out pallete it will consider as custom. The color will be applied as background color;
+         *  To fully customize please refer to props contentColor and borderFocusColor. */
+        this.statusColor = 'neutral';
+        /** Hides the native tooltip when set to true */
+        this.hideTitle = false;
+        this.isCustom = false;
+        this.getIconSizeUpdated = getIconSizeUpdated;
+    }
+    componentWillRender() {
+        this.setCustomBadge();
+    }
+    setCustomBadge() {
+        this.isCustom = !BADGE_VARIANTS.includes(this.statusColor);
+        if (this.isCustom) {
+            let styles = {};
+            styles = {
+                '--custom-badge-pill-background': this.statusColor ? `var(--${this.statusColor})` : undefined,
+                '--custom-badge-pill-content-color': this.contentColor ? `var(--${this.contentColor})` : undefined,
+                '--custom-badge-pill-border-color': this.borderFocusColor ? `var(--${this.borderFocusColor})` : undefined,
+            };
+            this.customStyles = styles;
+        }
+    }
+    /** Sets the icon in the vds-badge-pills
+     *
+     * @returns HTMLStencilElement
+     */
+    getIcon() {
+        return h("vds-icon", { svgIcon: this.icon, size: this.getIconSizeUpdated(this.size) });
+    }
+    render() {
+        return (h(Host, { key: '6f09e4350cfd47a4614c4544979a5b2322577fb9', "aria-label": this.setAriaLabel || this.value }, h("button", { key: '056df9712c4e63002da2ccf6ce2da199dddd43f5', class: combineClasses('vds__badge__pill--container', this.size ? `vds__badge__pill--size-${this.size}` : '', this.statusColor && !this.isCustom ? `vds__badge__pill--status-color-${this.statusColor}` : 'vds__badge__pill--status-color-custom'), style: this.customStyles, title: this.hideTitle ? undefined : this.setAriaLabel || this.value, "aria-label": this.setAriaLabel || this.value }, h("div", { key: '621bab9b8c4eebbade691d2ee9088570bb317649', class: 'vds__badge__pill--content' }, this.icon && this.getIcon(), this.value && h("span", { key: 'ee46139c960f6cf556989cf12d6d0d5f55be0672', class: 'vds__badge__pill--value' }, this.value)))));
+    }
+    static get is() { return "vds-badge-pill"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-badge-pill.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-badge-pill.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'2x-small' | 'extra-small' | 'small' | 'medium' | 'large'",
+                    "resolved": "\"2x-small\" | \"extra-small\" | \"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the badge's size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "statusColor": {
+                "type": "string",
+                "attribute": "status-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "'warning' | 'danger' | 'healthy' | 'information' | 'neutral'",
+                    "resolved": "\"danger\" | \"healthy\" | \"information\" | \"neutral\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the color of the badge, it provides special colors such as warning, danger, healthy, information, neutral\nIf you pass a color from out pallete it will consider as custom. The color will be applied as background color;\nTo fully customize please refer to props contentColor and borderFocusColor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'neutral'"
+            },
+            "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 in badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets an icon inside the badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text value of the badge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "contentColor": {
+                "type": "string",
+                "attribute": "content-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "Colors",
+                    "resolved": "ThemeColors | \"brand-50\" | \"brand-100\" | \"brand-200\" | \"brand-300\" | \"brand-400\" | \"brand-500\" | \"brand-main\" | \"brand-600\" | \"brand-700\" | \"brand-800\" | \"brand-900\" | \"brand-950\" | \"brand-1000\" | \"brand-1000-medium\" | \"brand-1000-low\" | \"brand-1000-lower\" | \"brand-1000-lowest\" | \"green-50\" | \"green-100\" | \"green-200\" | \"green-300\" | \"green-400\" | \"green-500\" | \"green-main\" | \"green-600\" | \"green-700\" | \"green-800\" | \"green-900\" | \"green-950\" | \"grey-50\" | \"grey-100\" | \"grey-200\" | \"grey-300\" | \"grey-400\" | \"grey-500\" | \"grey-main\" | \"grey-600\" | \"grey-700\" | \"grey-800\" | \"grey-900\" | \"grey-950\" | \"neutral-50\" | \"neutral-100\" | \"neutral-200\" | \"neutral-300\" | \"neutral-400\" | \"neutral-500\" | \"neutral-main\" | \"neutral-600\" | \"neutral-700\" | \"neutral-800\" | \"neutral-900\" | \"neutral-950\" | \"neutral-400-medium\" | \"neutral-400-low\" | \"neutral-400-lower\" | \"neutral-800-medium\" | \"neutral-800-low\" | \"orange-50\" | \"orange-100\" | \"orange-200\" | \"orange-300\" | \"orange-400\" | \"orange-500\" | \"orange-main\" | \"orange-600\" | \"orange-700\" | \"orange-800\" | \"orange-900\" | \"orange-950\" | \"red-50\" | \"red-100\" | \"red-200\" | \"red-300\" | \"red-400\" | \"red-500\" | \"red-main\" | \"red-600\" | \"red-700\" | \"red-800\" | \"red-900\" | \"red-950\" | \"yellow-50\" | \"yellow-100\" | \"yellow-200\" | \"yellow-300\" | \"yellow-400\" | \"yellow-500\" | \"yellow-main\" | \"yellow-600\" | \"yellow-700\" | \"yellow-800\" | \"yellow-900\" | \"yellow-950\" | \"white\" | \"black\"",
+                    "references": {
+                        "Colors": {
+                            "location": "import",
+                            "path": "../../definitions/colors",
+                            "id": "src/definitions/colors.ts::Colors"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the color of the text and icon. (Only works when passing a custom statusColor)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "borderFocusColor": {
+                "type": "string",
+                "attribute": "border-focus-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "Colors",
+                    "resolved": "ThemeColors | \"brand-50\" | \"brand-100\" | \"brand-200\" | \"brand-300\" | \"brand-400\" | \"brand-500\" | \"brand-main\" | \"brand-600\" | \"brand-700\" | \"brand-800\" | \"brand-900\" | \"brand-950\" | \"brand-1000\" | \"brand-1000-medium\" | \"brand-1000-low\" | \"brand-1000-lower\" | \"brand-1000-lowest\" | \"green-50\" | \"green-100\" | \"green-200\" | \"green-300\" | \"green-400\" | \"green-500\" | \"green-main\" | \"green-600\" | \"green-700\" | \"green-800\" | \"green-900\" | \"green-950\" | \"grey-50\" | \"grey-100\" | \"grey-200\" | \"grey-300\" | \"grey-400\" | \"grey-500\" | \"grey-main\" | \"grey-600\" | \"grey-700\" | \"grey-800\" | \"grey-900\" | \"grey-950\" | \"neutral-50\" | \"neutral-100\" | \"neutral-200\" | \"neutral-300\" | \"neutral-400\" | \"neutral-500\" | \"neutral-main\" | \"neutral-600\" | \"neutral-700\" | \"neutral-800\" | \"neutral-900\" | \"neutral-950\" | \"neutral-400-medium\" | \"neutral-400-low\" | \"neutral-400-lower\" | \"neutral-800-medium\" | \"neutral-800-low\" | \"orange-50\" | \"orange-100\" | \"orange-200\" | \"orange-300\" | \"orange-400\" | \"orange-500\" | \"orange-main\" | \"orange-600\" | \"orange-700\" | \"orange-800\" | \"orange-900\" | \"orange-950\" | \"red-50\" | \"red-100\" | \"red-200\" | \"red-300\" | \"red-400\" | \"red-500\" | \"red-main\" | \"red-600\" | \"red-700\" | \"red-800\" | \"red-900\" | \"red-950\" | \"yellow-50\" | \"yellow-100\" | \"yellow-200\" | \"yellow-300\" | \"yellow-400\" | \"yellow-500\" | \"yellow-main\" | \"yellow-600\" | \"yellow-700\" | \"yellow-800\" | \"yellow-900\" | \"yellow-950\" | \"white\" | \"black\"",
+                    "references": {
+                        "Colors": {
+                            "location": "import",
+                            "path": "../../definitions/colors",
+                            "id": "src/definitions/colors.ts::Colors"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the color of the border in focus. (Only works when passing a custom statusColor)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "hideTitle": {
+                "type": "boolean",
+                "attribute": "hide-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the native tooltip when set to true"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=vds-badge-pill.js.map

package/dist/collection/components/badge-pill/vds-badge-pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-badge-pill.js","sourceRoot":"","sources":["../../../src/components/badge-pill/vds-badge-pill.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAOjE,MAAM,OAAO,YAAY;IALzB;QAME,4BAA4B;QACpB,SAAI,GAA8D,QAAQ,CAAC;QACnF;;0FAEkF;QAC1E,gBAAW,GAAiE,SAAS,CAAC;QAW9F,gDAAgD;QACxC,cAAS,GAAY,KAAK,CAAC;QAE3B,aAAQ,GAAY,KAAK,CAAC;QAG1B,uBAAkB,GAAG,kBAAkB,CAAC;KAmDjD;IAjDC,mBAAmB;QACjB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE3D,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,MAAM,GAAG,EAAE,CAAC;YAEhB,MAAM,GAAG;gBACP,gCAAgC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,SAAS;gBAC7F,mCAAmC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,SAAS;gBAClG,kCAAkC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,SAAS;aAC1G,CAAC;YAEF,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAC7B,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,OAAO;QACL,OAAO,gBAAU,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAa,CAAC;IAC7F,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK;YAC/C,+DACE,KAAK,EAAE,cAAc,CACnB,6BAA6B,EAC7B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,0BAA0B,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EACtD,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,kCAAkC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,uCAAuC,CACpI,EACD,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,gBACvD,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK;gBAE3C,4DAAK,KAAK,EAAE,2BAA2B;oBACpC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE;oBAC3B,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAE,yBAAyB,IAAG,IAAI,CAAC,KAAK,CAAQ,CACtE,CACC,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { BADGE_VARIANTS } from './vds-badge-pill.utils';\nimport { getIconSizeUpdated } from '../../utils/icon-attr.utils';\n\n@Component({\n  tag: 'vds-badge-pill',\n  styleUrl: 'vds-badge-pill.scss',\n  shadow: true,\n})\nexport class VdsBadgePill {\n  /** Sets the badge's size */\n  @Prop() size: '2x-small' | 'extra-small' | 'small' | 'medium' | 'large' = 'medium';\n  /** Sets the color of the badge, it provides special colors such as warning, danger, healthy, information, neutral\n   *  If you pass a color from out pallete it will consider as custom. The color will be applied as background color;\n   *  To fully customize please refer to props contentColor and borderFocusColor. */\n  @Prop() statusColor: 'warning' | 'danger' | 'healthy' | 'information' | 'neutral' = 'neutral';\n  /** Sets the aria label in badge */\n  @Prop() setAriaLabel: string;\n  /** Sets an icon inside the badge */\n  @Prop() icon?: string;\n  /** Sets the text value of the badge. */\n  @Prop() value!: string;\n  /** Sets the color of the text and icon. (Only works when passing a custom statusColor) */\n  @Prop() contentColor: Colors;\n  /** Sets the color of the border in focus. (Only works when passing a custom statusColor) */\n  @Prop() borderFocusColor: Colors;\n  /** Hides the native tooltip when set to true */\n  @Prop() hideTitle: boolean = false;\n\n  private isCustom: boolean = false;\n  private customStyles;\n\n  private getIconSizeUpdated = getIconSizeUpdated;\n\n  componentWillRender(): void {\n    this.setCustomBadge();\n  }\n\n  private setCustomBadge(): void {\n    this.isCustom = !BADGE_VARIANTS.includes(this.statusColor);\n\n    if (this.isCustom) {\n      let styles = {};\n\n      styles = {\n        '--custom-badge-pill-background': this.statusColor ? `var(--${this.statusColor})` : undefined,\n        '--custom-badge-pill-content-color': this.contentColor ? `var(--${this.contentColor})` : undefined,\n        '--custom-badge-pill-border-color': this.borderFocusColor ? `var(--${this.borderFocusColor})` : undefined,\n      };\n\n      this.customStyles = styles;\n    }\n  }\n\n  /** Sets the icon in the vds-badge-pills\n   *\n   * @returns HTMLStencilElement\n   */\n  getIcon(): HTMLStencilElement {\n    return <vds-icon svgIcon={this.icon} size={this.getIconSizeUpdated(this.size)}></vds-icon>;\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host aria-label={this.setAriaLabel || this.value}>\n        <button\n          class={combineClasses(\n            'vds__badge__pill--container',\n            this.size ? `vds__badge__pill--size-${this.size}` : '',\n            this.statusColor && !this.isCustom ? `vds__badge__pill--status-color-${this.statusColor}` : 'vds__badge__pill--status-color-custom',\n          )}\n          style={this.customStyles}\n          title={this.hideTitle ? undefined : this.setAriaLabel || this.value}\n          aria-label={this.setAriaLabel || this.value}\n        >\n          <div class={'vds__badge__pill--content'}>\n            {this.icon && this.getIcon()}\n            {this.value && <span class={'vds__badge__pill--value'}>{this.value}</span>}\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/badge-pill/vds-badge-pill.stories.js

@@ -0,0 +1,66 @@
+import variables from "../../constants/color-vars";
+const THEME_KEY = Object.keys(variables.theme);
+export default {
+    title: 'VDS/Components/Badges/Pill',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29365-205847',
+        },
+    },
+    argTypes: {
+        statusColor: {
+            options: ['warning', 'danger', 'healthy', 'information', ...THEME_KEY],
+            control: { type: 'select' },
+        },
+        size: {
+            options: ['2x-small', 'extra-small', 'small', 'medium', 'large'],
+            control: { type: 'select' },
+        },
+        contentColor: {
+            options: [undefined, ...THEME_KEY],
+            control: { type: 'select' },
+        },
+        borderFocusColor: {
+            options: [undefined, ...THEME_KEY],
+            control: { type: 'select' },
+        },
+    },
+};
+let styles = `
+.content {
+    margin: 10px;
+}
+`;
+const codeTemplate = args => {
+    return `
+<style>${styles}</style>
+<div class="content">
+    <vds-badge-pill
+      size="${args.size}"
+      status-color="${args.statusColor}"
+      set-aria-label="${args.setAriaLabel}"
+      icon="${args.icon}"
+      value="${args.value}"
+      content-color="${args.contentColor}"
+      border-focus-color="${args.borderFocusColor}"
+      hide-title="${args.hideTitle}"
+    ></vds-badge-pill>
+</div>
+`;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    size: 'medium',
+    statusColor: 'healthy',
+    setAriaLabel: "I'm a vds badge",
+    icon: 'good',
+    value: 'Badge 1',
+    contentColor: undefined,
+    borderFocusColor: undefined,
+    hideTitle: false,
+};
+//# sourceMappingURL=vds-badge-pill.stories.js.map

package/dist/collection/components/badge-pill/vds-badge-pill.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-badge-pill.stories.js","sourceRoot":"","sources":["../../../src/components/badge-pill/vds-badge-pill.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,4BAA4B,CAAC;AAEnD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AAE/C,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,wFAAwF;SAC9F;KACF;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC;YACtE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YAChE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,CAAC,SAAS,EAAE,GAAG,SAAS,CAAC;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,gBAAgB,EAAE;YAChB,OAAO,EAAE,CAAC,SAAS,EAAE,GAAG,SAAS,CAAC;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AACF,IAAI,MAAM,GAAG;;;;CAIZ,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;SACA,MAAM;;;cAGD,IAAI,CAAC,IAAI;sBACD,IAAI,CAAC,WAAW;wBACd,IAAI,CAAC,YAAY;cAC3B,IAAI,CAAC,IAAI;eACR,IAAI,CAAC,KAAK;uBACF,IAAI,CAAC,YAAY;4BACZ,IAAI,CAAC,gBAAgB;oBAC7B,IAAI,CAAC,SAAS;;;CAGjC,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,iBAAiB;IAC/B,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,SAAS;IAChB,YAAY,EAAE,SAAS;IACvB,gBAAgB,EAAE,SAAS;IAC3B,SAAS,EAAE,KAAK;CACjB,CAAC","sourcesContent":["import variables from '../../constants/color-vars';\n\nconst THEME_KEY = Object.keys(variables.theme);\n\nexport default {\n  title: 'VDS/Components/Badges/Pill',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n    design: {\n      type: 'figma',\n      url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29365-205847',\n    },\n  },\n  argTypes: {\n    statusColor: {\n      options: ['warning', 'danger', 'healthy', 'information', ...THEME_KEY],\n      control: { type: 'select' },\n    },\n    size: {\n      options: ['2x-small', 'extra-small', 'small', 'medium', 'large'],\n      control: { type: 'select' },\n    },\n    contentColor: {\n      options: [undefined, ...THEME_KEY],\n      control: { type: 'select' },\n    },\n    borderFocusColor: {\n      options: [undefined, ...THEME_KEY],\n      control: { type: 'select' },\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-badge-pill\n      size=\"${args.size}\"\n      status-color=\"${args.statusColor}\"\n      set-aria-label=\"${args.setAriaLabel}\"\n      icon=\"${args.icon}\"\n      value=\"${args.value}\"\n      content-color=\"${args.contentColor}\"\n      border-focus-color=\"${args.borderFocusColor}\"\n      hide-title=\"${args.hideTitle}\"\n    ></vds-badge-pill>\n</div>\n`;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  size: 'medium',\n  statusColor: 'healthy',\n  setAriaLabel: \"I'm a vds badge\",\n  icon: 'good',\n  value: 'Badge 1',\n  contentColor: undefined,\n  borderFocusColor: undefined,\n  hideTitle: false,\n};\n"]}

package/dist/collection/components/badge-pill/vds-badge-pill.utils.js

@@ -0,0 +1,4 @@
+export const BADGE_VARIANTS = [
+    "warning", "danger", "healthy", "information", "neutral"
+];
+//# sourceMappingURL=vds-badge-pill.utils.js.map

package/dist/collection/components/badge-pill/vds-badge-pill.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-badge-pill.utils.js","sourceRoot":"","sources":["../../../src/components/badge-pill/vds-badge-pill.utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;IAC1B,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS;CAC3D,CAAC","sourcesContent":["export const BADGE_VARIANTS = [\n    \"warning\", \"danger\", \"healthy\", \"information\", \"neutral\"\n];\n"]}

package/dist/collection/components/base-group-header/base-group-header.js

@@ -0,0 +1,14 @@
+import { h } from "@stencil/core/internal";
+import { combineClasses } from "../../utils/combine-classes";
+/**
+ * Generates a group header container with a label.
+ *
+ * @param {GroupHeaderSize} size - The size of the group header.
+ * @param {string} value - The text value to display in the group header.
+ *
+ * @returns {HTMLStencilElement} The generated group header container.
+ */
+export const generateGroupHeaderContainer = (size, value) => {
+    return (h("div", { class: combineClasses('vds-base-group-header', `vds-base-group-header--${size}`) }, h("span", { class: combineClasses('vds-base-group-header__label', `vds-base-group-header__label--${size}`) }, value ? value : h("slot", null))));
+};
+//# sourceMappingURL=base-group-header.js.map

package/dist/collection/components/base-group-header/base-group-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-group-header.js","sourceRoot":"","sources":["../../../src/components/base-group-header/base-group-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAsB,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAI7D;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,IAAqB,EACrB,KAAc,EACM,EAAE;IACtB,OAAO,CACL,WAAK,KAAK,EAAE,cAAc,CACxB,uBAAuB,EACvB,0BAA0B,IAAI,EAAE,CACjC;QACC,YAAM,KAAK,EAAE,cAAc,CACzB,8BAA8B,EAC9B,iCAAiC,IAAI,EAAE,CACxC,IACE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,eAAa,CACzB,CACH,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h, HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\n\nexport type GroupHeaderSize = 'small' | 'medium' | 'large';\n\n/**\n * Generates a group header container with a label.\n *\n * @param {GroupHeaderSize} size - The size of the group header.\n * @param {string} value - The text value to display in the group header.\n * \n * @returns {HTMLStencilElement} The generated group header container.\n */\nexport const generateGroupHeaderContainer = (\n  size: GroupHeaderSize,\n  value?: string\n): HTMLStencilElement => {\n  return (\n    <div class={combineClasses(\n      'vds-base-group-header',\n      `vds-base-group-header--${size}`\n    )}>\n      <span class={combineClasses(\n        'vds-base-group-header__label',\n        `vds-base-group-header__label--${size}`\n      )}>\n        {value ? value : <slot></slot>}\n      </span>\n    </div>\n  );\n};\n"]}

package/dist/collection/components/base-item/base-item.js

@@ -0,0 +1,106 @@
+import { h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+/**
+ * Gets the appropriate icon color based on the provided conditions.
+ *
+ * @param {boolean} disabled - Whether the icon is disabled.
+ * @param {boolean} isActive - Whether the icon is active.
+ * @param {boolean} [danger=false] - Whether the icon should indicate danger.
+ * @param {boolean} [isCheckbox=false] - Whether the icon is for a checkbox.
+ *
+ * @returns {IconColors} The CSS variable name for the icon color.
+ */
+const getIconColor = (disabled, isActive, danger = false, isCheckbox = false) => {
+    switch (true) {
+        case disabled:
+            return "color-icon-disabled";
+        case danger:
+            return "color-icon-danger";
+        case isActive:
+            return isCheckbox ? "color-icon-brand-default" : "color-icon-brand-press";
+        default:
+            return "color-icon-high";
+    }
+};
+/**
+ * Gets the appropriate icon size based on the provided size.
+ *
+ * @param {"small" | "medium" | "large"} size - The desired size of the icon.
+ *
+ * @returns {string} The CSS size value for the icon.
+ */
+const getIconSize = (size) => size === "medium" ? "1rem" : size === "small" ? "0.75rem" : "1.25rem";
+/**
+ * Generates a checkmark icon button based on the provided parameters.
+ *
+ * @param {boolean} isSelected - Whether the item is selected.
+ * @param {"medium" | "large"} size - The desired size of the icon.
+ * @param {boolean} disabled - Whether the icon is disabled.
+ * @param {boolean} isActive - Whether the icon is active.
+ * @param {boolean} danger - Whether the icon should indicate danger.
+ *
+ * @returns {HTMLStencilElement} The generated checkmark icon button.
+ */
+export const generateCheckmarkIconButton = (isSelected, size, disabled, isActive, danger) => {
+    if (isSelected) {
+        return (h("div", { class: "vds-base-item__checkmark-icon" }, h("vds-icon", { "svg-icon": "good", size: getIconSize(size), color: getIconColor(disabled, isSelected || isActive, danger), alt: "Selected Item" })));
+    }
+    return (h("div", { class: `vds-base-item__checkmark-icon--empty-${size}` }));
+};
+/**
+ * Generates an informative icon based on the provided parameters.
+ *
+ * @param {string} icon - The name of the SVG icon to use.
+ * @param {string} value - The value associated with the icon.
+ * @param {"medium" | "large"} size - The desired size of the icon.
+ * @param {boolean} disabled - Whether the icon is disabled.
+ * @param {boolean} isActive - Whether the icon is active.
+ * @param {boolean} danger - Whether the icon should indicate danger.
+ *
+ * @returns {HTMLStencilElement} The generated informative icon.
+ */
+export const generateInformativeIcon = (icon, value, size, disabled, isActive, danger) => {
+    return (h("div", { class: "vds-base-item__informative-icon" }, h("vds-icon", { "svg-icon": icon, size: getIconSize(size), color: getIconColor(disabled, isActive, danger), alt: value })));
+};
+/**
+ * Generates a checkbox icon based on the provided parameters.
+ *
+ * @param {boolean} isSelected - Whether the checkbox is selected.
+ * @param {"medium" | "large"} size - The desired size of the checkbox.
+ * @param {boolean} disabled - Whether the checkbox is disabled.
+ * @param {boolean} isActive - Whether the checkbox is active.
+ * @param {boolean} danger - Whether the checkbox should indicate danger.
+ *
+ * @returns {HTMLStencilElement} The generated checkbox icon.
+ */
+export const generateCheckbox = (isSelected, size, disabled, isActive, danger) => {
+    return (h("div", { class: `vds-base-item__checkbox-icon-${size}` }, h("vds-icon", { "svg-icon": isSelected ? "checked" : "unchecked", class: combineClasses(isSelected ? "checkbox-icon-checked" : "", `checkbox-item-${size}`), size: getIconSize(size), color: getIconColor(disabled, isSelected || isActive, danger, true), alt: "checkbox-element" })));
+};
+/**
+ * Generates a label element based on the provided parameters.
+
+ * @param {string} label - The text content of the label.
+ * @param {"medium" | "large"} size - The desired size of the label.
+ * @param {boolean} disabled - Whether the label is disabled.
+ * @param {boolean} isActive - Whether the label is active.
+ * @param {boolean} danger - Whether the label should indicate danger.
+ *
+ * @returns {HTMLStencilElement} The generated label element.
+ */
+export const generateLabel = (label, size, disabled, isActive, danger) => {
+    return (h("span", { class: combineClasses("vds-base-item__label", `vds-base-item__label--size-${size}`, disabled ? "vds-base-item__label--disabled" : "", isActive ? "vds-base-item__label--active" : "", danger ? "vds-base-item__label--danger" : "") }, label ? label : h("slot", null)));
+};
+/**
+ * Generates a children icon button based on the provided parameters.
+
+ * @param {"medium" | "large"} size - The desired size of the icon.
+ * @param {boolean} disabled - Whether the icon is disabled.
+ * @param {boolean} isActive - Whether the icon is active.
+ * @param {boolean} danger - Whether the icon should indicate danger.
+ *
+ * @returns {HTMLStencilElement} The generated children icon button.
+ */
+export const generateChildrenIconButton = (size, disabled, isActive, danger) => {
+    return (h("div", { class: "vds-base-item__has-children-icon" }, h("vds-icon", { "svg-icon": "chevron-right", size: getIconSize(size), color: getIconColor(disabled, isActive, danger), alt: "Open menu" })));
+};
+//# sourceMappingURL=base-item.js.map

package/dist/collection/components/base-item/base-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-item.js","sourceRoot":"","sources":["../../../src/components/base-item/base-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from \"@stencil/core\";\nimport { HTMLStencilElement } from \"@stencil/core/internal\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { IconColors } from \"../../components\";\n\n/**\n * Gets the appropriate icon color based on the provided conditions.\n *\n * @param {boolean} disabled - Whether the icon is disabled.\n * @param {boolean} isActive - Whether the icon is active.\n * @param {boolean} [danger=false] - Whether the icon should indicate danger.\n * @param {boolean} [isCheckbox=false] - Whether the icon is for a checkbox.\n * \n * @returns {IconColors} The CSS variable name for the icon color.\n */\nconst getIconColor = (\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean = false,\n    isCheckbox: boolean = false\n): IconColors => {\n    switch(true) {\n        case disabled:\n            return \"color-icon-disabled\";\n        case danger:\n            return \"color-icon-danger\";\n        case isActive:\n            return isCheckbox ? \"color-icon-brand-default\" : \"color-icon-brand-press\";\n        default: \n            return \"color-icon-high\";\n    }\n}\n\n/**\n * Gets the appropriate icon size based on the provided size.\n *\n * @param {\"small\" | \"medium\" | \"large\"} size - The desired size of the icon.\n * \n * @returns {string} The CSS size value for the icon.\n */\nconst getIconSize = (size: \"small\" | \"medium\" | \"large\"): string => size === \"medium\" ? \"1rem\" : size === \"small\" ? \"0.75rem\" : \"1.25rem\"\n\n/**\n * Generates a checkmark icon button based on the provided parameters.\n *\n * @param {boolean} isSelected - Whether the item is selected.\n * @param {\"medium\" | \"large\"} size - The desired size of the icon.\n * @param {boolean} disabled - Whether the icon is disabled.\n * @param {boolean} isActive - Whether the icon is active.\n * @param {boolean} danger - Whether the icon should indicate danger.\n * \n * @returns {HTMLStencilElement} The generated checkmark icon button.\n */\nexport const generateCheckmarkIconButton = (\n    isSelected: boolean,\n    size: \"small\" | \"medium\" | \"large\",\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean\n): HTMLStencilElement => {\n    if (isSelected) {\n        return (\n            <div class=\"vds-base-item__checkmark-icon\">\n              <vds-icon\n                svg-icon=\"good\"\n                size={getIconSize(size)}\n                color={getIconColor(disabled, isSelected || isActive, danger)}\n                alt=\"Selected Item\"\n              />\n            </div>\n          );\n    }\n\n    return (\n        <div class={`vds-base-item__checkmark-icon--empty-${size}`}></div>\n    );\n}\n\n/**\n * Generates an informative icon based on the provided parameters.\n *\n * @param {string} icon - The name of the SVG icon to use.\n * @param {string} value - The value associated with the icon.\n * @param {\"medium\" | \"large\"} size - The desired size of the icon.\n * @param {boolean} disabled - Whether the icon is disabled.\n * @param {boolean} isActive - Whether the icon is active.\n * @param {boolean} danger - Whether the icon should indicate danger.\n * \n * @returns {HTMLStencilElement} The generated informative icon.\n */\nexport const generateInformativeIcon = (\n    icon: string,\n    value: string,\n    size: \"small\" | \"medium\" | \"large\",\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean\n): HTMLStencilElement => {\n    return (\n        <div class=\"vds-base-item__informative-icon\">            \n          <vds-icon\n            svg-icon={icon}\n            size={getIconSize(size)}\n            color={getIconColor(disabled, isActive, danger)}\n            alt={value}\n          />\n        </div>\n      );\n}\n\n/**\n * Generates a checkbox icon based on the provided parameters.\n *\n * @param {boolean} isSelected - Whether the checkbox is selected.\n * @param {\"medium\" | \"large\"} size - The desired size of the checkbox.\n * @param {boolean} disabled - Whether the checkbox is disabled.\n * @param {boolean} isActive - Whether the checkbox is active.\n * @param {boolean} danger - Whether the checkbox should indicate danger.\n * \n * @returns {HTMLStencilElement} The generated checkbox icon.\n */\nexport const generateCheckbox = (\n    isSelected: boolean,\n    size: \"small\" | \"medium\" | \"large\",\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean\n): HTMLStencilElement  => {\n    return (\n        <div class={`vds-base-item__checkbox-icon-${size}`}>\n          <vds-icon\n            svg-icon={isSelected ? \"checked\" : \"unchecked\"}\n            class={combineClasses(isSelected ? \"checkbox-icon-checked\" : \"\", `checkbox-item-${size}`)}\n            size={getIconSize(size)}\n            color={getIconColor(disabled, isSelected || isActive, danger, true)}\n            alt={\"checkbox-element\"}\n          />\n        </div>\n    );\n}\n\n/**\n * Generates a label element based on the provided parameters.\n\n * @param {string} label - The text content of the label.\n * @param {\"medium\" | \"large\"} size - The desired size of the label.\n * @param {boolean} disabled - Whether the label is disabled.\n * @param {boolean} isActive - Whether the label is active.\n * @param {boolean} danger - Whether the label should indicate danger.\n * \n * @returns {HTMLStencilElement} The generated label element.\n */\nexport const generateLabel = (\n    label: string,\n    size: \"small\" | \"medium\" | \"large\",\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean\n): HTMLStencilElement => {\n    return (\n        <span\n            class={combineClasses(\n                \"vds-base-item__label\",\n                `vds-base-item__label--size-${size}`,\n                disabled ? \"vds-base-item__label--disabled\" : \"\",\n                isActive ? \"vds-base-item__label--active\" : \"\",\n                danger ? \"vds-base-item__label--danger\" : \"\",\n          )}\n        >\n          { label ? label :  <slot></slot> }\n        </span>\n    );\n}\n\n/**\n * Generates a children icon button based on the provided parameters.\n\n * @param {\"medium\" | \"large\"} size - The desired size of the icon.\n * @param {boolean} disabled - Whether the icon is disabled.\n * @param {boolean} isActive - Whether the icon is active.\n * @param {boolean} danger - Whether the icon should indicate danger.\n * \n * @returns {HTMLStencilElement} The generated children icon button.\n */\nexport const generateChildrenIconButton = (\n    size: \"small\" | \"medium\" | \"large\",\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean\n): HTMLStencilElement => {\n    return(\n        <div class=\"vds-base-item__has-children-icon\">\n          <vds-icon\n            svg-icon=\"chevron-right\"\n            size={getIconSize(size)}\n            color={getIconColor(disabled, isActive, danger)}\n            alt=\"Open menu\"\n          />\n        </div>\n    );\n}\n"]}