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/components/vds-basic-input2.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"vds-basic-input2.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,shlCAAshlC,CAAC;;MC+B1ilC,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAA,WAAA,CAAA;AAN1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;;AAQ2B,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;;AAE9B,QAAA,IAAI,CAAA,IAAA,GAAiB,MAAM;;AAE3B,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;;AAUlB,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;;AAM1C,QAAA,IAAa,CAAA,aAAA,GAAgC,EAAE;AA2LzE;IA/KC,gBAAgB,GAAA;QACd,IAAI,CAAC,YAAY,EAAE;;IAIrB,YAAY,GAAA;QACV,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;AAEvC,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;YACnD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;;;AAI3C;;;;AAIG;AACK,IAAA,YAAY,CAAC,IAAY,EAAA;AAC/B,QAAA,IAAG,CAAC,WAAW,CAAC,IAAI,CAAC;AAAE,YAAA,OAAO,IAAI;QAElC,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,UAAU,GAAG,QAAQ;QACvF,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,SAAS,GAAG,SAAS;QAC5F,QAAQ,gBAAU,KAAK,EAAC,6BAA6B,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,EAAa,CAAA;;AAG/H;;;;AAIG;IACK,gBAAgB,GAAA;QACtB,IAAI,CAAC,iBAAiB,IAAI,gBAAgB,CAAC,IAAI,CAAC,iBAAiB,CAAC;;AAGpE;;;;;AAKG;IACK,cAAc,GAAA;AACpB,QAAA,OAAO,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC;;AAG3C;;;;;;;AAOG;AACK,IAAA,WAAW,CAAC,GAAe,EAAA;QACjC,GAAG,CAAC,eAAe,EAAE;AACrB,QAAA,MAAM,MAAM,GAAG,GAAG,CAAC,MAA0B;AAC7C,QAAA,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC;AAC1C,QAAA,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;AAC1B,QAAA,IAAG,IAAI,CAAC,SAAS,EAAE;YACjB,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,CAAC;AAC3F,YAAA,GAAG,CAAC,aAAkC,CAAC,KAAK,GAAG,SAAS;AACzD,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;;aACjB;AACL,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;;QAG3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACnC,QAAA,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC;;AAGrC;;;;AAIE;AAEH,IAAA,cAAc,CAAC,KAAoB,EAAA;AAClC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;AAC1B,YAAA,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC;;;AAI9B;;;;AAIE;IAEH,WAAW,GAAA;AACR,QAAA,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;;AAG9B;;;;AAIE;IAEH,QAAQ,GAAA;AACL,QAAA,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;AAC7B,YAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;AACpB,YAAA,OAAO,EAAE;AACX,SAAC,CAAC;;AAGJ;;;;AAIE;IAEH,QAAQ,GAAA;AACL,QAAA,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;AAC7B,YAAA,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AACrB,SAAC,CAAC;;AAGJ;;;;AAIE;IAEH,KAAK,GAAA;AACF,QAAA,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;AAC7B,YAAA,IAAI,CAAC,KAAK,GAAG,EAAE;AACf,YAAA,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;AACvB,YAAA,OAAO,EAAE;AACX,SAAC,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,IAAG,IAAI,CAAC,IAAI,KAAK,UAAU,EAAC;AAAE,YAAA,OAAO,CAAC,IAAI,CAAC,kEAAkE,CAAC;;AAC9G,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,2BAA2B,GAAG,EAAE,EAAA,EAC3D,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,KAAU;AAAG,gBAAA,IAAG,EAAE;AAAE,oBAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE;AAAA,aAAC,EACxD,KAAK,EAAE,cAAc,CACnB,uBAAuB,EACvB,CAAA,iBAAA,EAAoB,IAAI,CAAC,IAAI,CAAA,CAAE,EAC/B,IAAI,CAAC,KAAK,IAAI,8BAA8B,EAC5C,IAAI,CAAC,UAAU,IAAI,iCAAiC,EACpD,IAAI,CAAC,QAAQ,IAAI,iCAAiC,CACnD,EAAA,EAEA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,EACxC,CACE,CAAA,OAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,KAAU;AAAG,gBAAA,IAAG,EAAE;AAAE,oBAAA,IAAI,CAAC,OAAO,GAAG,EAAE;AAAA,aAAC,EAC9C,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,OAAO,EAAE,CAAC,GAAG,KAAW,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,MAAY,IAAI,CAAC,gBAAgB,EAAE,EAC5C,MAAM,EAAE,MAAY,IAAI,CAAC,gBAAgB,EAAE,EAC3C,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IACxB,eAAe,CACjB,IAAI,CAAC,MAAM,EACX,OAAO,EACP,OAAO,EACP,UAAU,EACV,aAAa,EACb,OAAO,EACP,OAAO,CACR,CACD,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,qBAAqB,EAAG,CAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,mBAAmB,GAAG,CAC7B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/input/vds-basic-input.scss?tag=vds-basic-input&encapsulation=shadow","src/components/input/vds-basic-input.tsx"],"sourcesContent":["@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n display: block;\n \n --vds-input-min-width-small: 5.75rem;\n --vds-input-min-width: 7.5rem;\n --vds-input-min-width-large: 9.25rem;\n\n .vds__input__container {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n box-sizing: border-box;\n border-radius: var(--radius-medium);\n border: var(--border-thickness-01) solid var(--color-border-low);\n background: var(--surface-medium);\n\n &:hover {\n border-color: var(--color-border-brand);\n outline: var(--border-thickness-05) solid var(--color-interaction-brand-low);\n }\n\n .vds-input__informative-icon::part(svg-icon) {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.vds__input__container--focus {\n border-color: var(--color-border-brand);\n }\n\n &.vds__input__container--error {\n border-color: var(--color-border-danger);\n outline-color: var(--color-interaction-danger-medium);\n\n .vds__input {\n color: var(--color-text-danger-medium);\n }\n }\n\n &.vds__input__container--readonly {\n border-color: var(--color-border-low);\n outline: none;\n background-color: var(--color-interaction-black-lowest);\n\n .vds__input {\n color: var(--color-text-medium);\n }\n }\n\n &.vds__input__container--disabled {\n border-color: var(--color-border-lowest);\n outline: none;\n background-color: var(--surface-medium);\n\n .vds__input {\n color: var(--color-text-disabled);\n\n &::placeholder {\n color: var(--color-text-disabled);\n }\n }\n }\n\n &.vds__input--size-small {\n gap: var(--spacing-02);\n padding: var(--spacing-02) var(--spacing-03);\n height: var(--spacing-07);\n min-width: var(--vds-input-min-width-small);\n\n .vds__input {\n height: var(--spacing-07);\n @include font-style(body, small);\n }\n }\n\n &.vds__input--size-medium {\n gap: var(--spacing-02);\n padding: var(--spacing-03) var(--spacing-04);\n height: var(--spacing-10);\n min-width: var(--vds-input-min-width);\n\n .vds__input {\n height: var(--spacing-10);\n @include font-style(body, medium);\n }\n }\n\n &.vds__input--size-large {\n gap: var(--spacing-03);\n padding: var(--spacing-04) var(--spacing-05);\n height: var(--spacing-13);\n min-width: var(--vds-input-min-width-large);\n\n .vds__input {\n height: var(--spacing-13);\n @include font-style(body, large);\n }\n }\n\n .vds__input {\n flex-grow: 1;\n width: 100%;\n border: none;\n background: transparent;\n padding: 0;\n overflow: hidden;\n color: var(--color-text-high);\n font-feature-settings: 'clig' off, 'liga' off;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-style: normal;\n\n &::placeholder {\n color: var(--color-text-medium);\n }\n\n &:hover,\n &:focus {\n border: none;\n outline: none;\n }\n }\n }\n}\n:host-context(.vds-basic-input--disabled) {\n pointer-events: none;\n}\n\n:host-context(.theme-dark) {\n .vds__input::-webkit-calendar-picker-indicator {\n filter: invert(1);\n }\n}","import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Event,\n EventEmitter,\n Method\n} from '@stencil/core';\nimport { \n VdsInputType,\n isValidIcon,\n toggleFocusClass,\n getIconColor,\n setInputStyles,\n setTouchedClass,\n setDirtyClass, \n maskInput\n} from './vds-basic-input.utils';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { AttachInternals, HTMLStencilElement, Listen, Watch } from '@stencil/core/internal';\nimport { emitInputEvent, shadowSubmitForm } from '../../utils/form';\n\n@Component({\n tag: 'vds-basic-input',\n styleUrl: 'vds-basic-input.scss',\n shadow: true,\n formAssociated: true\n})\nexport class VdsBasicInput {\n /** Sets the input size. */\n @Prop({ mutable: true }) size: \"small\" | \"medium\" | \"large\" = \"medium\";\n /** Sets input type in the DOM. Check HTML 5 Input type. */\n @Prop({ mutable: true, reflect: true }) type: VdsInputType = \"text\";\n /** Sets the input value. */\n @Prop({ mutable: true, reflect: true }) value: string = \"\";\n /** Sets the input placeholder. */\n @Prop({ mutable: true, reflect: true }) placeholder: string;\n /** Sets the input in disabled state. */\n @Prop({ mutable: true, reflect: true }) disabled: boolean;\n /** Sets the input in readonly state. */\n @Prop({ mutable: true, reflect: true }) isReadonly: boolean;\n /** Sets the input in error state. */\n @Prop({ mutable: true, reflect: true }) error: boolean;\n /** Toggles the required sign in the field */\n @Prop({ mutable: true, reflect: true }) isRequired: boolean = false;\n /** Allows user to define a information icon inside the input at its left . */\n @Prop() informativeIcon: string;\n /** Sets character formatting for user input. Useful for adding a mask to the input. */\n @Prop({ mutable: true }) formatter?: Function;\n /** Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction) */\n @Prop({ mutable: true }) allowedStyles: { [key: string]: string }[] = [];\n\n @Element() hostEl: HTMLInputElement; \n \n\t/** Emits updated input value */\n\t@Event() changeInput: EventEmitter<string>;\n\n @AttachInternals() internals: ElementInternals;\n\n private inputContainerRef: HTMLDivElement;\n private inputEl: HTMLInputElement;\n\n componentDidLoad(): void {\n this.setFormValue();\n }\n\n @Watch(\"value\")\n setFormValue(): void {\n emitInputEvent(this.hostEl, this.value);\n\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.value);\n }\n }\n\n /**\n * Displays vds-icon when icon string is valid\n *\n * @returns HTMLStencilElement\n */\n private getInputIcon(icon: string): HTMLStencilElement {\n if(!isValidIcon(icon)) return null;\n\n const inputState = this.disabled ? \"disabled\" : this.isReadonly ? \"readonly\" : \"normal\";\n const size = this.size === \"medium\" ? \"1rem\" : this.size === \"small\" ? \"0.75rem\" : \"1.25rem\";\n return (<vds-icon class=\"vds-input__informative-icon\" svgIcon={icon} size={size} color={getIconColor(inputState)}></vds-icon>);\n }\n\n /**\n * Toggle class vds__input__container--focus in focus/blur input's event\n *\n * @returns void\n */\n private toggleFocusClass(): void {\n this.inputContainerRef && toggleFocusClass(this.inputContainerRef);\n }\n\n /**\n * Sets input inline styles for the allowedStyles \n * [direction, text-align, textAlign, text-transform, textTransform, unicode-bidi, unicodeBidi]\n *\n * @returns void\n */\n private setInputStyles(): { [key: string]: string } {\n return setInputStyles(this.allowedStyles);\n\t}\n\n /**\n * Sets value from input's event target.\n * Emits change, input and changeInput events.\n * Sets input as dirty when input's event is triggered.\n * Executes formatter prop function on every inputed value.\n *\n * @returns void\n */\n private handleInput(evt: InputEvent): void {\n evt.stopPropagation();\n const target = evt.target as HTMLInputElement;\n const inputEvent = new InputEvent(\"input\");\n setDirtyClass(this.hostEl);\n if(this.formatter) {\n const maskValue = maskInput(this.formatter, target.value, this.value, evt.data, target, evt);\n (evt.currentTarget as HTMLInputElement).value = maskValue;\n this.value = maskValue;\n } else {\n this.value = target.value;\n }\n\n this.changeInput.emit(this.value);\n\t\tthis.hostEl.dispatchEvent(inputEvent);\n }\n\n /**\n\t * Executes method when input's keyup event is triggered.\n\t *\n\t * @returns void\n\t */\n @Listen(\"keyup\")\n\thandleEnterKey(event: KeyboardEvent): void {\n\t\tif (event.key === \"Enter\") {\n\t\t\tshadowSubmitForm(this.hostEl);\n\t\t}\n\t}\n\n /**\n\t * Executes method when vds-input gets focus.\n\t *\n\t * @returns void\n\t */\n\t@Listen(\"focus\")\n\thandleFocus(): void {\n setTouchedClass(this.hostEl);\n\t}\n\n /**\n\t * Sets focus on the vds-input element.\n\t *\n\t * @returns Promise<void>\n\t */\n\t@Method()\n\tsetFocus(): Promise<void> {\n return new Promise((resolve) => {\n this.inputEl.focus();\n resolve();\n });\n\t}\n\n /**\n\t * Gets value prop from the vds-input element.\n\t *\n\t * @returns Promise<string>\n\t */\n\t@Method()\n\tgetValue(): Promise<string> {\n return new Promise((resolve) => {\n resolve(this.value);\n });\n\t}\n\n /**\n\t * Clears value prop from the vds-input element.\n\t *\n\t * @returns Promise<void>\n\t */\n\t@Method()\n\tclear(): Promise<void> {\n return new Promise((resolve) => {\n this.value = \"\";\n this.inputEl.value = \"\";\n resolve();\n });\n\t}\n\n render(): HTMLStencilElement {\n if(this.type === \"datetime\"){ console.warn(\"The type datetime has been deprecated.Please use datetime-local.\")}\n return (\n <Host class={this.disabled ? \"vds-basic-input--disabled\" : \"\"}>\n <div\n ref={(el): void => { if(el) this.inputContainerRef = el} }\n class={combineClasses(\n \"vds__input__container\",\n `vds__input--size-${this.size}`,\n this.error && \"vds__input__container--error\",\n this.isReadonly && \"vds__input__container--readonly\",\n this.disabled && \"vds__input__container--disabled\"\n )}\n >\n {this.getInputIcon(this.informativeIcon)}\n <input\n ref={(el): void => { if(el) this.inputEl = el} }\n class={\"vds__input\"}\n type={this.type}\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.isRequired}\n readOnly={this.isReadonly}\n onInput={(evt): void => this.handleInput(evt)}\n onFocus={(): void => this.toggleFocusClass()}\n onBlur={(): void => this.toggleFocusClass()}\n style={this.setInputStyles()}\n {...cloneAttributes(\n this.hostEl,\n \"class\",\n \"value\",\n \"disabled\",\n \"placeholder\",\n \"label\",\n \"style\",\n )}\n />\n <slot name=\"secondaryActionIcon\" />\n <slot name=\"primaryActionIcon\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"vds-basic-slider-continuous.js","mappings":"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","names":["VdsBasicSliderContinuous","__stencil_proxyCustomElement"],"sources":["src/components/slider-continuous/vds-basic-slider-continuous.scss?tag=vds-basic-slider-continuous&encapsulation=shadow","src/components/slider-continuous/vds-basic-slider-continuous.tsx"],"sourcesContent":["@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host(.vds-slider) {\n display: block;\n box-sizing: border-box;\n --slider-track: var(--color-icon-medium);\n --slider-track-fill: var(--color-icon-brand-default);\n --slider-track-thumb: var(--color-icon-brand-default);\n --slider-background: var(--slider-track);\n\n .vds-slider-continuous__container {\n padding: var(--spacing-03);\n\n &.vds-slider-continuous__container--orientation-vertical {\n transform: rotate(270deg);\n .vds-slider__value,\n .slider-thumb {\n transform: rotate(90deg);\n }\n .vds__tooltip-container-text {\n direction: rtl;\n text-align: right;\n width: auto;\n }\n .vds-slider__value-reference span {\n display: inline-block;\n transform: rotate(90deg);\n }\n }\n\n &.vds-slider-continuous__container--custom-colors {\n .vds-slider-continuous__content {\n .vds-slider-input:active {\n opacity: 0.9;\n }\n &:hover {\n .vds-slider-input {\n opacity: 0.8;\n }\n }\n }\n }\n\n .vds-slider-continuous__content {\n &:has(.vds-slider-input:focus-visible) {\n outline: 0.125rem solid var(--color-border-focus-2);\n outline-offset: var(--spacing-06);\n }\n }\n\n &.vds-slider-continuous__container--display-limits .vds-slider-continuous__content {\n &:has(.vds-slider-input:focus-visible) {\n outline: 0.125rem solid var(--color-border-focus-2);\n outline-offset: var(--spacing-09);\n }\n }\n &.vds-slider-continuous__container--colors {\n .vds-slider-continuous__content {\n &:has(.vds-slider-input:active) {\n --slider-track-fill: var(--color-icon-brand-press);\n --slider-track-thumb: var(--color-icon-brand-press);\n }\n &:hover {\n --slider-track-fill: var(--color-icon-brand-hover);\n --slider-track-thumb: var(--color-icon-brand-hover);\n }\n }\n }\n &.vds-slider-continuous__container--disabled {\n --slider-track-fill: var(--color-icon-disabled);\n --slider-track-thumb: var(--color-icon-disabled);\n }\n .vds-slider-continuous__content {\n padding: 0 var(--spacing-03);\n }\n &.vds-slider-continuous__container--disabled {\n pointer-events: none;\n }\n &.vds-slider-continuous__container--medium {\n .vds-slider__track, input {\n height: 0.25rem;\n }\n .vds-slider__value-reference-container > .vds-slider__value-reference > span {\n @include font-style(body, medium);\n }\n .vds-slider__thumb {\n transform: translate(-50%, -8px);\n }\n }\n \n &.vds-slider-continuous__container--large { \n .vds-slider__track, input {\n height: 0.375rem;\n }\n .vds-slider__value-reference-container > .vds-slider__value-reference > span {\n @include font-style(body, large);\n }\n .vds-slider__value-reference-container {\n transform: translateY(1px);\n }\n .vds-slider__thumb {\n transform: translate(-50%, -9px);\n }\n }\n\n .slider-thumb::part(svg-icon) {\n color: var(--slider-track-thumb);\n fill: var(--slider-track-thumb);\n }\n }\n\n\n .vds__tooltip-container {\n display: none;\n position: absolute;\n width: 5.31rem;\n height: 2.25rem;\n height:max-content;\n width: max-content;\n max-width: var(--tooltip-max-width) !important;\n flex-direction: column;\n align-items: center;\n border-radius: var(--radius-medium);\n background: var(--surface-overlay-default);\n padding: var(--spacing-03);\n z-index: var(--elevation-layer-2);\n box-shadow: var(--elevation-shadow-2);\n }\n .vds__tooltip-container-text{\n color: var(--color-text-white-high);\n font-feature-settings: 'clig' off, 'liga' off;\n @include font-style(body, medium);\n } \n .vds__tooltip-arrow {\n position: absolute;\n width: 0.5rem;\n height: 0.25rem;\n z-index: var(--elevation-layer-2);\n }\n\n .vds-slider__input {\n position: relative;\n }\n\n .vds-slider-input {\n position: absolute;\n top: 0;\n left: 0;\n -webkit-appearance: none;\n appearance: none; \n width: 100%;\n outline: none;\n margin: 0;\n background: transparent;\n z-index: 3;\n cursor: pointer;\n\n &::-webkit-slider-thumb {\n background-color: transparent;\n opacity: 0;\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n background-color: transparent;\n opacity: 0;\n cursor: pointer;\n }\n }\n\n .vds-slider__thumb {\n position: absolute;\n top: 0;\n transform: translate(-50%, -8px);\n }\n\n .vds-slider__track {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n align-self: stretch;\n width: 100%;\n border-radius: var(--spacing-05);\n background: var(--slider-background);\n box-sizing: border-box;\n }\n\n .vds-slider__value-container {\n display: block;\n position: relative;\n .vds-slider__value-content {\n position: absolute;\n transform: translateY(-42px);\n z-index: var(--elevation-layer-2); \n }\n .vds-slider__value {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: fit-content;\n position: relative;\n }\n .vds__tooltip-container {\n display: block;\n }\n .tooltip-arrow {\n transform: translate(-50%, 21px);\n position: absolute;\n left: 50%;\n fill: var(--surface-overlay-default);\n }\n }\n\n .vds-slider__value-reference-container {\n display: block;\n .vds-slider__value-reference {\n display: flex;\n justify-content: space-between;\n margin-top: var(--spacing-03);\n \n span {\n overflow: hidden;\n color: var(--color-text-medium);\n text-align: right;\n font-feature-settings: 'liga' off, 'clig' off;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n }\n}\n:host(.vds-slider--disabled) {\n pointer-events: none;\n}\n","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"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"vds-basic-slider-range-continuous.js","mappings":"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","names":["VdsBasicSliderRangeContinuous","__stencil_proxyCustomElement"],"sources":["src/utils/number-utils.ts","src/components/slider-range-continuous/vds-basic-slider-range-continuous.scss?tag=vds-basic-slider-range-continuous&encapsulation=shadow","src/components/slider-range-continuous/vds-basic-slider-range-continuous.tsx"],"sourcesContent":["export const hasDecimals = (val: number): boolean => !Number.isInteger(val);\n\nexport const countDecimalPlaces = (val: number): number => {\n if (!hasDecimals(val)) return 0;\n\n const decimalPart = val.toString().split(\".\")[1];\n\n return decimalPart ? decimalPart.length : 0;\n};","@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n display: block;\n width: 100%;\n box-sizing: border-box;\n --slider-track: var(--color-icon-medium);\n --slider-track-fill: var(--color-icon-brand-default);\n --slider-track-start-thumb: var(--color-icon-brand-default);\n --slider-track-end-thumb: var(--color-icon-brand-default);\n --slider-background: var(--slider-track);\n\n .vds-slider-range__container {\n padding: var(--spacing-03);\n\n &.vds-slider-range__container--orientation-vertical {\n transform: rotate(270deg);\n .vds-slider-range__value,\n .slider-thumb {\n transform: rotate(90deg);\n }\n .vds__tooltip-container-text {\n direction: rtl;\n text-align: right;\n width: auto;\n }\n .vds-slider-range__value-reference span {\n display: inline-block;\n transform: rotate(90deg);\n }\n }\n\n &.vds-slider-range__container--medium {\n .vds-slider-range,\n .vds-slider-range__track,\n .vds-slider-range__range,\n .vds-slider-range-input__content,\n .vds-slider-input {\n height: 0.25rem;\n }\n .vds-slider-range__value-reference-container > .vds-slider-range__value-reference > span {\n @include font-style(body, medium);\n }\n .vds-slider-range__value-reference-container {\n transform: translateY(3px);\n }\n .vds-slider-range__thumb {\n transform: translate(-50%, -8px);\n }\n .vds-slider-input {\n &::-webkit-slider-thumb {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n }\n &.vds-slider-range__container--large {\n .vds-slider-range,\n .vds-slider-range__track,\n .vds-slider-range__range,\n .vds-slider-range-input__content,\n .vds-slider-input {\n height: 0.375rem;\n }\n .vds-slider-range__value-reference-container > .vds-slider-range__value-reference > span {\n @include font-style(body, large);\n }\n .vds-slider-range__value-reference-container {\n transform: translateY(1px);\n }\n .vds-slider-range__thumb {\n transform: translate(-50%, -9px);\n }\n .vds-slider-input {\n &::-webkit-slider-thumb {\n width: 1.5rem;\n height: 1.5rem;\n }\n }\n }\n .slider-start-thumb::part(svg-icon) {\n color: var(--slider-track-start-thumb);\n fill: var(--slider-track-start-thumb);\n }\n .slider-end-thumb::part(svg-icon) {\n color: var(--slider-track-end-thumb);\n fill: var(--slider-track-end-thumb);\n }\n\n .vds-slider-range__content {\n position: relative;\n padding: 0 var(--spacing-03);\n .vds-slider-range-input__content {\n position: relative;\n padding: var(--spacing-03) 0;\n cursor: pointer;\n .vds-slider-range {\n display: block;\n position: absolute;\n z-index: 2;\n width: 100%;\n align-items: center;\n padding: var(--spacing-03) 0;\n top: 0;\n \n .vds-slider-range__track {\n position: absolute;\n top: var(--spacing-03);\n z-index: 2;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 5px;\n background-color: var(--slider-track);\n }\n \n .vds-slider-range__range {\n position: absolute;\n top: var(--spacing-03);\n z-index: 3;\n bottom: 0;\n border-radius: 5px;\n pointer-events: none;\n background-color: var(--slider-track-fill);\n }\n \n .vds-slider-range__thumb {\n position: absolute;\n top: var(--spacing-03);\n z-index: 5;\n border-radius: 50%;\n pointer-events: none;\n }\n }\n \n .vds-slider-input {\n position: absolute;\n top: var(--spacing-03);\n -webkit-appearance: none;\n appearance: none;\n pointer-events: none;\n z-index: 3;\n background: transparent;\n width: 100%;\n opacity: 0.8;\n margin: 0;\n animation: 0.3ms;\n\n &:disabled {\n pointer-events: none;\n &::-webkit-slider-thumb {\n pointer-events: none;\n }\n }\n\n &:focus {\n outline: none;\n }\n \n &::-webkit-slider-runnable-track {\n pointer-events: none;\n }\n \n &::-webkit-slider-thumb {\n pointer-events: auto;\n box-sizing: border-box;\n cursor: pointer;\n border-radius: 50%;\n -webkit-appearance: none;\n }\n }\n }\n }\n\n .vds-slider-range__content {\n &:has(.vds-slider-start-input:focus-visible) {\n --slider-track-start-thumb: var(--color-icon-brand-press);\n }\n }\n\n &.vds-slider-range-continuous__container--display-limits .vds-slider-range__content {\n &:has(.vds-slider-start-input:focus-visible) {\n --slider-track-start-thumb: var(--color-icon-brand-press);\n }\n }\n\n .vds-slider-range__content {\n &:has(.vds-slider-end-input:focus-visible) {\n --slider-track-end-thumb: var(--color-icon-brand-press);\n }\n }\n\n &.vds-slider-range-continuous__container--display-limits .vds-slider-range__content {\n &:has(.vds-slider-end-input:focus-visible) {\n --slider-track-end-thumb: var(--color-icon-brand-press);\n }\n }\n\n &.vds-slider-range__container--colors {\n .vds-slider-range__content {\n &:has(.vds-slider-input:active) {\n --slider-track-fill: var(--color-icon-brand-press);\n --slider-track-start-thumb: var(--color-icon-brand-press);\n --slider-track-end-thumb: var(--color-icon-brand-press);\n }\n &:hover {\n --slider-track-fill: var(--color-icon-brand-hover);\n --slider-track-start-thumb: var(--color-icon-brand-hover);\n --slider-track-end-thumb: var(--color-icon-brand-hover);\n }\n }\n }\n &.vds-slider-range__container--disabled,\n &.vds-slider-range__container--disabled:hover,\n &.vds-slider-range__container--disabled:active {\n --slider-track-fill: var(--color-icon-disabled);\n --slider-track-start-thumb: var(--color-icon-disabled);\n --slider-track-end-thumb: var(--color-icon-disabled);\n --slider-track: var(--color-background-disabled);\n pointer-events: none;\n }\n .vds-slider-range__value-container {\n display: block;\n position: relative;\n .vds-slider-range__value-content {\n position: absolute;\n transform: translate(-50%, -29px);\n z-index: var(--elevation-layer-2); \n }\n .vds-slider-range__value {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: fit-content;\n position: relative;\n cursor: text;\n }\n .vds__tooltip-container {\n display: block;\n }\n .tooltip-arrow {\n transform: translate(-50%, 21px);\n position: absolute;\n left: 50%;\n fill: var(--surface-overlay-default);\n }\n }\n .vds-slider-range__value-reference-container {\n display: block;\n .vds-slider-range__value-reference {\n display: flex;\n justify-content: space-between;\n \n span {\n overflow: hidden;\n color: var(--color-text-medium);\n text-align: right;\n font-feature-settings: 'liga' off, 'clig' off;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n }\n }\n .vds__tooltip-container {\n display: none;\n position: absolute;\n width: 5.31rem;\n height: 2.25rem;\n height:max-content;\n width: max-content;\n max-width: var(--tooltip-max-width) !important;\n flex-direction: column;\n align-items: center;\n border-radius: var(--radius-medium);\n background: var(--surface-overlay-default);\n padding: var(--spacing-03);\n z-index: var(--elevation-layer-2);\n box-shadow: var(--elevation-shadow-2);\n }\n .vds__tooltip-container-text{\n color: var(--color-text-white-high);\n font-feature-settings: 'clig' off, 'liga' off;\n @include font-style(body, medium);\n } \n .vds__tooltip-arrow {\n position: absolute;\n width: 0.5rem;\n height: 0.25rem;\n z-index: var(--elevation-layer-2);\n }\n}\n:host(.vds-slider-range--disabled) {\n pointer-events: none;\n}\n","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"],"version":3}

package/dist/components/vds-basic-textarea.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"vds-basic-textarea.js","mappings":"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","names":["VdsBasicTextarea","__stencil_proxyCustomElement"],"sources":["src/constants/spacing-vars.ts","src/components/textarea/vds-basic-textarea.scss?tag=vds-basic-textarea&encapsulation=shadow","src/components/textarea/vds-basic-textarea.tsx"],"sourcesContent":["export default {\n\t\"spacing-00\": \"0rem\",\n\t\"spacing-01\": \"0.125rem\",\n\t\"spacing-02\": \"0.25rem\",\n\t\"spacing-03\": \"0.5rem\",\n\t\"spacing-04\": \"0.75rem\",\n\t\"spacing-05\": \"1rem\",\n\t\"spacing-06\": \"1.25rem\",\n\t\"spacing-07\": \"1.5rem\",\n\t\"spacing-08\": \"1.75rem\",\n\t\"spacing-09\": \"2rem\",\n\t\"spacing-10\": \"2.25rem\",\n\t\"spacing-11\": \"2.5rem\",\n\t\"spacing-12\": \"2.75rem\",\n\t\"spacing-13\": \"3rem\",\n\t\"spacing-14\": \"3.25rem\",\n\t\"spacing-15\": \"3.5rem\",\n\t\"spacing-16\": \"3.75rem\",\n\t\"spacing-17\": \"4rem\",\n\t\"spacing-18\": \"4.25rem\",\n\t\"spacing-19\": \"4.5rem\",\n\t\"spacing-20\": \"4.75rem\",\n};","@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n display: block;\n .vds__textarea__container {\n display: flex;\n align-items: start;\n flex-shrink: 0;\n box-sizing: border-box;\n border-radius: var(--radius-medium);\n border: var(--border-thickness-01) solid var(--color-border-low);\n background: var(--surface-medium);\n\n &:hover {\n border-color: var(--color-border-brand);\n outline: var(--border-thickness-05) solid var(--color-interaction-brand-low);\n }\n\n &.vds__textarea__container--focus {\n border-color: var(--color-border-brand);\n }\n\n &.vds__textarea__container--error {\n border-color: var(--color-border-danger);\n outline-color: var(--color-interaction-danger-medium);\n .vds__textarea {\n color: var(--color-text-danger-medium);\n }\n }\n &.vds__textarea__container--readonly {\n border-color: var(--color-border-low);\n outline: none;\n background-color: var(--color-interaction-black-lowest);\n .vds__textarea {\n color: var(--color-text-medium);\n }\n }\n &.vds__textarea__container--disabled {\n border-color: var(--color-border-disabled);\n outline: none;\n background-color: var(--surface-medium);\n .vds__textarea {\n color: var(--color-text-disabled);\n &::placeholder {\n color: var(--color-text-disabled);\n }\n }\n }\n\n &.vds__textarea--size-small {\n gap: var(--spacing-02);\n padding: var(--spacing-02) var(--spacing-03);\n min-height: 3rem;\n .vds__textarea {\n min-width: 5.5rem;\n min-height: 3rem;\n @include font-style(body, small);\n }\n }\n\n &.vds__textarea--size-medium {\n gap: var(--spacing-02);\n padding: var(--spacing-03) var(--spacing-04);\n min-height: 4.5rem;\n .vds__textarea {\n min-width: 7.5rem;\n min-height: 4.5rem;\n @include font-style(body, medium);\n }\n }\n &.vds__textarea--size-large {\n gap: var(--spacing-03);\n padding: var(--spacing-04) var(--spacing-05);\n min-height: 6rem;\n .vds__textarea {\n min-width: 9.25rem;\n min-height: 6rem;\n @include font-style(body, large);\n }\n }\n\n .vds__textarea {\n flex-grow: 1;\n border: none;\n background: transparent;\n padding: 0;\n resize: none;\n overflow: hidden;\n color: var(--color-text-high);\n font-feature-settings: 'clig' off, 'liga' off;\n text-overflow: ellipsis;\n font-style: normal;\n &::placeholder {\n color: var(--color-text-medium);\n }\n &:hover,\n &:focus {\n border: none;\n outline: none;\n }\n }\n }\n}\n\n:host-context(.vds-basic-textarea--disabled){\n pointer-events: none;\n}","import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Event,\n EventEmitter,\n Method\n} from '@stencil/core';\nimport {\n toggleFocusClass,\n setTouchedClass,\n setDirtyClass, \n maskInput,\n setInputStyles\n} from '../input/vds-basic-input.utils';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { AttachInternals, HTMLStencilElement, Listen, Watch } from '@stencil/core/internal';\nimport spacingVars from '../../constants/spacing-vars';\nimport { emitInputEvent } from '../../utils/form';\n\n@Component({\n tag: 'vds-basic-textarea',\n styleUrl: 'vds-basic-textarea.scss',\n shadow: true,\n formAssociated: true\n})\nexport class VdsBasicTextarea {\n /** Sets the textarea's size. */\n @Prop({ mutable: true }) size: \"small\" | \"medium\" | \"large\" = \"medium\";\n /** Sets the textarea's value. */\n @Prop({ mutable: true }) value: string = \"\";\n /** Sets the textarea's placeholder. */\n @Prop({ mutable: true }) placeholder: string;\n /** Sets the textarea in disabled state. */\n @Prop({ mutable: true }) disabled: boolean;\n /** Sets the textarea in readonly state. */\n @Prop({ mutable: true }) isReadonly: boolean;\n /** Sets the textarea in error state. */\n @Prop({ mutable: true, reflect: true }) error: boolean;\n /** Toggles the required sign in the field */\n @Prop({ mutable: true, reflect: true }) isRequired: boolean = false \n /** Sets character formatting for user inputs. Useful for adding a mask to the textarea. */\n @Prop({ mutable: true }) formatter: Function;\n /** Sets custom allowed styles to textarea (text-align, text-transform, unicode-bidi, direction) */\n @Prop({ mutable: true }) allowedStyles: { [key: string]: string }[] = [];\n /** Sets the width of the textarea. */\n @Prop({ mutable: true }) width: string;\n /** Sets the height of the textarea. This prop not works combining with autogrow=true. */\n @Prop({ mutable: true }) height: string;\n /** Sets the min-height for the textarea. This property works combining with autogrow=true only. \n * - Default for medium: '4.5rem'\n * - Default for large: '6rem'\n * \n * This value is automatically adjusted according to the 'size' property.\n * @default '4.5rem' (when size is 'medium')\n */\n @Prop({ mutable: true }) minHeight: string = this.size === \"large\" ? \"6rem\" : this.size === \"small\" ? \"3rem\" : \"4.5rem\";\n /** Sets the max-height for the textarea. This property works combining with autogrow=true only. \n * - Default for medium: '12.15rem'\n * - Default for large: '18rem'\n * \n * This value is automatically adjusted according to the 'size' property.\n * @default '12.15rem' (when size is 'medium')\n */\n @Prop({ mutable: true }) maxHeight: string = this.size === \"large\" ? \"18rem\" : \"12.15rem\";\n /** Makes the textarea grows with its content. This property works combining with maxHeight and minHeight. This prop not works combining with property height defined. */\n @Prop({ mutable: true }) autogrow: boolean = true;\n\n @Element() hostEl: HTMLVdsBasicTextareaElement; \n\n\t/** Emits updated textarea value */\n\t@Event() changeInput: EventEmitter<string>;\n\n @AttachInternals() internals: ElementInternals;\n\n private textareaContainerRef: HTMLDivElement;\n private textAreaEl: HTMLTextAreaElement;\n\n componentDidLoad(): void {\n this.setFormValue();\n }\n\n @Watch(\"value\")\n setFormValue(): void {\n emitInputEvent(this.hostEl, this.value);\n\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.value);\n }\n }\n\n /**\n * Toggle class vds__textarea__container--focus in focus/blur textarea's event\n *\n * @returns void\n */\n private toggleFocusClass(): void {\n this.textareaContainerRef && toggleFocusClass(this.textareaContainerRef, \"textarea\");\n }\n\n /**\n * Sets value from textarea's event target.\n * Emits change, input and changeInput events.\n * Sets textarea as dirty when textarea's event is triggered.\n * Executes formatter prop function on every inputed value.\n *\n * @returns void\n */\n private handleInput(evt: InputEvent): void {\n evt.stopPropagation();\n const target = evt.target as HTMLTextAreaElement; \n const inputEvent = new InputEvent(\"input\");\n setDirtyClass(this.hostEl);\n\n if(this.formatter) {\n const maskValue = maskInput(this.formatter, target.value, this.value, evt.data, target, evt);\n this.value = maskValue;\n } else {\n this.value = target.value;\n }\n\n this.changeInput.emit(this.value);\n\t\tthis.hostEl.dispatchEvent(inputEvent);\n }\n\n\n /**\n * Sets textarea inline styles for the allowedStyle, height and width\n * [direction, text-align, textAlign, text-transform, textTransform, unicode-bidi, unicodeBidi]\n *\n * @returns { [key: string]: string }\n */\n private setTextareaStyles(): { [key: string]: string } {\n const inputedStyles = {...setInputStyles(this.allowedStyles) };\n\n if (this.autogrow) {\n inputedStyles.fieldSizing = \"content\";\n }\n\n const styles = this.setSizesStyles(inputedStyles) || {};\n const paddingOffset = this.size === \"large\" ? spacingVars[\"spacing-04\"] : this.size === \"small\" ? spacingVars[\"spacing-02\"] : spacingVars[\"spacing-03\"]\n\n if (styles.height && !this.autogrow) {\n styles.height = `calc(${styles.height} - ${paddingOffset} * 2)`;\n }\n\n if (styles.minHeight) {\n styles.minHeight = `calc(${styles.minHeight} - ${paddingOffset} * 2)`;\n }\n\n if (styles.maxHeight) {\n styles.maxHeight = `calc(${styles.maxHeight} - ${paddingOffset} * 2)`;\n }\n \n return styles;\n }\n\n /**\n * Sets textarea inline styles for the height and width\n *\n * @returns { [key: string]: string }\n */\n private setSizesStyles(styles: { [key: string]: string } = {}): { [key: string]: string } {\n if (this.width) {\n styles.width = this.width;\n }\n\n if (this.height) {\n styles.height = this.height;\n }\n\n if (this.maxHeight) {\n styles.maxHeight = this.maxHeight;\n }\n\n if (this.minHeight) {\n styles.minHeight = this.minHeight;\n }\n\n return styles;\n }\n\n /**\n\t * Executes method when vds-textarea gets focus.\n\t *\n\t * @returns void\n\t */\n\t@Listen(\"focus\")\n\thandleFocus(): void {\n setTouchedClass(this.hostEl);\n\t}\n\n /**\n\t * Sets focus on the vds-textarea element.\n\t *\n\t * @returns Promise<void>\n\t */\n\t@Method()\n\tsetFocus(): Promise<void> {\n return new Promise((resolve) => {\n this.textAreaEl.focus();\n resolve();\n });\n\t}\n\n /**\n\t * Gets value prop from the vds-textarea element.\n\t *\n\t * @returns Promise<string>\n\t */\n\t@Method()\n\tgetValue(): Promise<string> {\n return new Promise((resolve) => {\n resolve(this.value);\n });\n\t}\n\n /**\n * Clears value prop from the vds-basic-textarea element.\n *\n * @returns Promise<void>\n */\n @Method()\n clear(): Promise<void> {\n return new Promise((resolve) => {\n this.value = \"\";\n this.textAreaEl.value = \"\";\n resolve();\n });\n }\n\n render(): HTMLStencilElement {\n return (\n <Host class={this.disabled ? \"vds-basic-textarea--disabled\" : \"\"}>\n <div\n ref={(el): void => { if(el) this.textareaContainerRef = el} }\n class={combineClasses(\n \"vds__textarea__container\",\n `vds__textarea--size-${this.size}`,\n this.error && \"vds__textarea__container--error\",\n this.isReadonly && \"vds__textarea__container--readonly\",\n this.disabled && \"vds__textarea__container--disabled\"\n )}\n style={this.setSizesStyles()}\n >\n <textarea\n ref={(el): void => { if(el) this.textAreaEl = el} }\n class={\"vds__textarea\"}\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.isRequired}\n readOnly={this.isReadonly}\n style={this.setTextareaStyles()}\n onInput={(evt): void => this.handleInput(evt)}\n onFocus={(): void => this.toggleFocusClass()}\n onBlur={(): void => this.toggleFocusClass()}\n {...cloneAttributes(\n this.hostEl,\n \"class\",\n \"value\",\n \"disabled\",\n \"placeholder\",\n \"label\",\n \"style\"\n )}\n ></textarea>\n <slot name=\"secondaryActionIcon\" />\n <slot name=\"primaryActionIcon\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"vds-breadcrumbs-item.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,MAAM,CAAC,4piCAA4piC,CAAC;;MCQrriC,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAA,WAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAelC;IAbC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,cAAc,CACxB,sBAAsB,EACtB,IAAI,CAAC,QAAQ,GAAG,gCAAgC,GAAG,EAAE,EACrD,IAAI,CAAC,QAAQ,GAAG,8BAA8B,GAAG,EAAE,CACpD,EAAA,EACC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/breadcrumb-item/vds-breadcrumbs-item.scss?tag=vds-breadcrumbs-item&encapsulation=shadow","src/components/breadcrumb-item/vds-breadcrumbs-item.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n .vds-breadcrumbs-item {\n display: flex;\n border: var(--spacing-01) solid transparent;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n\n ::slotted(a) {\n text-decoration: none;\n background: none;\n border: none;\n outline: none;\n height: var(--spacing-09);\n padding: 0 var(--spacing-03);\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: var(--color-text-medium);\n font-feature-settings: 'liga' off, 'clig' off;\n @include font-style(body, large);\n }\n\n &.vds-breadcrumbs-item--active {\n ::slotted(a) {\n @include font-style(title, medium);\n color: var(--color-text-high);\n }\n }\n\n &.vds-breadcrumbs-item--disabled {\n pointer-events: none;\n ::slotted(a) {\n @include font-style(body, large);\n color: var(--color-text-disabled);\n }\n }\n\n &:hover,\n &:focus,\n &:focus-within {\n ::slotted(a) {\n color: var(--color-text-high);\n text-decoration: underline;\n outline: none;\n background: none;\n\n text-decoration-line: underline;\n text-decoration-style: solid;\n text-decoration-skip-ink: auto;\n text-decoration-thickness: auto;\n text-underline-offset: auto;\n text-underline-position: from-font;\n }\n }\n \n &:focus,\n &:focus-within {\n border-radius: var(--spacing-02);\n border-color: var(--color-border-focus-2);\n }\n\n &:active {\n ::slotted(a) {\n color: var(--color-text-high);\n text-decoration: underline;\n background: none;\n }\n }\n\n &:visited {\n ::slotted(a) {\n color: var(--color-text-medium);\n }\n }\n }\n}\n\n:host-context(.vds-breadcrumbs-item--disabled) {\n pointer-events: none;\n}\n\n:host-context(.truncate-menu) {\n .vds-breadcrumbs-item {\n padding: 0 var(--spacing-03);\n }\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n tag: 'vds-breadcrumbs-item',\n styleUrl: 'vds-breadcrumbs-item.scss',\n shadow: true,\n})\nexport class VdsBreadcrumbItem {\n /** Sets the breacrumb item in disabled state */\n @Prop() disabled: boolean = false;\n\n /** Sets the breacrumb item in active state */\n @Prop() isActive: boolean = false;\n\n render() {\n return (\n <Host>\n <div class={combineClasses(\n \"vds-breadcrumbs-item\",\n this.disabled ? \"vds-breadcrumbs-item--disabled\" : \"\",\n this.isActive ? \"vds-breadcrumbs-item--active\" : \"\"\n )}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"vds-button.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,ijvCAAijvC,CAAC;;MCUjkvCA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOS,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;;AAE7C,QAAA,IAAO,CAAA,OAAA,GAAiE,SAAS;;AAEjF,QAAA,IAAa,CAAA,aAAA,GAAgC,QAAQ;;AAEpD,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;AAExB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAEzB,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAsDpC;AAlDA,IAAA,YAAY,CAAC,KAAY,EAAA;AACtB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;YACvB,KAAK,CAAC,wBAAwB,EAAE;;aAC3B;YACL,IAAI,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE;gBACjD,IAAI,CAAC,UAAU,EAAE;;;;IAKf,UAAU,GAAA;AAClB,QAAA,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC;;IAG7B,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,cAAc,CACzB,YAAY,EACZ,IAAI,CAAC,WAAW,GAAG,uBAAuB,GAAG,EAAE,EAC/C,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAChC,EAAA,EACC,CACE,CAAA,QAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,CAAC,GAAU,KAAK,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAC/C,KAAK,EAAE,cAAc,CACnB,CAAA,mBAAA,CAAqB,EACrB,CAAwB,qBAAA,EAAA,IAAI,CAAC,OAAO,CAAA,CAAE,EACtC,CAAsB,mBAAA,EAAA,IAAI,CAAC,aAAa,CAAE,CAAA,EAC1C,qBAAqB,IAAI,CAAC,IAAI,CAAE,CAAA,EAChC,IAAI,CAAC,MAAM,GAAG,oBAAoB,GAAG,EAAE,EACvC,IAAI,CAAC,QAAQ,GAAG,qBAAqB,GAAG,EAAE,EAC1C,IAAI,CAAC,WAAW,GAAE,+BAA+B,GAAC,EAAE,CACrD,EACD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,EAAA,EAC5B,eAAe,CACvB,IAAI,CAAC,MAAM,EACL,UAAU,EACV,OAAO,EACP,OAAO,CAAC,CAAA,EAEV,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAQ,CAAA,EAC9B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,YAAY,GAAQ,CACxB,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsButton","__stencil_proxyCustomElement"],"sources":["src/components/button/vds-button.scss?tag=vds-button&encapsulation=shadow","src/components/button/vds-button.tsx"],"sourcesContent":["@mixin disabledButton($borderless: false) {\n background-color: transparent;\n color: var(--color-text-disabled);\n pointer-events: none;\n @if not ($borderless) {\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);\n }\n ::slotted(vds-icon) {\n color: var(--color-icon-disabled);\n fill: var(--color-icon-disabled);\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n}\n\n:host {\n display: inline-block;\n width: fit-content;\n .vds-button {\n &__element {\n display: flex;\n align-items: center;\n border: none;\n border-radius: var(--radius-medium);\n box-sizing: border-box;\n box-shadow: none;\n cursor: pointer;\n &:focus-visible {\n outline: 0.125rem solid var(--color-border-focus-2);\n outline-offset: 0.125rem;\n }\n }\n &__size--large {\n padding: calc(var(--spacing-04)) calc(var(--spacing-05));\n gap: var(--spacing-03);\n height: 3rem;\n @include font-style(title, medium);\n }\n\n &__size--medium {\n padding: calc(var(--spacing-03)) calc(var(--spacing-04));\n gap: var(--spacing-03);\n height: 2.25rem;\n @include font-style(title, small);\n }\n\n &__size--small {\n padding: calc(var(--spacing-02)) calc(var(--spacing-03));\n gap: var(--spacing-02);\n height: 1.5rem;\n @include font-style(title, extra-small);\n }\n\n &__variant--primary {\n background-color: var(--color-background-brand-default);\n color: var(--static-white);\n ::slotted(vds-icon) {\n color: var(--static-white);\n fill: var(--static-white);\n }\n\n &.vds-button__danger {\n background-color: var(--color-background-danger-default);\n\n &:active, &:active:hover {\n background-color: var(--color-background-danger-high-press);\n outline: none;\n }\n &:hover {\n background-color: var(--color-background-danger-high-hover);\n outline: 0.25rem solid var(--color-interaction-danger-medium);\n outline-offset: 0;\n }\n }\n\n &:active, &:active:hover {\n background-color: var(--color-background-brand-press);\n outline: none;\n }\n &:hover {\n background-color: var(--color-background-brand-hover);\n outline: 0.25rem solid var(--color-border-brand-hover);\n outline-offset: 0;\n }\n &:disabled {\n @include disabledButton(false);\n }\n }\n &__variant--secondary {\n background-color: transparent;\n color: var(--color-link-default);\n box-shadow: 0 0 0 0.125rem inset var(--color-border-brand);\n ::slotted(vds-icon) {\n color: var(--color-icon-brand-default);\n fill: var(--color-icon-brand-default);\n }\n \n &.vds-button__danger {\n color: var(--color-text-danger-medium);\n box-shadow: 0 0 0 0.125rem inset var(--color-border-danger);\n ::slotted(vds-icon) {\n color: var(--color-icon-danger);\n fill: var(--color-icon-danger);\n }\n \n &:active, &:hover, &:active:hover {\n background-color: var(--color-background-danger-lowest-press);\n color: var(--color-text-danger-medium);\n ::slotted(vds-icon) {\n color: var(--color-icon-danger);\n fill: var(--color-icon-danger);\n }\n }\n &:hover {\n background-color: var(--color-background-danger-lowest-hover);\n }\n }\n\n &:active, &:active:hover {\n background-color: var(--color-interaction-brand-lower);\n color: var(--color-link-press);\n ::slotted(vds-icon) {\n color: var(--color-icon-brand-press);\n fill: var(--color-icon-brand-press);\n }\n }\n &:hover {\n background-color: var(--color-interaction-brand-lowest);\n color: var(--color-link-hover);\n ::slotted(vds-icon) {\n color: var(--color-icon-brand-hover);\n fill: var(--color-icon-brand-hover);\n }\n }\n &:disabled {\n @include disabledButton(false);\n box-shadow: 0 0 0 0.125rem inset var(--color-border-disabled);\n }\n }\n &__variant--tertiary {\n background-color: var(--surface-medium);\n color: var(--color-text-high);\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);\n ::slotted(vds-icon) {\n color: var(--color-icon-high);\n fill: var(--color-icon-high);\n }\n\n &:active, &:active:hover {\n background-color: var(--surface-lower);\n }\n &:hover {\n background-color: var(--surface-low);\n }\n &:disabled {\n @include disabledButton(false);\n }\n }\n &__variant--ghost {\n background-color: transparent;\n color: var(--color-link-default);\n ::slotted(vds-icon) {\n color: var(--color-icon-brand-default);\n fill: var(--color-icon-brand-default);\n }\n\n &.vds-button__danger {\n color: var(--color-text-danger-medium);\n ::slotted(vds-icon) {\n color: var(--color-icon-danger);\n fill: var(--color-icon-danger);\n }\n \n &:active, &:hover, &:active:hover {\n background-color: var(--color-background-danger-lowest-press);\n color: var(--color-text-danger-medium);\n ::slotted(vds-icon) {\n color: var(--color-icon-danger);\n fill: var(--color-icon-danger);\n }\n }\n &:hover {\n background-color: var(--color-background-danger-lowest-hover);\n }\n }\n\n &:active, &:active:hover {\n background-color: var(--color-interaction-brand-lower);\n color: var(--color-link-press);\n ::slotted(vds-icon) {\n color: var(--color-icon-brand-press);\n fill: var(--color-icon-brand-press);\n }\n }\n &:hover {\n background-color: var(--color-interaction-brand-lowest);\n color: var(--color-link-hover);\n ::slotted(vds-icon) {\n color: var(--color-icon-brand-hover);\n fill: var(--color-icon-brand-hover);\n }\n }\n &:disabled {\n @include disabledButton(true);\n }\n }\n &__variant--ghost-alt {\n background-color: transparent;\n color: var(--color-text-high);\n\n ::slotted(vds-icon) {\n color: var(--color-icon-high);\n fill: var(--color-icon-high);\n }\n\n &:active, &:active:hover {\n background-color: var(--color-interaction-black-lower);\n }\n &:hover {\n background-color: var(--color-interaction-black-lowest);\n }\n &:disabled {\n @include disabledButton(true);\n }\n }\n &__element_fullwidth {\n width: 100%;\n justify-content: center;\n }\n }\n}\n\n:host-context(.vds-button--fullwidth) {\n display: block;\n width: auto;\n}\n","import { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { shadowSubmitForm } from '../../utils/form';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { cloneAttributes } from '../../utils/clone-attributes';\n\n@Component({\n tag: 'vds-button',\n styleUrl: 'vds-button.scss',\n shadow: true,\n})\nexport class VdsButton {\n /** Set button's size */\n\t@Prop() size: \"large\" | \"medium\" | \"small\" = \"medium\";\n /** Set button's variant */\n\t@Prop() variant: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"ghost-alt\" = \"primary\";\n /** Allow to change the button's text alignment */\n\t@Prop() textAlignment: \"right\" | \"left\" | \"center\" = \"center\";\n /** Enable button's danger/error state */\n @Prop() danger: boolean = false;\n /** Enable button's disable state */\n\t@Prop() disabled: boolean = false;\n /** Enable button's full width. This prop permits to the component will be adaptable to the container available horizontal space. */\n\t@Prop() isFullWidth: boolean = false;\n\n @Element() hostEl: HTMLButtonElement;\n\n\thandleSubmit(event: Event): void {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n } else {\n if (this.hostEl.getAttribute(\"type\") === \"submit\") {\n this.submitForm();\n }\n }\n\t}\n\n private submitForm(): void {\n\t\tshadowSubmitForm(this.hostEl);\n\t}\n\n render() {\n return (\n <Host class={combineClasses(\n \"vds-button\",\n this.isFullWidth ? \"vds-button--fullwidth\" : \"\",\n this.disabled ? \"disabled\" : \"\"\n )}>\n <button\n onClick={(evt: Event) => this.handleSubmit(evt)}\n class={combineClasses(\n `vds-button__element`,\n `vds-button__variant--${this.variant}`,\n `vds-button__align--${this.textAlignment}`,\n `vds-button__size--${this.size}`,\n this.danger ? \"vds-button__danger\" : \"\",\n this.disabled ? \"vds-button-disabled\" : \"\",\n this.isFullWidth? \"vds-button__element_fullwidth\":\"\"\n )}\n type=\"button\"\n disabled={ this.disabled || null}\n {...cloneAttributes(\n\t\t\t\t\t\tthis.hostEl,\n \"disabled\",\n \"class\",\n \"style\")}\n >\n <slot name=\"icon-left\"></slot>\n <slot></slot>\n <slot name=\"icon-right\"></slot>\n </button>\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/components/vds-card.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"vds-card.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/vds-card2.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"vds-card2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/card/vds-card.scss?tag=vds-card&encapsulation=shadow","src/components/card/vds-card.tsx"],"sourcesContent":["@mixin card-variant($variant) {\n $prefix: '--vds-card-#{$variant}-';\n $is-default-or-secondary: $variant == 'default' or $variant == 'secondary';\n\n @if $is-default-or-secondary {\n border: 0.0625rem solid var(#{$prefix}border-color);\n outline: none;\n } @else {\n border: 0.0625rem solid transparent;\n &.vds__card--selectable,\n &.vds__card--button {\n &.vds__card--selected {\n outline: 0.25rem solid var(#{$prefix}selected-border-color);\n }\n &:hover {\n outline: 0.25rem solid var(#{$prefix}border-hover-color);\n }\n &:active:hover {\n outline: none;\n }\n }\n }\n\n background-color: var(#{$prefix}background-color);\n\n &.vds__card--selectable {\n &.vds__card--selected {\n @if $is-default-or-secondary {\n border-color: var(#{$prefix}selected-border-color);\n }\n background-color: var(#{$prefix}selected-background-color);\n }\n &:is(:active, :active:hover) {\n @if $is-default-or-secondary {\n border-color: var(#{$prefix}selected-border-color);\n }\n background-color: var(#{$prefix}selected-background-color);\n }\n }\n\n &.vds__card--button,\n &.vds__card--selectable {\n cursor: pointer;\n &:hover {\n @if $is-default-or-secondary {\n border-color: var(#{$prefix}border-hover-color);\n }\n background-color: var(#{$prefix}background-hover-color);\n }\n &:is(:active, :active:hover) {\n @if $is-default-or-secondary {\n border-color: var(#{$prefix}border-press-color);\n }\n background-color: var(#{$prefix}background-press-color);\n }\n }\n}\n\n:host {\n /** Tokens for style override and theming */\n\n /** Default variant */\n --vds-card-default-border-color: var(--color-border-lower);\n --vds-card-default-border-hover-color: var(--color-border-lower);\n --vds-card-default-border-press-color: var(--color-border-lower);\n --vds-card-default-background-color: var(--surface-medium);\n --vds-card-default-background-hover-color: var(--color-interaction-black-lowest);\n --vds-card-default-background-press-color: var(--surface-neutral-press);\n --vds-card-default-selected-border-color: var(--color-border-lower);\n --vds-card-default-selected-background-color: var(--color-interaction-brand-lowest);\n\n /** Primary variant */\n --vds-card-primary-border-hover-color: var(--color-border-brand-hover);\n --vds-card-primary-background-color: var(--color-background-brand-default);\n --vds-card-primary-background-hover-color: var(--color-background-brand-hover);\n --vds-card-primary-background-press-color: var(--color-background-brand-press);\n --vds-card-primary-selected-border-color: var(--color-border-brand-hover);\n --vds-card-primary-selected-background-color: var(--color-background-brand-hover);\n\n /** Secondary variant */\n --vds-card-secondary-border-color: var(--color-border-brand);\n --vds-card-secondary-border-hover-color: var(--color-border-brand);\n --vds-card-secondary-border-press-color: var(--color-border-brand);\n --vds-card-secondary-background-color: var(--surface-medium);\n --vds-card-secondary-background-hover-color: var(--color-interaction-brand-lowest);\n --vds-card-secondary-background-press-color: var(--color-interaction-brand-lower);\n --vds-card-secondary-selected-border-color: var(--color-border-brand);\n --vds-card-secondary-selected-background-color: var(--color-interaction-brand-lowest);\n\n /** Danger variant */\n --vds-card-danger-border-hover-color: var(--color-interaction-danger-medium);\n --vds-card-danger-background-color: var(--color-background-danger-default);\n --vds-card-danger-background-hover-color: var(--color-background-danger-high-hover);\n --vds-card-danger-background-press-color: var(--color-background-danger-high-press);\n --vds-card-danger-selected-border-color: var(--color-interaction-danger-medium);\n --vds-card-danger-selected-background-color: var(--color-background-danger-high-hover);\n\n display: block;\n .vds__card {\n height: 100%;\n border-radius: var(--radius-medium);\n box-sizing: border-box;\n z-index: var(--elevation-layer-0);\n\n &.vds__card--default {\n @include card-variant('default');\n }\n &.vds__card--primary {\n @include card-variant('primary');\n }\n &.vds__card--secondary {\n @include card-variant('secondary');\n }\n &.vds__card--danger {\n @include card-variant('danger');\n }\n\n &.vds__card--disabled {\n pointer-events: none;\n border: 0.0625rem solid var(--color-border-lower);\n background-color: var(--surface-medium);\n ::slotted(*) {\n opacity: var(--opacity-32);\n }\n &.vds__card--button,\n &.vds__card--selectable {\n &.vds__card--selected {\n outline: none;\n border-color: var(--color-border-lower);\n background-color: var(--surface-medium);\n }\n }\n &:is(:hover, :active, :active:hover) {\n background-color: var(--surface-medium);\n }\n }\n\n @each $key, $value in $spacing {\n &.padding__spacing-#{$key} {\n padding: var(--spacing-#{$key});\n }\n }\n @each $key, $value in $shadows {\n &.shadow__elevation-shadow-#{$key} {\n box-shadow: var(--elevation-shadow-#{$key});\n }\n }\n }\n}\n\n:host-context(.vds-card--disabled) {\n pointer-events: none;\n}","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Event, EventEmitter, Watch } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { Spacing } from '../../definitions/spacing';\nimport { ShadowBox } from '../../definitions/shadows';\nimport { combineClasses } from '../../utils/combine-classes';\n@Component({\n tag: 'vds-card',\n styleUrl: 'vds-card.scss',\n shadow: true,\n})\nexport class VdsCard {\n /** Padding of component based on volt-spacing tokens */\n @Prop({ mutable: true }) padding: Spacing = 'spacing-05';\n /** Selectable property allow the card to toggle between selected and unselected state.\n * This property can't be used with the button property at the same time */\n @Prop({ mutable: true }) selectable: boolean = false;\n /** Sets the selected state for the card (only works when selectable property is true).\n * This property can't be used with the button property at the same time */\n @Prop({ mutable: true }) selected: boolean = false;\n /** Button property allows the card to behave like a button.\n * This property can't be used with the selectable property at the same time */\n @Prop({ mutable: true }) button = false;\n /** Sets the card in disabled state */\n @Prop({ mutable: true }) disabled = false;\n /** Allows changing the default card variant */\n @Prop({ mutable: true }) variant: 'primary' | 'secondary' | 'danger' | 'default' = 'default';\n /** Sets the shadow for the card */\n @Prop({ mutable: true }) shadowBox: ShadowBox = 'elevation-shadow-1';\n\n /**\n * Allows changing the default border color.\n * @deprecated This property is deprecated and will be removed from the code in the future.\n */\n @Prop() borderColor: Colors;\n /**\n * Allows changing the border color when hovering.\n * @deprecated This property is deprecated and will be removed from the code in the future.\n */\n @Prop() borderHoverColor: Colors;\n\n /** Emits event when card have been selected (only works when selectable property is true) */\n @Event() select: EventEmitter<boolean>;\n /** Emits event when card have been clicked on (only works when button property is true) */\n @Event() click: EventEmitter<MouseEvent>;\n\n @Watch('selected')\n emitSelected(): void {\n if (this.selectable) {\n this.select.emit(this.selected);\n }\n }\n\n @Watch('selectable')\n @Watch('button')\n handleBehaviorValidation(): void {\n if (this.button && this.selectable) {\n this.selectable = false;\n this.selected = false;\n }\n if (!this.selectable && this.selected) {\n this.selected = false;\n }\n }\n\n /**\n * Sets card's custom border colors\n *\n * @returns { [key: string]: string }\n */\n private setCustomBorderColors(): { [key: string]: string } {\n const styles = {};\n\n if (this.borderColor) {\n styles['--vds-card-default-border-color'] = `var(--${this.borderColor})`;\n }\n\n if (this.borderHoverColor) {\n styles['--vds-card-default-border-hover-color'] = `var(--${this.borderHoverColor})`;\n }\n\n return styles;\n }\n\n private handleSelectable(): void {\n this.selected = !this.selected;\n }\n\n private handleClick(evt: MouseEvent): void {\n if (this.button) {\n this.click.emit(evt);\n }\n\n if (this.selectable) {\n this.handleSelectable();\n }\n }\n\n componentWillLoad(): void {\n this.handleBehaviorValidation();\n }\n\n render(): HTMLStencilElement {\n return (\n <Host class={combineClasses(this.disabled ? \"vds-card--disabled\" : \"\")}>\n <div\n onClick={(evt: MouseEvent) => {\n this.handleClick(evt);\n }}\n style={this.setCustomBorderColors()}\n class={`\n vds__card \n vds__card--${this.variant}\n padding__${this.padding}\n shadow__${this.shadowBox}\n ${this.selectable ? 'vds__card--selectable' : ''}\n ${this.selectable && this.selected ? 'vds__card--selected' : ''}\n ${this.button ? 'vds__card--button' : ''}\n ${this.disabled ? 'vds__card--disabled' : ''}\n `}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/vds-checkbox.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"vds-checkbox.js","mappings":";;;;;AAAA;;;AAGG;AACG,MAAO,aAAc,SAAQ,OAAO,CAAA;AACzC,IAAA,WAAA,CACS,MAAS,GAAA,KAAK,EACd,OAAA,GAAU,KAAK,EACf,QAAW,GAAA,KAAK,EAChB,QAAA,GAAW,KAAK,EAChB,YAAY,KAAK,EAAA;QAEzB,KAAK,CAAC,MAAM,CAAC;AANL,QAAA,IAAM,CAAA,MAAA,GAAN,MAAM;AACN,QAAA,IAAO,CAAA,OAAA,GAAP,OAAO;AACP,QAAA,IAAQ,CAAA,QAAA,GAAR,QAAQ;AACR,QAAA,IAAQ,CAAA,QAAA,GAAR,QAAQ;AACR,QAAA,IAAS,CAAA,SAAA,GAAT,SAAS;;IAKlB,OAAO,GAAA;AACN,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM;;IAGrB,SAAS,GAAA;AACR,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM;;AAGrB,IAAA,IAAI,MAAM,GAAA;QACT,OAAO,IAAI,CAAC,OAAO;;AAGpB,IAAA,IAAI,OAAO,GAAA;QACV,OAAO,IAAI,CAAC,QAAQ;;AAGrB,IAAA,IAAI,OAAO,GAAA;QACV,OAAO,IAAI,CAAC,QAAQ;;AAGrB,IAAA,IAAI,QAAQ,GAAA;QACX,OAAO,IAAI,CAAC,SAAS;;AAEtB;;ACtCD,MAAM,cAAc,GAAG,MAAM,CAAC,wljCAAwljC,CAAC;;MCW1mjC,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAN7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;;;AAU0C,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;;AAExB,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;;AAE9B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAEzB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;;AAErC,QAAA,IAAI,CAAA,IAAA,GAAuB,QAAQ;;AAEnC,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AA2B5C,QAAA,IAAK,CAAA,KAAA,GAA8C,WAAW;AAuIvE;IArIC,mBAAmB,GAAA;QACjB,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;AACnD,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;;;AAIxD;;;;;;AAMG;IAEH,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;AAC1B,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;AACnD,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;;;AAIxD;;;;;;AAMG;AACJ,IAAA,WAAW,CAAC,KAAiB,EAAA;AAC5B,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;;AAGtB;;;;;;;AAOE;AAEH,IAAA,WAAW,CAAC,GAAgC,EAAA;AAC1C,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC;AAC7C,YAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;YACzB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;AACvC,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;YAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CACvB,IAAI,aAAa,CAChB,IAAI,CAAC,OAAO,EACZ,GAAG,aAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,MAAM,EACX,GAAG,KAAA,IAAA,IAAH,GAAG,KAAH,MAAA,GAAA,MAAA,GAAA,GAAG,CAAE,OAAO,EACZ,GAAG,KAAH,IAAA,IAAA,GAAG,uBAAH,GAAG,CAAE,OAAO,EACZ,GAAG,aAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,QAAQ,CACb,CACD;YACD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAC1B,YAAA,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC;;AAEvC,QAAA,OAAO,OAAO,CAAC,OAAO,EAAE;;AAG1B;;;;;;;AAOG;IACK,gBAAgB,GAAA;QACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,WAAW;;AAG5F;;;;AAIG;IACK,cAAc,GAAA;AACpB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,QAAQ,GAAG,SAAS;AACzD,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,wBAAwB,GAAG,EAAE;AACnE,QAAA,QAAO,IAAI,CAAC,KAAK;AACf,YAAA,KAAK,SAAS;gBACZ,OAAO,CAAU,CAAA,UAAA,EAAA,EAAA,KAAK,EAAE,uCAAuC,aAAa,CAAA,CAAE,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,GAAa;AAC7H,YAAA,KAAK,eAAe;gBAClB,OAAO,CAAU,CAAA,UAAA,EAAA,EAAA,KAAK,EAAE,6CAA6C,aAAa,CAAA,CAAE,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,GAAa;AACzI,YAAA;gBACE,OAAO,CAAU,CAAA,UAAA,EAAA,EAAA,KAAK,EAAE,iBAAiB,aAAa,CAAA,CAAE,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAa;;;AAI5G;;;;AAIE;IACK,WAAW,GAAA;AACjB,QAAA,OAAO,CAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAc;;IAG3J,MAAM,GAAA;;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,CAAC,GAAG,KAAY,EAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA,EAAC,EAC/C,KAAK,EAAE,cAAc,CACnB,0BAA0B,EAC1B,kCAAkC,IAAI,CAAC,IAAI,CAAE,CAAA,EAC7C,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,wBAAwB,GAAG,EAAE,EACnE,IAAI,CAAC,aAAa,GAAG,8BAA8B,GAAG,EAAE,EACxD,IAAI,CAAC,QAAQ,GAAG,yBAAyB,GAAG,EAAE,EAC9C,IAAI,CAAC,KAAK,GAAG,sBAAsB,GAAG,EAAE,CACzC,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,EAAE,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC5B,IAAI,CAAC,cAAc,EAAE,CAClB,EACL,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,CAClC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/checkbox/vds-checkbox.utils.ts","src/components/checkbox/vds-checkbox.scss?tag=vds-checkbox&encapsulation=shadow","src/components/checkbox/vds-checkbox.tsx"],"sourcesContent":["/**\n * Custom checkbox change event to capture\n * extra keys being pressed when user clicks on the checkbox\n */\nexport class CheckboxEvent extends Boolean {\n\tconstructor(\n\t\tprivate _value = false,\n\t\tprivate _altKey = false,\n\t\tprivate _ctrlKey = false,\n\t\tprivate _metaKey = false,\n\t\tprivate _shiftKey = false\n\t) {\n\t\tsuper(_value);\n\t}\n\n\tvalueOf(): boolean {\n\t\treturn !!this._value;\n\t}\n\n\tisChecked(): boolean {\n\t\treturn !!this._value;\n\t}\n\n\tget altKey(): boolean {\n\t\treturn this._altKey;\n\t}\n\n\tget ctrlKey(): boolean {\n\t\treturn this._ctrlKey;\n\t}\n\n\tget metaKey(): boolean {\n\t\treturn this._metaKey;\n\t}\n\n\tget shiftKey(): boolean {\n\t\treturn this._shiftKey;\n\t}\n}\n\n",":host {\n display: inline-block;\n input {\n outline: none;\n border: 0;\n appearance: none;\n margin: 0;\n padding: 0;\n }\n label {\n cursor: pointer;\n }\n .vds__checkbox__container {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-sizing: content-box;\n border: 0.125rem solid transparent;\n appearance: none;\n\n .checkbox-label::part(label) {\n cursor: pointer;\n }\n\n .vds__checkbox {\n display: flex;\n }\n \n &:focus-within {\n outline: none;\n border-radius: 0.25rem;\n border: 0.125rem solid var(--color-border-focus-2);\n }\n\n &.vds__checkbox__container--size-medium {\n gap: 0.5rem;\n padding: calc(var(--spacing-03) - 0.125rem);\n vds-icon {\n width: var(--spacing-06);\n height: var(--spacing-06);\n }\n }\n &.vds__checkbox__container--size-large {\n gap: 0.75rem;\n padding: calc(var(--spacing-04) - 0.125rem);\n vds-icon {\n width: var(--spacing-07);\n height: var(--spacing-07);\n }\n }\n\n .checkbox-icon::part(svg-icon) {\n color: var(--color-icon-medium);\n fill: var(--color-icon-medium);\n }\n\n &:hover {\n .checkbox-icon::part(svg-icon) {\n color: var(--color-icon-high);\n fill: var(--color-icon-high);\n }\n }\n \n &.vds__checkbox--checked {\n .checkbox-icon::part(svg-icon) {\n transform: scale(1.25);\n color: var(--color-background-brand-default);\n fill: var(--color-background-brand-default);\n }\n &:hover {\n .checkbox-icon::part(svg-icon) {\n color: var(--color-background-brand-hover);\n fill: var(--color-background-brand-hover);\n }\n }\n }\n\n &.vds__checkbox--indeterminate {\n .checkbox-icon::part(svg-icon) {\n transform: scale(1.25);\n color: var(--color-icon-medium);\n fill: var(--color-icon-medium);\n }\n }\n \n &.vds__checkbox--error {\n .checkbox-icon::part(svg-icon) {\n color: var(--color-background-danger-default);\n fill: var(--color-background-danger-default);\n }\n &:hover {\n .checkbox-icon::part(svg-icon) {\n color: var(--color-background-danger-high-hover);\n fill: var(--color-background-danger-high-hover);\n }\n }\n }\n\n &.vds__checkbox--disabled {\n pointer-events: none;\n .checkbox-icon::part(svg-icon) {\n color: var(--color-icon-disabled);\n fill: var(--color-icon-disabled);\n }\n }\n }\n}\n","import { Component, Host, h } from \"@stencil/core\";\nimport { HTMLStencilElement, Prop, Method, Event, EventEmitter, Element, AttachInternals, Watch } from \"@stencil/core/internal\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { CheckboxEvent } from \"./vds-checkbox.utils\";\n\n@Component({\n tag: \"vds-checkbox\",\n styleUrl: \"vds-checkbox.scss\",\n shadow: true,\n formAssociated: true\n})\nexport class VdsBasicCheckbox {\n /** Sets the text to be shown in the checkbox */\n @Prop({ reflect: true, mutable: true }) labelValue: string;\n /** Sets the checkbox in checked state */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /** Sets the checkbodx in indeterminate state */\n @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n /** Sets the checkbox in disabled state */\n @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n /** Sets the checkbox in error state */\n @Prop({ reflect: true, mutable: true }) error: boolean = false;\n /** Sets the checkbox'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\n @Element() hostEl: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n\n /**\n * Event which is triggered when checkbox state changes. This event also captures if\n * any of the special keys (shift, ctrl, meta or alt) where pressed when the checkbox state\n * changed. Use CheckboxEvent.isChecked() or\n * checkbox.on('checkboxEvent', (event : CustomEvent<CheckboxEvent>) => {\n *\t\tif(event.detail == true) {\n *\t\t\tconsole.log('Checked');\n * \t\t}\n * console.log(event.detail.altKey);\n * console.log(event.detail.shiftKey);\n * console.log(event.detail.ctrlKey);\n * })\n *\n */\n @Event() checkboxChange: EventEmitter<CheckboxEvent>;\n /** Makes a custom change to target property using checked and indeterminate (use for React components) */\n @Event() check: EventEmitter<boolean>;\n\n private state: \"checked\" | \"unchecked\" | \"indeterminate\" = \"unchecked\";\n\n componentWillRender(): void {\n this.setCheckboxState();\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 indeterminate value to false in order to guarantee a change in value.\n * Sets form value in order to work properly with native forms\n *\n * @returns void\n */\n @Watch(\"checked\")\n setCheckedStates(): void {\n this.indeterminate = false;\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.checked.toString());\n }\n }\n\n /**\n * Executes every time the checkbox is being click.\n * Executes toggleCheck method.\n *\n * @param event - MouseEvent\n * @returns void\n */\n\thandleClick(event: MouseEvent): void {\n\t\tthis.toggleCheck(event);\n\t}\n\n /**\n * Toggles checkbox value.\n * Emits checkboxChange event with CheckboxEvent value.\n * Emits check event with checked value.\n *\n * @param evt - KeyboardEvent | MouseEvent\n * @returns Promise<void>\n */\n @Method()\n toggleCheck(evt?: KeyboardEvent | MouseEvent): 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.indeterminate = false;\n\t\t\tthis.checkboxChange.emit(\n\t\t\t\tnew CheckboxEvent(\n\t\t\t\t\tthis.checked,\n\t\t\t\t\tevt?.altKey,\n\t\t\t\t\tevt?.ctrlKey,\n\t\t\t\t\tevt?.metaKey,\n\t\t\t\t\tevt?.shiftKey\n\t\t\t\t)\n\t\t\t);\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 checkbox based on the indeterminate and checked properties.\n * When indetermanate is true, state is indeterminate.\n * When indetermanate is false and checked is true, state is checked.\n * When indetermanate is false and checked is false, state is unchecked.\n *\n * @returns void\n */\n private setCheckboxState(): void {\n this.state = this.indeterminate ? \"indeterminate\" : 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 renderCheckbox(): HTMLStencilElement {\n const size = this.size === \"large\" ? \"1.5rem\" : \"1.25rem\";\n const disabledClass = this.disabled ? \"checkbox-icon-disabled\" : \"\";\n switch(this.state) {\n case \"checked\":\n return <vds-icon class={`checkbox-icon checkbox-icon-checked ${disabledClass}`} svgIcon={`checked`} size={size}></vds-icon>;\n case \"indeterminate\":\n return <vds-icon class={`checkbox-icon checkbox-icon-indeterminate ${disabledClass}`} svgIcon={`indeterminate`} size={size}></vds-icon>\n default:\n return <vds-icon class={`checkbox-icon ${disabledClass}`} svgIcon={`unchecked`} size={size}></vds-icon>;; \n }\n }\n\n /**\n * Returns the vds-label for the checkbox when there is a label provided.\n *\n * @returns HTMLStencilElement\n */\n private renderLabel(): HTMLStencilElement {\n return <vds-label class={\"checkbox-label\"} labelValue={this.labelValue} required={this.isRequired} size={this.size} disabled={this.disabled}></vds-label>\n }\n\n render(): HTMLStencilElement {\n return (\n <Host state={this.state}>\n <div\n onClick={(evt): void => {this.handleClick(evt)}}\n class={combineClasses(\n \"vds__checkbox__container\",\n `vds__checkbox__container--size-${this.size}`,\n this.checked && !this.indeterminate ? \"vds__checkbox--checked\" : \"\",\n this.indeterminate ? \"vds__checkbox--indeterminate\" : \"\",\n this.disabled ? \"vds__checkbox--disabled\" : \"\",\n this.error ? \"vds__checkbox--error\" : \"\",\n )}\n >\n <div class=\"vds__checkbox\">\n <input\n type={\"checkbox\"}\n checked={this.checked}\n value={this.value}\n id={this.hostEl?.id}\n disabled={this.disabled} />\n {this.renderCheckbox()}\n </div>\n {this.labelValue && this.renderLabel()}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/vds-chip.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"vds-chip.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/vds-chip2.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"vds-chip2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/chip/vds-chip.scss?tag=vds-chip&encapsulation=shadow","src/components/chip/vds-chip.tsx"],"sourcesContent":["@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n display: inline-flex;\n .vds__chip__container {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n background-color: transparent;\n border-radius: var(--radius-pill);\n border: none;\n box-sizing: border-box;\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-brand);\n color: var(--color-link-default);\n font-feature-settings: 'clig' off, 'liga' off;\n\n &.vds__chip__container--toggleable {\n cursor: pointer;\n }\n\n &:hover {\n background-color: var(--color-interaction-brand-lowest);\n }\n &:active, &:active:hover {\n background-color: var(--color-interaction-brand-lower);\n }\n\n &:focus-visible {\n outline: 0.125rem solid var(--color-border-focus-2);\n outline-offset: 0.125rem;\n }\n &.vds__chip__container--size-small {\n padding: var(--spacing-01) var(--spacing-02);\n @include font-style(title, 2x-small);\n }\n &.vds__chip__container--size-medium {\n padding: var(--spacing-02) var(--spacing-03);\n @include font-style(title, extra-small);\n }\n &.vds__chip__container--size-large {\n padding: var(--spacing-03) var(--spacing-04);\n @include font-style(title, small);\n }\n &.vds__chip__container--disabled,\n &.vds__chip__container--disabled:focus-visible {\n color: var(--color-text-disabled);\n background-color: transparent;\n pointer-events: none;\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);\n &.vds__chip__container--active {\n color: var(--color-text-white-high);\n background-color: var(--color-background-disabled);\n box-shadow: none;\n }\n }\n &.vds__chip__container--active {\n color: var(--static-white);\n background-color: var(--color-background-brand-default);\n box-shadow: none;\n &:hover {\n background-color: var(--color-background-brand-hover);\n }\n &:active, :active:hover {\n background-color: var(--color-background-brand-press);\n }\n }\n\n .vds-chip__icon {\n cursor: pointer;\n }\n\n vds-divider { \n --vds-divider-padding-left: var(--spacing-00);\n --vds-divider-padding-right: var(--spacing-00);\n }\n }\n}\n\n:host-context(.vds-chip--disabled) {\n pointer-events: none;\n}","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Event, EventEmitter, Method, Element, State } from '@stencil/core/internal';\nimport { BorderColors, IconColors, StaticGlobal } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { ICON_SIZE } from '../icon-button/vds-icon-button.utils';\n\n@Component({\n tag: 'vds-chip',\n styleUrl: 'vds-chip.scss',\n shadow: true,\n})\nexport class VdsChip {\n /** Sets chips content value */\n @Prop({ reflect: true, mutable: true}) value: string;\n /** Displays close icon */\n @Prop() close: boolean;\n /** Displays menu (chevron-down) icon */\n @Prop() menu: boolean;\n /** Displays chip in active state */\n @Prop({ reflect: true, mutable: true}) active: boolean;\n /** Sets chip to disabled */\n @Prop() disabled: boolean;\n /** Sets content size */\n @Prop() size: \"small\" | \"medium\" | \"large\" = \"medium\";\n /** Defines the aria label on the close button */\n @Prop({ reflect: true }) closeAriaLabel: string;\n /** They turn active on/off when clicking the chip */\n @Prop() toggle: boolean = false;\n /** Receives the icon name to be shown in the left side */\n @Prop() informativeIcon: string;\n /** When close button is clicked, the element is removed from the DOM */\n @Prop() removeOnClose: boolean = true;\n\n /** Fires after chip dismiss and hide */\n @Event() afterClosed: EventEmitter<void>;\n /** Fires when chip is selected (only works when toggle is enabled) */\n @Event() selected: EventEmitter<void>;\n /** Fires when menu-icon is clicked */\n @Event() menuClick: EventEmitter<void>;\n\n @Element() hostEl: HTMLVdsChipElement;\n\n @State() _informativeIcon: string = undefined;\n\n private iconColor: IconColors = \"color-icon-brand-default\";\n private iconSize: string = ICON_SIZE[\"small\"];\n\n private dividerColor: BorderColors | StaticGlobal;\n\n /**\n * Executes before every render cycle.\n *\n * @returns void\n */\n componentWillRender(): void {\n this.setChipIconsColor();\n this.setChipIconsSize();\n this.setInformativeIcon();\n this.setDividerColor();\n }\n\n /** \n * Dismiss/Hide the chip.\n * Emits afterClosed event\n * \n * @Returns Promise<void>\n */\n @Method()\n dismiss(): Promise<void> {\n return new Promise(resolve => {\n this.afterClosed.emit();\n if (this.removeOnClose) {\n this.hostEl && this.hostEl.remove();\n }\n resolve();\n });\n }\n\n /** \n * Emits event when menu-icon is clicked\n * \n * @Returns void\n */\n private emitMenuClicked(): void {\n this.menuClick.emit();\n }\n\n /** \n * Sets informative icon based on the following herarchy\n * When informativeIcon prop is provided it will always display.\n * When Chip is toggle and active it will set informativeIcon to checkMarck (good)\n * Otherwise it'll not be display.\n * \n * @Returns void\n */\n private setInformativeIcon(): void {\n this._informativeIcon = this.informativeIcon ? this.informativeIcon : this.active && this.toggle ? \"good\" : undefined;\n }\n\n /**\n * Sets the color for the icons inside the chip.\n * Sets the chip's vds-icon colors\n *\n * @returns void\n */\n private setChipIconsColor(): void {\n const state = this.disabled && this.active ? \"disabled-active\" : this.disabled ? \"disabled\" : this.active ? \"active\" : \"default\";\n switch(state) {\n case \"disabled-active\":\n this.iconColor = \"color-icon-white-high\";\n break;\n case \"disabled\":\n this.iconColor = \"color-icon-disabled\";\n break;\n case \"active\":\n this.iconColor = \"static-white\";\n break;\n default:\n this.iconColor = \"color-icon-brand-default\";\n break;\n }\n }\n\n private setChipIconsSize(): void {\n switch(this.size) {\n case \"small\": \n this.iconSize = ICON_SIZE[\"extra-small\"];\n break;\n case \"medium\": \n this.iconSize = ICON_SIZE[\"small\"];\n break;\n case \"large\": \n this.iconSize = ICON_SIZE[\"medium\"];\n break;\n }\n }\n\n /**\n * Changes the chip active state when toggle option is enabled.\n * Add checks icon when informativeIcon is not provided\n *\n * @returns void\n */\n private handleChipClick(): void {\n if (!this.toggle) return;\n \n this.active = !this.active;\n\n this.setInformativeIcon();\n\n this.selected.emit();\n }\n\n private setDividerColor(): void {\n const state = this.disabled && this.active ? \"disabled-active\" : this.disabled ? \"disabled\" : this.active ? \"active\" : \"default\";\n switch(state) {\n case \"disabled-active\":\n this.dividerColor = \"static-white-low\";\n break;\n case \"disabled\":\n this.dividerColor = \"color-border-disabled\";\n break;\n case \"active\":\n this.dividerColor = \"static-white-low\";\n break;\n default:\n this.dividerColor = \"color-border-brand\";\n break;\n }\n }\n\n render(): HTMLStencilElement {\n return (\n <Host class={this.disabled ? \"vds-chip--disabled\" : \"\"}>\n <button\n onClick={() => this.handleChipClick()}\n class={\n combineClasses(\n \"vds__chip__container\",\n `vds__chip__container--size-${this.size}`,\n this.toggle && \"vds__chip__container--toggleable\",\n this.disabled && \"vds__chip__container--disabled\",\n this.active && \"vds__chip__container--active\",\n )\n }\n disabled={ this.disabled }\n >\n {this._informativeIcon && <vds-icon svgIcon={this._informativeIcon} color={this.iconColor} size={this.iconSize}></vds-icon>}\n {this.value}\n {this.menu && <vds-icon class=\"vds-chip__icon\" onClick={() => this.emitMenuClicked()} svgIcon={this.active ? \"chevron-up\" : \"chevron-down\"} color={this.iconColor} size={this.iconSize}></vds-icon>}\n {this.close && <vds-divider orientation=\"vertical\" padding=\"spacing-00\" color={this.dividerColor}></vds-divider>}\n {this.close && <vds-icon class=\"vds-chip__icon\" onClick={() => this.dismiss()} aria-label={this.closeAriaLabel} svgIcon={\"close\"} color={this.iconColor} size={this.iconSize}></vds-icon>}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"vds-dialog-action-footer.js","mappings":";;AAAA,MAAM,wBAAwB,GAAG,MAAM,CAAC,0h/BAA0h/B,CAAC;;MCQtj/BA,uBAAqB,iBAAAC,kBAAA,CAAA,MAAA,qBAAA,SAAA,WAAA,CAAA;;;;;;;;;IAOhC,gBAAgB,GAAA;QACd,IAAI,CAAC,+CAA+C,EAAE;;AAGvD;;;;;;AAME;IACM,+CAA+C,GAAA;AACtD,QAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;AACxD,YAAA,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAK;AAChC,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,aAAC,CAAC;AACJ,SAAC,CAAC;;IAGJ,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsDialogActionFooter","__stencil_proxyCustomElement"],"sources":["src/components/dialog-action-footer/vds-dialog-action-footer.scss?tag=vds-dialog-action-footer&encapsulation=shadow","src/components/dialog-action-footer/vds-dialog-action-footer.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n padding-top: 1.5rem;\n}\n\n:host(.vds__dialog__footer--start) {\n display: flex;\n justify-content: start;\n gap: var(--spacing-03);\n}\n\n:host(.vds__dialog__footer--end) {\n display: flex;\n justify-content: end;\n gap: var(--spacing-03);\n}\n\n:host(.vds__dialog__footer--space-between) {\n display: flex;\n justify-content: space-between;\n gap: var(--spacing-03);\n}\n","import { Component, Host, h, Element, Event } from \"@stencil/core\";\nimport { EventEmitter, HTMLStencilElement } from \"@stencil/core/internal\";\n\n@Component({\n tag: \"vds-dialog-action-footer\",\n styleUrl: \"vds-dialog-action-footer.scss\",\n shadow: true,\n})\nexport class VdsDialogActionFooter {\n\n /** Emits event when closed button is clicked */\n @Event() closeButton: EventEmitter<void>;\n\n @Element() host: HTMLElement;\n\n componentDidLoad(): void {\n this.setClosebuttonEventEmitterToCloseDialogElements();\n }\n\n /**\n * @private\n * Sets up event listeners for the dialog children elements which has attribute close-dialog.\n *\n * - Listens for \"click\" events on the element and emits `closeButton`.\n *\n */\n private setClosebuttonEventEmitterToCloseDialogElements(): void {\n this.host.querySelectorAll(\"[close-dialog]\").forEach(el => {\n el.addEventListener(\"click\", () => {\n this.closeButton.emit();\n });\n });\n } \n\n render(): HTMLStencilElement {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/components/vds-dialog-body.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"vds-dialog-body.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,o7+BAAo7+B,CAAC;;MCQx8+BA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAA,WAAA,CAAA;;;;;;;;IACxB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,mBAAmB,EAAA,EAC7B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsDialogBody","__stencil_proxyCustomElement"],"sources":["src/components/dialog-body/vds-dialog-body.scss?tag=vds-dialog-body&encapsulation=shadow","src/components/dialog-body/vds-dialog-body.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n overflow: auto;\n\n .vds__dialog--body {\n color: var(--color-text-medium);\n @include font-style(body, large);\n width: 100%;\n overflow: auto;\n }\n}\n","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'vds-dialog-body',\n styleUrl: 'vds-dialog-body.scss',\n shadow: true,\n})\nexport class VdsDialogBody {\n render(): HTMLStencilElement {\n return (\n <Host>\n <div class={\"vds__dialog--body\"}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/components/vds-dialog-header.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"vds-dialog-header.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,2j/BAA2j/B,CAAC;;MCQjl/BA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,SAAA,WAAA,CAAA;AAL5B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAOU,QAAA,IAAe,CAAA,eAAA,GAAY,IAAI;AAkBxC;IAbC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,qBAAqB,EAAA,EAC/B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,2BAA2B,EAAA,EACrC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,IAAI,CAAC,eAAe,IAAI,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAAoB,CAAA,CACjI,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsDialogHeader","__stencil_proxyCustomElement"],"sources":["src/components/dialog-header/vds-dialog-header.scss?tag=vds-dialog-header&encapsulation=shadow","src/components/dialog-header/vds-dialog-header.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n padding-bottom: 1rem;\n\n .vds__dialog__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex: 1 0 0;\n align-self: stretch;\n\n .vds__dialog__header--text {\n color: var(--color-text-high);\n @include font-style(title, large);\n }\n }\n}\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'vds-dialog-header',\n styleUrl: 'vds-dialog-header.scss',\n shadow: true,\n})\nexport class VdsDialogHeader {\n /** Toggles show close button in dialog header */\n @Prop() showCloseButton: boolean = true;\n\n /** Emits event when closed button is clicked */\n @Event() closeButton: EventEmitter<void>;\n\n render(): HTMLStencilElement {\n return (\n <Host>\n <div class={\"vds__dialog__header\"}>\n <div class={\"vds__dialog__header--text\"}>\n <slot></slot>\n </div>\n {this.showCloseButton && <vds-icon-button variant=\"secondary\" icon=\"close\" onClick={() => this.closeButton.emit()}></vds-icon-button>}\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/components/vds-dialog-modal.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"vds-dialog-modal.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,+3+BAA+3+B,CAAC;;MCQp5+BA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAA,WAAA,CAAA;;;;;;;;IACzB,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EACzC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,oBAAoB,EAAA,EAC5B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAQ,CAAA,EAC3B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACR,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAQ,CAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsDialogModal","__stencil_proxyCustomElement"],"sources":["src/components/dialog-modal/vds-dialog-modal.scss?tag=vds-dialog-modal&encapsulation=shadow","src/components/dialog-modal/vds-dialog-modal.tsx"],"sourcesContent":[":host {\n display: block;\n\n .vds__dialog__modal {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n }\n}\n\n:host(.vds__dialog__modal--container) {\n width: 100%;\n height: 100%;\n position: relative;\n}\n","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'vds-dialog-modal',\n styleUrl: 'vds-dialog-modal.scss',\n shadow: true,\n})\nexport class VdsDialogModal {\n render(): HTMLStencilElement {\n return (\n <Host class=\"vds__dialog__modal--container\">\n <div class={\"vds__dialog__modal\"}>\n <slot name=\"header\"></slot>\n <slot />\n <slot name=\"body\"></slot>\n <slot name=\"footer\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/vds-dialog.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"vds-dialog.js","mappings":"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","names":["VdsDialog","__stencil_proxyCustomElement"],"sources":["src/components/dialog/vds-dialog.scss?tag=vds-dialog&encapsulation=shadow","src/components/dialog/vds-dialog.tsx"],"sourcesContent":[":host {\n display: block;\n width: fit-content;\n .vds__dialog__trigger {\n display: inline-block;\n }\n\n .vds__dialog {\n background-color: unset;\n color: unset;\n margin: auto;\n border: none;\n outline: none;\n padding: 0;\n &.vds__dialog__container--open {\n display: flex;\n justify-content: center;\n padding: 1.3rem;\n }\n &.vds__dialog--backdrop::backdrop {\n background: var(--color-interaction-black-lower);\n }\n &.vds__dialog--no-backdrop {\n overlay: auto !important;\n position: fixed;\n inset-block-start: 0px;\n inset-block-end: 0px;\n user-select: text;\n visibility: visible;\n overflow: auto;\n }\n }\n\n .vds__dialog__container {\n display: flex;\n max-width: 37.5rem;\n padding: var(--spacing-07);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--radius-large);\n background: var(--surface-medium);\n position: relative;\n z-index: var(--elevation-layer-3);\n box-shadow:\n var(--elevation-shadow-3),\n inset 0 0 0 0.0625rem var(--color-border-lowest);\n\n @each $key, $value in $spacing {\n &.vds__dialog__spacing--spacing-#{$key} {\n padding: var(--spacing-#{$key});\n }\n }\n }\n}\n","import { Component, Host, h } from \"@stencil/core\";\nimport { HTMLStencilElement, Prop, Event, EventEmitter, Method, Element, State, Listen } from \"@stencil/core/internal\";\nimport { Spacing } from \"../../definitions/spacing\";\nimport { combineClasses } from \"../../utils/combine-classes\";\n\n@Component({\n tag: \"vds-dialog\",\n styleUrl: \"vds-dialog.scss\",\n shadow: true,\n})\nexport class VdsDialog {\n /** Sets the padding around the dialog */\n @Prop() padding: Spacing = \"spacing-07\";\n /** Toggles the background behind the dialog */\n @Prop() backdrop: boolean = true;\n /** Sets the width size of the dialog */\n @Prop() width: string = \"37.5rem\";\n /** Sets the minimum width size of the dialog */\n @Prop() minWidth: string = \"20rem\";\n /** Sets the maximum width size of the dialog */\n @Prop() maxWidth: string = \"80%\";\n /** Avoids user to close dialog by clicking outside */\n @Prop() preventOutsideClose: boolean = false;\n\n /** Emits the event when opens dialog */\n @Event() opened: EventEmitter<string>;\n /** Emits the event when opens dialog */\n @Event() closed: EventEmitter<string>;\n\n @State() isOpen: boolean = undefined;\n\n @Element() host: HTMLElement;\n\n private dialog: HTMLDialogElement;\n private trigger: HTMLElement;\n\n componentDidLoad(): void {\n this.setHTMLElementEvents();\n }\n\n /**\n * Opens the dialog element. This method displays the dialog modally\n * with a backdrop if the `backdrop` property is set to `true`. Otherwise,\n * it opens the dialog non-modally without a backdrop.\n *\n * @returns {Promise<void>} A promise that resolves when the dialog is opened.\n */\n @Method()\n open(): Promise<void> {\n this.isOpen = true;\n this.backdrop ? this.dialog.showModal() : this.dialog.open = true;\n this.opened.emit();\n return Promise.resolve();\n }\n\n /**\n * Closes the dialog element. This method hides the dialog.\n *\n * @returns {Promise<void>} A promise that resolves when the dialog is closed.\n */\n @Method()\n close(): Promise<void> {\n this.isOpen = false;\n this.dialog.close();\n this.closed.emit();\n return Promise.resolve();\n }\n\n /**\n * Returns the main element container of the dialog.\n *\n * @returns {Promise<HTMLDialogElement>} A promise that resolves returning the dialog main element.\n */\n @Method()\n getContainer(): Promise<HTMLDialogElement> {\n return Promise.resolve(this.dialog);\n }\n\n /**\n * Listens for \"closeButton\" events on the children elements.\n * This method calls the `close()` method to close the dialog when the button is clicked.\n *\n * @returns {void}\n */\n @Listen(\"closeButton\")\n closeButtonHandle(): void {\n this.close();\n }\n\n /**\n * Listens for \"keydown\" events on the children elements, when the Escape key is press down\n * it closes the dialog.\n *\n * @returns {void}\n */\n @Listen('keydown')\n handleEscKey(ev: KeyboardEvent): void {\n if (ev.key === \"Escape\"){\n this.close();\n }\n }\n\n /**\n * Opens the dialog when the trigger element is clicked\n *\n * @returns {void}\n */\n handleClick(): void {\n this.open();\n }\n\n /**\n * Closes the dialog when the backdrop element is clicked.\n * The HTMLDialog adds a ::backdrop element when is open with showDialog. This element returns as target\n * the DIALOG element; when clicking on the content it returns the element that was click.\n *\n * @returns {void}\n */\n handleClose(evt: Event): void {\n if (this.backdrop && !this.preventOutsideClose && (evt.target as HTMLElement).nodeName === \"DIALOG\") {\n this.close();\n }\n }\n\n /**\n * @private\n * Creates a styles object based on the component's properties (`width`, `minWidth`, `maxWidth`).\n *\n * @returns {Object} An object containing CSS styles for the component.\n */\n private setStyles(): { [key: string]: string } {\n const styles: any = {};\n\n styles.width = this.width;\n styles.minWidth = this.minWidth;\n styles.maxWidth = this.maxWidth;\n\n return styles;\n }\n\n /**\n * @private\n * Sets up event listeners for the dialog component elements.\n *\n * - Listens for \"click\" events on the `trigger` element and calls `handleClick`.\n * - Listens for \"click\" events on the `dialog` element and calls `handleClose`.\n *\n */\n private setHTMLElementEvents(): void {\n this.trigger.addEventListener(\"click\", this.handleClick.bind(this));\n this.dialog.addEventListener(\"click\", this.handleClose.bind(this));\n }\n\n render(): HTMLStencilElement {\n return (\n <Host>\n <div\n ref={(el): void => {\n if (el) {\n this.trigger = el;\n }\n }}\n class={\"vds__dialog__trigger\"}\n >\n <slot name=\"dialog-trigger\"></slot>\n </div>\n <dialog\n ref={(el): void => {\n if (el) {\n this.dialog = el;\n }\n }}\n style={{maxWidth: this.maxWidth}}\n class={combineClasses(\n \"vds__dialog\",\n this.backdrop ? \"vds__dialog--backdrop\" : \"vds__dialog--no-backdrop\",\n this.isOpen ? \"vds__dialog__container--open\" : \"\"\n )}\n >\n <div\n class={combineClasses(\n \"vds__dialog__container\",\n `vds__dialog__spacing--${this.padding}`\n )}\n style={this.setStyles()}\n >\n <slot></slot>\n </div>\n </dialog>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/vds-divider.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"vds-divider.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/vds-divider2.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"vds-divider2.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,64gCAA64gC,CAAC;;MCW95gC,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAO,CAAA,OAAA,GAAY,YAAY;;AAE/B,QAAA,IAAW,CAAA,WAAA,GAA8B,YAAY;;AAErD,QAAA,IAAK,CAAA,KAAA,GAA2C,kBAAkB;;AAElE,QAAA,IAAS,CAAA,SAAA,GAAoB,qBAAqB;AAyB3D;IAvBS,eAAe,GAAA;QACrB,OAAO;AACL,YAAA,mBAAmB,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,OAAO,CAAG,CAAA,CAAA;AAC7C,YAAA,wBAAwB,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,CAAG,CAAA,CAAA;AAChD,YAAA,wBAAwB,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,SAAS,CAAG,CAAA,CAAA;SACrD;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,qDAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,EAAA,EAC1E,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,CACxB,0BAA0B,GAAG,IAAI,CAAC,WAAW,CAC1C,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,cAAc,CACxB,oBAAoB,EACpB,4BAA4B,GAAG,IAAI,CAAC,WAAW,CAC9C,EAAA,CACG,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/divider/vds-divider.scss?tag=vds-divider&encapsulation=shadow","src/components/divider/vds-divider.tsx"],"sourcesContent":[":host(.horizontal) {\n width: 100%;\n height: fit-content;\n}\n:host(.vertical) {\n width: fit-content;\n height: 100%;\n}\n:host {\n display: block;\n\n --vds-divider-padding-top: var(--spacing-03);\n --vds-divider-padding-bottom: var(--spacing-03);\n --vds-divider-padding-left: var(--spacing-03);\n --vds-divider-padding-right: var(--spacing-03);\n\n .vds__divider--container-horizontal {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: var(--vds-divider-padding-top);\n padding-bottom: var(--vds-divider-padding-bottom);\n overflow: hidden;\n height: fit-content;\n }\n .vds__divider--container-vertical {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: var(--vds-divider-padding-left);\n padding-right: var(--vds-divider-padding-right);\n overflow: hidden;\n width: fit-content;\n height: 100%;\n }\n\n .vds__divider--line {\n background-color: var(--divider-border-color);\n border-radius: var(--radius-sharp);\n box-sizing: border-box;\n flex-grow: 1;\n }\n .vds__divider--orientation-horizontal {\n margin-left: var(--divider-padding);\n margin-right: var(--divider-padding);\n width: 100%;\n height: var(--divider-border-width);\n }\n .vds__divider--orientation-vertical {\n margin-top: var(--divider-padding);\n margin-bottom: var(--divider-padding);\n width: var(--divider-border-width);\n align-self: stretch;\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { Spacing } from '../../definitions/spacing';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { BorderColors, Palettes, StaticGlobal } from '../../definitions/colors';\nimport { BorderThickness } from '../../definitions/thickness';\n\n@Component({\n tag: 'vds-divider',\n styleUrl: 'vds-divider.scss',\n shadow: true,\n})\nexport class VdsDivider {\n /** Define divider padding using our spacing system */\n @Prop() padding: Spacing = 'spacing-03';\n /** Define divider orientation horizontal or vertical */\n @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n /** Set the divider line color */\n @Prop() color: BorderColors | StaticGlobal | Palettes = 'color-border-low';\n /** Set the divider line thickness */\n @Prop() thickness: BorderThickness = 'border-thickness-01';\n\n private setDividerStyle() {\n return {\n '--divider-padding': `var(--${this.padding})`,\n '--divider-border-color': `var(--${this.color})`,\n '--divider-border-width': `var(--${this.thickness})`,\n };\n }\n\n render() {\n return (\n <Host class={combineClasses(this.orientation)} style={this.setDividerStyle()}>\n <div class={combineClasses(\n 'vds__divider--container-' + this.orientation\n )}>\n <div class={combineClasses(\n 'vds__divider--line',\n 'vds__divider--orientation-' + this.orientation\n )}>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/vds-drawer.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"vds-drawer.js","mappings":"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","names":["VdsDrawer","__stencil_proxyCustomElement"],"sources":["src/components/drawer/vds-drawer.scss?tag=vds-drawer&encapsulation=shadow","src/components/drawer/vds-drawer.tsx"],"sourcesContent":[":host {\n display: block;\n height: 100vh;\n width: 100%;\n\n --vds-drawer-display-opened: block;\n --vds-drawer-background-color: var(--surface-medium);\n --vds-drawer-border-color: var(--color-border-lowest);\n --vds-drawer-backdrop-background-color: var(--color-interaction-black-lower);\n\n .volt__drawer {\n display: none;\n margin: 0;\n padding: 0;\n height: 100%;\n border-radius: var(--radius-sharp);\n background: var(--vds-drawer-background-color);\n transition: left 0.3 ease-in-out;\n\n vds-icon-button {\n display: flex;\n justify-content: end;\n }\n\n &.volt__drawer--opened {\n display: var(--vds-drawer-display-opened, block);\n }\n\n @each $key, $value in $spacing {\n &.padding__spacing-#{$key} {\n padding: var(--spacing-#{$key});\n }\n }\n\n .volt__drawer--header {\n display: flex;\n justify-content: end;\n\n .volt__drawer--header-content {\n flex-grow: 1;\n }\n\n &.volt__drawer--header-close-icon {\n gap: var(--spacing-03);\n align-items: start;\n }\n }\n .volt__drawer--content {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow-y: auto;\n z-index: var(--elevation-layer-5);\n .volt-drawer__body {\n flex-grow: 1;\n }\n }\n }\n\n .vds-drawer__dropdown-is-opened {\n ::slotted([slot=\"drawer\"]) {\n position: relative;\n }\n }\n\n .volt__drawer__container {\n .volt__drawer--backdrop {\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n background: var(--vds-drawer-backdrop-background-color);\n z-index: var(--elevation-layer-4);\n }\n .volt__drawer--backdrop-adaptable {\n position: fixed;\n top: 0;\n width: 100%;\n height: 100%;\n background: var(--vds-drawer-backdrop-background-color);\n z-index: var(--elevation-layer-4);\n }\n }\n\n .vds-drawer__border--left {\n border-right: 0.0625rem solid var(--vds-drawer-border-color);\n }\n\n .vds-drawer__border--right {\n border-left: 0.0625rem solid var(--vds-drawer-border-color);\n }\n\n .vds-drawer__shadow--left {\n box-shadow: var(--elevation-shadow-1);\n }\n\n .vds-drawer__shadow--right {\n box-shadow: var(--elevation-shadow-1);\n }\n}\n\n:host(.vds-drawer__over) {\n position: relative;\n\n .volt__drawer {\n position: fixed;\n z-index: var(--elevation-layer-5);\n\n &.volt__drawer__element--position-right {\n right: 0;\n }\n\n &.volt__drawer__element--position-left {\n left: 0;\n }\n }\n\n .volt__drawer__container {\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n }\n}\n\n:host(.vds-drawer__side) {\n display: flex;\n\n .volt__drawer {\n z-index: var(--elevation-layer-5);\n }\n\n .volt__drawer__container {\n width: 100%;\n }\n}\n\n:host(.vds-drawer__side.vds-drawer__right) {\n flex-direction: row-reverse;\n}\n\n:host(.vds-drawer__side.vds-drawer__left) {\n flex-direction: row;\n}\n\n:host(.vds-drawer--adaptable) {\n height: 100%;\n .volt__drawer {\n box-sizing: border-box;\n }\n}\n","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Method, EventEmitter, Event, Watch, Listen, State } from '@stencil/core/internal';\nimport { Spacing } from '../../definitions/spacing';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n tag: 'vds-drawer',\n styleUrl: 'vds-drawer.scss',\n shadow: true,\n})\nexport class VdsDrawer {\n /** Opens/closes the drawer */\n @Prop({ mutable: true }) opened: boolean;\n /** Toggles close button in the drawer */\n @Prop({ mutable: true }) showCloseButton: boolean;\n /** Disables the close button in the drawer */\n @Prop({ mutable: true }) disableClose: boolean;\n /** Places the drawer in the screen */\n @Prop({ mutable: true }) position: 'left' | 'right' = 'left';\n /** Toggles backdrop behind the drawer in the screen */\n @Prop({ mutable: true }) backdrop: boolean;\n /** Adds the padding to the drawer */\n @Prop({ mutable: true }) padding: Spacing;\n /** Mode of the drawer; one of 'over' or 'side'. */\n @Prop({ mutable: true }) mode: 'over' | 'side' = 'over';\n /** Allow the vds-drawer to fit inside another html element */\n @Prop() isAdaptable = false;\n /** Allow show or hide the shadow of the drawer */\n @Prop() showShadow: boolean = true;\n // Allow display the border of the sidenav\n @Prop() showBorder: boolean = false;\n\n /** Emits event when drawer is closed */\n @Event() drawerClosed: EventEmitter<void>;\n /** Emits event when drawer is opened */\n @Event() drawerOpened: EventEmitter<void>;\n\n @State() dropdownIsOpened: boolean = false;\n\n @Watch('opened')\n emitValue(): void {\n if (this.opened) this.drawerOpened.emit();\n else this.drawerClosed.emit();\n }\n\n @Listen('opened', { target: 'window' })\n @Listen('closed', { target: 'window' })\n setPositionRelativeForDropdowns(evt: CustomEvent<boolean>): void {\n const target = (evt.target) as HTMLElement;\n if(\n target.nodeName === \"VDS-BASIC-DROPDOWN\" || \n target.nodeName === \"VDS-DROPDOWN\" || \n target.nodeName === \"VDS-BASIC-DROPDOWN-MULTISELECT\" ||\n target.nodeName === \"VDS-DROPDOWN-MULTISELECT\" ||\n target.nodeName === \"VDS-BASIC-AUTOCOMPLETE\" || \n target.nodeName === \"VDS-AUTOCOMPLETE\"\n ) {\n this.dropdownIsOpened = evt.type === \"opened\";\n }\n }\n\n @Method()\n open(): Promise<void> {\n return new Promise(resolve => {\n this.opened = true;\n resolve();\n });\n }\n\n @Method()\n close(): Promise<void> {\n return new Promise(resolve => {\n if (!this.disableClose) {\n this.opened = false;\n }\n resolve();\n });\n }\n\n private renderBackdrop(): HTMLStencilElement {\n return this.isAdaptable ? <div class={`volt__drawer--backdrop-adaptable`}></div> : <div class={`volt__drawer--backdrop`}></div>;\n }\n\n private renderCloseIcon(): HTMLStencilElement {\n return (\n <vds-icon-button\n onClick={() => {\n this.close();\n }}\n variant={'secondary'}\n icon=\"close\"\n disabled={this.disableClose}\n size=\"large\"\n ></vds-icon-button>\n );\n }\n\n render(): HTMLStencilElement {\n return (\n <Host class={combineClasses(`vds-drawer__${this.mode}`, `vds-drawer__${this.position}`, this.isAdaptable ? 'vds-drawer--adaptable' : '')}>\n <div\n class={combineClasses(\n 'volt__drawer',\n `padding__${this.padding}`,\n this.opened ? 'volt__drawer--opened' : '',\n `volt__drawer__element--position-${this.position}`,\n this.showShadow ? `vds-drawer__shadow--${this.position}` : '',\n this.showBorder ? `vds-drawer__border--${this.position}` : '',\n this.dropdownIsOpened ? \"vds-drawer__dropdown-is-opened\" : \"\"\n )}\n >\n \n <div class={`volt__drawer--content`}>\n <div\n class={`volt__drawer--header ${this.showCloseButton ? \"volt__drawer--header-close-icon\" : \"\"}`}\n >\n <div class={\"volt__drawer--header-content\"}>\n <slot name=\"header\" />\n </div>\n {this.showCloseButton && this.renderCloseIcon()}\n </div>\n <div class={`volt-drawer__body`}>\n <slot name=\"drawer\" />\n </div>\n <slot name=\"footer\" />\n </div>\n </div>\n <div class={'volt__drawer__container'}>\n {this.backdrop && this.opened ? this.renderBackdrop() : ''}\n <slot name=\"container\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"vds-dropdown-group-header.js","mappings":";;;AAAA,MAAM,yBAAyB,GAAG,MAAM,CAAC,imgCAAimgC,CAAC;;MCQ9ngCA,wBAAsB,iBAAAC,kBAAA,CAAA,MAAA,sBAAA,SAAA,WAAA,CAAA;AALnC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAoB,QAAQ;AASzC;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,CACnC;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsDropdownGroupHeader","__stencil_proxyCustomElement"],"sources":["src/components/dropdown-group-header/vds-dropdown-group-header.scss?tag=vds-dropdown-group-header&encapsulation=shadow","src/components/dropdown-group-header/vds-dropdown-group-header.tsx"],"sourcesContent":["@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n@import '../base-group-header/base-group-header.scss';\n\n:host {\n display: block;\n width: 100%;\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport { GroupHeaderSize, generateGroupHeaderContainer } from '../base-group-header/base-group-header';\n\n@Component({\n tag: 'vds-dropdown-group-header',\n styleUrl: 'vds-dropdown-group-header.scss',\n shadow: true,\n})\nexport class VdsDropdownGroupHeader {\n /** Size of the group header */\n @Prop() size: GroupHeaderSize = 'medium';\n\n render() {\n return (\n <Host>\n {generateGroupHeaderContainer(this.size)}\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"vds-dropdown-item.js","mappings":"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","names":["VdsDropdownItem","__stencil_proxyCustomElement"],"sources":["src/components/dropdown-item/vds-dropdown-item.scss?tag=vds-dropdown-item&encapsulation=shadow","src/components/dropdown-item/vds-dropdown-item.tsx"],"sourcesContent":["@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n@import '../base-item/base-item.scss';\n\n:host {\n display: block;\n .vds-dropdown-item{\n @include baseItem();\n &.vds-dropdown-item--size-small {\n @include baseItemSizeSmall();\n .vds-dropdown-item__content {\n @include baseItemContent(small);\n }\n }\n &.vds-dropdown-item--size-medium {\n @include baseItemSizeMedium();\n .vds-dropdown-item__content {\n @include baseItemContent(medium);\n }\n }\n &.vds-dropdown-item--size-large {\n @include baseItemSizeLarge();\n .vds-dropdown-item__content {\n @include baseItemContent(large);\n }\n }\n &.vds-dropdown-item--active {\n @include baseItemActive();\n &.vds-dropdown-item--danger {\n @include baseItemBackgroundDanger();\n }\n }\n &.vds-dropdown-item--danger {\n @include baseItemDanger();\n }\n &.vds-dropdown-item--disabled {\n @include baseItemDisabled();\n &.vds-dropdown-item--danger {\n @include baseItemDisabled();\n }\n }\n }\n}\n\n:host(.vds-dropdown-item--disabled) {\n pointer-events: none;\n}\n\n","import { Component, Host, h, Prop, Event, Element, EventEmitter } from '@stencil/core';\nimport { HTMLStencilElement, Watch } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { handleRefClick } from '../../utils/utils';\nimport { DropdownItemClickedEvent } from './vds-dropdown-item-clicked-event';\nimport { generateCheckbox, generateCheckmarkIconButton, generateInformativeIcon, generateLabel } from '../base-item/base-item';\n\n@Component({\n tag: 'vds-dropdown-item',\n styleUrl: 'vds-dropdown-item.scss',\n shadow: true,\n})\nexport class VdsDropdownItem {\n /** Puts the VdsDropdownItem in disabled state */\n @Prop({ mutable: true }) disabled: boolean = false;\n /** Define the icon value */\n @Prop({ mutable: true }) informativeIcon: string;\n /** Define item as active when is true */\n @Prop({ mutable: true }) isActive: boolean = false;\n /** Defines the element as a link */\n @Prop({ mutable: true }) linkHref: string = null;\n /** Sets the link target value */\n @Prop({ mutable: true }) linkTarget: '_self' | '_blank' | '_parent' | '_top' = '_self';\n /** Sets the link rel value */\n @Prop({ mutable: true }) linkRel: string = null;\n /** Define item value */\n @Prop({ mutable: true, reflect: true }) value: string;\n /** Define item label */\n @Prop({ mutable: true, reflect: true }) label: string;\n /** Define aria-label */\n @Prop({ mutable: true, reflect: true }) setAriaLabel: string;\n /** Set size of menu item */\n @Prop({ mutable: true }) size: 'small' | 'medium' | 'large' = 'medium';\n /** Shows checkmark */\n @Prop({ mutable: true }) hasCheckmark: boolean = false;\n /** Set state of checkmark */\n @Prop({ mutable: true, reflect: true }) isSelected: boolean = false;\n /** When has-checkmark is true, sets the checks element as checkmark or checkbox. */\n @Prop() checkmarkVariant: 'checkbox' | 'checkmark' = 'checkmark';\n /** When has-checkmark is true, sets the checks element at the beginning or end. */\n @Prop() checkmarkAlignment: 'start' | 'end' = 'start';\n /** Sets the dropdown item to danger state. */\n @Prop({ mutable: true, reflect: true }) danger: boolean = false;\n\n /** Emits event when item gets clicked */\n @Event() dropdownItemClicked: EventEmitter<DropdownItemClickedEvent>;\n /** Emits event when item is selected */\n @Event() selected: EventEmitter<MouseEvent>;\n /** Emits event when item is deselected */\n @Event() deselected: EventEmitter<MouseEvent>;\n\n @Element() hostEl: HTMLElement;\n\n @Watch('isSelected')\n updateItemState() {\n this.isActive = this.isSelected;\n }\n\n private handleClick(evt: MouseEvent): void {\n handleRefClick(this.linkHref, this.linkTarget, this.linkRel);\n this.handleSelected(evt);\n this.dropdownItemClicked.emit({\n value: this.value,\n label: this.label,\n icon: this.informativeIcon,\n event: evt,\n selected: this.isSelected,\n });\n }\n\n private handleSelected(evt: MouseEvent): void {\n if (this.isSelected) this.selected.emit(evt);\n else this.deselected.emit(evt);\n }\n\n private generateCheckmarkIconButton() {\n return generateCheckmarkIconButton(this.isSelected, this.size, this.disabled, this.isActive, this.danger);\n }\n\n private generateCheckbox() {\n return generateCheckbox(this.isSelected, this.size, this.disabled, this.isActive, this.danger);\n }\n\n private generateInformativeIcon() {\n return generateInformativeIcon(this.informativeIcon, this.value, this.size, this.disabled, this.isActive, this.danger);\n }\n\n private generateLabel() {\n return generateLabel(this.label, this.size, this.disabled, this.isActive, this.danger);\n }\n\n private setAriaLabelText() {\n return this.setAriaLabel ? this.setAriaLabel : this.label ? this.label : this.value;\n }\n\n render(): HTMLStencilElement {\n return (\n <Host class={this.disabled ? 'vds-dropdown-item--disabled' : ''}>\n <button\n type=\"button\"\n tabindex=\"0\"\n disabled={this.disabled}\n title={this.setAriaLabelText()}\n aria-label={this.setAriaLabelText()}\n onClick={(evt: MouseEvent) => {\n if (this.disabled) {\n evt.stopPropagation();\n evt.preventDefault();\n } else {\n this.handleClick(evt);\n }\n }}\n class={combineClasses(\n 'vds-dropdown-item',\n `vds-dropdown-item--size-${this.size}`,\n this.disabled ? 'vds-dropdown-item--disabled' : '',\n this.isActive || this.isSelected ? 'vds-dropdown-item--active' : '',\n this.danger ? 'vds-dropdown-item--danger' : '',\n `vds-dropdown-item__alignment-${this.checkmarkAlignment}`,\n )}\n >\n <div class=\"vds-dropdown-item__content\">\n {this.checkmarkAlignment === 'start' && this.hasCheckmark\n ? this.checkmarkVariant === 'checkmark'\n ? this.generateCheckmarkIconButton()\n : this.generateCheckbox()\n : null}\n {this.informativeIcon && this.generateInformativeIcon()}\n {this.generateLabel()}\n {this.checkmarkAlignment === 'end' && this.hasCheckmark ? (this.checkmarkVariant === 'checkmark' ? this.generateCheckmarkIconButton() : this.generateCheckbox()) : null}\n </div>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/vds-field.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"vds-field.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,4ovCAA4ovC,CAAC;;MCU3pvCA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAA,WAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAS2B,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;;AAE3B,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;;AAQ5C,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AA2CtD;IAzCS,QAAQ,GAAA;QACd,IAAI,CAAC,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,IAAI;QAE5B,QACE,iBACE,UAAU,EAAE,IAAI,CAAC,KAAK,EACtB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EAEL,CAAA;;IAIR,aAAa,GAAA;QACnB,IAAI,CAAC,IAAI,CAAC,UAAU;AAAE,YAAA,OAAO,IAAI;AAEjC,QAAA,QACE,CACE,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,CAAA,wBAAA,EAA2B,IAAI,CAAC,eAAe,GAAG,CAAA,wBAAA,EAA2B,IAAI,CAAC,eAAe,CAAA,CAAE,GAAG,EAAE,CAAA,CAAE,EAC9G,EAAA,IAAI,CAAC,UAAU,CACb;;IAIX,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,qBAAqB,GAAG,EAAE,EAAA,EACvD,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EACH,cAAc,CAAC,uBAAuB,EACtC,+BAA+B,IAAI,CAAC,IAAI,CAAA,CAAE,EAC1C,CAAA,EAAG,IAAI,CAAC,UAAU,GAAG,iCAAiC,GAAG,EAAE,CAAA,CAAE,CAAC,EAAA,EAE/D,IAAI,CAAC,QAAQ,EAAE,EAChB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,YAAY,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,2BAA2B,EAAG,EAAA,IAAI,CAAC,YAAY,CAAQ,CACtF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsField","__stencil_proxyCustomElement"],"sources":["src/components/field/vds-field.scss?tag=vds-field&encapsulation=shadow","src/components/field/vds-field.tsx"],"sourcesContent":["@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations.scss';\n\n@mixin helper-text-small {\n font-feature-settings: 'clig' off, 'liga' off;\n @include font-style(body, small);\n}\n\n@mixin helper-text-medium {\n font-feature-settings: 'clig' off, 'liga' off;\n @include font-style(body, small);\n}\n\n@mixin helper-text-large {\n font-feature-settings: 'clig' off, 'liga' off;\n @include font-style(body, medium);\n}\n\n:host {\n display: block;\n\n .vds__field__container {\n display: flex;\n justify-content: start;\n flex-direction: column;\n gap: var(--spacing-02);\n\n .vds__field--helper-text {\n display: block;\n color: var(--color-text-medium);\n }\n\n .vds__field--error-message {\n display: block;\n color: var(--color-text-danger-medium);\n }\n &.vds__field__container--size-small {\n .vds__field--helper-text {\n @include helper-text-small();\n }\n \n .vds__field--error-message {\n @include helper-text-small();\n }\n }\n\n &.vds__field__container--size-medium {\n .vds__field--helper-text {\n @include helper-text-medium();\n }\n \n .vds__field--error-message {\n @include helper-text-medium();\n }\n }\n &.vds__field__container--size-large {\n .vds__field--helper-text {\n @include helper-text-large();\n }\n \n .vds__field--error-message {\n @include helper-text-large();\n }\n }\n &.vds__field__container--disabled {\n .vds__field--helper-text,\n .vds__field--error-message {\n color: var(--color-text-disabled);\n }\n }\n @each $colorName, $palette in $volt-palettes {\n @each $shadeName, $hex in $palette {\n @if ($shadeName == main) {\n .vds__field--helper-text-#{$colorName}-main {\n color: $hex;\n }\n } @else {\n .vds__field--helper-text-#{$colorName}-#{$shadeName} {\n color: $hex;\n }\n }\n }\n }\n }\n}\n\n:host-context(.vds-field--disabled) {\n pointer-events: none;\n}","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n tag: 'vds-field',\n styleUrl: 'vds-field.scss',\n shadow: true,\n})\nexport class VdsField {\n /** Sets the field's label */\n @Prop() label: string\n /** Toggles the required sign in the field */\n @Prop({ mutable: true }) isRequired: boolean = false \n /** Sets the field in disabled state */\n @Prop({ mutable: true }) isDisabled: boolean = false \n /** Sets the field's helper text */\n @Prop({ mutable: true }) helperText: string;\n /** Sets the field's helper text color */\n @Prop({ mutable: true }) helperTextColor: Colors;\n /** Sets the field's error message */\n @Prop({ mutable: true }) errorMessage: string;\n /** Sets the field's size */\n @Prop() size: \"small\" | \"medium\" | \"large\" = \"medium\";\n\n private getLabel(): HTMLStencilElement | null {\n if (!this.label) return null;\n\n return (\n <vds-label \n labelValue={this.label}\n required={this.isRequired}\n size={this.size}\n >\n </vds-label>\n );\n }\n\n private getHelperText(): HTMLStencilElement | null {\n if (!this.helperText) return null;\n\n return (\n <span \n class={`vds__field--helper-text ${this.helperTextColor ? `vds__field--helper-text-${this.helperTextColor}` : \"\"}`}>\n {this.helperText}\n </span>\n );\n }\n\n render(): HTMLStencilElement {\n return (\n <Host class={this.isDisabled ? \"vds-field--disabled\" : \"\"}>\n <div \n class={\n combineClasses(\"vds__field__container\",\n `vds__field__container--size-${this.size}`,\n `${this.isDisabled ? \"vds__field__container--disabled\" : \"\"}`)}\n >\n {this.getLabel()}\n <slot></slot>\n {this.getHelperText()}\n {this.errorMessage && <span class={\"vds__field--error-message\"}>{this.errorMessage}</span>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}