npm - wabtec-internal-volt-basic-components - Versions diffs - 1.2.0 → 1.4.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1043) hide show

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

@@ -1 +0,0 @@

- {"version":3,"file":"vds-sidenav-item-app.js","sourceRoot":"","sources":["../../../src/components/sidenav-item-app/vds-sidenav-item-app.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAO7D,MAAM,OAAO,iBAAiB;IAL9B;QAUE,iGAAiG;QACzF,aAAQ,GAAY,IAAI,CAAC;KA6ClC;IAnCS,yBAAyB;QAC/B,OAAO,CACL,WAAK,KAAK,EAAE,mCAAmC;YAC7C,YAAM,KAAK,EAAE,yCAAyC,IAAG,IAAI,CAAC,KAAK,CAAQ;YAC1E,IAAI,CAAC,QAAQ;gBACZ,cAAQ,KAAK,EAAE,sCAAsC,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,GAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,CAAA,CAAC;oBACrG,gBACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAC,eAAe,EACvB,IAAI,EAAC,QAAQ,GACJ,CACJ,CACP,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DACE,KAAK,EAAE,cAAc,CACnB,oCAAoC,EACpC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAClC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,EAAE,CAC9C,EACD,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,GAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,CAAA,CAAC;gBAE1C,4DAAK,KAAK,EAAE,gCAAgC;oBAC1C,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB;gBACL,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,yBAAyB,EAAE,CAC3C,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n tag: 'vds-sidenav-item-app',\n styleUrl: 'vds-sidenav-item-app.scss',\n shadow: true,\n})\nexport class VdsSidenavItemApp {\n /** Define text value */\n @Prop() value: string;\n /** Shows arrow when there are children */\n @Prop() menuIcon: boolean;\n /** When true expands the nav item to show both text and icon. When false, only shows the icon */\n @Prop() expanded: boolean = true;\n /** Puts the navItem in active state */\n @Prop() isActive: boolean;\n\n /** Emits event when item gets clicked */\n @Event() clicked: EventEmitter<MouseEvent>;\n /** Emits event when the user clicks on menu icon*/\n @Event() viewMoreClick: EventEmitter<MouseEvent>;\n\n\n private getExpandedSidenavItemApp(): HTMLStencilElement {\n return (\n <div class={\"vds__sidenav__item__app--expanded\"}>\n <span class={\"vds__sidenav__item__app--expanded-value\"}>{this.value}</span>\n {this.menuIcon && \n <button class={\"vds__sidenav__item__app--icon-button\"} onClick={(evt) => {this.viewMoreClick.emit(evt)}}>\n <vds-icon\n color=\"color-icon-medium\"\n svgIcon=\"more-vertical\"\n size=\"1.5rem\">\n </vds-icon>\n </button>}\n </div>\n );\n }\n\n render(): HTMLStencilElement {\n return (\n <Host>\n <button \n class={combineClasses(\n \"vds__sidenav__item__app--container\",\n `${this.isActive ? \"active\" : \"\"}`,\n `${this.expanded ? \"expanded\" : \"collapsed\"}`\n )}\n onClick={(evt) => {this.clicked.emit(evt)}}\n >\n <div class={\"vds__sidenav__item__app--image\"}>\n <slot name=\"img\"></slot>\n </div>\n {this.expanded && this.getExpandedSidenavItemApp()}\n </button>\n </Host>\n );\n }\n}\n"]}

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

@@ -1 +0,0 @@

- {"version":3,"file":"vds-sidenav-item-app.stories.js","sourceRoot":"","sources":["../../../src/components/sidenav-item-app/vds-sidenav-item-app.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACX,KAAK,EAAE,yCAAyC;IAChD,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACH,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,OAAO,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC;YAChC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;CAId,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1B,OAAO;SACF,MAAM;;aAEF,IAAI,CAAC,KAAK;iBACN,IAAI,CAAC,QAAQ;gBACd,IAAI,CAAC,QAAQ;iBACZ,IAAI,CAAC,MAAM;mDACuB,IAAI,CAAC,KAAK;;KAExD,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,aAAa;IACpB,KAAK,EAAE,oBAAoB;IAC3B,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,KAAK;CAChB,CAAC;AAGF,MAAM,uBAAuB,GAAG,CAAC,IAAI,EAAE,EAAE;IACrC,OAAO;;;;iDAIsC,IAAI,CAAC,aAAa,IAAI,SAAS;kDAC9B,IAAI,CAAC,cAAc,IAAI,QAAQ;;;;aAIpE,IAAI,CAAC,KAAK;iBACN,IAAI,CAAC,QAAQ;gBACd,IAAI,CAAC,QAAQ;iBACZ,IAAI,CAAC,MAAM;mDACuB,IAAI,CAAC,KAAK;;KAExD,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjE,gBAAgB,CAAC,IAAI,GAAG;IACpB,KAAK,EAAE,aAAa;IACpB,KAAK,EAAE,oBAAoB;IAC3B,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,KAAK;IACb,aAAa,EAAE,SAAS;IACxB,cAAc,EAAE,QAAQ;CAC3B,CAAC","sourcesContent":["export default {\n title: 'VDS/Components/Sidenav/Sidenav-Item-App',\n parameters: {\n docs: {\n toc: true,\n },\n },\n argTypes: {\n image: {\n options: [\"wabtec-icon\", \"bell\"],\n control: { type: \"select\" }\n },\n },\n};\n\nconst styles = `\nvds-sidenav-item-app {\n margin: 10px;\n}\n`;\n \nconst codeTemplate = (args) => {\n return `\n<style>${styles}</style>\n<vds-sidenav-item-app \n value=\"${args.value}\"\n menu-icon=\"${args.menuIcon}\"\n expanded=\"${args.expanded}\" \n is-active=\"${args.active}\">\n <vds-icon slot=\"img\" size=\"2.5rem\" svg-icon=\"${args.image}\"><vds-icon>\n</vds-sidenav-item-app>\n `;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n image: \"wabtec-icon\",\n value: \"Volt Design System\",\n menuIcon: true,\n expanded: true,\n active: false,\n};\n\n\nconst codeCustomWidthTemplate = (args) => {\n return `\n<style>\n vds-sidenav-item-app {\n padding: 5px;\n --vds-sidenav-item-app-expanded-width: ${args.ExpandedWidth || '17.5rem'};\n --vds-sidenav-item-app-collapsed-width: ${args.CollapsedWidth || '3.5rem'};\n }\n</style>\n<vds-sidenav-item-app \n value=\"${args.value}\"\n menu-icon=\"${args.menuIcon}\"\n expanded=\"${args.expanded}\" \n is-active=\"${args.active}\">\n <vds-icon slot=\"img\" size=\"2.5rem\" svg-icon=\"${args.image}\"><vds-icon>\n</vds-sidenav-item-app>\n `;\n}\n\nexport const CustomWidthUsage = codeCustomWidthTemplate.bind({});\n\nCustomWidthUsage.args = {\n image: \"wabtec-icon\",\n value: \"Volt Design System\",\n menuIcon: true,\n expanded: true,\n active: false,\n ExpandedWidth: '17.5rem',\n CollapsedWidth: '3.5rem',\n};\n\n"]}

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

@@ -1 +0,0 @@

- {"version":3,"file":"vds-sidenav-item-button.js","sourceRoot":"","sources":["../../../src/components/sidenav-item-button/vds-sidenav-item-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'vds-sidenav-item-button',\n styleUrl: 'vds-sidenav-item-button.scss',\n shadow: true,\n})\nexport class VdsSidenavItemButton {\n /** Puts the navItem in disabled state */\n @Prop({ mutable: true }) disabled: boolean = false;\n /** When true expands the nav item to show both text and icon. When false, only shows the icon */\n @Prop({ mutable: true }) expanded: boolean = false;\n /** Define the icon value */\n @Prop({ mutable: true }) icon: string;\n /** Toggles static mode in nav-item */\n @Prop({ mutable: true }) isStatic: boolean = false;\n /** Define text value */\n @Prop({ mutable: true }) value: string;\n /** Define aria label value */\n @Prop({ mutable: true }) setAriaLabel: string;\n /** Define variant */\n @Prop() variant: \"primary\" | \"secondary\" = \"primary\";\n\n /** Emits event when item gets clicked */\n @Event() clicked: EventEmitter<MouseEvent>;\n\n private handleClick(evt: MouseEvent): void {\n this.clicked.emit(evt);\n }\n private generateInformativeIcon(){\n const iconColor = this.disabled ? 'color-icon-disabled' : this.variant=='primary'? 'static-white': 'color-icon-brand-default';\n return (\n <span class=\"vds__sidenav-item-button--informative-icon\">\n <vds-icon\n svg-icon={this.icon}\n size={'1.5rem'}\n color={iconColor}\n alt={this.value}\n />\n </span>\n );\n }\n private generateLabel(){\n return ( \n <span\n class={`\n ${this.isStatic && !this.expanded ? 'vds__sidenav-item-button--static-label' : 'vds__sidenav-item-button--expanded-label'}\n ${this.disabled ? 'vds__sidenav-item-button--label-disabled' : ''}\n `}\n >\n {this.value ? this.value : <slot></slot>}\n </span> \n );\n }\n render(): HTMLStencilElement {\n return (\n <Host class={this.disabled ? 'vds__sidenav-item-button--disabled' : ''}>\n <button\n aria-label={this.setAriaLabel ? this.setAriaLabel : this.value}\n disabled={this.disabled}\n onClick={(evt: MouseEvent) => {\n if (this.disabled) {\n evt.stopPropagation();\n evt.preventDefault();\n } else {\n this.handleClick(evt);\n }\n }}\n class={`vds__sidenav-item-button\n vds__sidenav-item-button--variant-${this.variant} \n ${this.isStatic && !this.expanded ? 'vds__sidenav-item-button--static' : this.expanded ? 'vds__sidenav-item-button--expanded' : 'vds__sidenav-item-button--collapsed'}\n ${this.disabled && this.isStatic ? 'vds__sidenav-item-button--static-disabled' : ''}\n ${this.disabled && !this.isStatic ? 'vds__sidenav-item-button--expandable-disabled' : ''}\n ${this.disabled && this.variant==='primary' ? 'vds__sidenav-item-button--expandable-primary-disabled':'' }\n ${this.disabled && this.variant==='secondary' && !this.isStatic ? 'vds__sidenav-item-button--expandable-secondary-disabled':'' }\n `}\n >\n {this.generateInformativeIcon()} \n {this.expanded || this.isStatic ? this.generateLabel() : null }\n </button>\n </Host>\n );\n }\n}\n"]}

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

@@ -1 +0,0 @@

- {"version":3,"file":"vds-sidenav-item-button.stories.js","sourceRoot":"","sources":["../../../src/components/sidenav-item-button/vds-sidenav-item-button.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,4CAA4C;IACnD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACD,QAAQ,EAAE;QACV,OAAO,EAAE;YACL,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC;YACjC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACF;CACA,CAAC;AAEF,MAAM,MAAM,GAAG;;;;CAId,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;SACA,MAAM;;;aAGF,IAAI,CAAC,KAAK,IAAI,QAAQ;YACvB,IAAI,CAAC,IAAI,IAAI,kBAAkB;gBAC3B,IAAI,CAAC,QAAQ,IAAI,KAAK;gBACtB,IAAI,CAAC,QAAQ,IAAI,KAAK;iBACrB,IAAI,CAAC,QAAQ,IAAI,KAAK;eACxB,IAAI,CAAC,OAAO,IAAI,SAAS;;;;KAInC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAErD,eAAe,CAAC,IAAI,GAAG;IACrB,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,SAAS;CACnB,CAAC;AAGF,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjD,WAAW,CAAC,IAAI,GAAG;IACjB,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,kBAAkB;IACxB,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,uBAAuB,GAAG,IAAI,CAAC,EAAE;IACrC,OAAO;;;;8CAIqC,IAAI,CAAC,aAAa,IAAI,SAAS;4CACjC,IAAI,CAAC,WAAW,IAAI,SAAS;+CAC1B,IAAI,CAAC,cAAc,IAAI,QAAQ;;;;;WAKnE,IAAI,CAAC,KAAK,IAAI,QAAQ;UACvB,IAAI,CAAC,IAAI,IAAI,kBAAkB;cAC3B,IAAI,CAAC,QAAQ,IAAI,KAAK;cACtB,IAAI,CAAC,QAAQ,IAAI,KAAK;eACrB,IAAI,CAAC,QAAQ,IAAI,KAAK;aACxB,IAAI,CAAC,OAAO,IAAI,SAAS;;;KAGjC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAGjE,gBAAgB,CAAC,IAAI,GAAG;IACtB,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,aAAa,EAAE,SAAS;IACxB,WAAW,EAAE,SAAS;IACtB,cAAc,EAAE,QAAQ;CACzB,CAAC","sourcesContent":["export default {\n title: 'VDS/Components/Sidenav/Sidenav-Item-Button',\n parameters: {\n docs: {\n toc: true,\n },\n },\n argTypes: {\n variant: {\n options: [\"primary\", \"secondary\"],\n control: { type: \"select\" }\n },\n},\n};\n\nconst styles = `\n .container {\n padding:20px;\n } \n`;\n\nconst codeTemplate = args => {\n return `\n<style>${styles}</style>\n<div class=\"container\">\n <vds-sidenav-item-button\n value=\"${args.value || 'Button'}\" \n icon=\"${args.icon || 'desktop-computer'}\"\n expanded=\"${args.expanded || false}\"\n disabled=\"${args.disabled || false}\"\n is-static=\"${args.isStatic || false}\"\n variant=\"${args.variant || 'primary'}\"\n >\n </vds-sidenav-item-button>\n</div>\n `;\n};\n\nexport const ExpandableUsage = codeTemplate.bind({});\n\nExpandableUsage.args = {\n disabled: false,\n value: 'Button',\n expanded: true,\n icon: 'desktop-computer',\n variant: 'primary',\n};\n\n\nexport const StaticUsage = codeTemplate.bind({});\n\nStaticUsage.args = {\n disabled: false,\n value: 'Button',\n icon: 'desktop-computer',\n isStatic: true,\n expanded: false,\n variant: 'primary',\n};\n\nconst codeCustomWidthTemplate = args => {\n return `\n<style>\nvds-sidenav-item-button {\n padding: 5px;\n --vds-sidenav-item-button-expanded-width: ${args.ExpandedWidth || '17.5rem'};\n --vds-sidenav-item-button-static-width: ${args.StaticWidth || '3.75rem'};\n --vds-sidenav-item-button-collapsed-width: ${args.CollapsedWidth || '3.5rem'};\n}\n</style>\n\n<vds-sidenav-item-button\n value=\"${args.value || 'Button'}\" \n icon=\"${args.icon || 'desktop-computer'}\"\n expanded=\"${args.expanded || false}\"\n disabled=\"${args.disabled || false}\"\n is-static=\"${args.isStatic || false}\"\n variant=\"${args.variant || 'primary'}\"\n>\n</vds-sidenav-item-button>\n `;\n};\n\nexport const CustomWidthUsage = codeCustomWidthTemplate.bind({});\n\n\nCustomWidthUsage.args = {\n disabled: false,\n value: 'Like it',\n icon: 'star',\n variant: 'primary',\n expanded: true,\n isStatic: false,\n ExpandedWidth: '17.5rem',\n StaticWidth: '3.75rem',\n CollapsedWidth: '3.5rem',\n};"]}

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

@@ -1 +0,0 @@

- {"version":3,"file":"vds-sidenav-item-category.js","sourceRoot":"","sources":["../../../src/components/sidenav-item-category/vds-sidenav-item-category.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAmB,4BAA4B,EAAE,MAAM,wCAAwC,CAAC;AAOvG,MAAM,OAAO,sBAAsB;IALnC;QAaE,iGAAiG;QACxE,aAAQ,GAAY,KAAK,CAAC;QACnD,sCAAsC;QACb,aAAQ,GAAY,KAAK,CAAC;QACnD,6CAA6C;QACrC,SAAI,GAAoB,QAAQ,CAAC;KAoE1C;IAlES,gBAAgB;QACtB,OAAO,CACL,WAAK,KAAK,EAAC,sGAAsG;YAC/G,YAAM,KAAK,EAAC,kFAAkF,GAAQ,CAClG,CACP,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,OAAO,CACL,WAAK,KAAK,EAAC,mGAAmG;YAC5G,YAAM,KAAK,EAAC,+EAA+E,GAAQ,CAC/F,CACP,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO,4BAA4B,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7D,CAAC;IAEO,OAAO;QACb,OAAO,IAAI,CAAC,QAAQ;YAClB,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE;YACxB,CAAC,CAAC,IAAI,CAAC,QAAQ;gBACf,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE;gBACtB,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC9B,CAAC;IAEO,OAAO;QACb,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClD,OAAO,CACL,WAAK,KAAK,EAAE,kFAAkF,IAAI,CAAC,IAAI,EAAE;gBACvG,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACP,CAAC;QACJ,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC;YACH,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,wCAAwC,CAAC,CAAQ,CAAC;YAC/G,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,gBAAgB,EAAE,EAAE;gBACrD,WAAW,CAAC,YAAY,CAAC,uBAAuB,EAAE,GAAG,gBAAgB,EAAE,CAAC,CAAC;gBACzE,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;gBACrC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;YACvC,CAAC,CAAC,CAAC;QACL,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,gCAAgC,EAAE,KAAK,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,4DAAK,KAAK,EAAC,mCAAmC;oBAC3C,IAAI,CAAC,OAAO,EAAE;oBACd,IAAI,CAAC,OAAO,EAAE,CACX;gBACN,4DAAK,KAAK,EAAC,oCAAoC;oBAC7C,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { GroupHeaderSize, generateGroupHeaderContainer } from '../base-group-header/base-group-header';\n\n@Component({\n tag: 'vds-sidenav-item-category',\n styleUrl: 'vds-sidenav-item-category.scss',\n shadow: true,\n})\nexport class VdsSidenavItemCategory {\n @Element() hostEl: HTMLElement;\n /**\n * Define text value. This component has the possibility of adding an element to the right of this value\n * using the slot called \"action-slot\". The display condition is when a value is defined in the value property,\n * the expanded property is equal to true, and the isStatic property is equal to false.\n */\n @Prop({ mutable: true }) value: string;\n /** When true expands the nav item to show both text and icon. When false, only shows the icon */\n @Prop({ mutable: true }) expanded: boolean = false;\n /** Toggles static mode in nav-item */\n @Prop({ mutable: true }) isStatic: boolean = false;\n /** Size of the group header when expanded */\n @Prop() size: GroupHeaderSize = 'medium';\n\n private getCollapsedView() {\n return (\n <div class=\"vds-sidenav-item-category__divider-container vds-sidenav-item-category__divider-container--collapsed\">\n <span class=\"vds-sidenav-item-category__divider vds-sidenav-item-category__divider--collapsed\"></span>\n </div>\n );\n }\n\n private getStaticView() {\n return (\n <div class=\"vds-sidenav-item-category__divider-container vds-sidenav-item-category__divider-container--static\">\n <span class=\"vds-sidenav-item-category__divider vds-sidenav-item-category__divider--static\"></span>\n </div>\n );\n }\n\n private getExpandedView() {\n return generateGroupHeaderContainer(this.size, this.value);\n }\n\n private setView() {\n return this.expanded\n ? this.getExpandedView()\n : this.isStatic\n ? this.getStaticView()\n : this.getCollapsedView();\n }\n\n private setSlot() {\n if (this.value && this.expanded && !this.isStatic) {\n return (\n <div class={`vds-sidenav-item-category__action-slot vds-sidenav-item-category__action-slot--${this.size}`}>\n <slot name=\"action-slot\"></slot>\n </div>\n );\n }\n }\n\n componentDidRender() {\n try {\n const sidenavItems = Array.from(this.hostEl.querySelectorAll('vds-sidenav-item, vds-sidenav-item-app')) as any;\n sidenavItems.forEach((sidenavItem, sidenavItemIndex) => {\n sidenavItem.setAttribute('vds-sidenavItem-Index', `${sidenavItemIndex}`);\n sidenavItem.expanded = this.expanded;\n sidenavItem.isStatic = this.isStatic;\n });\n } catch (error) {\n console.warn('Error updating sidenav items: ', error);\n }\n }\n\n render(): HTMLStencilElement {\n return (\n <Host>\n <div class=\"vds-sidenav-item-category\">\n <div class=\"vds-sidenav-item-category__header\">\n {this.setView()}\n {this.setSlot()}\n </div>\n <div class=\"vds-sidenav-item-category__content\">\n <slot name=\"category-items\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -1 +0,0 @@

- {"version":3,"file":"vds-sidenav-item-category.stories.js","sourceRoot":"","sources":["../../../src/components/sidenav-item-category/vds-sidenav-item-category.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,8CAA8C;IACrD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;CAMd,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;SACA,MAAM;;;eAGA,IAAI,CAAC,KAAK,IAAI,kBAAkB;kBAC7B,IAAI,CAAC,QAAQ,IAAI,KAAK;mBACrB,IAAI,CAAC,QAAQ,IAAI,KAAK;cAC3B,IAAI,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoClB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAErD,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjD,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,oBAAoB,GAAG,IAAI,CAAC,EAAE;IAClC,OAAO;SACA,MAAM;;;eAGA,IAAI,CAAC,KAAK,IAAI,kBAAkB;kBAC7B,IAAI,CAAC,QAAQ,IAAI,KAAK;mBACrB,IAAI,CAAC,QAAQ,IAAI,KAAK;cAC3B,IAAI,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BlB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAErE,uBAAuB,CAAC,IAAI,GAAG;IAC7B,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,QAAQ;CACf,CAAC;AAGF,MAAM,uBAAuB,GAAG,IAAI,CAAC,EAAE;IACrC,OAAO;;;kDAGyC,IAAI,CAAC,aAAa,IAAI,SAAS;gDACjC,IAAI,CAAC,WAAW,IAAI,SAAS;mDAC1B,IAAI,CAAC,cAAc,IAAI,QAAQ;;;;;;;;;;aAUrE,IAAI,CAAC,KAAK,IAAI,kBAAkB;gBAC7B,IAAI,CAAC,QAAQ,IAAI,KAAK;iBACrB,IAAI,CAAC,QAAQ,IAAI,KAAK;YAC3B,IAAI,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BhB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjE,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,QAAQ;IACd,aAAa,EAAE,SAAS;IACxB,WAAW,EAAE,SAAS;IACtB,cAAc,EAAE,QAAQ;CACzB,CAAC","sourcesContent":["export default {\n title: 'VDS/Components/Sidenav/Sidenav-Item-Category',\n parameters: {\n docs: {\n toc: true,\n },\n },\n argTypes: {\n size: {\n options: ['medium', 'large'],\n control: { type: 'select' },\n },\n },\n};\n\nconst styles = `\n .container {\n margin: 32px;\n width: 25%;\n height: 50px;\n } \n`;\n\nconst codeTemplate = args => {\n return `\n<style>${styles}</style>\n<div class=\"container\">\n <vds-sidenav-item-category\n value=\"${args.value || 'Sidenav Category'}\" \n expanded=\"${args.expanded || false}\"\n is-static=\"${args.isStatic || false}\"\n size=\"${args.size}\"\n >\n <div slot=\"category-items\">\n <vds-sidenav-item\n value=\"Sidenav Item 1\" \n icon=\"desktop-computer\"\n expanded=\"true\"\n disabled=\"false\"\n has-children=\"false\"\n is-static=\"false\"\n is-active=\"false\"\n >\n </vds-sidenav-item>\n <vds-sidenav-item\n value=\"Sidenav Item 2\" \n icon=\"desktop-computer\"\n expanded=\"true\"\n disabled=\"false\"\n has-children=\"false\"\n is-static=\"false\"\n is-active=\"false\"\n >\n </vds-sidenav-item>\n <vds-sidenav-item\n value=\"Sidenav Item 3\" \n icon=\"desktop-computer\"\n expanded=\"true\"\n disabled=\"false\"\n has-children=\"false\"\n is-static=\"false\"\n is-active=\"false\"\n >\n </vds-sidenav-item>\n </div>\n </vds-sidenav-item-category>\n</div>\n `;\n};\n\nexport const ExpandableUsage = codeTemplate.bind({});\n\nExpandableUsage.args = {\n value: 'Sidenav Category',\n expanded: true,\n isStatic: false,\n size: 'medium',\n};\n\nexport const StaticUsage = codeTemplate.bind({});\n\nStaticUsage.args = {\n value: 'Sidenav Category',\n expanded: false,\n isStatic: true,\n size: 'medium',\n};\n\nconst codeTemplateWithSlot = args => {\n return `\n<style>${styles}</style>\n<div class=\"container\">\n <vds-sidenav-item-category\n value=\"${args.value || 'Sidenav Category'}\" \n expanded=\"${args.expanded || false}\"\n is-static=\"${args.isStatic || false}\"\n size=\"${args.size}\"\n >\n <div slot=\"action-slot\"><vds-link size=\"small\" variant=\"primary\" value=\"Clear all\"></vds-link></div>\n <div slot=\"category-items\">\n <vds-sidenav-item\n value=\"Sidenav Item 1\" \n icon=\"desktop-computer\"\n expanded=\"true\"\n disabled=\"false\"\n has-children=\"false\"\n is-static=\"false\"\n is-active=\"false\"\n >\n </vds-sidenav-item>\n <vds-sidenav-item\n value=\"Sidenav Item 2\" \n icon=\"desktop-computer\"\n expanded=\"true\"\n disabled=\"false\"\n has-children=\"false\"\n is-static=\"false\"\n is-active=\"false\"\n >\n </vds-sidenav-item>\n </div>\n </vds-sidenav-item-category>\n</div>\n `;\n};\n\nexport const ExpandableWithSlotUsage = codeTemplateWithSlot.bind({});\n\nExpandableWithSlotUsage.args = {\n value: 'Sidenav Category',\n expanded: true,\n isStatic: false,\n size: 'medium',\n};\n\n\nconst codeCustomWidthTemplate = args => {\n return `\n<style>\n vds-sidenav-item-category {\n --vds-sidenav-item-category-expanded-width: ${args.ExpandedWidth || '17.5rem'};\n --vds-sidenav-item-category-static-width: ${args.StaticWidth || '3.75rem'};\n --vds-sidenav-item-category-collapsed-width: ${args.CollapsedWidth || '3.5rem'};\n }\n vds-sidenav-item {\n --vds-sidenav-item-expanded-width: var(--vds-sidenav-item-category-expanded-width);\n --vds-sidenav-item-static-width: var(--vds-sidenav-item-category-static-width);\n --vds-sidenav-item-collapsed-width: var(--vds-sidenav-item-category-collapsed-width);\n }\n</style>\n\n <vds-sidenav-item-category\n value=\"${args.value || 'Sidenav Category'}\" \n expanded=\"${args.expanded || false}\"\n is-static=\"${args.isStatic || false}\"\n size=\"${args.size}\"\n >\n <div slot=\"category-items\">\n <vds-sidenav-item\n value=\"Sidenav Item 1\" \n icon=\"desktop-computer\"\n expanded=\"true\"\n disabled=\"false\"\n has-children=\"false\"\n is-static=\"false\"\n is-active=\"false\"\n >\n </vds-sidenav-item>\n <vds-sidenav-item\n value=\"Sidenav Item 2\" \n icon=\"desktop-computer\"\n expanded=\"true\"\n disabled=\"false\"\n has-children=\"false\"\n is-static=\"false\"\n is-active=\"true\"\n >\n </vds-sidenav-item>\n </div>\n </vds-sidenav-item-category>\n\n `;\n};\n\nexport const CustomWidthUsage = codeCustomWidthTemplate.bind({});\n\nCustomWidthUsage.args = {\n value: 'Sidenav Category',\n expanded: true,\n isStatic: false,\n size: 'medium',\n ExpandedWidth: '17.5rem',\n StaticWidth: '3.75rem',\n CollapsedWidth: '3.5rem',\n};\n\n"]}

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

@@ -1 +0,0 @@

- {"version":3,"file":"vds-sidenav-item-input.js","sourceRoot":"","sources":["../../../src/components/sidenav-item-input/vds-sidenav-item-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { AttachInternals, HTMLStencilElement, State, Watch } from '@stencil/core/internal';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { VdsBasicInputCustomEvent } from '../../components';\nimport { emitInputEvent } from '../../utils/form';\n\n@Component({\n tag: 'vds-sidenav-item-input',\n styleUrl: 'vds-sidenav-item-input.scss',\n shadow: true,\n formAssociated: true\n})\nexport class VdsSidenavItemInput {\n /** When true expands the nav item to show both text and icon. When false, only shows the icon */\n @Prop() expanded: boolean = true;\n /** Sets the input's value. */\n @Prop({ mutable: true, reflect: true }) value: string = \"\";\n /** Sets the input's 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 /** Allows user to define a information icon inside the input at its left . */\n @Prop() informativeIcon: string;\n /** Allows user to define a search icon inside the input at its right (zoom by default) . */\n @Prop() actionIcon: string = \"zoom\";\n /** Sets character formatting for user input. Useful for adding a mask to the input. */\n @Prop({ mutable: true }) formatter?: Function;\n\n /** Emits an event when the user change the value */\n @Event() changeInput: EventEmitter<string>;\n /** Emits an event when the user clicks on input's icon */\n @Event() iconClick: EventEmitter<MouseEvent>;\n /** Emits an event when the user clicks on icon when expanded is false */\n @Event() collapseIconClick: EventEmitter<MouseEvent>;\n\n @Element() hostEl: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n \n @State() inputIcon: string = this.actionIcon;\n\n private inputEl: HTMLVdsBasicInputElement;\n\n componentDidLoad(): void {\n this.setFormValue();\n }\n\n @Watch(\"value\")\n setFormValue(): void {\n emitInputEvent(this.hostEl, this.value);\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.value);\n }\n }\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 this.inputEl.setFocus();\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 this.inputEl.getValue();\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 this.value = \"\";\n this.inputEl.clear();\n this.inputIcon = this.actionIcon;\n return Promise.resolve();\n\t}\n\n /**\n\t * Handles change input event from vds-basic-input\n * Emits changeInput event.\n * Sets icon to close when value is not blank otherwise zoom.\n\t *\n * @params evt - VdsBasicInputCustomEvent\n\t * @returns void\n\t */\n private handleChangeInput(evt: VdsBasicInputCustomEvent<string>): void {\n evt.preventDefault();\n \n this.value = evt.detail;\n this.inputIcon = evt.detail.length > 0 ? \"close\" : this.actionIcon;\n\n this.changeInput.emit(this.value);\n }\n\n /**\n\t * Handles click event from vds-icon-button inside the input.\n * Emits iconClick event.\n * When inputIcon equals close, vds-basic-input gets clear.\n * When inputIcon equals zoom, vds-basic-input gets focus.\n\t *\n * @params evt - MouseEvent\n\t * @returns void\n\t */\n private handleIconClick(evt: MouseEvent): void {\n if (this.inputIcon === \"close\") {\n this.clear();\n }\n if (this.inputIcon === this.actionIcon) {\n this.setFocus();\n }\n this.iconClick.emit(evt);\n }\n\n /**\n\t * Handles click event from vds-icon-button when expanded is false\n * Emits collapseIconClick event.\n\t *\n * @params evt - MouseEvent\n\t * @returns void\n\t */\n private handleCollapseIconClick(evt: MouseEvent): void {\n this.collapseIconClick.emit(evt)\n }\n\n /**\n\t * Renders input when expanded is to set true.\n\t *\n\t * @returns HTMLStencilElement\n\t */\n private renderInput(): HTMLStencilElement {\n return <vds-basic-input\n ref={(el): void => {\n if (el) {\n this.inputEl = el;\n }\n }}\n size={\"medium\"}\n type={\"text\"}\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n isReadonly={this.isReadonly}\n formatter={this.formatter}\n class={\"vds-sidenav-item-input\"}\n error={this.error}\n informativeIcon={this.informativeIcon}\n onChangeInput={(evt): void => { this.handleChangeInput(evt); }}\n {...cloneAttributes(\n this.hostEl,\n \"class\",\n \"value\",\n \"disabled\",\n \"placeholder\",\n \"label\",\n \"style\"\n )}\n >\n <vds-icon-button\n slot=\"primaryActionIcon\"\n onClick={(evt): void => { this.handleIconClick(evt); }}\n icon={this.inputIcon}\n variant=\"secondary\"\n disabled={this.disabled}\n size=\"medium\">\n </vds-icon-button>\n </vds-basic-input>\n }\n\n /**\n\t * Renders sidenav-item icon when expanded is to set false.\n\t *\n\t * @returns HTMLStencilElement\n\t */\n private renderIcon(): HTMLStencilElement {\n return <vds-sidenav-item\n onClick={(evt): void => { this.handleCollapseIconClick(evt); }}\n icon={this.actionIcon}\n expanded={false}\n ></vds-sidenav-item>\n }\n\n render(): HTMLStencilElement {\n return (\n <Host class={this.disabled ? 'vds__sidenav-item-input--disabled' : ''}>\n {this.expanded ? this.renderInput() : this.renderIcon() }\n </Host>\n );\n }\n}\n"]}

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

@@ -1 +0,0 @@

- {"version":3,"file":"vds-sidenav-item-input.stories.js","sourceRoot":"","sources":["../../../src/components/sidenav-item-input/vds-sidenav-item-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,SAAS,GAAG,sBAAsB,EAAE,CAAC;AAE3C,eAAe;IACX,KAAK,EAAE,2CAA2C;IAClD,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACH,QAAQ,EAAE;QACN,eAAe,EAAE;YACb,OAAO,EAAE,CAAC,GAAG,SAAS,EAAE,SAAS,CAAC;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,UAAU,EAAE;YACR,OAAO,EAAE,CAAC,GAAG,SAAS,EAAE,SAAS,CAAC;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;CAId,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1B,OAAO;SACF,MAAM;;gBAEC,IAAI,CAAC,QAAQ;aAChB,IAAI,CAAC,KAAK;mBACJ,IAAI,CAAC,WAAW;gBACnB,IAAI,CAAC,QAAQ;mBACV,IAAI,CAAC,UAAU;aACrB,IAAI,CAAC,KAAK;MACjB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,eAAe,GAAG,CAAA,CAAC,CAAC,EAAE;mBAC1D,IAAI,CAAC,UAAU;;;KAG7B,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IACd,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,EAAE;IACT,WAAW,EAAE,QAAQ;IACrB,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE,KAAK;IACZ,eAAe,EAAE,SAAS;IAC1B,UAAU,EAAE,MAAM;CACrB,CAAC;AAGF,MAAM,uBAAuB,GAAG,CAAC,IAAI,EAAE,EAAE;IACrC,OAAO;;;;mDAIwC,IAAI,CAAC,aAAa,IAAI,SAAS;oDAC9B,IAAI,CAAC,cAAc,IAAI,QAAQ;;;;gBAInE,IAAI,CAAC,QAAQ;aAChB,IAAI,CAAC,KAAK;mBACJ,IAAI,CAAC,WAAW;gBACnB,IAAI,CAAC,QAAQ;mBACV,IAAI,CAAC,UAAU;aACrB,IAAI,CAAC,KAAK;MACjB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,eAAe,GAAG,CAAA,CAAC,CAAC,EAAE;mBAC1D,IAAI,CAAC,UAAU;;;KAG7B,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjE,gBAAgB,CAAC,IAAI,GAAG;IACpB,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,EAAE;IACT,WAAW,EAAE,QAAQ;IACrB,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE,KAAK;IACZ,eAAe,EAAE,SAAS;IAC1B,UAAU,EAAE,MAAM;IAClB,aAAa,EAAE,SAAS;IACxB,cAAc,EAAE,QAAQ;CAC3B,CAAC","sourcesContent":["import { getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nexport default {\n title: 'VDS/Components/Sidenav/Sidenav-Item-Input',\n parameters: {\n docs: {\n toc: true,\n },\n },\n argTypes: {\n informativeIcon: {\n options: [...ICON_LIST, undefined],\n control: { type: \"select\" }\n },\n actionIcon: {\n options: [...ICON_LIST, undefined],\n control: { type: \"select\" }\n },\n },\n};\n\nconst styles = `\nvds-sidenav-item-input {\n margin: 10px;\n}\n`;\n \nconst codeTemplate = (args) => {\n return `\n<style>${styles}</style>\n<vds-sidenav-item-input \n expanded=\"${args.expanded}\" \n value=\"${args.value}\"\n placeholder=\"${args.placeholder}\"\n disabled=\"${args.disabled}\"\n is-readonly=\"${args.isReadonly}\"\n error=\"${args.error}\"\n ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"`: \"\"}\n action-icon=\"${args.actionIcon}\"\n>\n</vds-sidenav-item-input>\n `;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n expanded: true,\n value: \"\",\n placeholder: \"Search\",\n disabled: false,\n isReadonly: false,\n error: false,\n informativeIcon: undefined,\n actionIcon: \"zoom\"\n};\n\n\nconst codeCustomWidthTemplate = (args) => {\n return `\n<style>\n vds-sidenav-item-input {\n padding: 5px;\n --vds-sidenav-item-input-expanded-width: ${args.ExpandedWidth || '17.5rem'};\n --vds-sidenav-item-input-collapsed-width: ${args.CollapsedWidth || '3.5rem'};\n }\n</style>\n<vds-sidenav-item-input \n expanded=\"${args.expanded}\" \n value=\"${args.value}\"\n placeholder=\"${args.placeholder}\"\n disabled=\"${args.disabled}\"\n is-readonly=\"${args.isReadonly}\"\n error=\"${args.error}\"\n ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"`: \"\"}\n action-icon=\"${args.actionIcon}\"\n>\n</vds-sidenav-item-input>\n `;\n}\n\nexport const CustomWidthUsage = codeCustomWidthTemplate.bind({});\n\nCustomWidthUsage.args = {\n expanded: true,\n value: \"\",\n placeholder: \"Search\",\n disabled: false,\n isReadonly: false,\n error: false,\n informativeIcon: undefined,\n actionIcon: \"zoom\",\n ExpandedWidth: '17.5rem',\n CollapsedWidth: '3.5rem',\n};\n\n"]}

package/dist/collection/components/skeleton-loading/vds-skeleton-loading.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-skeleton-loading.js","sourceRoot":"","sources":["../../../src/components/skeleton-loading/vds-skeleton-loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAQ7D,MAAM,OAAO,kBAAkB;IAL/B;QAME,wCAAwC;QAChC,YAAO,GAA+B,aAAa,CAAC;QAC5D,sCAAsC;QAC9B,UAAK,GAAW,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;QACzE,uCAAuC;QAC/B,WAAM,GAAW,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;KA8B9E;IA5BS,SAAS;QACf,MAAM,KAAK,GAAQ,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,aAAa,eAAW,MAAM;YACvC,4DACE,KAAK,EAAE,cAAc,CACnB,cAAc,EACd,0BAA0B,IAAI,CAAC,OAAO,EAAE,CACzC,EACD,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,iBACX,MAAM,GACZ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'vds-skeleton-loading',\n styleUrl: 'vds-skeleton-loading.scss',\n shadow: true,\n})\nexport class VdsSkeletonLoading {\n /** Define the skeleton shape variant */\n @Prop() variant: \"rectangular\" | \"circular\" = \"rectangular\";\n /** Define the skeleton width value */\n @Prop() width: string = this.variant === \"circular\" ? \"1.75rem\" : \"100%\";\n /** Define the skeleton height value */\n @Prop() height: string = this.variant === \"circular\" ? \"1.75rem\" : \"2.25rem\";\n\n private getStyles() {\n const style: any = {};\n\n if (this.width) {\n style.width = this.width;\n }\n\n if (this.height) {\n style.height = this.height;\n }\n\n return style;\n }\n\n render(): HTMLStencilElement {\n return (\n <Host role=\"progressbar\" aria-busy=\"true\">\n <div\n class={combineClasses(\n \"vds-skeleton\",\n `vds-skeleton__variant--${this.variant}`\n )}\n style={this.getStyles()}\n aria-hidden=\"true\"\n ></div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/skeleton-loading/vds-skeleton-loading.stories.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-skeleton-loading.stories.js","sourceRoot":"","sources":["../../../src/components/skeleton-loading/vds-skeleton-loading.stories.tsx"],"names":[],"mappings":"AACA,eAAe;IACX,KAAK,EAAE,gCAAgC;IACvC,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACH,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,OAAO,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC;YACpC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;CAId,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1B,OAAO;SACF,MAAM;;eAEA,IAAI,CAAC,OAAO;aACd,IAAI,CAAC,KAAK;cACT,IAAI,CAAC,MAAM;;;KAGpB,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,aAAa;IACtB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;CAClB,CAAC;AAGF,MAAM,uBAAuB,GAAG,CAAC,IAAI,EAAE,EAAE;IACrC,OAAO;SACF,MAAM;;;aAGF,IAAI,CAAC,KAAK;cACT,IAAI,CAAC,MAAM;;;KAGpB,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5D,WAAW,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;CAClB,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE,EAAE;IAClC,OAAO;SACF,MAAM;;;aAGF,IAAI,CAAC,KAAK;cACT,IAAI,CAAC,MAAM;;;KAGpB,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEtD,QAAQ,CAAC,IAAI,GAAG;IACZ,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;CAClB,CAAC;AAGF,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC5B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BN,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAElD,MAAM,CAAC,IAAI,GAAG,EACb,CAAC;AAGF,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC1B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BN,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEtD,YAAY,CAAC,IAAI,GAAG,EACnB,CAAC;AAIF,MAAM,oBAAoB,GAAG,GAAG,EAAE;IAC9B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4GN,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEtD,QAAQ,CAAC,IAAI,GAAG,EACf,CAAC","sourcesContent":["\nexport default {\n title: 'VDS/Components/SkeletonLoading',\n parameters: {\n docs: {\n toc: true,\n },\n },\n argTypes: {\n variant: {\n options: [\"rectangular\", \"circular\"],\n control: { type: \"select\" }\n },\n },\n};\n\nconst styles = `\nvds-skeleton-loading {\n margin: 10px;\n}\n`;\n \nconst codeTemplate = (args) => {\n return `\n<style>${styles}</style>\n<vds-skeleton-loading\n variant=\"${args.variant}\" \n width=\"${args.width}\"\n height=\"${args.height}\"\n>\n</vds-skeleton-loading>\n `;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n variant: \"rectangular\",\n width: \"100px\",\n height: \"100px\"\n};\n\n\nconst coderectangularTemplate = (args) => {\n return `\n<style>${styles}</style>\n<vds-skeleton-loading\n variant=\"rectangular\" \n width=\"${args.width}\"\n height=\"${args.height}\"\n>\n</vds-skeleton-loading>\n `;\n}\n\nexport const Rectangular = coderectangularTemplate.bind({});\n\nRectangular.args = {\n width: \"300px\",\n height: \"200px\"\n};\n\nconst codeCircularTemplate = (args) => {\n return `\n<style>${styles}</style>\n<vds-skeleton-loading\n variant=\"circular\" \n width=\"${args.width}\"\n height=\"${args.height}\"\n>\n</vds-skeleton-loading>\n `;\n}\n\nexport const Circular = codeCircularTemplate.bind({});\n\nCircular.args = {\n width: \"300px\",\n height: \"300px\"\n};\n\n\nconst codeAvatarTemplate = () => {\n return `\n<style>\n .card {\n padding: 8px 12px;\n margin: 10px;\n width: 200px;\n border-radius: 4px;\n background: var(--surface-neutral-default);\n box-shadow: var(--elevation-shadow-1);\n }\n .avatar-skeleton-container {\n display: flex;\n gap: 10px;\n }\n .avatar-text-container {\n display: flex;\n flex-direction: column;\n gap: 2px;\n width: 100%;\n }\n</style>\n<div class=\"card\">\n <div class=\"avatar-skeleton-container\">\n <vds-skeleton-loading variant=\"circular\"></vds-skeleton-loading>\n <div class=\"avatar-text-container\">\n <vds-skeleton-loading variant=\"rectangular\" height=\"18px\" width=\"100%\"></vds-skeleton-loading>\n <vds-skeleton-loading variant=\"rectangular\" height=\"12px\" width=\"100%\"></vds-skeleton-loading>\n </div>\n </div>\n</div>\n `;\n}\n\nexport const Avatar = codeAvatarTemplate.bind({});\n\nAvatar.args = {\n};\n\n\nconst codeCardTemplate = () => {\n return `\n<style>\n vds-card {\n padding: 20px;\n margin: auto;\n }\n p vds-skeleton-loading {\n margin-bottom: 1px;\n }\n</style>\n\n<h3>Card with text</h3>\n\n<vds-card>\n <vds-skeleton-loading class=\"title\" variant=\"rectangular\" height=\"20px\" width=\"40%\"></vds-skeleton-loading>\n <p>\n <vds-skeleton-loading variant=\"rectangular\" height=\"14px\" width=\"100%\"></vds-skeleton-loading>\n <vds-skeleton-loading variant=\"rectangular\" height=\"14px\" width=\"100%\"></vds-skeleton-loading>\n <vds-skeleton-loading variant=\"rectangular\" height=\"14px\" width=\"60%\"></vds-skeleton-loading>\n </p>\n\n <p>\n <vds-skeleton-loading variant=\"rectangular\" height=\"14px\" width=\"100%\"></vds-skeleton-loading>\n <vds-skeleton-loading variant=\"rectangular\" height=\"14px\" width=\"100%\"></vds-skeleton-loading>\n <vds-skeleton-loading variant=\"rectangular\" height=\"14px\" width=\"100%\"></vds-skeleton-loading>\n <vds-skeleton-loading variant=\"rectangular\" height=\"14px\" width=\"100%\"></vds-skeleton-loading>\n <vds-skeleton-loading variant=\"rectangular\" height=\"14px\" width=\"30%\"></vds-skeleton-loading>\n </p>\n</vds-card>\n `;\n}\n\nexport const CardWithText = codeCardTemplate.bind({});\n\nCardWithText.args = {\n};\n\n\n\nconst codeCardFormTemplate = () => {\n return `\n<style>\n vds-card {\n padding: 20px;\n margin: auto;\n }\n\n .skeleton-form-group {\n margin-bottom: 24px;\n }\n\n .skeleton-label {\n display: block;\n margin-bottom: 4px;\n }\n\n .skeleton-input,\n .skeleton-textarea,\n .skeleton-button {\n display: block;\n }\n\n .skeleton-inline-group {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n }\n\n .skeleton-space-between {\n display: flex;\n justify-content: space-between;\n }\n\n .skeleton-button-container {\n margin-top: 32px;\n display: flex;\n justify-content: end;\n gap: 4px;\n }\n</style>\n\n<h3>Card with forms</h3>\n\n <vds-card>\n \n <div class=\"skeleton-form-group\">\n <vds-skeleton-loading class=\"skeleton-label\" variant=\"rectangular\" height=\"24px\" width=\"45%\"></vds-skeleton-loading>\n </div>\n\n \n <div class=\"skeleton-form-group\">\n <vds-skeleton-loading class=\"skeleton-label\" variant=\"rectangular\" height=\"20px\" width=\"30%\"></vds-skeleton-loading>\n <vds-skeleton-loading class=\"skeleton-input\" variant=\"rectangular\" height=\"36px\" width=\"100%\"></vds-skeleton-loading>\n </div>\n\n \n <div class=\"skeleton-form-group\">\n <vds-skeleton-loading class=\"skeleton-label\" variant=\"rectangular\" height=\"20px\" width=\"50%\"></vds-skeleton-loading>\n <vds-skeleton-loading class=\"skeleton-input\" variant=\"rectangular\" height=\"36px\" width=\"100%\"></vds-skeleton-loading>\n </div>\n\n \n <div class=\"skeleton-form-group\">\n <vds-skeleton-loading class=\"skeleton-label\" variant=\"rectangular\" height=\"20px\" width=\"35%\"></vds-skeleton-loading>\n <vds-skeleton-loading class=\"skeleton-textarea\" variant=\"rectangular\" height=\"74px\" width=\"100%\"></vds-skeleton-loading>\n </div>\n\n \n <div class=\"skeleton-form-group\">\n <vds-skeleton-loading class=\"skeleton-label\" variant=\"rectangular\" height=\"20px\" width=\"45%\"></vds-skeleton-loading>\n <div class=\"skeleton-space-between\">\n <div class=\"skeleton-inline-group\">\n <vds-skeleton-loading variant=\"circular\" height=\"20px\" width=\"20px\"></vds-skeleton-loading>\n <vds-skeleton-loading variant=\"rectangular\" height=\"20px\" width=\"70px\"></vds-skeleton-loading>\n </div>\n <div class=\"skeleton-inline-group\">\n <vds-skeleton-loading variant=\"circular\" height=\"20px\" width=\"20px\"></vds-skeleton-loading>\n <vds-skeleton-loading variant=\"rectangular\" height=\"20px\" width=\"90px\"></vds-skeleton-loading>\n </div>\n <div class=\"skeleton-inline-group\">\n <vds-skeleton-loading variant=\"circular\" height=\"20px\" width=\"20px\"></vds-skeleton-loading>\n <vds-skeleton-loading variant=\"rectangular\" height=\"20px\" width=\"85px\"></vds-skeleton-loading>\n </div>\n </div>\n </div>\n\n \n <div class=\"skeleton-form-group\">\n <vds-skeleton-loading class=\"skeleton-label\" variant=\"rectangular\" height=\"20px\" width=\"50%\"></vds-skeleton-loading>\n <vds-skeleton-loading class=\"skeleton-input\" variant=\"rectangular\" height=\"36px\" width=\"100%\"></vds-skeleton-loading>\n </div>\n\n \n <div class=\"skeleton-form-group\">\n <div class=\"skeleton-inline-group\">\n <vds-skeleton-loading variant=\"rectangular\" height=\"20px\" width=\"20px\"></vds-skeleton-loading>\n <vds-skeleton-loading variant=\"rectangular\" height=\"20px\" width=\"220px\"></vds-skeleton-loading>\n </div>\n </div>\n\n \n <div class=\"skeleton-button-container\">\n <vds-skeleton-loading class=\"skeleton-button\" variant=\"rectangular\" height=\"36px\" width=\"80px\"></vds-skeleton-loading>\n <vds-skeleton-loading class=\"skeleton-button\" variant=\"rectangular\" height=\"36px\" width=\"100px\"></vds-skeleton-loading>\n </div>\n\n </vds-card>\n `;\n}\n\nexport const CardForm = codeCardFormTemplate.bind({});\n\nCardForm.args = {\n};\n\n\n\n\n"]}

package/dist/collection/components/slider-continuous/vds-basic-slider-continuous.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-basic-slider-continuous.js","sourceRoot":"","sources":["../../../src/components/slider-continuous/vds-basic-slider-continuous.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Host, Prop, h, Event, Method, Element } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { AttachInternals, forceUpdate, HTMLStencilElement, Listen, State, Watch } from '@stencil/core/internal';\nimport { getPositionBasedOnValue, getTrackFillBasedOnValue, logWarnings } from '../../utils/slider.utils';\nimport { emitInputEvent } from '../../utils/form';\n\n@Component({\n tag: 'vds-basic-slider-continuous',\n styleUrl: 'vds-basic-slider-continuous.scss',\n shadow: true,\n formAssociated: true\n})\nexport class VdsBasicSliderContinuous {\n /** Sets the value of the slider..*/\n @Prop() value: number;\n /** Sets the size of the slider. */\n @Prop() size: \"medium\" | \"large\" = \"medium\";\n /** Sets the slider’s orientation. */\n @Prop() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n /** Sets the slider on disabled state. */\n @Prop() disabled: boolean = false;\n /** Sets the min value of the slider (Min value should always be lower than the max value). */\n @Prop() minValue: number = 0;\n /** Sets the max value of the slider..*/\n @Prop() maxValue: number = 100;\n /** Sets the amount of advance of the slider. */\n @Prop() step: number;\n /** Sets the aria label in slider */\n @Prop() setAriaLabel: string;\n /** Toggles the value over the thumb in the slider \n * on - Always shows value over the thumb.\n * off - Do not show the value over the thumb.\n * auto - Shows value over the thumb when mouse hover.\n */\n @Prop() displayLabel: \"on\" | \"off\" | \"auto\" = \"on\";\n /** Toggles the limit value (min and max) of the slider .*/\n @Prop() displayLimits: boolean = true;\n /** Sets colors of the slider.\n * Track - ThemeColors\n * TrackFill - ThemeColors\n * Thumb - ThemeColors\n * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.\n */\n @Prop() colors: { [key: string]: string } | string;\n /** Sets the thumb icon */\n @Prop() icon: string = \"thumb\";\n\n /** Emits updated input value */\n @Event() changeInput: EventEmitter<number>;\n\n @Element() host: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n\n @State() displayLabelShowValue: boolean;\n\n componentWillRender(): void {\n logWarnings(this.value, this.maxValue, this.minValue);\n this.setDefaultValues();\n }\n\n componentDidRender(): void {\n this.setOutboundValues();\n }\n\n componentDidLoad(): void {\n this.setInputValue();\n this.setThumbPositionOnFirstLoad();\n }\n\n /**\n * Sets the slider value to the specified value.\n *\n * @param {number} value - The new value for the slider.\n * @returns {Promise<void>} A promise that resolves when the value is set.\n */\n @Method()\n setValue(value: number): Promise<void> {\n this.value = value;\n return Promise.resolve();\n }\n\n /**\n * Clears the slider value by setting it to the minimum value.\n *\n * @returns {Promise<void>} A promise that resolves when the value is cleared.\n */\n @Method()\n clear(): Promise<void> {\n this.value = this.minValue;\n return Promise.resolve();\n }\n\n /**\n * Sets slider value, shownValue and internals value for forms.\n * Calculates the thumb position based on the value.\n * Sets the track fill percentage.\n * \n * @returns {void}\n */\n @Watch(\"value\")\n setInputValue(): void {\n if (this.value === null || this.value === undefined || isNaN(this.value)) {\n this.value = this.minValue;\n }\n\n const stringValue = this.value.toString();\n this.thumbPosition = this.getValuePosition();\n this.shownValue = stringValue;\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(stringValue);\n }\n if (this.trackContainerEl && !this.customBackground) {\n this.trackContainerEl.style.background = getTrackFillBasedOnValue(this.value, this.maxValue, this.minValue);\n }\n emitInputEvent(this.host, this.value.toString());\n this.changeInput.emit(this.value);\n }\n\n /**\n * Updates the thumb position and forces a component update on window resize.\n *\n * @private\n * @ListensTo(\"resize\", {target: \"window\"})\n */\n @Listen(\"resize\", {target: \"window\"})\n updateThumbAndTrackPosition(): void {\n this.thumbPosition = this.getValuePosition();\n forceUpdate(this);\n }\n\n private inputRangeEl: HTMLInputElement;\n private trackContainerEl: HTMLElement;\n private shownValue: string;\n private thumbPosition: string;\n private customBackground: boolean;\n /**\n * Sets the initial value of the slider to the minimum value if no value is provided.\n * When value is provided, shownValue gets set.\n *\n * @private\n */\n private setDefaultValues(): void {\n if (this.value === undefined || this.value === null) {\n this.value = this.minValue;\n this.shownValue = this.minValue.toString();\n } else {\n this.shownValue = this.value.toString();\n }\n }\n\n /**\n * Sets the values of the slider to the minimum and maximum value when start and end value are out of bound.\n *\n * @private\n */\n private setOutboundValues(): void {\n if (this.value < this.minValue || this.value > this.maxValue) {\n this.value = this.minValue;\n this.shownValue = this.minValue.toString();\n }\n }\n\n /** \n * This is necessary to avoid converting thumbPosition into a State variable. When Thumb is State, it will render the component twice on every value change.\n * When it has value on the first load, the component need to be re-render (forceUpdate) since \n * we need the width of the slider which is only available after the component finish the first render\n * \n * @private\n * @returns {void}\n */\n private setThumbPositionOnFirstLoad(): void {\n if (this.value > this.minValue) {\n this.updateThumbAndTrackPosition();\n }\n }\n\n /**\n * Sets the value of the slider to the specified in the event.\n *\n * @private\n * @param {InputEvent} evt - The event emitted by the input.\n * @returns {void}\n */\n private handleInputChange(evt: InputEvent): void {\n const target = evt.target as HTMLInputElement; \n const value = Number(target.value);\n this.setValue(value);\n }\n\n /**\n * Sets the displayLabelShowValue to true when the mouse enters or focus the slider.\n *\n * @private\n * @returns {void}\n */\n private handleInputMouseoverOrFocus() {\n this.displayLabelShowValue = true;\n }\n\n /**\n * Sets the displayLabelShowValue to false when the mouse leaves or blur the slider.\n *\n * @private\n * @returns {void}\n */\n private handleInputMouseleaveOrBlur(): void {\n this.displayLabelShowValue = false;\n }\n\n private getShowValue(): boolean {\n let response = false;\n\n switch(this.displayLabel) {\n case \"off\":\n response = false;\n break;\n case \"auto\":\n response = this.displayLabelShowValue;\n break;\n case \"on\":\n response = true;\n break;\n default:\n response = false;\n }\n\n return response;\n }\n\n /**\n * Calculates the CSS left position of the slider thumb based on the current value.\n *\n * @private\n * @returns {string} The calculated left position of the slider thumb as a CSS pixel value.\n */\n private getValuePosition(): string {\n return getPositionBasedOnValue(this.inputRangeEl, this.host, this.maxValue, this.minValue, this.value, this.size);\n }\n\n /**\n * Sets the custom colors for the slider based on the colors property.\n * This colors have to be css variables by preferences that work in both dark and light mode.\n * \n * Track - ThemeColors\n * TrackFill - ThemeColors\n * Thumb - ThemeColors\n * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.\n *\n * @private\n * @returns { [key: string]: string }\n */\n private setColors(): { [key: string]: string } {\n const styles = {};\n this.customBackground = false;\n const colors = typeof this.colors === \"string\" ? JSON.parse(this.colors) : this.colors;\n\n if (colors && colors[\"Track\"]) {\n styles[\"--slider-track\"] = `var(--${colors[\"Track\"]})`;\n }\n\n if (colors && colors[\"TrackFill\"]) {\n styles[\"--slider-track-fill\"] = `var(--${colors[\"TrackFill\"]})`;\n }\n\n if (colors && colors[\"Thumb\"]) {\n styles[\"--slider-track-thumb\"] = `var(--${colors[\"Thumb\"]})`;\n }\n\n if (colors && colors[\"Background\"]) {\n styles[\"--slider-background\"] = `var(--${colors[\"Background\"]})`;\n this.customBackground = true;\n }\n\n return styles;\n }\n\n private renderValueReferences(): HTMLStencilElement {\n\t\treturn (\n\t\t\t<div class=\"vds-slider__value-reference-container\">\n\t\t\t\t<div\n\t\t\t\t\tclass={combineClasses(\n\t\t\t\t\t\t\"vds-slider__value-reference\"\n\t\t\t\t\t)}\n\t\t\t\t>\n <span>{this.minValue}</span>\n <span>{this.maxValue}</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n private renderShownValue(): HTMLStencilElement {\n return (\n <div class={\"vds-slider__value-container\"}>\n <div class=\"vds-slider__value-content\" style={{left: this.thumbPosition}}>\n <div class=\"vds-slider__value\">\n <div class={\"vds__tooltip-container\"}>\n <span class={\"vds__tooltip-container-text\"}>{this.shownValue}</span>\n </div>\n {this.orientation !== \"vertical\" && <vds-icon class=\"tooltip-arrow\" svgIcon={\"caret-down-filled\"}></vds-icon>}\n </div>\n </div>\n </div>\n );\n }\n\n private renderSlider() {\n return (\n <div class=\"vds-slider__input\">\n <input\n ref={(el): void => {\n this.inputRangeEl = el;\n }}\n class={combineClasses(\n \"vds-slider-input\"\n )}\n type=\"range\"\n step={this.step}\n onInput={(evt): void => this.handleInputChange(evt)}\n onMouseOver={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus()} : null}\n onMouseLeave={this.displayLabel === \"auto\" ? () => {this.handleInputMouseleaveOrBlur()} : null}\n onFocus={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus()} : null}\n onBlur={this.displayLabel === \"auto\" ? () => {this.handleInputMouseleaveOrBlur()} : null}\n min={this.minValue}\n max={this.maxValue}\n value={this.value}\n disabled={this.disabled}\n />\n <div class={`vds-slider__track`} ref={el => { if(el) this.trackContainerEl = el;}}></div>\n <div class={\"vds-slider__thumb\"} style={{left: this.thumbPosition}}>\n <vds-icon svgIcon={this.icon} size={this.size === \"medium\" ? \"1.25rem\" : \"1.5rem\"} class=\"slider-thumb\"></vds-icon>\n </div>\n {this.getShowValue() && this.renderShownValue()}\n </div>\n )\n }\n\n render() {\n return (\n <Host class={combineClasses(\"vds-slider\", this.disabled ? \"vds-slider--disabled\" : \"\")}>\n <div \n class={combineClasses(\n \"vds-slider-continuous__container\",\n `vds-slider-continuous__container--${this.size}`,\n `vds-slider-continuous__container--orientation-${this.orientation}`,\n this.colors ? \"vds-slider-continuous__container--custom-colors\" : \"vds-slider-continuous__container--colors\",\n this.disabled ? \"vds-slider-continuous__container--disabled\" : \"\",\n this.displayLimits ? \"vds-slider-continuous__container--display-limits\" : \"\"\n )}\n style={this.setColors()}\n >\n <div \n class={combineClasses(\n \"vds-slider-continuous__content\"\n )}\n aria-label={this.setAriaLabel}\n >\n {this.renderSlider()}\n </div>\n {this.displayLimits && this.renderValueReferences()}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/slider-continuous/vds-basic-slider-continuous.stories.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-basic-slider-continuous.stories.js","sourceRoot":"","sources":["../../../src/components/slider-continuous/vds-basic-slider-continuous.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/Slider/Continuous',\n parameters: {\n docs: {\n toc: true,\n },\n },\n argTypes: {\n size: {\n options: [\"medium\", \"large\"],\n control: { type: \"select\" }\n },\n orientation: {\n options: [ \"horizontal\", \"vertical\"],\n control: { type: \"select\" }\n },\n displayLabel: {\n options: [ \"on\", \"off\", \"auto\"],\n control: { type: \"select\" }\n },\n icon: {\n options: [...ICON_LIST],\n control: { type: \"select\" }\n },\n colors: {\n options: [\n undefined,\n '{\"Track\": \"track\", \"TrackFill\": \"track-fill\", \"Thumb\": \"thumb\"}',\n '{\"Track\": \"color-border-brand\", \"TrackFill\": \"color-border-healthy\", \"Thumb\": \"color-border-caution\"}'],\n control: { type: \"select\" }\n },\n },\n};\n\nconst styles = `\n div {\n margin: 60px;\n }\n`;\n \nconst codeTemplate = (args) => {\n return `\n <style>\n ${styles}\n ${args.orientation === \"vertical\" ? \" div { width: 200px !important; margin-top: 100px; }\" : \"\"}\n vds-basic-slider-continuous {\n --track: red;\n --track-fill: blue;\n --thumb: black;\n }\n </style>\n <vds-basic-slider-continuous\n value='${args.value}'\n size='${args.size}'\n orientation='${args.orientation}'\n disabled='${args.disabled}'\n min-value='${args.minValue}'\n max-value='${args.maxValue}'\n step='${args.step}'\n set-aria-label='${args.setAriaLabel}'\n display-label='${args.displayLabel}'\n display-limits='${args.displayLimits}'\n icon='${args.icon}'\n ${args.colors ? `colors='${args.colors}'` : ''}\n >\n </vds-basic-slider-continuous>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n value: \"20\",\n size: \"medium\",\n orientation: \"horizontal\",\n disabled: false,\n minValue: \"0\",\n maxValue: \"100\",\n step: \"1\",\n setAriaLabel: \"Vds-slider\",\n displayLabel: \"on\",\n displayLimits: true,\n colors: undefined,\n icon: \"thumb\",\n}\n\n\nconst codeCustomColorTemplate = (args) => {\n return `\n <style>\n ${styles}\n vds-basic-slider-continuous {\n --track: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);\n --thumb: black;\n }\n </style>\n <vds-basic-slider-continuous\n value='${args.value}'\n size='${args.size}'\n orientation='horizontal'\n disabled='${args.disabled}'\n min-value='${args.minValue}'\n max-value='${args.maxValue}'\n step='${args.step}'\n set-aria-label='${args.setAriaLabel}'\n display-label='${args.displayLabel}'\n display-limits='${args.displayLimits}'\n icon='${args.icon}'\n colors='{\"Background\": \"track\", \"Thumb\": \"thumb\"}'\n >\n </vds-basic-slider-continuous>\n`;\n}\n\nexport const CustomColorUsage = codeCustomColorTemplate.bind({});\n\nCustomColorUsage.args = {\n value: \"20\",\n size: \"medium\",\n orientation: \"horizontal\",\n disabled: false,\n minValue: \"0\",\n maxValue: \"100\",\n step: \"1\",\n setAriaLabel: \"Vds-slider\",\n displayLabel: \"on\",\n displayLimits: true,\n icon: \"thumb\",\n}\n\n"]}

package/dist/collection/components/slider-range-continuous/vds-basic-slider-range-continuous.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-basic-slider-range-continuous.js","sourceRoot":"","sources":["../../../src/components/slider-range-continuous/vds-basic-slider-range-continuous.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element, State, Method } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { getPositionBasedOnValue, logWarnings, SliderRangeValueType } from '../../utils/slider.utils';\nimport { forceUpdate, HTMLStencilElement, Listen, Watch } from '@stencil/core/internal';\nimport { countDecimalPlaces } from '../../utils/number-utils';\n\n@Component({\n tag: 'vds-basic-slider-range-continuous',\n styleUrl: 'vds-basic-slider-range-continuous.scss',\n shadow: true,\n})\nexport class VdsBasicSliderRangeContinuous {\n /** Sets the start value of the slider.*/\n @Prop() startValue: number;\n /** Sets the start value of the slider.*/\n @Prop() endValue: number;\n /** Sets the size of the slider. */\n @Prop() size: \"medium\" | \"large\" = \"medium\";\n /** Sets the slider’s orientation. */\n @Prop() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n /** Sets the slider on disabled state. */\n @Prop() disabled: boolean = false;\n /** Sets the min value of the slider (Min value should always be lower than the max value). */\n @Prop() minValue: number = 0;\n /** Sets the max value of the slider..*/\n @Prop() maxValue: number = 100;\n /** Sets the amount of advance of the slider. */\n @Prop() step: number = 1;\n /** Sets the aria label in slider */\n @Prop() setAriaLabel: string;\n /** Toggles the value over the thumb in the slider \n * on - Always shows value over the thumb.\n * off - Do not show the value over the thumb.\n * auto - Shows value over the thumb when mouse hover.\n */\n @Prop() displayLabel: \"on\" | \"off\" | \"auto\" = \"on\";\n /** Toggles the limit value (min and max) of the slider .*/\n @Prop() displayLimits: boolean = true;\n /** Sets colors of the slider.\n * Track - ThemeColors\n * TrackFill - ThemeColors\n * Thumb - ThemeColors\n * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.\n */\n @Prop() colors: { [key: string]: string } | string;\n /** Sets the thumb icon */\n @Prop() icon: string = \"thumb\";\n\n /** Emits updated input value */\n @Event() changeRangeValue: EventEmitter<{ startValue: number; endValue: number }>;\n\n @Element() host: HTMLElement;\n\n @State() displayLabelShowValue: boolean;\n\n startInputRangeEl: HTMLInputElement;\n endInputRangeEl: HTMLInputElement;\n startShownValue: string;\n endShownValue: string;\n startThumbPosition: string;\n endThumbPosition: string;\n trackRangeFillContainerEl: HTMLDivElement;\n trackContentContainerEl: HTMLDivElement;\n displayLabelStartEventTriggerIn: \"mouseover\" | \"focus\";\n displayLabelEndEventTriggerIn: \"mouseover\" | \"focus\";\n hasFocus: boolean;\n\n componentWillRender(): void {\n logWarnings({start: this.startValue, end: this.endValue}, this.maxValue, this.minValue);\n this.setDefaultValues();\n }\n\n componentDidRender(): void {\n this.setOutboundValues();\n }\n\n componentDidLoad(): void {\n this.setInputStartValue();\n this.setInputEndValue();\n forceUpdate(this);\n }\n\n /**\n * Sets the slider startValue and endValue to the specified value.\n *\n * @param { startValue: number; endValue: number } values - The new values for the slider.\n * @returns {Promise<void>} A promise that resolves when the value is set.\n */\n @Method()\n setValues({startValue, endValue}: { startValue: number; endValue: number }): Promise<void> {\n this.startValue = startValue;\n this.endValue = endValue;\n return Promise.resolve();\n }\n\n /**\n * Gets the slider startValue and endValue.\n *\n * @returns {Promise<{ startValue: number; endValue: number }>} A promise that resolves the values.\n */\n @Method()\n getValues(): Promise<{ startValue: number; endValue: number }> {\n return Promise.resolve({startValue: this.startValue, endValue: this.endValue});\n }\n\n /**\n * Clears the slider range values by setting it to the minimum and maximun value respectively.\n *\n * @returns {Promise<void>} A promise that resolves when the value is cleared.\n */\n @Method()\n clear(): Promise<void> {\n this.startValue = this.minValue;\n this.endValue = this.maxValue;\n return Promise.resolve();\n }\n\n /**\n * Focus the slider range by focusing start slider.\n *\n * @returns {Promise<void>} A promise that resolves when the first slider is focused.\n */\n @Method()\n setFocus(): Promise<void> {\n this.startInputRangeEl.focus();\n return Promise.resolve();\n }\n\n /**\n * Sets slider startThumbPosition, startShownValue.\n * Calculates the start thumb position based on the value.\n * Emits changeRangeValue event\n * \n * @returns {void}\n */\n @Watch(\"startValue\")\n setInputStartValue(): void {\n const stringValue = this.startValue.toString();\n this.startThumbPosition = this.getValuePosition(this.startValue, this.startInputRangeEl);\n this.startShownValue = stringValue;\n this.changeRangeValue.emit({startValue: this.startValue, endValue: this.endValue});\n }\n\n /**\n * Sets slider endThumbPosition, endShownValue.\n * Calculates the end thumb position based on the value.\n * Emits changeRangeValue event\n * \n * @returns {void}\n */\n @Watch(\"endValue\")\n setInputEndValue(): void {\n const stringValue = this.endValue.toString();\n this.endThumbPosition = this.getValuePosition(this.endValue, this.endInputRangeEl);\n this.endShownValue = stringValue;\n this.changeRangeValue.emit({startValue: this.startValue, endValue: this.endValue});\n }\n\n /**\n * Updates the thumb position and forces a component update on window resize.\n *\n * @ListensTo(\"resize\", {target: \"window\"})\n */\n @Listen(\"resize\", {target: \"window\"})\n updateThumbAndTrackPosition(): void {\n this.startThumbPosition = this.getValuePosition(this.startValue, this.startInputRangeEl);\n this.endThumbPosition = this.getValuePosition(this.endValue, this.endInputRangeEl);\n forceUpdate(this);\n }\n\n /**\n * Focus the first slider when displayLabel is set to auto.\n *\n * @ListensTo(\"focus\")\n */\n @Listen(\"focus\")\n setFocusOnDisplayLabelAuto(): void {\n if (this.displayLabel === \"auto\") {\n this.setFocus();\n }\n }\n \n /**\n * Sets the initial value of the slider to the minimum and maximum value when start and end value are not provided.\n * When values are provided, shownValues get set.\n *\n * @private\n */\n private setDefaultValues(): void {\n if (this.startValue === undefined || this.startValue === null) {\n this.startValue = this.minValue;\n this.startShownValue = this.minValue.toString();\n } else {\n this.startShownValue = this.startValue.toString();\n }\n\n if (this.endValue === undefined || this.endValue === null) {\n this.endValue = this.maxValue;\n this.endShownValue = this.maxValue.toString();\n } else {\n this.endShownValue = this.endValue.toString();\n }\n }\n\n /**\n * Sets the values of the slider to the minimum and maximum value when start and end value are out of bound.\n *\n * @private\n */\n private setOutboundValues(): void {\n if (this.startValue < this.minValue) {\n this.startValue = this.minValue;\n this.startShownValue = this.minValue.toString();\n }\n\n if (this.endValue > this.maxValue) {\n this.endValue = this.maxValue;\n this.endShownValue = this.maxValue.toString();\n }\n }\n\n /**\n * Calculates the CSS left position of the slider thumb based on the current value.\n *\n * @private\n * @params value - number\n * @params inputRangeEl - HTMLInputElement\n * @returns {string} The calculated left position of the slider thumb as a CSS pixel value.\n */\n private getValuePosition(value: number, inputRangeEl: HTMLInputElement): string {\n return getPositionBasedOnValue(inputRangeEl, this.host, this.maxValue, this.minValue, value, this.size);\n }\n\n /**\n * Sets the start/end value of the slider range to the specified in the event.\n *\n * @private\n * @param {InputEvent} evt - The event emitted by the input.\n * @param {SliderRangeValueType} rangeType - start | end slider.\n * @returns {void}\n */\n private handleInputRangeChange(evt: InputEvent, rangeType: SliderRangeValueType): void {\n const target = evt.target as HTMLInputElement; \n const rawValue = Number(target.value);\n\n if (rangeType === \"start\" && rawValue >= this.minValue) {\n const value = Math.min(rawValue, this.endValue);\n this.startValue = value;\n this.startInputRangeEl.value = value.toString();\n }\n\n if (rangeType === \"end\" && rawValue <= this.maxValue) {\n const value = Math.max(rawValue, this.startValue);\n this.endValue = value;\n this.endInputRangeEl.value = value.toString();\n }\n }\n\n /**\n * Handles mouseover or focus events on the slider. \n * Sets the `displayLabelShowValue` flag to `true` to indicate that the display label should show the value.\n * \n * @private\n * @param {SliderRangeValueType} rangeType - The type of range (either \"start\" or \"end\").\n * @param {\"mouseover\" | \"focus\"} eventTrigger - The type of event that triggered this function.\n * @returns {void}\n */\n private handleInputMouseoverOrFocus(rangeType: SliderRangeValueType, eventTrigger: \"mouseover\" | \"focus\") {\n this.displayLabelShowValue = true;\n\n if (rangeType === \"start\") {\n this.displayLabelStartEventTriggerIn = eventTrigger;\n setTimeout(() => {\n this.startInputRangeEl.focus();\n });\n }\n\n if (rangeType === \"end\") {\n this.displayLabelEndEventTriggerIn = eventTrigger;\n this.endInputRangeEl.focus();\n }\n }\n\n /**\n * Handles mouseleave or blur events on the slider. \n * Sets the `displayLabelShowValue` flag to `false` to hide the value in the display label.\n * \n * @private\n * @param {SliderRangeValueType} rangeType - The type of range (either \"start\" or \"end\").\n * @returns {void}\n */\n private handleInputMouseleaveOrBlur(rangeType: SliderRangeValueType): void {\n this.displayLabelShowValue = false;\n\n if (rangeType === \"start\") {\n this.displayLabelStartEventTriggerIn = undefined;\n }\n\n if (rangeType === \"end\") {\n this.displayLabelEndEventTriggerIn = undefined;\n }\n }\n\n /**\n * Handles click events on the slider track. \n * Calculates the corresponding value based on the click position and updates the slider's start or end value accordingly.\n * \n * @private\n * @param {MouseEvent} evt - The mouse event object.\n * @returns {void}\n */\n private handleTrackClick(evt: MouseEvent) {\n\t\tif (!this.disabled) {\n\t\t\t// Calc the related value to the pixel that was clicked.\n\t\t\tlet valueFromPixel = (evt.offsetX * (this.maxValue - this.minValue)) / this.trackContentContainerEl.offsetWidth + this.minValue;\n const decimalPlaces = countDecimalPlaces(this.step);\n\n valueFromPixel = decimalPlaces === 0 ? Math.round(valueFromPixel) : parseFloat(valueFromPixel.toFixed(decimalPlaces));\n\n const closestValue = [this.startValue, this.endValue].reduce((a, b) => {\n return Math.abs(b - valueFromPixel) < Math.abs(a - valueFromPixel) ? b : a;\n });\n\n switch(true) {\n case closestValue === this.startValue && closestValue === this.endValue && valueFromPixel < closestValue:\n this.startValue = valueFromPixel;\n break;\n case closestValue === this.startValue && closestValue === this.endValue && valueFromPixel > closestValue:\n this.endValue = valueFromPixel;\n break;\n case closestValue === this.startValue:\n this.startValue = valueFromPixel;\n break;\n case closestValue === this.endValue:\n this.endValue = valueFromPixel;\n break;\n }\n }\n\t}\n\n /**\n * Determines whether the value should be displayed in the label based on the current displayLabel setting.\n *\n * @private\n * @returns {boolean} - True if the value should be displayed, false otherwise.\n */\n private getShowValue(): boolean {\n let response = false;\n\n switch(this.displayLabel) {\n case \"off\":\n response = false;\n break;\n case \"auto\":\n response = this.displayLabelShowValue;\n break;\n case \"on\":\n response = true;\n break;\n default:\n response = false;\n }\n\n return response;\n }\n\n /**\n * Sets the custom colors for the slider based on the colors property.\n * This colors have to be css variables by preferences that work in both dark and light mode.\n * \n * Track - ThemeColors\n * TrackFill - ThemeColors\n * Thumb - ThemeColors\n * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.\n *\n * @private\n * @returns { [key: string]: string }\n */\n private setColors(): { [key: string]: string } {\n const styles = {};\n const colors = typeof this.colors === \"string\" ? JSON.parse(this.colors) : this.colors;\n\n if (colors && colors[\"Track\"]) {\n styles[\"--slider-track\"] = `var(--${colors[\"Track\"]})`;\n }\n\n if (colors && colors[\"TrackFill\"]) {\n styles[\"--slider-track-fill\"] = `var(--${colors[\"TrackFill\"]})`;\n }\n\n if (colors && colors[\"Thumb\"]) {\n styles[\"--slider-track-start-thumb\"] = `var(--${colors[\"Thumb\"]})`;\n styles[\"--slider-track-end-thumb\"] = `var(--${colors[\"Thumb\"]})`;\n }\n\n if (colors && colors[\"Background\"]) {\n styles[\"--slider-background\"] = `var(--${colors[\"Background\"]})`;\n }\n\n return styles;\n }\n \n private renderShownValue(rangeType: SliderRangeValueType): HTMLStencilElement {\n if (rangeType === \"start\") {\n return (\n <div class={\"vds-slider-range__value-container\"}>\n <div class=\"vds-slider-range__value-content\" style={{left: this.startThumbPosition}}>\n <div class=\"vds-slider-range__value\">\n <div class={\"vds__tooltip-container\"}>\n <span class={\"vds__tooltip-container-text\"}>{this.startShownValue}</span>\n </div>\n {this.orientation !== \"vertical\" && <vds-icon class=\"tooltip-arrow\" svgIcon={\"caret-down-filled\"}></vds-icon>}\n </div>\n </div>\n </div>\n )\n }\n\n if (rangeType === \"end\") {\n return (\n <div class={\"vds-slider-range__value-container\"}>\n <div class=\"vds-slider-range__value-content\" style={{left: this.endThumbPosition}}>\n <div class=\"vds-slider-range__value\">\n <div class={\"vds__tooltip-container\"}>\n <span class={\"vds__tooltip-container-text\"}>{this.endShownValue}</span>\n </div>\n {this.orientation !== \"vertical\" && <vds-icon class=\"tooltip-arrow\" svgIcon={\"caret-down-filled\"}></vds-icon>}\n </div>\n </div>\n </div>\n )\n }\n }\n\n private renderValueReferences(): HTMLStencilElement {\n\t\treturn (\n\t\t\t<div class=\"vds-slider-range__value-reference-container\">\n\t\t\t\t<div\n\t\t\t\t\tclass={combineClasses(\n\t\t\t\t\t\t\"vds-slider-range__value-reference\"\n\t\t\t\t\t)}\n\t\t\t\t>\n <span>{this.minValue}</span>\n <span>{this.maxValue}</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n private renderSliders(): HTMLStencilElement {\n return (\n <div\n class=\"vds-slider-range-input__content\"\n >\n <div\n class={\"vds-slider-range\"}\n onClick={(evt): void => this.handleTrackClick(evt)}\n ref={(el) => {\n if (el) {\n this.trackContentContainerEl = el;\n }\n }}\n >\n <div class={\"vds-slider-range__track\"}></div>\n <div\n class={\"vds-slider-range__range\"}\n style={{width: `calc(${this.endThumbPosition} - ${this.startThumbPosition})`, left: `${this.startThumbPosition}`}}\n ref={(el) => {\n this.trackRangeFillContainerEl = el;\n }}\n ></div>\n <div\n class={\"vds-slider-range__thumb vds-slider-range__thumb--start\"}\n style={{left: `${this.startThumbPosition}`}}\n >\n <vds-icon svgIcon={this.icon} size={this.size === \"medium\" ? \"1.25rem\" : \"1.5rem\"} class=\"slider-thumb slider-start-thumb\"></vds-icon>\n </div>\n <div\n class={\"vds-slider-range__thumb vds-slider-range__thumb--end\"}\n style={{left: `${this.endThumbPosition}`}}\n >\n <vds-icon svgIcon={this.icon} size={this.size === \"medium\" ? \"1.25rem\" : \"1.5rem\"} class=\"slider-thumb slider-end-thumb\"></vds-icon>\n </div>\n </div>\n <input\n ref={(el): void => {\n if (el) {\n this.startInputRangeEl = el;\n }\n }}\n class={combineClasses(\n \"vds-slider-input\",\n \"vds-slider-start-input\",\n this.disabled ? \"vds-slider-input--disabled\" : \"\"\n )}\n type=\"range\"\n step={this.step}\n onInput={(evt): void => this.handleInputRangeChange(evt, \"start\")}\n onMouseOver={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus(\"start\", \"mouseover\")} : null}\n onMouseLeave={this.displayLabel === \"auto\" && this.displayLabelStartEventTriggerIn === \"mouseover\" ? () => {this.handleInputMouseleaveOrBlur(\"start\")} : null}\n onFocus={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus(\"start\", \"focus\")} : null}\n onBlur={this.displayLabel === \"auto\" && this.displayLabelStartEventTriggerIn === \"focus\" ? () => {this.handleInputMouseleaveOrBlur(\"start\")} : null}\n min={this.minValue}\n max={this.maxValue}\n value={this.startValue}\n disabled={this.disabled}\n />\n <input\n ref={(el): void => {\n if (el) {\n this.endInputRangeEl = el;\n }\n }}\n class={combineClasses(\n \"vds-slider-input\",\n \"vds-slider-end-input\",\n this.disabled ? \"vds-slider-input--disabled\" : \"\"\n )}\n type=\"range\"\n step={this.step}\n onInput={(evt): void => this.handleInputRangeChange(evt, \"end\")}\n onMouseOver={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus(\"end\", \"mouseover\")} : null}\n onMouseLeave={this.displayLabel === \"auto\" && this.displayLabelEndEventTriggerIn === \"mouseover\" ? () => {this.handleInputMouseleaveOrBlur(\"end\")} : null}\n onFocus={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus(\"end\", \"focus\")} : null}\n onBlur={this.displayLabel === \"auto\" && this.displayLabelEndEventTriggerIn === \"focus\" ? () => {this.handleInputMouseleaveOrBlur(\"end\")} : null}\n min={this.minValue}\n max={this.maxValue}\n value={this.endValue}\n disabled={this.disabled}\n />\n </div>\n );\n }\n \n render() {\n return (\n <Host class={this.disabled ? \"vds-slider-range--disabled\" : \"\"}>\n <div \n class={combineClasses(\n \"vds-slider-range__container\",\n `vds-slider-range__container--${this.size}`,\n `vds-slider-range__container--orientation-${this.orientation}`,\n this.colors ? \"vds-slider-range__container--custom-colors\" : \"vds-slider-range__container--colors\",\n this.disabled ? \"vds-slider-range__container--disabled\" : \"\",\n this.displayLimits ? \"vds-slider-range__container--display-limits\" : \"\"\n )}\n style={this.setColors()}\n >\n <div\n class={\"vds-slider-range__content\"}\n aria-label={this.setAriaLabel}\n >\n {this.getShowValue() && this.renderShownValue(\"start\")}\n {this.getShowValue() && this.renderShownValue(\"end\")}\n {this.renderSliders()}\n </div>\n {this.displayLimits && this.renderValueReferences()}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/slider-range-continuous/vds-basic-slider-range-continuous.stories.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-basic-slider-range-continuous.stories.js","sourceRoot":"","sources":["../../../src/components/slider-range-continuous/vds-basic-slider-range-continuous.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,SAAS,GAAG,sBAAsB,EAAE,CAAC;AAE3C,eAAe;IACX,KAAK,EAAE,wCAAwC;IAC/C,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACH,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,WAAW,EAAE;YACT,OAAO,EAAE,CAAE,YAAY,EAAE,UAAU,CAAC;YACpC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,YAAY,EAAE;YACV,OAAO,EAAE,CAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC;YAC/B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,IAAI,EAAE;YACF,OAAO,EAAE,CAAC,GAAG,SAAS,CAAC;YACvB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,MAAM,EAAE;YACJ,OAAO,EAAE;gBACL,SAAS;gBACT,iEAAiE;gBACjE,uGAAuG;aAAC;YAC5G,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;CAId,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1B,OAAO;;UAED,MAAM;UACN,IAAI,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,sDAAsD,CAAC,CAAC,CAAC,EAAE;;;;;;;;uBAQhF,IAAI,CAAC,UAAU;qBACjB,IAAI,CAAC,QAAQ;gBAClB,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,WAAW;oBACnB,IAAI,CAAC,QAAQ;qBACZ,IAAI,CAAC,QAAQ;qBACb,IAAI,CAAC,QAAQ;gBAClB,IAAI,CAAC,IAAI;0BACC,IAAI,CAAC,YAAY;yBAClB,IAAI,CAAC,YAAY;0BAChB,IAAI,CAAC,aAAa;gBAC5B,IAAI,CAAC,IAAI;UACf,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE;;;CAGrD,CAAC;AACF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IACd,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,YAAY;IACzB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,GAAG;IACb,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,GAAG;IACT,YAAY,EAAE,YAAY;IAC1B,YAAY,EAAE,IAAI;IAClB,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,OAAO;CAChB,CAAA","sourcesContent":["import { getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nexport default {\n title: 'VDS/Components/Slider/Continuous Range',\n parameters: {\n docs: {\n toc: true,\n },\n },\n argTypes: {\n size: {\n options: [\"medium\", \"large\"],\n control: { type: \"select\" }\n },\n orientation: {\n options: [ \"horizontal\", \"vertical\"],\n control: { type: \"select\" }\n },\n displayLabel: {\n options: [ \"on\", \"off\", \"auto\"],\n control: { type: \"select\" }\n },\n icon: {\n options: [...ICON_LIST],\n control: { type: \"select\" }\n },\n colors: {\n options: [\n undefined,\n '{\"Track\": \"track\", \"TrackFill\": \"track-fill\", \"Thumb\": \"thumb\"}',\n '{\"Track\": \"color-border-brand\", \"TrackFill\": \"color-border-healthy\", \"Thumb\": \"color-border-caution\"}'],\n control: { type: \"select\" }\n },\n },\n};\n\nconst styles = `\n div {\n margin: 60px;\n }\n`;\n \nconst codeTemplate = (args) => {\n return `\n <style>\n ${styles}\n ${args.orientation === \"vertical\" ? \" div { width: 200px !important; margin-top: 100px; }\" : \"\"}\n vds-basic-slider-range-continuous {\n --track: red;\n --track-fill: blue;\n --thumb: black;\n }\n </style>\n <vds-basic-slider-range-continuous\n start-value='${args.startValue}'\n end-value='${args.endValue}'\n size='${args.size}'\n orientation='${args.orientation}'\n disabled='${args.disabled}'\n min-value='${args.minValue}'\n max-value='${args.maxValue}'\n step='${args.step}'\n set-aria-label='${args.setAriaLabel}'\n display-label='${args.displayLabel}'\n display-limits='${args.displayLimits}'\n icon='${args.icon}'\n ${args.colors ? `colors='${args.colors}'` : ''}\n >\n </vds-basic-slider-range-continuous>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n startValue: \"20\",\n endValue: \"80\",\n size: \"medium\",\n orientation: \"horizontal\",\n disabled: false,\n minValue: \"0\",\n maxValue: \"100\",\n step: \"1\",\n setAriaLabel: \"Vds-slider\",\n displayLabel: \"on\",\n displayLimits: true,\n colors: undefined,\n icon: \"thumb\",\n}\n\n"]}

package/dist/collection/components/stepper-item/vds-stepper-item.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-stepper-item.js","sourceRoot":"","sources":["../../../src/components/stepper-item/vds-stepper-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, Watch } from '@stencil/core';\n\n@Component({\n tag: 'vds-stepper-item',\n styleUrl: 'vds-stepper-item.scss',\n shadow: true,\n})\nexport class VdsStepperItem {\n /** Sets the text alignment */\n @Prop() textAlignment: 'center' | 'left' = 'left';\n /** Sets the stepper in disabled state */\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Sets the stepper state */\n @Prop() state: 'default' | 'completed' | 'error' = 'default';\n /** Sets the text inside the circle in the stepper */\n @Prop() text: string = '';\n /** Sets the icon inside the circle in the stepper. When set, the icon will override the text value */\n @Prop() icon: string = '';\n /** \n * Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')\n * When true, the item stepper can render divider and activeContent\n */\n @Prop() manageContent: boolean = false;\n /** \n * Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')\n * When true, the item stepper display the slot content of the element \n * without being manage by the `vds-vertical-stepper` or `vds-horizontal-stepper`\n */\n @Prop() activeContent: boolean = false;\n /** \n * Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')\n * When true, the item stepper renders a vds-divider after the header\n */\n @Prop() divider: boolean = false;\n\n /** Emits event when item is selected */\n @Event() selected: EventEmitter<MouseEvent>;\n\n @Element() hostEl: HTMLElement;\n\n componentDidLoad() {\n this.updateStepperHeader();\n }\n\n @Watch('textAlignment')\n @Watch('disabled')\n onPropsChange() {\n this.updateStepperHeader();\n }\n\n private updateStepperHeader() {\n try {\n const stepperHeader = this.hostEl.querySelector('vds-stepper-item-header[slot=\"item-header\"]') as HTMLVdsStepperItemHeaderElement;\n if (stepperHeader) {\n stepperHeader.textAlignment = this.textAlignment;\n stepperHeader.disabled = this.disabled;\n }\n } catch (e) {\n console.warn('updateStepperHeader warning: ', e);\n }\n }\n\n private onClick = (evt: MouseEvent) => {\n if (!this.disabled) {\n this.selected.emit(evt);\n }\n };\n\n private renderCircleContent() {\n if (this.icon) {\n return <vds-icon class=\"vds-stepper-item__circle-icon\" svgIcon={this.icon} color={this.disabled ? 'color-icon-disabled' : 'static-white'} />;\n }\n if (this.text) {\n return <span class=\"vds-stepper-item__circle-text\">{this.text}</span>;\n }\n return null;\n }\n\n renderCircle() {\n return (\n <div\n class={{\n 'vds-stepper-item__circle': true,\n [`vds-stepper-item__circle--${this.state}`]: true,\n 'vds-stepper-item__circle--disabled': this.disabled,\n }}\n >\n {this.renderCircleContent()}\n </div>\n );\n }\n\n render() {\n return (\n <Host class={{ disabled: this.disabled, [`vds-stepper-item--text-align-${this.textAlignment}`]: this.manageContent, }}>\n {this.manageContent && (\n [\n <div class=\"vds-stepper-item--header-section\">\n <button\n class={{\n 'vds-stepper-item': true,\n [`vds-stepper-item--text-align-${this.textAlignment}`]: true,\n }}\n onClick={this.onClick}\n tabIndex={this.disabled ? -1 : 0}\n disabled={this.disabled}\n >\n <div class=\"vds-stepper-item__header\">\n {this.renderCircle()}\n <slot name=\"item-header\"></slot>\n </div>\n </button>\n {this.divider && this.textAlignment === \"center\" && (<vds-divider orientation='vertical'></vds-divider>)}\n </div>,\n <div class=\"vds-stepper-item__content-cotainer\" slot={this.textAlignment === \"center\" ? \"vertical-stepper\" : undefined}>\n <div class={`vds-stepper-item__content ${this.activeContent ? \"vds-stepper-item__content--visible\" : \"\"}`}>\n {this.textAlignment === \"left\" && (<vds-divider orientation='vertical' class={this.divider ? \"\" : \"divider-no-visible\"}></vds-divider>)}\n <slot name=\"item-content\"></slot>\n </div>\n </div>\n ]\n )}\n {!this.manageContent && (\n <button\n class={{\n 'vds-stepper-item': true,\n [`vds-stepper-item--text-align-${this.textAlignment}`]: true,\n }}\n onClick={this.onClick}\n tabIndex={this.disabled ? -1 : 0}\n disabled={this.disabled}\n >\n <div class=\"vds-stepper-item__header\">\n {this.renderCircle()}\n <slot name=\"item-header\"></slot>\n </div>\n <div class=\"vds-stepper-item__content\">\n <slot name=\"item-content\"></slot>\n </div>\n </button>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stepper-item/vds-stepper-item.stories.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-stepper-item.stories.js","sourceRoot":"","sources":["../../../src/components/stepper-item/vds-stepper-item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,SAAS,GAAG,sBAAsB,EAAE,CAAC;AAE3C,eAAe;IACb,KAAK,EAAE,qCAAqC;IAC5C,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,uFAAuF;SAC7F;KACF;IACD,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,KAAK,EAAE;YACL,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,CAAC;YAC1C,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,SAAS,EAAE,GAAG,SAAS,CAAC;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;;;;;;;;;CAcd,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;MACH,MAAM;;;0BAGc,IAAI,CAAC,aAAa;iBAC3B,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ;gBACjB,IAAI,CAAC,IAAI;UACf,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;;;;mBAI7B,IAAI,CAAC,KAAK;yBACJ,IAAI,CAAC,WAAW;;;;;;GAMtC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,aAAa,EAAE,MAAM;IACrB,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,kBAAkB;CAChC,CAAC;AAEF,MAAM,oBAAoB,GAAG,IAAI,CAAC,EAAE;IAClC,OAAO;MACH,MAAM;;;;iBAIK,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ;;UAEvB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAA,CAAC,CAAC,EAAE;UACzC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAA,CAAC,CAAC,EAAE;gBACtB,IAAI,CAAC,IAAI;UACf,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;;;;mBAI7B,IAAI,CAAC,KAAK;yBACJ,IAAI,CAAC,WAAW;;;;;;GAMtC,CAAC;AAGJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3D,aAAa,CAAC,IAAI,GAAG;IACnB,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,IAAI;IACb,aAAa,EAAE,IAAI;IACnB,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,kBAAkB;CAChC,CAAC","sourcesContent":["import { getIconsFromSpriteFile } from '../../utils/icon-utils';\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nexport default {\n title: 'VDS/Components/Stepper/Stepper-Item',\n parameters: {\n docs: {\n toc: true,\n },\n design: {\n type: 'figma',\n url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?node-id=33183-129736&m=dev',\n },\n },\n argTypes: {\n textAlignment: {\n options: ['center', 'left'],\n control: { type: 'select' },\n },\n state: {\n options: ['default', 'completed', 'error'],\n control: { type: 'select' },\n },\n disabled: {\n control: { type: 'boolean' },\n },\n icon: {\n options: [undefined, ...ICON_LIST],\n control: { type: 'select' },\n },\n },\n};\n\nconst styles = `\n <style>\n .container {\n padding: 1rem;\n }\n .vds-stepper-item__content {\n margin-top: 1rem;\n padding: 1rem;\n border: 1px solid var(--color-border-low);\n border-radius: var(--radius-medium);\n background-color: var(--surface-lower);\n color: var(--color-text-high);\n }\n </style>\n`;\n\nconst codeTemplate = args => {\n return `\n ${styles}\n <div class=\"container\">\n <vds-stepper-item\n text-alignment=\"${args.textAlignment}\"\n state=\"${args.state}\"\n disabled=\"${args.disabled}\"\n text=\"${args.text}\"\n ${args.icon ? `icon=\"${args.icon}\"` : ''}\n >\n <vds-stepper-item-header\n slot=\"item-header\"\n title=\"${args.title}\"\n description=\"${args.description}\"\n ></vds-stepper-item-header>\n </vds-stepper-item>\n \n <div class=\"vds-stepper-item__content\" content-index=\"0\" active>Step content goes here.</div>\n </div>\n `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n textAlignment: 'left',\n state: 'default',\n disabled: false,\n text: '1',\n icon: '',\n title: 'Step Title',\n description: 'Step Description',\n};\n\nconst codeVerticalTemplate = args => {\n return `\n ${styles}\n <div class=\"container vds-vertical-stepper vds-vertical-stepper-left-aligned\">\n <vds-stepper-item\n text-alignment=\"left\"\n state=\"${args.state}\"\n disabled=\"${args.disabled}\"\n manage-content\n ${args.activeContent ? \"active-content\": \"\"}\n ${args.divider ? \"divider\": \"\"}\n text=\"${args.text}\"\n ${args.icon ? `icon=\"${args.icon}\"` : ''}\n >\n <vds-stepper-item-header\n slot=\"item-header\"\n title=\"${args.title}\"\n description=\"${args.description}\"\n ></vds-stepper-item-header>\n\n <div slot=\"item-content\" style=\"width: 500px; height: 500px; border: 1px solid gray; text-align: center\">Content</div>\n </vds-stepper-item>\n </div>\n `;\n\n\n};\n\nexport const VerticalUsage = codeVerticalTemplate.bind({});\n\nVerticalUsage.args = {\n state: 'default',\n disabled: false,\n divider: true,\n activeContent: true,\n text: '1',\n icon: '',\n title: 'Step Title',\n description: 'Step Description',\n};\n\n"]}

package/dist/collection/components/stepper-item-header/vds-stepper-item-header.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-stepper-item-header.js","sourceRoot":"","sources":["../../../src/components/stepper-item-header/vds-stepper-item-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,oBAAoB;IALjC;QAUE,qDAAqD;QAC7C,aAAQ,GAAY,KAAK,CAAC;QAClC,8BAA8B;QACtB,kBAAa,GAAsB,MAAM,CAAC;KAqBnD;IAnBC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACrC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CACL,EAAC,IAAI;YACH,WACE,KAAK,EAAE;oBACL,yBAAyB,EAAE,IAAI;oBAC/B,mCAAmC,EAAE,IAAI,CAAC,QAAQ;oBAClD,CAAC,uCAAuC,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI;iBACpE;gBAEA,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,gCAAgC,IAAE,IAAI,CAAC,KAAK,CAAO;gBAC5E,IAAI,CAAC,WAAW,IAAI,WAAK,KAAK,EAAC,sCAAsC,IAAE,IAAI,CAAC,WAAW,CAAO,CAC3F,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'vds-stepper-item-header',\n styleUrl: 'vds-stepper-item-header.scss',\n shadow: true,\n})\nexport class VdsStepperItemHeader {\n /** Define the text in the title label */\n @Prop() title: string;\n /** Define the text in the description label */\n @Prop() description: string;\n /** Sets the stepper item header in disabled state */\n @Prop() disabled: boolean = false;\n /** Sets the text alignment */\n @Prop() textAlignment: 'center' | 'left' = 'left';\n\n render() {\n if (!this.title && !this.description) {\n return null;\n }\n return (\n <Host>\n <div\n class={{\n 'vds-stepper-item-header': true,\n 'vds-stepper-item-header--disabled': this.disabled,\n [`vds-stepper-item-header--text-align-${this.textAlignment}`]: true,\n }}\n >\n {this.title && <div class=\"vds-stepper-item-header__title\">{this.title}</div>}\n {this.description && <div class=\"vds-stepper-item-header__description\">{this.description}</div>}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stepper-item-header/vds-stepper-item-header.stories.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-stepper-item-header.stories.js","sourceRoot":"","sources":["../../../src/components/stepper-item-header/vds-stepper-item-header.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,4CAA4C;IACnD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,uFAAuF;SAC7F;KACF;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;;eAEM,IAAI,CAAC,KAAK;qBACJ,IAAI,CAAC,WAAW;QAC7B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;GAEpC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,KAAK;CAChB,CAAC","sourcesContent":["export default {\n title: 'VDS/Components/Stepper/Stepper-Item-Header',\n parameters: {\n docs: {\n toc: true,\n },\n design: {\n type: 'figma',\n url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?node-id=33183-129736&m=dev',\n },\n },\n};\n\nconst codeTemplate = args => {\n return `\n <vds-stepper-item-header\n title=\"${args.title}\"\n description=\"${args.description}\"\n ${args.disabled ? 'disabled' : ''}\n ></vds-stepper-item-header>\n `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n title: 'Step Title',\n description: 'Step description',\n disabled: false,\n};\n"]}

package/dist/collection/components/switch/vds-switch.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-switch.js","sourceRoot":"","sources":["../../../src/components/switch/vds-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, Event, EventEmitter, AttachInternals, Watch, Method } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { getIconSize } from '../../utils/icon-attr.utils';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n tag: 'vds-switch',\n styleUrl: 'vds-switch.scss',\n shadow: true,\n formAssociated: true\n})\nexport class VdsSwitch {\n /** Sets the text to be shown in the switch */\n @Prop({ reflect: true, mutable: true }) labelValue: string;\n /** Sets the switch in checked state */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /** Sets the switch in disabled state */\n @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n /** Sets the switch's size */\n @Prop({ mutable: true }) size: \"medium\" | \"large\" = \"medium\";\n /** Toggles the required sign in the field */\n @Prop({ mutable: true }) isRequired: boolean = false;\n /** Sets the value in the input. Usually uses checked prop as string. \n * Used to manage Reactive forms and other native functionality */\n @Prop({ reflect: true, mutable: true }) value: string;\n /** Aligns the label in relation to the switch*/\n @Prop() labelAlignment: \"start\" | \"end\" = \"end\";\n\n @Element() hostEl: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n\n /** Makes a custom change to target property using checked (use for React components) */\n @Event() check: EventEmitter<boolean>;\n\n private state: \"checked\" | \"unchecked\" = \"unchecked\";\n\n componentWillRender(): void {\n this.setSwitchState();\n }\n\n componentDidLoad(): void {\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.checked.toString());\n }\n }\n\n /**\n * Executes every time checked value changes.\n * Sets form value in order to work properly with native forms\n *\n * @returns void\n */\n @Watch(\"checked\")\n setCheckedStates(): void {\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.checked.toString());\n }\n }\n\n /**\n * Executes every time the switch is being click.\n * Executes toggleCheck method.\n *\n * @param event - MouseEvent\n * @returns void\n */\n\thandleClick(_: MouseEvent): void {\n\t\tthis.toggleCheck();\n\t}\n\n /**\n * Toggles switch value.\n * Emits check event with checked value.\n *\n * @returns Promise<void>\n */\n @Method()\n toggleCheck(): Promise<void> {\n if (!this.disabled) {\n const inputEvent = new InputEvent(\"input\");\n\t\t\tthis.checked = !this.checked;\n this.value = this.checked.toString();\n\t\t\tthis.check.emit(this.checked);\n this.hostEl.dispatchEvent(inputEvent);\n\t\t}\n return Promise.resolve();\n }\n\n /**\n * Determine state of the switch based on the checked property.\n * When checked is true, state is checked.\n * When checked is false, state is unchecked.\n *\n * @returns void\n */\n private setSwitchState(): void {\n this.state = this.checked ? \"checked\" : \"unchecked\";\n }\n\n /**\n * Returns the icon prop based on the state and calculate the size.\n *\n * @returns HTMLStencilElement\n */\n private renderSwitch(): HTMLStencilElement {\n const size = getIconSize(this.size);\n switch(this.state) {\n case \"checked\":\n return <vds-icon class=\"switch-icon\" svgIcon={`switch-on`} size={size}></vds-icon>;\n default:\n return <vds-icon class=\"switch-icon switch-icon-off\" svgIcon={`switch-off`} size={size}></vds-icon>;\n }\n }\n\n /**\n * Returns the vds-label for the switch when there is a label provided.\n *\n * @returns HTMLStencilElement\n */\n private renderLabel(): HTMLStencilElement {\n return <vds-label\n class={\"switch-label\"}\n labelValue={this.labelValue}\n required={this.isRequired}\n size={this.size}\n disabled={this.disabled}></vds-label>\n }\n\n render() {\n return (\n <Host state={this.state} class={this.disabled ? \"vds-switch--disabled\" : \"\"}>\n <div\n onClick={(evt): void => {this.handleClick(evt)}}\n class={combineClasses(\n \"vds-switch__container\",\n `vds-switch__container--size-${this.size}`,\n `vds-switch__container--label-alignment-${this.labelAlignment}`,\n this.checked ? \"vds-switch--checked\" : \"\",\n this.disabled ? \"vds-switch--disabled\" : \"\"\n )}\n >\n <div class=\"vds-switch\">\n <input\n type={\"checkbox\"}\n checked={this.checked}\n value={this.value}\n id={this.hostEl?.id}\n disabled={this.disabled} />\n {this.renderSwitch()}\n </div>\n {this.labelValue && this.renderLabel()}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/switch/vds-switch.stories.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-switch.stories.js","sourceRoot":"","sources":["../../../src/components/switch/vds-switch.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,cAAc,EAAE;YACd,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC;YACzB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;CAKd,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;SACA,MAAM;;;gBAGC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,UAAU;UAC5B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UAC7B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;2BACnB,IAAI,CAAC,cAAc;;;;CAI7C,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,IAAI,EAAE,QAAQ;IACd,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,KAAK;IACjB,cAAc,EAAE,KAAK;CACtB,CAAC;AAEF,MAAM,wBAAwB,GAAG,IAAI,CAAC,EAAE;IACtC,OAAO;;MAEH,MAAM;;;;;;;;;gBASI,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,UAAU;UAC5B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UAC7B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;2BACnB,IAAI,CAAC,cAAc;;;;CAI7C,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEnE,iBAAiB,CAAC,IAAI,GAAG;IACvB,IAAI,EAAE,QAAQ;IACd,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,KAAK;IACjB,cAAc,EAAE,KAAK;CACtB,CAAC","sourcesContent":["export default {\n title: 'VDS/Components/Switches/Switch',\n parameters: {\n docs: {\n toc: true,\n },\n },\n argTypes: {\n size: {\n options: ['medium', 'large'],\n control: { type: 'select' },\n },\n labelAlignment: {\n options: ['start', 'end'],\n control: { type: 'select' },\n },\n },\n};\n\nconst styles = `\n div {\n margin: 20px;\n width: 400px; \n }\n`;\n\nconst codeTemplate = args => {\n return `\n<style>${styles}</style>\n<div>\n <vds-switch\n size=\"${args.size}\"\n label-value=\"${args.labelValue}\"\n ${args.checked ? 'checked' : ''}\n ${args.disabled ? 'disabled' : ''}\n ${args.isRequired ? 'is-required' : ''}\n label-alignment=\"${args.labelAlignment}\"\n >\n </vds-switch>\n</div>\n`;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n size: 'medium',\n labelValue: 'Label 1',\n checked: false,\n disabled: false,\n isRequired: false,\n labelAlignment: 'end',\n};\n\nconst customColorsCodeTemplate = args => {\n return `\n<style>\n ${styles}\n .custom-switch {\n --vds-switch-state-off: var(--color-background-danger-default);\n --vds-switch-state-on: var(--color-background-healthy-default);\n }\n</style>\n<div>\n <vds-switch\n class=\"custom-switch\"\n size=\"${args.size}\"\n label-value=\"${args.labelValue}\"\n ${args.checked ? 'checked' : ''}\n ${args.disabled ? 'disabled' : ''}\n ${args.isRequired ? 'is-required' : ''}\n label-alignment=\"${args.labelAlignment}\"\n >\n </vds-switch>\n</div>\n`;\n};\n\nexport const CustomColorsUsage = customColorsCodeTemplate.bind({});\n\nCustomColorsUsage.args = {\n size: 'medium',\n labelValue: 'Label 1',\n checked: false,\n disabled: false,\n isRequired: false,\n labelAlignment: 'end',\n};\n"]}

package/dist/collection/components/tab/vds-tab.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-tab.js","sourceRoot":"","sources":["../../../src/components/tab/vds-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element, Listen, Watch } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n tag: 'vds-tab',\n styleUrl: 'vds-tab.scss',\n shadow: true,\n})\nexport class VdsTab {\n @Element() hostEl: HTMLElement;\n /** Sets tab title. The value of this property is used by default as an aria-label too. */\n @Prop() value: string;\n /** \n * @deprecated This property is now being overridden by the VdsTabsGroup, \n * the activeTabIndex property is the new preferred way of setting the default tab. \n * Sets tab to active state.\n */\n @Prop({ mutable: true, reflect: true }) isActive: boolean = false;\n /** Sets tab to disable state */\n @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n /** \n * @deprecated This property is being replaced by informativeIcon. \n * Sets tab icon. The tab icon is only a visual representation. \n */\n @Prop({ mutable: true }) icon?: string;\n /** Sets tab icon. The tab icon is only a visual representation. */\n @Prop({ mutable: true }) informativeIcon?: string;\n /** Sets tab fixed width. This property can't be used at the same time with the property maxWidth */\n @Prop({ mutable: true }) width: string;\n /** Sets tab maxWidth. This property can't be used at the same time with the property width */\n @Prop({ mutable: true }) maxWidth: string;\n /** Sets tab type. Default shows Icon+Label. Icon shows only the Icon. withAction shows the Icon+Label+ActionIconButton. Custom permits define content in a slot. */\n @Prop({ mutable: true }) type: 'default' | 'icon' | 'withAction' | 'text' | 'custom'= 'default';\n /** Sets tab action icon button. Only available selecting withAction type. */\n @Prop({ mutable: true }) actionIcon: string;\n /** Sets tab action icon button aria-label*/\n @Prop({ mutable: true }) actionAriaLabel: string;\n /** Set aria-label for the tab. This property will be used only if the aria-label is required to be different from the value property. */\n @Prop({ mutable: true }) setAriaLabel: string;\n /** Emits event when the tab is selected (sets isActive prop to true) */\n @Event() isSelected: EventEmitter<MouseEvent>;\n /** Emits event when the action icon button is clicked */\n @Event() clicked: EventEmitter<MouseEvent>;\n /** Emits event when the value is changed */\n @Event() valueChanged: EventEmitter<string>;\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if ((event.target as HTMLElement).nodeName === \"VDS-TAB\" && event.key === 'Enter' || event.key === ' ') {\n event.preventDefault(); \n if (!this.isActive && !this.disabled) {\n this.isActive = true;\n this.isSelected.emit();\n }\n }\n }\n\n @Watch('value')\n handleValueChange() {\n this.valueChanged.emit(this.value);\n }\n\n private generateIcon() {\n const iconToUse = this.informativeIcon ? this.informativeIcon : this.icon? this.icon : null;\n if (iconToUse) {\n return (\n <span class=\"vds__tab--icon-container\">\n <vds-icon \n svgIcon={iconToUse} \n color={this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-default' : 'color-icon-medium'}\n size=\"1.25rem\">\n </vds-icon>\n </span>\n );\n } else {\n console.warn('Tab component warning: You must set the property informativeIcon to show the icon on the left side when you use default type.');\n }\n }\n\n private generateActionIconButton() {\n if (this.actionIcon) {\n return (\n <span class=\"vds__tab--action-icon-button\">\n <vds-icon-button\n icon={this.actionIcon}\n variant=\"tertiary\"\n size=\"small\"\n setAriaLabel={this.actionAriaLabel}\n onClick={(evt: MouseEvent) => {\n this.handleActionIconClick(evt);\n }}\n disabled={this.disabled}\n ></vds-icon-button>\n </span>\n );\n } else {\n console.warn('Tab component warning: You must set the property actionIcon to use the tab type withAction.');\n }\n }\n private generateLabel() {\n if ((this.value === undefined || this.value === '') && this.type !== 'icon') {\n console.warn('Tab component warning: You must set the property value to use the tab type default, text or withAction.');\n } \n return (\n <span class={\n combineClasses(\n 'vds__tab--label', this.isActive ? 'vds__tab--label-active' : '', this.disabled ? 'vds__tab--label-disabled' : '',\n this.type==='default' ? 'vds__tab--label-default' : '',\n this.type==='text' ? 'vds__tab--label-text' : '',\n this.type==='withAction' ? 'vds__tab--label-with-action' : '',\n this.type==='withAction' && this.width ? 'vds__tab--label-with-action-fixed-width' : '',\n this.type==='withAction' && this.maxWidth ? 'vds__tab--label-with-action-fixed-max-width' : ''\n )}\n >\n {this.value}\n </span>\n );\n }\n private generateTypeDefault() {\n return (\n <div class=\"vds__tab--default\">\n {this.generateIcon()}\n <span class=\"vds__tab--spacing-between-content\"></span>\n {this.generateLabel()}\n </div>\n );\n }\n private generateTypeIcon() {\n return (\n <div class=\"vds__tab--icon\">{this.generateIcon()}</div>\n );\n }\n\n private generateTypeWithAction() {\n return (\n <div class=\"vds__tab--with-action\">\n <div class=\"vds__tab--with-action-content\" tabindex={this.disabled ? \"-1\" :\"0\"}>\n {this.generateIcon()}\n <span class=\"vds__tab--spacing-between-content\"></span>\n {this.generateLabel()}\n <span class=\"vds__tab--spacing-between-content\"></span>\n </div>\n <div class=\"vds__tab--with-action-actionable\">\n {this.generateActionIconButton()}\n </div>\n </div>\n );\n }\n private generateTypeCustom() {\n return (\n <div class=\"vds__tab--custom\">\n <slot name=\"tab-header-content\"></slot>\n </div>\n );\n }\n private generateTypeText() {\n return (\n <div class=\"vds__tab--text\">\n {this.generateLabel()}\n </div>\n );\n }\n // getType: return the formatted content\n private getType() {\n switch (this.type) {\n case 'default': {\n return this.generateTypeDefault();\n }\n case 'icon': {\n return this.generateTypeIcon();\n }\n case 'withAction': {\n return this.generateTypeWithAction();\n }\n case 'custom': {\n return this.generateTypeCustom();\n }\n case 'text': {\n return this.generateTypeText();\n }\n }\n }\n private handleClick(evt: MouseEvent): void {\n if (!this.isActive && !this.disabled) {\n this.isActive = true;\n this.isSelected.emit(evt);\n }\n }\n private handleActionIconClick(evt: MouseEvent): void {\n if (this.type === 'withAction') {\n evt.stopPropagation();\n this.clicked.emit(evt);\n }\n }\n \n // setStyle define the width depending the properties prioritizing the width over the maxWidth\n private setStyle() {\n if (this.width) {\n return { '--tab-width': this.width };\n } else if (this.maxWidth) {\n return { '--tab-max-width': this.maxWidth };\n } else {\n return {};\n }\n }\n\n render() {\n return (\n <Host style={this.setStyle()} class={this.disabled ? 'vds__tab--disabled' : ''}>\n <div\n class={combineClasses('vds__tab vds__tab--spacing', this.isActive ? 'vds__tab--active' : '', this.disabled ? 'vds__tab--disabled' : '')}\n role=\"tab\"\n aria-label={this.setAriaLabel ? this.setAriaLabel : this.value}\n tabindex={this.disabled ? \"-1\" :\"0\"}\n onClick={(evt: MouseEvent) => {\n this.handleClick(evt);\n }}\n >\n <div class=\"vds__tab-container\">\n {this.getType()}\n </div>\n </div>\n <div class={this.isActive ? 'vds__tab--content-active' : 'vds__tab--content'}>\n <slot name=\"tab-content\"></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/tab/vds-tab.stories.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-tab.stories.js","sourceRoot":"","sources":["../../../src/components/tab/vds-tab.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,CAAC;YAC5D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAIF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;;;;aAII,IAAI,CAAC,KAAK;wBACC,IAAI,CAAC,eAAe;YAChC,IAAI,CAAC,IAAI;iBACJ,IAAI,CAAC,QAAQ;gBACd,IAAI,CAAC,QAAQ;aAChB,IAAI,CAAC,KAAK;iBACN,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;KAmBzB,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,OAAO;IACd,eAAe,EAAE,KAAK;IACtB,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,OAAO;IACjB,QAAQ,EAAE,OAAO;IACjB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,EAAE;CACb,CAAC;AAEF,MAAM,gCAAgC,GAAG,IAAI,CAAC,EAAE;IAC9C,OAAO;;;;aAII,IAAI,CAAC,KAAK;wBACC,IAAI,CAAC,eAAe;YAChC,IAAI,CAAC,IAAI;iBACJ,IAAI,CAAC,QAAQ;mBACX,IAAI,CAAC,UAAU;yBACT,IAAI,CAAC,eAAe;gBAC7B,IAAI,CAAC,QAAQ;aAChB,IAAI,CAAC,KAAK;iBACN,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;KAmBzB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,gCAAgC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEtF,4BAA4B,CAAC,IAAI,GAAG;IAClC,KAAK,EAAE,6BAA6B;IACpC,eAAe,EAAE,KAAK;IACtB,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,OAAO;IACjB,UAAU,EAAE,gBAAgB;IAC5B,eAAe,EAAE,WAAW;IAC5B,QAAQ,EAAE,OAAO;IACjB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,EAAE;CACb,CAAC;AAEF,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE;IAChC,OAAO;;;;YAIG,IAAI,CAAC,IAAI;iBACJ,IAAI,CAAC,QAAQ;gBACd,IAAI,CAAC,QAAQ;;;;;;;;;;;;KAYxB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1D,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,OAAO;IACjB,QAAQ,EAAE,OAAO;CAClB,CAAC","sourcesContent":["export default {\n title: 'VDS/Components/Tabs/Simple Tab',\n parameters: {\n docs: {\n toc: true,\n },\n },\n argTypes: {\n type: {\n options: ['default', 'icon', 'text', 'withAction', 'custom'],\n control: { type: 'select' },\n },\n isActive: {\n options: ['true', 'false'],\n control: { type: 'select' },\n },\n disabled: {\n options: ['true', 'false'],\n control: { type: 'select' },\n },\n },\n};\n\n\n\nconst codeTemplate = args => {\n return `\n<h3>Disclaimer: Make sure the vds-tab is implemented inside a vds-tab-group for the expected behavior</h3>\n<div class=\"container\" role=\"tablist\"> \n <vds-tab \n value=\"${args.value}\"\n informative-icon=\"${args.informativeIcon}\"\n type=\"${args.type}\"\n is-active=\"${args.isActive}\"\n disabled=\"${args.disabled}\"\n width=\"${args.width}\"\n max-width=\"${args.maxWidth}\"\n >\n <div data-a11y-ignore slot=\"tab-content\">\n <div style=\"text-align:left;padding-top:20px\"> \n Tab 1 content.\n <br>\n <vds-button \n variant=\"primary\"\n textAlignment=\"center\"\n category=\"button\"\n size=\"medium\"\n danger=\"false\"\n disabled=\"false\"\n text=\"Button\"\n >Example button</vds-button>\n </div>\n </div> \n </vds-tab>\n</div>\n `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n value: 'Tab 1',\n informativeIcon: 'add',\n type: 'default',\n isActive: 'false',\n disabled: 'false',\n width: '',\n maxWidth: '',\n};\n\nconst codeTemplateWithActionIconButton = args => {\n return `\n<h3>Disclaimer: Make sure the vds-tab is implemented inside a vds-tab-group for the expected behavior</h3>\n<div class=\"container\" role=\"tablist\"> \n <vds-tab \n value=\"${args.value}\"\n informative-icon=\"${args.informativeIcon}\"\n type=\"${args.type}\"\n is-active=\"${args.isActive}\"\n action-icon=\"${args.actionIcon}\"\n action-aria-label=\"${args.actionAriaLabel}\"\n disabled=\"${args.disabled}\"\n width=\"${args.width}\"\n max-width=\"${args.maxWidth}\"\n >\n <div data-a11y-ignore slot=\"tab-content\">\n <div style=\"text-align:left;padding-top:20px\"> \n Tab 1 content.\n <br>\n <vds-button \n variant=\"primary\"\n textAlignment=\"center\"\n category= \"button\"\n size= \"medium\"\n danger= \"false\"\n disabled= \"false\"\n text=\"Button\"\n >Example button</vds-button>\n </div>\n </div> \n </vds-tab>\n</div>\n `;\n};\n\nexport const TabWithActionIconButtonUsage = codeTemplateWithActionIconButton.bind({});\n\nTabWithActionIconButtonUsage.args = {\n value: 'Tab with Action Icon Button',\n informativeIcon: 'add',\n type: 'withAction',\n isActive: 'false',\n actionIcon: 'administration',\n actionAriaLabel: 'Open Menu',\n disabled: 'false',\n width: '',\n maxWidth: '',\n};\n\nconst codeTemplateCustom = args => {\n return `\n<h3>Disclaimer: Make sure the vds-tab is implemented inside a vds-tab-group for the expected behavior</h3>\n<div class=\"container\" role=\"tablist\"> \n <vds-tab \n type=\"${args.type}\"\n is-active=\"${args.isActive}\"\n disabled=\"${args.disabled}\"\n >\n <div slot=\"tab-header-content\">\n <span>Tab 1 Custom</span>\n </div>\n <div slot=\"tab-content\">\n <div data-a11y-ignore style=\"text-align:left;padding-top:20px\"> \n Tab 1 content.\n </div>\n </div> \n </vds-tab>\n</div>\n `;\n};\n\nexport const TabCustomUsage = codeTemplateCustom.bind({});\n\nTabCustomUsage.args = {\n type: 'custom',\n isActive: 'false',\n disabled: 'false',\n};\n"]}

package/dist/collection/components/tabs-group/vds-tabs-group.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-tabs-group.js","sourceRoot":"","sources":["../../../src/components/tabs-group/vds-tabs-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAsB,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAOnE,MAAM,OAAO,YAAY;IALzB;QAOE,uCAAuC;QACd,SAAI,GAA0D,SAAS,CAAC;QAKjG,sCAAsC;QACE,iBAAY,GAA4E,YAAY,CAAC;QAC7I,6CAA6C;QACpB,cAAS,GAAY,KAAK,CAAC;QACpD;;WAEG;QACsB,mBAAc,GAAW,CAAC,CAAC;QACpD,sCAAsC;QACE,aAAQ,GAAY,KAAK,CAAC;QAEzD,2BAAsB,GAAW,CAAC,CAAC;QAKpC,SAAI,GAAwB,EAAE,CAAC;KAgMxC;IA3LC,kBAAkB,CAAC,GAAgB;QACjC,MAAM,MAAM,GAAG,GAAG,CAAC,MAAqB,CAAC;QACzC,IAAI,CAAC,sBAAsB,GAAG,MAAM,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,YAAY,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC;QAChF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,sBAAsB,CAAC;QAClD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAGD,kBAAkB;QAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACjC,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;QACnC,CAAC;IACH,CAAC;IAEO,uBAAuB;;QAC7B,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;QACnC,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,SAAS,CAAC,UAAU,0CAAE,aAAa,CAAC,2BAA2B,CAAC,CAAC;YACtF,IAAI,OAAO,EAAE,CAAC;gBACZ,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;oBAC5C,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBACxB,IAAI,CAAC,uBAAuB,EAAE,CAAA;gBAChC,CAAC,CAAC,CAAC;gBACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACvC,CAAC;QACH,CAAC;IACH,CAAC;IAEO,OAAO;QACX,IAAI,CAAC;YACL,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC;YAChE,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACzB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM;oBAC9F,CAAC,CAAC,IAAI,CAAC,cAAc;oBACrB,CAAC,CAAC,CAAC,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,CAAC,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAGD,0BAA0B;QACxB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAGD,gBAAgB;QACd,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC9B,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;OAIG;IAEI,KAAK,CAAC,SAAS;QACpB,OAAO,IAAI,CAAC,sBAAsB,CAAC;IACrC,CAAC;IAED;;;;OAIG;IAEI,KAAK,CAAC,SAAS,CAAC,KAAa;QAClC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IAEO,YAAY,CAAC,KAAa;QAChC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC3D,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,sBAAsB,CAAC;QACpD,CAAC;IACH,CAAC;IAEO,gBAAgB,CAAC,KAAa;;QACpC,MAAM,YAAY,GAAG,KAAK,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QAC5D,MAAM,SAAS,GAAG,YAAY,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,0CAAE,QAAQ,CAAA,CAAC;QAC9D,IAAI,YAAY,IAAI,SAAS,EAAE,CAAC;YAC9B,OAAO,KAAK,CAAC;QACf,CAAC;QACD,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACpE,OAAO,iBAAiB,IAAI,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;IACxD,CAAC;IAEO,gBAAgB;;QACtB,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC9C,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,SAAS,CAAC,UAAU,0CAAE,aAAa,CAAC,2BAA2B,CAAgB,CAAC;YACrG,IAAI,OAAO,EAAE,CAAC;gBACZ,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,WAAW,IAAI,CAAC,kBAAkB,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,CAAC,CAAC;YAChH,CAAC;QACH,CAAC;IACH,CAAC;IAEO,uBAAuB;QAC7B,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACvC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;YAC1C,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;YAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC;YAE7D,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,OAAO,GAAG,UAAU,IAAI,CAAC;YAC1D,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,QAAQ,IAAI,CAAC;QACjD,CAAC;IACH,CAAC;IAEO,wBAAwB;QAC9B,OAAO,IAAI,CAAC,SAAS,IAAI,CACvB,WACE,KAAK,EAAC,uCAAuC,EAC7C,GAAG,EAAE,CAAC,EAAkB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,GACpD,CACH,CAAC;IACJ,CAAC;IAEO,eAAe,CAAC,IAAyB;QAC/C,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACzE,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE;YAC7B,MAAM,WAAW,GAAG,QAAQ,KAAK,IAAI,CAAC,sBAAsB,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC;YAC9E,GAAG,CAAC,QAAQ,GAAG,WAAW,CAAC;YAC3B,IAAI,WAAW,EAAE,CAAC;gBAChB,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;gBACrB,IAAI,CAAC,uBAAuB,EAAE,CAAC;YACjC,CAAC;YACD,GAAG,CAAC,YAAY,CAAC,cAAc,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;YAChD,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACrB,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YACvB,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE;YAC3D,4DACE,GAAG,EAAE,CAAC,EAAkB,EAAQ,EAAE;oBAChC,IAAI,CAAC,EAAE;wBAAE,OAAO;oBAChB,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC;gBAC/B,CAAC,EACD,KAAK,EAAC,iBAAiB;gBAEvB,4DAAK,KAAK,EACR,cAAc,CACZ,yBAAyB,EACzB,+BAA+B,GAAG,IAAI,CAAC,YAAY,EACnD,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,yCAAyC,CAAC,CAAC,CAAC,EAAE,CAChE;oBAED,4DAAK,KAAK,EAAC,iCAAiC;wBAC1C,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B;oBACN,4DAAK,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,SAAS;wBAC1D,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB;oBACL,IAAI,CAAC,wBAAwB,EAAE,CAC5B,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, State, Element, Prop, Method, Listen, forceUpdate } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement, Watch } from '@stencil/core/internal';\n\n@Component({\n tag: 'vds-tabs-group',\n styleUrl: 'vds-tabs-group.scss',\n shadow: true,\n})\nexport class VdsTabsGroup {\n @Element() hostEl: HTMLElement;\n /** Sets the type for the tabs group */\n @Prop({ mutable: true }) type: 'default' | 'icon' | 'withAction' | 'text' | 'custom' = 'default';\n /** Sets the width for the tabs */\n @Prop({ mutable: true }) width?: string;\n /** Sets the max width for the tabs */\n @Prop({ reflect: true, mutable: true }) maxWidth?: string;\n /** Sets the alignment for the tabs */\n @Prop({ reflect: true, mutable: true }) tabAlignment: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' = 'flex-start';\n /** Shows the indicator track under the tab*/\n @Prop({ mutable: true }) showTrack: boolean = false;\n /** Sets the index to select the active tab inside the group.\n * If not specified, loads the first tab.\n */\n @Prop({ mutable: true }) activeTabIndex: number = 0;\n /** Sets tab group to disable state */\n @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n\n @State() internalActiveTabIndex: number = 0;\n\n private activeTab: HTMLVdsTabElement;\n private tabsGroupContainer: HTMLDivElement;\n private indicatorEl: HTMLDivElement;\n private tabs: HTMLVdsTabElement[] = [];\n private resizeObserver: ResizeObserver;\n\n\n @Listen('isSelected')\n handleTabSelection(evt: CustomEvent): void {\n const target = evt.target as HTMLElement;\n this.internalActiveTabIndex = Number(target?.getAttribute('vds-tabindex')) || 0;\n this.activeTabIndex = this.internalActiveTabIndex;\n this.updateTabsState(this.tabs);\n }\n\n @Listen('valueChanged')\n handleValueChanged(): void {\n this.updateIndicatorPosition();\n forceUpdate(this);\n }\n\n componentWillLoad() {\n this.setTabs();\n }\n\n componentWillRender() {\n this.setTabs();\n }\n\n componentDidRender(): void {\n if (this.tabs.length > 0) {\n this.observeActiveTabContent();\n }\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n private observeActiveTabContent() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n if (this.activeTab) {\n const content = this.activeTab.shadowRoot?.querySelector('.vds__tab--content-active');\n if (content) {\n this.resizeObserver = new ResizeObserver(() => {\n this.defineAttributes();\n this.updateIndicatorPosition()\n });\n this.resizeObserver.observe(content);\n }\n }\n }\n\n private setTabs(): void {\n try {\n this.tabs = Array.from(this.hostEl.querySelectorAll('vds-tab'));\n if (this.tabs.length > 0) {\n this.internalActiveTabIndex = this.activeTabIndex >= 0 && this.activeTabIndex < this.tabs.length\n ? this.activeTabIndex\n : 0;\n this.updateTabsState(this.tabs);\n }\n } catch (e) {\n console.error('componentWillLoad Error: ', e);\n }\n }\n\n @Watch('activeTabIndex')\n handleActiveTabIndexChange() {\n this.updateTabsState(this.tabs);\n }\n\n @Watch(\"disabled\")\n setDisabledState() {\n (this.tabs || []).forEach(tab => {\n tab.disabled = this.disabled;\n });\n }\n\n /**\n * Gets the currently active tab index\n * \n * @returns {Promise<number>} A promise that resolves with the active tab index.\n */\n @Method()\n public async getActive(): Promise<number> {\n return this.internalActiveTabIndex;\n }\n\n /**\n * Sets the active tab index\n * \n * @param {number} index - The index of the tab to set as active.\n */\n @Method()\n public async setActive(index: number) {\n this.setActiveTab(index);\n }\n\n private setActiveTab(index: number) {\n if (this.tabs.length > 0) {\n this.internalActiveTabIndex = this.validateTabIndex(index);\n this.activeTabIndex = this.internalActiveTabIndex;\n }\n }\n\n private validateTabIndex(index: number): number {\n const isValidIndex = index >= 0 && index < this.tabs.length;\n const isEnabled = isValidIndex && !this.tabs[index]?.disabled;\n if (isValidIndex && isEnabled) {\n return index;\n }\n const firstEnabledIndex = this.tabs.findIndex(tab => !tab.disabled);\n return firstEnabledIndex >= 0 ? firstEnabledIndex : 0;\n }\n\n private defineAttributes() {\n if (this.activeTab && this.tabsGroupContainer) {\n const content = this.activeTab.shadowRoot?.querySelector('.vds__tab--content-active') as HTMLElement;\n if (content) {\n this.hostEl.setAttribute('style', `height: ${this.tabsGroupContainer.offsetHeight + content.offsetHeight}px`);\n }\n }\n }\n\n private updateIndicatorPosition() {\n if (this.activeTab && this.indicatorEl) {\n const tabLeft = this.activeTab.offsetLeft;\n const tabWidth = this.activeTab.offsetWidth;\n const parentLeft = this.indicatorEl.parentElement.offsetLeft;\n\n this.indicatorEl.style.left = `${tabLeft - parentLeft}px`;\n this.indicatorEl.style.width = `${tabWidth}px`;\n }\n }\n\n private renderActiveTabIndicator() {\n return this.activeTab && (\n <div\n class=\"vds__tabs-group--active-tab-indicator\"\n ref={(el: HTMLDivElement) => (this.indicatorEl = el)}\n />\n );\n }\n\n private updateTabsState(tabs: HTMLVdsTabElement[]) {\n this.internalActiveTabIndex = this.validateTabIndex(this.activeTabIndex);\n tabs.forEach((tab, tabIndex) => {\n const isActiveTab = tabIndex === this.internalActiveTabIndex && !tab.disabled;\n tab.isActive = isActiveTab;\n if (isActiveTab) {\n this.activeTab = tab;\n this.updateIndicatorPosition();\n }\n tab.setAttribute('vds-tabindex', `${tabIndex}`);\n tab.type = this.type;\n tab.width = this.width;\n tab.maxWidth = this.maxWidth;\n });\n this.defineAttributes();\n }\n\n render(): HTMLStencilElement {\n return (\n <Host class={this.disabled ? 'vds__tabs-group--disabled' : ''}>\n <div\n ref={(el: HTMLDivElement): void => {\n if (!el) return;\n this.tabsGroupContainer = el;\n }}\n class=\"vds__tabs-group\"\n >\n <div class={\n combineClasses(\n 'vds__tabs-group--header',\n 'vds__tabs-group--header-tabs-' + this.tabAlignment,\n this.showTrack ? 'vds__tabs-group--header-tabs-show-track' : ''\n )}\n >\n <div class=\"vds__tabs-group--header-content\">\n <slot name=\"header-content\"></slot>\n </div>\n <div class=\"vds__tabs-group--header-tabs-nav\" role=\"tablist\">\n <slot name=\"tab-list\"></slot>\n </div>\n {this.renderActiveTabIndicator()}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/tabs-group/vds-tabs-group.stories.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"vds-tabs-group.stories.js","sourceRoot":"","sources":["../../../src/components/tabs-group/vds-tabs-group.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC;YAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,EAAE,cAAc,CAAC;YAC9E,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,SAAS,EAAE;YACT,OAAO,EAAE,SAAS;SACnB;KACF;CACF,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;;;;;;CAWd,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;SACA,MAAM;;;YAGH,IAAI,CAAC,IAAI;qBACA,IAAI,CAAC,YAAY;aACzB,IAAI,CAAC,KAAK;kBACL,IAAI,CAAC,SAAS;wBACR,IAAI,CAAC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+CtC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,YAAY,EAAE,YAAY;IAC1B,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,CAAC;CAClB,CAAC;AAEF,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE;IAChC,OAAO;SACA,MAAM;;;YAGH,IAAI,CAAC,IAAI;qBACA,IAAI,CAAC,YAAY;aACzB,IAAI,CAAC,KAAK;kBACL,IAAI,CAAC,SAAS;wBACR,IAAI,CAAC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BtC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEvD,WAAW,CAAC,IAAI,GAAG;IACjB,YAAY,EAAE,YAAY;IAC1B,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,CAAC;CAClB,CAAC","sourcesContent":["export default {\n title: 'VDS/Components/Tabs/Tabs-Group',\n parameters: {\n docs: {\n toc: true,\n },\n },\n argTypes: {\n type: {\n options: ['custom','default', 'icon', 'text', 'withAction'],\n control: { type: 'select' },\n },\n tabAlignment: {\n options: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'],\n control: { type: 'select' },\n },\n showTrack: {\n control: 'boolean',\n }\n },\n};\n\nconst styles = `\n .container {\n position: relative;\n padding:50px;\n display: block;\n width:80%;\n }\n .content {\n text-align: left;\n padding-top: var(--spacing-05);\n }\n`;\n\nconst codeTemplate = args => {\n return `\n<style>${styles}</style>\n<div class=\"container\">\n <vds-tabs-group\n type=\"${args.type}\"\n tab-alignment=\"${args.tabAlignment}\"\n width=\"${args.width}\"\n show-track=\"${args.showTrack}\"\n active-tab-index=\"${args.activeTabIndex}\"\n >\n <vds-tab \n value=\"Tab 1\"\n slot=\"tab-list\"\n icon=\"user\"\n action-icon=\"administration\"\n >\n <div slot=\"tab-content\">\n <div class=\"content\"> \n Tab 1 content.\n <br>\n <vds-button>Example button</vds-button>\n </div>\n </div> \n </vds-tab>\n <vds-tab \n value=\"Tab 2\"\n slot=\"tab-list\"\n icon=\"add\"\n action-icon=\"administration\"\n >\n <div slot=\"tab-content\">\n <div class=\"content\"> \n Tab 2 content.\n <br>\n <vds-button>Example button</vds-button>\n </div>\n </div>\n </vds-tab>\n <vds-tab \n value=\"Tab 3\"\n slot=\"tab-list\"\n icon=\"train\"\n action-icon=\"administration\"\n disabled=\"true\"\n >\n <div slot=\"tab-content\">\n <div class=\"content\"> \n Tab 3 content.\n <br>\n <vds-button>Example button</vds-button>\n </div>\n </div>\n </vds-tab> \n </vds-tabs-group>\n</div>\n `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n tabAlignment: 'flex-start',\n type: 'default',\n width: '',\n showTrack: false,\n activeTabIndex: 0,\n};\n\nconst codeTemplateCustom = args => {\n return `\n<style>${styles}</style>\n<div class=\"container\">\n <vds-tabs-group\n type=\"${args.type}\"\n tab-alignment=\"${args.tabAlignment}\"\n width=\"${args.width}\"\n show-track=\"${args.showTrack}\"\n active-tab-index=\"${args.activeTabIndex}\"\n >\n <vds-tab slot=\"tab-list\">\n <div slot=\"tab-header-content\">\n <span>Tab 1</span>\n <vds-badge-pill value=\"99\" size=\"2xsmall\" status-color=\"healthy\"></vds-badge-pill>\n </div>\n <div slot=\"tab-content\">\n <div class=\"content\">\n Tab Custom 1 content.\n <br>\n <vds-button>Example button</vds-button>\n </div>\n </div>\n </vds-tab>\n <vds-tab slot=\"tab-list\">\n <div slot=\"tab-header-content\">\n <span>Tab 2</span>\n <vds-badge-pill value=\"27\" size=\"2xsmall\" status-color=\"warning\"></vds-badge-pill>\n </div>\n <div slot=\"tab-content\">\n <div class=\"content\">\n Tab Custom 2 content.\n <br>\n <vds-button>Example button</vds-button>\n </div>\n </div>\n </vds-tab>\n </vds-tabs-group>\n</div>\n `;\n};\n\nexport const CustomUsage = codeTemplateCustom.bind({});\n\nCustomUsage.args = {\n tabAlignment: 'flex-start',\n type: 'custom',\n width: '',\n showTrack: false,\n activeTabIndex: 0,\n};\n"]}