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

wabtec-internal-volt-basic-components 1.0.0 → 1.2.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 (773) hide show

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

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

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

@@ -41,9 +41,9 @@ const codeTemplate = (args) => {
         value="${args.value}"
         placeholder="${args.placeholder}"
         ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}
-        ${args.disabled ? `disabled="${args.disabled}"` : ""}
-        ${args.isReadonly ? `is-readonly="${args.isReadonly}` : ""}
-        ${args.error ? `error="${args.error}"` : ""}
+        ${args.disabled ? "disabled" : ""}
+        ${args.isReadonly ? "is-readonly" : ""}
+        ${args.error ? "error" : ""}
         event="${args.event}"
         display-selection-limit="${args.displaySelectionLimit}"
         display-selection-limit-text="${args.displaySelectionLimitText}"
@@ -210,9 +210,9 @@ const codeCheckboxTemplate = (args) => {
         value="${args.value}"
         placeholder="${args.placeholder}"
         ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}
-        disabled="${args.disabled}"
-        is-readonly="${args.isReadonly}"
-        error="${args.error}"
+        ${args.disabled ? "disabled" : ""}
+        ${args.isReadonly ? "is-readonly" : ""}
+        ${args.error ? "error" : ""}
         event="${args.event}"
         display-selection-limit="${args.displaySelectionLimit}"
         display-selection-limit-text="${args.displaySelectionLimitText}"

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

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

package/dist/collection/components/field/vds-field.css CHANGED Viewed

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
 :root {
   font-family: "Roboto Flex", sans-serif, sans-serif;
   box-sizing: border-box;
@@ -481,6 +480,13 @@
   --height-12:0.75rem;
 }
+@font-face {
+  font-family: "Roboto Flex";
+  src: url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");
+  font-weight: 100 1000;
+  font-stretch: 25% 151%;
+  font-style: normal;
+}
 :root body {
   --spacing-00:0rem;
   --spacing-01:0.125rem;
@@ -733,7 +739,15 @@
   --static-dataviz-div-red-blue-650:#163670;
   --static-dataviz-div-red-blue-700:#0B194C;
   --static-white:#ffffff;
+  --static-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --static-white-low:rgba(255, 255, 255, 0.3215686275);
+  --static-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --static-white-lowest:rgba(255, 255, 255, 0.1215686275);
   --static-black:#000000;
+  --static-black-medium:rgba(0, 0, 0, 0.6392156863);
+  --static-black-low:rgba(0, 0, 0, 0.3215686275);
+  --static-black-lower:rgba(0, 0, 0, 0.1607843137);
+  --static-black-lowest:rgba(0, 0, 0, 0.1215686275);
   --elevation-shadow-0:none;
   --elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);
   --elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);

package/dist/collection/components/field/vds-field.js CHANGED Viewed

@@ -20,7 +20,7 @@ export class VdsField {
         return (h("span", { class: `vds__field--helper-text ${this.helperTextColor ? `vds__field--helper-text-${this.helperTextColor}` : ""}` }, this.helperText));
     }
     render() {
-        return (h(Host, { key: 'a70a8ca4b447d74e228ae36ab39b5f7c3b642124', class: this.isDisabled ? "vds-field--disabled" : "" }, h("div", { key: '09902d46505d9b1bee24bfa000f6c9c47d91680b', class: combineClasses("vds__field__container", `vds__field__container--size-${this.size}`, `${this.isDisabled ? "vds__field__container--disabled" : ""}`) }, this.getLabel(), h("slot", { key: 'e36af7a1cb3e4eab8e0490814cae9b40a1f94b5c' }), this.getHelperText(), this.errorMessage && h("span", { key: '9418935b1330d4e7ac6ae07ebf07875ae27215ba', class: "vds__field--error-message" }, this.errorMessage))));
+        return (h(Host, { key: 'e6e75aacdedc9e72c78438550a4425eefe1db6df', class: this.isDisabled ? "vds-field--disabled" : "" }, h("div", { key: '000b2c6af8c98128169997eb49359e19014bcafb', class: combineClasses("vds__field__container", `vds__field__container--size-${this.size}`, `${this.isDisabled ? "vds__field__container--disabled" : ""}`) }, this.getLabel(), h("slot", { key: '0719275acb47039cabcbb8632cb922c97d3684bf' }), this.getHelperText(), this.errorMessage && h("span", { key: 'd6e8a9075892b2a5ce95c28ec389a1b5f5c41c66', class: "vds__field--error-message" }, this.errorMessage))));
     }
     static get is() { return "vds-field"; }
     static get encapsulation() { return "shadow"; }
@@ -38,7 +38,6 @@ export class VdsField {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -53,11 +52,11 @@ export class VdsField {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "isRequired": {
                 "type": "boolean",
-                "attribute": "is-required",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -73,11 +72,11 @@ export class VdsField {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-required",
                 "defaultValue": "false"
             },
             "isDisabled": {
                 "type": "boolean",
-                "attribute": "is-disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -93,11 +92,11 @@ export class VdsField {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-disabled",
                 "defaultValue": "false"
             },
             "helperText": {
                 "type": "string",
-                "attribute": "helper-text",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -112,15 +111,15 @@ export class VdsField {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper-text"
             },
             "helperTextColor": {
                 "type": "string",
-                "attribute": "helper-text-color",
                 "mutable": true,
                 "complexType": {
                     "original": "Colors",
-                    "resolved": "ThemeColors | \"brand-50\" | \"brand-100\" | \"brand-200\" | \"brand-300\" | \"brand-400\" | \"brand-500\" | \"brand-main\" | \"brand-600\" | \"brand-700\" | \"brand-800\" | \"brand-900\" | \"brand-950\" | \"brand-1000\" | \"brand-1000-medium\" | \"brand-1000-low\" | \"brand-1000-lower\" | \"brand-1000-lowest\" | \"green-50\" | \"green-100\" | \"green-200\" | \"green-300\" | \"green-400\" | \"green-500\" | \"green-main\" | \"green-600\" | \"green-700\" | \"green-800\" | \"green-900\" | \"green-950\" | \"grey-50\" | \"grey-100\" | \"grey-200\" | \"grey-300\" | \"grey-400\" | \"grey-500\" | \"grey-main\" | \"grey-600\" | \"grey-700\" | \"grey-800\" | \"grey-900\" | \"grey-950\" | \"neutral-50\" | \"neutral-100\" | \"neutral-200\" | \"neutral-300\" | \"neutral-400\" | \"neutral-500\" | \"neutral-main\" | \"neutral-600\" | \"neutral-700\" | \"neutral-800\" | \"neutral-900\" | \"neutral-950\" | \"neutral-400-medium\" | \"neutral-400-low\" | \"neutral-400-lower\" | \"neutral-800-medium\" | \"neutral-800-low\" | \"orange-50\" | \"orange-100\" | \"orange-200\" | \"orange-300\" | \"orange-400\" | \"orange-500\" | \"orange-main\" | \"orange-600\" | \"orange-700\" | \"orange-800\" | \"orange-900\" | \"orange-950\" | \"red-50\" | \"red-100\" | \"red-200\" | \"red-300\" | \"red-400\" | \"red-500\" | \"red-main\" | \"red-600\" | \"red-700\" | \"red-800\" | \"red-900\" | \"red-950\" | \"yellow-50\" | \"yellow-100\" | \"yellow-200\" | \"yellow-300\" | \"yellow-400\" | \"yellow-500\" | \"yellow-main\" | \"yellow-600\" | \"yellow-700\" | \"yellow-800\" | \"yellow-900\" | \"yellow-950\" | \"white\" | \"black\"",
+                    "resolved": "ThemeColors | \"static-brand-50\" | \"static-brand-100\" | \"static-brand-200\" | \"static-brand-300\" | \"static-brand-400\" | \"static-brand-500\" | \"static-brand-main\" | \"static-brand-600\" | \"static-brand-700\" | \"static-brand-800\" | \"static-brand-900\" | \"static-brand-950\" | \"static-brand-1000\" | \"static-brand-1000-medium\" | \"static-brand-1000-low\" | \"static-brand-1000-lower\" | \"static-brand-1000-lowest\" | \"static-green-50\" | \"static-green-100\" | \"static-green-200\" | \"static-green-300\" | \"static-green-400\" | \"static-green-500\" | \"static-green-main\" | \"static-green-600\" | \"static-green-700\" | \"static-green-800\" | \"static-green-900\" | \"static-green-950\" | \"static-grey-50\" | \"static-grey-100\" | \"static-grey-200\" | \"static-grey-300\" | \"static-grey-400\" | \"static-grey-500\" | \"static-grey-main\" | \"static-grey-600\" | \"static-grey-700\" | \"static-grey-800\" | \"static-grey-900\" | \"static-grey-950\" | \"static-neutral-50\" | \"static-neutral-100\" | \"static-neutral-200\" | \"static-neutral-300\" | \"static-neutral-400\" | \"static-neutral-500\" | \"static-neutral-main\" | \"static-neutral-600\" | \"static-neutral-700\" | \"static-neutral-800\" | \"static-neutral-900\" | \"static-neutral-950\" | \"static-neutral-400-medium\" | \"static-neutral-400-low\" | \"static-neutral-400-lower\" | \"static-neutral-800-medium\" | \"static-neutral-800-low\" | \"static-orange-50\" | \"static-orange-100\" | \"static-orange-200\" | \"static-orange-300\" | \"static-orange-400\" | \"static-orange-500\" | \"static-orange-main\" | \"static-orange-600\" | \"static-orange-700\" | \"static-orange-800\" | \"static-orange-900\" | \"static-orange-950\" | \"static-red-50\" | \"static-red-100\" | \"static-red-200\" | \"static-red-300\" | \"static-red-400\" | \"static-red-500\" | \"static-red-main\" | \"static-red-600\" | \"static-red-700\" | \"static-red-800\" | \"static-red-900\" | \"static-red-950\" | \"static-yellow-50\" | \"static-yellow-100\" | \"static-yellow-200\" | \"static-yellow-300\" | \"static-yellow-400\" | \"static-yellow-500\" | \"static-yellow-main\" | \"static-yellow-600\" | \"static-yellow-700\" | \"static-yellow-800\" | \"static-yellow-900\" | \"static-yellow-950\" | \"static-white\" | \"static-white-medium\" | \"static-white-low\" | \"static-white-lower\" | \"static-white-lowest\" | \"static-black\" | \"static-black-medium\" | \"static-black-low\" | \"static-black-lower\" | \"static-black-lowest\"",
                     "references": {
                         "Colors": {
                             "location": "import",
@@ -137,11 +136,11 @@ export class VdsField {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper-text-color"
             },
             "errorMessage": {
                 "type": "string",
-                "attribute": "error-message",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -156,11 +155,11 @@ export class VdsField {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "error-message"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "\"small\" | \"medium\" | \"large\"",
@@ -176,6 +175,7 @@ export class VdsField {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             }
         };

package/dist/collection/components/footer/vds-footer.css CHANGED Viewed

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
 :root {
   font-family: "Roboto Flex", sans-serif, sans-serif;
   box-sizing: border-box;
@@ -481,6 +480,13 @@
   --height-12:0.75rem;
 }
+@font-face {
+  font-family: "Roboto Flex";
+  src: url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");
+  font-weight: 100 1000;
+  font-stretch: 25% 151%;
+  font-style: normal;
+}
 :root body {
   --spacing-00:0rem;
   --spacing-01:0.125rem;
@@ -733,7 +739,15 @@
   --static-dataviz-div-red-blue-650:#163670;
   --static-dataviz-div-red-blue-700:#0B194C;
   --static-white:#ffffff;
+  --static-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --static-white-low:rgba(255, 255, 255, 0.3215686275);
+  --static-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --static-white-lowest:rgba(255, 255, 255, 0.1215686275);
   --static-black:#000000;
+  --static-black-medium:rgba(0, 0, 0, 0.6392156863);
+  --static-black-low:rgba(0, 0, 0, 0.3215686275);
+  --static-black-lower:rgba(0, 0, 0, 0.1607843137);
+  --static-black-lowest:rgba(0, 0, 0, 0.1215686275);
   --elevation-shadow-0:none;
   --elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);
   --elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);

package/dist/collection/components/footer/vds-footer.js CHANGED Viewed

@@ -65,7 +65,7 @@ export class VdsFooter {
         return (h("div", { class: "vds__footer--container" }, h("div", { class: "vds__footer--slot-start" }, h("slot", { name: "start" })), h("div", { class: "vds__footer--slot-center" }, h("slot", { name: "center" })), h("div", { class: "vds__footer--slot-end" }, h("slot", { name: "end" }))));
     }
     render() {
-        return (h(Host, { key: '129c009652b8c9afedd9c377fe6e9571602f991c' }, this.type === 'expandable' && this.expandedContentPosition === 'top' && this.isExpanded && (h("div", { key: '209570fb5e2fc80db736341a05dabc63e0dc676f', class: "vds__footer--expandable top" }, h("slot", { key: 'dfa5f2cd517faab158479a04eb3ce8fbc6c41ea1', name: "expandable-content" }))), this.type === 'custom' ? (this.renderCustomFooter()) : (h("div", { class: 'vds__footer--container' }, h("div", { class: 'vds__footer--app-version' }, this.appVersion), h("div", { class: 'vds__footer--info' }, h("div", null, "\u00A9 ", this.currentYear, " ", this.centralText), h("div", { class: 'vds__footer--powerby' }, h("span", null, this.poweredByText), h("vds-icon", { size: "2.95775rem,1rem", color: "color-icon-medium", svgIcon: 'wabtec-grey-logo' }))), h("div", { class: `vds__footer--slot ${this.type === 'expandable' ? 'has-expandable-button' : ''}` }, h("slot", null), this.renderExpandableButton()))), this.type === 'expandable' && this.expandedContentPosition === 'bottom' && this.isExpanded && (h("div", { key: '2a4eebb4f378025fe2819a8b9fd3169dcb71fdef', class: "vds__footer--expandable bottom" }, h("slot", { key: '77b7d2479448eb462a1f1a3227a1e3fcc12034c1', name: "expandable-content" })))));
+        return (h(Host, { key: '1dee5304ff56ab8439681fe735cb57b90649a722' }, this.type === 'expandable' && this.expandedContentPosition === 'top' && this.isExpanded && (h("div", { key: 'b64defa7afd3919b7cce983af4f33b51dd6b3936', class: "vds__footer--expandable top" }, h("slot", { key: '5fa14243f860574dd44829cf3c3d35dde6305668', name: "expandable-content" }))), this.type === 'custom' ? (this.renderCustomFooter()) : (h("div", { class: 'vds__footer--container' }, h("div", { class: 'vds__footer--app-version' }, this.appVersion), h("div", { class: 'vds__footer--info' }, h("div", null, "\u00A9 ", this.currentYear, " ", this.centralText), h("div", { class: 'vds__footer--powerby' }, h("span", null, this.poweredByText), h("vds-icon", { size: "2.95775rem,1rem", color: "color-icon-medium", svgIcon: 'wabtec-grey-logo' }))), h("div", { class: `vds__footer--slot ${this.type === 'expandable' ? 'has-expandable-button' : ''}` }, h("slot", null), this.renderExpandableButton()))), this.type === 'expandable' && this.expandedContentPosition === 'bottom' && this.isExpanded && (h("div", { key: '1b7b8351a5a93a52d2b835ed2489dc26af66f07c', class: "vds__footer--expandable bottom" }, h("slot", { key: '85d75bc2b1b7fe67f66021deda4009cf8219511f', name: "expandable-content" })))));
     }
     static get is() { return "vds-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -83,7 +83,6 @@ export class VdsFooter {
         return {
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'default' | 'expandable' | 'custom'",
@@ -99,11 +98,11 @@ export class VdsFooter {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'default'"
             },
             "appVersion": {
                 "type": "string",
-                "attribute": "app-version",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -118,11 +117,11 @@ export class VdsFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "app-version"
             },
             "expandedContentPosition": {
                 "type": "string",
-                "attribute": "expanded-content-position",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'bottom'",
@@ -138,11 +137,11 @@ export class VdsFooter {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "expanded-content-position",
                 "defaultValue": "'bottom'"
             },
             "centralText": {
                 "type": "string",
-                "attribute": "central-text",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -158,11 +157,11 @@ export class VdsFooter {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "central-text",
                 "defaultValue": "'Wabtec Corporation. All rights reserved.'"
             },
             "poweredByText": {
                 "type": "string",
-                "attribute": "powered-by-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -178,6 +177,7 @@ export class VdsFooter {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "powered-by-text",
                 "defaultValue": "'Powered by'"
             }
         };

package/dist/collection/components/header/vds-header.css CHANGED Viewed

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
 :root {
   font-family: "Roboto Flex", sans-serif, sans-serif;
   box-sizing: border-box;
@@ -481,6 +480,13 @@
   --height-12:0.75rem;
 }
+@font-face {
+  font-family: "Roboto Flex";
+  src: url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");
+  font-weight: 100 1000;
+  font-stretch: 25% 151%;
+  font-style: normal;
+}
 :root body {
   --spacing-00:0rem;
   --spacing-01:0.125rem;
@@ -733,7 +739,15 @@
   --static-dataviz-div-red-blue-650:#163670;
   --static-dataviz-div-red-blue-700:#0B194C;
   --static-white:#ffffff;
+  --static-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --static-white-low:rgba(255, 255, 255, 0.3215686275);
+  --static-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --static-white-lowest:rgba(255, 255, 255, 0.1215686275);
   --static-black:#000000;
+  --static-black-medium:rgba(0, 0, 0, 0.6392156863);
+  --static-black-low:rgba(0, 0, 0, 0.3215686275);
+  --static-black-lower:rgba(0, 0, 0, 0.1607843137);
+  --static-black-lowest:rgba(0, 0, 0, 0.1215686275);
   --elevation-shadow-0:none;
   --elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);
   --elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);