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/index.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"index.js","mappings":";;;AAGO,MAAM,oBAAoB,GAAG;;;;","names":[],"sources":["src/index.ts"],"sourcesContent":["export * from \"./components\";\nimport { unselectAllItems } from \"./components/basic-dropdown/vds-basic-dropdown.utils\";\n\nexport const unselectAllItemsUtil = unselectAllItems;\n"],"version":3}

package/dist/components/node-utils.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"node-utils.js","mappings":";;AAEa,MAAA,eAAe,GAAG,CAAC,gBAA4B,EAAE,IAAU,EAAE,SAAc,KAAsB;AAC1G,IAAA,MAAM,MAAM,GAAG;AACX,QAAA,SAAS,EAAE,IAAI;AACf,QAAA,OAAO,EAAE;KACZ;AAED,IAAA,MAAM,QAAQ,GAAqB,IAAI,gBAAgB,CAAC,MAAK;AACzD,QAAA,gBAAgB,EAAE;QAClB,WAAW,CAAC,SAAS,CAAC;AAC1B,KAAC,CAAC;AAEF,IAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;AAE9B,IAAA,OAAO,QAAQ;AACnB;MAEa,0BAA0B,GAAG,CAAC,MAAmB,EAAE,QAAgB,KAAiB;IAC7F,OAAO,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAgB;AACnE;;;;","names":[],"sources":["src/utils/node-utils.ts"],"sourcesContent":["import { forceUpdate } from \"@stencil/core\";\n\nexport const setNodeObserver = (methodToExecuted: () => void, host: Node, component: any): MutationObserver => {\n const config = {\n childList: true,\n subtree: true\n };\n\n const observer: MutationObserver = new MutationObserver(() => {\n methodToExecuted();\n forceUpdate(component);\n });\n\n observer.observe(host, config);\n\n return observer;\n};\n\nexport const queryElementFromShadowRoot = (hostEl: HTMLElement, selector: string): HTMLElement => {\n return hostEl.shadowRoot.querySelector(selector) as HTMLElement;\n}\n"],"version":3}

package/dist/components/slider.utils.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"slider.utils.js","mappings":"AAAA;;;;;;;;;;AAUG;AACU,MAAA,uBAAuB,GAAG,CACnC,MAAwB,EACxB,IAAiB,EACjB,QAAgB,EAChB,QAAgB,EAChB,KAAa,EACb,IAAwB,KAChB;AACR,IAAA,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW;AAE5D,IAAA,IAAI,KAAK,KAAK,CAAC,EAAE;AACb,QAAA,OAAO,KAAK;;AAGhB,IAAA,MAAM,KAAK,GAAG,QAAQ,GAAG,QAAQ;AACjC,IAAA,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,GAAG,QAAQ,IAAI,KAAK,IAAI,GAAG;AACrD,IAAA,MAAM,SAAS,GAAG,IAAI,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE;AAE7C,IAAA,MAAM,eAAe,GAAG,UAAU,GAAG,GAAG;AACxC,IAAA,MAAM,WAAW,GAAG,KAAK,GAAG,SAAS;AACrC,IAAA,MAAM,SAAS,GAAG,SAAS,GAAG,CAAC;IAC/B,MAAM,eAAe,GAAG,UAAU,KAAK,CAAC,GAAG,SAAS,GAAG,CAAC,GAAG,UAAU,KAAK,GAAG,GAAG,SAAS,GAAG,CAAC,GAAG,SAAS;IAEzG,MAAM,YAAY,GAAG,CAAC,eAAe,GAAG,WAAW,IAAI,eAAe;IAEtE,OAAO,CAAA,EAAG,YAAY,CAAA,EAAA,CAAI;AAC9B;AAEA;;;;;;;AAOG;AACU,MAAA,wBAAwB,GAAG,CAAC,KAAa,EAAE,QAAgB,EAAE,QAAgB,KAAY;AAClG,IAAA,MAAM,KAAK,GAAG,QAAQ,GAAG,QAAQ;AACjC,IAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,QAAQ,IAAI,KAAK,IAAI,GAAG;AAEnD,IAAA,OAAO,CAAsD,mDAAA,EAAA,QAAQ,CAA0B,uBAAA,EAAA,QAAQ,IAAI;AAC/G;AAEA;;;;;;;AAOG;AACU,MAAA,WAAW,GAAG,CACvB,KAA8C,EAC9C,QAAgB,EAChB,QAAgB,KACV;IACN,IAAI,QAAQ,GAAG,QAAQ,IAAI,QAAQ,KAAK,QAAQ,EAAE;AAC9C,QAAA,OAAO,CAAC,IAAI,CAAC,sDAAsD,CAAC;;AAGxE,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,GAAG,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,GAAG,QAAQ,EAAE;AAChG,QAAA,OAAO,CAAC,IAAI,CAAC,qFAAqF,CAAC;;IAGvG,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,KAAK,GAAG,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,KAAK,GAAG,QAAQ;SAC1G,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,GAAG,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,EAAE;AAC1G,QAAA,OAAO,CAAC,IAAI,CAAC,2FAA2F,CAAC;;AAEjH;;;;","names":[],"sources":["src/utils/slider.utils.ts"],"sourcesContent":["/**\n * Calculates the left position of the thumb icon based on the given slider value.\n *\n * @param {HTMLInputElement} slider - The input range element representing the slider.\n * @param {HTMLElement} host - The container element of the slider.\n * @param {number} maxValue - The maximum value of the slider.\n * @param {number} minValue - The minimum value of the slider.\n * @param {number} value - The current value of the slider.\n * @param {size} size - The size of the slider (medium | large).\n * @returns {string} The calculated left position of the thumb icon as a CSS pixel value.\n */\nexport const getPositionBasedOnValue = (\n slider: HTMLInputElement,\n host: HTMLElement,\n maxValue: number,\n minValue: number,\n value: number,\n size: \"medium\" | \"large\"\n): string => {\n const width = slider ? slider.clientWidth : host.clientWidth;\n\n if (width === 0) {\n return '0px';\n }\n\n const range = maxValue - minValue;\n const percentage = ((value - minValue) / range) * 100;\n const thumbSize = size === \"medium\" ? 20 : 24;\n\n const percentageValue = percentage / 100;\n const widthOffset = width - thumbSize;\n const thumbHalf = thumbSize / 2;\n const thumbSizeOffset = percentage === 0 ? thumbHalf - 2 : percentage === 100 ? thumbHalf + 2 : thumbHalf;\n\n const leftPosition = (percentageValue * widthOffset) + thumbSizeOffset;\n\n return `${leftPosition}px`;\n}\n\n/**\n * Calculates the CSS linear gradient for the slider track fill based on the given value and maximum value.\n *\n * @param {number} value - The current value of the slider.\n * @param {number} maxValue - The maximum value of the slider.\n * @param {number} minValue - The minimum value of the slider.\n * @returns {string} The CSS linear gradient for the slider track fill.\n */\nexport const getTrackFillBasedOnValue = (value: number, maxValue: number, minValue: number): string => {\n const range = maxValue - minValue;\n const progress = ((value - minValue) / range) * 100;\n\n return `linear-gradient(to right, var(--slider-track-fill) ${progress}%, var(--slider-track) ${progress}%)`;\n}\n\n/**\n * logs warning for inconsistent inputs\n *\n * @param {number} value - The current value of the slider.\n * @param {number} maxValue - The maximum value of the slider.\n * @param {number} minValue - The minimum value of the slider.\n * @returns {string} The CSS linear gradient for the slider track fill.\n */\nexport const logWarnings = (\n value: number | { start: number, end: number },\n maxValue: number,\n minValue: number\n): void => {\n if (maxValue < minValue || maxValue === minValue) {\n console.warn(\"[VdsSlider] - maxValue must be greater than minValue\");\n }\n\n if (typeof value === \"number\" && value < minValue || typeof value === \"number\" && value > maxValue) {\n console.warn(\"[VdsSlider] - value must be inside the range created by the max value and min value\");\n }\n\n if ((typeof value === \"object\" && value.start < minValue || typeof value === \"object\" && value.start > maxValue) || \n (typeof value === \"object\" && value.end < minValue || typeof value === \"object\" && value.end > maxValue)) {\n console.warn(\"[VdsSliderRange] - values must be inside the range created by the max value and min value\");\n }\n}\n\nexport type SliderRangeValueType = \"start\" | \"end\";"],"version":3}

package/dist/components/utils.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"utils.js","mappings":"AAIA;;;;;;;;AAQG;AACI,MAAM,cAAc,GAAG,CAC1B,OAAe,EACf,UAAA,GAAsD,OAAO,EAC7D,OAAe,KACT;IACN,IAAI,OAAO,EAAE;QACT,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC;AACxC,QAAA,IAAI,CAAC,IAAI,GAAG,OAAO;AACnB,QAAA,IAAI,CAAC,MAAM,GAAG,UAAU;AACxB,QAAA,IAAI,CAAC,GAAG,GAAG,OAAO;AAClB,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QAC/B,IAAI,CAAC,KAAK,EAAE;AACZ,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;;AAEvC;;;;","names":[],"sources":["src/utils/utils.ts"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\n/**\n * Handles a click event on a reference element and opens a link in a new window.\n *\n * @param {string} linkRef - The reference string for the link to open. (Optional if no link action desired)\n * @param {\"_self\" | \"_blank\" | \"_parent\" | \"_top\"} [linkTarget=\"_self\"] - The target window for the link.\n * @param {string} linkRel - The relationship type for the link.\n * \n * @returns {void}\n */\nexport const handleRefClick = (\n linkRef: string,\n linkTarget: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\",\n linkRel: string\n): void => {\n if (linkRef) {\n const link = document.createElement('a');\n link.href = linkRef;\n link.target = linkTarget;\n link.rel = linkRel;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n }\n}"],"version":3}

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

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

package/dist/components/vds-autocomplete-item2.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"vds-autocomplete-item2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/autocomplete-item/vds-autocomplete-item.scss?tag=vds-autocomplete-item&encapsulation=shadow","src/components/autocomplete-item/vds-autocomplete-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-autocomplete-item{\n @include baseItem();\n &.vds-autocomplete-item--size-small {\n @include baseItemSizeSmall();\n .vds-autocomplete-item__content {\n @include baseItemContent(small);\n }\n }\n &.vds-autocomplete-item--size-medium {\n @include baseItemSizeMedium();\n .vds-autocomplete-item__content {\n @include baseItemContent(medium);\n }\n }\n &.vds-autocomplete-item--size-large {\n @include baseItemSizeLarge();\n .vds-autocomplete-item__content {\n @include baseItemContent(large);\n }\n }\n &.vds-autocomplete-item--active {\n @include baseItemActive();\n &.vds-autocomplete-item--danger {\n @include baseItemBackgroundDanger();\n }\n }\n &.vds-autocomplete-item--danger {\n @include baseItemDanger();\n }\n &.vds-autocomplete-item--disabled {\n @include baseItemDisabled();\n &.vds-autocomplete-item--danger {\n @include baseItemDisabled();\n }\n }\n }\n}\n\n:host(.vds-autocomplete-item--disabled) {\n pointer-events: none;\n}\n\n","import { Component, Host, Prop, h, Event, EventEmitter, Element } from \"@stencil/core\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { generateCheckbox, generateCheckmarkIconButton, generateInformativeIcon, generateLabel } from \"../base-item/base-item\";\nimport { HTMLStencilElement, Watch } from \"@stencil/core/internal\";\n\n@Component({\n tag: \"vds-autocomplete-item\",\n styleUrl: \"vds-autocomplete-item.scss\",\n shadow: true,\n})\nexport class VdsAutocompleteItem {\n /** Sets the autocomplete in disabled state */\n @Prop({ mutable: true }) disabled: boolean = false;\n /** Sets the icon value */\n @Prop({ mutable: true }) informativeIcon: string;\n /** Sets item in active state */\n @Prop({ mutable: true }) isActive: boolean = false;\n /** Sets item's value; This will be display as the text in the item when label is not present.\n * When value is present as text to be display, it will override children content. */\n @Prop({ mutable: true, reflect: true }) value: string;\n /** Sets item's label; This will be display as the text in the item.\n * When label is present, it will override children content and value when present. */\n @Prop({ mutable: true, reflect: true }) label: string;\n /** Sets 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 autocomplete item to danger state. */\n @Prop({ mutable: true, reflect: true }) danger: boolean = false;\n\n /** Emits event when item gets clicked */\n @Event() autocompleteClicked: EventEmitter<{value: string, selected: boolean}>;\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 this.handleSelected(evt);\n }\n\n private handleSelected(evt: MouseEvent): void {\n const selected = !this.isSelected;\n if (selected) this.selected.emit(evt);\n else this.deselected.emit(evt);\n \n this.autocompleteClicked.emit({\n value: this.label || this.value || this.hostEl?.textContent,\n selected,\n });\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.value, 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-autocomplete-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-autocomplete-item\",\n `vds-autocomplete-item--size-${this.size}`,\n this.disabled ? \"vds-autocomplete-item--disabled\" : \"\",\n this.isActive || this.isSelected ? \"vds-autocomplete-item--active\" : \"\",\n this.danger ? \"vds-autocomplete-item--danger\" : \"\",\n `vds-autocomplete-item__alignment-${this.checkmarkAlignment}`,\n )}\n >\n <div class=\"vds-autocomplete-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-avatar.js.map DELETED Viewed

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

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

@@ -1 +0,0 @@

- {"file":"vds-avatar2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/avatar/vds-avatar.scss?tag=vds-avatar&encapsulation=shadow","src/components/avatar/vds-avatar.tsx"],"sourcesContent":["@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n display: block;\n width: fit-content;\n\n --vds-avatar-background-color: var(--color-icon-high);\n\n .vds-avatar { \n width: var(--spacing-06); \n height: var(--spacing-06);\n flex-shrink: 0;\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n overflow: hidden;\n border: 1px solid var(--color-border-white-high);\n box-sizing: border-box;\n position: relative;\n }\n\n .vds-avatar__overlay {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 32%;\n background: var(--color-interaction-backdrop);\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n line-height: 0;\n font-size: 0;\n opacity: 0;\n transition: opacity 0.15s ease;\n will-change: opacity;\n }\n\n .vds-avatar--has-overlay {\n cursor: pointer;\n padding: 0;\n }\n\n .vds-avatar--has-overlay:hover .vds-avatar__overlay {\n opacity: 1;\n transition: opacity 0.15s ease;\n will-change: opacity;\n }\n\n .vds-avatar--value{\n flex-shrink: 0;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n color: var(--color-text-white-high);\n text-align: center;\n font-feature-settings: 'clig' off, 'liga' off;\n @include font-style(title, medium);\n }\n .vds-avatar--picture {\n width: 100%;\n height: 100%;\n object-fit: cover;\n background-repeat: no-repeat;\n }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'vds-avatar',\n styleUrl: 'vds-avatar.scss',\n shadow: true,\n})\nexport class VdsAvatar {\n /**\n * This property can receive:\n * - Fullname to show the first letters inside the avatar.\n * - Url of image.\n * - +XX format for showing the number of additional users. Caps at +99.\n */\n @Prop() value: string;\n /** Set icon size in px or rem, IE: 32px or 1.25rem */\n @Prop() size: string = '20px';\n /**\n * Name of the icon to show as overlay on hover. If not set, no overlay is shown.\n */\n @Prop() overlayIcon?: string;\n\n setBackground: boolean;\n\n private getNumberFormat(number: string): string {\n const numValue = parseInt(number.substring(1), 10);\n if (numValue > 99) {\n return '+99';\n }\n return '+' + numValue;\n }\n\n private getNameInitials(name: string): string {\n const parts = name.split(' ');\n const firstInitial = parts[0].charAt(0);\n const lastInitial = parts[parts.length - 1].charAt(0);\n const initials = firstInitial + lastInitial;\n\n return initials.toUpperCase();\n }\n\n getAvatarValue(value: string): string {\n if (/^\\+\\d+$/.test(value)) {\n return this.getNumberFormat(value);\n }\n return this.getNameInitials(value);\n }\n\n calcFontSize(size: string): string {\n const regex = /^(\\d+)(px|rem)$/;\n const match = size.match(regex);\n if (match) {\n const value = parseInt(match[1], 10) / 2;\n const unit = match[2];\n const calculated_font_size = value + unit;\n return calculated_font_size;\n }\n throw new Error('Invalid size format. Please provide a valid size in px or rem.');\n }\n calcLineHeight(size: string): string {\n const regex = /^(\\d+)(px|rem)$/;\n const match = size.match(regex);\n if (match) {\n const value = parseFloat(match[1]);\n const unit = match[2];\n const lineHeight = ((value * 1.25) / 2).toFixed(2);\n return lineHeight + unit;\n }\n }\n\n getValueStyles(): { 'width': string; 'height': string; 'font-size': string } {\n return {\n 'width': this.size,\n 'height': this.calcLineHeight(this.size),\n 'font-size': this.calcFontSize(this.size),\n };\n }\n\n getAvatarContent() {\n if (this.value.startsWith('http')) {\n this.setBackground = false;\n return <img class=\"vds-avatar--picture\" src={this.value} alt=\"Avatar\" />;\n } else {\n this.setBackground = true;\n const value = this.getAvatarValue(this.value);\n return (\n <span class=\"vds-avatar--value\" style={this.getValueStyles()}>\n {value}\n </span>\n );\n }\n }\n\n setBackgroundColor(): string {\n return this.setBackground ? 'var(--vds-avatar-background-color)' : 'transparent';\n }\n\n /**\n * Calculates the overlay icon size so that a 100px avatar = 20px icon (1.25rem), scaling proportionally for px or rem.\n */\n getOverlayIconSize(): string {\n const pxMatch = this.size.match(/^(\\d+(?:\\.\\d+)?)px$/);\n if (pxMatch) {\n const px = parseFloat(pxMatch[1]);\n const iconPx = (px * 20) / 100;\n const iconRem = iconPx / 16;\n return `${iconRem.toFixed(3)}rem`;\n }\n const remMatch = this.size.match(/^(\\d+(?:\\.\\d+)?)rem$/);\n if (remMatch) {\n const rem = parseFloat(remMatch[1]);\n const iconRem = rem * 0.2;\n return `${iconRem.toFixed(4)}rem`;\n }\n return '1.25rem';\n }\n\n render(): HTMLStencilElement {\n const avatarContent = this.getAvatarContent();\n const showOverlay = !!this.overlayIcon;\n\n return (\n <Host>\n {showOverlay ? (\n <button\n type=\"button\"\n class={`vds-avatar vds-avatar--has-overlay`}\n style={{\n width: this.size,\n height: this.size,\n backgroundColor: this.setBackgroundColor(),\n }}\n >\n {avatarContent}\n <div class=\"vds-avatar__overlay\">\n <vds-icon svgIcon={this.overlayIcon} size={this.getOverlayIconSize()} color=\"static-white\" />\n </div>\n </button>\n ) : (\n <div\n class=\"vds-avatar\"\n style={{\n width: this.size,\n height: this.size,\n backgroundColor: this.setBackgroundColor(),\n }}\n >\n {avatarContent}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/vds-badge-dot.js.map DELETED Viewed

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

package/dist/components/vds-badge-dot2.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"vds-badge-dot2.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,k9iCAAk9iC,CAAC;;MCUp+iC,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAA,WAAA,CAAA;AALxB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAuB,QAAQ;AAC3C;AACsH;AAC9G,QAAA,IAAW,CAAA,WAAA,GAA0E,SAAS;;AAI7F,QAAA,IAAO,CAAA,OAAA,GAAe,KAAK;;AAE5B,QAAA,IAAQ,CAAA,QAAA,GAA8D,WAAW;AAuC1F;IAlCC,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;;IAG5D,mBAAmB,GAAA;QACjB,IAAI,KAAK,GAAG,EAAE;AAEd,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;AACL,gBAAA,eAAe,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,WAAW,CAAG,CAAA;aAC9C;;AAGH,QAAA,OAAO,KAAK;;IAGd,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAa,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,IAAI,CAAC,YAAY,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,CAAC,0BAA0B,CAAC,EAAA,YAAA,EAAc,IAAI,CAAC,YAAY,EAAA,EACnF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,cAAc,CACxB,sBAAsB,EACtB,IAAI,CAAC,OAAO,GAAG,+BAA+B,GAAG,kCAAkC,EACnF,CAAA,2BAAA,EAA8B,IAAI,CAAC,IAAI,CAAE,CAAA,EACzC,CAA+B,4BAAA,EAAA,IAAI,CAAC,WAAW,CAAA,CAAE,EACjD,CAAA,+BAAA,EAAkC,IAAI,CAAC,QAAQ,CAAE,CAAA,CAChD,EACD,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,EAC5B,CAAA,EACP,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/badge-dot/vds-badge-dot.scss?tag=vds-badge-dot&encapsulation=shadow","src/components/badge-dot/vds-badge-dot.tsx"],"sourcesContent":[":host {\n display: inline-block;\n .vds-badge-dot__container {\n position: relative;\n .vds-badge-dot__thumb {\n border-radius: var(--spacing-04);\n position: absolute;\n z-index: var(--elevation-layer-5);\n\n &.vds-badge-dot__thumb--size-medium {\n width: var(--spacing-04);\n height: var(--spacing-04);\n --position-x: -0.68rem;\n --position-y: -0.68rem;\n &.vds-badge-dot__thumb--overlap {\n --position-x: -0.368rem;\n --position-y: -0.368rem;\n }\n }\n &.vds-badge-dot__thumb--size-small {\n width: var(--spacing-03);\n height: var(--spacing-03);\n --position-x: -0.5rem;\n --position-y: -0.5rem;\n &.vds-badge-dot__thumb--overlap {\n --position-x: -0.25rem;\n --position-y: -0.25rem;\n }\n }\n &.vds-badge-dot__thumb--no-overlap {\n transform: translate(-0.05rem, -0.05rem);\n }\n &.vds-badge-dot__thumb--position-top-right {\n top: var(--position-y);\n right: var(--position-x);\n }\n &.vds-badge-dot__thumb--position-top-left {\n top: var(--position-y);\n left: var(--position-x);\n }\n &.vds-badge-dot__thumb--position-bottom-right {\n bottom: var(--position-y);\n right: var(--position-x);\n }\n &.vds-badge-dot__thumb--position-bottom-left {\n bottom: var(--position-y);\n left: var(--position-x);\n }\n &.vds-badge-dot__thumb--color-warning {\n background-color: var(--color-border-warning);\n }\n &.vds-badge-dot__thumb--color-danger {\n background-color: var(--color-border-danger);\n }\n &.vds-badge-dot__thumb--color-healthy {\n background-color: var(--color-background-healthy-default);\n }\n &.vds-badge-dot__thumb--color-information {\n background-color: var(--color-background-information-default);\n }\n &.vds-badge-dot__thumb--color-neutral {\n background-color: var(--color-background-general-default);\n }\n }\n }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { Colors } from '../../definitions/colors';\nimport { BADGE_VARIANTS } from '../badge-pill/vds-badge-pill.utils';\n\n@Component({\n tag: 'vds-badge-dot',\n styleUrl: 'vds-badge-dot.scss',\n shadow: true,\n})\nexport class VdsBadgeDot {\n /** Sets the badge's size */\n @Prop() size: \"small\" | \"medium\" = \"medium\"\n /** Sets the color of the badge, it provides special colors such as warning, danger, healthy, information, neutral \n * If you pass a color from out pallete it will consider as custom. The color will be applied as background color. */\n @Prop() statusColor: \"warning\" | \"danger\" | \"healthy\" | \"information\" | \"neutral\" | Colors = \"neutral\";\n /** Sets the aria label in badge */\n @Prop() setAriaLabel:string \n /** Sets to overlap component content */\n @Prop() overlap : boolean = false\n /** Sets the position of the badge */\n @Prop() position: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\" = \"top-right\"\n \n \n private isCustom: boolean;\n\n componentWillRender(): void {\n this.isCustom = !BADGE_VARIANTS.includes(this.statusColor);\n }\n\n setCustomColorStyle() {\n let style = {};\n\n if (this.isCustom) {\n return {\n backgroundColor: `var(--${this.statusColor})`\n };\n }\n\n return style;\n }\n\n render() {\n return (\n <Host aria-label={this.setAriaLabel}>\n <div class={combineClasses(\"vds-badge-dot__container\")} aria-label={this.setAriaLabel}>\n <div class={combineClasses(\n \"vds-badge-dot__thumb\",\n this.overlap ? \"vds-badge-dot__thumb--overlap\" : \"vds-badge-dot__thumb--no-overlap\",\n `vds-badge-dot__thumb--size-${this.size}`,\n `vds-badge-dot__thumb--color-${this.statusColor}`,\n `vds-badge-dot__thumb--position-${this.position}`\n )}\n style={this.setCustomColorStyle()}\n ></div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/vds-badge-pill.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"vds-badge-pill.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,s0pCAAs0pC,CAAC;;MCYz1pCA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAA8D,QAAQ;AAClF;;AAEkF;AAC1E,QAAA,IAAW,CAAA,WAAA,GAA0E,SAAS;;AAY9F,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAE1B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAGzB,QAAA,IAAkB,CAAA,kBAAA,GAAG,kBAAkB;AAmDhD;IAjDC,mBAAmB,GAAA;QACjB,IAAI,CAAC,cAAc,EAAE;;IAGf,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;AAE1D,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,MAAM,GAAG,EAAE;AAEf,YAAA,MAAM,GAAG;AACP,gBAAA,gCAAgC,EAAE,IAAI,CAAC,WAAW,GAAG,CAAS,MAAA,EAAA,IAAI,CAAC,WAAW,CAAA,CAAA,CAAG,GAAG,SAAS;AAC7F,gBAAA,mCAAmC,EAAE,IAAI,CAAC,YAAY,GAAG,CAAS,MAAA,EAAA,IAAI,CAAC,YAAY,CAAA,CAAA,CAAG,GAAG,SAAS;AAClG,gBAAA,kCAAkC,EAAE,IAAI,CAAC,gBAAgB,GAAG,CAAS,MAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA,CAAA,CAAG,GAAG,SAAS;aAC1G;AAED,YAAA,IAAI,CAAC,YAAY,GAAG,MAAM;;;AAI9B;;;AAGG;IACH,OAAO,GAAA;QACL,OAAO,gBAAU,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAa;;IAG5F,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAa,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,EAAA,EAC/C,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,cAAc,CACnB,6BAA6B,EAC7B,IAAI,CAAC,IAAI,GAAG,CAA0B,uBAAA,EAAA,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,EACtD,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAA,+BAAA,EAAkC,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,uCAAuC,CACpI,EACD,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,EAAA,YAAA,EACvD,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,EAAA,EAE3C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,2BAA2B,EAAA,EACpC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,EAC3B,IAAI,CAAC,KAAK,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,yBAAyB,EAAA,EAAG,IAAI,CAAC,KAAK,CAAQ,CACtE,CACC,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsBadgePill","__stencil_proxyCustomElement"],"sources":["src/components/badge-pill/vds-badge-pill.scss?tag=vds-badge-pill&encapsulation=shadow","src/components/badge-pill/vds-badge-pill.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n .vds__badge__pill--container {\n display: inline-flex;\n align-items: center;\n padding: calc(var(--spacing-02) - 0.0625rem);\n border-radius: var(--radius-pill);\n border: 0.0625rem solid;\n border-color: transparent;\n box-sizing: border-box;\n\n &:focus {\n outline: none;\n }\n\n .vds__badge__pill--content {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-02);\n min-width: var(--spacing-06);\n padding: 0rem var(--spacing-01);\n }\n\n &.vds__badge__pill--size-large {\n .vds__badge__pill--content {\n min-width: var(--spacing-07);\n .vds__badge__pill--value {\n @include font-style(title, large);\n }\n }\n }\n\n &.vds__badge__pill--size-medium > .vds__badge__pill--content > .vds__badge__pill--value {\n @include font-style(title, medium);\n }\n\n &.vds__badge__pill--size-small {\n .vds__badge__pill--content {\n min-width: var(--spacing-05);\n .vds__badge__pill--value {\n @include font-style(title, \"small\");\n }\n }\n }\n\n &.vds__badge__pill--size-extra-small {\n .vds__badge__pill--content {\n min-width: var(--spacing-04);\n .vds__badge__pill--value {\n @include font-style(title, \"extra-small\");\n }\n }\n }\n\n &.vds__badge__pill--size-2x-small {\n .vds__badge__pill--content {\n min-width: var(--spacing-03);\n .vds__badge__pill--value {\n @include font-style(title, 2x-small);\n }\n }\n }\n }\n .vds__badge__pill--status-color-healthy {\n &.vds__badge__pill--container {\n background-color: var(--color-background-healthy-lowest-default);\n &:focus {\n background-color: var(--color-background-healthy-lowest-hover);\n border-color: var(--color-border-healthy);\n }\n .vds__badge__pill--value {\n color: var(--color-text-healthy-high);\n }\n vds-icon {\n color: var(--color-text-healthy-high);\n fill: var(--color-text-healthy-high);\n }\n }\n }\n .vds__badge__pill--status-color-neutral {\n &.vds__badge__pill--container {\n background-color: var(--color-background-general-lowest-default);\n &:focus {\n background-color: var(--color-background-general-lowest-hover);\n border-color: var(--color-border-general);\n }\n .vds__badge__pill--value {\n color: var(--color-text-general-high);\n }\n vds-icon {\n color: var(--color-text-general-high);\n fill: var(--color-text-general-high);\n }\n }\n }\n .vds__badge__pill--status-color-danger {\n &.vds__badge__pill--container {\n background-color: var(--color-background-danger-lowest-default);\n &:focus {\n background-color: var(--color-background-danger-lowest-hover);\n border-color: var(--color-border-danger);\n }\n .vds__badge__pill--value {\n color: var(--color-text-danger-high);\n }\n vds-icon {\n color: var(--color-text-danger-high);\n fill: var(--color-text-danger-high);\n }\n }\n }\n .vds__badge__pill--status-color-information {\n &.vds__badge__pill--container {\n background-color: var(--color-background-information-lowest-default);\n &:focus {\n background-color: var(--color-background-information-lowest-hover);\n border-color: var(--color-border-information);\n }\n .vds__badge__pill--value {\n color: var(--color-text-information-high);\n }\n vds-icon {\n color: var(--color-text-information-high);\n fill: var(--color-text-information-high);\n }\n }\n }\n .vds__badge__pill--status-color-warning {\n &.vds__badge__pill--container {\n background-color: var(--color-background-warning-lowest-default);\n &:focus {\n background-color: var(--color-background-warning-lowest-hover);\n border-color: var(--color-border-warning);\n }\n .vds__badge__pill--value {\n color: var(--color-text-warning-high);\n }\n vds-icon {\n color: var(--color-text-warning-high);\n fill: var(--color-text-warning-high);\n }\n }\n }\n .vds__badge__pill--status-color-custom {\n background-color: var(--custom-badge-pill-background);\n &:focus {\n background-color: var(--custom-badge-pill-background);\n border-color: var(--custom-badge-pill-border-color);\n }\n .vds__badge__pill--value {\n color: var(--custom-badge-pill-content-color);\n }\n vds-icon {\n color: var(--custom-badge-pill-content-color);\n fill: var(--custom-badge-pill-content-color);\n }\n }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { BADGE_VARIANTS } from './vds-badge-pill.utils';\nimport { getIconSizeUpdated } from '../../utils/icon-attr.utils';\n\n@Component({\n tag: 'vds-badge-pill',\n styleUrl: 'vds-badge-pill.scss',\n shadow: true,\n})\nexport class VdsBadgePill {\n /** Sets the badge's size */\n @Prop() size: '2x-small' | 'extra-small' | 'small' | 'medium' | 'large' = 'medium';\n /** Sets the color of the badge, it provides special colors such as warning, danger, healthy, information, neutral\n * If you pass a color from out pallete it will consider as custom. The color will be applied as background color;\n * To fully customize please refer to props contentColor and borderFocusColor. */\n @Prop() statusColor: 'warning' | 'danger' | 'healthy' | 'information' | 'neutral' | Colors = 'neutral';\n /** Sets the aria label in badge */\n @Prop() setAriaLabel: string;\n /** Sets an icon inside the badge */\n @Prop() icon?: string;\n /** Sets the text value of the badge. */\n @Prop() value!: string;\n /** Sets the color of the text and icon. (Only works when passing a custom statusColor) */\n @Prop() contentColor: Colors;\n /** Sets the color of the border in focus. (Only works when passing a custom statusColor) */\n @Prop() borderFocusColor: Colors;\n /** Hides the native tooltip when set to true */\n @Prop() hideTitle: boolean = false;\n\n private isCustom: boolean = false;\n private customStyles;\n\n private getIconSizeUpdated = getIconSizeUpdated;\n\n componentWillRender(): void {\n this.setCustomBadge();\n }\n\n private setCustomBadge(): void {\n this.isCustom = !BADGE_VARIANTS.includes(this.statusColor);\n\n if (this.isCustom) {\n let styles = {};\n\n styles = {\n '--custom-badge-pill-background': this.statusColor ? `var(--${this.statusColor})` : undefined,\n '--custom-badge-pill-content-color': this.contentColor ? `var(--${this.contentColor})` : undefined,\n '--custom-badge-pill-border-color': this.borderFocusColor ? `var(--${this.borderFocusColor})` : undefined,\n };\n\n this.customStyles = styles;\n }\n }\n\n /** Sets the icon in the vds-badge-pills\n *\n * @returns HTMLStencilElement\n */\n getIcon(): HTMLStencilElement {\n return <vds-icon svgIcon={this.icon} size={this.getIconSizeUpdated(this.size)}></vds-icon>;\n }\n\n render(): HTMLStencilElement {\n return (\n <Host aria-label={this.setAriaLabel || this.value}>\n <button\n class={combineClasses(\n 'vds__badge__pill--container',\n this.size ? `vds__badge__pill--size-${this.size}` : '',\n this.statusColor && !this.isCustom ? `vds__badge__pill--status-color-${this.statusColor}` : 'vds__badge__pill--status-color-custom',\n )}\n style={this.customStyles}\n title={this.hideTitle ? undefined : this.setAriaLabel || this.value}\n aria-label={this.setAriaLabel || this.value}\n >\n <div class={'vds__badge__pill--content'}>\n {this.icon && this.getIcon()}\n {this.value && <span class={'vds__badge__pill--value'}>{this.value}</span>}\n </div>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

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

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

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

@@ -1 +0,0 @@

- {"file":"vds-basic-accordion.js","mappings":"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","names":["VdsBasicAccordion","__stencil_proxyCustomElement"],"sources":["src/components/accordion/vds-basic-accordion.scss?tag=vds-basic-accordion&encapsulation=shadow","src/components/accordion/vds-basic-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n --vds-accordion-background: var(--surface-medium);\n --vds-accordion-border: var(--color-border-low);\n --vds-accordion-text-header: var(--color-text-high);\n --vds-accordion-text-description: var(--color-text-medium);\n // hover\n --vds-accordion-hover-background: var(--color-interaction-black-lowest);\n // disabled\n --vds-accordion-disabled-background: var(--surface-medium);\n --vds-accordion-disabled-border: var(--vds-accordion-border);\n --vds-accordion-disabled-text-header: var(--color-text-disabled);\n --vds-accordion-disabled-text-description: var(--color-text-disabled);\n\n .vds-accordion__container {\n border-radius: var(--radius-medium);\n box-shadow: 0 0 0 var(--border-thickness-01) inset var(--vds-accordion-border);\n background: var(--vds-accordion-background);\n min-width: fit-content;\n\n .vds-accordion__header-container {\n display: flex;\n align-items: flex-start;\n align-self: stretch;\n box-sizing: border-box;\n height: 100%;\n cursor: pointer;\n &:hover {\n background: var(--vds-accordion-hover-background);\n }\n }\n .vds-accordion__body-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n flex: 1 0 0;\n background: var(--vds-accordion-background);\n border-bottom-right-radius: var(--radius-medium);\n border-bottom-left-radius: var(--radius-medium);\n box-shadow: 0 0 0 var(--border-thickness-01) inset var(--vds-accordion-border);\n clip-path: inset(var(--border-thickness-01));\n\n \n .vds-accordion__body {\n display: flex;\n padding: var(--spacing-05, 1rem) var(--spacing-00, 0rem);\n align-self: stretch;\n width: 100%;\n border-top: var(--border-thickness-01) solid var(--color-border-lowest);\n }\n }\n .vds-accordion__header {\n display: flex;\n flex-direction: column;\n align-items: left;\n flex: 1 0 0;\n .vds-accordion__header-text {\n color: var(--vds-accordion-text-header);\n }\n }\n &.vds-accordion__container--size-medium {\n box-sizing: border-box;\n height: var(--spacing-15);\n .vds-accordion__header-container {\n padding: var(--spacing-03) var(--spacing-04);\n gap: var(--spacing-02);\n }\n .vds-accordion__header {\n .vds-accordion__header-text {\n @include font-style(title, small);\n }\n .vds-accordion__header-description {\n color: var(--vds-accordion-text-description);\n @include font-style(body, medium);\n }\n }\n .vds-accordion__body-container {\n padding: var(--spacing-03) var(--spacing-04);\n }\n }\n &.vds-accordion__container--size-large {\n box-sizing: border-box;\n height: var(--spacing-19);\n .vds-accordion__header-container {\n padding: var(--spacing-04) var(--spacing-05);\n gap: var(--spacing-03);\n }\n .vds-accordion__header {\n .vds-accordion__header-text {\n @include font-style(title, medium);\n }\n .vds-accordion__header-description {\n color: var(--vds-accordion-text-description);\n @include font-style(body, large);\n }\n }\n .vds-accordion__body-container {\n padding: var(--spacing-04) var(--spacing-05);\n }\n }\n &.vds-accordion__container--disabled {\n cursor: auto;\n pointer-events: none;\n box-shadow: 0 0 0 var(--border-thickness-01) inset var(--vds-accordion-disabled-border);\n background: var(--vds-accordion-disabled-background);\n \n .vds-accordion__header {\n .vds-accordion__header-text {\n color: var(--vds-accordion-disabled-text-header);\n }\n .vds-accordion__header-description {\n color: var(--vds-accordion-disabled-text-description);\n }\n }\n }\n .vds-accordion__informative-icon {\n padding: var(--spacing-01);\n }\n }\n .vds-accordion__container--size-medium.vds-accordion__container--expanded,\n .vds-accordion__container--size-large.vds-accordion__container--expanded {\n height: auto;\n }\n}\n\n:host(.vds-accordion--disabled) {\n pointer-events: none;\n}\n\n","import { Component, Host, Method, h, Event, EventEmitter, Prop } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement, Watch } from '@stencil/core/internal';\nimport { getIconColor } from '../../utils/icon-attr.utils';\n\n@Component({\n tag: 'vds-basic-accordion',\n styleUrl: 'vds-basic-accordion.scss',\n shadow: true,\n})\nexport class VdsBasicAccordion {\n /** Sets the accordion's informative icon */\n @Prop({ mutable: true }) informativeIcon: string;\n /** Sets the accordion's size. */\n @Prop({ mutable: true }) size: \"medium\" | \"large\" = \"medium\";\n /** Toggles the accordion's content */\n @Prop({ mutable: true }) expanded: boolean = false;\n /** Sets the accordion in disabled state */\n @Prop() disabled: boolean = false;\n /** Sets the accordion aria-label */\n @Prop() setAriaLabel: string;\n /** Sets the accordion aria-level */\n @Prop() setAriaLevel: string;\n /** Sets informative icon to the left or right. */\n @Prop() markerAlignment: \"start\" | \"end\" = \"start\";\n /** Sets colors of the accordion.\n * border - ThemeColors\n * Background - ThemeColors.\n */\n @Prop() colors: { [key: string]: string } | string;\n\n /** Emits event when accordion gets opens */\n @Event() opened: EventEmitter<void>;\n /** Emits event when accordion gets closes */\n @Event() closed: EventEmitter<void>;\n\n /**\n * Expanded the accordion element.\n *\n * @returns {Promise<void>} A promise that resolves when the accordion is opened.\n */\n @Method()\n open(): Promise<void> {\n this.expanded = true;\n return Promise.resolve();\n }\n\n /**\n * Collapse the accordion element.\n *\n * @returns {Promise<void>} A promise that resolves when the accordion is opened.\n */\n @Method()\n close(): Promise<void> {\n this.expanded = false;\n return Promise.resolve();\n }\n\n /**\n * Emits values when expanded property changes.\n * When expanded is true, opened event gets emitted.\n * When expanded is false, closed event gets emitted.\n *\n * @returns void\n */\n @Watch(\"expanded\")\n emitValues(): void {\n if (this.expanded) {\n this.opened.emit();\n } else {\n this.closed.emit();\n }\n }\n\n /**\n * Handles click event over the accordion header.\n * Toggles expanded property in order to open/close accordion.\n * \n * evt - MouseEvent\n *\n * @returns void\n */\n handleClick(evt: Event): void {\n evt.stopImmediatePropagation();\n if (!this.disabled) {\n this.expanded = !this.expanded\n }\n }\n\n /**\n * Sets the custom colors for the accordion 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 * Background - ThemeColors.\n * Border - ThemeColors\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[\"Background\"]) {\n styles[\"--vds-accordion-background\"] = `var(--${colors[\"Background\"]})`;\n }\n \n if (colors && colors[\"Border\"]) {\n styles[\"--vds-accordion-border\"] = `var(--${colors[\"Border\"]})`;\n }\n \n return styles;\n }\n\n private renderMarker(): HTMLStencilElement {\n return (\n <vds-icon-button icon={`chevron-${this.expanded ? \"up\" : \"down\"}`} size={this.size === \"large\" ? \"medium\" : \"small\"} variant=\"secondary\" disabled={this.disabled}></vds-icon-button>\n );\n }\n\n private renderHeader(): HTMLStencilElement {\n return (\n <div\n class={`vds-accordion__header-container vds-accordion__marker-alignment-${this.markerAlignment}`}\n onClick={(evt: MouseEvent) => {\n this.handleClick(evt);\n }}\n >\n {this.markerAlignment === \"start\" && this.renderMarker()}\n <vds-icon class={\"vds-accordion__informative-icon\"} svgIcon={this.informativeIcon} size={this.size === \"large\" ? \"1.25rem\" : \"1rem\"} color={getIconColor(this.disabled)}></vds-icon>\n <div class={\"vds-accordion__header\"}>\n <div class={\"vds-accordion__header-text\"}>\n <slot name={\"header\"}></slot>\n </div>\n <div class={\"vds-accordion__header-description\"}>\n <slot name={\"description\"}></slot>\n </div>\n </div>\n {this.markerAlignment === \"end\" && this.renderMarker()}\n </div>\n );\n }\n\n private renderContent(): HTMLStencilElement {\n return (\n <div class=\"vds-accordion__body-container\">\n <div class={\"vds-accordion__body\"}>\n <slot name={\"body\"}></slot>\n </div>\n </div>\n );\n }\n\n render() {\n return (\n <Host \n class={this.disabled ? \"vds-accordion--disabled\" : \"\"}\n is-open={this.expanded}\n aria-label={this.setAriaLabel}\n aria-level={this.setAriaLevel}\n >\n <div \n class={combineClasses(\n \"vds-accordion__container\",\n `vds-accordion__container--size-${this.size}`,\n this.disabled ? \"vds-accordion__container--disabled\" : \"\",\n this.expanded ? \"vds-accordion__container--expanded\" : \"\"\n )}\n style={this.setColors()}\n >\n {this.renderHeader()}\n {this.expanded && this.renderContent()}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"vds-basic-autocomplete.js","mappings":"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","names":["VdsBasicAutocomplete","__stencil_proxyCustomElement"],"sources":["src/components/autocomplete/vds-basic-autocomplete.utils.ts","src/components/autocomplete/vds-basic-autocomplete.scss?tag=vds-basic-autocomplete&encapsulation=shadow","src/components/autocomplete/vds-basic-autocomplete.tsx"],"sourcesContent":["export const getFilteredOptions = (options: HTMLVdsAutocompleteItemElement[], value: string, validateCasing: boolean = false) => {\n try {\n return options.filter(item => {\n if (validateCasing) {\n return (item.textContent?.includes(value) || item.value?.includes(value) || item.label?.includes(value));\n }\n return findOptionByValue(item, value);\n });\n } catch (error) {\n console.warn(\"[getFilteredOptions]\", error);\n return [];\n }\n}\n\n/**\n * Checks if an option object matches the given search value.\n * @param {Object} option - The option object to be checked in a HTMLVdsAutocompleteItemElement\n * @param {string} searchValue - The value to search for within the option.\n * @returns {boolean} - \n * True if the searchValue is found within the option's `textContent`, `label`, or `value`.\n * False otherwise.\n */\nexport const findOptionByValue = (option: HTMLVdsAutocompleteItemElement, searchValue: string): boolean => {\n try {\n const lowerCaseSearchValue = searchValue?.toLowerCase() || \"\";\n return (\n option.textContent && option.textContent?.toLowerCase().includes(lowerCaseSearchValue) ||\n option.label && option.label?.toLowerCase().includes(lowerCaseSearchValue) ||\n option.value && option.value?.toLowerCase().includes(lowerCaseSearchValue)\n );\n }catch (error) {\n console.warn(\"[findOptionByValue]\", error);\n return false;\n }\n};\n\n/**\n * Checks if an option object matches the given search value exactly.\n * @param {Object} option - The option object to be checked in a HTMLVdsAutocompleteItemElement\n * @param {string} searchValue - The value to search for within the option.\n * @returns {boolean} - \n * True if the searchValue is exactly the same to one of the option's `textContent`, `label`, or `value`.\n * False otherwise.\n */\nexport const findOptionByExactValue = (option: HTMLVdsAutocompleteItemElement, searchValue: string): boolean => {\n try {\n const lowerCaseSearchValue = searchValue?.toLowerCase() || \"\";\n return (\n option.textContent && option.textContent?.toLowerCase() === lowerCaseSearchValue ||\n option.label && option.label?.toLowerCase() === lowerCaseSearchValue ||\n option.value && option.value?.toLowerCase() === lowerCaseSearchValue\n );\n }catch (error) {\n console.warn(\"[findOptionByValue]\", error);\n return false;\n }\n};\n\nexport interface SelectedValueChangedEventDetail {\n label: string;\n value: string;\n target: HTMLVdsAutocompleteItemElement;\n}",":host {\n display: block;\n \n --vds-basic-autocomplete-input-min-width-small: 5.75rem;\n --vds-basic-autocomplete-input-min-width: 7.5rem;\n --vds-basic-autocomplete-input-min-width-large: 9.25rem;\n\n .vds-basic-autocomplete__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n vds-basic-input {\n --vds-input-min-width-small: var(--vds-basic-autocomplete-input-min-width-small);\n --vds-input-min-width: var(--vds-basic-autocomplete-input-min-width);\n --vds-input-min-width-large: var(--vds-basic-autocomplete-input-min-width-large);\n }\n\n .vds-basic-autocomplete__content {\n display: none;\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n min-width: max-content;\n max-height: fit-content !important;\n border-radius: var(--radius-medium);\n background: var(--surface-medium);\n box-shadow: var(--elevation-shadow-2);\n box-sizing: border-box;\n border: 0.0625rem solid var(--color-border-lowest);\n margin-top: 0.25rem;\n z-index: var(--elevation-layer-5);\n\n &.no-shadow {\n box-shadow: none;\n border: none;\n\n .vds-basic-autocomplete__content__header {\n box-shadow: var(--elevation-shadow-2);\n }\n }\n\n &.has-scroll {\n padding-right: var(--spacing-01);\n }\n\n &.match-width {\n width: var(--trigger-width);\n min-width: var(--trigger-width);\n }\n\n .vds-basic-autocomplete__content-options {\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n border-radius: var(--radius-medium);\n\n &.scrollable {\n padding-right: var(--spacing-01);\n }\n\n &::-webkit-scrollbar {\n background-color: var(--surface-medium);\n width: 0.375rem;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: var(--color-background-neutral-press);\n border-radius: 1rem;\n }\n }\n }\n\n .vds-basic-autocomplete__primary-action,\n .vds-basic-autocomplete__secondary-action {\n display: inline-flex;\n align-items: center;\n line-height: 0;\n font-size: 0;\n }\n }\n\n .vds-floating-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-interaction-black-lower);\n opacity: 0.06;\n z-index: var(--elevation-layer-4);\n }\n\n .non-clickable {\n pointer-events: none;\n }\n}\n\n:host(.vds-basic-autocomplete--disabled) {\n pointer-events: none;\n}","import { Component, Host, Prop, Watch, h, Event, EventEmitter, Method, State, Element } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { toggleContainerDisplay, updateContainerWidth } from '../basic-dropdown/vds-basic-dropdown.utils';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { HTMLStencilElement, Listen } from '@stencil/core/internal';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { findOptionByExactValue, findOptionByValue, getFilteredOptions, SelectedValueChangedEventDetail } from './vds-basic-autocomplete.utils';\nimport { getIconSize, getActionIconButtonSize, getIconColor } from '../../utils/icon-attr.utils';\n\n@Component({\n tag: 'vds-basic-autocomplete',\n styleUrl: 'vds-basic-autocomplete.scss',\n shadow: true,\n})\nexport class VdsBasicAutocomplete {\n\n /** \n * Sets the internal input size.\n * If multiple property is true, This will only set the basic-input text value.\n * If multiple property is false and the value prop matches with an option, the option will be selected,\n * Otherwise text will be set in the basic-input.\n */\n @Prop({ mutable: true }) size: \"small\" | \"medium\" | \"large\" = \"medium\";\n /** Sets the internal input value */\n @Prop({ mutable: true, reflect: true }) value: string;\n /** Sets the selected options when multiple is activated */\n @Prop({ mutable: true, reflect: true }) multipleValues: Array<string> = [];\n /** Sets the selected dropdown value when dropdown is activated */\n @Prop() selectedDropdownValue = \"\";\n /** Sets the internal input placeholder. */\n @Prop({ mutable: true, reflect: true }) placeholder: string;\n /** Sets the internal input in disabled state. */\n @Prop({ mutable: true, reflect: true }) disabled: boolean;\n /** Sets the internal input in readonly state. */\n @Prop({ mutable: true, reflect: true }) isReadonly: boolean;\n /** Sets the internal input in error state. */\n @Prop({ mutable: true, reflect: true }) error: boolean;\n /** Toggles the required sign in the internal input */\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 /** Set the max height value for the floating container of the items */\n @Prop({ mutable: true }) maxHeight: string;\n /** Sets the width value for the floating container of the items to match the items list width */\n @Prop({ mutable: true }) matchWidth: boolean = true;\n /** Debounce time for key inputs before the search */\n @Prop() debounce: number;\n /** Allows user to define a search icon inside the input at its right (zoom by default) . */\n @Prop() actionIcon: string = \"zoom\";\n /** Sets the autocomplete clear button visibility. */\n @Prop() showClearButton: boolean = true;\n /** \n * Shows a dropdown chevron arrow that flips up/down when change state open/close.\n * Also enables the selectedDropdownValue prop to be able to select an option from dropdown\n * When multiple is true, this prop will be set to false.\n */\n @Prop() dropdown: boolean = false;\n /** Sets the autocomplete dropdown chevron icon visibility. */\n @Prop() showDropdownIcon: boolean = true;\n /** Enables a message when there's no match options. */\n @Prop() showEmptyMessage: boolean = false;\n /** Allow to set the text message in the 'emptyMessage' state. */\n @Prop() emptyMessage: string = \"No options\";\n /** \n * Allow multiple values to be selected.\n * Also enables the multipleValues prop to be able to select multiple options\n * When multiple is true, dropdown prop will be set to false.\n * When multiple is true, valueChanged will emit an array of strings\n */\n @Prop() multiple: boolean = false;\n /** \n * Toggles the floating container auto-positioning based on available window space. \n * False by default as it may cause positioning issues in some situations, use with caution \n */\n @Prop({mutable: true}) autoPosition: boolean = false;\n /** \n * Clear selection and input on clicking the close button.\n * Only works when multiple is true.\n */\n @Prop() clearSelection: boolean = false;\n /** Toggles the overlay element, allowing interaction only with this element when active */\n @Prop() backdrop: boolean = false;\n\n /** Emits event when floating element gets opens */\n @Event() opened: EventEmitter<void>;\n /** Emits event when floating element gets closes */\n @Event() closed: EventEmitter<void>;\n /** Emits event when an item is selected, this event contains the label of the selected item(s) */\n @Event() valueChanged: EventEmitter<string | string[]>;\n /** Emits an event when the clear button is clicked */\n @Event() cleared: EventEmitter<void>;\n /** Emits an event when the user click the actionIcon (the magnifying glass) */\n @Event() actionIconClick: EventEmitter<void>;\n /** Emits updated inputed value from the vds-basic-input similar to the input event */\n\t@Event() changeInput: EventEmitter<string>;\n /** Emits event when an item is selected, this event contains the value of the selected item(s) */\n\t@Event() selectedValueChanged: EventEmitter<SelectedValueChangedEventDetail>;\n\n @Element() hostEl: HTMLElement;\n\n autocompleteContent: HTMLDivElement;\n basicInput: HTMLVdsBasicInputElement;\n \n floatingCleanUp: () => void = () => {};\n @State() isOpened: boolean = false;\n @State() multiselectValues: Array<string>;\n options: HTMLVdsAutocompleteItemElement[] = [];\n autocompleteItemEmptyOption: HTMLVdsAutocompleteItemElement;\n debounceTimeTracker: NodeJS.Timeout = null;\n showUnfilteredOptions: boolean = false;\n private updateContainerWidth = updateContainerWidth;\n validateDropdownValue: boolean;\n\n componentWillLoad(): void {\n this.multiselectValues = this.multipleValues;\n this.validateDropdownValue = true;\n }\n\n componentWillRender(): void {\n if (this.multiple) {\n this.dropdown = false;\n }\n }\n \n componentDidLoad(): void {\n this.options = Array.from(this.hostEl.querySelectorAll(\"vds-autocomplete-item\"));\n this.setPreselection();\n }\n\n componentDidRender(): void {\n this.options = Array.from(this.hostEl.querySelectorAll(\"vds-autocomplete-item\"));\n updateFloatingBoxPosition(this.basicInput, this.autocompleteContent, null, 'bottom', false);\n this.updateContainerWidth(this.basicInput, this.matchWidth, this.autocompleteContent);\n this.setPreselection();\n }\n\n @Watch(\"multiselectValues\")\n setMulitpleValueHandler() {\n this.valueChanged.emit(this.multiselectValues);\n }\n\n @Watch(\"disabled\")\n setDisabledState() {\n this.close();\n }\n\n @Watch(\"selectedDropdownValue\")\n setDropdownValueValidation() {\n this.validateDropdownValue = true;\n }\n\n @Watch(\"isOpened\")\n async toggleAutocomplete(): Promise<void> {\n if (this.isOpened) {\n toggleContainerDisplay(this.autocompleteContent, true);\n this.opened.emit();\n this.floatingCleanUp = await updateFloatingBoxPosition(this.basicInput, this.autocompleteContent, null, \"bottom\", this.autoPosition);\n } else {\n toggleContainerDisplay(this.autocompleteContent, false);\n this.closed.emit();\n this.floatingCleanUp();\n }\n }\n\n /* Open the floating element(menu) of the autocomplete. */\n @Method()\n public async open(): Promise<void> {\n if (!this.isReadonly && !this.disabled) {\n setTimeout(() => {\n this.isOpened = true;\n });\n }\n }\n\n /* Close the floating element(menu) of the autocomplete. */\n @Method()\n public async close(): Promise<void> {\n this.isOpened = false;\n }\n\n /* Sets focus to the input element */\n @Method()\n public async setFocus(): Promise<void> {\n this.basicInput.setFocus();\n setTimeout(() => {\n this.open();\n });\n }\n\n /**\n * Sets the autocomplete input value to handle filtering.\n *\n * @returns {Promise<void>} \n */\n @Method()\n public async setValue(value: string): Promise<void> {\n this.value = value;\n }\n\n /**\n * Sets the autocomplete selection value to handle.\n * When multiple is true, sets the selected values from the list\n * When dropdown is true and multiple is false, sets a single selected value.\n * When dropdown is false and When multiple is false, set the input value\n *\n * @returns {Promise<void>} \n */\n @Method()\n public async setSelectionValue(value: string | string[]): Promise<void> {\n if (this.multiple && Array.isArray(value)) {\n this.multipleValues = this.multiselectValues = value;\n }\n if (typeof value === \"string\") {\n if (this.dropdown) {\n this.selectedDropdownValue = value;\n }\n }\n }\n\n /**\n * Return the autocomplete value.\n *\n * @returns {Promise<string>} A promise that resolves by returning the autocomplete value.\n */\n @Method()\n public async getValue(): Promise<string | string[]> {\n if (this.multiple) {\n return this.multipleValues;\n }\n if (this.dropdown) {\n return this.selectedDropdownValue;\n }\n return this.value;\n }\n\n /**\n * Clears the selected options and resets the value of the autocomplete.\n *\n * @returns {Promise<void>} A promise that resolves when the clearing operation is complete.\n */\n @Method()\n public async clear(): Promise<void> {\n this.value = '';\n if (this.dropdown) {\n this.clearOptions();\n }\n if (this.clearSelection && this.multiple) {\n this.multipleValues = this.multiselectValues = [];\n this.setOptionsMultiple();\n }\n this.cleared.emit();\n }\n\n @Listen(\"autocompleteClicked\")\n handleSelectOption(evt: CustomEvent<{value: string, selected: boolean}>): void {\n const selectedOption = this.options.find((option) => findOptionByExactValue(option, evt.detail.value));\n const isValidOption: boolean = selectedOption !== null && selectedOption !== undefined;\n \n if (isValidOption && this.multiple) {\n selectedOption.isSelected = evt.detail.selected;\n }\n\n this.handleValueAssignment(evt, selectedOption);\n\n if (isValidOption && this.dropdown) {\n this.setOptionsSingle(evt.detail.value);\n }\n }\n\n /* Close the autocomplete when click outside */\n @Listen('click', { target: 'window' })\n handleClickOut(evt: MouseEvent): void {\n evt.stopPropagation();\n const target = evt.target as HTMLElement;\n const isClickInside = this.hostEl.contains(target as Node);\n const isClickInsideParentAutocomplete = target.nodeName === \"VDS-AUTOCOMPLETE\" && target.shadowRoot && (evt.target as HTMLElement).shadowRoot.contains(this.hostEl);\n if (!isClickInside && !isClickInsideParentAutocomplete) {\n this.isOpened = false;\n }\n }\n\n @Listen('keyup', { target: 'window' })\n handleEscPress(evt: any) {\n if (this.isOpened && evt.code === \"Escape\") {\n this.close();\n this.basicInput.blur();\n }\n }\n\n handleMultiselection(selection: {value: string, selected: boolean}): void {\n if (selection.selected && !this.multipleValues.find(value => value.toLowerCase() === selection.value.toLowerCase())) {\n this.multipleValues.push(selection.value);\n } else {\n this.multipleValues = this.multipleValues.filter(value => value.toLowerCase() !== selection.value.toLowerCase());\n }\n this.multiselectValues = Array.from(this.multipleValues);\n this.basicInput.setFocus();\n }\n\n handleValueAssignment(evt: CustomEvent<{ value: string; selected: boolean; }>, selectedOption: HTMLVdsAutocompleteItemElement): void {\n if (this.multiple) {\n this.handleMultiselection(evt.detail)\n } else {\n this.value = evt.detail.value;\n this.setSelectionValue(evt.detail.value);\n this.valueChanged.emit(this.value);\n if (selectedOption)\n {\n this.selectedValueChanged.emit(\n {\n label: selectedOption.label,\n value: selectedOption.value,\n target: selectedOption\n }\n );\n }\n this.handleInputChange();\n this.close();\n }\n }\n\n handleChange(evt: CustomEvent<string>) {\n evt.stopPropagation();\n this.changeInput.emit(evt.detail);\n if (this.debounce !== undefined && this.debounce > 0) {\n this.handleDebounceValueChange(evt.detail);\n } else {\n this.value = evt.detail;\n }\n if (this.dropdown) {\n this.showUnfilteredOptions = false;\n }\n }\n\n handleInputChange(): void {\n const inputEvent = new InputEvent(\"input\");\n this.hostEl.dispatchEvent(inputEvent);\n }\n\n hasFocus(): void {\n this.open();\n if (this.hasValue() && this.dropdown) {\n this.showUnfilteredOptions = true;\n this.validateDropdownValue = false;\n }\n }\n\n lostFocus(): void {\n if (this.dropdown) {\n this.showUnfilteredOptions = false;\n this.validateDropdownValue = true;\n }\n }\n\n emitActionIcon(): void {\n this.actionIconClick.emit();\n }\n\n handleDebounceValueChange(newValue: string): void {\n\t\tif (this.debounceTimeTracker !== null) {\n\t\t\tclearTimeout(this.debounceTimeTracker);\n\t\t\tthis.debounceTimeTracker = null;\n\t\t}\n\t\tthis.debounceTimeTracker = setTimeout(() => {\n this.value = newValue;\n\t\t\tthis.debounceTimeTracker = null;\n\t\t}, this.debounce);\n\t}\n\n\n private hasValue(): boolean {\n return this.value !== null && this.value !== undefined && this.value !== \"undefined\" && this.value !== \"\";\n }\n\n /**\n * Sets autocomplete styles for JSX.style property\n *\n * @param maxHeight string\n * @returns { [key: string]: string }\n */\n private setAutoCompleteStyles = (maxHeight: string): { [key: string]: string } => {\n let styles = {};\n\n styles = {\n maxHeight: maxHeight ? maxHeight : undefined,\n }\n\n return styles;\n }\n\n setPreselection(): void {\n if (this.multiple) {\n this.setOptionsMultiple();\n }\n if (this.dropdown) {\n this.setDropdownOption();\n }\n }\n\n private setOptionsMultiple(): void {\n try {\n this.options.forEach(item => {\n item.hasCheckmark = true;\n const selection = this.multipleValues?.find(value => findOptionByExactValue(item, value));\n item.isSelected = !!selection;\n });\n } \n catch (error) {\n console.warn(\"[setOptionsMultiple]\", error);\n }\n }\n\n /**\n * Sets the selected value for a autocomplete type dropdown and updates the options accordingly.\n * @private\n * @param {string} selectedValue - The value of the selected option.\n */\n private setOptionsSingle(selectedValue: string): void {\n try {\n this.selectedDropdownValue = selectedValue;\n this.options.forEach(item => {\n item.hasCheckmark = false;\n item.isSelected = findOptionByExactValue(item, this.selectedDropdownValue);\n });\n } \n catch (error) {\n console.warn(\"[setOptionsSingle]\", error);\n }\n }\n\n private setDropdownOption(): void {\n try {\n const hasValidValue = this.options?.some(opt => findOptionByExactValue(opt, this.selectedDropdownValue));\n if (\n hasValidValue &&\n this.selectedDropdownValue !== undefined &&\n this.selectedDropdownValue !== \"undefined\" &&\n this.selectedDropdownValue !== \"\"\n ) {\n this.setOptionsSingle(this.selectedDropdownValue);\n\n if (this.validateDropdownValue) {\n const option = this.options?.find(opt => findOptionByExactValue(opt, this.selectedDropdownValue));\n this.value = option ? (option.label || option.value) : this.value;\n this.validateDropdownValue = false;\n }\n }\n } \n catch (error) {\n console.warn(\"[setOptionsMultiple]\", error);\n }\n }\n\n /**\n * Sets the all the options to unselected state\n * @private\n * @param {string} selectedValue - The value of the selected option.\n */\n private clearOptions(): void {\n try {\n this.selectedDropdownValue = null;\n this.options.forEach(item => {\n item.hasCheckmark = item.isSelected = false;\n });\n } \n catch (error) {\n console.warn(\"[clearOptions]\", error);\n }\n }\n\n private renderUnfilteredOptions(): HTMLStencilElement {\n return (\n <div \n class={combineClasses('vds-basic-autocomplete__content-options', this.maxHeight ? 'scrollable' : '')}\n style={this.setAutoCompleteStyles(this.maxHeight)}\n >\n <slot name={\"items\"}></slot>\n <slot></slot>\n </div>\n );\n }\n\n private renderItem(item: HTMLVdsAutocompleteItemElement): HTMLStencilElement {\n let isSelected = false;\n if (this.multiple) {\n isSelected = this.multipleValues?.some(value => findOptionByValue(item, value));\n }\n return (\n <vds-autocomplete-item isSelected={isSelected} hasCheckmark={this.multiple} {...cloneAttributes(item)} innerHTML={item.innerHTML}></vds-autocomplete-item>\n );\n }\n\n private renderFilteredOptions(): HTMLStencilElement {\n const value = this.hasValue() ? this.value : \"\";\n const filteredOptions = getFilteredOptions(this.options, value);\n if (filteredOptions.length === 0) {\n return this.showEmptyMessage && this.emptyMessage ? this.renderEmptyOption() : null;\n }\n \n return (\n <div\n class={combineClasses('vds-basic-autocomplete__content-options', this.maxHeight ? 'scrollable' : '')}\n style={this.setAutoCompleteStyles(this.maxHeight)}\n >\n {filteredOptions.map(item => this.renderItem(item))}\n </div>\n );\n }\n\n private renderEmptyOption(): HTMLStencilElement {\n if (!this.autocompleteItemEmptyOption) {\n this.autocompleteItemEmptyOption = document.createElement(\"vds-autocomplete-item\");\n this.autocompleteItemEmptyOption.classList.add(\"non-clickable\");\n this.autocompleteItemEmptyOption.value = \"\";\n this.autocompleteItemEmptyOption.setAttribute(\"value\", \"\");\n }\n\n this.autocompleteItemEmptyOption.setAttribute(\"size\", this.size);\n this.autocompleteItemEmptyOption.setAttribute(\"label\", this.emptyMessage);\n\n return this.renderItem(this.autocompleteItemEmptyOption);\n }\n\n private renderClearIcon(): HTMLStencilElement {\n const disabled = this.disabled || this.isReadonly;\n return (\n <vds-icon-button\n tabIndex={disabled ? -1 : undefined}\n disabled={disabled}\n variant=\"secondary\"\n size={getActionIconButtonSize(this.size)}\n icon={\"close\"}\n onClick={disabled ? undefined : () => { this.clear(); this.basicInput.setFocus();}}\n ></vds-icon-button>\n );\n }\n\n private renderActionIcon(): HTMLStencilElement {\n const disabled = this.disabled || this.isReadonly;\n if (this.dropdown && this.showDropdownIcon) {\n return (\n <vds-icon\n svgIcon={this.isOpened ? 'chevron-up' : 'chevron-down'}\n color={getIconColor(this.disabled, this.isReadonly)}\n size={getIconSize(this.size)}\n onClick={disabled ? undefined : () => this.isOpened ? this.close() : this.open()}\n ></vds-icon>\n );\n }\n if (this.actionIcon) {\n return (\n <vds-icon-button\n tabIndex={disabled ? -1 : undefined}\n disabled={disabled}\n variant=\"secondary\"\n size={getActionIconButtonSize(this.size)}\n icon={this.actionIcon}\n onClick={disabled ? undefined : () => this.emitActionIcon()}\n ></vds-icon-button>\n );\n }\n }\n\n private renderOptions(): HTMLStencilElement {\n if (this.dropdown && this.showUnfilteredOptions) {\n return this.renderUnfilteredOptions();\n }\n\n if (this.hasValue()) {\n return this.renderFilteredOptions();\n }\n\n return this.renderUnfilteredOptions();\n }\n\n render(): HTMLStencilElement {\n const filteredOptions = getFilteredOptions(this.options, this.value || \"\");\n return (\n <Host class={this.disabled ? \"vds-basic-autocomplete--disabled\" : \"\"} title={this.value}>\n <div class={combineClasses(\"vds-basic-autocomplete__container\")}>\n <vds-basic-input\n ref={(el) => {\n if (el) {\n this.basicInput = el; \n }\n }}\n type=\"text\"\n placeholder={this.placeholder}\n value={this.value}\n size={this.size}\n disabled={this.disabled}\n isReadonly={this.isReadonly}\n error={this.error}\n isRequired={this.isRequired}\n formatter={this.formatter}\n informativeIcon={this.informativeIcon}\n allowedStyles={this.allowedStyles}\n onChangeInput={(evt): void => this.handleChange(evt)}\n onFocus={(): void => this.hasFocus()}\n onBlur={(): void => this.lostFocus()}\n >\n {this.showClearButton && this.hasValue() && (\n <div class=\"vds-basic-autocomplete__secondary-action\" slot=\"secondaryActionIcon\">\n {this.renderClearIcon()}\n </div>\n )}\n {((this.dropdown && this.showDropdownIcon) || this.actionIcon) && (\n <div class=\"vds-basic-autocomplete__primary-action\" slot=\"primaryActionIcon\">\n {this.renderActionIcon()}\n </div>\n )}\n </vds-basic-input>\n {this.backdrop && this.isOpened ? <div class=\"vds-floating-backdrop\" onClick={this.close.bind(this)}></div> : ''}\n <div \n ref={(el): void => { if (el) this.autocompleteContent = el;}}\n class={\n combineClasses(\n \"vds-basic-autocomplete__content\",\n this.maxHeight ? \"has-scroll\" : \"\",\n (!this.emptyMessage || this.emptyMessage === \"\") && filteredOptions.length === 0 ? \"no-shadow\" : \"\",\n !this.showEmptyMessage && filteredOptions.length === 0 ? \"no-shadow\" : \"\",\n !this.value && this.options.length === 0 ? \"no-shadow\" : \"\"\n )}\n >\n <div class={\"vds-basic-autocomplete__content__header\"}>\n <slot name=\"header\"></slot>\n </div>\n {this.renderOptions()}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"vds-basic-combo-box.js","mappings":"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","names":["VdsBasicComboBox","__stencil_proxyCustomElement"],"sources":["src/components/vds-basic-combo-box/vds-basic-combo-box.scss?tag=vds-basic-combo-box&encapsulation=shadow","src/components/vds-basic-combo-box/vds-basic-combo-box.tsx"],"sourcesContent":["@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n display: block;\n .vds-combo-box__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-combo-box__informative-icon::part(svg-icon) {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.vds-combo-box__container--focus {\n border-color: var(--color-border-brand);\n }\n\n &.vds-combo-box__container--error {\n border-color: var(--color-border-danger);\n outline-color: var(--color-interaction-danger-medium);\n\n .vds-combo-box__input {\n color: var(--color-text-danger-medium);\n }\n }\n\n &.vds-combo-box__container--readonly {\n border-color: var(--color-border-low);\n outline: none;\n background-color: var(--color-interaction-black-lowest);\n\n .vds-combo-box__chip {\n pointer-events: none;\n }\n .vds-combo-box__input {\n color: var(--color-text-medium);\n }\n }\n\n &.vds-combo-box__container--disabled {\n border-color: var(--color-border-lowest);\n outline: none;\n background-color: var(--surface-medium);\n\n .vds-combo-box__input {\n color: var(--color-text-disabled);\n\n &::placeholder {\n color: var(--color-text-disabled);\n }\n }\n }\n\n &.vds-combo-box--size-small {\n gap: var(--spacing-01);\n padding: calc(var(--spacing-02) - 1px) calc(var(--spacing-03) - 1px);\n min-height: var(--spacing-07);\n .vds-combo-box__input-content {\n &.vds-combo-box__input-content--has-value {\n column-gap: var(--spacing-01);\n }\n row-gap: var(--spacing-02);\n .vds-combo-box__chip-container {\n height: var(--spacing-04);\n .vds-combo-box__chip {\n height: var(--spacing-05);\n transform: translateY(-5px);\n }\n }\n .vds-combo-box__input {\n @include font-style(body, small);\n }\n }\n }\n\n &.vds-combo-box--size-medium {\n gap: var(--spacing-02);\n padding: calc(var(--spacing-03) - 1px) calc(var(--spacing-04) - 1px);\n min-height: var(--spacing-10);\n\n .vds-combo-box__input-content {\n &.vds-combo-box__input-content--has-value {\n column-gap: var(--spacing-02);\n }\n row-gap: var(--spacing-03);\n .vds-combo-box__chip-container {\n height: var(--spacing-06);\n .vds-combo-box__chip {\n height: var(--spacing-07);\n transform: translateY(-2px);\n }\n }\n .vds-combo-box__input {\n @include font-style(body, medium);\n }\n }\n }\n\n &.vds-combo-box--size-large {\n gap: var(--spacing-03);\n padding: calc(var(--spacing-04) - 1px) calc(var(--spacing-05) - 1px);\n min-height: var(--spacing-13);\n .vds-combo-box__input-content {\n &.vds-combo-box__input-content--has-value {\n column-gap: var(--spacing-02);\n }\n row-gap: var(--spacing-03);\n .vds-combo-box__chip-container {\n height: var(--spacing-07);\n .vds-combo-box__chip {\n height: var(--spacing-08);\n transform: translateY(-2px);\n }\n }\n .vds-combo-box__input {\n @include font-style(body, large);\n }\n }\n }\n\n .vds-combo-box__input-content {\n align-items: center;\n color: inherit;\n display: flex;\n flex-wrap: wrap;\n flex: 1 1;\n }\n\n .vds-combo-box__input {\n display: inline-block;\n flex: 1 1;\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\n:host-context(.vds-combo-box--disabled) {\n pointer-events: none;\n}\n","import { Component, Host, Prop, h, Event, EventEmitter, Method, Element } from \"@stencil/core\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { HTMLStencilElement, State, Watch } from \"@stencil/core/internal\";\nimport { isValidIcon, setDirtyClass, getIconColor, toggleFocusClass } from \"../input/vds-basic-input.utils\";\nimport { cloneAttributes } from \"../../utils/clone-attributes\";\nimport { emitInputEvent } from \"../../utils/form\";\n\n@Component({\n tag: \"vds-basic-combo-box\",\n styleUrl: \"vds-basic-combo-box.scss\",\n shadow: true,\n})\nexport class VdsBasicComboBox {\n /** Sets the combobox size. */\n @Prop({ mutable: true }) size: \"medium\" | \"large\" | \"small\" = \"medium\";\n /** Sets the combobox value. */\n @Prop({ mutable: true, reflect: true }) value: string[] = [];\n /** Sets the combobox placeholder. */\n @Prop({ mutable: true, reflect: true }) placeholder: string;\n /** Sets the combobox in disabled state. */\n @Prop({ mutable: true, reflect: true }) disabled: boolean;\n /** Sets the combobox in readonly state. */\n @Prop({ mutable: true, reflect: true }) isReadonly: boolean;\n /** Sets the combobox in error state. */\n @Prop({ mutable: true, reflect: true }) error: boolean;\n /** Allows user to define a information icon inside the combobox at its left . */\n @Prop() informativeIcon: string;\n /** Sets the combobox clear button visibility. */\n @Prop() showClearButton: boolean = true;\n /** Allows user to define a search icon inside the input at its right (zoom by default) . */\n @Prop() actionIcon: string = \"zoom\";\n\n /** Emits event when the selected chips list change, this event contains the value of the selected chips */\n @Event() valueChanged: EventEmitter<string[]>;\n /** Emits an event when the clear button is clicked */\n @Event() cleared: EventEmitter<void>;\n /** Emits an event when the user click the actionIcon (the magnifying glass) */\n @Event() actionIconClick: EventEmitter<void>;\n /** Emits updated inputed value similar to the input event */\n @Event() changeInput: EventEmitter<string>;\n\n @State() internalValue: string = \"\";\n\n @Element() hostEl: HTMLElement;\n\n private inputContainerRef: HTMLDivElement;\n private inputEl: HTMLInputElement;\n\n @Watch(\"value\")\n valueChangedHandler(newValue: string[]): void {\n emitInputEvent(this.hostEl, newValue == null || newValue.length == 0 ? \"\" : newValue.join(\",\"));\n this.valueChanged.emit(newValue);\n }\n\n /* Sets focus to the input element */\n @Method()\n public async setFocus(): Promise<void> {\n return new Promise((resolve) => {\n this.inputEl.focus();\n resolve();\n });\n }\n\n /**\n * Sets the autocomplete input value to handle filtering.\n *\n * @returns {Promise<void>} \n */\n @Method()\n public async setValue(value: string[]): Promise<void> {\n this.value = value;\n return Promise.resolve();\n }\n\n /**\n * Return the autocomplete value.\n *\n * @returns {Promise<string>} A promise that resolves by returning the autocomplete value.\n */\n @Method()\n public async getValue(): Promise<string[]> {\n return Promise.resolve(this.value);\n }\n\n /**\n * Clears the selected options and resets the value of the autocomplete.\n *\n * @returns {Promise<void>} A promise that resolves when the clearing operation is complete.\n */\n @Method()\n public async clear(): Promise<void> {\n this.value = [];\n this.internalValue = \"\";\n this.cleared.emit();\n return Promise.resolve();\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-combo-box__informative-icon\" svgIcon={icon} size={size} color={getIconColor(inputState)}></vds-icon>);\n }\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\n this.internalValue = target.value;\n\n this.changeInput.emit(this.internalValue);\n this.hostEl.dispatchEvent(inputEvent);\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 private handleCloseChip(val: string): void {\n this.value = this.value.filter(item => item !== val);\n }\n\n private getSizeIconButton(): \"medium\" | \"large\" | \"small\" | \"extra-small\" {\n switch(this.size) {\n case \"small\": \n return \"extra-small\";\n case \"medium\": \n return \"small\";\n case \"large\": \n return \"medium\";\n default: \n return \"small\";\n }\n }\n\n private handleActionButton(): void {\n this.actionIconClick.emit();\n }\n\n getChipSelectedOptions() {\n if (this.value == null || this.value.length === 0) {\n return [];\n }\n\n return this.value.map((val: string) => (\n <div class=\"vds-combo-box__chip-container\">\n <vds-chip \n class={\"vds-combo-box__chip\"}\n value={val}\n size={this.size}\n disabled={this.disabled || this.isReadonly}\n close={true}\n removeOnClose={false}\n onAfterClosed={() => this.handleCloseChip(val)}>\n </vds-chip>\n </div>\n ));\n }\n\n render() {\n return (\n <Host class={this.disabled ? \"vds-combo-box--disabled\" : \"\"}>\n <div\n ref={(el): void => { if(el) this.inputContainerRef = el} }\n class={combineClasses(\n \"vds-combo-box__container\",\n `vds-combo-box--size-${this.size}`,\n this.error && \"vds-combo-box__container--error\",\n this.isReadonly && \"vds-combo-box__container--readonly\",\n this.disabled && \"vds-combo-box__container--disabled\"\n )}\n >\n {this.getInputIcon(this.informativeIcon)}\n <div class={combineClasses(\"vds-combo-box__input-content\", this.value?.length > 0 ? \"vds-combo-box__input-content--has-value\" : \"\")}>\n {this.getChipSelectedOptions()}\n <input\n ref={(el): void => { if(el) this.inputEl = el} }\n class={\"vds-combo-box__input\"}\n type={\"text\"}\n value={this.internalValue}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readOnly={this.isReadonly}\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 />\n </div>\n {this.showClearButton && (<vds-icon-button variant=\"secondary\" disabled={this.disabled || this.isReadonly} icon={\"close\"} size={this.getSizeIconButton()} onClick={() => this.clear()} />)}\n {this.actionIcon && (<vds-icon-button variant=\"secondary\" disabled={this.disabled || this.isReadonly} icon={this.actionIcon} size={this.getSizeIconButton()} onClick={() => this.handleActionButton()} />)}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"vds-basic-dropdown-multiselect.js","mappings":"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","names":["VdsBasicDropdownMultiselect","__stencil_proxyCustomElement"],"sources":["src/utils/array-utils.ts","src/components/dropdown-multiselect/vds-basic-dropdown-multiselect.scss?tag=vds-basic-dropdown-multiselect&encapsulation=shadow","src/components/dropdown-multiselect/vds-basic-dropdown-multiselect.tsx"],"sourcesContent":["/**\n * Compares two arrays for equality, taking into account their elements and order.\n *\n * @param {any[]} a The first array to compare.\n * @param {any[]} b The second array to compare.\n * @returns {boolean} True if the arrays are equal, false otherwise.\n *\n * **Comparison criteria:**\n * - **Reference equality:** If both arrays are the same reference, they are considered equal.\n * - **Null or undefined:** If either array is null or undefined, they are considered unequal.\n * - **Length:** If the arrays have different lengths, they are considered unequal.\n * - **Element equality:** If the arrays have the same length, each corresponding element is compared for equality using strict comparison (`===`).\n */\nexport const arrayIsEqual = (a: any[], b: any[]): boolean => {\n if (a === b) return true;\n if (a == null || b == null) return false;\n if (a.length !== b.length) return false;\n \n for (var i = 0; i < a.length; ++i) {\n if (a[i] !== b[i]) return false;\n }\n return true;\n}",":host {\n display: block;\n width: 100%;\n\n .vds-dropdown-multiselect__container {\n display: block;\n }\n .vds-dropdown-multiselect___trigger {\n box-sizing: border-box;\n display: flex;\n width: 100%;\n text-align: left;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-02);\n align-self: stretch;\n border-radius: var(--radius-medium);\n border: none;\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-low);\n background: var(--surface-medium);\n &:active,\n &:hover {\n cursor: pointer;\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-brand);\n }\n &:focus-visible {\n outline: 0.125rem solid var(--color-border-focus-2);\n outline-offset: 0.125rem;\n }\n &.vds-dropdown-multiselect___trigger--size-small {\n padding: var(--spacing-02) var(--spacing-03);\n height: var(--spacing-07);\n @include font-style(body, small);\n }\n &.vds-dropdown-multiselect___trigger--size-medium {\n padding: var(--spacing-03) var(--spacing-04);\n height: var(--spacing-10);\n @include font-style(body, medium);\n }\n &.vds-dropdown-multiselect___trigger--size-large {\n padding: var(--spacing-04) var(--spacing-05);\n height: var(--spacing-13);\n gap: var(--spacing-03);\n @include font-style(body, large);\n }\n &.vds-dropdown-multiselect___trigger--error {\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-danger);\n .vds-dropdown-multiselect__label--value {\n color: var(--color-text-danger-medium);\n }\n }\n &.vds-dropdown-multiselect___trigger--readonly {\n pointer-events: none;\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-low);\n background: var(--color-interaction-black-lowest);\n &:focus-visible {\n outline: none;\n }\n .vds-dropdown-multiselect__label--value {\n color: var(--color-text-medium);\n }\n }\n &.vds-dropdown-multiselect___trigger--disabled {\n pointer-events: none;\n color: var(--color-text-disabled);\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);\n background: var(--surface-medium);\n .vds-dropdown-multiselect__label--value {\n color: var(--color-text-disabled);\n }\n .vds-dropdown-multiselect__label--placeholder {\n color: var(--color-text-disabled);\n }\n }\n .vds-dropdown-multiselect__label {\n display: block;\n text-align: left;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .vds-dropdown-multiselect__label--value {\n color: var(--color-text-high);\n }\n .vds-dropdown-multiselect__label--placeholder {\n color: var(--color-text-medium);\n }\n .vds-dropdown-multiselect__trigger-icons {\n display: flex;\n align-items: center;\n gap: var(--spacing-02);\n }\n }\n .vds-dropdown-multiselect__content {\n display: none;\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n min-width: max-content;\n max-height: fit-content !important;\n border-radius: var(--radius-medium);\n background: var(--surface-medium);\n box-shadow: var(--elevation-shadow-2);\n box-sizing: border-box;\n border: 0.0625rem solid var(--color-border-lowest);\n z-index: var(--elevation-layer-5);\n &.no-shadow {\n box-shadow: none;\n border: none;\n }\n &.has-scroll {\n padding-right: var(--spacing-01);\n }\n &.match-width {\n width: var(--trigger-width);\n min-width: var(--trigger-width);\n }\n .vds-dropdown-multiselect__content-options {\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n border-radius: var(--radius-medium);\n &.scrollable {\n padding-right: var(--spacing-01);\n }\n &::-webkit-scrollbar {\n background-color: var(--surface-medium);\n width: 0.375rem;\n }\n &::-webkit-scrollbar-thumb {\n background-color: var(--color-background-neutral-press);\n border-radius: 1rem;\n }\n }\n }\n .vds-floating-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-interaction-black-lower);\n opacity: 0.06;\n z-index: var(--elevation-layer-4);\n }\n}\n\n:host-context(.vds-basic-dropdown-multiselect--disabled) {\n pointer-events: none;\n}\n","import { Component, Host, Method, Prop, h, Event, EventEmitter, Element } from \"@stencil/core\";\nimport { AttachInternals, HTMLStencilElement, Listen, State, Watch } from \"@stencil/core/internal\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { getIconSize, getIconColor, getActionIconButtonSize } from \"../../utils/icon-attr.utils\";\nimport { updateFloatingBoxPosition } from \"../../utils/floating-engine-utils\";\nimport { emitNativeInputEvent, getSelectedItemsText, getValidOptions, selectSelectedItems, setDropdownStyles, toggleContainerDisplay, unselectAllItems, unselectNonSelectedItems, updateContainerWidth } from \"../basic-dropdown/vds-basic-dropdown.utils\";\nimport { DropdownItemClickedEvent } from \"../dropdown-item/vds-dropdown-item-clicked-event\";\nimport { arrayIsEqual } from \"../../utils/array-utils\";\n\n@Component({\n tag: \"vds-basic-dropdown-multiselect\",\n styleUrl: \"vds-basic-dropdown-multiselect.scss\",\n shadow: true,\n formAssociated: true\n})\nexport class VdsBasicDropdownMultiselect {\n /** Sets the dropdown's size. */\n @Prop({ mutable: true }) size: \"small\" | \"medium\" | \"large\" = \"medium\";\n /** Sets the dropdown's value. */\n @Prop({ mutable: true }) value: string[] | string = [];\n /** Allows user to define a information icon to the left of the dropdown. */\n @Prop({ mutable: true }) informativeIcon: string;\n /** Sets the dropdown's placeholder. */\n @Prop({ mutable: true }) placeholder: string;\n /** Sets the dropdown in disabled state. */\n @Prop({ mutable: true, reflect: true }) disabled: boolean;\n /** Sets the dropdown in readonly state. */\n @Prop({ mutable: true, reflect: true }) isReadonly: boolean;\n /** Sets the dropdown in error state. */\n @Prop({ mutable: true, reflect: true }) error: boolean;\n /** Sets the dropdown's trigger event. */\n @Prop({ mutable: true }) event: \"click\" = \"click\";\n /** Sets the dropdown's value max items selected in plain text. */\n @Prop() displaySelectionLimit: number;\n /** Sets displaySelectionLimit text */\n @Prop() displaySelectionLimitText: string = \"Items selected\";\n /** Sets the dropdown's clear button visibility. */\n @Prop({ mutable: true }) showClearButton: boolean = true;\n /** Set the max height value for the floating container of the items */\n @Prop({ mutable: true }) maxHeight: string;\n /** Sets the width value for the floating container of the items to match the dropdown width */\n @Prop({ mutable: true }) matchWidth: boolean = false;\n /** Toggles the floating container auto-positioning based on available window space. \n * False by default as it may cause positioning issues in some situations, use with caution \n */\n @Prop({mutable: true}) autoPosition: boolean = false;\n /** Toggles the overlay element, allowing interaction only with this element when active */\n @Prop() backdrop: boolean = false;\n\n /** Emits event when floating element gets opens */\n @Event() opened: EventEmitter<void>;\n /** Emits event when floating element gets closes */\n @Event() closed: EventEmitter<void>;\n /** Emits event when an item is selected, this event contains the value of the selected item */\n @Event() valueChanged: EventEmitter<string[]>;\n /** Emits an event when the clear button is clicked */\n @Event() cleared: EventEmitter<boolean>;\n\n @State() isOpened: boolean = false;\n\n @Element() hostEl: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n\n private dropdownTrigger: HTMLButtonElement;\n private dropdownContent: HTMLDivElement;\n private options: HTMLVdsDropdownItemElement[] = [];\n private observer: MutationObserver;\n\n private floatingCleanUp: () => void;\n\n componentDidLoad(): void {\n this.setValueHandler(this.value);\n selectSelectedItems(this.dropdownContent, this.value);\n this.dropdownTrigger?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n this.dropdownContent?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n this.setListenerForChildren();\n }\n\n disconnectedCallback() {\n this.dropdownTrigger.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n this.dropdownContent.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n window.removeEventListener('click', this.handleClickOut.bind(this));\n this.observer?.disconnect();\n }\n private setListenerForChildren(): void {\n const config = {\n childList: true,\n subtree: true\n };\n this.observer = new MutationObserver(() => {\n this.options = Array.from(this.hostEl.querySelectorAll(\"vds-dropdown-item\"));\n });\n this.observer.observe(this.hostEl, config);\n }\n\n // Sets the value prop validating whether the newValue is string or array.\n @Watch(\"value\")\n setValueHandler(newValue: string[] | string) {\n if (!newValue) {\n this.value = [];\n return;\n }\n if (typeof newValue === \"string\") {\n this.value = getValidOptions(this.dropdownContent, newValue.split(\",\"));\n }\n if (Array.isArray(newValue)) {\n const uniqueValues = [...new Set(newValue)];\n const selectedOptions = getValidOptions(this.dropdownContent, uniqueValues);\n this.value = arrayIsEqual(this.value as string[], selectedOptions) ? this.value : selectedOptions;\n }\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue((this.value as string[]).join(\",\"));\n }\n\n unselectNonSelectedItems(this.dropdownContent, this.value);\n selectSelectedItems(this.dropdownContent, this.value);\n\n if (this.value && this.value.length === 0) {\n unselectAllItems(this.dropdownContent);\n }\n }\n\n componentDidRender() {\n this.options = Array.from(this.hostEl.querySelectorAll(\"vds-dropdown-item\"));\n updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, 'bottom', false);\n updateContainerWidth(this.dropdownTrigger, this.matchWidth, this.dropdownContent);\n }\n\n @Watch(\"isOpened\")\n async toggleDropdown(): Promise<void> {\n if (this.isOpened) {\n toggleContainerDisplay(this.dropdownContent, true);\n this.opened.emit();\n this.floatingCleanUp = await updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, \"bottom\", this.autoPosition);\n } else {\n toggleContainerDisplay(this.dropdownContent, false);\n this.closed.emit();\n this.floatingCleanUp();\n }\n }\n\n /* Open the floating element(menu) of the Dropdown. */\n @Method()\n public async open(): Promise<void> {\n this.isOpened = true;\n }\n\n /* Close the floating element(menu) of the Dropdown. */\n @Method()\n public async close(): Promise<void> {\n this.isOpened = false;\n }\n \n /**\n * Clears the selected options and resets the value of the dropdown.\n *\n * @returns {Promise<void>} A promise that resolves when the clearing operation is complete.\n */\n @Method()\n public async clear(): Promise<void> {\n this.value = [];\n unselectAllItems(this.dropdownContent);\n this.cleared.emit(true);\n }\n\n /**\n * Gets the target that will manage the menu\n * returns a promise with the target HTMLElement.\n * \n * @returns {Promise<HTMLElement>} A promise that resolves with the target html element.\n */\n @Method()\n public async getTarget(): Promise<HTMLElement | null> {\n return this.dropdownTrigger;\n }\n /**\n * Gets the selected value of the dropdown\n * returns a promise with the value.\n * \n * @returns {Promise<string[]>} A promise that resolves with the value as string[].\n */\n @Method()\n public async getValue(): Promise<string[]> {\n return this.value as string[];\n }\n \n /**\n * Sets the selected value(s) for the dropdown.\n *\n * @param {string[] | string} value The new value or array of values to select.\n * @returns {Promise<void>} A promise that resolves when the value is set.\n */\n @Method()\n public async setValue(value: string[] | string): Promise<void> {\n this.setValueHandler(value);\n }\n\n /* Close the floating element when click outside */\n @Listen('click', { target: 'window' })\n private handleClickOut(evt: MouseEvent): void {\n evt.stopPropagation();\n const target = evt.target as HTMLElement;\n const isClickInside = this.hostEl.contains(target as Node);\n const isClickInsideParentDropdown = target.nodeName === \"VDS-DROPDOWN-MULTISELECT\" && target.shadowRoot && (evt.target as HTMLElement).shadowRoot.contains(this.hostEl);\n if (!isClickInside && !isClickInsideParentDropdown) {\n this.close();\n }\n }\n\n /**\n * Listen when Dropdown Item element is clicked to close Dropdown Items window, set the value and emit the changes.\n *\n * @param {CustomEvent<DropdownItemClickedEvent>} event The dropdown item clicked event.\n */\n @Listen(\"dropdownItemClicked\")\n handleDropdownSelection(event: CustomEvent<DropdownItemClickedEvent>): void {\n const item = event.target as HTMLVdsDropdownItemElement;\n const value = event.detail.value;\n item.isSelected = !item.isSelected;\n if (item.isSelected) {\n this.value = [...this.value, value];\n } else{\n this.value = (this.value as string[]).filter(v => v !== value)\n }\n \n this.valueChanged.emit(this.value);\n emitNativeInputEvent(this.hostEl);\n }\n\n /* Open the floating element with click on the trigger element */\n private handleClick(evt: Event): void {\n evt.stopImmediatePropagation();\n if (this.event === \"click\" && !this.disabled && !this.isReadonly) {\n this.isOpened = !this.isOpened\n }\n }\n\n /* Close the floating element with keydown on the trigger element */\n private handleFloatingKeydown(event: KeyboardEvent): void {\n event.stopImmediatePropagation();\n if (event.key === 'Escape' || event.key === 'Esc') {\n this.close();\n }\n }\n\n private clearIconClick(evt: Event): void {\n evt.stopImmediatePropagation();\n this.clear();\n this.close();\n }\n\n private renderLabelValue(): HTMLStencilElement {\n const selectedValue = this.getTextValue();\n return <span class={combineClasses(\n \"vds-dropdown-multiselect__label\",\n `vds-dropdown-multiselect__label--${this.hasValue() ? \"value\" : \"placeholder\"}`)}\n >{selectedValue}</span>\n }\n\n private getTextValue(): string {\n if (this.displaySelectionLimit > 0 && this.value.length > this.displaySelectionLimit) {\n return `${this.value.length} ${this.displaySelectionLimitText}`;\n }\n\n return this.hasValue() ? getSelectedItemsText(this.dropdownContent, this.value as string[]).join(\", \") : this.placeholder;\n }\n\n private getIconColor() {\n return getIconColor(this.disabled, this.isReadonly);\n }\n \n private renderInformativeIcon(): HTMLStencilElement {\n return <vds-icon svgIcon={this.informativeIcon} color={this.getIconColor()} size={getIconSize(this.size)}></vds-icon>\n }\n\n private renderClearIcon(): HTMLStencilElement {\n return (\n <vds-icon-button\n icon=\"close\"\n variant=\"secondary\"\n size={getActionIconButtonSize(this.size)}\n onClick={evt => {\n this.clearIconClick(evt);\n }}\n disabled={this.disabled || this.isReadonly}\n setAriaLabel=\"clear\"\n ></vds-icon-button>\n );\n }\n\n private renderDropdownIcon(): HTMLStencilElement {\n return <vds-icon svgIcon={this.isOpened ? 'chevron-up' : 'chevron-down'} color={this.getIconColor()} size={getIconSize(this.size)}></vds-icon>;\n }\n\n private hasValue(): boolean {\n return Array.isArray(this.value) && this.value && this.value.length > 0;\n }\n\n render(): HTMLStencilElement {\n return (\n <Host class={combineClasses(this.disabled ? \"vds-basic-dropdown-multiselect--disabled\" : \"\")} title={this.getTextValue()}>\n <div class={\"vds-dropdown-multiselect__container\"}>\n <button\n disabled={this.disabled}\n ref={(el): void => {\n if (el) this.dropdownTrigger = el;\n }}\n class={combineClasses(\n \"vds-dropdown-multiselect___trigger\",\n `vds-dropdown-multiselect___trigger--size-${this.size}`,\n this.disabled ? \"vds-dropdown-multiselect___trigger--disabled\" : \"\",\n this.isReadonly ? \"vds-dropdown-multiselect___trigger--readonly\" : \"\",\n this.error ? \"vds-dropdown-multiselect___trigger--error\" : \"\" \n )}\n onClick={(evt: MouseEvent) => {\n this.handleClick(evt);\n }}\n >\n {this.informativeIcon && this.renderInformativeIcon()}\n {this.renderLabelValue()}\n <div class=\"vds-dropdown-multiselect__trigger-icons\">\n {this.hasValue() && this.showClearButton && this.renderClearIcon()}\n {this.renderDropdownIcon()}\n </div>\n </button>\n {this.backdrop && this.isOpened ? <div class=\"vds-floating-backdrop\" onClick={this.close.bind(this)}></div> : ''}\n <div\n ref={(el): void => {\n if (el) this.dropdownContent = el;\n }}\n class={combineClasses(\n \"vds-dropdown-multiselect__content\",\n this.maxHeight ? \"has-scroll\" : \"\",\n this.options.length === 0 ? \"no-shadow\" : \"\"\n )}\n >\n <div \n class={combineClasses(\n 'vds-dropdown-multiselect__content-options', \n (this.maxHeight ? 'scrollable' : '')\n )}\n style={setDropdownStyles(this.maxHeight)}>\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"vds-basic-dropdown.js","mappings":"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","names":["VdsBasicDropdown","__stencil_proxyCustomElement"],"sources":["src/components/basic-dropdown/vds-basic-dropdown.scss?tag=vds-basic-dropdown&encapsulation=shadow","src/components/basic-dropdown/vds-basic-dropdown.tsx"],"sourcesContent":["@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n display: block;\n width: 100%;\n .vds__dropdown--trigger {\n box-sizing: border-box;\n display: inline-flex;\n width: 100%;\n text-align: left;\n align-items: center;\n justify-content: space-between;\n gap: 0.25rem;\n align-self: stretch;\n border-radius: var(--radius-medium);\n border: none;\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-low);\n background: var(--surface-medium);\n &:active,\n &:hover {\n cursor: pointer;\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-brand);\n }\n &:focus-visible {\n outline: 0.125rem solid var(--color-border-focus-2);\n outline-offset: 0.125rem;\n }\n &.vds__dropdown--trigger--size-small {\n padding: var(--spacing-02) var(--spacing-03);\n height: var(--spacing-07);\n }\n &.vds__dropdown--trigger--size-medium {\n padding: var(--spacing-03) var(--spacing-04);\n height: var(--spacing-10);\n }\n &.vds__dropdown--trigger--size-large {\n padding: var(--spacing-04) var(--spacing-05);\n height: var(--spacing-13);\n }\n &.vds__dropdown--trigger-error {\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-danger);\n .vds__dropdown--value-label {\n color: var(--color-text-danger-medium);\n }\n }\n &.vds__dropdown--trigger--readonly {\n pointer-events: none;\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-low);\n background: var(--color-interaction-black-lowest);\n &:focus-visible {\n outline: none;\n }\n .vds__dropdown--value-label {\n color: var(--color-text-medium);\n }\n }\n &.vds__dropdown--trigger-disabled {\n pointer-events: none;\n color: var(--color-text-disabled);\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);\n background: var(--surface-medium);\n .vds__dropdown--value {\n color: var(--color-text-disabled);\n }\n }\n }\n .vds__dropdown--value {\n padding-right: var(--spacing-02);\n font-feature-settings:\n 'clig' off,\n 'liga' off;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .vds__dropdown--value-small {\n @include font-style(body, small);\n }\n .vds__dropdown--value-medium {\n @include font-style(body, medium);\n }\n .vds__dropdown--value-large {\n @include font-style(body, large);\n }\n .vds__dropdown--value-label {\n color: var(--color-text-high);\n }\n .vds__dropdown--value-placeholder {\n color: var(--color-text-medium);\n }\n .vds__dropdown--container {\n display: none;\n width: fit-content;\n min-width: max-content;\n max-height: fit-content !important;\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n border-radius: var(--radius-medium);\n background: var(--surface-medium);\n z-index: var(--elevation-layer-5);\n box-shadow: var(--elevation-shadow-2);\n box-sizing: border-box;\n border: 0.0625rem solid var(--color-border-lowest);\n &.no-shadow {\n box-shadow: none;\n border: none;\n }\n &.has-scroll {\n padding-right: var(--spacing-01);\n }\n &.match-width {\n width: var(--trigger-width);\n min-width: var(--trigger-width);\n }\n }\n .vds-dropdown__content {\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n border-radius: var(--radius-medium);\n &.scrollable {\n padding-right: var(--spacing-01);\n }\n &::-webkit-scrollbar {\n background-color: var(--surface-medium);\n width: 0.375rem;\n }\n &::-webkit-scrollbar-thumb {\n background-color: var(--color-background-neutral-press);\n border-radius: 1rem;\n }\n }\n .vds__dropdown--left-content {\n display: inline-flex;\n column-gap: var(--spacing-02);\n align-items: center;\n overflow: hidden;\n .vds-dropdown__informative-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n .vds__dropdown--trigger--size-large .vds__dropdown--left-content {\n column-gap: var(--spacing-03);\n }\n .vds__dropdown--right-actions {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-02);\n }\n .vds-basic-dropdown__container {\n display: block;\n }\n .vds-floating-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-interaction-black-lower);\n opacity: 0.06;\n z-index: var(--elevation-layer-4);\n }\n}\n\n:host-context(.vds-basic-dropdown--disabled) {\n pointer-events: none;\n}\n","import { Component, Host, Prop, h, Method, Listen, Element, Event, EventEmitter, State, Watch, AttachInternals, forceUpdate } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { DropdownItemClickedEvent } from '../dropdown-item/vds-dropdown-item-clicked-event';\nimport { getIconSize, getIconColor, getActionIconButtonSize } from '../../utils/icon-attr.utils';\nimport {\n getSelectedLabel,\n scrollToSelectedValue,\n selectSelectedItems,\n setDropdownStyles,\n toggleContainerDisplay,\n unselectAllItems,\n unselectNonSelectedItems,\n updateContainerWidth,\n} from './vds-basic-dropdown.utils';\nimport { emitInputEvent } from '../../utils/form';\n\n@Component({\n tag: 'vds-basic-dropdown',\n styleUrl: 'vds-basic-dropdown.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class VdsBasicDropdown {\n @Element() hostEl: HTMLElement;\n /** Sets the dropdown's size. */\n @Prop({ mutable: true }) size: 'small' | 'medium' | 'large' = 'medium';\n /** Sets the dropdown's value. */\n @Prop({ mutable: true, reflect: true }) value: string;\n /** Allows user to define a information icon to the left of the dropdown. */\n @Prop({ mutable: true }) informativeIcon: string;\n /** Allows dropdown-item informativeIcon reflect dynamically as informativeIcon of the dropdown. */\n @Prop({ mutable: true }) dynamicInformativeIcon: boolean = false;\n /** Sets the dropdown's placeholder. */\n @Prop({ mutable: true }) placeholder: string;\n /** Sets the dropdown in disabled state. */\n @Prop({ mutable: true }) disabled: boolean = false;\n /** Sets the dropdown in readonly state. */\n @Prop({ mutable: true }) isReadonly: boolean = false;\n /** Sets the dropdown in error state. */\n @Prop({ mutable: true, reflect: true }) error: boolean;\n /** Sets the dropdown's trigger event. */\n @Prop({ mutable: true }) event: 'click' | 'hover' = 'click';\n /** Sets the dropdown's clear button visibility. */\n @Prop({ mutable: true }) showClearButton: boolean = true;\n /** Set the max height value for the floating container of the items */\n @Prop({ mutable: true }) maxHeight: string;\n /** Sets the width value for the floating container of the items to match the dropdown width */\n @Prop({ mutable: true }) matchWidth: boolean = false;\n /**\n * Toggles the floating container auto-positioning based on available window space.\n * False by default as it may cause positioning issues in some situations, use with caution\n */\n @Prop({ mutable: true }) autoPosition: boolean = false;\n /** Toggles the overlay element, allowing interaction only with this element when active */\n @Prop() backdrop: boolean = false;\n\n /** Emits event when floating element gets opens */\n @Event() opened: EventEmitter<void>;\n /** Emits event when floating element gets closes */\n @Event() closed: EventEmitter<void>;\n /** Emits event when an item is selected, this event contains the value of the selected item */\n @Event() valueChanged: EventEmitter<string>;\n /** Emits an event when the clear button is clicked */\n @Event() cleared: EventEmitter<boolean>;\n\n /** Dropdown's status. */\n @State() dropdownOpened: boolean = false;\n /** Dropdown's label of the current value. */\n @State() private valueLabel: string = undefined;\n\n @AttachInternals() internals: ElementInternals;\n\n private actionElementRef: HTMLButtonElement;\n private dropdownContentElementRef: HTMLDivElement;\n private defaultInformativeIcon: string;\n private options: HTMLVdsDropdownItemElement[] = [];\n\n private floatingCleanUp: () => void;\n observer: any;\n\n @Watch('dropdownOpened')\n async emitValue(): Promise<void> {\n if (this.dropdownOpened) {\n this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.dropdownContentElementRef, null, 'bottom', this.autoPosition);\n toggleContainerDisplay(this.dropdownContentElementRef, true);\n if (this.value) {\n scrollToSelectedValue(this.dropdownContentElementRef, this.value);\n }\n this.opened.emit();\n } else {\n toggleContainerDisplay(this.dropdownContentElementRef, false);\n this.floatingCleanUp();\n this.closed.emit();\n }\n }\n\n @Watch('value')\n setValueHandler(): void {\n emitInputEvent(this.hostEl, this.value);\n unselectNonSelectedItems(this.dropdownContentElementRef, this.value);\n selectSelectedItems(this.dropdownContentElementRef, this.value);\n this.defineValue();\n this.setFormValue();\n this.valueLabel = getSelectedLabel(this.dropdownContentElementRef, this.value);\n }\n\n private setFormValue(): void {\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.value);\n }\n }\n\n /* Close the floating element when click outside */\n @Listen('click', { target: 'window' })\n private handleClickOut(evt: MouseEvent): void {\n evt.stopPropagation();\n const isClickInside = this.hostEl.contains(evt.target as Node);\n if (!isClickInside) {\n this.close();\n }\n }\n\n /* Close the floating element with keydown on the trigger element */\n private handleFloatingKeydown(event: KeyboardEvent): void {\n event.stopImmediatePropagation();\n if (event.key === 'Escape' || event.key === 'Esc') {\n this.close();\n }\n }\n\n /* Open the floating element with click on the trigger element */\n private handleClick(evt: Event): void {\n evt.stopImmediatePropagation();\n if (this.event === 'click') {\n const clickedElement = evt.target as HTMLElement;\n if (clickedElement && !this.disabled && !this.isReadonly) {\n this.dropdownOpened = !this.dropdownOpened;\n }\n }\n }\n\n /* Clear selected value from the Dropdown */\n private clearValue(evt: Event): void {\n evt.stopImmediatePropagation();\n this.clear();\n this.close();\n }\n\n /* Listen when Dropdown Item element is clicked to close Dropdown Items window */\n @Listen('dropdownItemClicked')\n private handleDropdownItemClicked(event: CustomEvent<DropdownItemClickedEvent>): void {\n this.handleSelection(event);\n this.valueChanged.emit(this.value);\n const inputEvent = new InputEvent(\"input\");\n this.hostEl.dispatchEvent(inputEvent);\n this.dynamicInformativeIcon ? (this.informativeIcon = event.detail.icon) : null;\n this.close();\n }\n\n /* Checks if the item is already selected and if so clears the selection, otherwise sets the value */\n private handleSelection(event: CustomEvent<DropdownItemClickedEvent>): void {\n this.value = event.detail.value;\n this.valueLabel = event.detail.label;\n }\n\n /* Open the floating element(menu) of the Dropdown. */\n @Method()\n public async open(): Promise<void> {\n this.dropdownOpened = true;\n }\n\n /* Close the floating element(menu) of the Dropdown. */\n @Method()\n public async close(): Promise<void> {\n this.dropdownOpened = false;\n }\n\n /* Clear the selected value from the Dropdown. */\n @Method()\n public async clear(): Promise<void> {\n this.value = null;\n this.valueLabel = null;\n this.valueChanged.emit(this.value);\n this.dynamicInformativeIcon ? (this.informativeIcon = this.defaultInformativeIcon) : null;\n unselectAllItems(this.dropdownContentElementRef);\n this.cleared.emit(true);\n }\n\n /**\n * Gets the target that will manage the menu\n * returns a promise with the target HTMLElement.\n */\n @Method()\n public async getTarget(): Promise<HTMLElement | null> {\n return document.querySelector('.vds__dropdown--trigger') as HTMLElement;\n }\n\n /**\n * Gets the selected value of the dropdown\n * returns a promise with the value.\n */\n @Method()\n public async getValue(): Promise<String | null> {\n return this.value;\n }\n\n /**\n * Set the value of the dropdown\n */\n @Method()\n public async setValue(value: string): Promise<void> {\n this.clear();\n this.value = value;\n }\n\n private handleHover(event: Event): void {\n const hoveredElement = event.target as HTMLElement;\n if (this.event === 'hover' && hoveredElement) {\n this.dropdownOpened = true;\n }\n }\n private handleHoverOut(event: Event): void {\n const hoveredElement = event.target as HTMLElement;\n if (this.event === 'hover' && hoveredElement) {\n this.close();\n }\n }\n\n private setPredefinedItem() {\n const slotElement = this.dropdownContentElementRef?.querySelector('slot');\n const items = typeof slotElement?.assignedElements === 'function' && slotElement?.assignedElements();\n let preselectedItem = Array.from(items || []).filter(item => item.tagName.toLowerCase() === 'vds-dropdown-item' && item.getAttribute('value') === this.value)[0];\n if (preselectedItem) {\n preselectedItem.setAttribute('is-selected', 'true');\n preselectedItem.setAttribute('is-active', 'true');\n this.valueLabel = preselectedItem.getAttribute('label');\n }\n }\n\n private findAndSetPredefinedItem() {\n let getPreselectedItem = undefined;\n const slotElement = this.dropdownContentElementRef?.querySelector('slot');\n if (slotElement && typeof slotElement.assignedElements === 'function' && slotElement.assignedElements().length > 0) {\n getPreselectedItem = Array.from(slotElement.assignedElements()).find(\n item =>\n item.tagName.toLowerCase() === 'vds-dropdown-item' &&\n item.hasAttribute('is-selected') &&\n item.getAttribute('is-selected') === 'true' &&\n item.hasAttribute('is-active') &&\n item.getAttribute('is-active') === 'true',\n );\n }\n if (getPreselectedItem !== undefined) {\n this.value = getPreselectedItem.getAttribute('value');\n this.valueLabel = getPreselectedItem.getAttribute('label');\n }\n }\n\n private defineValue() {\n if (this.value && !this.valueLabel) {\n this.setPredefinedItem();\n }\n if (this.value) {\n this.findAndSetPredefinedItem();\n }\n }\n\n componentWillLoad() {\n if (this.dynamicInformativeIcon && this.defaultInformativeIcon === undefined) {\n this.defaultInformativeIcon = this.informativeIcon;\n }\n }\n\n componentDidRender() {\n this.options = Array.from(this.hostEl.querySelectorAll('vds-dropdown-item'));\n updateFloatingBoxPosition(this.actionElementRef, this.dropdownContentElementRef, null, 'bottom', false);\n updateContainerWidth(this.actionElementRef, this.matchWidth, this.dropdownContentElementRef);\n }\n\n componentDidLoad() {\n if (this.event === 'click') {\n this.actionElementRef.addEventListener('click', this.handleClick.bind(this));\n } else if (this.event === 'hover') {\n this.actionElementRef.addEventListener('mouseenter', this.handleHover.bind(this));\n this.dropdownContentElementRef.addEventListener('mouseleave', this.handleHoverOut.bind(this));\n }\n this.actionElementRef?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n this.dropdownContentElementRef?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n if (!this.dropdownContentElementRef) {\n this.dropdownContentElementRef = this.hostEl.shadowRoot.querySelector('.vds__dropdown--container');\n }\n if (this.value) {\n this.setPredefinedItem();\n } else {\n this.findAndSetPredefinedItem();\n }\n this.setFormValue();\n this.setListenerForChildren();\n }\n\n disconnectedCallback() {\n window.removeEventListener('click', this.handleClickOut.bind(this));\n if (this.event === 'click') {\n this.actionElementRef.removeEventListener('click', this.handleClick.bind(this));\n } else if (this.event === 'hover') {\n this.actionElementRef.removeEventListener('mouseenter', this.handleHover.bind(this));\n this.dropdownContentElementRef.removeEventListener('mouseleave', this.handleHoverOut.bind(this));\n this.actionElementRef.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n this.dropdownContentElementRef.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n }\n\n this.observer?.disconnect();\n }\n\n private setListenerForChildren(): void {\n const config = {\n childList: true,\n subtree: true,\n };\n\n this.observer = new MutationObserver(() => {\n this.options = Array.from(this.hostEl.querySelectorAll('vds-dropdown-item'));\n forceUpdate(this);\n });\n\n this.observer.observe(this.hostEl, config);\n }\n\n /** Gets the icon color.\n *\n * @returns string\n */\n private getIconColor() {\n return getIconColor(this.disabled, this.isReadonly);\n }\n\n private setDropdownIcon() {\n return <vds-icon svgIcon={this.dropdownOpened ? 'chevron-up' : 'chevron-down'} color={this.getIconColor()} size={getIconSize(this.size)}></vds-icon>;\n }\n\n private setInformativeIcon() {\n if (this.informativeIcon) {\n return <vds-icon class={'vds-dropdown__informative-icon'} svgIcon={this.informativeIcon} color={this.getIconColor()} size={getIconSize(this.size)}></vds-icon>;\n } else {\n return null;\n }\n }\n\n private setLabelValue() {\n return (\n <span\n class={combineClasses('vds__dropdown--value', 'vds__dropdown--value-' + this.size, 'vds__dropdown--value-' + (this.value && this.valueLabel ? 'label' : 'placeholder'))}\n >\n {this.value && this.valueLabel ? this.valueLabel : this.placeholder}\n </span>\n );\n }\n\n private setClearValueButtonIcon() {\n if (this.value && this.valueLabel && this.showClearButton) {\n return (\n <vds-icon-button\n icon=\"close\"\n variant=\"secondary\"\n size={getActionIconButtonSize(this.size)}\n onClick={\n !this.disabled && !this.isReadonly\n ? event => {\n this.clearValue(event);\n }\n : null\n }\n disabled={this.disabled || this.isReadonly}\n setAriaLabel=\"clear\"\n ></vds-icon-button>\n );\n } else {\n return null;\n }\n }\n\n render() {\n return (\n <Host class={combineClasses(this.disabled ? 'vds-basic-dropdown--disabled' : '')} onClicked={event => this.handleDropdownItemClicked(event.detail)}>\n <div class={'vds-basic-dropdown__container'}>\n <button\n tabIndex={0}\n disabled={this.disabled}\n value={this.value}\n class={combineClasses(\n 'vds__dropdown--trigger',\n this.disabled ? 'vds__dropdown--trigger-disabled' : '',\n this.isReadonly ? 'vds__dropdown--trigger--readonly' : '',\n this.error ? 'vds__dropdown--trigger-error' : '',\n `vds__dropdown--trigger--size-${this.size}`,\n )}\n onClick={(evt: MouseEvent) => {\n this.handleClick(evt);\n }}\n ref={triggerEl => {\n if (triggerEl) this.actionElementRef = triggerEl;\n }}\n >\n <span class=\"vds__dropdown--left-content\">\n {this.setInformativeIcon()}\n {this.setLabelValue()}\n </span>\n <span class=\"vds__dropdown--right-actions\">\n {this.setClearValueButtonIcon()}\n {this.setDropdownIcon()}\n </span>\n </button>\n {this.backdrop && this.dropdownOpened ? <div class=\"vds-floating-backdrop\" onClick={this.close.bind(this)}></div> : ''}\n <div\n class={combineClasses('vds__dropdown--container', this.maxHeight ? 'has-scroll' : '', this.options.length === 0 ? 'no-shadow' : '')}\n ref={dropdownEl => {\n if (dropdownEl) this.dropdownContentElementRef = dropdownEl;\n }}\n >\n <div class={combineClasses('vds-dropdown__content', this.maxHeight ? 'scrollable' : '')} style={setDropdownStyles(this.maxHeight)}>\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"vds-basic-dropdown.utils.js","mappings":"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","names":[],"sources":["src/components/basic-dropdown/vds-basic-dropdown.utils.ts"],"sourcesContent":["/**\n * Toggles the display style of an HTML element.\n * \n * @param {HTMLElement} contentBox The HTML element to toggle the display for.\n * @param {boolean} toggle A boolean value to control the display. \n * - True: Sets the display to \"block\".\n * - False: Sets the display to \"none\".\n * @returns {void}\n */\nexport const toggleContainerDisplay = (contentBox: HTMLElement, toggle: boolean): void => {\n if (!contentBox) {\n return;\n }\n\n contentBox.style.display = toggle ? \"block\" : \"none\";\n}\n\n/**\n * Unselects non-selected items in a dropdown.\n *\n * @param {HTMLElement} dropdownContent The dropdown content element.\n * @param {string[]|string} value The selected value or an array of selected values.\n */\nexport const unselectNonSelectedItems = (dropdownContent: HTMLElement, value: string[] | string) => {\n if (!dropdownContent) {\n return;\n }\n\n const container = dropdownContent.querySelector(\"slot\");\n const dropdownItems = container && typeof(container?.assignedElements) === \"function\" ? container.assignedElements() : null;\n Array.from(dropdownItems || []).forEach(item => {\n if (typeof value === \"string\" && item.tagName.toLowerCase() === \"vds-dropdown-item\" && item.getAttribute(\"value\") !== value) {\n item.setAttribute(\"is-selected\", \"false\");\n item.setAttribute(\"is-active\", \"false\");\n }\n if (Array.isArray(value) && item.tagName.toLowerCase() === \"vds-dropdown-item\" && value.some(v => v !== item.getAttribute(\"value\"))) {\n item.setAttribute(\"is-selected\", \"false\");\n item.setAttribute(\"is-active\", \"false\");\n }\n });\n}\n\n/**\n * Selects selected items in a dropdown.\n *\n * @param {HTMLElement} dropdownContent The dropdown content element.\n * @param {string[]|string} value The selected value or an array of selected values.\n */\nexport const selectSelectedItems = (dropdownContent: HTMLElement, value: string[] | string) => {\n if (!dropdownContent) {\n return;\n }\n try {\n const container = dropdownContent.querySelector(\"slot\");\n const dropdownItems = container && typeof(container?.assignedElements) === \"function\" ? container.assignedElements() : null;\n Array.from(dropdownItems || []).forEach(item => {\n if (typeof value === \"string\" && item.tagName.toLowerCase() === \"vds-dropdown-item\" && item.getAttribute(\"value\") === value) {\n item.setAttribute(\"is-selected\", \"true\");\n item.setAttribute(\"is-active\", \"true\");\n }\n if (Array.isArray(value) && item.tagName.toLowerCase() === \"vds-dropdown-item\" && value.some(v => v === item.getAttribute(\"value\"))) {\n item.setAttribute(\"is-selected\", \"true\");\n item.setAttribute(\"is-active\", \"true\");\n }\n });\n } catch (error) {\n console.warn(\"[selectSelectedItems]\", error);\n }\n}\n\n/**\n * Gets selected label in single dropdown using value\n *\n * @param {HTMLElement} dropdownContent The dropdown content element.\n * @param {string[]|string} value The selected value or an array of selected values.\n */\nexport const getSelectedLabel = (dropdownContent: HTMLElement, value: string) => {\n if (!dropdownContent) {\n return;\n }\n try {\n let response = \"\";\n const container = dropdownContent.querySelector(\"slot\");\n const dropdownItems = container && typeof(container?.assignedElements) === \"function\" ? container.assignedElements() : null;\n Array.from(dropdownItems || []).forEach(item => {\n if (typeof value === \"string\" && item.tagName.toLowerCase() === \"vds-dropdown-item\" && item.getAttribute(\"value\") === value) {\n response = (item as HTMLVdsDropdownItemElement)?.label || (item as HTMLVdsDropdownItemElement)?.textContent;\n }\n });\n return response;\n } catch (error) {\n console.warn(\"[getSelectedLabel]\", error);\n }\n}\n\nexport const scrollToSelectedValue = (dropdownContent: HTMLElement, value: string[] | string) => {\n if (!dropdownContent) {\n return;\n }\n try {\n const container = dropdownContent.querySelector(\"slot\");\n const dropdownItems = container && typeof(container?.assignedElements) === \"function\" ? container.assignedElements() : null;\n let selectedItem: Element | null = null;\n Array.from(dropdownItems || []).forEach(item => {\n if (typeof value === \"string\" && item.tagName.toLowerCase() === \"vds-dropdown-item\" && item.getAttribute(\"value\") === value) {\n selectedItem = item;\n }\n });\n \n // Scroll to option when is single value\n if (typeof value === \"string\" && selectedItem) {\n selectedItem.scrollIntoView({\n behavior: \"instant\",\n block: \"center\",\n inline: \"center\",\n });\n }\n } catch (error) {\n console.warn(\"[ScrollToSelectedValue]\", error);\n }\n}\n\n/**\n * Gets thje selected text items in a dropdown.\n *\n * @param {HTMLElement} dropdownContent The dropdown content element.\n * @param {string[]|string} value The selected value or an array of selected values.\n */\nexport const getSelectedItemsText = (dropdownContent: HTMLElement, value: string[]): string[] => {\n if (!dropdownContent) {\n return [];\n }\n\n const container = dropdownContent.querySelector(\"slot\");\n const dropdownItems = container && typeof(container?.assignedElements) === \"function\" ? container.assignedElements() : null;\n return Array.from(dropdownItems || [])\n .filter(ditem => ditem.tagName.toLowerCase() === \"vds-dropdown-item\" && value.some(v => v === ditem.getAttribute(\"value\")))\n .map(item => item.getAttribute(\"label\"))\n}\n\n/**\n * Unselects all items in a dropdown.\n *\n * @param {HTMLElement} dropdownContent The dropdown content element.\n * @param {string[]|string} value The selected value or an array of selected values.\n */\nexport const unselectAllItems = (dropdownContent: HTMLElement) => {\n if (!dropdownContent) {\n return;\n }\n\n const container = dropdownContent.querySelector(\"slot\");\n const dropdownItems = container && typeof(container?.assignedElements) === \"function\" ? container.assignedElements() : null;\n Array.from(dropdownItems || []).forEach(item => {\n item.setAttribute(\"is-selected\", \"false\");\n item.setAttribute(\"is-active\", \"false\");\n });\n}\n\n/**\n * Emits a native \"input\" event on the specified host element.\n *\n * @param {HTMLElement} hostEl The host element to emit the event on.\n */\nexport const emitNativeInputEvent = (hostEl: HTMLElement): void => {\n if (!hostEl) {\n return;\n }\n\n const inputEvent = new InputEvent(\"input\");\n hostEl.dispatchEvent(inputEvent);\n}\n\n/**\n * Checks if a given value is a valid option within a dropdown content element.\n *\n * @param {HTMLElement} dropdownContent The dropdown content element.\n * @param {string} value The value to check for validity.\n * @returns {boolean} True if the value is a valid option, false otherwise.\n *\n * **Validity criteria:**\n * - The value must match the `value` attribute of at least one `vds-dropdown-item` element within the dropdown content.\n */\nexport const isValidOption = (dropdownContent: HTMLElement, value: string): boolean => {\n if (!dropdownContent) {\n return;\n }\n\n const container = dropdownContent.querySelector(\"slot\");\n const dropdownItems = container && typeof(container?.assignedElements) === \"function\" ? container.assignedElements() : null;\n return Array.from(dropdownItems || []).some(item => item.getAttribute(\"value\") === value);\n}\n\n/**\n * Filters a list of options to only include those that are valid within a specified host element.\n *\n * @param {HTMLElement} hostEl The host element to validate options against.\n * @param {string[]} options The list of options to filter.\n * @returns {string[]} A new array containing only the valid options from the input list.\n *\n * **Validity criteria:**\n * - An option is considered valid if it matches the `value` attribute of at least one `vds-dropdown-item` element within the host element's dropdown content.\n */\nexport const getValidOptions = (hostEl: HTMLElement, options: string[]): string[] => {\n const validOptions = [];\n options.forEach(nv => {\n if (isValidOption(hostEl, nv)) {\n validOptions.push(nv);\n }\n })\n return validOptions;\n}\n\n/**\n * Sets dropdown styles for JSX.style property\n *\n * @param maxHeight string\n * @returns { [key: string]: string }\n */\nexport const setDropdownStyles = (maxHeight: string): { [key: string]: string } => {\n let styles = {};\n\n styles = {\n maxHeight: maxHeight ? maxHeight : undefined,\n }\n\n return styles;\n}\n\n/**\n * Updates the container width to match the trigger width when matchWidth is true.\n *\n * @param {HTMLElement} dropdownTrigger - The HTML button element that triggers the dropdown.\n * @param {boolean} matchWidth - A flag indicating whether to match the width of the dropdown content to the trigger.\n * @param {HTMLDivElement} dropdownContent - The dropdown content element whose width is to be updated.\n */\nexport const updateContainerWidth = (dropdownTrigger: HTMLElement, matchWidth: boolean, dropdownContent: HTMLDivElement) => {\n try {\n if (matchWidth && dropdownTrigger && dropdownContent) {\n const triggerWidth = dropdownTrigger.offsetWidth;\n dropdownContent.style.setProperty('--trigger-width', `${triggerWidth}px`);\n dropdownContent.classList.add('match-width');\n } else if (dropdownContent){\n dropdownContent.classList.remove('match-width');\n }\n } catch (error) {\n console.warn(\"[updateContainerWidth]\", error);\n }\n};"],"version":3}

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

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

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

@@ -1 +0,0 @@

- {"file":"vds-basic-input.utils.js","mappings":"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","names":[],"sources":["src/utils/icon-utils.ts","src/components/input/vds-basic-input.utils.ts"],"sourcesContent":["import iconSprint from '../constants/icon-sprite';\n\nexport const getIconsFromSpriteFile = () => {\n return Object.keys(iconSprint).map(icon => {\n try {\n // We split icons in two using the . in the extension and take the name part\n // eg. iconName.extension\n return icon.split('.')[0];\n } catch {\n return icon;\n }\n });\n};\n\nexport const NAVIGATION = [\n 'chevron-right',\n 'chevron-up',\n 'chevron-down',\n 'chevron-left',\n 'zoom-out',\n 'move',\n 'zoom-identity',\n 'map',\n 'zoom',\n 'overflow',\n 'zoom-generic-inv',\n 'zoom-generic',\n 'go-to-first-page-filled',\n 'go-to-last-page-filled',\n 'go-to-first-page',\n 'go-to-last-page',\n 'caret-down',\n 'caret-down-filled',\n 'caret-right-filled',\n 'arrow-right',\n 'arrow-down',\n 'arrow-up',\n 'arrow-left',\n 'zoom-in',\n 'zoom-less',\n 'tile-view',\n 'list-view',\n 'inbox-view',\n];\n\nexport const FILES = ['document', 'excel', 'folder-closed', 'pdf', 'word', 'folder-open', 'copy', 'disabled-document', 'cases', 'templates'];\n\nexport const STATUS = ['disable', 'not-found', 'caution', 'caution-2', 'failure', 'unknown', 'information', 'error', 'healthy', 'good'];\n\nexport const DEVICE = ['camera', 'phone', 'desktop-computer', 'camera-video', 'tablet', 'disconnected', 'connected', 'usb', 'qr-code', 'scan-barcode'];\n\nexport const USER = ['user', 'user-group'];\n\nexport const ACTION = [\n 'trash',\n 'more-horizontal',\n 'more-vertical',\n 'edit',\n 'less',\n 'add',\n 'close',\n 'upload',\n 'download',\n 'link-open',\n 'link-closed',\n 'filter',\n 'swap',\n 'reset',\n 'history',\n 'drag',\n 'reverse',\n 'restart',\n 'share',\n 'back',\n 'hamburger',\n 'applications',\n];\n\nexport const CONTROL = [\n 'skip-back-filled',\n 'play-page-filled',\n 'fast-forward-filled',\n 'play-page',\n 'fast-forward',\n 'skip-back',\n 'play',\n 'skip-forward',\n 'camera-video-filled',\n 'rewind',\n 'rewind-filled',\n 'pause',\n 'skip-forward-filled',\n 'mute',\n 'unmute',\n 'window',\n 'overlays',\n 'exit-full-screen',\n 'fit-vertical',\n 'multi-window',\n 'fit',\n 'full-screen',\n 'fit-horizontal',\n 'enter-full-screen',\n 'minimize-panel',\n 'power',\n 'refresh',\n 'system',\n];\n\nexport const TIME = ['timer', 'timezone', 'time', 'calendar'];\n\nexport const TOOL = [\n 'pick-color',\n 'paperclip',\n 'copy',\n 'module-settings',\n 'print',\n 'save',\n 'notes',\n 'calculation',\n 'summary',\n 'add-train',\n 'flag',\n 'formula',\n 'key',\n 'administration',\n 'payment',\n 'ptc',\n 'add-repair',\n 'deployments',\n 'attribute',\n 'tag',\n 'tag-group',\n];\n\nexport const TRANSPORT = [\n 'vessel',\n 'train',\n 'automobile',\n 'locomotive',\n 'truck',\n 'local-containers',\n 'rail-containers',\n 'rail-yard',\n 'intermodal',\n 'tack',\n 'train-schedule',\n 'track',\n];\nexport const TOGGLE = ['bell', 'star', 'favorite', 'lock-closed', 'show', 'hide', 'lock-open', 'lock-open-side'];\n\nexport const DATA = ['analysis', 'analytics', 'database', 'dashboard'];\n\nexport const INVENTORY = ['container', 'asset', 'empty-returns'];\n\nexport const BRAND = ['wabtec-corporation-logo', 'white-wabtec-corporation-logo'];\n","import { IconColors } from \"../../definitions/colors\";\nimport { getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nexport type VdsInputType = \"number\" | \"text\" | \"date\" | \"tel\" | \"datetime\" | \"datetime-local\" | \"email\" | \"submit\" | \"password\" | \"month\" | \"time\" | \"url\" | \"week\";\n\n/**\n * Validates whether an icon is valid or not by comparing with sprite file.\n *\n * @param icon string\n * @returns boolean\n */\nexport const isValidIcon = (icon: string): boolean => {\n const ICON_LIST = getIconsFromSpriteFile();\n return icon && ICON_LIST.some(ico => ico === icon);\n}\n\n/**\n * Toggle class [vds__input__container--focus] in focus/blur input's event\n *\n * @param divEl HTMLElement\n * @returns void\n */\nexport const toggleFocusClass = (divEl: HTMLElement, target = \"input\"): void => {\n const classed = `vds__${target}__container--focus`;\n\n if (divEl.classList.contains(classed)) {\n divEl.classList.remove(classed);\n } else {\n divEl.classList.add(classed);\n }\n}\n\n/**\n * Add class touched in focus event\n *\n * @param input HTMLElement\n * @returns void\n */\nexport const setTouchedClass = (input: HTMLElement): void => {\n const classed = \"touched\";\n\n if (!input.classList.contains(classed)) {\n input.classList.add(classed);\n }\n}\n\n/**\n * Add class touched in input event\n *\n * @param input HTMLElement\n * @returns void\n */\nexport const setDirtyClass = (input: HTMLElement): void => {\n const classed = \"dirty\";\n\n if (!input.classList.contains(classed)) {\n input.classList.add(classed);\n }\n}\n\n/**\n * Get icon color according to input state.\n *\n * @param divEl HTMLElement\n * @returns IconColors\n */\nexport const getIconColor = (inputState: \"normal\" | \"readonly\" | \"disabled\"): IconColors => {\n switch(inputState) {\n case \"normal\":\n return \"color-icon-high\";\n case \"disabled\": \n return \"color-icon-disabled\";\n case \"readonly\": \n return \"color-icon-medium\";\n }\n}\n\n/**\n * Validates whether the style is valid or not.\n *\n * @param input { [key: string]: string }\n * @returns boolean\n */\nexport const isValidInputStyle = (input: { [key: string]: string }): boolean => {\n const VALID_STYLES: string[] = [\n \"direction\",\n \"text-align\",\n \"textAlign\",\n \"text-transform\",\n \"textTransform\",\n \"unicode-bidi\",\n \"unicodeBidi\"\n ];\n \n\tconst style = Object.keys(input);\n\n\treturn style.length > 0 && VALID_STYLES.some(st => st === style[0]);\n};\n\n/**\n * Sets input styles so they can be pass to JSX.style property\n *\n * @param input { [key: string]: string }\n * @returns { [key: string]: string }\n */\nexport const setInputStyles = (allowedStyles: { [key: string]: string }[]): { [key: string]: string } => {\n if (allowedStyles) {\n let response = {};\n for (const style of allowedStyles) {\n if (isValidInputStyle(style)) {\n response = { ...response, ...style };\n }\n }\n return response;\n }\n return {};\n}\n\n/**\n * Executes Formatter Function in order to mask value inside input.\n *\n * @param formatter Function\n * @param input string\n * @param currentValue string\n * @param eventData string\n * @param element HTMLInputElement | HTMLTextAreaElement\n * @param fullEvent InputEvent\n * \n * @returns string\n */\nexport const maskInput = (\n\tformatter: Function,\n\tinput: string,\n\tcurrentValue: string,\n\teventData: string,\n\telement?: HTMLInputElement | HTMLTextAreaElement,\n\tfullEvent?: InputEvent\n): string => {\n\treturn formatter(input, currentValue, eventData, element, fullEvent);\n}\n"],"version":3}