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

package/dist/collection/components/input/vds-basic-input.utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-basic-input.utils.js","sourceRoot":"","sources":["../../../src/components/input/vds-basic-input.utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { IconColors } from \"../../definitions/colors\";\nimport { getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nexport type VdsInputType =  \"number\" | \"text\" | \"date\" | \"tel\" | \"datetime\" | \"datetime-local\" | \"email\" | \"submit\" | \"password\" | \"month\" | \"time\" | \"url\" | \"week\";\n\n/**\n * Validates whether an icon is valid or not by comparing with sprite file.\n *\n * @param icon string\n * @returns boolean\n */\nexport const isValidIcon = (icon: string): boolean => {\n    const ICON_LIST = getIconsFromSpriteFile();\n    return icon && ICON_LIST.some(ico => ico === icon);\n}\n\n/**\n * Toggle class [vds__input__container--focus] in focus/blur input's event\n *\n * @param divEl HTMLElement\n * @returns void\n */\nexport const toggleFocusClass = (divEl: HTMLElement, target = \"input\"): void => {\n    const classed = `vds__${target}__container--focus`;\n\n    if (divEl.classList.contains(classed)) {\n        divEl.classList.remove(classed);\n    } else {\n        divEl.classList.add(classed);\n    }\n}\n\n/**\n * Add class touched in focus event\n *\n * @param input HTMLElement\n * @returns void\n */\nexport const setTouchedClass = (input: HTMLElement): void => {\n    const classed = \"touched\";\n\n    if (!input.classList.contains(classed)) {\n        input.classList.add(classed);\n    }\n}\n\n/**\n * Add class touched in input event\n *\n * @param input HTMLElement\n * @returns void\n */\nexport const setDirtyClass = (input: HTMLElement): void => {\n    const classed = \"dirty\";\n\n    if (!input.classList.contains(classed)) {\n        input.classList.add(classed);\n    }\n}\n\n/**\n * Get icon color according to input state.\n *\n * @param divEl HTMLElement\n * @returns IconColors\n */\nexport const getIconColor = (inputState: \"normal\" | \"readonly\" | \"disabled\"): IconColors  => {\n    switch(inputState) {\n        case \"normal\":\n            return \"color-icon-high\";\n        case \"disabled\": \n            return \"color-icon-disabled\";\n        case \"readonly\": \n            return \"color-icon-medium\";\n    }\n}\n\n/**\n * Validates whether the style is valid or not.\n *\n * @param input { [key: string]: string }\n * @returns boolean\n */\nexport const isValidInputStyle = (input: { [key: string]: string }): boolean => {\n    const VALID_STYLES: string[] = [\n        \"direction\",\n        \"text-align\",\n        \"textAlign\",\n        \"text-transform\",\n        \"textTransform\",\n        \"unicode-bidi\",\n        \"unicodeBidi\"\n    ];\n    \n\tconst style = Object.keys(input);\n\n\treturn style.length > 0 && VALID_STYLES.some(st => st === style[0]);\n};\n\n/**\n * Sets input styles so they can be pass to JSX.style property\n *\n * @param input { [key: string]: string }\n * @returns { [key: string]: string }\n */\nexport const setInputStyles = (allowedStyles: { [key: string]: string }[]): { [key: string]: string } => {\n    if (allowedStyles) {\n        let response = {};\n        for (const style of allowedStyles) {\n            if (isValidInputStyle(style)) {\n                response = { ...response, ...style };\n            }\n        }\n        return response;\n    }\n    return {};\n}\n\n/**\n * Executes Formatter Function in order to mask value inside input.\n *\n * @param formatter Function\n * @param input string\n * @param currentValue string\n * @param eventData string\n * @param element HTMLInputElement | HTMLTextAreaElement\n * @param fullEvent InputEvent\n * \n * @returns string\n */\nexport const maskInput = (\n\tformatter: Function,\n\tinput: string,\n\tcurrentValue: string,\n\teventData: string,\n\telement?: HTMLInputElement | HTMLTextAreaElement,\n\tfullEvent?: InputEvent\n): string => {\n\treturn formatter(input, currentValue, eventData, element, fullEvent);\n}\n"]}

package/dist/collection/components/key-value-pair/vds-key-value-pair.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-key-value-pair.js","sourceRoot":"","sources":["../../../src/components/key-value-pair/vds-key-value-pair.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,eAAe;IAL5B;QAME,qCAAqC;QAC7B,kBAAa,GAAqB,KAAK,CAAC;QAKhD,gCAAgC;QACxB,cAAS,GAAe,aAAa,CAAC;QAK9C,8DAA8D;QACtD,cAAS,GAAe,gBAAgB,CAAC;KAkBlD;IAhBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,iDAAiD,IAAI,CAAC,aAAa,EAAE;gBAC/E,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,6DAAM,KAAK,EAAE,kBAAkB,IAAI,CAAC,SAAS,EAAE,IAAG,IAAI,CAAC,KAAK,CAAQ;oBACpE,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B;gBACN,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,6DAAM,KAAK,EAAE,kBAAkB,IAAI,CAAC,SAAS,EAAE,IAAG,IAAI,CAAC,KAAK,CAAQ;oBACpE,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { Typography } from '../../definitions/typography';\n\n@Component({\n  tag: 'vds-key-value-pair',\n  styleUrl: 'vds-key-value-pair.scss',\n  shadow: true,\n})\nexport class VdsKeyValuePair {\n  /** Set the position for the label */\n  @Prop() labelPosition: 'top' | 'bottom' = 'top';\n\n  /** Set the label value */\n  @Prop() label: string;\n\n  /** Set the size of the label */\n  @Prop() labelSize: Typography = 'body-medium';\n\n  /** Define the value content */\n  @Prop() value: string;\n\n  /** Define the text value size based on the vds font mixing */\n  @Prop() valueSize: Typography = 'headline-small';\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <div class={`vds-key-value-pair__container label-position--${this.labelPosition}`}>\n          <div class=\"label__container\">\n            <span class={`label vds-font-${this.labelSize}`}>{this.label}</span>\n            <slot name=\"label-slot\"></slot>\n          </div>\n          <div class=\"value__container\">\n            <span class={`value vds-font-${this.valueSize}`}>{this.value}</span>\n            <slot name=\"value-slot\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/key-value-pair/vds-key-value-pair.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-key-value-pair.stories.js","sourceRoot":"","sources":["../../../src/components/key-value-pair/vds-key-value-pair.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;AAEjE,eAAe;IACX,KAAK,EAAE,+BAA+B;IACtC,UAAU,EAAE;QACR,IAAI,EAAE;YACF,GAAG,EAAE,IAAI;SACZ;KACJ;IACD,QAAQ,EAAE;QACN,aAAa,EAAE;YACX,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;YAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,SAAS,EAAE;YACP,OAAO,EAAE,kBAAkB;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,SAAS,EAAE;YACP,OAAO,EAAE,kBAAkB;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;CAKd,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IACxB,OAAO;SACF,MAAM;;;iBAGE,IAAI,CAAC,KAAK;0BACD,IAAI,CAAC,aAAa;sBACtB,IAAI,CAAC,SAAS;iBACnB,IAAI,CAAC,KAAK;sBACL,IAAI,CAAC,SAAS;;;CAGnC,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,2BAA2B;IAClC,aAAa,EAAE,KAAK;IACpB,SAAS,EAAE,aAAa;IACxB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,gBAAgB;CAC9B,CAAC;AAEF,MAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE;IAC5B,OAAO;SACF,MAAM;;;iBAGE,IAAI,CAAC,KAAK;0BACD,IAAI,CAAC,aAAa;sBACtB,IAAI,CAAC,SAAS;iBACnB,IAAI,CAAC,KAAK;sBACL,IAAI,CAAC,SAAS;;;;;;CAMnC,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEnD,SAAS,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,2BAA2B;IAClC,aAAa,EAAE,KAAK;IACpB,SAAS,EAAE,aAAa;IACxB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,gBAAgB;CAC9B,CAAC;AAEF,MAAM,YAAY,GAAG;;;;;;;;;;;;CAYpB,CAAC;AAEF,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE;IAC9B,OAAO;SACF,YAAY;;;;iBAIJ,IAAI,CAAC,KAAK;0BACD,IAAI,CAAC,aAAa;sBACtB,IAAI,CAAC,SAAS;iBACnB,IAAI,CAAC,KAAK;sBACL,IAAI,CAAC,SAAS;;;;;;CAMnC,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEvD,WAAW,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,2BAA2B;IAClC,aAAa,EAAE,KAAK;IACpB,SAAS,EAAE,aAAa;IACxB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,gBAAgB;CAC9B,CAAC","sourcesContent":["import TYPOGRAPHY_OPTIONS from \"../../constants/typography-vars\";\n\nexport default {\n    title: 'VDS/Components/Key-Value Pair',\n    parameters: {\n        docs: {\n            toc: true,\n        },\n    },\n    argTypes: {\n        labelPosition: {\n            options: ['top', 'bottom'],\n            control: { type: 'select' },\n        },\n        labelSize: {\n            options: TYPOGRAPHY_OPTIONS,\n            control: { type: 'select' },\n        },\n        valueSize: {\n            options: TYPOGRAPHY_OPTIONS,\n            control: { type: 'select' },\n        }\n    },\n};\n\nconst styles = `\n    .content {\n        margin: 2rem;\n        width: 151px;\n    }\n`;\n\nconst codeTemplate = args => {\n    return `\n<style>${styles}</style>\n<div class=\"content\">\n    <vds-key-value-pair\n        label=\"${args.label}\"\n        label-position=\"${args.labelPosition}\"\n        label-size=\"${args.labelSize}\"\n        value=\"${args.value}\"\n        value-size=\"${args.valueSize}\"\n    ></vds-key-value-pair>\n</div>\n`;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    label: 'This is the label section',\n    labelPosition: 'top',\n    labelSize: 'body-medium',\n    value: '2294',\n    valueSize: 'headline-small',\n};\n\nconst codeTemplateSlot = args => {\n    return `\n<style>${styles}</style>\n<div class=\"content\">\n    <vds-key-value-pair\n        label=\"${args.label}\"\n        label-position=\"${args.labelPosition}\"\n        label-size=\"${args.labelSize}\"\n        value=\"${args.value}\"\n        value-size=\"${args.valueSize}\"\n    >\n        <vds-icon-button slot=\"label-slot\" icon=\"open-icon\" variant=\"tertiary\"></vds-icon-button>\n        <vds-badge-pill slot=\"value-slot\" value=\"+8.89%\" size=\"2x-small\" status-color=\"healthy\"></vds-badge-pill>\n    </vds-key-value-pair>\n</div>\n`;\n};\n\nexport const SlotUsage = codeTemplateSlot.bind({});\n\nSlotUsage.args = {\n    label: 'This is the label section',\n    labelPosition: 'top',\n    labelSize: 'body-medium',\n    value: '2294',\n    valueSize: 'headline-small',\n};\n\nconst stylesCustom = `\n    .content {\n        margin: 2rem;\n        width: 151px;\n    }\n    .custom-tokens {\n        --vds-key-value-pair-gap: var(--spacing-00);\n        --vds-key-value-pair-label-gap: var(--spacing-03);\n        --vds-key-value-pair-value-gap: var(--spacing-03);\n        --vds-key-value-pair-text-label-color: var(--color-text-danger-high);\n        --vds-key-value-pair-text-value-color: var(--color-text-danger-medium);\n    }\n`;\n\nconst codeTemplateCustom = args => {\n    return `\n<style>${stylesCustom}</style>\n<div class=\"content\">\n    <vds-key-value-pair\n        class=\"custom-tokens\"\n        label=\"${args.label}\"\n        label-position=\"${args.labelPosition}\"\n        label-size=\"${args.labelSize}\"\n        value=\"${args.value}\"\n        value-size=\"${args.valueSize}\"\n    >\n        <vds-icon-button slot=\"label-slot\" icon=\"open-icon\" variant=\"tertiary\"></vds-icon-button>\n        <vds-badge-pill slot=\"value-slot\" value=\"+8.89%\" size=\"2x-small\" status-color=\"danger\"></vds-badge-pill>\n    </vds-key-value-pair>\n</div>\n`;\n};\n\nexport const CustomUsage = codeTemplateCustom.bind({});\n\nCustomUsage.args = {\n    label: 'This is the label section',\n    labelPosition: 'top',\n    labelSize: 'body-medium',\n    value: '2294',\n    valueSize: 'headline-small',\n};\n"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-label.stories.js","sourceRoot":"","sources":["../../../src/components/label/vds-label.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACX,KAAK,EAAE,sBAAsB;IAC7B,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACH,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;CAId,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1B,OAAO;SACF,MAAM;;;gBAGC,IAAI,CAAC,IAAI,IAAI,QAAQ;oBACjB,IAAI,CAAC,QAAQ,IAAI,KAAK;oBACtB,IAAI,CAAC,QAAQ,IAAI,KAAK;uBACnB,IAAI,CAAC,UAAU,IAAI,EAAE;;;KAGvC,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IACd,IAAI,EAAE,QAAQ;IACd,UAAU,EAAE,OAAO;IACnB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE9C,QAAQ,CAAC,IAAI,GAAG;IACZ,UAAU,EAAE,OAAO;IACnB,QAAQ,EAAE,IAAI;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE9C,QAAQ,CAAC,IAAI,GAAG;IACZ,UAAU,EAAE,OAAO;IACnB,QAAQ,EAAE,IAAI;CACjB,CAAC","sourcesContent":["export default {\n    title: 'VDS/Components/Label',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n      },\n    argTypes: {\n        size: {\n            options: [\"small\", \"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n    },\n};\n\nconst styles = `\ndiv {\n    padding: 20px;\n}\n`;\n \nconst codeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<div class=\"container\">\n    <vds-label \n        size=\"${args.size || \"medium\"}\"\n        disabled=\"${args.disabled || false}\"\n        required=\"${args.required || false}\" \n        label-value=\"${args.labelValue || \"\"}\">\n    </vds-label>\n</div>\n    `;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    size: \"medium\",\n    labelValue: \"Label\",\n    required: false,\n    disabled: false,\n};\n\nexport const Required = codeTemplate.bind({});\n\nRequired.args = {\n    labelValue: \"Label\",\n    required: true,\n};\n\nexport const Disabled = codeTemplate.bind({});\n\nDisabled.args = {\n    labelValue: \"Label\",\n    disabled: true,\n};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-link.js","sourceRoot":"","sources":["../../../src/components/link/vds-link.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;AAQ7D,MAAM,OAAO,OAAO;IALpB;QAQE,oDAAoD;QAC5C,iBAAY,GAAqB,OAAO,CAAC;QACjD,iDAAiD;QACzC,cAAS,GAAY,KAAK,CAAC;QACnC,0CAA0C;QAClC,QAAG,GAAW,GAAG,CAAC;QAC1B,uBAAuB;QACf,WAAM,GAA4C,OAAO,CAAC;QAClE,8BAA8B;QACtB,QAAG,GAAW,IAAI,CAAC;QAC3B,wBAAwB;QAChB,SAAI,GAA8D,QAAQ,CAAC;QAGnF;;WAEG;QACK,YAAO,GAAuC,SAAS,CAAC;KAgEjE;IA7DC;;;OAGG;IACH,OAAO;QACL,IAAI,IAAI,GAAG,QAAQ,CAAC;QACpB,QAAO,IAAI,CAAC,IAAI,EAAE,CAAC;YACjB,KAAK,UAAU;gBACb,IAAI,GAAG,SAAS,CAAC;gBACjB,MAAM;YACR,KAAK,aAAa;gBAChB,IAAI,GAAG,MAAM,CAAC;gBACd,MAAM;YACR,KAAK,OAAO;gBACV,IAAI,GAAG,SAAS,CAAC;gBACjB,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,GAAG,QAAQ,CAAC;gBAChB,MAAM;YACR,KAAK,OAAO;gBACV,IAAI,GAAG,SAAS,CAAC;gBACjB,MAAM;QACV,CAAC;QAED,OAAO,gBACL,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC/C,KAAK,EAAC,oBAAoB,GAAY,CAAC;IAC3C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,0DACE,KAAK,EAAE,cAAc,CACnB,8BAA8B,IAAI,CAAC,OAAO,EAAE,EAC5C,2BAA2B,IAAI,CAAC,IAAI,EAAE,CAEvC,EACD,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG;gBAEb,6DACA,KAAK,EAAE,cAAc,CAAC,qBAAqB,EACxC,2BAA2B,IAAI,CAAC,YAAY,EAAE,CAChD;oBAEE,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,OAAO,EAAE;oBACvC,6DACE,KAAK,EAAE,cAAc,CACnB,qBAAqB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAAE,CACnE,IAEA,IAAI,CAAC,KAAK,CACN,CACF,CACL,CACC,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\";\n\n@Component({\n  tag: \"vds-link\",\n  styleUrl: \"vds-link.scss\",\n  shadow: true,\n})\nexport class VdsLink {\n  /** Sets the value for the label text */\n  @Prop() value: string;\n  /** Sets icon position relative to the label text */\n  @Prop() iconPosition: \"right\" | \"left\" = \"right\";\n  /** Enable / Disable underline text decoration */\n  @Prop() underline: boolean = false;\n  /** Sets url link for the internal href */\n  @Prop() url: string = \"#\";\n  /** Sets href target */\n  @Prop() target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\";\n  /** Sets the link rel value */\n  @Prop() rel: string = null;\n  /** Set the link size */\n  @Prop() size: \"large\" | \"medium\" | \"small\" | \"extra-small\" | \"2x-small\" = \"medium\";\n  /** Sets the informative icon in the vds-link */\n  @Prop() informativeIcon: string;\n  /** Sets the link variant - footer variant is the same as secondary.\n   * @tobedeprecated footer variant will be deprecated in the future.\n   */\n  @Prop() variant: \"primary\" | \"secondary\" | \"footer\" = \"primary\";\n\n\n  /** Sets the informative icon in the vds-link\n   * \n   * @returns HTMLStencilElement\n   */\n  getIcon(): HTMLStencilElement {\n    let size = \"1.5rem\";\n    switch(this.size) {\n      case \"2x-small\":\n        size = \"0.75rem\";\n        break;\n      case \"extra-small\":\n        size = \"1rem\";\n        break;\n      case \"small\":\n        size = \"1.25rem\";\n        break;\n      case \"medium\":\n        size = \"1.5rem\";\n        break;\n      case \"large\":\n        size = \"1.75rem\";\n        break;\n    }\n\n    return <vds-icon\n      svgIcon={this.informativeIcon}\n      size={this.variant === \"footer\" ? \"1rem\" : size}\n      color=\"color-link-default\"></vds-icon>;\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <a\n          class={combineClasses(\n            `vds-link vds-link--variant-${this.variant}`,\n            `vds-link vds-link--size-${this.size}`,\n           \n          )}\n          href={this.url}\n          target={this.target}\n          rel={this.rel}\n        >\n          <span\n          class={combineClasses(`vds-link--container`,\n             `vds-link--icon-position-${this.iconPosition}`\n          )}\n          >\n            {this.informativeIcon && this.getIcon()}\n            <span\n              class={combineClasses(\n                `vds-link--content ${this.underline ? \"vds-link--underline\" : \"\"}`\n              )}\n            >\n              {this.value}\n            </span>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/link/vds-link.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-link.stories.js","sourceRoot":"","sources":["../../../src/components/link/vds-link.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nexport default {\n  title: \"VDS/Components/Link\",\n  parameters: {\n    docs: {\n      toc: true,\n    },\n  },\n  argTypes: {\n    size: {\n      options: [\"2x-small\",\"extra-small\", \"small\", \"medium\", \"large\"],\n      control: { type: \"select\" },\n    },\n    informativeIcon: {\n      options: [...ICON_LIST, undefined],\n      control: { type: \"select\" }\n    },\n    iconPosition: {\n      options: [\"left\", \"right\"],\n      control: { type: \"select\" },\n    },\n    target: {\n      options: [\"_self\", \"_blank\", \"_parent\", \"_top\"],\n      control: { type: \"select\" },\n    },\n    variant: {\n      options: [\"primary\", \"secondary\"],\n      control: { type: \"select\" },\n    },\n    rel: {\n      control: { type: \"text\" }\n    }\n  },\n};\n\nconst styles = `\n    .container {\n      margin: 10px;\n    }    \n`;\n\nconst codeTemplate = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n    <vds-link\n        value=\"${args.value || \"Link Item\"}\"    \n        underline=\"${args.underline || false}\"\n        url=\"${args.url || \"#\"}\"\n        target=\"${args.target || \"_blank\"}\"\n        size=\"${args.size || \"medium\"}\"\n        variant=\"${args.variant || \"primary\"}\"\n        icon-position=\"${args.iconPosition || \"right\"}\"\n        ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"` : \"\"}\"\n       >\n    </vds-link>\n</div>\n    `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  value: \"Link Item\",\n  underline: false,\n  url: \"https://example.com\",\n  target: \"_blank\",\n  size: \"medium\",\n  variant: \"primary\",\n  informativeIcon: undefined,\n  rel: undefined\n};\n\nconst codeWithIconTemplate = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n    <vds-link\n        value=\"${args.value || \"Link Item\"}\"    \n        underline=\"${args.underline || false}\"\n        url=\"${args.url || \"#\"}\"\n        target=\"${args.target || \"_blank\"}\"\n        size=\"${args.size || \"medium\"}\"\n        variant=\"${args.variant || \"primary\"}\"\n        icon-position=\"${args.iconPosition || \"right\"}\"\n        rel=\"${args.rel}\"\n        ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"` : \"\"}\"\n       >\n    </vds-link>\n</div>\n    `;\n};\n\nexport const BasicIconUsage = codeWithIconTemplate.bind({});\n\nBasicIconUsage.args = {\n  value: \"Link Item\",\n  underline: false,\n  url: \"https://example.com\",\n  target: \"_blank\",\n  size: \"large\",\n  variant: \"primary\",\n  iconPosition: \"rigth\",\n  informativeIcon: \"barcode\"\n};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-menu.js","sourceRoot":"","sources":["../../../src/components/menu/vds-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, State, h, Element, EventEmitter, Event, Method } from \"@stencil/core\";\nimport { HTMLStencilElement, Watch } from \"@stencil/core/internal\";\nimport { updateFloatingBoxPosition } from \"../../utils/floating-engine-utils\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { queryElementFromShadowRoot } from \"../../utils/node-utils\";\n\n@Component({\n  tag: \"vds-menu\",\n  styleUrl: \"vds-menu.scss\",\n  shadow: true,\n})\nexport class VdsMenu {\n\n  @Element() hostEl: HTMLElement;\n  /** Defines the position where the menu will be opened */\n  @Prop({ mutable: true }) position: \"top\" | \"bottom\" | \"right\" | \"left\" = \"bottom\";\n  /** Sets the maximum width of the menu\"s content */\n  @Prop({ mutable: true }) maxWidth: string;\n  /** Sets the maximum height of the menu\"s content */\n  @Prop({ mutable: true }) maxHeight: string;\n  /** The type of event that will trigger the popover */\n  @Prop({ mutable: true }) event: \"hover\" | \"click\" = \"click\";\n  /** Toggles the floating container auto-positioning based on available window space. \n   * False by default as it may cause positioning issues in some situations, use with caution \n   * */\n  @Prop({ mutable: true }) autoPosition: boolean = false;\n  /** Set backdrop when show the menu */\n  @Prop({ mutable: true }) backdrop: boolean = false;\n\n  @State() menuOpened: boolean = false;\n  /** Emits event when menu gets opens */\n  @Event() opened: EventEmitter<void>;\n  /** Emits event when menu gets closes */\n  @Event() closed: EventEmitter<void>;\n\n  private actionElementRef: HTMLElement;\n  private menuElementRef: HTMLElement;\n  private floatingCleanUp: () => void;\n\n  private isSubmenu: boolean = false;\n  \n  constructor() {\n    this.floatingCleanUp = () => { };\n  }\n\n  @Watch(\"menuOpened\")\n  async emitValue(): Promise<void> {\n    if (this.menuOpened) {\n      this.opened.emit();\n      this.menuElementRef.style.display = \"inline-flex\";\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.menuElementRef, null, this.position, this.autoPosition);\n    } else {\n      this.closeNestedMenus();\n      this.closed.emit();\n      this.menuElementRef.style.display = \"none\";\n      this.floatingCleanUp();\n    }\n  }\n\n  /* Close the menu when click outside */\n  @Listen(\"click\", { target: \"window\" })\n  handleClickOut(evt: MouseEvent): void {\n    const isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside && !this.backdrop) {\n      this.menuOpened = false;\n    }\n  }\n  \n  handleHoverOut(event: Event): void {\n    if (this.event === \"hover\") {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.close();\n      }\n    }\n  }\n  \n  /* Close all nested menus recursively */\n  private closeNestedMenus(): void {\n    const menuContent = this.menuElementRef.querySelector('slot[name=\"menu-content\"]') as HTMLSlotElement;\n    if (menuContent) {\n      const elements = Array.from(menuContent.children);\n      for (const element of elements) {\n        const nestedMenu = element.querySelector('vds-menu');\n        if (nestedMenu) {\n          nestedMenu.close();\n        }\n      }\n    }\n  }\n  \n  /* Open the menu with click on the trigger element  */\n  async handleClick(evt: Event): Promise<void> {\n    if (this.event === \"click\") {\n      const clickedElement = evt.target as HTMLElement;\n      if (clickedElement && !this.menuOpened) {\n        this.menuOpened = true;\n      }\n    }\n  }\n\n  /* Listen when Menu Item element is clicked to close Menu window */\n  @Listen(\"clicked\")\n  handleMenuItemClicked(): void {\n    this.close();\n  }\n\n  /* Open the menu from other element  */\n  @Method()\n  public async open(): Promise<void> {\n    this.menuOpened = true;\n  }\n\n  /* Close the menu from other element  */\n  @Method()\n  public async close(): Promise<void> {\n    this.closeNestedMenus();\n    this.menuOpened = false;\n  }\n  /**\n   *  Gets the target that will manage the menu\n   *  returns a promise with the target HTMLElement.\n   */\n  @Method()\n  public async getTarget(): Promise<HTMLElement | null> {\n    return document.querySelector(\".vds__menu--trigger\") as HTMLElement;\n  }\n\n  private handleHover(event: Event): void {\n    if (this.event === \"hover\") {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.menuOpened = true;\n      }\n    }\n  }\n\n  private setMaxWidthAndHeight() {\n    return { \"--menu-max-width\": this.maxWidth, \"--menu-max-height\": this.maxHeight }\n  }\n\n  componentWillLoad() {\n    const triggerItem = Array.from(this.hostEl.children).find(\n      (child) => child.matches('vds-menu-item[slot=\"menu-trigger\"]')\n    );\n    if (triggerItem) {\n      this.isSubmenu = true;\n      this.backdrop = false;\n      this.autoPosition = false;\n    }\n  }\n\n  componentDidLoad() {\n    this.actionElementRef = queryElementFromShadowRoot(this.hostEl, \".vds__menu--trigger\");\n    this.menuElementRef = queryElementFromShadowRoot(this.hostEl, \".vds__menu--container\");\n    if (this.event === \"click\") {\n      this.actionElementRef.addEventListener(\"click\", this.handleClick.bind(this));\n    } else if (this.event === \"hover\") {\n      this.actionElementRef.addEventListener(\"mouseenter\", this.handleHover.bind(this));\n      this.menuElementRef.addEventListener(\"mouseleave\", this.handleHoverOut.bind(this));\n    }\n  }\n\n  componentDidRender() {\n    updateFloatingBoxPosition(this.actionElementRef, this.menuElementRef, null, this.position, this.autoPosition);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener(\"click\", this.handleClickOut.bind(this));\n    if (this.event === \"click\") {\n      this.actionElementRef.removeEventListener(\"click\", this.handleClick.bind(this));\n    } else if (this.event === \"hover\") {\n      this.actionElementRef.removeEventListener(\"mouseenter\", this.handleHover.bind(this));\n      this.menuElementRef.removeEventListener(\"mouseleave\", this.handleHoverOut.bind(this));\n    }\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host style={this.setMaxWidthAndHeight()}>\n        {this.backdrop && this.menuOpened ? <div class=\"vds__menu--backdrop\" onClick={() => this.close()}></div> : null}\n        <div class=\"vds__menu--trigger\"\n          onClick={(evt: MouseEvent) => {\n            this.handleClick(evt);\n          }}\n          ref={(triggerEl) => { if (triggerEl) this.actionElementRef = triggerEl; }}\n        >\n          <slot name=\"menu-trigger\"></slot>\n        </div>\n        <div\n          class={combineClasses(\n            \"vds__menu--container\",\n            this.maxHeight ? \"has-scroll\" : \"\",\n            this.isSubmenu ? `vds__menu--submenu-${this.position}` : \"\"\n          )}\n          ref={(menuEl) => { if (menuEl) this.menuElementRef = menuEl; }}\n        >\n          <slot name=\"menu-content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-menu.stories.js","sourceRoot":"","sources":["../../../src/components/menu/vds-menu.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'VDS/Components/Menu/Menu',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n  },\n  argTypes: {\n    position: {\n      options: ['left', 'right', 'top', 'bottom'],\n      control: { type: 'select' },\n    },\n    event: {\n      options: ['click', 'hover'],\n      control: { type: 'select' },\n    },\n    backdrop: {\n      options: ['true', 'false'],\n      control: { type: 'boolean' },\n    },\n  }\n};\n\nconst styles = `\n    .container {\n        position: relative;\n        padding: 120px 0;\n        width:100%;\n        height:auto;\n        display: flex;\n        justify-content: center;\n    }    \n`;\n\nconst codeTemplate = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n  <vds-menu\n    event=\"${args.event}\"\n    max-width=\"${args.maxWidth}\"\n    max-height=\"${args.maxHeight}\"\n    position=\"${args.position}\"\n    backdrop=\"${args.backdrop}\"\n    auto-position=\"${args.autoPosition}\"\n  >\n    <vds-button slot=\"menu-trigger\">click me</vds-button>\n    <div slot=\"menu-content\">\n      <vds-menu-list>  \n        <vds-menu-group-header>Section Title</vds-menu-group-header>\n        <vds-menu-item  value=\"Menu item 1\" is-active=\"true\"></vds-menu-item>\n        <vds-menu-item  value=\"Menu item 2\"></vds-menu-item>\n        <vds-menu-item  value=\"Menu item 3\"></vds-menu-item>\n        <vds-divider></vds-divider>\n        <vds-menu-item  value=\"Menu item 4\" disabled=\"true\"></vds-menu-item>\n      </vds-menu-list>\n    </div>\n  </vds-menu>\n</div>\n    `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  position: 'right',\n  maxWidth: '',\n  maxHeight: '',\n  event: 'click',\n  backdrop: 'false',\n  autoPosition: false\n};\n\nconst codeTemplateWithSlottedItem = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n  <vds-menu \n    event=\"${args.event}\"\n    max-width=\"${args.maxWidth}\"\n    max-height=\"${args.maxHeight}\"\n    position=\"${args.position}\"\n    backdrop=\"${args.backdrop}\"\n    auto-position=\"${args.autoPosition}\"\n  >\n    <vds-button slot=\"menu-trigger\">click me</vds-button>\n    <div slot=\"menu-content\">\n      <vds-menu-list>  \n        <vds-menu-group-header>Section Title</vds-menu-group-header>\n        <vds-menu-item >Slotted Item 1<vds-divider  orientation=\"vertical\"></vds-divider> divided content</vds-menu-item>\n        <vds-menu-item >Slotted Item 2</vds-menu-item>\n      </vds-menu-list>\n    </div>\n  </vds-menu>\n</div>\n    `;\n};\n\nexport const WithSlottedItemUsage = codeTemplateWithSlottedItem.bind({});\n\nWithSlottedItemUsage.args = {\n  position: 'right',\n  maxWidth: '',\n  maxHeight: '',\n  event: 'click',\n  backdrop: 'false',\n  autoPosition: false\n};\n\nconst codeTemplateWithSelectableItems = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n  <vds-menu \n    event=\"${args.event}\"\n    max-width=\"${args.maxWidth}\"\n    max-height=\"${args.maxHeight}\"\n    position=\"${args.position}\"\n    backdrop=\"${args.backdrop}\"\n    auto-position=\"${args.autoPosition}\"\n  >\n    <vds-button slot=\"menu-trigger\">click me</vds-button>\n    <div slot=\"menu-content\">\n      <vds-menu-list>  \n        <vds-menu-group-header>Section Title</vds-menu-group-header>\n        <vds-menu-item  value=\"Menu item 1\" has-checkmark=\"true\" is-selected=\"true\"></vds-menu-item>\n        <vds-menu-item  value=\"Menu item 2\" has-checkmark=\"true\" is-selected=\"true\"></vds-menu-item>\n      </vds-menu-list>\n    </div>\n  </vds-menu>\n</div>\n    `;\n};\n\nexport const WithSelectableItemsUsage = codeTemplateWithSelectableItems.bind({});\n\nWithSelectableItemsUsage.args = {\n  position: 'right',\n  maxWidth: '',\n  maxHeight: '',\n  event: 'click',\n  backdrop: 'false',\n  autoPosition: false\n};\n\nconst codeTemplateBasicWithScrollbar = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n  <vds-menu \n    event=\"${args.event}\"\n    max-width=\"${args.maxWidth}\"\n    max-height=\"${args.maxHeight}\"\n    position=\"${args.position}\"\n    backdrop=\"${args.backdrop}\"\n    auto-position=\"${args.autoPosition}\"\n  >\n    <vds-button slot=\"menu-trigger\">click me</vds-button>\n    <div slot=\"menu-content\">\n      <vds-menu-list>  \n        <vds-menu-group-header>Section Title</vds-menu-group-header>\n        <vds-menu-item value=\"Menu item 1\" ></vds-menu-item>\n        <vds-menu-item value=\"Menu item 2\" ></vds-menu-item>\n        <vds-menu-item value=\"Menu item 3\"></vds-menu-item>        \n        <vds-menu-item value=\"Menu item 4\" ></vds-menu-item>\n        <vds-menu-item value=\"Menu item 5\" ></vds-menu-item>\n        <vds-menu-item value=\"Menu item 6\" ></vds-menu-item>\n        <vds-menu-item value=\"Menu item 7\" ></vds-menu-item>\n        <vds-menu-item value=\"Menu item 8\" ></vds-menu-item>\n        <vds-menu-item value=\"Menu item 9\" ></vds-menu-item>  \n      </vds-menu-list>\n    </div>\n  </vds-menu>\n</div>\n    `;\n};\n\nexport const BasicWithScrollbarUsage = codeTemplateBasicWithScrollbar.bind({});\n\nBasicWithScrollbarUsage.args = {\n  position: 'right',\n  maxWidth: '',\n  maxHeight: '300px',\n  event: 'click',\n  backdrop: 'false',\n  autoPosition: false\n};\n\nconst codeTemplateNested = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n  <vds-menu\n    event=\"${args.event}\"\n    max-width=\"${args.maxWidth}\"\n    position=\"${args.position}\"\n    backdrop=\"${args.backdrop}\"\n    auto-position=\"${args.autoPosition}\"\n  >\n    <vds-button slot=\"menu-trigger\">click me</vds-button>\n    <div slot=\"menu-content\">\n      <vds-menu-list>\n        <vds-menu-group-header>Section Title</vds-menu-group-header>\n        <vds-menu event=\"${args.event}\" position=\"${args.position}\">\n          <vds-menu-item slot=\"menu-trigger\" value=\"Menu Item 1\" has-children=\"true\"></vds-menu-item>\n          <div slot=\"menu-content\">\n            <vds-menu-list>\n              <vds-menu-item value=\"Menu item 1-1\"></vds-menu-item>\n              <vds-menu-item value=\"Menu item 1-2\"></vds-menu-item>\n              <vds-menu event=\"${args.event}\" position=\"${args.position}\">\n                <vds-menu-item slot=\"menu-trigger\" value=\"Menu Item 1-3\" has-children=\"true\"></vds-menu-item>\n                <div slot=\"menu-content\">\n                  <vds-menu-list>\n                    <vds-menu-item value=\"Menu item 1-3-1\"></vds-menu-item>\n                    <vds-menu-item value=\"Menu item 1-3-2\"></vds-menu-item>\n                  </vds-menu-list>\n                </div>\n              </vds-menu>\n            </vds-menu-list>\n          </div>\n          </vds-menu>\n        <vds-menu-item value=\"Menu item 2\"> </vds-menu-item>\n        <vds-menu-item value=\"Menu item 3\"></vds-menu-item>\n        <vds-divider></vds-divider>\n        <vds-menu-item value=\"Menu item 4\" disabled=\"true\"></vds-menu-item>\n      </vds-menu-list>\n    </div>\n  </vds-menu>\n</div>\n    `;\n};\n\nexport const NestedUsage = codeTemplateNested.bind({});\n\nNestedUsage.args = {\n  position: 'right',\n  maxWidth: '',\n  event: 'click',\n  backdrop: 'false',\n  autoPosition: false\n};"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-menu-group-header.js","sourceRoot":"","sources":["../../../src/components/menu-group-header/vds-menu-group-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAmB,4BAA4B,EAAE,MAAM,wCAAwC,CAAC;AAOvG,MAAM,OAAO,kBAAkB;IAL/B;QAME,+BAA+B;QACvB,SAAI,GAAoB,QAAQ,CAAC;KAS1C;IAPC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,CACnC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { GroupHeaderSize, generateGroupHeaderContainer } from '../base-group-header/base-group-header';\n\n@Component({\n  tag: 'vds-menu-group-header',\n  styleUrl: 'vds-menu-group-header.scss',\n  shadow: true,\n})\nexport class VdsMenuGroupHeader {\n  /** Size of the group header */\n  @Prop() size: GroupHeaderSize = 'medium';\n\n  render() {\n    return (\n      <Host>\n        {generateGroupHeaderContainer(this.size)}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/menu-group-header/vds-menu-group-header.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-menu-group-header.stories.js","sourceRoot":"","sources":["../../../src/components/menu-group-header/vds-menu-group-header.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,uCAAuC;IAC9C,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;;CAOd,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;SACA,MAAM;;;kCAGmB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK;;;KAGpD,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,QAAQ;CACf,CAAC","sourcesContent":["export default {\n  title: 'VDS/Components/Menu/Menu-Group-Header',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n  },\n  argTypes: {\n    size: {\n      options: ['medium', 'large'],\n      control: { type: 'select' },\n    },\n  },\n};\n\nconst styles = `\n    .container {\n        position: relative;\n        padding:2px;\n        text-align:center;\n        width:300px;\n    }    \n`;\n\nconst codeTemplate = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n  <vds-menu-list>  \n    <vds-menu-group-header size=${args.size}>${args.value}</vds-menu-group-header>\n  </vds-menu-list>\n</div>\n    `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  value: 'Menu Group Header',\n  size: 'medium',\n};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-menu-item.js","sourceRoot":"","sources":["../../../src/components/menu-item/vds-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, h, Element } from \"@stencil/core\";\nimport { HTMLStencilElement, Watch } from \"@stencil/core/internal\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { handleRefClick } from \"../../utils/utils\";\nimport { generateCheckbox, generateCheckmarkIconButton, generateChildrenIconButton, generateInformativeIcon, generateLabel } from \"../base-item/base-item\";\n\nexport interface MenuItemClickedEvent {\n  value: string;\n  event: MouseEvent;\n}\n\n@Component({\n  tag: \"vds-menu-item\",\n  styleUrl: \"vds-menu-item.scss\",\n  shadow: true,\n})\nexport class VdsMenuItem {\n /** Puts the VdsMenuItem in disabled state */\n  @Prop({ mutable: true }) disabled: boolean = false;\n  /** Define the icon value */\n  @Prop({ mutable: true }) icon: string;\n  /** Define item as active when is true */\n  @Prop({ mutable: true }) isActive: boolean = false;\n  /** Shows arrow when there are children */\n  @Prop({ mutable: true }) hasChildren: boolean = false;\n  /** Defines the element as a link */\n  @Prop({ mutable: true }) linkHref: string = null;\n  /** Sets the link target value */\n  @Prop({ mutable: true }) linkTarget: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\";\n  /** Sets the link rel value */\n  @Prop({ mutable: true }) linkRel: string = null;\n  /** Define text value */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  /** Define aria-label */\n  @Prop({ mutable: true, reflect: true }) setAriaLabel: string;\n  /** Set size of menu item */\n  @Prop({ mutable: true }) size: \"medium\" | \"large\" = \"medium\";\n  /** Shows checkmark */\n  @Prop({ mutable: true }) hasCheckmark: boolean = false;  \n  /** Set state of checkmark */\n  @Prop({ mutable: true, reflect: true }) isSelected: boolean = false;\n  /** When has-checkmark is true, sets the checks element as checkmark or checkbox.  */\n  @Prop() checkmarkVariant: \"checkbox\" |\"checkmark\" = \"checkmark\";\n  /** When has-checkmark is true, sets the checks element at the beginning or end.  */\n  @Prop() checkmarkAlignment: \"start\" |\"end\" = \"start\";\n  /** Sets the menu item to danger state.  */\n  @Prop({ mutable: true, reflect: true }) danger: boolean = false;\n\n  /** Emits event when item gets clicked */\n  @Event() clicked: EventEmitter<MenuItemClickedEvent>;\n  /** Emits event when item is selected */\n  @Event() selected: EventEmitter<MouseEvent>;\n  /** Emits event when item is deselected */\n  @Event() deselected: EventEmitter<MouseEvent>;\n \n  @Element() hostEl: HTMLElement; \n  \n  @Watch(\"isSelected\")\n  updateItemState() {\n    this.isActive = this.isSelected; \n  }\n\n  private handleClick(evt: MouseEvent): void {\n    const parentMenu = this.hostEl.closest(\"vds-menu\");\n    const isMenuTrigger = this.hostEl.getAttribute(\"slot\") === \"menu-trigger\";\n    if (parentMenu && isMenuTrigger) {\n      parentMenu.open();\n      evt.stopPropagation();\n    } else {\n      handleRefClick(this.linkHref, this.linkTarget, this.linkRel);\n      this.clicked.emit({ value: this.value, event: evt });\n      this.handleSelected(evt);\n    }\n  }\n\n  private handleSelected(evt: MouseEvent):void{\n    if (this.hasCheckmark) {\n      this.isSelected = !this.isSelected;\n    }\n    if (this.isSelected) this.selected.emit(evt);\n    else this.deselected.emit(evt);\n  }\n\n  private generateCheckmarkIconButton(){\n    return generateCheckmarkIconButton(this.isSelected, this.size, this.disabled, this.isActive, this.danger);\n  }\n  private generateInformativeIcon(){\n    return generateInformativeIcon(this.icon, this.value, this.size, this.disabled, this.isActive, this.danger);\n  }\n\n  private generateCheckbox() {\n    return generateCheckbox(this.isSelected, this.size, this.disabled, this.isActive, this.danger);\n  }\n\n  private generateLabel(){\n    return generateLabel(this.value, this.size, this.disabled, this.isActive, this.danger);\n  }\n\n  private generateChildrenIconButton(){\n    return generateChildrenIconButton(this.size, this.disabled, this.isActive, this.danger);\n  }\n\n  private setAriaLabelText(){\n    return this.setAriaLabel ? this.setAriaLabel : this.value;\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? \"vds-menu-item--disabled\" : \"\"}>\n        <button\n          type=\"button\"\n          tabindex=\"0\"  \n          disabled={this.disabled}\n          title={this.setAriaLabelText()}\n          aria-label={this.setAriaLabelText()}\n          onClick={(evt: MouseEvent) => {\n            if (this.disabled) {\n              evt.stopPropagation();\n              evt.preventDefault();\n            } else {\n              this.handleClick(evt);\n            }\n          }}\n          class={\n            combineClasses(\n              \"vds-menu-item\",\n              `vds-menu-item--size-${this.size}`,\n              this.disabled ? \"vds-menu-item--disabled\" : \"\",\n              this.isActive || this.isSelected ? \"vds-menu-item--active\" : \"\",\n              this.danger ? \"vds-menu-item--danger\" : \"\",\n              `vds-menu-item__alignment-${this.checkmarkAlignment}`\n          )}\n        >\n          <div class=\"vds-menu-item__content\">\n            {this.checkmarkAlignment === \"start\" && this.hasCheckmark ? this.checkmarkVariant === \"checkmark\" ? this.generateCheckmarkIconButton() : this.generateCheckbox() : null}\n            {this.icon && this.generateInformativeIcon()}\n            {this.value ? this.generateLabel() : <slot></slot>}\n            {this.checkmarkAlignment === \"end\" && this.hasCheckmark ? this.checkmarkVariant === \"checkmark\" ? this.generateCheckmarkIconButton() : this.generateCheckbox() : null}\n            {this.hasChildren && this.generateChildrenIconButton()} \n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-menu-item.stories.js","sourceRoot":"","sources":["../../../src/components/menu-item/vds-menu-item.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nexport default {\n  title: 'VDS/Components/Menu/Menu-Item',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n  },\n  argTypes: {\n    size: {\n      options: ['medium', 'large'],\n      control: { type: 'select' },\n    },\n    icon: {\n      options: [...ICON_LIST, undefined],\n      control: { type: \"select\" }\n    },\n    checkmarkVariant: {\n      options: [\"checkbox\", \"checkmark\"],\n      control: { type: \"select\" }\n    },\n    checkmarkAlignment: {\n      options: [\"start\", \"end\"],\n      control: { type: \"select\" }\n    },\n  }\n};\n\nconst style = `\n<style>\n    .container {\n        width: 500px;\n        padding: 10px;\n        margin: auto;\n    }\n</style>\n`\n\nconst codeTemplate = (args) => {\n  return `\n${style}\n<div class=\"container\">\n  <vds-menu-item\n    is-active=\"${args.isActive}\"\n    size=\"${args.size}\"\n    ${args.icon ? `icon=\"${args.icon}\"` : \"\"}\n    value=\"${args.value}\"\n    set-aria-label=\"${args.setAriaLabel}\"\n    disabled=\"${args.disabled}\"\n    has-children=\"${args.hasChildren}\"\n    has-checkmark=\"${args.hasCheckmark}\"\n    checkmark-variant=\"${args.checkmarkVariant}\"\n    checkmark-alignment=\"${args.checkmarkAlignment}\"\n    danger=\"${args.danger}\"\n    is-selected=\"${args.isSelected}\"\n    link-href=\"${args.linkHref || \"\"}\"\n    link-target=\"${args.linkTarget || \"\"}\"\n    link-rel=\"${args.linkRel || \"\"}\"\n  ></vds-menu-item>\n</div>\n`;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  size: 'medium',\n  value: 'Menu item',\n  setAriaLabel: \"Menu item aria label\",\n  disabled: false,\n  icon: 'add',\n  hasCheckmark: true,\n  hasChildren: true,\n  checkmarkVariant: \"checkmark\",\n  checkmarkAlignment: \"start\",\n  isActive: false,\n  danger: false,\n  isSelected: false\n};\n\nexport const LinkUsage = codeTemplate.bind({});\n\nLinkUsage.args = {\n  linkHref: \"http://example.com\",\n  linkTarget: \"_blank\",\n  linkRel: \"noopener noreferrer\",\n  size: 'medium',\n  value: 'Menu item',\n  setAriaLabel: \"Menu item aria label\",\n  disabled: false,\n  icon: 'add',\n  hasCheckmark: true,\n  hasChildren: true,\n  checkmarkVariant: \"checkmark\",\n  checkmarkAlignment: \"start\",\n  isActive: false,\n  danger: false,\n  isSelected: false\n};\n\nLinkUsage.argTypes = {\n  linkTarget: {\n    options: [\"_self\", \"_blank\", \"_parent\", \"_top\"],\n    control: { type: \"select\" }\n  }\n}"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-menu-list.js","sourceRoot":"","sources":["../../../src/components/menu-list/vds-menu-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMnD,MAAM,OAAO,WAAW;IACtB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n@Component({\n  tag: 'vds-menu-list',\n  styleUrl: 'vds-menu-list.scss',\n  shadow: true,\n})\nexport class VdsMenuList {\n  render() {\n    return (\n      <Host>\n        <div class=\"vds__menu-list--container\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}"]}

package/dist/collection/components/notification/vds-notification-utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-notification-utils.js","sourceRoot":"","sources":["../../../src/components/notification/vds-notification-utils.tsx"],"names":[],"mappings":"","sourcesContent":["import { Colors } from '../../definitions/colors';\n\nexport type NotificationsCustomColors = {\n  background: Colors,\n  border: Colors,\n  icon: Colors\n}\n\nexport type NotificationStatus = \"informative\" | \"warning\" | \"danger\" | \"healthy\" | \"custom\";"]}

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

@@ -1 +0,0 @@
-{"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/notification/vds-notification.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-notification.stories.js","sourceRoot":"","sources":["../../../src/components/notification/vds-notification.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACX,KAAK,EAAE,oCAAoC;IAC3C,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACH,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,OAAO,EAAE,CAAC,QAAQ,EAAC,OAAO,CAAC;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,MAAM,EAAE;YACJ,OAAO,EAAE,CAAC,aAAa,EAAC,SAAS,EAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC;YAChE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;CAqBd,CAAC;AAEF,MAAM,YAAY,GAAE,CAAC,IAAI,EAAE,EAAE;IACzB,OAAO;SACF,MAAM;;;;;;mBAMI,IAAI,CAAC,OAAO;kBACb,IAAI,CAAC,MAAM;6BACA,IAAI,CAAC,eAAe;gBACjC,IAAI,CAAC,IAAI;;;;;;;;;;;mBAWN,IAAI,CAAC,OAAO;kBACb,IAAI,CAAC,MAAM;6BACA,IAAI,CAAC,eAAe;gBACjC,IAAI,CAAC,IAAI;;;;;;;;OAQlB,CAAC;AACR,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,aAAa;IACrB,eAAe,EAAC,IAAI;IACpB,IAAI,EAAE,KAAK;CACZ,CAAC;AAEF,MAAM,kBAAkB,GAAE,CAAC,IAAI,EAAE,EAAE;IAE/B,OAAO;SACF,MAAM;;;;;kBAKG,IAAI,CAAC,MAAM;6BACA,IAAI,CAAC,eAAe;gBACjC,IAAI,CAAC,IAAI;;4BAEG,IAAI,CAAC,KAAK;4BACV,IAAI,CAAC,OAAO;;;;OAIjC,CAAC;AACR,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,WAAW,CAAC,IAAI,GAAG;IAEjB,MAAM,EAAE,QAAQ;IAChB,eAAe,EAAC,IAAI;IACpB,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,cAAc;IACrB,OAAO,EAAE,iEAAiE;CAC3E,CAAC;AAGF,MAAM,iBAAiB,GAAE,CAAC,IAAI,EAAE,EAAE;IAE9B,OAAO;SACF,MAAM;;;;;;;kBAOG,IAAI,CAAC,MAAM;6BACA,IAAI,CAAC,eAAe;;4BAErB,IAAI,CAAC,KAAK;4BACV,IAAI,CAAC,OAAO;;;;;;;;;;;;kBAYtB,IAAI,CAAC,MAAM;6BACA,IAAI,CAAC,eAAe;;4BAErB,IAAI,CAAC,KAAK;4BACV,IAAI,CAAC,OAAO;;OAEjC,CAAC;AACR,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5D,iBAAiB,CAAC,IAAI,GAAG;IACvB,MAAM,EAAE,aAAa;IACrB,eAAe,EAAE,IAAI;IACrB,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,aAAa;IACpB,OAAO,EAAE,4CAA4C;CACtD,CAAC","sourcesContent":["export default {\n    title: 'VDS/Components/Notification/inline',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n      },\n    argTypes: {\n        variant: {\n            options: [\"inline\",\"toast\"],\n            control: { type: \"select\" }\n        },\n        status: {\n            options: [\"informative\",\"warning\",\"danger\", \"healthy\", \"custom\"],\n            control: { type: \"select\" }\n        },\n    },\n};\n\nconst styles = `\n.container {\n    width:60%;\n    display:block;\n    margin:10px;\n}\nh3 {\n    font-family: \"Roboto Flex\", sans-serif;\n    font-size: 1rem;\n    font-weight: 600;\n    line-height: 1.5rem;\n}\n    .notification-short {\n        max-width: 315.02px\n    }\n    .notification-long {\n        max-width: 916.58px\n    }\n    .notification-toast {\n        max-width: 323.23px\n    }\n`;\n \nconst codeTemplate =(args) => {\n    return `\n<style>${styles}</style>\n<div class=\"container\">\n    <label>Basic Notification</label>\n    <br>\n    <vds-notification\n        class=\"notification-short\"\n        variant=\"${args.variant}\"\n        status=\"${args.status}\"\n        show-close-button=\"${args.showCloseButton}\"\n        icon=\"${args.icon}\"\n    >\n        <h3 slot=\"header\">Title</h3>\n        <span slot=\"body\">It is a short content.</span>\n        <vds-link slot=\"actions\" variant=\"secondary\" value=\"Action\" size=\"extra-small\" underline=\"true\"></vds-link>\n    </vds-notification>\n    <br>\n        <label>Basic Notification</label>\n    <br>\n    <vds-notification\n        class=\"notification-long\"\n        variant=\"${args.variant}\"\n        status=\"${args.status}\"\n        show-close-button=\"${args.showCloseButton}\"\n        icon=\"${args.icon}\"\n    >\n        <h3 slot=\"header\">Title</h3>\n        <span slot=\"body\">It is a long established fact that a reader will be distracted\n        by the readable content of a page when looking at its layout.</span>\n        <vds-link slot=\"actions\" variant=\"secondary\" value=\"Action\" size=\"extra-small\" underline=\"true\"></vds-link>\n    </vds-notification>\n    <br>\n</div>`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  variant: \"inline\",\n  status: 'informative',\n  showCloseButton:true,\n  icon: 'add' \n};\n\nconst codeCustomTemplate =(args) => {\n\n    return `\n<style>${styles}</style>\n<div class=\"container\">\n    <label>Custom Notification</label>\n    <br>\n    <vds-notification\n        status=\"${args.status}\"\n        show-close-button=\"${args.showCloseButton}\"\n        icon=\"${args.icon}\"\n    >\n        <h3 slot=\"header\">${args.title}</h3>\n        <span slot=\"body\">${args.message}</span>\n        <vds-link slot=\"actions\" variant=\"secondary\" value=\"Action\" size=\"extra-small\" underline=\"true\"></vds-link>\n    </vds-notification>\n    <br>\n</div>`;\n}\n\nexport const CustomUsage = codeCustomTemplate.bind({});\nCustomUsage.args = {\n    \n  status: 'custom',\n  showCloseButton:true,\n  icon: 'add',\n  title: 'Custom title',\n  message: 'It is a long established fact that a reader will be distracted.' \n};\n\n\nconst codeToastTemplate =(args) => {\n\n    return `\n<style>${styles}</style>\n<div class=\"container\">\n    <label>Notification variant toast</label>\n    <br>\n    <vds-notification\n        class=\"notification-toast\"\n        variant=\"toast\"\n        status=\"${args.status}\"\n        show-close-button=\"${args.showCloseButton}\"\n    >\n        <h3 slot=\"header\">${args.title}</h3>\n        <span slot=\"body\">${args.message}</span>\n        <div slot=\"actions\"> \n            <vds-link variant=\"secondary\" value=\"Link 1\" size=\"extra-small\" underline=\"true\"></vds-link>\n            <vds-link variant=\"secondary\" value=\"Link 2\" size=\"extra-small\" underline=\"true\"></vds-link>\n            <vds-link variant=\"secondary\" value=\"Link 3\" size=\"extra-small\" underline=\"true\"></vds-link>\n            <vds-link variant=\"secondary\" value=\"Link 4\" size=\"extra-small\" underline=\"true\"></vds-link>\n        </div>\n    </vds-notification>\n    <br>\n    <vds-notification\n        class=\"notification-toast\"\n        variant=\"toast\"\n        status=\"${args.status}\"\n        show-close-button=\"${args.showCloseButton}\"\n    >\n        <h3 slot=\"header\">${args.title}</h3>\n        <span slot=\"body\">${args.message}</span>\n    </vds-notification>\n</div>`;\n}\n\nexport const ToastVariantUsage = codeToastTemplate.bind({});\nToastVariantUsage.args = {\n  status: 'informative',\n  showCloseButton: true,\n  icon: 'add',\n  title: 'Toast Title',\n  message: 'This is a notification with variant toast.' \n};"]}

package/dist/collection/components/popover/utils/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/popover/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAI,oQAAoQ,CAAC","sourcesContent":["export const popoverCaretFilledSmall =  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgOCA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBpZD0icG9wb3Zlci1jYXJldC1maWxsZWQtc21hbGwiIGQ9Ik0wIDBMNCA0TDggMEgwWiIgZmlsbD0iI2ZmZmZmZiIvPgo8L3N2Zz4K';"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-popover.js","sourceRoot":"","sources":["../../../src/components/popover/vds-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, State, h, Element, EventEmitter, Event, Method } from '@stencil/core';\nimport { HTMLStencilElement, Watch } from '@stencil/core/internal';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { queryElementFromShadowRoot } from '../../utils/node-utils';\n@Component({\n  tag: 'vds-popover',\n  styleUrl: 'vds-popover.scss',\n  shadow: true,\n})\n\nexport class VdsPopover {\n  \n  @Element() hostEl: HTMLElement;\n  /** Defines the position where the popover will be opened */\n  @Prop({mutable: true}) position: 'top' | 'bottom' | 'right' | 'left' = 'bottom';\n  /** Sets the maximum width of the popover’s content */\n  @Prop({mutable: true}) maxWidth: string;\n  /** Sets the maximum height of the popover’s content */\n  @Prop({mutable: true}) maxHeight: string;\n  /** The type of event that will trigger the popover */\n  @Prop({mutable: true}) event: 'hover' | 'click' = 'click';\n  /** Toggles padding inside popover. */\n  @Prop({mutable: true}) padding: 'default' | 'none' = 'default';\n  /** Toggles the floating container auto-positioning based on available window space. \n   * False by default as it may cause positioning issues in some situations, use with caution \n   */\n  @Prop({mutable: true}) autoPosition: boolean = false;\n\n  @State() popupOpened: boolean = false;\n  \n  /** Emits event when popover gets opens */\n  @Event() opened: EventEmitter<void>;\n  /** Emits event when popover gets closes */\n  @Event() closed: EventEmitter<void>;\n\n  private floatingCleanUp: () => void;\n\n  constructor() {\n    this.floatingCleanUp = () => { };\n  }\n\n  @Watch(\"popupOpened\")\n  async emitValue(): Promise<void> {\n    if (this.popupOpened){\n      this.opened.emit();\n      this.popoverElementRef.style.display = 'inline-flex';\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.popoverElementRef, this.arrowElementRef, this.position, this.autoPosition);\n    }\n    else{\n      this.closed.emit();\n      this.popoverElementRef.style.display = 'none';\n      this.floatingCleanUp();\n    } \n  }\n\n  /* Close the popover when click outside */\n  @Listen('click', { target: 'window' })\n  private handleClickOut(evt: MouseEvent): void {\n    const isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside) {\n      this.popupOpened = false;      \n    }\n  }\n\n  /* Open the popover with click on the trigger element  */\n  @Listen('click')\n  handleClick(event: Event): void {\n    if (this.event === 'click') {\n      const clickedElement = event.target as HTMLElement;\n      if (clickedElement) {\n        this.popupOpened = true;\n      }\n    }\n  }\n\n  /* Open the popover from other element  */ \n  @Method()\n  public async open(): Promise<void> {\n    this.popupOpened = true;\n  }\n\n  /* Close the popover from other element  */\n  @Method()\n  public async close(): Promise<void> {\n    this.popupOpened = false;\n  }\n  /**\n   *  Gets the target that will manage the popover\n   *  returns a promise with the target HTMLElement.\n   */\n  @Method()\n  public async getTarget(): Promise<HTMLElement | null> {\n    return document.querySelector('.vds__popover-container') as HTMLElement;\n  }\n\n  private handleHover(event: Event): void {\n    if (this.event === 'hover') {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.popupOpened = true;\n      }\n    }\n  }\n  private handleHoverOut(event: Event): void {\n    if (this.event === 'hover') {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.popupOpened = false; \n      }\n    }\n  }\n\n  private setPadding(){\n    return {'--popover-padding': this.padding === 'none' ? '0' : 'var(--spacing-06) var(--spacing-05) var(--spacing-06) var(--spacing-05)'}\n  }\n  private setMaxWidthAndHeight(){\n    return {'--popover-max-width': this.maxWidth, '--popover-max-height': this.maxHeight} \n  }\n  \n  private actionElementRef: HTMLElement;\n  private arrowElementRef: HTMLElement;\n  private popoverElementRef: HTMLElement;\n  \n  componentDidLoad() {\n    this.actionElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__popover-trigger');\n    this.arrowElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__popover-arrow');\n    this.popoverElementRef = queryElementFromShadowRoot(this.hostEl, '.vds__popover-container');\n\n    window.addEventListener('click', this.handleClickOut.bind(this));\n    if (this.event === 'click') {\n      this.actionElementRef.addEventListener('click', this.handleClick.bind(this)); \n    } else if (this.event === 'hover') {\n      this.actionElementRef.addEventListener('mouseenter', this.handleHover.bind(this));\n      this.actionElementRef.addEventListener('mouseleave', this.handleHoverOut.bind(this));\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('click', this.handleClickOut.bind(this));\n    if (this.event === 'click') {\n      this.actionElementRef.removeEventListener('click', this.handleClick.bind(this));\n    } else if (this.event === 'hover') {\n      this.actionElementRef.removeEventListener('mouseenter', this.handleHover.bind(this));\n      this.actionElementRef.removeEventListener('mouseleave', this.handleHoverOut.bind(this));\n    }\n  }  \n\n  render(): HTMLStencilElement { \n    return (\n      <Host style={this.setMaxWidthAndHeight()}>\n        <div class=\"vds__popover-trigger\"\n          onClick={(evt: MouseEvent) => {\n              this.handleClick(evt);              \n          }}\n          ref={(triggerEl) => { if(triggerEl)this.actionElementRef = triggerEl; }}\n        >\n          <slot name=\"popover-trigger\"></slot>\n        </div>\n        <div\n          class=\"vds__popover-container\" \n          style={this.setPadding()}\n          ref={(popoverEl) => {  if(popoverEl)this.popoverElementRef = popoverEl; }}\n        >          \n          <slot name=\"popover-content\"></slot>\n          <div class=\"vds__popover-arrow\" ref={(popoverArrowEl) => {  if(popoverArrowEl)this.arrowElementRef = popoverArrowEl; }}>\n            <svg class=\"vds__popover-arrow-img\" width=\"8\" height=\"4\" viewBox=\"0 0 8 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path id=\"popover-caret-filled-small\" d=\"M0 0L4 4L8 0H0Z\" fill=\"var(--surface-neutral-default)\"/>\n            </svg>\n          </div>\n        </div>  \n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/popover/vds-popover.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-popover.stories.js","sourceRoot":"","sources":["../../../src/components/popover/vds-popover.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC;YAC3C,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,KAAK,EAAE;YACL,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC;YAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;;CAOd,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;SACA,MAAM;;;;aAIF,IAAI,CAAC,KAAK;iBACN,IAAI,CAAC,QAAQ;kBACZ,IAAI,CAAC,SAAS;eACjB,IAAI,CAAC,OAAO;gBACX,IAAI,CAAC,QAAQ;qBACR,IAAI,CAAC,YAAY;;;;;;;;;;;;;KAajC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,OAAO;IACjB,SAAS,EAAE,OAAO;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,YAAY,EAAE,KAAK;CACpB,CAAC","sourcesContent":["export default {\n  title: 'VDS/Components/Popover',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n  },\n  argTypes: {\n    position: {\n      options: ['left', 'right', 'top', 'bottom'],\n      control: { type: 'select' },\n    },\n    event: {\n      options: ['click', 'hover'],\n      control: { type: 'select' },\n    },\n    padding: {\n      options: ['default', 'none'],\n      control: { type: 'select' },\n    },\n  }\n};\n\nconst styles = `\n    .container {\n        position: relative;\n        background-color: gray;\n        padding:150px;\n        text-align:center\n    }    \n`;\n\nconst codeTemplate = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n  <vds-popover \n    id=\"demos-popover\"\n    event=\"${args.event}\"\n    max-width=\"${args.maxWidth}\"\n    max-height=\"${args.maxHeight}\"\n    padding=\"${args.padding}\"\n    position=\"${args.position}\"\n    auto-position=\"${args.autoPosition}\"\n  >\n    <button slot=\"popover-trigger\"\n    value=\"click me\" \n    style=\"color:black;width:100px;height:50px\"\n    >\n    click me\n    </button>\n    <div slot=\"popover-content\">\n      <span style=\"color: var(--color-text-medium);\">whatever content</span>\n    </div>\n  </vds-popover>\n</div>\n    `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  position: 'bottom',\n  maxWidth: '100px',\n  maxHeight: '100px',\n  padding: 'default',\n  event: 'click',\n  autoPosition: false\n};"]}

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

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-progress-linear.js","sourceRoot":"","sources":["../../../src/components/progress-linear/vds-progress-linear.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Watch, h } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-progress-linear',\n  styleUrl: 'vds-progress-linear.scss',\n  shadow: true,\n})\nexport class VdsProgressLinear {\n  /** Sets the percentage filled number for determinate mode from 0 to 100 */\n  @Prop() value: number;\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  @Prop() status: \"error\" | \"success\" | \"default\" = \"default\";\n  /** Sets the loop duration time for the indeterminate loop progress in miliseconds */\n  @Prop() duration: number = 500;\n  /** Sets the aria label in badge */\n  @Prop() setAriaLabel: string;\n  /** Sets the progress indicator color from the Volt palette \n   * backgroundProgress - ThemeColors\n   * backgroundTrack - ThemeColors */\n  @Prop() colors: { [key: string]: string } | string;\n\n  private customColors = false;\n\n  /** \n   * Returns the percentage value to set as percentage\n   * When value is lower than 0, then returns 0.\n   * When value is greater than 100, then 0.\n   * else set value.\n   * \n   * @returns { width: string }\n   */\n  setProgress(): { width: string } {\n    const percentage = this.value > 100 ? 100 : this.value < 0 ? 0 : this.value;\n    return { width: `${percentage}%` };\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 left to right using the value as the progress\n   * \n   * @returns { animation: string }\n   */\n  @Watch(\"duration\")\n  setDurationAnimation(): { animation: string } | {} {\n    if (this.duration > 0) {\n      return { animation: `fillTrack ${this.duration}ms ease-in-out infinite`};\n    }\n\n    return {};\n  }\n\n  /**\n   * Sets the styles for the progress bar.\n   *\n   * @private\n   * @returns {Object} An object containing the CSS styles for the progress bar.\n   */\n  private setProgressStyles() {\n    let style = {};\n\n    style = {...style, ...this.setProgress()} ;\n    style = {...style, ...this.setDurationAnimation()};\n    style[\"--progress-linear-starting-animation\"] = this.setProgress().width;\n\n    return style;\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() {\n    const style = {};\n    const colors = typeof this.colors === \"string\" ? JSON.parse(this.colors) : this.colors;\n    this.customColors = false;\n\n    if (colors && colors[\"backgroundTrack\"]) {\n      style[\"--progress-linear-background-track\"] = `var(--${colors[\"backgroundTrack\"]})`;\n      this.customColors = true;\n    }\n\n    if (colors && colors[\"backgroundProgress\"]) {\n      style[\"--progress-linear-background-track-fill\"] = `var(--${colors[\"backgroundProgress\"]})`;\n      this.customColors = true;\n    }\n\n    return style;\n  }\n\n  render() {\n    return (\n      <Host style={this.setCustomColors()}>\n        <div class={combineClasses(\n          \"vds-progress-linear__container\",\n          this.customColors ? \"vds-progress-linear__container--custom-colors\" : \"vds-progress-linear__container--default-colors\"\n        )}>\n          <div class={combineClasses(\"vds-progress-linear__track\", `vds-progress-linear__track--${this.status}`)}></div>\n          <div\n            style={this.setProgressStyles()}\n            class={combineClasses(\n              \"vds-progress-linear__track-fill\",\n              `vds-progress-linear__track-fill--${this.status}`\n            )}></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-progress-linear.stories.js","sourceRoot":"","sources":["../../../src/components/progress-linear/vds-progress-linear.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACX,KAAK,EAAE,2CAA2C;IAClD,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;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;;;CAG9B,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,2BAA2B;IACzC,QAAQ,EAAE,CAAC;CACd,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;;;CAG9B,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,2BAA2B;IACzC,QAAQ,EAAE,GAAG;CAChB,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;;;;CAI9B,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,2BAA2B;IACzC,QAAQ,EAAE,GAAG;CAChB,CAAA","sourcesContent":["export default {\n    title: 'VDS/Components/Progress Indicators/Linear',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n      },\n    argTypes: {\n        status: {\n            options: [ \"error\", \"success\", \"default\"],\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-progress-linear\n      value=\"${args.value}\"\n      status=\"${args.status}\"\n      set-aria-label=\"${args.setAriaLabel}\"\n      duration=\"${args.duration}\"\n    ></vds-progress-linear>\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 Linear\",\n    duration: 0,\n}\n\n\nconst codeAnimationWithDurationTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<div class=\"content\">\n    <vds-progress-linear\n      value=\"${args.value}\"\n      status=\"${args.status}\"\n      set-aria-label=\"${args.setAriaLabel}\"\n      duration=\"${args.duration}\"\n    ></vds-progress-linear>\n</div>\n`;\n}\n\nexport const AnimationUsage = codeAnimationWithDurationTemplate.bind({});\n\nAnimationUsage.args = {\n    value: 30,\n    status: \"default\",\n    setAriaLabel: \"I'm a vds progress Linear\",\n    duration: 500,\n}\n\nconst codeCustomColorsTemplate = (args) => {\n    return `\n<style>\n    ${styles}\n</style>\n<div class='content'>\n    <vds-progress-linear\n      value='${args.value}'\n      status='${args.status}'\n      set-aria-label='${args.setAriaLabel}'\n      duration='${args.duration}'\n      colors='{\"backgroundTrack\": \"color-background-caution-default\", \"backgroundProgress\": \"color-background-healthy-default\"}'\n    ></vds-progress-linear>\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 Linear\",\n    duration: 500,\n}\n"]}

package/dist/collection/components/radio-button/vds-radio-button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/vds-radio-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, AttachInternals, EventEmitter, Event, Watch, Method } from '@stencil/core';\nimport { getIconSize } from '../../utils/icon-attr.utils';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { RadioButtonChecked } from './vds-radio-button.utils';\n\n@Component({\n  tag: 'vds-radio-button',\n  styleUrl: 'vds-radio-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsRadioButton {\n\n  /** Defines the size of the radio */ \n  @Prop({ mutable: true, reflect: true }) size: \"large\" | \"medium\" = \"medium\";\n  /** Sets the radio in checked state */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Sets the radio in disabled state */\n  @Prop({ mutable: true }) disabled: boolean = false;\n  /** Sets the radio in error state */\n  @Prop({ mutable: true, reflect: true }) error: boolean = false;\n  /** It’s useful for identifying in a radio group */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  /** Aligns the label in relation to the radio-button*/\n  @Prop() labelAlignment: \"start\" | \"end\" = \"end\";\n  /** Sets the text to be shown in the radio-button */\n  @Prop({ reflect: true, mutable: true }) labelValue: string;\n\n  @Element() hostEl: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /** Makes a custom change to target property using checked (use for React components) */\n  @Event() check: EventEmitter<boolean>;\n  /** Emits radio button checked value */\n  @Event() radioCheck: EventEmitter<RadioButtonChecked>;\n\n  private state: \"checked\" | \"unchecked\" = \"unchecked\";\n\n  componentWillRender(): void {\n    this.setRadioState();\n  }\n\n  componentDidLoad(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time checked value changes.\n   * Sets form value in order to work properly with native forms\n   *\n   * @returns void\n   */\n  @Watch(\"checked\")\n  setCheckedStates(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time the radio-button is being click.\n   *\n   * @param event - MouseEvent\n   * @returns void\n   */\n\thandleClick(_: MouseEvent): void {\n    if (!this.disabled) {\n      this.checked = true;\n      this.emitValues();\n    }\n\t}\n\n   /**\n   * Toggles radio-button value. \n   * When parameter is not provided, if true get set to false. When false get set to true.\n   * Emits check event with checked value.\n   *\n   * @param checked - Boolean (Optional)\n   * @returns Promise<void>\n   */\n  @Method()\n  toggleCheck(checked: boolean = undefined): Promise<void> {\n    if (!this.disabled) {\n\t\t\tthis.checked = checked === undefined ? !this.checked : checked;\n      this.emitValues()\n\t\t}\n    return Promise.resolve();\n  }\n\n  /**\n   * Emits event values when radio button state changed.\n   * Emits check event with checked prop.\n   * Emits input event with value prop.\n   *\n   * @returns void\n   */\n  private emitValues(): void {\n    const inputEvent = new InputEvent(\"input\");\n    this.value = this.value ? this.value : this.checked.toString();\n    this.check.emit(this.checked);\n    this.radioCheck.emit({\n      checked: this.checked,\n      value: this.value,\n      element: this.hostEl as HTMLVdsRadioButtonElement\n    });\n    this.hostEl.dispatchEvent(inputEvent);\n  }\n\n  /**\n   * Determine state of the radio based on the checked property.\n   * When checked is true, state is checked.\n   * When checked is false, state is unchecked.\n   *\n   * @returns void\n   */\n  private setRadioState(): void {\n    this.state = this.checked ? \"checked\" : \"unchecked\";\n  }\n\n  /**\n   * Returns the icon prop based on the state and calculate the size.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderRadioButton(): HTMLStencilElement {\n    const size = getIconSize(this.size);\n    switch(this.state) {\n      case \"checked\":\n        return <vds-icon class=\"radio-button-icon radio-button-icon-checked\" svgIcon={`radio-checked`} size={size}></vds-icon>;\n      default:\n        return <vds-icon class=\"radio-button-icon\" svgIcon={`radio-unchecked`} size={size}></vds-icon>;\n    }\n  }\n\n   /**\n   * Returns the vds-label for the radio-button when there is a label provided.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderLabel(): HTMLStencilElement {\n    return <vds-label\n      class={\"radio-button-label\"}\n      labelValue={this.labelValue}\n      size={this.size}\n      disabled={this.disabled}></vds-label>\n  }\n\n  render() {\n    return (\n      <Host state={this.state} class={this.disabled ? \"vds-radio-button--disabled\" : \"\"}>\n        <div\n          onClick={(evt): void => {this.handleClick(evt)}}\n          class={combineClasses(\n            \"vds-radio-button__container\",\n            `vds-radio-button__container--size-${this.size}`,\n            `vds-radio-button__container--label-alignment-${this.labelAlignment}`,\n            this.checked ? \"vds-radio-button--checked\" : \"\",\n            this.disabled ? \"vds-radio-button--disabled\" : \"\",\n            this.error ? \"vds-radio-button--error\" : \"\"\n          )}\n        >\n          <div class=\"vds-radio-button\">\n            <input\n              type={\"radio\"}\n              checked={this.checked}\n              value={this.value}\n              id={this.hostEl?.id}\n              disabled={this.disabled} />\n            {this.renderRadioButton()}\n          </div>\n          {this.labelValue && this.renderLabel()}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/radio-button/vds-radio-button.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/vds-radio-button.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACX,KAAK,EAAE,mCAAmC;IAC1C,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACH,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC;YACzB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;CAKd,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1B,OAAO;SACF,MAAM;;;gBAGC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,UAAU;mBACnB,IAAI,CAAC,OAAO;oBACX,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,KAAK;2BACA,IAAI,CAAC,cAAc;;;;CAI7C,CAAC;AACF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IACd,IAAI,EAAE,QAAQ;IACd,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,KAAK;IACZ,cAAc,EAAE,KAAK;CACxB,CAAA","sourcesContent":["export default {\n    title: 'VDS/Components/Radios/RadioButton',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n      },\n    argTypes: {\n        size: {\n            options: [\"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n        labelAlignment: {\n            options: [\"start\", \"end\"],\n            control: { type: \"select\" }\n        },\n    },\n};\n\nconst styles = `\n    div {\n       margin: 20px;\n       width: 400px; \n    }\n`;\n \nconst codeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<div>\n    <vds-radio-button\n        size=\"${args.size}\"\n        label-value=\"${args.labelValue}\"\n        checked=\"${args.checked}\"\n        disabled=\"${args.disabled}\"\n        error=\"${args.error}\"\n        label-alignment=\"${args.labelAlignment}\"\n    >\n    </vds-radio-button>\n</div>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    size: \"medium\",\n    labelValue: \"Label 1\",\n    checked: false,\n    disabled: false,\n    error: false,\n    labelAlignment: \"end\"\n}"]}

package/dist/collection/components/radio-button/vds-radio-button.utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-radio-button.utils.js","sourceRoot":"","sources":["../../../src/components/radio-button/vds-radio-button.utils.ts"],"names":[],"mappings":"","sourcesContent":["export interface RadioButtonChecked {\n    checked: boolean,\n    value: string,\n    element: HTMLVdsRadioButtonElement\n}\n"]}

package/dist/collection/components/segmented-button/vds-segmented-button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-segmented-button.js","sourceRoot":"","sources":["../../../src/components/segmented-button/vds-segmented-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAQ7D,MAAM,OAAO,kBAAkB;IAL/B;QAQE,8CAA8C;QACrB,aAAQ,GAAY,KAAK,CAAC;QACnD,8CAA8C;QACtC,iBAAY,GAAY,KAAK,CAAC;QACtC,iDAAiD;QACxB,aAAQ,GAAY,KAAK,CAAC;QAGnD,uFAAuF;QAC/E,cAAS,GAAY,KAAK,CAAA;KAgEnC;IApDC,aAAa;QACX,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACvB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED,WAAW,CAAC,GAAe;QACzB,GAAG,CAAC,cAAc,EAAE,CAAC;QAErB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;YAC/B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;IACJ,CAAC;IAED,uBAAuB;QACrB,OAAO,CACL,gBACE,KAAK,EAAE,wCAAwC,cACrC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAC5E,IAAI,EAAE,SAAS,EACf,GAAG,EAAE,IAAI,CAAC,KAAK,GACf,CACH,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,cAAc,CACnB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,EAAE,EACrD,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE,CACzD;YAED,+DACE,KAAK,EAAE,cAAc,CACnB,sBAAsB,EACtB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,EAAE,EACrD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,EAAE,CACpD,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,GAAG,EAAQ,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;gBAE5C,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,IAAI,CAAC,uBAAuB,EAAE;gBACjG,6DAAM,KAAK,EAAE,4BAA4B,IAAG,8DAAa,CAAQ,CAC1D,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element, Watch } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-segmented-button',\n  styleUrl: 'vds-segmented-button.scss',\n  shadow: true,\n})\nexport class VdsSegmentedButton {\n  /** Sets the icon at the left of the segment button */\n  @Prop() informativeIcon: string\n  /** Sets the segment button in active state */\n  @Prop({ reflect: true }) isActive: boolean = false;\n  /** When is-active is true, shows checkmark */\n  @Prop() hasCheckmark: boolean = false;\n  /** Set the segmented-button to disabled state */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Set the segmented-button value */\n  @Prop({ reflect: true }) value: string;\n  /** Allows the component to be adaptable to the container available horizontal space */\n  @Prop() fullWidth: boolean = false\n\n  /** Emits event when item gets clicked */\n  @Event() segmentedButtonClicked: EventEmitter<{ value: string, selected: boolean }>;\n  /** Emits event when item is selected */\n  @Event() selected: EventEmitter<void>;\n  /** Emits event when item is deselected */\n  @Event() deselected: EventEmitter<void>;\n\n  @Element() hostEl: HTMLElement;\n\n  @Watch(\"isActive\")\n  setActiveProp(): void {\n    if (this.isActive) {\n      this.selected.emit();\n    } else {\n      this.deselected.emit();\n    }\n  }\n\n  handleClick(evt: MouseEvent): void {\n    evt.preventDefault();\n\n    this.segmentedButtonClicked.emit({\n      value: this.value,\n      selected: this.isActive\n    })\n  }\n\n  generateInformativeIcon(): HTMLStencilElement {\n    return (\n      <vds-icon\n        class={\"vds-segmented-button__informative-icon\"}\n        svg-icon={this.isActive && this.hasCheckmark ? \"good\" : this.informativeIcon}\n        size={\"1.25rem\"}\n        alt={this.value}\n      />\n    )\n  }\n\n  render() {\n    return (\n      <Host\n        class={combineClasses(\n          this.disabled ? \"vds-segmented-button--disabled\" : \"\",\n          this.fullWidth ? \"vds-segmented-button--full-width\" : \"\",\n        )}\n      >\n        <button\n          class={combineClasses(\n            \"vds-segmented-button\",\n            this.disabled ? \"vds-segmented-button--disabled\" : \"\",\n            this.isActive ? \"vds-segmented-button--active\" : \"\",\n          )}\n          title={this.value}\n          disabled={this.disabled}\n          onClick={(evt): void => this.handleClick(evt)}\n        >\n          {(this.informativeIcon || (this.isActive && this.hasCheckmark)) && this.generateInformativeIcon()}\n          <span class={\"vds-segmented-button__text\"}>{<slot></slot>}</span>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/segmented-button/vds-segmented-button.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-segmented-button.stories.js","sourceRoot":"","sources":["../../../src/components/segmented-button/vds-segmented-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,SAAS,GAAG,sBAAsB,EAAE,CAAC;AAG3C,eAAe;IACX,KAAK,EAAE,2CAA2C;IAClD,UAAU,EAAE;QACR,IAAI,EAAE;YACF,GAAG,EAAE,IAAI;SACZ;KACJ;IACD,QAAQ,EAAE;QACN,eAAe,EAAE;YACb,OAAO,EAAE,CAAC,GAAG,SAAS,EAAE,SAAS,CAAC;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,IAAI,EAAE;YACF,OAAO,EAAE,CAAC,GAAG,SAAS,EAAE,SAAS,CAAC;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;CAMd,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC5B,OAAO;SACE,MAAM;;;iBAGE,IAAI,CAAC,KAAK;UACjB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,EAAE;qBAC7D,IAAI,CAAC,QAAQ,IAAI,KAAK;yBAClB,IAAI,CAAC,YAAY,IAAI,KAAK;oBAC/B,IAAI,CAAC,QAAQ,IAAI,KAAK;sBACpB,IAAI,CAAC,SAAS,IAAI,KAAK;;MAEvC,IAAI,CAAC,KAAK;;;CAGf,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IACd,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,QAAQ;IACf,eAAe,EAAE,MAAM;IACvB,YAAY,EAAE,KAAK;IACnB,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,KAAK;CACnB,CAAC;AAEF,MAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE;IAChC,OAAO;SACE,MAAM;;;iBAGE,IAAI,CAAC,KAAK;qBACN,IAAI,CAAC,QAAQ,IAAI,KAAK;yBAClB,IAAI,CAAC,YAAY,IAAI,KAAK;oBAC/B,IAAI,CAAC,QAAQ,IAAI,KAAK;;8BAEZ,IAAI,CAAC,IAAI;;;CAGtC,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEnD,SAAS,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,MAAM;IACZ,YAAY,EAAE,KAAK;IACnB,QAAQ,EAAE,KAAK;CAClB,CAAC;AAEF,MAAM,wBAAwB,GAAG,IAAI,CAAC,EAAE;IACxC,OAAO;;EAEL,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgCS,IAAI,CAAC,KAAK;4BACC,IAAI,CAAC,eAAe;qBAC3B,IAAI,CAAC,QAAQ,IAAI,KAAK;yBAClB,IAAI,CAAC,YAAY,IAAI,KAAK;oBAC/B,IAAI,CAAC,QAAQ,IAAI,KAAK;;;;CAIzC,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEnE,iBAAiB,CAAC,IAAI,GAAG;IACrB,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,UAAU;IACjB,eAAe,EAAE,kBAAkB;IACnC,YAAY,EAAE,KAAK;IACnB,QAAQ,EAAE,KAAK;CAClB,CAAC","sourcesContent":["import { getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\n\nexport default {\n    title: 'VDS/Components/Segmented/Segmented-button',\n    parameters: {\n        docs: {\n            toc: true,\n        }\n    },\n    argTypes: {\n        informativeIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n        icon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n    }\n};\n  \nconst styles = `\n    .container {\n        width: 500px;\n        padding: 10px;\n        margin: auto;\n    }    \n`;\n  \nconst codeTemplate = args => {\nreturn `\n<style>${styles}</style>\n<div class=\"container\">\n    <vds-segmented-button\n        value=\"${args.value}\"\n        ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"` : \"\"}\n        is-active=\"${args.isActive || false}\"\n        has-checkmark=\"${args.hasCheckmark || false}\"\n        disabled=\"${args.disabled || false}\"\n        full-width=\"${args.fullWidth || false}\"\n        >\n    ${args.value}\n    </vds-segmented-button>\n</div>\n`;\n};\n  \nexport const BasicUsage = codeTemplate.bind({});\n  \nBasicUsage.args = {\n    disabled: false,\n    value: 'Text 1',\n    informativeIcon: 'bell',\n    hasCheckmark: false,\n    isActive: false,\n    fullWidth: false,\n};\n\nconst codeIconTemplate = args => {\nreturn `\n<style>${styles}</style>\n<div class=\"container\">\n    <vds-segmented-button\n        value=\"${args.value}\"\n        is-active=\"${args.isActive || false}\"\n        has-checkmark=\"${args.hasCheckmark || false}\"\n        disabled=\"${args.disabled || false}\"\n    >\n        <vds-icon svg-icon=\"${args.icon}\"></vds-icon>\n    </vds-segmented-button>\n</div>\n`;\n};\n    \nexport const IconUsage = codeIconTemplate.bind({});\n    \nIconUsage.args = {\n    disabled: false,\n    value: 'Text 1',\n    icon: 'bell',\n    hasCheckmark: false,\n    isActive: false,\n};\n  \nconst customColorsCodeTemplate = args => {\nreturn `\n<style>\n${styles}\n.custom-segmented-button {\n    --vds-segmented-button-background: #FFFFFF00;\n    --vds-segmented-button-border: var(--radius-medium);\n    --vds-segmented-button-text-color: #28a745;\n    --vds-segmented-button-icon-color: #28a745;\n\n    --vds-segmented-button-disabled-background: #FFFFFF00;\n    --vds-segmented-button-disabled-border: var(--radius-medium);\n    --vds-segmented-button-disabled-text-color: #888888;\n    --vds-segmented-button-disabled-icon-color: #AAAAAA;\n\n    --vds-segmented-button-active-background: #c3e6cb;\n    --vds-segmented-button-active-border: var(--radius-medium);\n    --vds-segmented-button-active-text-color: #28a745;\n    --vds-segmented-button-active-icon-color: #28a745;\n\n    --vds-segmented-button-hover-background: #c3e6cb;\n    --vds-segmented-button-hover-border: var(--radius-medium);\n    --vds-segmented-button-hover-text-color: #28a745;\n    --vds-segmented-button-hover-icon-color: #28a745;\n\n    --vds-segmented-button-focus-background: transparent;\n    --vds-segmented-button-focus-border: var(--radius-medium);\n    --vds-segmented-button-focus-text-color: #333333;\n    --vds-segmented-button-focus-icon-color: #555555;\n}\n</style>\n\n<div class=\"container\">\n    <vds-segmented-button\n        class=\"custom-segmented-button\"\n        value=\"${args.value}\"    \n        informative-icon=\"${args.informativeIcon}\"\n        is-active=\"${args.isActive || false}\"\n        has-checkmark=\"${args.hasCheckmark || false}\"\n        disabled=\"${args.disabled || false}\"\n        >\n    </vds-segmented-button>\n</div>\n`;\n};\n      \nexport const CustomColorsUsage = customColorsCodeTemplate.bind({});\n    \nCustomColorsUsage.args = {\n    disabled: false,\n    value: 'Button 1',\n    informativeIcon: 'desktop-computer',\n    hasCheckmark: false,\n    isActive: false,\n};\n      "]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-sheet.js","sourceRoot":"","sources":["../../../src/components/sheet/vds-sheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Method, EventEmitter, Event, Watch, Listen, Element } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-sheet',\n  styleUrl: 'vds-sheet.scss',\n  shadow: true,\n})\nexport class VdsSheet {\n  /** Create a backdrop that allow's to close the bottom sheet by clicking outside. */\n  @Prop() backdrop: boolean = false;\n  /** Open / Close the bottom sheet. */\n  @Prop({ mutable: true }) opened: boolean = false;\n  /** Sets the height of the bottom sheet (any CSS height value: auto, 50%, 400px, etc.) */\n  @Prop() height: string = 'auto';\n  /** Allow drag handle interaction to close the bottom sheet. */\n  @Prop() hideDragHandle: boolean = false;\n\n  /** Emits event when bottom-sheet is opened */\n  @Event() bottomsheetOpened: EventEmitter<void>;\n  /** Emits event when bottom-sheet is closed */\n  @Event() bottomsheetClosed: EventEmitter<void>;\n\n  @Element() el: HTMLElement;\n\n  private dragStartY: number = 0;\n  private isDragging: boolean = false;\n  private dragThreshold: number = 50; // px threshold to close bottom sheet\n\n  @Watch('opened')\n  emitValue(): void {\n    if (this.opened) {\n      this.bottomsheetOpened.emit();\n    } else {\n      this.bottomsheetClosed.emit();\n    }\n  }\n\n  /** Listen for Escape key to close the bottom sheet */\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && this.opened) {\n      this.close();\n    }\n  }\n\n  /**\n   * Trigger open the bottomsheet\n   * @returns Promise that resolves when the bottomsheet is opened\n   */\n  @Method()\n  async open(): Promise<void> {\n    this.opened = true;\n  }\n\n  /**\n   * Trigger closes the bottomsheet\n   * @returns Promise that resolves when the bottomsheet is closed\n   */\n  @Method()\n  async close(): Promise<void> {\n    this.opened = false;\n  }\n\n  /**\n   * Handle drag interactions to close the bottom sheet.\n   */\n  private handleDragStart = (event: TouchEvent | MouseEvent): void => {\n    if (this.hideDragHandle) return;\n\n    this.isDragging = true;\n    this.dragStartY = this.getClientY(event);\n\n    if ('touches' in event) {\n      document.addEventListener('touchmove', this.handleDragMove, { passive: false });\n      document.addEventListener('touchend', this.handleDragEnd);\n    } else {\n      document.addEventListener('mousemove', this.handleDragMove);\n      document.addEventListener('mouseup', this.handleDragEnd);\n    }\n\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n  };\n\n  private handleDragMove = (event: TouchEvent | MouseEvent): void => {\n    if (!this.isDragging || this.hideDragHandle) return;\n\n    const currentY = this.getClientY(event);\n    const deltaY = currentY - this.dragStartY;\n\n    // Only allow dragging downward (positive deltaY)\n    if (deltaY > 0) {\n      const container = this.el.shadowRoot?.querySelector('.vds-sheet__container') as HTMLElement;\n      if (container) {\n        container.style.transform = `translateY(${deltaY}px)`;\n      }\n    }\n\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n  };\n\n  private handleDragEnd = (event: TouchEvent | MouseEvent): void => {\n    if (!this.isDragging || this.hideDragHandle) return;\n\n    const currentY = this.getClientY(event);\n    const deltaY = currentY - this.dragStartY;\n    const container = this.el.shadowRoot?.querySelector('.vds-sheet__container') as HTMLElement;\n\n    if (container) {\n      container.style.transform = '';\n\n      if (deltaY > this.dragThreshold) {\n        this.close();\n      }\n    }\n\n    document.removeEventListener('touchmove', this.handleDragMove);\n    document.removeEventListener('touchend', this.handleDragEnd);\n    document.removeEventListener('mousemove', this.handleDragMove);\n    document.removeEventListener('mouseup', this.handleDragEnd);\n\n    this.isDragging = false;\n    this.dragStartY = 0;\n  };\n\n  private getClientY(event: TouchEvent | MouseEvent): number {\n    if ('touches' in event) {\n      const touch = event.touches[0] || event.changedTouches[0];\n      return touch.clientY;\n    }\n    return event.clientY;\n  }\n\n  /**\n   * Get the style for the container based on the height prop\n   * If the height is a percentage, it converts it to viewport height.\n   */\n  private getContainerStyle(): { [key: string]: string } {\n    if (this.height === 'auto') {\n      return {};\n    }\n    if (this.height.includes('%')) {\n      const percentValue = parseFloat(this.height);\n      return { height: `${percentValue}vh` };\n    }\n\n    return { height: this.height };\n  }\n\n  private renderBackdrop(): HTMLStencilElement {\n    return <div class={combineClasses('vds-sheet__backdrop', this.opened ? 'vds-sheet__backdrop--visible' : '')} onClick={() => this.close()}></div>;\n  }\n\n  private renderDragHandle(): HTMLStencilElement {\n    if (this.hideDragHandle) return null;\n\n    return (\n      <div class=\"vds-sheet__drag-handle\" onTouchStart={this.handleDragStart} onMouseDown={this.handleDragStart}>\n        <div class=\"vds-sheet__drag-handle-bar\"></div>\n      </div>\n    );\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host role=\"dialog\" aria-hidden={!this.opened ? 'true' : 'false'} aria-modal={this.opened ? 'true' : 'false'} class={this.opened ? 'vds-sheet--opened' : 'vds-sheet--closed'}>\n        {this.backdrop && this.renderBackdrop()}\n        <div class={combineClasses('vds-sheet__container', this.opened ? 'vds-sheet__container--opened' : '')} style={this.getContainerStyle()}>\n          {this.renderDragHandle()}\n          <div class=\"vds-sheet__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/sheet/vds-sheet.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-sheet.stories.js","sourceRoot":"","sources":["../../../src/components/sheet/vds-sheet.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,uFAAuF;SAC7F;KACF;CACF,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;CAMd,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;SACA,MAAM;;;;;;;;;;;kBAWG,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,cAAc;kBAC7B,IAAI,CAAC,MAAM;;;;;;;;KAQxB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,IAAI;IACd,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,MAAM;CACf,CAAC;AAEF,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;CAuBlB,CAAC;AAEF,MAAM,uBAAuB,GAAG,IAAI,CAAC,EAAE;IACrC,OAAO;SACA,UAAU;;;;;;;;;;;kBAWD,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,cAAc;kBAC7B,IAAI,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6CxB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5D,WAAW,CAAC,IAAI,GAAG;IACjB,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,IAAI;IACd,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,KAAK;CACd,CAAC;AAEF,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BpB,CAAC;AAEF,MAAM,uBAAuB,GAAG,IAAI,CAAC,EAAE;IACrC,OAAO;SACA,YAAY;;;;;;;;;;;kBAWH,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,cAAc;kBAC7B,IAAI,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDxB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5D,WAAW,CAAC,IAAI,GAAG;IACjB,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,IAAI;IACd,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,KAAK;CACd,CAAC","sourcesContent":["export default {\n  title: 'VDS/Components/Sheet',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n    design: {\n      type: 'figma',\n      url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?node-id=29286-198023&m=dev',\n    },\n  },\n};\n\nconst styles = `\n  .trigger-container {\n    padding: 2rem;\n    display: flex;\n    justify-content: center;\n  }\n`;\n\nconst codeTemplate = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n    <div class=\"trigger-container\">\n        <vds-button \n            variant=\"primary\" \n            size=\"medium\" \n            onclick=\"document.querySelector('vds-sheet').open()\">\n            Open Bottom Sheet\n        </vds-button>\n    </div>\n    <vds-sheet\n        opened=\"${args.opened}\"\n        backdrop=\"${args.backdrop}\"\n        hide-drag-handle=\"${args.hideDragHandle}\"\n        height=\"${args.height}\"\n    >\n        <div class=\"sheet-content\">\n            <h2>Sheet Content</h2>\n            <p>This is the content of the sheet.</p>\n        </div>\n    </vds-sheet>\n</div>\n    `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  opened: false,\n  backdrop: true,\n  hideDragHandle: false,\n  height: 'auto',\n};\n\nconst richStyles = `\n  .trigger-container {\n    padding: 2rem;\n    display: flex;\n    justify-content: center;\n  }\n  .sheet-content {\n    padding: 1rem;\n  }\n  .content-section {\n    margin-bottom: 1.5rem;\n  }\n  .badges-container {\n    display: flex;\n    gap: 0.5rem;\n    margin: 1rem 0;\n  }\n  .actions-container {\n    display: flex;\n    gap: 1rem;\n    justify-content: flex-end;\n    margin-top: 2rem;\n  }\n`;\n\nconst richContentCodeTemplate = args => {\n  return `\n<style>${richStyles}</style>\n<div class=\"container\">\n    <div class=\"trigger-container\">\n        <vds-button \n            variant=\"primary\" \n            size=\"medium\" \n            onclick=\"document.querySelector('vds-sheet').open()\">\n            Open Profile Settings\n        </vds-button>\n    </div>\n    <vds-sheet\n        opened=\"${args.opened}\"\n        backdrop=\"${args.backdrop}\"\n        hide-drag-handle=\"${args.hideDragHandle}\"\n        height=\"${args.height}\"\n    >\n        <div class=\"sheet-content\">\n            <div class=\"content-section\">\n                <h2>User Profile Settings</h2>\n                <p>Manage your account preferences and notification settings.</p>\n            </div>\n            \n            <div class=\"content-section\">\n                <h3>Status Badges</h3>\n                <div class=\"badges-container\">\n                    <vds-badge-pill status-color=\"healthy\" value=\"Active\"></vds-badge-pill>\n                    <vds-badge-pill status-color=\"information\" value=\"Premium\"></vds-badge-pill>\n                    <vds-badge-pill status-color=\"warning\" value=\"Pending Review\"></vds-badge-pill>\n                </div>\n            </div>\n\n            <div class=\"content-section\">\n                <vds-field label=\"Notification Preferences\" size=\"medium\">\n                    <vds-basic-dropdown \n                        placeholder=\"Choose notification frequency\" \n                        value=\"Daily\"\n                        size=\"medium\"\n                        match-width=\"true\">\n                        <vds-dropdown-item value=\"Real-time\" label=\"Real-time\"></vds-dropdown-item>\n                        <vds-dropdown-item value=\"Hourly\" label=\"Hourly\"></vds-dropdown-item>\n                        <vds-dropdown-item value=\"Daily\" label=\"Daily\"></vds-dropdown-item>\n                        <vds-dropdown-item value=\"Weekly\" label=\"Weekly\"></vds-dropdown-item>\n                        <vds-dropdown-item value=\"Never\" label=\"Never\"></vds-dropdown-item>\n                    </vds-basic-dropdown>\n                </vds-field>\n            </div>\n\n            <div class=\"actions-container\">\n                <vds-button \n                    variant=\"secondary\" \n                    size=\"medium\"\n                    onclick=\"document.querySelector('vds-sheet').close()\">\n                    Cancel\n                </vds-button>\n                <vds-button variant=\"primary\" size=\"medium\">Save Changes</vds-button>\n            </div>\n        </div>\n    </vds-sheet>\n</div>\n    `;\n};\n\nexport const RichContent = richContentCodeTemplate.bind({});\n\nRichContent.args = {\n  opened: false,\n  backdrop: true,\n  hideDragHandle: false,\n  height: '70%',\n};\n\nconst customStyles = `\n  .trigger-container {\n    padding: 2rem;\n    display: flex;\n    justify-content: center;\n  }\n  .sheet-content {\n    padding: 1.5rem;\n    text-align: center;\n  }\n  .theme-demo {\n    margin-bottom: 1rem;\n  }\n  .color-swatches {\n    display: flex;\n    gap: 1rem;\n    justify-content: center;\n    margin: 1rem 0;\n  }\n  .swatch {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    border: 2px solid var(--color-border-low);\n  }\n  .swatch.bg { background-color: var(--vds-sheet-background-color, #f8f9fa); }\n  .swatch.handle { background-color: var(--vds-sheet-drag-handle-color, #6c757d); }\n  .swatch.shadow { \n    background: linear-gradient(135deg, rgba(0,0,0,0.1), rgba(0,0,0,0.3));\n    box-shadow: var(--vds-sheet-box-shadow, 0 2px 8px rgba(0,0,0,0.1));\n  }\n`;\n\nconst customUsageCodeTemplate = args => {\n  return `\n<style>${customStyles}</style>\n<div class=\"container\">\n    <div class=\"trigger-container\">\n        <vds-button \n            variant=\"primary\" \n            size=\"medium\" \n            onclick=\"document.querySelector('vds-sheet').open()\">\n            Open VDS Green Theme Sheet\n        </vds-button>\n    </div>\n    <vds-sheet\n        opened=\"${args.opened}\"\n        backdrop=\"${args.backdrop}\"\n        hide-drag-handle=\"${args.hideDragHandle}\"\n        height=\"${args.height}\"\n        style=\"\n            --vds-sheet-background-color: var(--color-background-healthy-lowest-default);\n            --vds-sheet-backdrop-color: var(--color-background-healthy-lowest-hover);\n            --vds-sheet-box-shadow: var(--elevation-shadow-5);\n            --vds-sheet-border-radius: 100px;\n            --vds-sheet-drag-handle-color: var(--color-icon-healthy);\n            --vds-sheet-transition-duration: 0.4s;\n        \"\n    >\n        <div class=\"sheet-content\">\n            <div class=\"theme-demo\">\n                <h2 style=\"color: var(--color-text-healthy-high); margin-bottom: 0.5rem;\">VDS Green Theme Demo</h2>\n                <p style=\"color: var(--color-text-healthy-medium);\">This sheet demonstrates a green color scheme using VDS healthy color tokens from the design system.</p>\n            </div>\n            \n            <div class=\"theme-demo\">\n                <h3 style=\"color: var(--color-text-healthy-high); font-size: 1rem; margin-bottom: 1rem;\">VDS Healthy Colors</h3>\n                <div class=\"color-swatches\">\n                    <div class=\"swatch bg\" title=\"Background (--color-background-healthy-lowest-default)\"></div>\n                    <div class=\"swatch handle\" title=\"Drag Handle (--color-icon-healthy)\"></div>\n                    <div class=\"swatch shadow\" title=\"Elevation Shadow (--elevation-shadow-5)\"></div>\n                </div>\n                <p style=\"color: var(--color-text-high); font-size: 0.875rem;\">Background • Handle • Shadow</p>\n            </div>\n\n            <div class=\"theme-demo\">\n                <vds-field label=\"Theme Settings\" size=\"medium\">\n                    <vds-basic-dropdown \n                        placeholder=\"Choose theme variant\" \n                        value=\"Green\"\n                        size=\"medium\"\n                        match-width=\"true\">\n                        <vds-dropdown-item value=\"Light\" label=\"Light Theme\"></vds-dropdown-item>\n                        <vds-dropdown-item value=\"Green\" label=\"VDS Green Theme\"></vds-dropdown-item>\n                        <vds-dropdown-item value=\"Dark\" label=\"Dark Theme\"></vds-dropdown-item>\n                        <vds-dropdown-item value=\"Auto\" label=\"Auto Theme\"></vds-dropdown-item>\n                    </vds-basic-dropdown>\n                </vds-field>\n            </div>\n\n            <div style=\"margin-top: 2rem; display: flex; gap: 1rem; justify-content: center;\">\n                <vds-button \n                    variant=\"secondary\" \n                    size=\"medium\"\n                    onclick=\"document.querySelector('vds-sheet').close()\">\n                    Close\n                </vds-button>\n                <vds-button variant=\"primary\" size=\"medium\">Apply Theme</vds-button>\n            </div>\n        </div>\n    </vds-sheet>\n</div>\n    `;\n};\n\nexport const CustomUsage = customUsageCodeTemplate.bind({});\n\nCustomUsage.args = {\n  opened: false,\n  backdrop: true,\n  hideDragHandle: false,\n  height: '60%',\n};\n"]}

package/dist/collection/components/sidenav-item/vds-sidenav-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-sidenav-item.js","sourceRoot":"","sources":["../../../src/components/sidenav-item/vds-sidenav-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-sidenav-item',\n  styleUrl: 'vds-sidenav-item.scss',\n  shadow: true,\n})\nexport class VdsSidenavItem {\n  /** Puts the navItem in disabled state */\n  @Prop({ mutable: true }) disabled: boolean = false;\n  /** When true expands the nav item to show both text and icon. When false, only shows the icon */\n  @Prop({ mutable: true }) expanded: boolean = false;\n  /** Define the icon value */\n  @Prop({ mutable: true }) icon: string;\n  /** Define item as active when is true */\n  @Prop({ mutable: true }) isActive: boolean = false;\n  /** Toggles static mode in nav-item */\n  @Prop({ mutable: true }) isStatic: boolean = false;\n  /** Shows arrow when there are children */\n  @Prop({ mutable: true }) hasChildren: boolean = false;\n  /** Defines the element as a link */\n  @Prop({ mutable: true }) link_href: string = null;\n  /** Sets the target value */\n  @Prop({ mutable: true }) link_target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n  /** Sets the link rel value */\n  @Prop({ mutable: true }) link_rel: string = null;\n  /** Define text value */\n  @Prop({ mutable: true }) value: string;\n\n  /** Emits event when item gets clicked */\n  @Event() clicked: EventEmitter<MouseEvent>;\n\n  private handleClick(evt: MouseEvent): void {\n    this.clicked.emit(evt);\n  }\n\n  private generateRightSlot(){\n    return (\n      this.expanded && !this.isStatic ? \n        <span class=\"vds__sidenav-item--interaction-right-slot\">\n          <slot name=\"rightSlot\" />\n        </span> \n      : null\n    )\n  }\n\n  private generateChildrenIcon(){\n    \n  if (this.hasChildren && (this.isStatic || this.expanded)) {\n    return (\n            <span class=\"vds__sidenav-item--interaction-icon\">\n              <vds-icon\n                svg-icon=\"chevron-right\"\n                size={'1.25rem'}\n                color={this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-press' : 'color-icon-medium'}\n                alt=\"Open menu\"\n              />\n            </span>\n          ) \n    }        \n  }\n  private generateInformativeIcon(){\n    if (this.icon){\n       return (\n          <span \n          class={`${this.isStatic ? \"vds__sidenav-item--static-informative-icon\" : \n            this.expanded ? \"vds__sidenav-item--expanded-informative-icon\" :\n            \"vds__sidenav-item--collapsed-informative-icon\"\n                }`}\n          >\n            <vds-icon\n              svg-icon={this.icon}\n              size={'1.25rem'}\n              color={this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-press' : 'color-icon-medium'}\n              alt={this.value}\n            />\n          </span>\n       )\n    }\n  }\n  render(): HTMLStencilElement {\n    const Element = this.link_href ? \"a\" : \"button\";\n    const href = this.link_href ? this.link_href : null;\n    const target = this.link_href ? this.link_target : null;\n    const rel = this.link_href ? this.link_rel : null;\n    return (\n      <Host class={this.disabled ? 'vds__sidenav-item--disabled' : ''}>\n        <Element\n          onClick={(evt: MouseEvent) => {\n            if (this.disabled) {\n              evt.stopPropagation();\n              evt.preventDefault();\n            } else {\n              this.handleClick(evt);\n            }\n          }}\n          href={ href }\n          target={ target }\n          rel={ rel }\n          class={`vds__sidenav-item \n                     ${this.isStatic ? 'vds__sidenav-item--static' : this.expanded ? 'vds__sidenav-item--expanded' : 'vds__sidenav-item--collapsed'}\n                     ${this.disabled ? 'vds__sidenav-item--disabled' : ''}\n                     ${this.isActive && !this.disabled ? 'vds__sidenav-item--active' : ''}\n                `}\n        >\n          {this.generateInformativeIcon()}  \n          {this.expanded || this.isStatic ? (\n            <span\n              class={`\n                    ${this.isStatic ? 'vds__sidenav-item--static-label' : 'vds__sidenav-item--expanded-label'}\n                    ${this.disabled ? 'vds__sidenav-item--label-disabled' : ''}\n                    ${this.isActive && !this.disabled && this.expanded ? 'vds__sidenav-item--label-active' : ''}\n                    ${this.isActive && !this.disabled && this.isStatic ? 'vds__sidenav-item--static-label-active' : ''}\n                    `}\n            >\n              {this.value}\n            </span>\n          ) : null}\n          {this.generateRightSlot()}\n          {this.generateChildrenIcon()}\n        </Element>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/sidenav-item/vds-sidenav-item.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-sidenav-item.stories.js","sourceRoot":"","sources":["../../../src/components/sidenav-item/vds-sidenav-item.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'VDS/Components/Sidenav/Sidenav-item',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n  },\n};\n\nconst styles = `\n    .container {\n        position: relative;\n        width: 25%;\n        height: 50px;\n        background-color: light-grey;\n    }    \n`;\n\nconst codeTemplate = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n    <vds-sidenav-item\n        value=\"${args.value || 'Sidenav Item'}\"    \n        icon=\"${args.icon}\"\n        expanded=\"${args.expanded || false}\"\n        disabled=\"${args.disabled || false}\"\n        has-children=\"${args.hasChildren || false}\"\n        is-static=\"${args.isStatic || false}\"\n        is-active=\"${args.isActive || false}\"\n        link_href=\"${args.link_href || ''}\"\n        link_target=\"${args.link_target || '_blank'}\"\n        link_rel=\"${args.link_rel || ''}\"\n       >\n    </vds-sidenav-item>\n</div>\n    `;\n};\n\nexport const ExpandableUsage = codeTemplate.bind({});\n\nExpandableUsage.args = {\n  disabled: false,\n  value: 'Sidenav Item',\n  expanded: true,\n  icon: 'desktop-computer',\n  isActive: false,\n};\n\nexport const ExpandableWithChildrenUsage = codeTemplate.bind({});\n\nExpandableWithChildrenUsage.args = {\n  expanded: true,\n  disabled: false,\n  value: 'Sidenav Item',\n  icon: 'desktop-computer',\n  hasChildren: true,\n  isActive: false,\n};\n\nexport const StaticUsage = codeTemplate.bind({});\n\nStaticUsage.args = {\n  disabled: false,\n  value: 'Sidenav Item',\n  icon: 'desktop-computer',\n  isStatic: true,\n  isActive: false,\n};\nexport const ExpandableAsLinkUsage = codeTemplate.bind({});\n\nExpandableAsLinkUsage.args = {\n  expanded: true,\n  disabled: false,\n  value: 'Sidenav Item',\n  icon: 'desktop-computer',\n  isStatic: false,\n  isActive: false,\n  link_href: 'http://example.com',\n  link_target: '_blank',\n  link_rel: 'noopener noreferrer',\n};\n\n\nconst codeTemplateWithSlot = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n    <vds-sidenav-item\n        value=\"${args.value || 'Sidenav Item'}\"    \n        icon=\"${args.icon || 'desktop-computer'}\"\n        expanded=\"${args.expanded || false}\"\n        disabled=\"${args.disabled || false}\"\n        has-children=\"${args.hasChildren || false}\"\n        is-static=\"${args.isStatic || false}\"\n        is-active=\"${args.isActive || false}\"\n        link_href=\"${args.link_href || ''}\"\n        link_target=\"${args.link_target || '_blank'}\"\n       >\n       <vds-icon \n        slot=\"rightSlot\"\n        svg-icon=\"more-vertical\"\n        size=\"1.25rem\"\n        color=\"${args.disabled ? 'color-icon-disabled' : args.isActive ? 'color-icon-brand-press' : 'color-icon-medium'}\"\n        alt=\"Open menu\"\n       >\n    </vds-sidenav-item>\n</div>\n    `;\n};\nexport const ExpandableWithRightSlotUsage = codeTemplateWithSlot.bind({});\n\nExpandableWithRightSlotUsage.args = {\n  expanded: true,\n  disabled: false,\n  value: 'Sidenav Item',\n  icon: 'desktop-computer',\n  hasChildren: false,\n  isActive: false,\n};\n\nconst codeCustomWidthTemplate = args => {\n  return `\n<style>\n  vds-sidenav-item {\n    --vds-sidenav-item-expanded-width:  ${args.ExpandedWidth || '17.5rem'};\n    --vds-sidenav-item-static-width: ${args.StaticWidth || '3.75rem'};\n    --vds-sidenav-item-collapsed-width: ${args.CollapsedWidth || '3.5rem'};\n  }\n</style>\n<vds-sidenav-item\n  padding: 5px;\n  value=\"${args.value || 'Sidenav Item'}\"    \n  icon=\"${args.icon}\"\n  expanded=\"${args.expanded || false}\"\n  is-static=\"${args.isStatic || false}\"\n  is-active=\"${args.isActive || false}\"\n  >\n</vds-sidenav-item>\n    `;\n};\n\nexport const CustomWidthUsage = codeCustomWidthTemplate.bind({});\n\nCustomWidthUsage.args = {\n  value: 'Home',\n  icon: 'home',\n  expanded: true,\n  isActive: false,\n  isStatic: false,\n  ExpandedWidth: '17.5rem',\n  StaticWidth: '3.75rem',\n  CollapsedWidth: '3.5rem',\n};\n"]}