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

package/dist/collection/components/dialog-action-footer/vds-dialog-action-footer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dialog-action-footer.js","sourceRoot":"","sources":["../../../src/components/dialog-action-footer/vds-dialog-action-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQnE,MAAM,OAAO,qBAAqB;IAOhC,gBAAgB;QACd,IAAI,CAAC,+CAA+C,EAAE,CAAC;IACzD,CAAC;IAEA;;;;;;MAME;IACM,+CAA+C;QACtD,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;YACxD,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBAChC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YAC1B,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Element, Event } from \"@stencil/core\";\nimport { EventEmitter, HTMLStencilElement } from \"@stencil/core/internal\";\n\n@Component({\n  tag: \"vds-dialog-action-footer\",\n  styleUrl: \"vds-dialog-action-footer.scss\",\n  shadow: true,\n})\nexport class VdsDialogActionFooter {\n\n  /** Emits event when closed button is clicked */\n  @Event() closeButton: EventEmitter<void>;\n\n  @Element() host: HTMLElement;\n\n  componentDidLoad(): void {\n    this.setClosebuttonEventEmitterToCloseDialogElements();\n  }\n\n   /**\n   * @private\n   * Sets up event listeners for the dialog children elements which has attribute close-dialog.\n   *\n   * - Listens for \"click\" events on the element and emits `closeButton`.\n   *\n   */\n   private setClosebuttonEventEmitterToCloseDialogElements(): void {\n    this.host.querySelectorAll(\"[close-dialog]\").forEach(el => {\n      el.addEventListener(\"click\", () => {\n        this.closeButton.emit();\n      });\n    });\n  } \n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/dialog-action-footer/vds-dialog-action-footer.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dialog-action-footer.stories.js","sourceRoot":"","sources":["../../../src/components/dialog-action-footer/vds-dialog-action-footer.stories.tsx"],"names":[],"mappings":"AACA,eAAe;IACX,KAAK,EAAE,4CAA4C;IACnD,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,wFAAwF;SAChG;KACF;CACN,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;;;;CASd,CAAC;AAEF,MAAM,YAAY,GAAG,GAAG,EAAE;IACtB,OAAO;SACF,MAAM;;;;;;;KAOV,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG,EACjB,CAAC","sourcesContent":["\nexport default {\n    title: 'VDS/Components/Dialog/Dialog-Action-Footer',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n        design: {\n            type: \"figma\",\n            url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29192-186089\"\n        }\n      }\n};\n\nconst styles = `\n.content {\n    margin: 1rem;\n    padding: var(--spacing-07);\n    border-radius: var(--radius-large);\n    background: var(--surface-neutral-default);\n    z-index: var(--elevation-dialog);\n    box-shadow: var(--surface-elevation-03);\n}\n`;\n \nconst codeTemplate = () => {\n    return `\n<style>${styles}</style>\n<div class=\"content\">\n    <vds-dialog-action-footer class=\"vds__dialog__footer--end\">\n        <vds-button variant=\"secondary\">Cancelar</vds-button>\n        <vds-button>Guardar</vds-button>\n    </vds-dialog-action-footer>\n</div>\n    `;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dialog-body.js","sourceRoot":"","sources":["../../../src/components/dialog-body/vds-dialog-body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,mBAAmB;gBAC7B,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-dialog-body',\n  styleUrl: 'vds-dialog-body.scss',\n  shadow: true,\n})\nexport class VdsDialogBody {\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <div class={\"vds__dialog--body\"}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dialog-body.stories.js","sourceRoot":"","sources":["../../../src/components/dialog-body/vds-dialog-body.stories.tsx"],"names":[],"mappings":"AACA,eAAe;IACX,KAAK,EAAE,mCAAmC;IAC1C,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,wFAAwF;SAChG;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;;;;CASd,CAAC;AAEF,MAAM,YAAY,GAAG,GAAG,EAAE;IACtB,OAAO;SACF,MAAM;;;;;;KAMV,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["\nexport default {\n    title: 'VDS/Components/Dialog/Dialog-Body',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n        design: {\n            type: \"figma\",\n            url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29192-185636\"\n        }\n    }\n};\n\nconst styles = `\n.content {\n    margin: 1rem;\n    padding: var(--spacing-07);\n    border-radius: var(--radius-large);\n    background: var(--surface-neutral-default);\n    z-index: var(--elevation-dialog);\n    box-shadow: var(--surface-elevation-03);\n}\n`;\n \nconst codeTemplate = () => {\n    return `\n<style>${styles}</style>\n<div class=\"content\">\n    <vds-dialog-body>\n        Content description here. Quis vel facilisi habitant enim mattis risus integer augue.  Quis vel facilisi habitant enim mattis risus integer augue.\n    </vds-dialog-body>\n</div>\n    `;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dialog-header.js","sourceRoot":"","sources":["../../../src/components/dialog-header/vds-dialog-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,eAAe;IAL5B;QAME,iDAAiD;QACzC,oBAAe,GAAY,IAAI,CAAC;KAkBzC;IAbC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,qBAAqB;gBAC/B,4DAAK,KAAK,EAAE,2BAA2B;oBACrC,8DAAa,CACT;gBACL,IAAI,CAAC,eAAe,IAAI,wEAAiB,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,GAAoB,CACjI,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-dialog-header',\n  styleUrl: 'vds-dialog-header.scss',\n  shadow: true,\n})\nexport class VdsDialogHeader {\n  /** Toggles show close button in dialog header */\n  @Prop() showCloseButton: boolean = true;\n\n  /** Emits event when closed button is clicked */\n  @Event() closeButton: EventEmitter<void>;\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <div class={\"vds__dialog__header\"}>\n          <div class={\"vds__dialog__header--text\"}>\n            <slot></slot>\n          </div>\n          {this.showCloseButton && <vds-icon-button variant=\"secondary\" icon=\"close\" onClick={() => this.closeButton.emit()}></vds-icon-button>}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dialog-header.stories.js","sourceRoot":"","sources":["../../../src/components/dialog-header/vds-dialog-header.stories.tsx"],"names":[],"mappings":"AACA,eAAe;IACX,KAAK,EAAE,qCAAqC;IAC5C,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,wFAAwF;SAChG;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;;;;CASd,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1B,OAAO;SACF,MAAM;;4CAE6B,IAAI,CAAC,eAAe;UACtD,IAAI,CAAC,KAAK;;;KAGf,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,cAAc;IACrB,eAAe,EAAE,IAAI;CACxB,CAAC","sourcesContent":["\nexport default {\n    title: 'VDS/Components/Dialog/Dialog-Header',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n        design: {\n            type: \"figma\",\n            url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29192-184118\"\n        }\n    }\n};\n\nconst styles = `\n.content {\n    margin: 1rem;\n    padding: var(--spacing-07);\n    border-radius: var(--radius-large);\n    background: var(--surface-neutral-default);\n    z-index: var(--elevation-dialog);\n    box-shadow: var(--surface-elevation-03);\n}\n`;\n \nconst codeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<div class=\"content\">\n    <vds-dialog-header show-close-button=\"${args.showCloseButton}\">\n        ${args.title}\n    </vds-dialog-header>\n</div>\n    `;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    title: \"Dialog title\",\n    showCloseButton: true\n};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dialog-modal.js","sourceRoot":"","sources":["../../../src/components/dialog-modal/vds-dialog-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,cAAc;IACzB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,+BAA+B;YACzC,4DAAK,KAAK,EAAE,oBAAoB;gBAC5B,6DAAM,IAAI,EAAC,QAAQ,GAAQ;gBAC3B,8DAAQ;gBACR,6DAAM,IAAI,EAAC,MAAM,GAAQ;gBACzB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-dialog-modal',\n  styleUrl: 'vds-dialog-modal.scss',\n  shadow: true,\n})\nexport class VdsDialogModal {\n  render(): HTMLStencilElement {\n    return (\n      <Host class=\"vds__dialog__modal--container\">\n        <div class={\"vds__dialog__modal\"}>\n            <slot name=\"header\"></slot>\n            <slot />\n            <slot name=\"body\"></slot>\n            <slot name=\"footer\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dialog-modal.stories.js","sourceRoot":"","sources":["../../../src/components/dialog-modal/vds-dialog-modal.stories.tsx"],"names":[],"mappings":"AACA,eAAe;IACX,KAAK,EAAE,oCAAoC;IAC3C,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,wFAAwF;SAChG;KACF;CACN,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;;;;CASd,CAAC;AAEF,MAAM,YAAY,GAAG,GAAG,EAAE;IACtB,OAAO;SACF,MAAM;;;;;;;;;;;;;;;;;;KAkBV,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["\nexport default {\n    title: 'VDS/Components/Dialog/Dialog-Modal',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n        design: {\n            type: \"figma\",\n            url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29192-182339\"\n        }\n      }\n};\n\nconst styles = `\n.content {\n    margin: 1rem;\n    padding: var(--spacing-07);\n    border-radius: var(--radius-large);\n    background: var(--surface-neutral-default);\n    z-index: var(--elevation-dialog);\n    box-shadow: var(--surface-elevation-03);\n}\n`;\n \nconst codeTemplate = () => {\n    return `\n<style>${styles}</style>\n<div class=\"content\">\n<vds-dialog-modal>\n    <vds-dialog-header slot=\"header\" show-close-button=\"true\">\n            Dialog title\n        </vds-dialog-header>\n        <vds-dialog-body>\n            <h2 class=\"content\">Content</h2>\n        </vds-dialog-body>\n        <vds-dialog-action-footer class=\"vds__dialog__footer--end\" slot=\"footer\">\n            <vds-button variant=\"secondary\" close-dialog>Cancel</vds-button>\n            <vds-button>Submit</vds-button>\n        </vds-dialog-action-footer>\n    </vds-dialog-modal>\n    <vds-dialog-body>\n        Content description here. Quis vel facilisi habitant enim mattis risus integer augue.  Quis vel facilisi habitant enim mattis risus integer augue.\n    </vds-dialog-body>\n</div>\n    `;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-divider.js","sourceRoot":"","sources":["../../../src/components/divider/vds-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAS7D,MAAM,OAAO,UAAU;IALvB;QAME,sDAAsD;QAC9C,YAAO,GAAY,YAAY,CAAC;QACxC,wDAAwD;QAChD,gBAAW,GAA8B,YAAY,CAAC;QAC9D,iCAAiC;QACzB,UAAK,GAA2C,kBAAkB,CAAC;QAC3E,qCAAqC;QAC7B,cAAS,GAAoB,qBAAqB,CAAC;KAyB5D;IAvBS,eAAe;QACrB,OAAO;YACL,mBAAmB,EAAE,SAAS,IAAI,CAAC,OAAO,GAAG;YAC7C,wBAAwB,EAAE,SAAS,IAAI,CAAC,KAAK,GAAG;YAChD,wBAAwB,EAAE,SAAS,IAAI,CAAC,SAAS,GAAG;SACrD,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE;YAC1E,4DAAK,KAAK,EAAE,cAAc,CACxB,0BAA0B,GAAG,IAAI,CAAC,WAAW,CAC1C;gBACH,4DAAK,KAAK,EAAE,cAAc,CACxB,oBAAoB,EACpB,4BAA4B,GAAG,IAAI,CAAC,WAAW,CAC9C,GACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { Spacing } from '../../definitions/spacing';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { BorderColors, Palettes, StaticGlobal } from '../../definitions/colors';\nimport { BorderThickness } from '../../definitions/thickness';\n\n@Component({\n  tag: 'vds-divider',\n  styleUrl: 'vds-divider.scss',\n  shadow: true,\n})\nexport class VdsDivider {\n  /** Define divider padding using our spacing system */\n  @Prop() padding: Spacing = 'spacing-03';\n  /** Define divider orientation horizontal or vertical */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n  /** Set the divider line color */\n  @Prop() color: BorderColors | StaticGlobal | Palettes = 'color-border-low';\n  /** Set the divider line thickness */\n  @Prop() thickness: BorderThickness = 'border-thickness-01';\n\n  private setDividerStyle() {\n    return {\n      '--divider-padding': `var(--${this.padding})`,\n      '--divider-border-color': `var(--${this.color})`,\n      '--divider-border-width': `var(--${this.thickness})`,\n    };\n  }\n\n  render() {\n    return (\n      <Host class={combineClasses(this.orientation)} style={this.setDividerStyle()}>\n        <div class={combineClasses(\n          'vds__divider--container-' + this.orientation\n            )}>\n          <div class={combineClasses(\n            'vds__divider--line',\n            'vds__divider--orientation-' + this.orientation\n            )}>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-divider.stories.js","sourceRoot":"","sources":["../../../src/components/divider/vds-divider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,4BAA4B,CAAC;AAEnD,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;AAErD,eAAe;IACX,KAAK,EAAE,wBAAwB;IAC/B,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,uFAAuF;SAC/F;KACF;IACH,QAAQ,EAAE;QACN,WAAW,EAAE;YACT,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;YACnC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,WAAW,EAAE;YACT,OAAO,EAAE,CAAC,SAAS,EAAE,GAAG,aAAa,CAAC;YACtC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACH,eAAe,EAAE;YACb,OAAO,EAAE,CAAC,qBAAqB,EAAE,qBAAqB,EAAE,qBAAqB,CAAC;YAC9E,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,OAAO,EAAE;YACL,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,EAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC;YAC1G,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;;CAOd,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAAC,IAAI,EAAE,EAAE;IACpC,OAAO;SACF,MAAM;;gCAEiB,IAAI,CAAC,WAAW,cAAc,IAAI,CAAC,OAAO,YAAY,IAAI,CAAC,WAAW,gBAAgB,IAAI,CAAC,eAAe;;CAEzI,CAAC;AACF,CAAC,CAAA;AACD,MAAM,CAAC,MAAM,oBAAoB,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEpE,oBAAoB,CAAC,IAAI,GAAG;IACxB,WAAW,EAAE,YAAY;IACzB,OAAO,EAAE,YAAY;IACrB,WAAW,EAAE,kBAAkB;IAC/B,eAAe,EAAE,qBAAqB;CACzC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE,EAAE;IAClC,OAAO;SACF,MAAM;;gCAEiB,IAAI,CAAC,WAAW,cAAc,IAAI,CAAC,OAAO,YAAY,IAAI,CAAC,WAAW,gBAAgB,IAAI,CAAC,eAAe;OACnI,CAAC;AACR,CAAC,CAAA;AACD,MAAM,CAAC,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhE,kBAAkB,CAAC,IAAI,GAAG;IACtB,WAAW,EAAE,UAAU;IACvB,OAAO,EAAE,YAAY;IACrB,WAAW,EAAE,kBAAkB;IAC/B,eAAe,EAAE,qBAAqB;CACzC,CAAA","sourcesContent":["import colorVars from \"../../constants/color-vars\";\n\nconst BORDER_COLORS = Object.keys(colorVars.borders);\n\nexport default {\n    title: 'VDS/Components/Divider',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n        design: {\n            type: \"figma\",\n            url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=28114-29069\"\n        }\n      },\n    argTypes: {\n        orientation: {\n            options: [\"horizontal\", \"vertical\"],\n            control: { type: \"select\" }\n        },\n        borderColor: {\n            options: [undefined, ...BORDER_COLORS],\n            control: { type: \"select\" }\n          },\n        borderThickness: {\n            options: [\"border-thickness-01\", \"border-thickness-05\", \"border-thickness-09\"],\n            control: { type: \"select\" }\n        },\n        padding: {\n            options: [\"spacing-00\", \"spacing-01\",\"spacing-02\", \"spacing-03\", \"spacing-04\", \"spacing-05\", \"spacing-06\"],\n            control: { type: \"select\" }\n        },\n    },\n};\n\nconst styles = `\n.container {\n    width:200px;\n    height:200px;\n    display:block;\n    margin:10px;\n}\n`;\n\nconst codeTemplateHorizontal = (args) => {\n    return `\n<style>${styles}</style>\n<div class=\"container\">\n    <vds-divider orientation=\"${args.orientation}\" padding=\"${args.padding}\" color=\"${args.borderColor}\" thickness=\"${args.borderThickness}\"></vds-divider>\n</div>\n`;\n}\nexport const BasicHorizontalUsage = codeTemplateHorizontal.bind({});\n\nBasicHorizontalUsage.args = {\n    orientation: \"horizontal\",\n    padding: \"spacing-03\",\n    borderColor: 'color-border-low',\n    borderThickness: 'border-thickness-01',\n};\n\nconst codeTemplateVertical = (args) => {\n    return `\n<style>${styles}</style>\n<div class=\"container\">\n    <vds-divider orientation=\"${args.orientation}\" padding=\"${args.padding}\" color=\"${args.borderColor}\" thickness=\"${args.borderThickness}\"></vds-divider>\n</div>`;\n}\nexport const BasicVerticalUsage = codeTemplateVertical.bind({});\n\nBasicVerticalUsage.args = {\n    orientation: \"vertical\",\n    padding: \"spacing-03\",\n    borderColor: 'color-border-low',\n    borderThickness: 'border-thickness-01',\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/vds-drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAsB,IAAI,EAAE,MAAM,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAErH,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAO7D,MAAM,OAAO,SAAS;IALtB;QAYE,sCAAsC;QACb,aAAQ,GAAqB,MAAM,CAAC;QAK7D,mDAAmD;QAC1B,SAAI,GAAoB,MAAM,CAAC;QACxD,8DAA8D;QACtD,gBAAW,GAAG,KAAK,CAAC;QAC5B,kDAAkD;QAC1C,eAAU,GAAY,IAAI,CAAC;QACnC,0CAA0C;QAClC,eAAU,GAAY,KAAK,CAAC;QAO3B,qBAAgB,GAAY,KAAK,CAAC;KAiG5C;IA9FC,SAAS;QACP,IAAI,IAAI,CAAC,MAAM;YAAE,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;;YACrC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC;IAID,+BAA+B,CAAC,GAAyB;QACvD,MAAM,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,CAAgB,CAAC;QAC3C,IACI,MAAM,CAAC,QAAQ,KAAK,oBAAoB;YACxC,MAAM,CAAC,QAAQ,KAAK,cAAc;YAClC,MAAM,CAAC,QAAQ,KAAK,gCAAgC;YACpD,MAAM,CAAC,QAAQ,KAAK,0BAA0B;YAC9C,MAAM,CAAC,QAAQ,KAAK,wBAAwB;YAC5C,MAAM,CAAC,QAAQ,KAAK,kBAAkB,EACtC,CAAC;YACH,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,IAAI,KAAK,QAAQ,CAAC;QAChD,CAAC;IACH,CAAC;IAGD,IAAI;QACF,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;YAC3B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,KAAK;QACH,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;YAC3B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;gBACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACtB,CAAC;YACD,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,WAAK,KAAK,EAAE,kCAAkC,GAAQ,CAAC,CAAC,CAAC,WAAK,KAAK,EAAE,wBAAwB,GAAQ,CAAC;IAClI,CAAC;IAEO,eAAe;QACrB,OAAO,CACL,uBACE,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC,EACD,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,IAAI,EAAC,OAAO,GACK,CACpB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,cAAc,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,EAAE,eAAe,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;YACtI,4DACE,KAAK,EAAE,cAAc,CACnB,cAAc,EACd,YAAY,IAAI,CAAC,OAAO,EAAE,EAC1B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,EACzC,mCAAmC,IAAI,CAAC,QAAQ,EAAE,EAClD,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,uBAAuB,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,EAC7D,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,uBAAuB,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,EAC7D,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,EAAE,CAC9D;gBAGD,4DAAK,KAAK,EAAE,uBAAuB;oBACjC,4DACE,KAAK,EAAE,wBAAwB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,EAAE,EAAE;wBAE9F,4DAAK,KAAK,EAAE,8BAA8B;4BACxC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB;wBACL,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,EAAE,CAC3C;oBACN,4DAAK,KAAK,EAAE,mBAAmB;wBAC7B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB;oBACN,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF;YACN,4DAAK,KAAK,EAAE,yBAAyB;gBAClC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE;gBAC1D,6DAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Method, EventEmitter, Event, Watch, Listen, State } from '@stencil/core/internal';\nimport { Spacing } from '../../definitions/spacing';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-drawer',\n  styleUrl: 'vds-drawer.scss',\n  shadow: true,\n})\nexport class VdsDrawer {\n  /** Opens/closes the drawer */\n  @Prop({ mutable: true }) opened: boolean;\n  /** Toggles close button in the drawer */\n  @Prop({ mutable: true }) showCloseButton: boolean;\n  /** Disables the close button in the drawer */\n  @Prop({ mutable: true }) disableClose: boolean;\n  /** Places the drawer in the screen */\n  @Prop({ mutable: true }) position: 'left' | 'right' = 'left';\n  /** Toggles backdrop behind the drawer in the screen */\n  @Prop({ mutable: true }) backdrop: boolean;\n  /** Adds the padding to the drawer */\n  @Prop({ mutable: true }) padding: Spacing;\n  /** Mode of the drawer; one of 'over' or 'side'. */\n  @Prop({ mutable: true }) mode: 'over' | 'side' = 'over';\n  /** Allow the vds-drawer to fit inside another html element */\n  @Prop() isAdaptable = false;\n  /** Allow show or hide the shadow of the drawer */\n  @Prop() showShadow: boolean = true;\n  // Allow display the border of the sidenav\n  @Prop() showBorder: boolean = false;\n\n  /** Emits event when drawer is closed */\n  @Event() drawerClosed: EventEmitter<void>;\n  /** Emits event when drawer is opened */\n  @Event() drawerOpened: EventEmitter<void>;\n\n  @State() dropdownIsOpened: boolean = false;\n\n  @Watch('opened')\n  emitValue(): void {\n    if (this.opened) this.drawerOpened.emit();\n    else this.drawerClosed.emit();\n  }\n\n  @Listen('opened', { target: 'window' })\n  @Listen('closed', { target: 'window' })\n  setPositionRelativeForDropdowns(evt: CustomEvent<boolean>): void {\n    const target = (evt.target) as HTMLElement;\n    if(\n        target.nodeName === \"VDS-BASIC-DROPDOWN\" || \n        target.nodeName === \"VDS-DROPDOWN\" || \n        target.nodeName === \"VDS-BASIC-DROPDOWN-MULTISELECT\" ||\n        target.nodeName === \"VDS-DROPDOWN-MULTISELECT\" ||\n        target.nodeName === \"VDS-BASIC-AUTOCOMPLETE\" || \n        target.nodeName === \"VDS-AUTOCOMPLETE\"\n      ) {\n      this.dropdownIsOpened = evt.type === \"opened\";\n    }\n  }\n\n  @Method()\n  open(): Promise<void> {\n    return new Promise(resolve => {\n      this.opened = true;\n      resolve();\n    });\n  }\n\n  @Method()\n  close(): Promise<void> {\n    return new Promise(resolve => {\n      if (!this.disableClose) {\n        this.opened = false;\n      }\n      resolve();\n    });\n  }\n\n  private renderBackdrop(): HTMLStencilElement {\n    return this.isAdaptable ? <div class={`volt__drawer--backdrop-adaptable`}></div> : <div class={`volt__drawer--backdrop`}></div>;\n  }\n\n  private renderCloseIcon(): HTMLStencilElement {\n    return (\n      <vds-icon-button\n        onClick={() => {\n          this.close();\n        }}\n        variant={'secondary'}\n        icon=\"close\"\n        disabled={this.disableClose}\n        size=\"large\"\n      ></vds-icon-button>\n    );\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={combineClasses(`vds-drawer__${this.mode}`, `vds-drawer__${this.position}`, this.isAdaptable ? 'vds-drawer--adaptable' : '')}>\n        <div\n          class={combineClasses(\n            'volt__drawer',\n            `padding__${this.padding}`,\n            this.opened ? 'volt__drawer--opened' : '',\n            `volt__drawer__element--position-${this.position}`,\n            this.showShadow ? `vds-drawer__shadow--${this.position}` : '',\n            this.showBorder ? `vds-drawer__border--${this.position}` : '',\n            this.dropdownIsOpened ? \"vds-drawer__dropdown-is-opened\" : \"\"\n          )}\n        >\n          \n          <div class={`volt__drawer--content`}>\n            <div\n              class={`volt__drawer--header ${this.showCloseButton ? \"volt__drawer--header-close-icon\" : \"\"}`}\n            >\n              <div class={\"volt__drawer--header-content\"}>\n                <slot name=\"header\" />\n              </div>\n              {this.showCloseButton && this.renderCloseIcon()}\n            </div>\n            <div class={`volt-drawer__body`}>\n              <slot name=\"drawer\" />\n            </div>\n            <slot name=\"footer\" />\n          </div>\n        </div>\n        <div class={'volt__drawer__container'}>\n          {this.backdrop && this.opened ? this.renderBackdrop() : ''}\n          <slot name=\"container\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-drawer.stories.js","sourceRoot":"","sources":["../../../src/components/drawer/vds-drawer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n    title: 'VDS/Components/Drawer',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n        design: {\n            type: \"figma\",\n            url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=30055-122941\"\n        }\n    },\n    argTypes: {\n        padding: {\n            options: [\"spacing-00\", \"spacing-01\", \"spacing-02\", \"spacing-03\",\n                      \"spacing-04\", \"spacing-05\", \"spacing-06\", \"spacing-07\",\n                      \"spacing-08\", \"spacing-09\", \"spacing-10\", \"spacing-11\",\n                      \"spacing-12\", \"spacing-13\", \"spacing-14\", \"spacing-15\", \n                      \"spacing-16\", \"spacing-17\", \"spacing-18\", \"spacing-19\",\n                      \"spacing-20\"],\n            control: { type: \"select\" }\n        },\n        position: {\n            options: [\"left\", \"right\"],\n            control: { type: \"select\" }\n        },\n        mode: {\n            options: [\"side\", \"over\"],\n            control: { type: \"select\" }\n        }\n    },\n};\n\nconst styles = `\n    .body {\n        height: 100vh;\n    }\n    .parent-container {\n        position: relative;\n        width: 20vw;\n        height: 200px;\n    }\n    .header-footer-container {\n        height: 100px;\n        width: 100%;\n        text-align: center;\n        color: var(--color-text-high);\n        font-size:  1.25rem;\n        line-height: 1.5rem;\n        font-weight: bold;\n        padding: 1rem;\n        box-sizing: border-box;\n    }\n    .child-container {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n    }\n    span {\n        color: var(--color-text-high);\n        font-size:  1.25rem;\n        line-height: 1.5rem;\n        font-weight: bold;\n    }\n    p {\n        color: var(--color-text-high);\n        padding: var(--spacing-05);\n    }\n    vds-button {\n        padding-left: var(--spacing-05);\n    }\n`;\n \nconst codeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-drawer\n    opened=\"${args.opened}\"\n    show-close-button=\"${args.showCloseButton}\"\n    disable-close=\"${args.disableClose}\"\n    position=\"${args.position}\"\n    backdrop=\"${args.backdrop}\"\n    is-adaptable=\"${args.isAdaptable}\"\n    padding=\"${args.padding}\"\n    mode=\"${args.mode}\"\n    show-shadow=\"${args.showShadow}\"\n    show-border=\"${args.showBorder}\"\n>\n    <div slot=\"drawer\" class=\"parent-container\">\n        <div class=\"child-container\">\n            <span>Content</span>\n        </div>\n    </div>\n    <div slot=\"container\">\n        <p>Container for page elements</p>\n        <vds-button onclick=\"toggleDrawer()\">Open/Close Drawer</vds-button>\n        <vds-button onclick=\"closeDrawer()\">close()</vds-button>\n    </div>\n</vds-drawer>\n<script>\nfunction toggleDrawer() {\n    const drawer = document.querySelector('vds-drawer');\n    drawer.opened = !drawer.opened;\n}\nfunction closeDrawer() {\n    const drawer = document.querySelector('vds-drawer');\n    drawer.close();\n}\n</script>\n    `;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    opened: false,\n    showCloseButton: true,\n    disableClose: false,\n    position: \"left\",\n    backdrop: false,\n    isAdaptable: false,\n    padding: \"spacing-06\",\n    mode: \"side\",\n    showShadow: true,\n    showBorder: false\n};\n\n\n\nconst codeHeaderFooterTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-drawer\n    opened=\"${args.opened}\"\n    show-close-button=\"${args.showCloseButton}\"\n    disable-close=\"${args.disableClose}\"\n    position=\"${args.position}\"\n    backdrop=\"${args.backdrop}\"\n    is-adaptable=\"${args.isAdaptable}\"\n    padding=\"${args.padding}\"\n    mode=\"${args.mode}\"\n    show-shadow=\"${args.showShadow}\"\n    show-border=\"${args.showBorder}\"\n>\n    <div slot=\"header\">\n        <vds-sidenav-item-app\n            value=\"Header\"\n            menu-icon=\"false\"\n            expanded=\"true\"\n            is-active=\"false\"\n        >\n            <vds-icon\n                slot=\"img\"\n                size=\"2.5rem\"\n                svg-icon=\"wabtec-icon\"\n                class=\"volt-icon color-brand-main\"\n            ><vds-icon>\n        </vds-sidenav-item-app>\n    </div>\n    <div slot=\"drawer\" class=\"parent-container header-footer-container\">\n        <vds-sidenav-item-input\n            expanded=\"true\"\n            value=\"\"\n            placeholder=\"Search\"\n            disabled=\"false\"\n            is-readonly=\"false\"\n            error=\"false\"\n            action-icon=\"zoom\"\n            class=\"hydrated\"\n        >\n        </vds-sidenav-item-input>\n        <br/>\n        <vds-sidenav-item\n            value=\"Sidenav Item\"\n            icon=\"desktop-computer\"\n            expanded=\"true\"\n            disabled=\"false\"\n            has-children=\"false\"\n            is-static=\"false\"\n            is-active=\"false\"\n            link_href=\"\"\n            link_target=\"_blank\"\n            class=\"hydrated\"\n        >\n        </vds-sidenav-item>\n        <vds-sidenav-item\n            value=\"Sidenav Item\"\n            icon=\"desktop-computer\"\n            expanded=\"true\"\n            disabled=\"false\"\n            has-children=\"false\"\n            is-static=\"false\"\n            is-active=\"false\"\n            link_href=\"\"\n            link_target=\"_blank\"\n            class=\"hydrated\"\n        >\n        </vds-sidenav-item>\n    </div>\n    <div slot=\"footer\" class=\"header-footer-container\">\n        <vds-sidenav-item-app\n            value=\"Footer\"\n            menu-icon=\"true\"\n            expanded=\"true\"\n            is-active=\"false\"\n        >\n            <vds-icon\n                slot=\"img\"\n                size=\"2.5rem\"\n                svg-icon=\"vessel\"\n                color=\"color-icon-danger\"\n            ><vds-icon>\n        </vds-sidenav-item-app>\n    </div>\n    <div slot=\"container\">\n        <p>Container for page elements</p>\n        <vds-button onclick=\"toggleDrawer()\">Open/Close Drawer</vds-button>\n    </div>\n</vds-drawer>\n<script>\nfunction toggleDrawer() {\n    const drawer = document.querySelector('vds-drawer');\n    drawer.opened = !drawer.opened;\n}\n</script>\n    `;\n}\n\nexport const HeaderFooterUsage = codeHeaderFooterTemplate.bind({});\n\nHeaderFooterUsage.args = {\n    opened: false,\n    showCloseButton: true,\n    disableClose: false,\n    position: \"left\",\n    backdrop: false,\n    isAdaptable: false,\n    padding: \"spacing-06\",\n    mode: \"side\",\n    showShadow: true,\n    showBorder: false\n};\n\n\nconst stylesCustomColor = `\n    vds-drawer {\n        --vds-drawer-background-color: var(--color-background-information-default);\n        --vds-drawer-border-color: var(--color-border-danger);\n        --vds-drawer-backdrop-background-color: var(--color-background-healthy-lowest-hover);\n    }\n`;\n \nconst codeCustomColorTemplate = (args) => {\n    return `\n<style>${styles}${stylesCustomColor}</style>\n<vds-drawer\n    opened=\"${args.opened}\"\n    show-close-button=\"${args.showCloseButton}\"\n    disable-close=\"${args.disableClose}\"\n    position=\"${args.position}\"\n    backdrop=\"true\"\n    is-adaptable=\"${args.isAdaptable}\"\n    padding=\"${args.padding}\"\n    mode=\"${args.mode}\"\n    show-shadow=\"${args.showShadow}\"\n    show-border=\"true\"\n>\n    <div slot=\"drawer\" class=\"parent-container\">\n        <div class=\"child-container\">\n            <span>Content</span>\n        </div>\n    </div>\n    <div slot=\"container\">\n        <p>Container for page elements</p>\n        <vds-button onclick=\"toggleDrawer()\">Open/Close Drawer</vds-button>\n    </div>\n</vds-drawer>\n<script>\nfunction toggleDrawer() {\n    const drawer = document.querySelector('vds-drawer');\n    drawer.opened = !drawer.opened;\n}\n</script>\n    `;\n}\n\nexport const CustomColorUsage = codeCustomColorTemplate.bind({});\n\nCustomColorUsage.args = {\n    opened: false,\n    showCloseButton: true,\n    disableClose: false,\n    position: \"left\",\n    isAdaptable: false,\n    padding: \"spacing-06\",\n    mode: \"side\",\n    showShadow: true,\n};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dropdown-group-header.js","sourceRoot":"","sources":["../../../src/components/dropdown-group-header/vds-dropdown-group-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAmB,4BAA4B,EAAE,MAAM,wCAAwC,CAAC;AAOvG,MAAM,OAAO,sBAAsB;IALnC;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, Prop, h } from '@stencil/core';\nimport { GroupHeaderSize, generateGroupHeaderContainer } from '../base-group-header/base-group-header';\n\n@Component({\n  tag: 'vds-dropdown-group-header',\n  styleUrl: 'vds-dropdown-group-header.scss',\n  shadow: true,\n})\nexport class VdsDropdownGroupHeader {\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/dropdown-group-header/vds-dropdown-group-header.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dropdown-group-header.stories.js","sourceRoot":"","sources":["../../../src/components/dropdown-group-header/vds-dropdown-group-header.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,+CAA+C;IACtD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;uCAC8B,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK;KAC1D,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,uBAAuB;IAC9B,QAAQ,EAAE,OAAO;IACjB,IAAI,EAAE,QAAQ;CACf,CAAC","sourcesContent":["export default {\n  title: 'VDS/Components/Dropdown/Dropdown-Group-Header',\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 codeTemplate = args => {\n  return `\n    <vds-dropdown-group-header size=\"${args.size}\">${args.value}</vds-dropdown-group-header>\n    `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  value: 'Dropdown Group Header',\n  disabled: 'false',\n  size: 'medium',\n};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-basic-dropdown-item.stories.js","sourceRoot":"","sources":["../../../src/components/dropdown-item/vds-basic-dropdown-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/Dropdown/DropdownItem',\n    parameters: {\n        docs: {\n            toc: true,\n        },\n        design: {\n            type: \"figma\",\n            url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29047-159996\"\n        }\n    },\n    argTypes: {\n        size: {\n            options: [\"small\", \"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n        informativeIcon: {\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-dropdown-item\n        is-selected=\"${args.isSelected}\"\n        size=\"${args.size}\"\n        disabled=\"${args.disabled}\"\n        ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"` : \"\"}\n        value=\"${args.value}\"\n        label=\"${args.label}\"\n        set-aria-label=\"${args.setAriaLabel}\"\n        has-checkmark=\"${args.hasCheckmark}\"\n        checkmark-variant=\"${args.checkmarkVariant}\"\n        checkmark-alignment=\"${args.checkmarkAlignment}\"\n        danger=\"${args.danger}\"\n        is-active=\"${args.isActive}\"\n        link-href=\"${args.linkHref || \"\"}\"\n        link-target=\"${args.linkTarget || \"\"}\"\n        link-rel=\"${args.linkRel || \"\"}\"\n    ></vds-dropdown-item>\n</div>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    isSelected: false,\n    size: \"medium\",\n    label: \"Item\",\n    value: \"Item\",\n    setAriaLabel: \"Item\",\n    disabled: false,\n    informativeIcon: \"add\",\n    hasCheckmark: false,\n    checkmarkVariant: \"checkmark\",\n    checkmarkAlignment: \"start\",\n    isActive: false,\n    danger: false\n}\n\nconst codeCheckboxTemplate = (args) => {\n    return `\n${style}\n<div class=\"container\">\n    <vds-dropdown-item\n        is-selected=\"${args.isSelected}\"\n        size=\"${args.size}\"\n        disabled=\"${args.disabled}\"\n        ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"` : \"\"}\n        value=\"${args.value}\"\n        label=\"${args.label}\"\n        set-aria-label=\"${args.setAriaLabel}\"\n        has-checkmark=\"${args.hasCheckmark}\"\n        checkmark-variant=\"${args.checkmarkVariant}\"\n        checkmark-alignment=\"${args.checkmarkAlignment}\"\n        danger=\"${args.danger}\"\n    ></vds-dropdown-item>\n</div>\n`;\n}\n\nexport const BasicCheckboxUsage = codeCheckboxTemplate.bind({});\n\nBasicCheckboxUsage.args = {\n    isSelected: false,\n    size: \"medium\",\n    label: \"Item with checkbox\",\n    value: \"Item\",\n    setAriaLabel: \"Item\",\n    disabled: false,\n    informativeIcon: \"add\",\n    hasCheckmark: false,\n    checkmarkVariant: \"checkbox\",\n    checkmarkAlignment: \"end\",\n    danger: false\n}\n\nexport const LinkUsage = codeTemplate.bind({});\n\nLinkUsage.args = {\n    linkHref: \"http://example.com\",\n    linkTarget: \"_blank\",\n    linkRel: \"noopener noreferrer\",\n    isSelected: false,\n    size: \"medium\",\n    label: \"Item\",\n    value: \"Item\",\n    setAriaLabel: \"Item\",\n    disabled: false,\n    informativeIcon: \"add\",\n    hasCheckmark: false,\n    checkmarkVariant: \"checkmark\",\n    checkmarkAlignment: \"start\",\n    isActive: false,\n    danger: false\n}\n\nLinkUsage.argTypes = {\n    linkTarget: {\n        options: [\"_self\", \"_blank\", \"_parent\", \"_top\"],\n        control: { type: \"select\" }\n    }\n}"]}

package/dist/collection/components/dropdown-item/vds-dropdown-item-clicked-event.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dropdown-item-clicked-event.js","sourceRoot":"","sources":["../../../src/components/dropdown-item/vds-dropdown-item-clicked-event.tsx"],"names":[],"mappings":"","sourcesContent":["export interface DropdownItemClickedEvent {\n  value: string;\n  label: string;\n  icon: string;\n  selected: boolean;\n  event: MouseEvent;\n}"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dropdown-item.js","sourceRoot":"","sources":["../../../src/components/dropdown-item/vds-dropdown-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, Element, EventEmitter } from '@stencil/core';\nimport { HTMLStencilElement, Watch } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { handleRefClick } from '../../utils/utils';\nimport { DropdownItemClickedEvent } from './vds-dropdown-item-clicked-event';\nimport { generateCheckbox, generateCheckmarkIconButton, generateInformativeIcon, generateLabel } from '../base-item/base-item';\n\n@Component({\n  tag: 'vds-dropdown-item',\n  styleUrl: 'vds-dropdown-item.scss',\n  shadow: true,\n})\nexport class VdsDropdownItem {\n  /** Puts the VdsDropdownItem in disabled state */\n  @Prop({ mutable: true }) disabled: boolean = false;\n  /** Define the icon value */\n  @Prop({ mutable: true }) informativeIcon: string;\n  /** Define item as active when is true */\n  @Prop({ mutable: true }) isActive: 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 item value */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  /** Define item label */\n  @Prop({ mutable: true, reflect: true }) label: string;\n  /** Define aria-label */\n  @Prop({ mutable: true, reflect: true }) setAriaLabel: string;\n  /** Set size of menu item */\n  @Prop({ mutable: true }) size: 'small' | '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 dropdown item to danger state.  */\n  @Prop({ mutable: true, reflect: true }) danger: boolean = false;\n\n  /** Emits event when item gets clicked */\n  @Event() dropdownItemClicked: EventEmitter<DropdownItemClickedEvent>;\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    handleRefClick(this.linkHref, this.linkTarget, this.linkRel);\n    this.handleSelected(evt);\n    this.dropdownItemClicked.emit({\n      value: this.value,\n      label: this.label,\n      icon: this.informativeIcon,\n      event: evt,\n      selected: this.isSelected,\n    });\n  }\n\n  private handleSelected(evt: MouseEvent): void {\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\n  private generateCheckbox() {\n    return generateCheckbox(this.isSelected, this.size, this.disabled, this.isActive, this.danger);\n  }\n\n  private generateInformativeIcon() {\n    return generateInformativeIcon(this.informativeIcon, this.value, this.size, this.disabled, this.isActive, this.danger);\n  }\n\n  private generateLabel() {\n    return generateLabel(this.label, this.size, this.disabled, this.isActive, this.danger);\n  }\n\n  private setAriaLabelText() {\n    return this.setAriaLabel ? this.setAriaLabel : this.label ? this.label : this.value;\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? 'vds-dropdown-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={combineClasses(\n            'vds-dropdown-item',\n            `vds-dropdown-item--size-${this.size}`,\n            this.disabled ? 'vds-dropdown-item--disabled' : '',\n            this.isActive || this.isSelected ? 'vds-dropdown-item--active' : '',\n            this.danger ? 'vds-dropdown-item--danger' : '',\n            `vds-dropdown-item__alignment-${this.checkmarkAlignment}`,\n          )}\n        >\n          <div class=\"vds-dropdown-item__content\">\n            {this.checkmarkAlignment === 'start' && this.hasCheckmark\n              ? this.checkmarkVariant === 'checkmark'\n                ? this.generateCheckmarkIconButton()\n                : this.generateCheckbox()\n              : null}\n            {this.informativeIcon && this.generateInformativeIcon()}\n            {this.generateLabel()}\n            {this.checkmarkAlignment === 'end' && this.hasCheckmark ? (this.checkmarkVariant === 'checkmark' ? this.generateCheckmarkIconButton() : this.generateCheckbox()) : null}\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dropdown-multiselect/vds-basic-dropdown-multiselect.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-basic-dropdown-multiselect.js","sourceRoot":"","sources":["../../../src/components/dropdown-multiselect/vds-basic-dropdown-multiselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Method, Prop, h, Event, EventEmitter, Element } from \"@stencil/core\";\nimport { AttachInternals, HTMLStencilElement, Listen, State, Watch } from \"@stencil/core/internal\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { getIconSize, getIconColor, getActionIconButtonSize } from \"../../utils/icon-attr.utils\";\nimport { updateFloatingBoxPosition } from \"../../utils/floating-engine-utils\";\nimport { emitNativeInputEvent, getSelectedItemsText, getValidOptions, selectSelectedItems, setDropdownStyles, toggleContainerDisplay, unselectAllItems, unselectNonSelectedItems, updateContainerWidth } from \"../basic-dropdown/vds-basic-dropdown.utils\";\nimport { DropdownItemClickedEvent } from \"../dropdown-item/vds-dropdown-item-clicked-event\";\nimport { arrayIsEqual } from \"../../utils/array-utils\";\n\n@Component({\n  tag: \"vds-basic-dropdown-multiselect\",\n  styleUrl: \"vds-basic-dropdown-multiselect.scss\",\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsBasicDropdownMultiselect {\n  /** Sets the dropdown's size. */\n  @Prop({ mutable: true }) size: \"small\" | \"medium\" | \"large\" = \"medium\";\n  /** Sets the dropdown's value. */\n  @Prop({ mutable: true }) value: string[] | string = [];\n  /** Allows user to define a information icon to the left of the dropdown. */\n  @Prop({ mutable: true }) informativeIcon: string;\n  /** Sets the dropdown's placeholder. */\n  @Prop({ mutable: true }) placeholder: string;\n  /** Sets the dropdown in disabled state. */\n  @Prop({ mutable: true,  reflect: true }) disabled: boolean;\n  /** Sets the dropdown in readonly state. */\n  @Prop({ mutable: true,  reflect: true }) isReadonly: boolean;\n  /** Sets the dropdown in error state. */\n  @Prop({ mutable: true, reflect: true }) error: boolean;\n  /** Sets the dropdown's trigger event. */\n  @Prop({ mutable: true }) event: \"click\" = \"click\";\n  /** Sets the dropdown's value max items selected in plain text. */\n  @Prop() displaySelectionLimit: number;\n  /** Sets displaySelectionLimit text */\n  @Prop() displaySelectionLimitText: string = \"Items selected\";\n  /** Sets the dropdown's clear button visibility. */\n  @Prop({ mutable: true }) showClearButton: boolean = true;\n  /** Set the max height value for the floating container of the items */\n  @Prop({ mutable: true }) maxHeight: string;\n  /** Sets the width value for the floating container of the items to match the dropdown width */\n  @Prop({ mutable: true }) matchWidth: boolean = false;\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  /** Toggles the overlay element, allowing interaction only with this element when active */\n  @Prop() backdrop: boolean = false;\n\n  /** Emits event when floating element gets opens */\n  @Event() opened: EventEmitter<void>;\n  /** Emits event when floating element gets closes */\n  @Event() closed: EventEmitter<void>;\n  /** Emits event when an item is selected, this event contains the value of the selected item */\n  @Event() valueChanged: EventEmitter<string[]>;\n  /** Emits an event when the clear button is clicked */\n  @Event() cleared: EventEmitter<boolean>;\n\n  @State() isOpened: boolean = false;\n\n  @Element() hostEl: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private dropdownTrigger: HTMLButtonElement;\n  private dropdownContent: HTMLDivElement;\n  private options: HTMLVdsDropdownItemElement[] = [];\n  private observer: MutationObserver;\n\n  private floatingCleanUp: () => void;\n\n  componentDidLoad(): void {\n    this.setValueHandler(this.value);\n    selectSelectedItems(this.dropdownContent, this.value);\n    this.dropdownTrigger?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    this.dropdownContent?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    this.setListenerForChildren();\n  }\n\n  disconnectedCallback() {\n    this.dropdownTrigger.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    this.dropdownContent.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    window.removeEventListener('click', this.handleClickOut.bind(this));\n    this.observer?.disconnect();\n  }\n  private setListenerForChildren(): void {\n    const config = {\n      childList: true,\n      subtree: true\n    };\n    this.observer = new MutationObserver(() => {\n      this.options = Array.from(this.hostEl.querySelectorAll(\"vds-dropdown-item\"));\n    });\n    this.observer.observe(this.hostEl, config);\n  }\n\n  // Sets the value prop validating whether the newValue is string or array.\n  @Watch(\"value\")\n  setValueHandler(newValue: string[] | string) {\n    if (!newValue) {\n      this.value = [];\n      return;\n    }\n    if (typeof newValue === \"string\") {\n      this.value = getValidOptions(this.dropdownContent, newValue.split(\",\"));\n    }\n    if (Array.isArray(newValue)) {\n      const uniqueValues = [...new Set(newValue)];\n      const selectedOptions = getValidOptions(this.dropdownContent, uniqueValues);\n      this.value = arrayIsEqual(this.value as string[], selectedOptions) ? this.value : selectedOptions;\n    }\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue((this.value as string[]).join(\",\"));\n    }\n\n    unselectNonSelectedItems(this.dropdownContent, this.value);\n    selectSelectedItems(this.dropdownContent, this.value);\n\n    if (this.value && this.value.length === 0) {\n      unselectAllItems(this.dropdownContent);\n    }\n  }\n\n  componentDidRender() {\n    this.options = Array.from(this.hostEl.querySelectorAll(\"vds-dropdown-item\"));\n    updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, 'bottom', false);\n    updateContainerWidth(this.dropdownTrigger, this.matchWidth, this.dropdownContent);\n  }\n\n  @Watch(\"isOpened\")\n  async toggleDropdown(): Promise<void> {\n    if (this.isOpened) {\n      toggleContainerDisplay(this.dropdownContent, true);\n      this.opened.emit();\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, \"bottom\", this.autoPosition);\n    } else {\n      toggleContainerDisplay(this.dropdownContent, false);\n      this.closed.emit();\n      this.floatingCleanUp();\n    }\n  }\n\n  /* Open the floating element(menu) of the Dropdown. */\n  @Method()\n  public async open(): Promise<void> {\n    this.isOpened = true;\n  }\n\n  /* Close the floating element(menu) of the Dropdown. */\n  @Method()\n  public async close(): Promise<void> {\n    this.isOpened = false;\n  }\n  \n  /**\n   * Clears the selected options and resets the value of the dropdown.\n   *\n   * @returns {Promise<void>} A promise that resolves when the clearing operation is complete.\n   */\n  @Method()\n  public async clear(): Promise<void> {\n    this.value = [];\n    unselectAllItems(this.dropdownContent);\n    this.cleared.emit(true);\n  }\n\n  /**\n   *  Gets the target that will manage the menu\n   *  returns a promise with the target HTMLElement.\n   * \n   *  @returns {Promise<HTMLElement>} A promise that resolves with the target html element.\n   */\n  @Method()\n  public async getTarget(): Promise<HTMLElement | null> {\n    return this.dropdownTrigger;\n  }\n  /**\n   *  Gets the selected value of the dropdown\n   *  returns a promise with the value.\n   * \n   *  @returns {Promise<string[]>} A promise that resolves with the value as string[].\n   */\n  @Method()\n  public async getValue(): Promise<string[]> {\n    return this.value as string[];\n  }\n  \n  /**\n   * Sets the selected value(s) for the dropdown.\n   *\n   * @param {string[] | string} value The new value or array of values to select.\n   * @returns {Promise<void>} A promise that resolves when the value is set.\n   */\n  @Method()\n  public async setValue(value: string[] | string): Promise<void> {\n    this.setValueHandler(value);\n  }\n\n  /* Close the floating element when click outside */\n  @Listen('click', { target: 'window' })\n  private handleClickOut(evt: MouseEvent): void {\n    evt.stopPropagation();\n    const target = evt.target as HTMLElement;\n    const isClickInside = this.hostEl.contains(target as Node);\n    const isClickInsideParentDropdown = target.nodeName === \"VDS-DROPDOWN-MULTISELECT\" && target.shadowRoot && (evt.target as HTMLElement).shadowRoot.contains(this.hostEl);\n    if (!isClickInside && !isClickInsideParentDropdown) {\n      this.close();\n    }\n  }\n\n  /**\n   * Listen when Dropdown Item element is clicked to close Dropdown Items window, set the value and emit the changes.\n   *\n   * @param {CustomEvent<DropdownItemClickedEvent>} event The dropdown item clicked event.\n   */\n  @Listen(\"dropdownItemClicked\")\n  handleDropdownSelection(event: CustomEvent<DropdownItemClickedEvent>): void {\n    const item = event.target as HTMLVdsDropdownItemElement;\n    const value = event.detail.value;\n    item.isSelected = !item.isSelected;\n    if (item.isSelected) {\n      this.value = [...this.value, value];\n    } else{\n      this.value = (this.value as string[]).filter(v => v !== value)\n    }\n    \n    this.valueChanged.emit(this.value);\n    emitNativeInputEvent(this.hostEl);\n  }\n\n  /* Open the floating element with click on the trigger element  */\n  private handleClick(evt: Event): void {\n    evt.stopImmediatePropagation();\n    if (this.event === \"click\" && !this.disabled && !this.isReadonly) {\n      this.isOpened = !this.isOpened\n    }\n  }\n\n  /* Close the floating element with keydown on the trigger element  */\n  private handleFloatingKeydown(event: KeyboardEvent): void {\n    event.stopImmediatePropagation();\n    if (event.key === 'Escape' || event.key === 'Esc') {\n      this.close();\n    }\n  }\n\n  private clearIconClick(evt: Event): void {\n    evt.stopImmediatePropagation();\n    this.clear();\n    this.close();\n  }\n\n  private renderLabelValue(): HTMLStencilElement {\n    const selectedValue = this.getTextValue();\n    return <span class={combineClasses(\n      \"vds-dropdown-multiselect__label\",\n      `vds-dropdown-multiselect__label--${this.hasValue() ? \"value\" : \"placeholder\"}`)}\n    >{selectedValue}</span>\n  }\n\n  private getTextValue(): string {\n    if (this.displaySelectionLimit > 0 && this.value.length > this.displaySelectionLimit) {\n      return `${this.value.length} ${this.displaySelectionLimitText}`;\n    }\n\n    return this.hasValue() ? getSelectedItemsText(this.dropdownContent, this.value as string[]).join(\", \") : this.placeholder;\n  }\n\n  private getIconColor() {\n    return getIconColor(this.disabled, this.isReadonly);\n  }\n  \n  private renderInformativeIcon(): HTMLStencilElement {\n    return <vds-icon svgIcon={this.informativeIcon} color={this.getIconColor()} size={getIconSize(this.size)}></vds-icon>\n  }\n\n  private renderClearIcon(): HTMLStencilElement {\n    return (\n      <vds-icon-button\n        icon=\"close\"\n        variant=\"secondary\"\n        size={getActionIconButtonSize(this.size)}\n        onClick={evt => {\n          this.clearIconClick(evt);\n        }}\n        disabled={this.disabled || this.isReadonly}\n        setAriaLabel=\"clear\"\n      ></vds-icon-button>\n    );\n  }\n\n  private renderDropdownIcon(): HTMLStencilElement {\n    return <vds-icon svgIcon={this.isOpened ? 'chevron-up' : 'chevron-down'} color={this.getIconColor()} size={getIconSize(this.size)}></vds-icon>;\n  }\n\n  private hasValue(): boolean {\n    return Array.isArray(this.value) && this.value && this.value.length > 0;\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={combineClasses(this.disabled ? \"vds-basic-dropdown-multiselect--disabled\" : \"\")} title={this.getTextValue()}>\n        <div class={\"vds-dropdown-multiselect__container\"}>\n          <button\n            disabled={this.disabled}\n            ref={(el): void => {\n              if (el) this.dropdownTrigger = el;\n            }}\n            class={combineClasses(\n              \"vds-dropdown-multiselect___trigger\",\n              `vds-dropdown-multiselect___trigger--size-${this.size}`,\n              this.disabled ? \"vds-dropdown-multiselect___trigger--disabled\" : \"\",\n              this.isReadonly ? \"vds-dropdown-multiselect___trigger--readonly\" : \"\",\n              this.error ? \"vds-dropdown-multiselect___trigger--error\" : \"\" \n            )}\n            onClick={(evt: MouseEvent) => {\n              this.handleClick(evt);\n            }}\n          >\n            {this.informativeIcon && this.renderInformativeIcon()}\n            {this.renderLabelValue()}\n            <div class=\"vds-dropdown-multiselect__trigger-icons\">\n              {this.hasValue() && this.showClearButton && this.renderClearIcon()}\n              {this.renderDropdownIcon()}\n            </div>\n          </button>\n          {this.backdrop && this.isOpened ? <div class=\"vds-floating-backdrop\" onClick={this.close.bind(this)}></div> : ''}\n          <div\n            ref={(el): void => {\n              if (el) this.dropdownContent = el;\n            }}\n            class={combineClasses(\n              \"vds-dropdown-multiselect__content\",\n              this.maxHeight ? \"has-scroll\" : \"\",\n              this.options.length === 0 ? \"no-shadow\" : \"\"\n            )}\n          >\n            <div \n            class={combineClasses(\n              'vds-dropdown-multiselect__content-options', \n              (this.maxHeight ? 'scrollable' : '')\n            )}\n            style={setDropdownStyles(this.maxHeight)}>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dropdown-multiselect/vds-basic-dropdown-multiselect.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-basic-dropdown-multiselect.stories.js","sourceRoot":"","sources":["../../../src/components/dropdown-multiselect/vds-basic-dropdown-multiselect.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n    title: 'VDS/Components/Dropdown/Basic-dropdown-multiselect',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n        design: {\n            type: \"figma\",\n            url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29047-161951\"\n        }\n    },\n    argTypes: {\n        size: {\n            options: [\"small\", \"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n        informativeIcon: {\n            options: [\"add\", \"calendar\",\"train\",\"administration\"],\n            control: { type: \"select\" }\n        },\n        event: {\n            options: [\"click\", \"hover\"],\n            control: { type: \"select\" }\n        },\n    },\n};\nconst styles = `\n    .container {\n        position: relative;\n        padding:10px;\n        width: 500px;\n        margin: auto;\n    }\n`;\n\nconst codeTemplate = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n    <vds-basic-dropdown-multiselect\n        size=\"${args.size}\"\n        value=\"${args.value}\"\n        placeholder=\"${args.placeholder}\"\n        ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"`: \"\"}\n        ${args.disabled ? \"disabled\" : \"\"}\n        ${args.isReadonly ? \"is-readonly\" : \"\"}\n        ${args.error ? \"error\" : \"\"}\n        event=\"${args.event}\"\n        display-selection-limit=\"${args.displaySelectionLimit}\"\n        display-selection-limit-text=\"${args.displaySelectionLimitText}\"\n        show-clear-button=\"${args.showClearButton}\"\n        max-height=\"${args.maxHeight}\"\n        match-width=\"${args.matchWidth}\"\n        auto-position=\"${args.autoPosition}\"\n        backdrop=\"${args.backdrop}\"\n    >\n        <vds-dropdown-group-header class=\"content-item\" size=\"${args.size}\">Fruits</vds-dropdown-group-header>\n        <vds-dropdown-item class=\"content-item\" value=\"apple\" label=\"Apple\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"banana\" label=\"Banana\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"orange\" label=\"Orange\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"grape\" label=\"Grape\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"strawberry\" label=\"Strawberry\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n\n        <vds-dropdown-group-header size=\"${args.size}\">Meats</vds-dropdown-group-header>\n        <vds-dropdown-item class=\"content-item\" value=\"chicken\" label=\"Chicken\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"beef\" label=\"Beef\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"pork\" label=\"Pork\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"fish\" label=\"Fish\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"lamb\" label=\"Lamb\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n    </vds-basic-dropdown-multiselect>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    size: \"medium\",\n    value: \"\",\n    placeholder: \"Select options\",\n    informativeIcon: undefined,\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    event: \"click\",\n    displaySelectionLimit: 0,\n    displaySelectionLimitText: \"Items selected\",\n    showClearButton: true,\n    maxHeight: \"\",\n    matchWidth: true,\n    autoPosition: false,\n    backdrop: true\n}\n\nconst codeTemplateDisplayLimit = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n    <vds-basic-dropdown-multiselect\n        size=\"medium\"\n        value=\"apple,banana,orange,kiwi,pear\"\n        placeholder=\"Select a fruit\"\n        display-selection-limit=\"${args.displaySelectionLimit}\"\n        display-selection-limit-text=\"${args.displaySelectionLimitText}\"\n        match-width=\"${args.matchWidth}\"\n        auto-position=\"${args.autoPosition}\"\n    >\n        <vds-dropdown-group-header class=\"content-item\">Fruits</vds-dropdown-group-header>\n        <vds-dropdown-item class=\"content-item\" value=\"apple\" label=\"Apple\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"banana\" label=\"Banana\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"orange\" label=\"Orange\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"grape\" label=\"Grape\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"strawberry\" label=\"Strawberry\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"mango\" label=\"Mango\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"pineapple\" label=\"Pineapple\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"kiwi\" label=\"Kiwi\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"peach\" label=\"Peach\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"pear\" label=\"Pear\" has-checkmark=\"true\"></vds-dropdown-item>\n    </vds-basic-dropdown-multiselect>\n`;\n}\n\nexport const DisplayLimit = codeTemplateDisplayLimit.bind({});\n\nDisplayLimit.args = {\n    displaySelectionLimit: 4,\n    displaySelectionLimitText: \"Items selected\",\n    matchWidth: true,\n    autoPosition: false\n}\n\nconst codeTemplateMaxContentLimit = (args) => {\n    const meals = [\n        {\n          name: \"Fruits\",\n          options: [\n            { label: \"Banana\", value: \"banana\" },\n            { label: \"Apple\", value: \"apple\" },\n            { label: \"Orange\", value: \"orange\" },\n            { label: \"Mango\", value: \"mango\" },\n            { label: \"Pineapple\", value: \"pineapple\" },\n            { label: \"Grapes\", value: \"grapes\" },\n            { label: \"Strawberry\", value: \"strawberry\" },\n            { label: \"Blueberry\", value: \"blueberry\" },\n            { label: \"Kiwi\", value: \"kiwi\" },\n            { label: \"Watermelon\", value: \"watermelon\" }\n          ]\n        },\n        {\n          name: \"Meats\",\n          options: [\n            { label: \"Chicken\", value: \"chicken\" },\n            { label: \"Beef\", value: \"beef\" },\n            { label: \"Pork\", value: \"pork\" },\n            { label: \"Lamb\", value: \"lamb\" },\n            { label: \"Salmon\", value: \"salmon\" },\n            { label: \"Tuna\", value: \"tuna\" },\n            { label: \"Shrimp\", value: \"shrimp\" },\n            { label: \"Crab\", value: \"crab\" },\n            { label: \"Lobster\", value: \"lobster\" },\n            { label: \"Sausage\", value: \"sausage\" }\n          ]\n        },\n        {\n          name: \"Desserts\",\n          options: [\n            { label: \"Ice Cream\", value: \"ice_cream\" },\n            { label: \"Cake\", value: \"cake\" },\n            { label: \"Cookie\", value: \"cookie\" },\n            { label: \"Pie\", value: \"pie\" },\n            { label: \"Brownie\", value: \"brownie\" },\n            { label: \"Chocolate\", value: \"chocolate\" },\n            { label: \"Candy\", value: \"candy\" },\n            { label: \"Donut\", value: \"donut\" },\n            { label: \"Muffin\", value: \"muffin\" },\n            { label: \"Tiramisu\", value: \"tiramisu\" }\n          ]\n        }\n    ];\n\n    let htmlItems = \"\";\n\n    for(let item of meals) {\n        htmlItems += `<vds-dropdown-group-header class=\"content-item\" size=\"${args.size}\">${item.name}</vds-dropdown-group-header>`\n        for(let subitem of item.options) {\n            htmlItems += `<vds-dropdown-item class=\"content-item\" value=\"${subitem.value}\" label=\"${subitem.label}\" size=\"${args.size}\" has-checkmark=\"false\"></vds-dropdown-item>`\n        }\n    }\n\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n    <vds-basic-dropdown-multiselect\n        size=\"${args.size}\"\n        event=\"${args.event}\"\n        ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"`: \"\"}\n        placeholder=\"Select a meal\"\n        match-width=\"${args.matchWidth}\"\n        max-height=\"${args.maxHeight}\"\n        auto-position=\"${args.autoPosition}\"\n    >\n        ${htmlItems}\n    </vds-basic-dropdown-multiselect>\n`;\n}\n\nexport const MaxContent = codeTemplateMaxContentLimit.bind({});\n\nMaxContent.args = {\n    size: \"medium\",\n    event: \"click\",\n    informativeIcon: undefined,\n    matchWidth: true,\n    maxHeight: \"300px\",\n    autoPosition: false\n}\n\n\nconst codeCheckboxTemplate = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n    <vds-basic-dropdown-multiselect\n        size=\"${args.size}\"\n        value=\"${args.value}\"\n        placeholder=\"${args.placeholder}\"\n        ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"`: \"\"}\n        ${args.disabled ? \"disabled\" : \"\"}\n        ${args.isReadonly ? \"is-readonly\" : \"\"}\n        ${args.error ? \"error\" : \"\"}\n        event=\"${args.event}\"\n        display-selection-limit=\"${args.displaySelectionLimit}\"\n        display-selection-limit-text=\"${args.displaySelectionLimitText}\"\n        show-clear-button=\"${args.showClearButton}\"\n        match-width=\"${args.matchWidth}\"\n        auto-position=\"${args.autoPosition}\"\n    >\n        <vds-dropdown-group-header class=\"content-item\" size=\"${args.size}\">Weekdays</vds-dropdown-group-header>\n        <vds-dropdown-item class=\"content-item\" value=\"monday\" label=\"Monday\" size=\"${args.size}\" has-checkmark=\"true\" checkmark-variant=\"checkbox\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"tuesday\" label=\"Tuesday\" size=\"${args.size}\" has-checkmark=\"true\" checkmark-variant=\"checkbox\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"wednesday\" label=\"Wednesday\" size=\"${args.size}\" has-checkmark=\"true\" checkmark-variant=\"checkbox\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"thursday\" label=\"Thursday\" size=\"${args.size}\" has-checkmark=\"true\" checkmark-variant=\"checkbox\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"friday\" label=\"Friday\" size=\"${args.size}\" has-checkmark=\"true\" checkmark-variant=\"checkbox\"></vds-dropdown-item>\n\n        <vds-dropdown-group-header class=\"content-item\" size=\"${args.size}\">Weekends</vds-dropdown-group-header>\n        <vds-dropdown-item class=\"content-item\" value=\"saturday\" label=\"Saturday\" size=\"${args.size}\" has-checkmark=\"true\" checkmark-variant=\"checkbox\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"sunday\" label=\"Sunday\" size=\"${args.size}\" has-checkmark=\"true\" checkmark-variant=\"checkbox\"></vds-dropdown-item>\n    </vds-basic-dropdown-multiselect>\n`;\n}\n\nexport const CheckboxUsage = codeCheckboxTemplate.bind({});\n\nCheckboxUsage.args = {\n    size: \"medium\",\n    value: \"\",\n    placeholder: \"Select your favorite days of the week\",\n    informativeIcon: undefined,\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    event: \"click\",\n    displaySelectionLimit: 3,\n    displaySelectionLimitText: \"days selected\",\n    showClearButton: true,\n    matchWidth: true,\n    autoPosition: false\n}"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-field.js","sourceRoot":"","sources":["../../../src/components/field/vds-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAsB,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAO7D,MAAM,OAAO,QAAQ;IALrB;QAQE,6CAA6C;QACpB,eAAU,GAAY,KAAK,CAAA;QACpD,uCAAuC;QACd,eAAU,GAAY,KAAK,CAAA;QAOpD,4BAA4B;QACpB,SAAI,GAAiC,QAAQ,CAAC;KA2CvD;IAzCS,QAAQ;QACd,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC;QAE7B,OAAO,CACL,iBACE,UAAU,EAAE,IAAI,CAAC,KAAK,EACtB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,GAEL,CACb,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO,IAAI,CAAC;QAElC,OAAO,CACL,YACE,KAAK,EAAE,2BAA2B,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,2BAA2B,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,IAC9G,IAAI,CAAC,UAAU,CACb,CACR,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;YACvD,4DACE,KAAK,EACH,cAAc,CAAC,uBAAuB,EACtC,+BAA+B,IAAI,CAAC,IAAI,EAAE,EAC1C,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;gBAE/D,IAAI,CAAC,QAAQ,EAAE;gBAChB,8DAAa;gBACZ,IAAI,CAAC,aAAa,EAAE;gBACpB,IAAI,CAAC,YAAY,IAAI,6DAAM,KAAK,EAAE,2BAA2B,IAAG,IAAI,CAAC,YAAY,CAAQ,CACtF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-field',\n  styleUrl: 'vds-field.scss',\n  shadow: true,\n})\nexport class VdsField {\n  /** Sets the field's label */\n  @Prop() label: string\n  /** Toggles the required sign in the field */\n  @Prop({ mutable: true }) isRequired: boolean = false \n  /** Sets the field in disabled state */\n  @Prop({ mutable: true }) isDisabled: boolean = false \n  /** Sets the field's helper text */\n  @Prop({ mutable: true }) helperText: string;\n  /** Sets the field's helper text color */\n  @Prop({ mutable: true }) helperTextColor: Colors;\n  /** Sets the field's error message */\n  @Prop({ mutable: true }) errorMessage: string;\n  /** Sets the field's size */\n  @Prop() size: \"small\" | \"medium\" | \"large\" = \"medium\";\n\n  private getLabel(): HTMLStencilElement | null {\n    if (!this.label) return null;\n\n    return (\n      <vds-label \n        labelValue={this.label}\n        required={this.isRequired}\n        size={this.size}\n      >\n      </vds-label>\n    );\n  }\n\n  private getHelperText(): HTMLStencilElement | null {\n    if (!this.helperText) return null;\n\n    return (\n      <span \n        class={`vds__field--helper-text ${this.helperTextColor ? `vds__field--helper-text-${this.helperTextColor}` : \"\"}`}>\n          {this.helperText}\n      </span>\n    );\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.isDisabled ? \"vds-field--disabled\" : \"\"}>\n        <div \n          class={\n            combineClasses(\"vds__field__container\",\n            `vds__field__container--size-${this.size}`,\n            `${this.isDisabled ? \"vds__field__container--disabled\" : \"\"}`)}\n        >\n          {this.getLabel()}\n          <slot></slot>\n          {this.getHelperText()}\n          {this.errorMessage && <span class={\"vds__field--error-message\"}>{this.errorMessage}</span>}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-field.stories.js","sourceRoot":"","sources":["../../../src/components/field/vds-field.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,4BAA4B,CAAC;AAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AAEtD,eAAe;IACX,KAAK,EAAE,sBAAsB;IAC7B,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACJ;IACD,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,OAAO,EAAE,CAAC,GAAG,UAAU,EAAE,SAAS,CAAC;YACnC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,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;;;;;;;;;;;;CAYd,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1B,OAAO;SACF,MAAM;;aAEF,IAAI,CAAC,KAAK;qBACF,IAAI,CAAC,YAAY;mBACnB,IAAI,CAAC,UAAU;yBACT,IAAI,CAAC,MAAM;YACxB,IAAI,CAAC,IAAI;mBACF,IAAI,CAAC,UAAU;mBACf,IAAI,CAAC,UAAU;;;;;;CAMjC,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,SAAS;IAChB,YAAY,EAAE,EAAE;IAChB,UAAU,EAAE,EAAE;IACd,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,QAAQ;IACd,UAAU,EAAE,KAAK;IACjB,UAAU,EAAE,KAAK;CACpB,CAAC","sourcesContent":["import variables from \"../../constants/color-vars\";\n\nconst COLORS_KEY = Object.keys(variables.palette.all);\n\nexport default {\n    title: 'VDS/Components/Field',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n    },\n    argTypes: {\n        colors: {\n            options: [...COLORS_KEY, undefined],\n            control: { type: \"select\" }\n        },\n        size: {\n            options: [\"small\", \"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n    },\n};\n\nconst styles = `\n    vds-field {\n        padding: 20px;\n    }\n    .content {\n        height: 2.25rem;\n        width: 19.6rem;\n        background: var(--surface-overlay-hover);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n`;\n \nconst codeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-field\n    label=\"${args.label}\"\n    error-message=\"${args.errorMessage}\"\n    helper-text=\"${args.helperText}\"\n    helper-text-color=\"${args.colors}\"\n    size=\"${args.size}\"\n    is-required=\"${args.isRequired}\"\n    is-disabled=\"${args.isDisabled}\"\n>\n    <div class=\"content\">\n        <vds-icon svg-icon=\"reverse\" color=\"color-icon-white-high\"></vds-icon>\n    </div>\n</vds-field>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    label: \"Field 1\",\n    errorMessage: \"\",\n    helperText: \"\",\n    colors: undefined,\n    size: \"medium\",\n    isRequired: false,\n    isDisabled: false\n};"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-footer.js","sourceRoot":"","sources":["../../../src/components/footer/vds-footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Element, State } from '@stencil/core/internal';\nimport { setNodeObserver } from '../../utils/node-utils';\n\n@Component({\n  tag: 'vds-footer',\n  styleUrl: 'vds-footer.scss',\n  shadow: true,\n})\nexport class VdsFooter {\n  /**\n   *  Sets the type for the footer, expandable shows an extra layer of the footer.\n   *  Default is only what is visible.\n   *  and custom allows to set the content of the footer.\n   */\n  @Prop() type: 'default' | 'expandable' | 'custom' = 'default';\n  /** Sets the app version to be display in the footer */\n  @Prop() appVersion: string;\n  /** Sets the expanded content position, default is bottom */\n  @Prop() expandedContentPosition: 'top' | 'bottom' = 'bottom';\n  /** Defines the text in the central block of the footer */\n  @Prop({ mutable: true }) centralText: string = 'Wabtec Corporation. All rights reserved.';\n  /** Modify the text in the \"powered by\" section of the footer */\n  @Prop() poweredByText: string = 'Powered by';\n\n  @Element() host: HTMLStencilElement;\n\n  @State() isExpanded: boolean = false;\n\n  private currentYear: number;\n  private observer: MutationObserver;\n\n  componentWillRender(): void {\n    this.setFooterOptions();\n  }\n\n  componentWillLoad(): void {\n    this.setCurrentYear();\n  }\n\n  componentDidLoad(): void {\n    this.observer = setNodeObserver(this.setFooterOptions, this.host, this);\n  }\n\n  disconnectedCallback(): void {\n    this.observer.disconnect();\n  }\n\n  private setFooterOptions(): void {\n    if (this.type !== 'custom') {\n      Array.from(this.host.children).forEach(child => {\n        if (child.nodeName !== 'VDS-LINK' && child.slot !== 'expandable-content') {\n          child.remove();\n        }\n      });\n    }\n    this.setSeparators();\n  }\n\n  private setSeparators(): void {\n    const linkElements = Array.from(this.host.children).filter(\n      (child: HTMLElement) => child.nodeName === 'VDS-LINK',\n    );\n    if (linkElements.length <= 1) return;\n    for (let i = linkElements.length - 1; i > 0; i--) {\n      const divider = document.createElement('vds-divider');\n      divider.setAttribute('orientation', 'vertical');\n      divider.setAttribute('padding', 'spacing-01');\n      divider.style.setProperty('height', '1.25rem');\n      this.host.insertBefore(divider, linkElements[i]);\n    }\n  }\n\n  private setCurrentYear(): void {\n    this.currentYear = new Date().getFullYear();\n  }\n\n  private toggleExpand(): void {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  private renderExpandableButton(): HTMLStencilElement {\n    if (this.type === 'expandable') {\n      return (\n        <vds-icon-button\n          class=\"vds__footer--expand-button\"\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={() => this.toggleExpand()}\n          icon={this.isExpanded ? 'chevron-up' : 'chevron-down'}\n        />\n      );\n    }\n  }\n\n  private renderCustomFooter(): HTMLElement {\n    return (\n      <div class=\"vds__footer--container\">\n        <div class=\"vds__footer--slot-start\">\n          <slot name=\"start\" />\n        </div>\n        <div class=\"vds__footer--slot-center\">\n          <slot name=\"center\" />\n        </div>\n        <div class=\"vds__footer--slot-end\">\n          <slot name=\"end\" />\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        {this.type === 'expandable' && this.expandedContentPosition === 'top' && this.isExpanded && (\n          <div class=\"vds__footer--expandable top\">\n            <slot name=\"expandable-content\" />\n          </div>\n        )}\n        {this.type === 'custom' ? (\n          this.renderCustomFooter()\n        ) : (\n          <div class={'vds__footer--container'}>\n            <div class={'vds__footer--app-version'}>{this.appVersion}</div>\n            <div class={'vds__footer--info'}>\n              <div>© {this.currentYear} {this.centralText}</div>\n              <div class={'vds__footer--powerby'}>\n                <span>{this.poweredByText}</span>\n                <vds-icon size=\"2.95775rem,1rem\" color=\"color-icon-medium\" svgIcon={'wabtec-grey-logo'}></vds-icon>\n              </div>\n            </div>\n            <div class={`vds__footer--slot ${this.type === 'expandable' ? 'has-expandable-button' : ''}`}>\n              <slot />\n              {this.renderExpandableButton()}\n            </div>\n          </div>\n        )}\n        {this.type === 'expandable' && this.expandedContentPosition === 'bottom' && this.isExpanded && (\n          <div class=\"vds__footer--expandable bottom\">\n            <slot name=\"expandable-content\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-footer.stories.js","sourceRoot":"","sources":["../../../src/components/footer/vds-footer.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;CACF,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,SAAS,CAAC,CAAC;AAC3E,MAAM,KAAK,GAAG,CAAC,oBAAoB,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,oBAAoB,CAAC,CAAC;AAE5G,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;;qBAEY,IAAI,CAAC,UAAU;cACtB,IAAI,CAAC,IAAI;mCACY,IAAI,CAAC,uBAAuB;sBACzC,IAAI,CAAC,WAAW;yBACb,IAAI,CAAC,aAAa;;QAEnC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,mCAAmC,KAAK,CAAC,CAAC,CAAC,4BAA4B,GAAG,eAAe,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;;;;;;;GAQhI,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,QAAQ,GAAG;IACpB,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;QAClC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,uBAAuB,EAAE;QACvB,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;QAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,UAAU,EAAE,mBAAmB;IAC/B,IAAI,EAAE,SAAS;IACf,uBAAuB,EAAE,QAAQ;IACjC,WAAW,EAAE,0CAA0C;IACvD,aAAa,EAAE,YAAY;CAC5B,CAAC;AAEF,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE;IACzB,OAAO;;cAEK,IAAI,CAAC,IAAI;;;;;;;;kBAQL,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;;;;;;GAMvC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,WAAW,CAAC,QAAQ,GAAG;IACrB,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC,QAAQ,CAAC;QACnB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AACF,WAAW,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,QAAQ;CACf,CAAC","sourcesContent":["export default {\n  title: 'VDS/Components/Footer',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n  },\n};\n\nconst options = ['FAQ', 'Privacy Policy', 'Terms & Conditions', 'Support'];\nconst links = ['https://wabtec.com', 'https://volt.wabtec.one', 'https://google.com', 'https://wabtec.com'];\n\nconst codeTemplate = args => {\n  return `\n    <vds-footer\n      app-version=\"${args.appVersion}\"\n      type=\"${args.type}\"\n      expanded-content-position=\"${args.expandedContentPosition}\"\n      central-text=\"${args.centralText}\"\n      powered-by-text=\"${args.poweredByText}\"\n    >\n      ${options.map((opt, i) => `<vds-link variant=\"footer\" url=\"${links[i]}\" target=\"_blank\" value=\"${opt}\"></vds-link>`).join('')}\n      <vds-button>test (this should be hidden)</vds-button>\n      <a href=\"https://youtube.com\">Hola Mundo (this should be hidden)</a>\n      <div slot=\"expandable-content\">\n        <h2>Expandable Content</h2>\n        <p>This is expandable content.</p>\n      </div>\n    </vds-footer>\n  `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.argTypes = {\n  type: {\n    options: ['default', 'expandable'],\n    control: { type: 'select' },\n  },\n  expandedContentPosition: {\n    options: ['top', 'bottom'],\n    control: { type: 'select' },\n  },\n};\n\nBasicUsage.args = {\n  appVersion: 'App Version 1.0.0',\n  type: 'default',\n  expandedContentPosition: 'bottom',\n  centralText: `Wabtec Corporation. All rights reserved.`,\n  poweredByText: 'Powered by',\n};\n\nconst customUsage = args => {\n  return `\n    <vds-footer\n      type=\"${args.type}\"\n      class=\"vds-font-title-extra-small\"\n      style=\"color: var(--color-text-brand)\"\n    >\n      <div slot=\"start\">\n        <span>Custom App Slot - Start</span>\n      </div>\n      <div slot=\"center\">\n        <span>© ${new Date().getFullYear()} Custom Footer Slots - Center</span>\n      </div>\n      <div slot=\"end\">\n        <span>Custom Link Slots - End</span>\n      </div>\n    </vds-footer>\n  `;\n};\n\nexport const CustomUsage = customUsage.bind({});\n\nCustomUsage.argTypes = {\n  type: {\n    options: ['custom'],\n    control: { type: 'select' },\n  },\n};\nCustomUsage.args = {\n  type: 'custom',\n};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/header/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GACpC,4NAA4N,CAAC","sourcesContent":["export const popoverCaretFilledLarge =\n'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEyIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDBMNiA2TDEyIDBIMFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=';"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-header.js","sourceRoot":"","sources":["../../../src/components/header/vds-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, State, h, Element, Watch } from '@stencil/core';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { queryElementFromShadowRoot } from '../../utils/node-utils';\nimport { Colors } from '../../components';\n\n@Component({\n  tag: 'vds-header',\n  styleUrl: 'vds-header.scss',\n  shadow: true,\n})\nexport class VdsHeader {\n  /** Defines app name for header */\n  @Prop() value: string;\n  /** Defines the value in the avatar component */\n  @Prop() avatar: string;\n  /** Defines the username at the left of the avatar */\n  @Prop() username!: string;\n  /** Allow hide/show User-Section */\n  @Prop() showUserSection: boolean = true;\n  /** Shows/hides badge dot to show notification or status */\n  @Prop() showBadge: boolean = false;\n  /** Sets the status color for badge */\n  @Prop() badgeStatusColor: \"warning\" | \"danger\" | \"healthy\" | \"information\" | \"neutral\" | Colors = \"neutral\";\n  /** Sets the aria label in badge */\n  @Prop() badgeAriaLabel:string;\n\n\n  @Element() hostEl: HTMLElement;\n\n  @State() popupOpened: boolean = false;\n\n  @Listen(\"click\", { target: \"window\" })\n\thandleClickOut(evt): void {\n    const isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside) {\n      this.popupOpened = false;\n    }\n\t}\n  private actionElementRef: HTMLElement;\n  private arrowElementRef: HTMLElement;\n  private floatingMenuElementRef: HTMLElement;\n\n  private floatingCleanUp: () => void;\n\n  componentDidLoad(){\n    this.actionElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__header--user-section-action-icon');\n    this.arrowElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__header--arrow-right-align');\n  }\n\n  private handleClick(_evt: MouseEvent): void {\n    _evt.stopPropagation();\n    _evt.preventDefault();\n    this.popupOpened = !this.popupOpened;\n  }\n\n  @Watch(\"popupOpened\")\n  async handlePopupOpened(): Promise<void> {\n    if (this.popupOpened) {\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.floatingMenuElementRef, this.arrowElementRef, \"bottom-start\", false);\n    } else {\n      this.floatingCleanUp && this.floatingCleanUp();\n    }\n  }\n\n  private renderAvatar() {\n    if (this.showBadge) {\n      return (\n        <vds-badge-dot overlap={true} statusColor={this.badgeStatusColor} aria-label={this.badgeAriaLabel}>\n          <vds-avatar class=\"vds__header--user-section-avatar\" size=\"20px\" value={this.avatar}></vds-avatar>\n        </vds-badge-dot>\n      );\n    }\n\n    return (\n      <vds-avatar class=\"vds__header--user-section-avatar\" size=\"20px\" value={this.avatar}></vds-avatar>\n    );\n  }\n\n  render() {\n    const showUserSection = this.showUserSection;\n    return (\n      <Host>\n        <header class={`vds__header`}>\n          <div class={`vds__header--app-name`}>\n            <span class=\"vds__header--app-name--content\">{this.value}</span>\n          </div>\n          <div class=\"vds__header--content-section\">\n            <slot name=\"contentSection\"></slot>\n          </div>\n          { showUserSection && <div class={`vds__header--user-section`}>\n            <span class=\"vds__header--user-section-username\">{this.username}</span>\n            <div class=\"d-flex\" onClick={(evt: MouseEvent) => {\n                this.handleClick(evt);\n              }}>\n              {this.renderAvatar()}\n              <span class=\"vds__header--user-section-action-icon\">\n                <vds-icon svgIcon=\"caret-down-filled\" size=\"20px\" color=\"color-icon-medium\"></vds-icon>\n              </span>\n            </div>\n\n            <div\n              ref={(el) => {\n                if (el) {\n                  this.floatingMenuElementRef = el;\n                }\n              }}\n              class={`${this.popupOpened ? 'vds__header--user-section-menu-container-opened' : 'vds__header--user-section-menu-container'}`}>\n              <span class=\"vds__header--arrow-right-align\">\n                <svg class=\"triangle-rotated\" width=\"13\" height=\"6\" viewBox=\"0 0 13 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path id=\"popover-carret-filled-large\" d=\"M0.5 0L6.5 6L12.5 0H0.5Z\" fill=\"var(--surface-neutral-default)\"/>\n                </svg>\n              </span>\n              <div\n                class=\"vds__header--user-section-menu-container-content\"\n              >\n                <slot name=\"profilePopupContent\"></slot>\n              </div>\n            </div>\n          </div> }\n        </header>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-header.stories.js","sourceRoot":"","sources":["../../../src/components/header/vds-header.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,4BAA4B,CAAC;AAEnD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AAE/C,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACD,QAAQ,EAAE;QACR,gBAAgB,EAAE;YAChB,OAAO,EAAE,CAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC;YAClF,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;;;iBAGQ,IAAI,CAAC,KAAK,IAAI,UAAU;kBACvB,IAAI,CAAC,MAAM,IAAI,WAAW;oBACxB,IAAI,CAAC,QAAQ,IAAI,WAAW;6BACnB,IAAI,CAAC,eAAe;UACvC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE;8BAClC,IAAI,CAAC,gBAAgB;4BACvB,IAAI,CAAC,cAAc;;;;;;UAMrC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,yEAAyE,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;KAiB1G,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,UAAU;IACjB,QAAQ,EAAE,WAAW;IACrB,MAAM,EAAE,WAAW;IACnB,eAAe,EAAE,IAAI;IACrB,SAAS,EAAE,IAAI;IACf,gBAAgB,EAAE,SAAS;IAC3B,cAAc,EAAE,aAAa;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1D,oBAAoB,CAAC,IAAI,GAAG;IAC1B,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,WAAW;IACrB,MAAM,EAAE,uDAAuD;IAC/D,eAAe,EAAE,IAAI;CACtB,CAAC","sourcesContent":["import variables from \"../../constants/color-vars\";\n\nconst THEME_KEY = Object.keys(variables.theme);\n\nexport default {\n  title: 'VDS/Components/Header',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n  },\n  argTypes: {\n    badgeStatusColor: {\n      options: [ \"warning\", \"danger\", \"healthy\", \"information\", \"neutral\", ...THEME_KEY],\n      control: { type: \"select\" }\n    },\n  }\n};\n\nconst codeTemplate = args => {\n  return `\n  <div style=\"background-color:grey;height:250px;\">\n    <vds-header\n        value=\"${args.value || 'App Name'}\"\n        avatar=\"${args.avatar || 'User Demo'}\"\n        username=\"${args.username || 'User Demo'}\"\n        show-user-section=\"${args.showUserSection}\"\n        ${args.showBadge ? `show-badge=\"${args.showBadge}\"` : ''}\"\n        badge-status-color=\"${args.badgeStatusColor}\"\n        badge-aria-label=\"${args.badgeAriaLabel}\"\n    >\n      <div class=\"vds-header_content-section\" slot=\"contentSection\">\n        <div class=\"time-weather\">\n           <span>13:25 CST - 42°F</span>\n        </div>\n        ${args.showUserSection ? '<vds-divider orientation=\"vertical\" padding=\"spacing-00\"></vds-divider>' : ''}\n      </div>\n      <div slot=\"profilePopupContent\" >\n        <ul style=\"width:150px\">\n          <li>\n            <a href=\"www.google.com\" _target=\"blank\">Option 1</a>\n          </li>\n          <li>\n            <a href=\"#\">Option 2</a>\n          </li>\n          <li>\n            <a href=\"#\">Option 3</a>\n          </li>\n        </ul>\n      </div>\n    </<vds-header>\n  </div>\n    `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  value: 'App Name',\n  username: 'User Demo',\n  avatar: 'User Demo',\n  showUserSection: true,\n  showBadge: true,\n  badgeStatusColor: 'healthy',\n  badgeAriaLabel: 'User status'\n};\n\nexport const WithAvatarImageUsage = codeTemplate.bind({});\n\nWithAvatarImageUsage.args = {\n  value: 'App Name',\n  username: 'User Demo',\n  avatar: 'https://cdn-icons-png.flaticon.com/512/149/149071.png',\n  showUserSection: true\n};\n"]}

package/dist/collection/components/icon/utils/icons-list.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icons-list.js","sourceRoot":"","sources":["../../../../src/components/icon/utils/icons-list.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAK,EAAC,WAAW,EAAC,YAAY,EAAC,gBAAgB,EAAC,WAAW,EAAC,YAAY,EAAC,UAAU,EAAC,cAAc,EAAC,YAAY,EAAC,aAAa,EAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,YAAY,EAAC,MAAM,EAAC,WAAW,EAAC,SAAS,EAAC,KAAK,EAAC,MAAM,EAAC,aAAa,EAAC,qBAAqB,EAAC,UAAU,EAAC,cAAc,EAAC,QAAQ,EAAC,mBAAmB,EAAC,YAAY,EAAC,oBAAoB,EAAC,WAAW,EAAC,SAAS,EAAC,cAAc,EAAC,cAAc,EAAC,OAAO,EAAC,YAAY,EAAC,OAAO,EAAC,eAAe,EAAC,SAAS,EAAC,WAAW,EAAC,UAAU,EAAC,MAAM,EAAC,WAAW,EAAC,WAAW,EAAC,kBAAkB,EAAC,aAAa,EAAC,SAAS,EAAC,mBAAmB,EAAC,UAAU,EAAC,MAAM,EAAC,UAAU,EAAC,cAAc,EAAC,eAAe,EAAC,MAAM,EAAC,mBAAmB,EAAC,OAAO,EAAC,OAAO,EAAC,kBAAkB,EAAC,qBAAqB,EAAC,SAAS,EAAC,cAAc,EAAC,UAAU,EAAC,gBAAgB,EAAC,cAAc,EAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAC,eAAe,EAAC,aAAa,EAAC,SAAS,EAAC,cAAc,EAAC,yBAAyB,EAAC,aAAa,EAAC,kBAAkB,EAAC,iBAAiB,EAAC,wBAAwB,EAAC,MAAM,EAAC,WAAW,EAAC,MAAM,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,MAAM,EAAC,aAAa,EAAC,YAAY,EAAC,YAAY,EAAC,KAAK,EAAC,MAAM,EAAC,aAAa,EAAC,WAAW,EAAC,gBAAgB,EAAC,WAAW,EAAC,kBAAkB,EAAC,aAAa,EAAC,WAAW,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAC,eAAe,EAAC,iBAAiB,EAAC,iBAAiB,EAAC,eAAe,EAAC,MAAM,EAAC,cAAc,EAAC,MAAM,EAAC,WAAW,EAAC,YAAY,EAAC,OAAO,EAAC,WAAW,EAAC,UAAU,EAAC,UAAU,EAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,EAAC,SAAS,EAAC,YAAY,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,kBAAkB,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,iBAAiB,EAAC,WAAW,EAAC,WAAW,EAAC,SAAS,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAC,SAAS,EAAC,eAAe,EAAC,QAAQ,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,MAAM,EAAC,kBAAkB,EAAC,WAAW,EAAC,qBAAqB,EAAC,MAAM,EAAC,cAAc,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,WAAW,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,EAAC,MAAM,EAAC,OAAO,EAAC,OAAO,EAAC,gBAAgB,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAC,QAAQ,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,EAAC,YAAY,EAAC,QAAQ,EAAC,MAAM,EAAC,yBAAyB,EAAC,UAAU,EAAC,aAAa,EAAC,+BAA+B,EAAC,MAAM,EAAC,QAAQ,EAAC,eAAe,EAAC,UAAU,EAAC,cAAc,EAAC,kBAAkB,EAAC,SAAS,EAAC,WAAW,EAAC,MAAM,EAAC,WAAW,EAAC,SAAS,EAAC,cAAc,EAAC,eAAe,EAAC,KAAK,EAAC,gBAAgB,EAAC,eAAe,EAAC,YAAY,EAAC,iBAAiB,EAAC,WAAW,EAAC,kBAAkB,EAAC,WAAW,EAAC,kBAAkB,EAAC,kBAAkB,EAAC,wBAAwB,CAAC,CAAA","sourcesContent":["export const iconsList = [\"add\",\"add-train\",\"add-repair\",\"administration\",\"analytics\",\"arrow-left\",\"analysis\",\"applications\",\"arrow-down\",\"arrow-right\",\"arrow-up\",\"asset\",\"attribute\",\"automobile\",\"back\",\"auto-mode\",\"barcode\",\"bug\",\"bell\",\"calculation\",\"camera-video-filled\",\"calendar\",\"camera-video\",\"camera\",\"caret-down-filled\",\"caret-down\",\"caret-right-filled\",\"caution-2\",\"caution\",\"chevron-down\",\"chevron-left\",\"cases\",\"chevron-up\",\"close\",\"chevron-right\",\"comment\",\"connected\",\"database\",\"copy\",\"container\",\"dashboard\",\"desktop-computer\",\"deployments\",\"disable\",\"disabled-document\",\"download\",\"edit\",\"document\",\"disconnected\",\"empty-returns\",\"drag\",\"enter-full-screen\",\"excel\",\"error\",\"exit-full-screen\",\"fast-forward-filled\",\"failure\",\"fast-forward\",\"favorite\",\"fit-horizontal\",\"fit-vertical\",\"fit\",\"filter\",\"flag\",\"folder-closed\",\"folder-open\",\"formula\",\"generic-user\",\"go-to-first-page-filled\",\"full-screen\",\"go-to-first-page\",\"go-to-last-page\",\"go-to-last-page-filled\",\"good\",\"grid-view\",\"hide\",\"hamburger\",\"healthy\",\"history\",\"home\",\"information\",\"inbox-view\",\"intermodal\",\"key\",\"less\",\"link-closed\",\"link-open\",\"lock-open-side\",\"list-view\",\"local-containers\",\"lock-closed\",\"lock-open\",\"logout\",\"magnify\",\"mail\",\"message-alert\",\"module-settings\",\"more-horizontal\",\"more-vertical\",\"move\",\"multi-window\",\"mute\",\"not-found\",\"locomotive\",\"notes\",\"open-icon\",\"overflow\",\"overlays\",\"pdf\",\"pause\",\"ptc\",\"paperclip\",\"payment\",\"pick-color\",\"phone\",\"play-page\",\"pin\",\"play\",\"play-page-filled\",\"power\",\"print\",\"qr-code\",\"rail-containers\",\"rail-yard\",\"recording\",\"refresh\",\"reply\",\"restart\",\"reset\",\"reverse\",\"rewind-filled\",\"rewind\",\"save\",\"scan-barcode\",\"share\",\"show\",\"skip-back-filled\",\"skip-back\",\"skip-forward-filled\",\"star\",\"skip-forward\",\"stop\",\"summary\",\"swap\",\"system\",\"tack\",\"tag-group\",\"tablet\",\"tag\",\"thumb\",\"templates\",\"tile-view\",\"time\",\"timer\",\"track\",\"train-schedule\",\"trash\",\"unknown\",\"train\",\"unmute\",\"upload\",\"usb\",\"truck\",\"user-group\",\"vessel\",\"user\",\"wabtec-corporation-logo\",\"timezone\",\"wabtec-icon\",\"white-wabtec-corporation-logo\",\"word\",\"window\",\"zoom-identity\",\"zoom-out\",\"zoom-generic\",\"zoom-generic-inv\",\"zoom-in\",\"zoom-less\",\"zoom\",\"zoom-more\",\"checked\",\"divider-item\",\"indeterminate\",\"map\",\"minimize-panel\",\"radio-checked\",\"switch-off\",\"radio-unchecked\",\"switch-on\",\"wabtec-corp-logo\",\"unchecked\",\"wabtec-grey-icon\",\"wabtec-grey-logo\",\"white-wabtec-corp-logo\"]"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-icon.js","sourceRoot":"","sources":["../../../src/components/icon/vds-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { Element, HostElement, Prop } from '@stencil/core/internal';\nimport * as svgs from '../../constants/icon-sprite';\nimport { Colors, IconColors } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { GenerateVdsSvg } from '../../utils/icon-generation.utils';\n\n@Component({\n  tag: 'vds-icon',\n  styleUrl: 'vds-icon.scss',\n  shadow: true,\n})\nexport class VdsIcon {\n  /** Set svg icon name to display */\n  @Prop({ mutable: true }) svgIcon: string;\n  /** Set icon size in px or rem, IE: 1.25rem */\n  @Prop({ mutable: true }) size: string;\n  /** Set icon color based in volt palette */\n  @Prop({ mutable: true }) color: IconColors | Colors = 'static-brand-main';\n  /** Set alt text for accesibility */\n  @Prop({ mutable: true }) alt: string;\n\n  @Element() host: HTMLDivElement;  \n  \n  private svgContent: string;\n\n  async componentWillLoad(): Promise<void> {\n    if (this.isValidUrl(this.svgIcon) && this.isValidSvgUrl(this.svgIcon)) {\n      this.svgContent = await this.setSvgContent(this.svgIcon);\n    }\n  }\n\n  private isSvgString(svgIcon: string): boolean {\n    return svgIcon?.trim().startsWith('<svg')?? false;\n  }\n\n  private isValidUrl(svgIcon: string): boolean {\n    try {\n      new URL(svgIcon);\n      return true;\n    } catch (err) {\n      return false;\n    }\n  }\n\n  private isInternalIcon(svgIcon: string): boolean {\n    const icons = Object.keys(svgs.default);\n\n    return icons.some(icon => icon === svgIcon+'.svg');\n  }\n  private isValidSvgUrl(svgIcon: string): boolean {\n    return svgIcon?.endsWith('.svg');\n  }\n\n  private async setSvgContent(svgIcon: string): Promise<string | null> {\n    return await this.fetchSvgContent(svgIcon);\n  }\n\n  private async fetchSvgContent(url: string): Promise<string | null> {\n    try {\n      const response = await fetch(url);\n      return !response.ok ? null : await response.text();\n    } catch (error) {\n      return null;\n    }\n  }\n  private getSize() {\n    if (this.size && this.size.indexOf(',') > -1) {\n      const sizes = this.size.split(',');\n      return {\n        width: sizes[0] ? sizes[0] : '1rem',\n        height: sizes[1] ? sizes[1] : '1rem',\n      };\n    }\n    return { width: this.size ? this.size : '1rem', height: this.size ? this.size : '1rem' };\n  }\n\n  private getSvgContent(): string {\n    if (this.isSvgString(this.svgIcon)) {\n      return GenerateVdsSvg(this.svgIcon);\n    }\n\n    if (this.isValidSvgUrl(this.svgIcon) && this.svgContent) {\n      return GenerateVdsSvg(this.svgContent);\n    }\n\n    return svgs.default[`${this.svgIcon}.svg`];\n  }\n\n  render(): HostElement {\n    return (\n      <Host class={combineClasses('volt-icon', `color-${this.color}`)}>\n        {this.isInternalIcon(this.svgIcon) || this.isSvgString(this.svgIcon) ? \n          (\n            <div\n              part=\"svg-icon\"\n              style={this.getSize()}\n              class={combineClasses('volt-icon-svg')}\n              innerHTML={this.getSvgContent()}>\n            </div>\n          ) \n          : \n          (\n            <img style={this.getSize()} src={this.svgIcon} alt={`${this.alt} icon`} />\n          )\n        }\n      </Host>\n    );\n  }\n}"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-icon.stories.js","sourceRoot":"","sources":["../../../src/components/icon/vds-icon.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ACTION, BRAND, CONTROL, DATA, DEVICE, FILES, INVENTORY, NAVIGATION, STATUS, TIME, TOGGLE, TOOL, TRANSPORT, USER, getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nconst svgExample= `<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.4624 2.41407C17.2587 2.01855 18.6488 3.97488 17.6844 5.54106L11.2391 16.0079C10.2496 17.6149 7.80416 17.1834 7.42439 15.3348L6.5649 11.1512C6.54844 11.071 6.49972 11.0012 6.43018 10.9581L2.98664 8.82337C1.39738 7.83814 1.81021 5.42017 3.63634 5.01807L15.4624 2.41407ZM16.1639 4.60473C16.3016 4.38099 16.103 4.10151 15.8464 4.15802L4.02034 6.76201C3.75947 6.81946 3.70049 7.16488 3.92753 7.30563L7.37107 9.44037C7.85779 9.74211 8.19885 10.2309 8.31409 10.7918L9.17358 14.9755C9.22783 15.2395 9.57717 15.3012 9.71854 15.0716L16.1639 4.60473Z\" fill=\"white\"/>\n</svg>`;\n\nexport default {\n    title: 'VDS/Components/Icon',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n    },\n    argTypes: {\n        color: {\n            options: [\"color-icon-high\", \"color-icon-medium\", \"color-icon-low\", \n                     \"color-icon-disabled\", \"color-icon-healthy\", \"color-icon-caution\", \n                     \"color-icon-warning\", \"color-icon-danger\", \"color-icon-white-low\"],\n            control: { type: \"select\" }\n        },\n        svgIcon: {\n            options: ICON_LIST,\n            control: { type: \"select\" }\n        },\n        size: {\n            options: [\"12px\", \"1rem\", \"20px\", \"2em\", \"5rem\"],\n            control: { type: \"select\" }\n        }\n    },\n};\n \nconst codeTemplate = (args) => {\n    return `\n<vds-icon\n    svg-icon=\"${args.svgIcon}\"\n    size=\"${args.size}\"\n    color=\"${args.color}\"\n    alt=\"${args.alt}\"\n></vds-icon>\n    `;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    svgIcon: \"star\",\n    size: \"5rem\",\n    color: \"color-icon-warning\",\n    alt: \"Star icon\",\n};\nconst codeTemplateSvgFile = (args) => {\n    return `\n<vds-icon\n    svg-icon='${svgExample}'    \n    size=\"${args.size}\"\n    color=\"${args.color}\"\n    alt=\"${args.alt}\"\n></vds-icon>\n    `;\n}\n\nexport const BasicUsageWithSvgVariable = codeTemplateSvgFile.bind({});\n\nBasicUsageWithSvgVariable.args = {\n    size: \"3rem\",\n    color: \"color-icon-brand\",\n    alt: \"Custom icon\",\n};\n\nconst codeTemplateSvgURL = (args) => {\n    return `\n<vds-icon\n    svg-icon='${args.svgIcon}'    \n    size=\"${args.size}\"\n    color=\"${args.color}\"\n    alt=\"${args.alt}\"\n></vds-icon>\n    `;\n}\n\nexport const BasicUsageWithSvgURL = codeTemplateSvgURL.bind({});\n\nBasicUsageWithSvgURL.args = {\n    size: \"3rem\",\n    color: \"color-icon-brand\",\n    alt: \"Custom icon\",\n    svgIcon: \"http://localhost:3333/assets/send.svg\"\n};\n\nconst codeTemplatImgURL = (args) => {\n    return `\n<vds-icon\n    svg-icon='${args.imgUrl}'    \n    size=\"${args.size}\"\n    color=\"${args.color}\"\n    alt=\"${args.alt}\"\n></vds-icon>\n    `;\n}\n\nexport const BasicUsageWithImgURL = codeTemplatImgURL.bind({});\n\nBasicUsageWithImgURL.args = {\n    size: \"3rem\",\n    color: \"color-icon-brand\",\n    alt: \"Custom icon\",\n    imgUrl: \"https://cdn-icons-png.flaticon.com/128/1865/1865273.png\"\n};\n\nconst styles = `\n    .icon-container {\n        display: flex;\n        flex-wrap: wrap; \n    }\n\n    .icon-container > .icon {\n        display: flex;\n        flex: 0 0 15%;\n        justify-content: center;\n        align-items: center;\n        padding: 20px;\n        flex-direction: column;\n    }\n\n    .icon-container > .icon > span {\n        margin-top: 5px;\n    }\n\n    h2 {\n        color: var(--text-high);\n        font-size: 3.125rem;\n        font-style: normal;\n        font-weight: 400;\n        line-height: 3.5rem;\n        padding-left: 60px;\n    }\n`;\n\n\nconst codeListTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<div class=\"icon-container\">\n${args.list.map((icon) => {\n    return  `\n    <div class=\"icon\">\n        <vds-icon svg-icon=\"${icon}\" size=\"2rem\" color=\"color-icon-high\"></vds-icon>\n        <span>${icon}</span>\n    </div>\n    `;\n}).join(\"\")}\n</div>\n    `\n}\n\nexport const navigationIcons = codeListTemplate.bind({});\n\nnavigationIcons.args = {\n    list: NAVIGATION,\n    title: \"Navigation icons\",\n}\n\nexport const filesIcons = codeListTemplate.bind({});\n\nfilesIcons.args = {\n    list: FILES,\n    title: \"File icons\",\n}\n\nexport const statusIcons = codeListTemplate.bind({});\n\nstatusIcons.args = {\n    list: STATUS,\n    title: \"Status icons\",\n}\n\nexport const deviceIcons = codeListTemplate.bind({});\n\ndeviceIcons.args = {\n    list: DEVICE,\n    title: \"Device icons\",\n}\n\nexport const userIcons = codeListTemplate.bind({});\n\nuserIcons.args = {\n    list: USER,\n    title: \"user icons\",\n}\n\nexport const actionIcons = codeListTemplate.bind({});\n\nactionIcons.args = {\n    list: ACTION,\n    title: \"Action icons\",\n}\n\nexport const controlIcons = codeListTemplate.bind({});\n\ncontrolIcons.args = {\n    list: CONTROL,\n    title: \"Control icons\",\n}\n\nexport const timeIcons = codeListTemplate.bind({});\n\ntimeIcons.args = {\n    list: TIME,\n    title: \"Time icons\",\n}\n\nexport const toolIcons = codeListTemplate.bind({});\n\ntoolIcons.args = {\n    list: TOOL,\n    title: \"Tool icons\",\n}\n\nexport const transportIcons = codeListTemplate.bind({});\n\ntransportIcons.args = {\n    list: TRANSPORT,\n    title: \"Transport icons\",\n}\n\nexport const toggleIcons = codeListTemplate.bind({});\n\ntoggleIcons.args = {\n    list: TOGGLE,\n    title: \"Toggle icons\",\n}\n\nexport const dataIcons = codeListTemplate.bind({});\n\ndataIcons.args = {\n    list: DATA,\n    title: \"Data icons\",\n}\n\nexport const inventoryIcons = codeListTemplate.bind({});\n\ninventoryIcons.args = {\n    list: INVENTORY,\n    title: \"Inventory icons\",\n}\n\nexport const brandIcons = codeListTemplate.bind({});\n\nbrandIcons.args = {\n    list: BRAND,\n    title: \"Brand icons\",\n}\n\nexport const IconList = codeListTemplate.bind({});\n\nIconList.args = {\n    list: ICON_LIST,\n    title: \"Icon list\",\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/vds-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAOpD,MAAM,OAAO,aAAa;IAL1B;QAME,6BAA6B;QACtB,SAAI,GAAiD,QAAQ,CAAC;QACrE,gCAAgC;QACzB,YAAO,GAAyC,SAAS,CAAC;QACjE,yCAAyC;QAClC,aAAQ,GAAY,KAAK,CAAC;KA4ClC;IAnCA,YAAY;QACX,IAAI,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE,CAAC;YACnD,IAAI,CAAC,UAAU,EAAE,CAAC;QACnB,CAAC;IACF,CAAC;IAEQ,UAAU;QAClB,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC;IAEA,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,cAAc,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,CAAC;YAC9F,6EACE,KAAK,EAAE,cAAc,CACnB,0BAA0B,EAC1B,6BAA6B,IAAI,CAAC,OAAO,EAAE,EAC3C,0BAA0B,IAAI,CAAC,IAAI,EAAE,EACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAChD,gBACW,IAAI,CAAC,YAAY,EAC7B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,IAC5B,eAAe,CACvB,IAAI,CAAC,MAAM,EACL,UAAU,EACV,OAAO,EACP,OAAO,CACR;gBAED,6EAAoB,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,GAAa,CAC/D,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Listen, Prop, h } from '@stencil/core';\nimport { shadowSubmitForm } from '../../utils/form';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { ICON_SIZE } from './vds-icon-button.utils';\n\n@Component({\n  tag: 'vds-icon-button',\n  styleUrl: 'vds-icon-button.scss',\n  shadow: true,\n})\nexport class VdsIconButton {\n  /** Set icon button's size */\n\t@Prop() size: \"large\" | \"medium\" | \"small\" | \"extra-small\" = \"medium\";\n  /** Set icon button's variant */\n\t@Prop() variant: \"primary\" | \"secondary\" | \"tertiary\" = \"primary\";\n  /** Enable icon button's disable state */\n\t@Prop() disabled: boolean = false;\n  /** Sets the icon inside icon button */\n\t@Prop() icon: string;\n  /** Sets the button icon arial-label */\n  @Prop({reflect: true}) setAriaLabel: string;\n  \n  @Element() hostEl: HTMLVdsButtonElement;\n\n  @Listen(\"click\")\n\thandleSubmit(): void {\n\t\tif (this.hostEl.getAttribute(\"type\") === \"submit\") {\n\t\t\tthis.submitForm();\n\t\t}\n\t}\n\n  private submitForm(): void {\n\t\tshadowSubmitForm(this.hostEl);\n\t}\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={combineClasses(`vds-icon-button`, this.disabled ? \"vds-icon-button--disabled\" : \"\")}>\n        <button\n          class={combineClasses(\n            `vds-icon-button__element`,\n            `vds-icon-button__variant--${this.variant}`,\n            `vds-icon-button__size--${this.size}`,\n            this.disabled ? \"vds-icon-button-disabled\" : \"\"\n          )}\n          aria-label={this.setAriaLabel}\n          type=\"button\"\n          disabled={ this.disabled || null}\n          {...cloneAttributes(\n\t\t\t\t\t\tthis.hostEl,\n            \"disabled\",\n            \"class\",\n            \"style\"\n          )}\n        >\n          <vds-icon svg-icon={this.icon} size={ICON_SIZE[this.size]}></vds-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-icon-button.stories.js","sourceRoot":"","sources":["../../../src/components/icon-button/vds-icon-button.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/Buttons/Icon-Button',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n    },\n    argTypes: {\n        variant: {\n            options: [\"primary\", \"secondary\", \"tertiary\"],\n            control: { type: \"select\" }\n        },\n        size: {\n            options: [\"large\", \"medium\", \"small\", \"extra-small\"],\n            control: { type: \"select\" }\n        },\n        icon: {\n            options: ICON_LIST,\n            control: { type: \"select\" }\n        }\n    },\n};\n\nconst styles = `vds-icon-button { margin: 20px }`;\n \nconst basicCodeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-icon-button\n    icon=\"${args.icon}\"\n    variant=\"${args.variant}\"\n    size=\"${args.size || \"medium\"}\"\n    disabled=\"${args.disabled || false}\"\n></vds-icon-button>\n    `;    \n}\n\nexport const BasicUsage = basicCodeTemplate.bind({});\n\nBasicUsage.args = {\n    variant: \"primary\",\n    size: \"medium\",\n    icon: \"star\",\n    disabled: false\n};\n\n \nconst primaryCodeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-icon-button\n    icon=\"${args.icon}\"\n    variant=\"${args.variant}\"\n    size=\"${args.size || \"medium\"}\"\n    disabled=\"${args.disabled || false}\"\n></vds-icon-button>\n    `;    \n}\n\nexport const Primary = primaryCodeTemplate.bind({});\n\nPrimary.args = {\n    variant: \"primary\",\n    size: \"medium\",\n    icon: \"home\",\n    disabled: false\n};\n\n \nconst secondaryCodeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-icon-button\n    icon=\"${args.icon}\"\n    variant=\"${args.variant}\"\n    size=\"${args.size || \"medium\"}\"\n    disabled=\"${args.disabled || false}\"\n></vds-icon-button>\n    `;    \n}\n\nexport const Secondary = secondaryCodeTemplate.bind({});\n\nSecondary.args = {\n    variant: \"secondary\",\n    size: \"medium\",\n    icon: \"train\",\n    disabled: false\n};\n\n \nconst tertiaryCodeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-icon-button\n    icon=\"${args.icon}\"\n    variant=\"${args.variant}\"\n    size=\"${args.size || \"medium\"}\"\n    disabled=\"${args.disabled || false}\"\n></vds-icon-button>\n    `;    \n}\n\nexport const Tertiary = tertiaryCodeTemplate.bind({});\n\nTertiary.args = {\n    variant: \"tertiary\",\n    size: \"medium\",\n    icon: \"copy\",\n    disabled: false\n};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-icon-button.utils.js","sourceRoot":"","sources":["../../../src/components/icon-button/vds-icon-button.utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,aAAa,EAAE,SAAS;IACxB,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,QAAQ;CACpB,CAAC","sourcesContent":["export const ICON_SIZE = {\n    \"extra-small\": \"0.75rem\",\n    \"small\": \"1rem\",\n    \"medium\": \"1.25rem\",\n    \"large\": \"1.5rem\",\n};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-basic-input.js","sourceRoot":"","sources":["../../../src/components/input/vds-basic-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Event,\n  EventEmitter,\n  Method\n} from '@stencil/core';\nimport { \n  VdsInputType,\n  isValidIcon,\n  toggleFocusClass,\n  getIconColor,\n  setInputStyles,\n  setTouchedClass,\n  setDirtyClass, \n  maskInput\n} from './vds-basic-input.utils';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { AttachInternals, HTMLStencilElement, Listen, Watch } from '@stencil/core/internal';\nimport { emitInputEvent, shadowSubmitForm } from '../../utils/form';\n\n@Component({\n  tag: 'vds-basic-input',\n  styleUrl: 'vds-basic-input.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsBasicInput {\n  /** Sets the input size. */\n  @Prop({ mutable: true }) size: \"small\" | \"medium\" | \"large\" = \"medium\";\n  /** Sets input type in the DOM. Check HTML 5 Input type. */\n  @Prop({ mutable: true, reflect: true }) type: VdsInputType = \"text\";\n  /** Sets the input value. */\n  @Prop({ mutable: true, reflect: true }) value: string = \"\";\n  /** Sets the input placeholder. */\n  @Prop({ mutable: true, reflect: true }) placeholder: string;\n  /** Sets the input in disabled state. */\n  @Prop({ mutable: true, reflect: true }) disabled: boolean;\n  /** Sets the input in readonly state. */\n  @Prop({ mutable: true, reflect: true }) isReadonly: boolean;\n  /** Sets the input in error state. */\n  @Prop({ mutable: true, reflect: true }) error: boolean;\n  /** Toggles the required sign in the field */\n  @Prop({ mutable: true, reflect: true }) isRequired: boolean = false;\n  /** Allows user to define a information icon inside the input at its left . */\n  @Prop() informativeIcon: string;\n  /** Sets character formatting for user input. Useful for adding a mask to the input. */\n  @Prop({ mutable: true }) formatter?: Function;\n  /** Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction) */\n  @Prop({ mutable: true }) allowedStyles: { [key: string]: string }[] = [];\n\n  @Element() hostEl: HTMLInputElement;    \n  \n\t/**  Emits updated input value */\n\t@Event() changeInput: EventEmitter<string>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private inputContainerRef: HTMLDivElement;\n  private inputEl: HTMLInputElement;\n\n  componentDidLoad(): void {\n    this.setFormValue();\n  }\n\n  @Watch(\"value\")\n  setFormValue(): void {\n    emitInputEvent(this.hostEl, this.value);\n\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.value);\n    }\n  }\n\n  /**\n   * Displays vds-icon when icon string is valid\n   *\n   * @returns HTMLStencilElement\n   */\n  private getInputIcon(icon: string): HTMLStencilElement {\n    if(!isValidIcon(icon)) return null;\n\n    const inputState = this.disabled ? \"disabled\" : this.isReadonly ? \"readonly\" : \"normal\";\n    const size = this.size === \"medium\" ? \"1rem\" : this.size === \"small\" ? \"0.75rem\" : \"1.25rem\";\n    return (<vds-icon class=\"vds-input__informative-icon\" svgIcon={icon} size={size} color={getIconColor(inputState)}></vds-icon>);\n  }\n\n  /**\n   * Toggle class vds__input__container--focus in focus/blur input's event\n   *\n   * @returns void\n   */\n  private toggleFocusClass(): void {\n    this.inputContainerRef && toggleFocusClass(this.inputContainerRef);\n  }\n\n  /**\n   * Sets input inline styles for the allowedStyles \n   * [direction, text-align, textAlign, text-transform, textTransform, unicode-bidi, unicodeBidi]\n   *\n   * @returns void\n   */\n  private setInputStyles(): { [key: string]: string } {\n    return setInputStyles(this.allowedStyles);\n\t}\n\n  /**\n   * Sets value from input's event target.\n   * Emits change, input and changeInput events.\n   * Sets input as dirty when input's event is triggered.\n   * Executes formatter prop function on every inputed value.\n   *\n   * @returns void\n   */\n  private handleInput(evt: InputEvent): void {\n    evt.stopPropagation();\n    const target = evt.target as HTMLInputElement;\n    const inputEvent = new InputEvent(\"input\");\n    setDirtyClass(this.hostEl);\n    if(this.formatter) {\n      const maskValue = maskInput(this.formatter, target.value, this.value, evt.data, target, evt);\n      (evt.currentTarget as HTMLInputElement).value = maskValue;\n      this.value = maskValue;\n    } else {\n      this.value = target.value;\n    }\n\n    this.changeInput.emit(this.value);\n\t\tthis.hostEl.dispatchEvent(inputEvent);\n  }\n\n  /**\n\t * Executes method when input's keyup event is triggered.\n\t *\n\t * @returns void\n\t */\n  @Listen(\"keyup\")\n\thandleEnterKey(event: KeyboardEvent): void {\n\t\tif (event.key === \"Enter\") {\n\t\t\tshadowSubmitForm(this.hostEl);\n\t\t}\n\t}\n\n  /**\n\t * Executes method when vds-input gets focus.\n\t *\n\t * @returns void\n\t */\n\t@Listen(\"focus\")\n\thandleFocus(): void {\n    setTouchedClass(this.hostEl);\n\t}\n\n  /**\n\t * Sets focus on the vds-input element.\n\t *\n\t * @returns Promise<void>\n\t */\n\t@Method()\n\tsetFocus(): Promise<void> {\n    return new Promise((resolve) => {\n      this.inputEl.focus();\n      resolve();\n    });\n\t}\n\n  /**\n\t * Gets value prop from the vds-input element.\n\t *\n\t * @returns Promise<string>\n\t */\n\t@Method()\n\tgetValue(): Promise<string> {\n    return new Promise((resolve) => {\n      resolve(this.value);\n    });\n\t}\n\n  /**\n\t * Clears value prop from the vds-input element.\n\t *\n\t * @returns Promise<void>\n\t */\n\t@Method()\n\tclear(): Promise<void> {\n    return new Promise((resolve) => {\n      this.value = \"\";\n      this.inputEl.value = \"\";\n      resolve();\n    });\n\t}\n\n  render(): HTMLStencilElement {\n    if(this.type === \"datetime\"){ console.warn(\"The type datetime has been deprecated.Please use datetime-local.\")}\n    return (\n      <Host class={this.disabled ? \"vds-basic-input--disabled\" : \"\"}>\n        <div\n          ref={(el): void => { if(el) this.inputContainerRef = el} }\n          class={combineClasses(\n            \"vds__input__container\",\n            `vds__input--size-${this.size}`,\n            this.error && \"vds__input__container--error\",\n            this.isReadonly && \"vds__input__container--readonly\",\n            this.disabled && \"vds__input__container--disabled\"\n          )}\n        >\n          {this.getInputIcon(this.informativeIcon)}\n          <input\n            ref={(el): void => { if(el) this.inputEl = el} }\n            class={\"vds__input\"}\n            type={this.type}\n            value={this.value}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            required={this.isRequired}\n            readOnly={this.isReadonly}\n            onInput={(evt): void => this.handleInput(evt)}\n            onFocus={(): void => this.toggleFocusClass()}\n            onBlur={(): void => this.toggleFocusClass()}\n            style={this.setInputStyles()}\n            {...cloneAttributes(\n              this.hostEl,\n              \"class\",\n              \"value\",\n              \"disabled\",\n              \"placeholder\",\n              \"label\",\n              \"style\",\n            )}\n          />\n          <slot name=\"secondaryActionIcon\" />\n          <slot name=\"primaryActionIcon\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-basic-input.stories.js","sourceRoot":"","sources":["../../../src/components/input/vds-basic-input.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/Input/Basic Input',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n      },\n    argTypes: {\n        size: {\n            options: [\"small\", \"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n        type: {\n            options: [\"number\", \"text\", \"date\", \"tel\", \"datetime\",\"datetime-local\", \"email\", \"submit\", \"password\", \"month\", \"time\", \"url\", \"week\"],\n            control: { type: \"select\" }\n        },\n        informativeIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n        primaryActionIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n        secondaryActionIcon: {\n            options: [...ICON_LIST, undefined],\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-basic-input\n        size=\"${args.size}\"\n        type=\"${args.type}\"\n        value=\"${args.value}\"\n        placeholder=\"${args.placeholder}\"\n        ${args.disabled ? \"disabled\" : \"\"}\n        ${args.isReadonly ? \"is-readonly\" : \"\"}\n        ${args.error ? \"error\" : \"\"}\n        informative-icon=\"${args.informativeIcon}\"\n        is-required=\"${args.isRequired}\"\n        min=\"${args.min}\"\n        max=\"${args.max}\"\n    >\n        ${args.secondaryActionIcon && \n            `<vds-icon-button\n                slot=\"secondaryActionIcon\"\n                icon=\"${args.secondaryActionIcon}\"\n                variant=\"secondary\"\n                size=\"${args.size === \"medium\" ? \"small\" : args.size === \"large\" ? \"medium\" : \"extra-small\"}\">\n            </vds-icon-button>`}\n        ${args.primaryActionIcon && \n            `<vds-icon-button\n                slot=\"primaryActionIcon\"\n                icon=\"${args.primaryActionIcon}\"\n                variant=\"secondary\"\n                size=\"${args.size === \"medium\" ? \"small\" : args.size === \"large\" ? \"medium\" : \"extra-small\"}\">\n            </vds-icon-button>`}\n    </vds-basic-input>\n    \n</div>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    size: \"medium\",\n    type: \"text\",\n    value: \"\",\n    placeholder: \"\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    informativeIcon: undefined,\n    primaryActionIcon: undefined,\n    secondaryActionIcon: undefined,\n    isRequired: false,\n    min: \"\" ,\n    max: \"\"\n};"]}