npm - @siemens/ix - Versions diffs - 0.0.0-20240522074328 → 0.0.0-pr-1318-20240627080522 - Mend

@siemens/ix 0.0.0-20240522074328 → 0.0.0-pr-1318-20240627080522

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 (1382) hide show

package/components/select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"select.js","mappings":"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","names":[],"sources":["src/components/select/select.scss?tag=ix-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: inline-block;\n position: relative;\n min-height: 2rem;\n height: auto;\n border-radius: var(--theme-input--border-radius);\n\n .d-none {\n display: none;\n }\n\n .select {\n position: relative;\n display: flex;\n align-items: center;\n background-color: var(--theme-input--background);\n border: var(--theme-input--border-thickness) solid\n var(--theme-input--border-color);\n border-radius: var(--theme-input--border-radius);\n padding: 0 0 0 $small-space;\n box-shadow: var(--theme-inset-shadow-1) !important;\n\n @include hover {\n background-color: var(--theme-input--background--hover);\n border-color: var(--theme-input--border-color--hover);\n }\n\n &:focus-within {\n background-color: var(--theme-input--background--focus);\n border-color: var(--theme-input--border-color--focus);\n outline: 1px solid #119fff;\n outline-offset: var(--theme-input--focus--outline-offset);\n }\n }\n\n .select.readonly,\n .select.disabled {\n box-shadow: none !important;\n border: none;\n border-radius: 0;\n cursor: pointer;\n\n &,\n &:hover,\n &:active {\n background-color: transparent !important;\n }\n\n &:focus,\n &:focus-within,\n &:focus-visible {\n outline: none;\n }\n\n input:focus,\n input:focus-visible {\n outline: none;\n }\n }\n\n .select.disabled {\n border-bottom: var(--theme-input--border-thickness) solid\n var(--theme-color-weak-bdr);\n\n input {\n color: var(--theme-color-weak-text);\n }\n }\n\n .select.readonly {\n border-bottom: var(--theme-input--border-thickness) solid\n var(--theme-color-soft-bdr);\n\n input {\n color: var(--theme-color-std-text);\n }\n }\n\n .hidden {\n display: none !important;\n }\n\n .trigger {\n display: flex;\n align-items: center;\n flex-grow: 1;\n height: 100%;\n }\n\n .input-container {\n display: flex;\n position: relative;\n align-items: flex-start;\n width: 100%;\n height: 100%;\n\n .chips {\n position: relative;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n height: 100%;\n max-height: 3.5rem;\n flex-grow: 1;\n overflow-y: auto;\n\n > ix-filter-chip {\n margin: 0.1rem;\n }\n }\n\n input {\n @include ellipsis;\n @include text-default;\n background: transparent;\n height: 1.75rem;\n width: 100%;\n\n &,\n &:hover,\n &:focus-visible {\n border: none;\n outline: none;\n }\n\n &::placeholder {\n color: var(--theme-input-select-icon--color);\n }\n\n &.hide-placeholder::placeholder {\n opacity: 0;\n }\n }\n }\n\n .dropdown-visible {\n --ix-icon-button-color: var(--theme-color-dynamic--hover);\n }\n\n .add-item {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n position: relative;\n width: 100%;\n }\n\n .select-list-header {\n @include ellipsis;\n display: flex;\n align-items: center;\n height: $default-control-height;\n color: var(--theme-select-list-item-hint--color);\n margin: 0 $small-space 0 1rem;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\nimport { ArrowFocusController } from '../utils/focus';\nimport { OnListener } from '../utils/listener';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\n\n@Component({\n tag: 'ix-select',\n styleUrl: 'select.scss',\n shadow: true,\n})\nexport class Select {\n @Element() hostElement!: HTMLIxSelectElement;\n\n /\n Indices of selected items.\n * This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.\n * @deprecated since 2.0.0. Use the `value` property instead.\n /\n @Prop({ mutable: true }) selectedIndices?: string \| string[];\n\n /\n Current selected value.\n * This corresponds to the value property of ix-select-items\n * @since 2.0.0\n /\n @Prop({ mutable: true }) value?: string \| string[];\n\n /\n Show clear button\n /\n @Prop() allowClear = false;\n\n /\n Selection mode\n /\n @Prop() mode: 'single' \| 'multiple' = 'single';\n\n /\n Select is extendable\n /\n @Prop() editable = false;\n\n /\n If true the select will be in disabled state\n /\n @Prop() disabled = false;\n\n /\n If true the select will be in readonly mode\n /\n @Prop() readonly = false;\n\n /\n Input field placeholder\n /\n @Prop() i18nPlaceholder = 'Select an option';\n\n /\n Input field placeholder for editable select\n /\n @Prop() i18nPlaceholderEditable = 'Type of select option';\n\n /\n Select list header\n /\n @Prop() i18nSelectListHeader = 'Please select an option';\n\n /\n Hint inside of dropdown if no items where found with current filter text\n \n @since 1.5.0\n /\n @Prop() i18nNoMatches = 'No matches';\n\n /\n Hide list header\n \n @since 1.5.0\n /\n @Prop() hideListHeader = false;\n\n /\n Value changed\n * @since 2.0.0\n /\n @Event() valueChange: EventEmitter<string \| string[]>;\n\n /\n Item selection changed\n * @deprecated since 2.0.0. Use `valueChange` instead.\n /\n @Event() itemSelectionChange: EventEmitter<string[]>;\n\n /\n Event dispatched whenever the text input changes.\n \n @since 2.0.0\n /\n @Event() inputChange: EventEmitter<string>;\n\n /\n Item added to selection\n */\n @Event() addItem: EventEmitter<string>;\n\n @State() dropdownShow = false;\n @State() selectedLabels: string[];\n @State() dropdownWrapperRef!: HTMLElement;\n @State() dropdownAnchor!: HTMLElement;\n @State() isDropdownEmpty = false;\n @State() navigationItem: DropdownItemWrapper;\n @State() inputFilterText: string;\n @State() inputValue: string;\n\n private inputRef!: HTMLInputElement;\n private dropdownRef!: HTMLIxDropdownElement;\n private customItemsContainerRef!: HTMLDivElement;\n private addItemRef!: HTMLIxDropdownItemElement;\n\n private itemMutationObserver: MutationObserver;\n\n private arrowFocusController: ArrowFocusController;\n private focusControllerCallbackBind = this.focusDropdownItem.bind(this);\n\n private itemObserver = createMutationObserver(() => {\n this.arrowFocusController.items = this.visibleNonShadowItems;\n });\n\n get nonShadowItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-select-item'));\n }\n\n get visibleNonShadowItems() {\n return this.nonShadowItems.filter(\n (item) => !item.classList.contains('d-none')\n );\n }\n\n get shadowItems() {\n return Array.from(\n this.hostElement.shadowRoot.querySelectorAll('ix-select-item')\n );\n }\n\n get visibleShadowItems() {\n return this.shadowItems.filter(\n (item) => !item.classList.contains('d-none')\n );\n }\n\n get items() {\n return [...this.nonShadowItems, ...this.shadowItems];\n }\n\n get visibleItems() {\n return this.items.filter((item) => !item.classList.contains('d-none'));\n }\n\n get selectedItems() {\n return this.items.filter((item) => item.selected);\n }\n\n get addItemButton() {\n return this.hostElement.shadowRoot.querySelector('.add-item');\n }\n\n get isSingleMode() {\n return this.mode === 'single';\n }\n\n get isMultipleMode() {\n return this.mode === 'multiple';\n }\n\n get isEveryDropdownItemHidden() {\n return this.items.every((item) => item.classList.contains('d-none'));\n }\n\n @Watch('selectedIndices')\n watchSelectedIndices(value: string \| string[]) {\n this.value = value;\n this.updateSelection();\n }\n\n @Watch('value')\n watchValue(value: string \| string[]) {\n this.selectedIndices = value;\n this.updateSelection();\n }\n\n @Watch('dropdownShow')\n watchDropdownShow(show: boolean) {\n if (show) {\n this.arrowFocusController = new ArrowFocusController(\n this.visibleNonShadowItems,\n this.dropdownRef,\n this.focusControllerCallbackBind\n );\n\n this.arrowFocusController.wrap = !this.editable;\n\n this.itemObserver.observe(this.dropdownRef, {\n childList: true,\n subtree: true,\n });\n } else {\n this.arrowFocusController.disconnect();\n this.arrowFocusController = undefined;\n this.itemObserver.disconnect();\n }\n }\n\n @Listen('itemClick')\n onItemClicked(event: CustomEvent<string>) {\n const newId = event.detail;\n this.itemClick(newId);\n }\n\n private focusDropdownItem(index: number) {\n this.navigationItem = undefined;\n\n if (index < this.visibleNonShadowItems.length) {\n const nestedDropdownItem =\n this.visibleNonShadowItems[index]?.shadowRoot.querySelector(\n 'ix-dropdown-item'\n );\n\n requestAnimationFrame(() => {\n nestedDropdownItem.shadowRoot.querySelector('button').focus();\n });\n }\n }\n\n private itemClick(newId: string) {\n this.value = this.toggleValue(newId);\n this.updateSelection();\n this.emitValueChange();\n }\n\n private emitAddItem(value: string) {\n if (value === undefined \|\| value.trim() === '') {\n return;\n }\n\n const newItem = document.createElement('ix-select-item');\n newItem.value = value;\n newItem.label = value;\n\n this.customItemsContainerRef.appendChild(newItem);\n\n this.clearInput();\n this.itemClick(value);\n this.addItem.emit(value);\n }\n\n private toggleValue(itemValue: string) {\n if (!this.isMultipleMode) {\n return itemValue;\n }\n\n if (!this.value) {\n return [itemValue];\n }\n\n let value = this.value;\n\n if (!Array.isArray(value)) {\n value = [value];\n }\n\n if (value.includes(itemValue)) {\n return value.filter((value) => value !== itemValue);\n } else {\n return [...value, itemValue];\n }\n }\n\n private updateSelection() {\n let ids = [];\n\n if (this.value) {\n ids = Array.isArray(this.value) ? [...this.value] : [this.value];\n }\n\n this.items.forEach((item) => {\n item.selected = ids.some(\n // Check can be removed if value is type of string in future releases\n (i) =>\n i ===\n (item.value !== undefined && item.value !== null\n ? item.value.toString()\n : '')\n );\n });\n\n this.selectedLabels = this.selectedItems.map((item) => item.label);\n\n if (this.isSingleMode && this.selectedLabels?.length) {\n this.inputValue = this.selectedLabels[0];\n this.inputRef && (this.inputRef.value = this.inputValue);\n return;\n }\n\n this.inputValue = null;\n }\n\n private emitValueChange() {\n this.valueChange.emit(this.value);\n\n if (!this.value) {\n this.itemSelectionChange.emit(null);\n } else {\n this.itemSelectionChange.emit(\n Array.isArray(this.value) ? this.value : [this.value]\n );\n }\n }\n\n componentDidLoad() {\n this.inputRef.addEventListener('input', () => {\n this.dropdownShow = true;\n this.inputChange.emit(this.inputRef.value);\n });\n }\n\n componentWillLoad() {\n if (this.selectedIndices && !this.value) {\n this.value = this.selectedIndices;\n }\n\n this.updateSelection();\n }\n\n @Listen('ix-select-item:labelChange')\n onLabelChange(event: IxSelectItemLabelChangeEvent) {\n event.preventDefault();\n event.stopImmediatePropagation();\n this.updateSelection();\n }\n\n disconnectedCallback() {\n if (this.itemMutationObserver) {\n this.itemMutationObserver.disconnect();\n }\n }\n\n private itemExists(item: string) {\n return this.items.find((i) => i.label === item);\n }\n\n private dropdownVisibilityChanged(event: CustomEvent<boolean>) {\n this.dropdownShow = event.detail;\n\n if (event.detail) {\n this.inputRef.focus();\n this.inputRef.select();\n\n this.removeHiddenFromItems();\n this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n } else {\n this.navigationItem = undefined;\n this.updateSelection();\n this.inputFilterText = '';\n }\n }\n\n @OnListener<Select>('keydown', (self) => self.dropdownShow)\n async onKeyDown(event: KeyboardEvent) {\n if (event.code === 'ArrowDown' \|\| event.code === 'ArrowUp') {\n await this.onArrowNavigation(event, event.code);\n }\n\n if (!this.dropdownShow) {\n return;\n }\n\n if (event.code === 'Enter' \|\| event.code === 'NumpadEnter') {\n await this.onEnterNavigation();\n }\n\n if (event.code === 'Escape') {\n this.dropdownShow = false;\n }\n }\n\n private async onEnterNavigation() {\n if (this.isMultipleMode) {\n return;\n }\n\n let item: HTMLIxSelectItemElement;\n\n if (this.editable && !this.itemExists(this.inputFilterText)) {\n this.emitAddItem(this.inputFilterText);\n item = this.items[this.items.length - 1];\n }\n\n if (item) {\n item.onItemClick();\n }\n\n await this.dropdownRef?.updatePosition();\n\n if (this.isSingleMode && !this.editable) {\n this.dropdownShow = false;\n }\n }\n\n private async onArrowNavigation(\n event: KeyboardEvent,\n key: 'ArrowDown' \| 'ArrowUp'\n ) {\n if (event.defaultPrevented) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n this.dropdownShow = true;\n\n if (!this.navigationItem && document.activeElement === this.hostElement) {\n if (this.visibleItems.length) {\n this.applyFocusTo(this.visibleItems.shift());\n } else if (this.isAddItemVisible()) {\n this.focusAddItemButton();\n }\n return;\n }\n\n const moveUp = key === 'ArrowUp';\n const indexNonShadow = this.visibleNonShadowItems.indexOf(\n document.activeElement as any\n );\n\n // Slotted select items\n if (indexNonShadow === 0) {\n if (!this.visibleShadowItems.length && this.isAddItemVisible()) {\n this.focusAddItemButton();\n } else {\n this.applyFocusTo(this.visibleShadowItems.pop());\n }\n return;\n } else if (\n indexNonShadow !== -1 &&\n indexNonShadow === this.visibleNonShadowItems.length - 1\n ) {\n if (this.visibleShadowItems.length) {\n this.applyFocusTo(this.visibleShadowItems.shift());\n } else if (this.isAddItemVisible()) {\n this.focusAddItemButton();\n }\n return;\n }\n\n if (\n this.isAddItemVisible() &&\n this.addItemRef.contains(\n await this.navigationItem.getDropdownItemElement()\n )\n ) {\n if (moveUp) {\n this.applyFocusTo(this.visibleItems.pop());\n } else {\n if (this.visibleItems.length) {\n this.applyFocusTo(this.visibleItems.shift());\n }\n }\n return;\n }\n\n // Custom select items\n const indexShadow = this.visibleShadowItems.indexOf(\n this.navigationItem as any\n );\n\n if (moveUp) {\n if (indexShadow === 0) {\n if (this.visibleNonShadowItems.length) {\n this.applyFocusTo(this.visibleNonShadowItems.pop());\n } else if (this.isAddItemVisible()) {\n this.focusAddItemButton();\n }\n } else {\n this.applyFocusTo(this.visibleShadowItems[indexShadow - 1]);\n }\n } else {\n if (indexShadow === this.visibleShadowItems.length - 1) {\n if (this.isAddItemVisible()) {\n this.focusAddItemButton();\n } else {\n this.applyFocusTo(this.visibleItems.shift());\n }\n } else {\n this.applyFocusTo(this.visibleShadowItems[indexShadow + 1]);\n }\n }\n }\n\n private applyFocusTo(element: HTMLIxSelectItemElement) {\n if (!element) {\n return;\n }\n\n this.navigationItem = element;\n\n setTimeout(() => {\n element.shadowRoot\n .querySelector('ix-dropdown-item')\n .shadowRoot.querySelector('button')\n .focus();\n });\n }\n\n private focusAddItemButton() {\n if (this.addItemButton) {\n this.addItemButton.shadowRoot.querySelector('button').focus();\n this.navigationItem = this.addItemRef;\n }\n }\n\n private filterItemsWithTypeahead() {\n this.inputFilterText = this.inputRef.value;\n\n if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) {\n return;\n }\n\n if (this.inputFilterText) {\n this.items.forEach((item) => {\n item.classList.remove('d-none');\n if (\n !item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())\n ) {\n item.classList.add('d-none');\n }\n });\n } else {\n this.removeHiddenFromItems();\n }\n\n if (this.arrowFocusController) {\n this.arrowFocusController.items = this.visibleNonShadowItems;\n }\n\n this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n }\n\n private removeHiddenFromItems() {\n this.items.forEach((item) => {\n item.classList.remove('d-none');\n });\n }\n\n private clearInput() {\n this.inputRef.value = '';\n this.inputFilterText = '';\n }\n\n private clear() {\n this.clearInput();\n this.selectedLabels = [];\n this.value = [];\n this.valueChange.emit(null);\n this.dropdownShow = false;\n }\n\n private onInputBlur(e) {\n if (this.editable) {\n return;\n }\n\n if (this.isSingleMode) {\n return;\n }\n\n if (!this.dropdownShow && this.mode !== 'multiple') {\n e.target['value'] = this.selectedLabels;\n }\n }\n\n private placeholderValue() {\n if (this.disabled) {\n return '';\n }\n\n if (this.readonly) {\n return '';\n }\n\n if (this.editable) {\n return this.i18nPlaceholderEditable;\n }\n\n return this.i18nPlaceholder;\n }\n\n private isAddItemVisible() {\n return (\n !this.itemExists(this.inputFilterText) &&\n this.editable &&\n this.inputFilterText\n );\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n select: true,\n disabled: this.disabled,\n readonly: this.readonly,\n }}\n ref={(ref) => {\n this.dropdownAnchor = ref;\n if (!this.editable) this.dropdownWrapperRef = ref;\n }}\n >\n <div class=\"input-container\">\n <div class=\"chips\">\n {this.isMultipleMode\n ? this.selectedItems?.map((item) => (\n <ix-filter-chip\n disabled={this.disabled \|\| this.readonly}\n key={item.value}\n onCloseClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n this.itemClick(item.value);\n }}\n >\n {item.label}\n </ix-filter-chip>\n ))\n : ''}\n <div class=\"trigger\">\n <input\n autocomplete=\"off\"\n data-testid=\"input\"\n disabled={this.disabled}\n readOnly={this.readonly}\n type=\"text\"\n class={{\n 'allow-clear':\n this.allowClear && !!this.selectedLabels?.length,\n }}\n placeholder={this.placeholderValue()}\n value={this.inputValue}\n ref={(ref) => (this.inputRef = ref)}\n onBlur={(e) => this.onInputBlur(e)}\n onFocus={() => {\n this.navigationItem = undefined;\n }}\n onInput={() => this.filterItemsWithTypeahead()}\n onKeyDown={(e) => this.onKeyDown(e)}\n />\n {this.allowClear &&\n (this.selectedLabels?.length \|\| this.inputFilterText) ? (\n <ix-icon-button\n class=\"clear\"\n icon={'clear'}\n ghost\n oval\n size=\"16\"\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n this.clear();\n }}\n />\n ) : null}\n {this.disabled \|\| this.readonly ? null : (\n <ix-icon-button\n data-select-dropdown\n class={{ 'dropdown-visible': this.dropdownShow }}\n icon=\"chevron-down-small\"\n ghost\n ref={(ref) => {\n if (this.editable) this.dropdownWrapperRef = ref;\n }}\n ></ix-icon-button>\n )}\n </div>\n </div>\n </div>\n </div>\n <ix-dropdown\n ref={(ref) => (this.dropdownRef = ref)}\n show={this.dropdownShow}\n closeBehavior={this.isMultipleMode ? 'outside' : 'both'}\n class={{\n 'd-none': this.disabled \|\| this.readonly,\n }}\n anchor={this.dropdownAnchor}\n trigger={this.dropdownWrapperRef}\n onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n placement=\"bottom-start\"\n overwriteDropdownStyle={async () => {\n return {\n minWidth: `${this.hostElement.clientWidth}px`,\n };\n }}\n >\n <div\n class={{\n 'select-list-header': true,\n hidden: this.hideListHeader \|\| this.isDropdownEmpty,\n }}\n title={this.i18nSelectListHeader}\n >\n {this.i18nSelectListHeader}\n </div>\n <slot></slot>\n <div\n ref={(ref) => (this.customItemsContainerRef = ref)}\n class=\"d-contents\"\n ></div>\n {this.isAddItemVisible() ? (\n <ix-dropdown-item\n data-testid=\"add-item\"\n icon={'plus'}\n class={{\n 'add-item': true,\n }}\n label={this.inputFilterText}\n onItemClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n this.emitAddItem(this.inputFilterText);\n }}\n onFocus={() => (this.navigationItem = this.addItemRef)}\n ref={(ref) => {\n this.addItemRef = ref;\n }}\n ></ix-dropdown-item>\n ) : null}\n {this.isDropdownEmpty && !this.editable ? (\n <div class=\"select-list-header\">{this.i18nNoMatches}</div>\n ) : (\n ''\n )}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"select.js","mappings":"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","names":[],"sources":["src/components/select/select.scss?tag=ix-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/field';\n@import 'mixins/validation/form-component';\n\n:host {\n @include ix-component;\n\n display: inline-block;\n position: relative;\n min-height: 2rem;\n height: auto;\n border-radius: var(--theme-input--border-radius);\n\n .d-none {\n display: none;\n }\n\n .select {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n background-color: var(--theme-input--background);\n border: var(--theme-input--border-thickness) solid\n var(--theme-input--border-color);\n border-radius: var(--theme-input--border-radius);\n padding: 0 0 0 $small-space;\n box-shadow: var(--theme-inset-shadow-1) !important;\n\n @include hover {\n background-color: var(--theme-input--background--hover);\n border-color: var(--theme-input--border-color--hover);\n }\n\n &:focus-within {\n background-color: var(--theme-input--background--focus);\n border-color: var(--theme-input--border-color--focus);\n outline: 1px solid #119fff;\n outline-offset: var(--theme-input--focus--outline-offset);\n }\n }\n\n .select.readonly,\n .select.disabled {\n box-shadow: none !important;\n border: none;\n border-radius: 0;\n cursor: pointer;\n\n &,\n &:hover,\n &:active {\n background-color: transparent !important;\n }\n\n &:focus,\n &:focus-within,\n &:focus-visible {\n outline: none;\n }\n\n input:focus,\n input:focus-visible {\n outline: none;\n }\n }\n\n .select.disabled {\n border-bottom: var(--theme-input--border-thickness) solid\n var(--theme-color-weak-bdr);\n\n input {\n color: var(--theme-color-weak-text);\n }\n }\n\n .select.readonly {\n border-bottom: var(--theme-input--border-thickness) solid\n var(--theme-color-soft-bdr);\n\n input {\n color: var(--theme-color-std-text);\n }\n }\n\n .hidden {\n display: none !important;\n }\n\n .trigger {\n display: flex;\n align-items: center;\n flex-grow: 1;\n height: 100%;\n }\n\n .input-container {\n display: flex;\n position: relative;\n align-items: flex-start;\n width: 100%;\n height: 100%;\n\n .chips {\n position: relative;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n height: 100%;\n max-height: 3.5rem;\n flex-grow: 1;\n overflow-y: auto;\n\n > ix-filter-chip {\n margin: 0.1rem;\n }\n }\n\n input {\n @include ellipsis;\n @include text-default;\n background: transparent;\n height: 1.75rem;\n width: 100%;\n\n &,\n &:hover,\n &:focus-visible {\n border: none;\n outline: none;\n }\n\n &::placeholder {\n color: var(--theme-input-select-icon--color);\n }\n\n &.hide-placeholder::placeholder {\n opacity: 0;\n }\n }\n }\n\n .dropdown-visible {\n --ix-icon-button-color: var(--theme-color-dynamic--hover);\n }\n\n .add-item {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n position: relative;\n width: 100%;\n }\n\n .select-list-header {\n @include ellipsis;\n display: flex;\n align-items: center;\n height: $default-control-height;\n color: var(--theme-select-list-item-hint--color);\n margin: 0 $small-space 0 1rem;\n }\n}\n\n\n\n@include host-valid {\n}\n\n@include host-info {\n .select {\n border-color: var(--theme-input--border-color--info);\n }\n\n .select:hover {\n border-color: var(--theme-input--border-color--info--hover) !important;\n }\n\n .select:active {\n border-color: var(--theme-input--border-color--info--active) !important;\n }\n}\n\n@include host-warning {\n .select {\n border-color: var(--theme-input--border-color--warning);\n }\n\n .select:hover {\n border-color: var(--theme-input--border-color--warning--hover) !important;\n }\n\n .select:active {\n border-color: var(--theme-input--border-color--warning--active) !important;\n }\n}\n\n@include host-invalid {\n .select {\n border-color: var(--theme-input--border-color--invalid);\n background-color: var(--theme-input--background--invalid);\n box-shadow: none;\n }\n\n .select:hover {\n border-color: var(--theme-input--border-color--invalid--hover) !important;\n }\n\n .select:active {\n border-color: var(--theme-input--border-color--invalid--active) !important;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\nimport { ArrowFocusController } from '../utils/focus';\nimport { OnListener } from '../utils/listener';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport {\n HookValidationLifecycle,\n ValidationResults,\n IxInputFieldComponent,\n} from '../utils/field';\nimport { makeRef } from '../utils/make-ref';\nimport { a11yBoolean } from '../utils/a11y';\n\n/\n @form-ready 2.4.0\n /\n@Component({\n tag: 'ix-select',\n styleUrl: 'select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Select implements IxInputFieldComponent<string \| string[]> {\n @Element() hostElement!: HTMLIxSelectElement;\n @AttachInternals() formInternals!: ElementInternals;\n\n /\n A string that represents the element's name attribute,\n * containing a name that identifies the element when submitting the form.\n \n @since 2.4.0\n /\n @Prop({ reflect: true }) name?: string;\n\n /\n A Boolean attribute indicating that an option with a non-empty string value must be selected\n \n @since 2.4.0\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Label for the select component\n \n @since 2.4.0\n /\n @Prop() label?: string;\n\n /\n Warning text for the select component\n \n @since 2.4.0\n /\n @Prop() warningText?: string;\n\n /\n * Info text for the select component\n \n @since 2.4.0\n /\n @Prop() infoText?: string;\n\n /\n * Error text for the select component\n \n @since 2.4.0\n /\n @Prop() invalidText?: string;\n\n /\n * Valid text for the select component\n \n @since 2.4.0\n /\n @Prop() validText?: string;\n\n /\n * Helper text for the select component\n \n @since 2.4.0\n /\n @Prop() helperText?: string;\n\n /\n * Show helper, error, info, warning text as tooltip\n \n @since 2.4.0\n /\n @Prop() showTextAsTooltip?: boolean;\n\n /\n Indices of selected items.\n * This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.\n * @deprecated since 2.0.0. Use the `value` property instead.\n /\n @Prop({ mutable: true }) selectedIndices?: string \| string[];\n\n /\n Current selected value.\n * This corresponds to the value property of ix-select-items\n * @since 2.0.0\n /\n @Prop({ mutable: true }) value: string \| string[] = [];\n\n /\n Show clear button\n /\n @Prop() allowClear = false;\n\n /\n Selection mode\n /\n @Prop() mode: 'single' \| 'multiple' = 'single';\n\n /\n Select is extendable\n /\n @Prop() editable = false;\n\n /\n If true the select will be in disabled state\n /\n @Prop() disabled = false;\n\n /\n If true the select will be in readonly mode\n /\n @Prop() readonly = false;\n\n /\n Input field placeholder\n /\n @Prop() i18nPlaceholder = 'Select an option';\n\n /\n Input field placeholder for editable select\n /\n @Prop() i18nPlaceholderEditable = 'Type of select option';\n\n /\n Select list header\n /\n @Prop() i18nSelectListHeader = 'Please select an option';\n\n /\n Hint inside of dropdown if no items where found with current filter text\n \n @since 1.5.0\n /\n @Prop() i18nNoMatches = 'No matches';\n\n /\n Hide list header\n \n @since 1.5.0\n /\n @Prop() hideListHeader = false;\n\n /\n Value changed\n * @since 2.0.0\n /\n @Event() valueChange!: EventEmitter<string \| string[]>;\n\n /\n Item selection changed\n * @deprecated since 2.0.0. Use `valueChange` instead.\n /\n @Event() itemSelectionChange!: EventEmitter<string[]>;\n\n /\n Event dispatched whenever the text input changes.\n \n @since 2.0.0\n /\n @Event() inputChange!: EventEmitter<string>;\n\n /\n Item added to selection\n /\n @Event() addItem!: EventEmitter<string>;\n\n /\n Blur input\n /\n @Event() ixBlur!: EventEmitter<void>;\n\n @State() dropdownShow = false;\n @State() selectedLabels: string[];\n @State() dropdownWrapperRef!: HTMLElement;\n @State() dropdownAnchor!: HTMLElement;\n @State() isDropdownEmpty = false;\n @State() navigationItem: DropdownItemWrapper \| null = null;\n @State() inputFilterText: string;\n @State() inputValue: string \| null = null;\n\n @State() isInvalid = false;\n @State() isValid = false;\n @State() isInfo = false;\n @State() isWarning = false;\n\n private input!: HTMLInputElement;\n private inputRef = makeRef<HTMLInputElement>();\n private dropdownRef!: HTMLIxDropdownElement;\n private customItemsContainerRef!: HTMLDivElement;\n private addItemRef!: HTMLIxDropdownItemElement;\n\n private itemMutationObserver: MutationObserver;\n\n private arrowFocusController: ArrowFocusController;\n private focusControllerCallbackBind = this.focusDropdownItem.bind(this);\n\n private itemObserver = createMutationObserver(() => {\n this.arrowFocusController.items = this.visibleNonShadowItems;\n });\n\n get nonShadowItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-select-item'));\n }\n\n get visibleNonShadowItems() {\n return this.nonShadowItems.filter(\n (item) => !item.classList.contains('d-none')\n );\n }\n\n get shadowItems() {\n return Array.from(\n this.hostElement.shadowRoot!.querySelectorAll('ix-select-item')\n );\n }\n\n get visibleShadowItems() {\n return this.shadowItems.filter(\n (item) => !item.classList.contains('d-none')\n );\n }\n\n get items() {\n return [...this.nonShadowItems, ...this.shadowItems];\n }\n\n get visibleItems() {\n return this.items.filter((item) => !item.classList.contains('d-none'));\n }\n\n get selectedItems() {\n return this.items.filter((item) => item.selected);\n }\n\n get addItemButton() {\n return this.hostElement.shadowRoot!.querySelector('.add-item');\n }\n\n get isSingleMode() {\n return this.mode === 'single';\n }\n\n get isMultipleMode() {\n return this.mode === 'multiple';\n }\n\n get isEveryDropdownItemHidden() {\n return this.items.every((item) => item.classList.contains('d-none'));\n }\n\n @Watch('selectedIndices')\n watchSelectedIndices(value: string \| string[]) {\n this.value = value;\n this.updateSelection();\n }\n\n @Watch('value')\n watchValue(value: string \| string[]) {\n this.selectedIndices = value;\n this.updateSelection();\n }\n\n @Watch('dropdownShow')\n watchDropdownShow(show: boolean) {\n if (show) {\n this.arrowFocusController = new ArrowFocusController(\n this.visibleNonShadowItems,\n this.dropdownRef,\n this.focusControllerCallbackBind\n );\n\n this.arrowFocusController.wrap = !this.editable;\n\n this.itemObserver.observe(this.dropdownRef, {\n childList: true,\n subtree: true,\n });\n } else {\n this.arrowFocusController.disconnect();\n this.itemObserver.disconnect();\n }\n }\n\n @Listen('itemClick')\n onItemClicked(event: CustomEvent<string>) {\n const newId = event.detail;\n this.itemClick(newId);\n }\n\n async updateFormInternalValue(value: string \| string[]) {\n if (Array.isArray(value)) {\n this.formInternals.setFormValue(value.join(','));\n return;\n }\n\n this.formInternals.setFormValue(value);\n }\n\n /* @internal /\n @Method()\n async hasValidValue(): Promise<boolean> {\n return this.required && !!this.hasValue();\n }\n\n private hasValue() {\n if (Array.isArray(this.value)) {\n return !!this.value.length;\n }\n\n return !!this.value;\n }\n\n private focusDropdownItem(index: number) {\n this.navigationItem = null;\n\n if (index < this.visibleNonShadowItems.length) {\n const nestedDropdownItem =\n this.visibleNonShadowItems[index]?.shadowRoot?.querySelector(\n 'ix-dropdown-item'\n );\n\n requestAnimationFrame(() => {\n nestedDropdownItem.shadowRoot.querySelector('button').focus();\n });\n }\n }\n\n private itemClick(newId: string) {\n this.value = this.toggleValue(newId);\n this.updateSelection();\n this.emitValueChange(this.value);\n }\n\n private emitAddItem(value: string) {\n if (value === undefined \|\| value.trim() === '') {\n return;\n }\n\n const newItem = document.createElement('ix-select-item');\n newItem.value = value;\n newItem.label = value;\n\n this.customItemsContainerRef.appendChild(newItem);\n\n this.clearInput();\n this.itemClick(value);\n this.addItem.emit(value);\n }\n\n private toggleValue(itemValue: string) {\n if (!this.isMultipleMode) {\n return itemValue;\n }\n\n if (!this.value) {\n return [itemValue];\n }\n\n let value = this.value;\n\n if (!Array.isArray(value)) {\n value = [value];\n }\n\n if (value.includes(itemValue)) {\n return value.filter((value) => value !== itemValue);\n } else {\n return [...value, itemValue];\n }\n }\n\n private updateSelection() {\n let ids: string[] = [];\n\n if (this.value) {\n ids = Array.isArray(this.value) ? [...this.value] : [this.value];\n }\n\n this.items.forEach((item) => {\n item.selected = ids.some((i) => {\n if (typeof i !== typeof item.value) {\n return i.toString() === item.value.toString();\n } else {\n return i === item.value;\n }\n });\n });\n\n this.selectedLabels = this.selectedItems.map((item) => item.label);\n\n if (this.isSingleMode && this.selectedLabels?.length) {\n this.inputValue = this.selectedLabels[0];\n this.input && (this.input.value = this.inputValue);\n return;\n }\n\n this.inputValue = null;\n }\n\n private emitValueChange(value: string \| string[]) {\n this.valueChange.emit(value);\n\n if (!value) {\n this.itemSelectionChange.emit([]);\n } else {\n this.itemSelectionChange.emit(Array.isArray(value) ? value : [value]);\n }\n\n this.updateFormInternalValue(value);\n }\n\n componentDidLoad() {\n this.input.addEventListener('input', () => {\n this.dropdownShow = true;\n this.inputChange.emit(this.input.value);\n });\n }\n\n componentWillLoad() {\n if (this.selectedIndices && !this.value) {\n this.value = this.selectedIndices;\n }\n\n this.updateSelection();\n this.updateFormInternalValue(this.value);\n }\n\n @Listen('ix-select-item:labelChange')\n onLabelChange(event: IxSelectItemLabelChangeEvent) {\n event.preventDefault();\n event.stopImmediatePropagation();\n this.updateSelection();\n }\n\n disconnectedCallback() {\n if (this.itemMutationObserver) {\n this.itemMutationObserver.disconnect();\n }\n }\n\n private itemExists(item: string) {\n return this.items.find((i) => i.label === item);\n }\n\n private dropdownVisibilityChanged(event: CustomEvent<boolean>) {\n this.dropdownShow = event.detail;\n\n if (event.detail) {\n this.input.focus();\n this.input.select();\n\n this.removeHiddenFromItems();\n this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n } else {\n this.navigationItem = null;\n this.updateSelection();\n this.inputFilterText = '';\n }\n }\n\n @OnListener<Select>('keydown', (self) => self.dropdownShow)\n async onKeyDown(event: KeyboardEvent) {\n if (event.code === 'ArrowDown' \|\| event.code === 'ArrowUp') {\n await this.onArrowNavigation(event, event.code);\n }\n\n if (!this.dropdownShow) {\n return;\n }\n\n if (event.code === 'Enter' \|\| event.code === 'NumpadEnter') {\n await this.onEnterNavigation();\n }\n\n if (event.code === 'Escape') {\n this.dropdownShow = false;\n }\n }\n\n private async onEnterNavigation() {\n if (this.isMultipleMode) {\n return;\n }\n\n let item: HTMLIxSelectItemElement \| undefined;\n\n if (this.editable && !this.itemExists(this.inputFilterText)) {\n this.emitAddItem(this.inputFilterText);\n item = this.items[this.items.length - 1];\n }\n\n if (item) {\n item.onItemClick();\n }\n\n await this.dropdownRef?.updatePosition();\n\n if (this.isSingleMode && !this.editable) {\n this.dropdownShow = false;\n }\n }\n\n private async onArrowNavigation(\n event: KeyboardEvent,\n key: 'ArrowDown' \| 'ArrowUp'\n ) {\n if (event.defaultPrevented) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n this.dropdownShow = true;\n\n if (!this.navigationItem && document.activeElement === this.hostElement) {\n if (this.visibleItems.length) {\n this.applyFocusTo(this.visibleItems.shift());\n } else if (this.isAddItemVisible()) {\n this.focusAddItemButton();\n }\n return;\n }\n\n const moveUp = key === 'ArrowUp';\n const indexNonShadow = document.activeElement\n ? this.visibleNonShadowItems.indexOf(\n document.activeElement as HTMLIxSelectItemElement\n )\n : -1;\n\n // Slotted select items\n if (indexNonShadow === 0) {\n if (!this.visibleShadowItems.length && this.isAddItemVisible()) {\n this.focusAddItemButton();\n } else {\n this.applyFocusTo(this.visibleShadowItems.pop());\n }\n return;\n } else if (\n indexNonShadow !== -1 &&\n indexNonShadow === this.visibleNonShadowItems.length - 1\n ) {\n if (this.visibleShadowItems.length) {\n this.applyFocusTo(this.visibleShadowItems.shift());\n } else if (this.isAddItemVisible()) {\n this.focusAddItemButton();\n }\n return;\n }\n\n if (!this.navigationItem) {\n return;\n }\n\n if (\n this.isAddItemVisible() &&\n this.addItemRef.contains(\n await this.navigationItem.getDropdownItemElement()\n )\n ) {\n if (moveUp) {\n this.applyFocusTo(this.visibleItems.pop());\n } else {\n if (this.visibleItems.length) {\n this.applyFocusTo(this.visibleItems.shift());\n }\n }\n return;\n }\n\n // Custom select items\n const indexShadow = this.visibleShadowItems.indexOf(\n this.navigationItem as HTMLIxSelectItemElement\n );\n\n if (moveUp) {\n if (indexShadow === 0) {\n if (this.visibleNonShadowItems.length) {\n this.applyFocusTo(this.visibleNonShadowItems.pop());\n } else if (this.isAddItemVisible()) {\n this.focusAddItemButton();\n }\n } else {\n this.applyFocusTo(this.visibleShadowItems[indexShadow - 1]);\n }\n } else {\n if (indexShadow === this.visibleShadowItems.length - 1) {\n if (this.isAddItemVisible()) {\n this.focusAddItemButton();\n } else {\n this.applyFocusTo(this.visibleItems.shift());\n }\n } else {\n this.applyFocusTo(this.visibleShadowItems[indexShadow + 1]);\n }\n }\n }\n\n private applyFocusTo(element?: HTMLIxSelectItemElement) {\n if (!element) {\n return;\n }\n\n this.navigationItem = element;\n\n setTimeout(() => {\n element.shadowRoot\n .querySelector('ix-dropdown-item')\n .shadowRoot.querySelector('button')\n .focus();\n });\n }\n\n private focusAddItemButton() {\n if (this.addItemButton) {\n this.addItemButton.shadowRoot?.querySelector('button')?.focus();\n this.navigationItem = this.addItemRef;\n }\n }\n\n private filterItemsWithTypeahead() {\n this.inputFilterText = this.input.value;\n\n if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) {\n return;\n }\n\n if (this.inputFilterText) {\n this.items.forEach((item) => {\n item.classList.remove('d-none');\n if (\n !item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())\n ) {\n item.classList.add('d-none');\n }\n });\n } else {\n this.removeHiddenFromItems();\n }\n\n if (this.arrowFocusController) {\n this.arrowFocusController.items = this.visibleNonShadowItems;\n }\n\n this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n }\n\n private removeHiddenFromItems() {\n this.items.forEach((item) => {\n item.classList.remove('d-none');\n });\n }\n\n private clearInput() {\n this.input.value = '';\n this.inputFilterText = '';\n }\n\n private clear() {\n this.clearInput();\n this.selectedLabels = [];\n this.value = [];\n this.emitValueChange([]);\n this.dropdownShow = false;\n }\n\n private onInputBlur(event: Event) {\n this.ixBlur.emit();\n\n if (this.editable) {\n return;\n }\n\n if (this.isSingleMode) {\n return;\n }\n\n const target = event.target as HTMLInputElement;\n\n if (!this.dropdownShow && this.mode !== 'multiple') {\n target.value = this.selectedLabels.toString();\n }\n }\n\n private placeholderValue() {\n if (this.disabled) {\n return '';\n }\n\n if (this.readonly) {\n return '';\n }\n\n if (this.editable) {\n return this.i18nPlaceholderEditable;\n }\n\n return this.i18nPlaceholder;\n }\n\n private isAddItemVisible() {\n return (\n !this.itemExists(this.inputFilterText) &&\n this.editable &&\n this.inputFilterText\n );\n }\n\n @HookValidationLifecycle()\n onValidationChange({\n isInvalid,\n isInvalidByRequired,\n isValid,\n isInfo,\n isWarning,\n }: ValidationResults) {\n this.isInvalid = isInvalid \|\| isInvalidByRequired;\n this.isValid = isValid;\n this.isWarning = isWarning;\n this.isInfo = isInfo;\n }\n\n /* @internal /\n @Method()\n async getAssociatedFormElement(): Promise<HTMLFormElement \| null> {\n return this.formInternals.form;\n }\n\n /\n Returns the native input element used in the component.\n */\n @Method()\n getNativeInputElement(): Promise<HTMLInputElement> {\n return Promise.resolve(this.input);\n }\n\n render() {\n return (\n <Host\n aria-disabled={a11yBoolean(this.disabled)}\n class={{\n disabled: this.disabled,\n }}\n >\n <ix-field-wrapper\n required={this.required}\n label={this.label}\n helperText={this.helperText}\n invalidText={this.invalidText}\n infoText={this.infoText}\n warningText={this.warningText}\n validText={this.validText}\n showTextAsTooltip={this.showTextAsTooltip}\n isInvalid={this.isInvalid}\n isValid={this.isValid}\n isInfo={this.isInfo}\n isWarning={this.isWarning}\n controlRef={this.inputRef}\n >\n <slot name=\"label\" slot=\"label\"></slot>\n\n <div\n class={{\n select: true,\n disabled: this.disabled,\n readonly: this.readonly,\n }}\n ref={(ref) => {\n this.dropdownAnchor = ref!;\n if (!this.editable) this.dropdownWrapperRef = ref!;\n }}\n >\n <div class=\"input-container\">\n <div class=\"chips\">\n {this.isMultipleMode\n ? this.selectedItems?.map((item) => (\n <ix-filter-chip\n disabled={this.disabled \|\| this.readonly}\n key={item.value}\n onCloseClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n this.itemClick(item.value);\n }}\n >\n {item.label}\n </ix-filter-chip>\n ))\n : ''}\n <div class=\"trigger\">\n <input\n autocomplete=\"off\"\n data-testid=\"input\"\n disabled={this.disabled}\n readOnly={this.readonly}\n type=\"text\"\n class={{\n 'allow-clear':\n this.allowClear && !!this.selectedLabels?.length,\n }}\n placeholder={this.placeholderValue()}\n value={this.inputValue ?? ''}\n ref={(ref) => {\n this.input = ref!;\n this.inputRef(ref!);\n }}\n onBlur={(e) => this.onInputBlur(e)}\n onFocus={() => {\n this.navigationItem = null;\n }}\n onInput={() => this.filterItemsWithTypeahead()}\n onKeyDown={(e) => this.onKeyDown(e)}\n />\n {this.allowClear &&\n (this.selectedLabels?.length \|\| this.inputFilterText) ? (\n <ix-icon-button\n class=\"clear\"\n icon={'clear'}\n ghost\n oval\n size=\"16\"\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n this.clear();\n }}\n />\n ) : null}\n {this.disabled \|\| this.readonly ? null : (\n <ix-icon-button\n data-select-dropdown\n class={{ 'dropdown-visible': this.dropdownShow }}\n icon=\"chevron-down-small\"\n ghost\n ref={(ref) => {\n if (this.editable) this.dropdownWrapperRef = ref!;\n }}\n ></ix-icon-button>\n )}\n </div>\n </div>\n </div>\n </div>\n </ix-field-wrapper>\n <ix-dropdown\n ref={(ref) => (this.dropdownRef = ref!)}\n show={this.dropdownShow}\n closeBehavior={this.isMultipleMode ? 'outside' : 'both'}\n class={{\n 'd-none': this.disabled \|\| this.readonly,\n }}\n anchor={this.dropdownAnchor}\n trigger={this.dropdownWrapperRef}\n onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n placement=\"bottom-start\"\n overwriteDropdownStyle={async () => {\n const minWidth = this.hostElement.shadowRoot\n ?.querySelector('.select')\n ?.getBoundingClientRect().width;\n\n return {\n minWidth: `${minWidth}px`,\n };\n }}\n >\n <div\n class={{\n 'select-list-header': true,\n hidden: this.hideListHeader \|\| this.isDropdownEmpty,\n }}\n title={this.i18nSelectListHeader}\n onClick={(e) => e.preventDefault()}\n >\n {this.i18nSelectListHeader}\n </div>\n <slot></slot>\n <div\n ref={(ref) => (this.customItemsContainerRef = ref!)}\n class=\"d-contents\"\n ></div>\n {this.isAddItemVisible() ? (\n <ix-dropdown-item\n data-testid=\"add-item\"\n icon={'plus'}\n class={{\n 'add-item': true,\n }}\n label={this.inputFilterText}\n onItemClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n this.emitAddItem(this.inputFilterText);\n }}\n onFocus={() => (this.navigationItem = this.addItemRef)}\n ref={(ref) => {\n this.addItemRef = ref!;\n }}\n ></ix-dropdown-item>\n ) : null}\n {this.isDropdownEmpty && !this.editable ? (\n <div class=\"select-list-header\">{this.i18nNoMatches}</div>\n ) : (\n ''\n )}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/spinner.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const spinnerCss = ":host(.xx-small){display:block;position:relative;width:0.75rem;height:0.75rem;min-width:0.75rem;min-height:0.75rem;max-width:0.75rem;max-height:0.75rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.xx-small) *,:host(.xx-small) *::after,:host(.xx-small) *::before{box-sizing:border-box}:host(.xx-small) ::-webkit-scrollbar-button{display:none}:host(.xx-small) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.xx-small) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.xx-small) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.xx-small) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.xx-small) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.xx-small) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.xx-small)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.xx-small)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.x-small){display:block;position:relative;width:1.25rem;height:1.25rem;min-width:1.25rem;min-height:1.25rem;max-width:1.25rem;max-height:1.25rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.x-small) *,:host(.x-small) *::after,:host(.x-small) *::before{box-sizing:border-box}:host(.x-small) ::-webkit-scrollbar-button{display:none}:host(.x-small) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.x-small) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.x-small) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.x-small) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.x-small) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.x-small) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.x-small)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.x-small)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.small){display:block;position:relative;width:1.5rem;height:1.5rem;min-width:1.5rem;min-height:1.5rem;max-width:1.5rem;max-height:1.5rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.small) *,:host(.small) *::after,:host(.small) *::before{box-sizing:border-box}:host(.small) ::-webkit-scrollbar-button{display:none}:host(.small) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.small) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.small) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.small) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.small) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.small) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.small)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.small)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.medium){display:block;position:relative;width:2rem;height:2rem;min-width:2rem;min-height:2rem;max-width:2rem;max-height:2rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.medium) *,:host(.medium) *::after,:host(.medium) *::before{box-sizing:border-box}:host(.medium) ::-webkit-scrollbar-button{display:none}:host(.medium) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.medium) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.medium) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.medium) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.medium) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.medium) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.medium)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.medium)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.large){display:block;position:relative;width:6rem;height:6rem;min-width:6rem;min-height:6rem;max-width:6rem;max-height:6rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.large) *,:host(.large) *::after,:host(.large) *::before{box-sizing:border-box}:host(.large) ::-webkit-scrollbar-button{display:none}:host(.large) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.large) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.large) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.large) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.large) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.large) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.large)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.large)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}";
+const spinnerCss = ":host(.xx-small){display:block;position:relative;width:0.75rem;height:0.75rem;min-width:0.75rem;min-height:0.75rem;max-width:0.75rem;max-height:0.75rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.xx-small) *,:host(.xx-small) *::after,:host(.xx-small) *::before{box-sizing:border-box}:host(.xx-small) ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host(.xx-small) *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host(.xx-small) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.xx-small) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.xx-small) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.xx-small) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.xx-small) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.xx-small) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.xx-small)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.xx-small)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.x-small){display:block;position:relative;width:1.25rem;height:1.25rem;min-width:1.25rem;min-height:1.25rem;max-width:1.25rem;max-height:1.25rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.x-small) *,:host(.x-small) *::after,:host(.x-small) *::before{box-sizing:border-box}:host(.x-small) ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host(.x-small) *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host(.x-small) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.x-small) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.x-small) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.x-small) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.x-small) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.x-small) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.x-small)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.x-small)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.small){display:block;position:relative;width:1.5rem;height:1.5rem;min-width:1.5rem;min-height:1.5rem;max-width:1.5rem;max-height:1.5rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.small) *,:host(.small) *::after,:host(.small) *::before{box-sizing:border-box}:host(.small) ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host(.small) *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host(.small) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.small) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.small) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.small) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.small) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.small) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.small)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.small)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.medium){display:block;position:relative;width:2rem;height:2rem;min-width:2rem;min-height:2rem;max-width:2rem;max-height:2rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.medium) *,:host(.medium) *::after,:host(.medium) *::before{box-sizing:border-box}:host(.medium) ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host(.medium) *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host(.medium) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.medium) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.medium) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.medium) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.medium) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.medium) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.medium)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.medium)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.large){display:block;position:relative;width:6rem;height:6rem;min-width:6rem;min-height:6rem;max-width:6rem;max-height:6rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.large) *,:host(.large) *::after,:host(.large) *::before{box-sizing:border-box}:host(.large) ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host(.large) *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host(.large) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.large) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.large) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.large) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.large) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.large) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.large)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.large)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}";
 const IxSpinnerStyle0 = spinnerCss;
 const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLElement {
@@ -13,7 +13,7 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLEleme
         this.hideTrack = false;
     }
     render() {
-        return (h(Host, { key: '6ca735841b5d203cf8ef66f8675f73d2988d7518', class: {
+        return (h(Host, { key: '35482777d8c4805ff3df70006f061fd493cc4f2d', class: {
                 primary: this.variant === 'primary',
                 'xx-small': this.size === 'xx-small',
                 'x-small': this.size === 'x-small',

package/components/spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"spinner.js","mappings":";;AAAA,MAAM,UAAU,GAAG,~~sjbAAsjb~~,CAAC;~~AAC1kb~~,wBAAe,UAAU;;MCeZ,OAAO;;;;;uBAMyB,WAAW;oBAMpD,QAAQ;yBAKU,KAAK;;IAEzB,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;gBACpC,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBAClC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBAC9B,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC5B,YAAY,EAAE,IAAI,CAAC,SAAS;aAC7B,GACK,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/shadow-dom/component';\n\n@mixin ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 4px) {\n :host(.#{$host-class}) {\n @include ix-component;\n display: block;\n position: relative;\n\n width: $size;\n height: $size;\n min-width: $size;\n min-height: $size;\n max-width: $size;\n max-height: $size;\n border-radius: 100%;\n position: relative;\n animation: rotate 2s linear infinite;\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes clipMask {\n 0% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 12.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 25% {\n clip-path: polygon(\n 50% 50%,\n 0 0,\n 100% 0,\n 100% 100%,\n 100% 100%,\n 100% 100%\n );\n }\n 37.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 50% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 62.5% {\n clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 75% {\n clip-path: polygon(\n 50% 50%,\n 100% 100%,\n 100% 100%,\n 100% 100%,\n 0 100%,\n 0 0\n );\n }\n 87.5% {\n clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n }\n 100% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n }\n }\n\n :host(.#{$host-class})::after {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid\n var(--ix-button-color, var(--theme-color-soft-text));\n animation: clipMask 3s linear infinite;\n }\n\n :host(:not(.hide-track)):host(.#{$host-class})::before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid var(--theme-color-ghost--hover);\n }\n\n :host(.primary)::after {\n border-color: var(--theme-color-dynamic);\n }\n\n :host(.primary)::before {\n border-color: var(--theme-color-ghost--hover);\n }\n}\n\n@include ix-spinner($host-class: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($host-class: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($host-class: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($host-class: 'large', $size: 6rem, $track-size: 4px);\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() hostElement!: HTMLIxSpinnerElement;\n\n /\n Variant of spinner\n /\n @Prop() variant: 'primary' \| 'secondary' = 'secondary';\n\n /\n Size of spinner\n /\n @Prop() size: 'xx-small' \| 'x-small' \| 'small' \| 'medium' \| 'large' =\n 'medium';\n\n /\n @internal\n */\n @Prop() hideTrack = false;\n\n render() {\n return (\n <Host\n class={{\n primary: this.variant === 'primary',\n 'xx-small': this.size === 'xx-small',\n 'x-small': this.size === 'x-small',\n small: this.size === 'small',\n medium: this.size === 'medium',\n large: this.size === 'large',\n 'hide-track': this.hideTrack,\n }}\n ></Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"spinner.js","mappings":";;AAAA,MAAM,UAAU,GAAG,g3cAAg3c,CAAC;AACp4c,wBAAe,UAAU;;MCeZ,OAAO;;;;;uBAMyB,WAAW;oBAMpD,QAAQ;yBAKU,KAAK;;IAEzB,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;gBACpC,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBAClC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBAC9B,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC5B,YAAY,EAAE,IAAI,CAAC,SAAS;aAC7B,GACK,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/shadow-dom/component';\n\n@mixin ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 4px) {\n :host(.#{$host-class}) {\n @include ix-component;\n display: block;\n position: relative;\n\n width: $size;\n height: $size;\n min-width: $size;\n min-height: $size;\n max-width: $size;\n max-height: $size;\n border-radius: 100%;\n position: relative;\n animation: rotate 2s linear infinite;\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes clipMask {\n 0% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 12.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 25% {\n clip-path: polygon(\n 50% 50%,\n 0 0,\n 100% 0,\n 100% 100%,\n 100% 100%,\n 100% 100%\n );\n }\n 37.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 50% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 62.5% {\n clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 75% {\n clip-path: polygon(\n 50% 50%,\n 100% 100%,\n 100% 100%,\n 100% 100%,\n 0 100%,\n 0 0\n );\n }\n 87.5% {\n clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n }\n 100% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n }\n }\n\n :host(.#{$host-class})::after {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid\n var(--ix-button-color, var(--theme-color-soft-text));\n animation: clipMask 3s linear infinite;\n }\n\n :host(:not(.hide-track)):host(.#{$host-class})::before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid var(--theme-color-ghost--hover);\n }\n\n :host(.primary)::after {\n border-color: var(--theme-color-dynamic);\n }\n\n :host(.primary)::before {\n border-color: var(--theme-color-ghost--hover);\n }\n}\n\n@include ix-spinner($host-class: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($host-class: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($host-class: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($host-class: 'large', $size: 6rem, $track-size: 4px);\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() hostElement!: HTMLIxSpinnerElement;\n\n /\n Variant of spinner\n /\n @Prop() variant: 'primary' \| 'secondary' = 'secondary';\n\n /\n Size of spinner\n /\n @Prop() size: 'xx-small' \| 'x-small' \| 'small' \| 'medium' \| 'large' =\n 'medium';\n\n /\n @internal\n */\n @Prop() hideTrack = false;\n\n render() {\n return (\n <Host\n class={{\n primary: this.variant === 'primary',\n 'xx-small': this.size === 'xx-small',\n 'x-small': this.size === 'x-small',\n small: this.size === 'small',\n medium: this.size === 'medium',\n large: this.size === 'large',\n 'hide-track': this.hideTrack,\n }}\n ></Host>\n );\n }\n}\n"],"version":3}

package/components/tab-item.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-const tabItemCss = "@charset \"UTF-8\";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host .text span,:host .text span::before{pointer-events:none}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.selected::after{display:none}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .counter::after{display:none}:host .hidden{display:none}:host(.circle){height:72px}:host(.top) ::after{top:0}:host(.bottom) ::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle)) ::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle)) ::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled) ::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled)) ::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}";
+const tabItemCss = "@charset \"UTF-8\";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host .text span,:host .text span::before{pointer-events:none}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}";
 const IxTabItemStyle0 = tabItemCss;
 const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLElement {
@@ -31,7 +31,7 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
         };
     }
     render() {
-        return (h(Host, { key: '77688f6b83f53ba0de891d2ed529c7b82941930a', class: this.tabItemClasses({
+        return (h(Host, { key: 'b61de72c11dd4900ec0fd2ca5ebb8beaf98e8709', class: this.tabItemClasses({
                 selected: this.selected,
                 disabled: this.disabled,
                 small: this.small,
@@ -46,12 +46,12 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
                 if (clientEvent.defaultPrevented) {
                     event.stopPropagation();
                 }
-            } }, h("div", { key: 'd1790baee81972038f8a09c0e7a0ee3124e828a6', class: {
+            } }, h("div", { key: 'f348e684d80e233707c6e2a36ba3f4a882c59f7b', class: {
                 circle: this.rounded,
                 text: !this.rounded,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, h("slot", { key: '7dcd5bcd496e9955b45f00b570fb935a0e9a8969' })), h("div", { key: '435deec3155b879b5f8a397124bf9a198283c2bd', class: {
+            } }, h("slot", { key: 'd825fade370f3f9c4fdda4856886fba231d8f410' })), h("div", { key: '8eab5e1d95bd6412eeb840660b3d1f32343f21e6', class: {
                 counter: true,
                 selected: this.selected,
                 hidden: !(this.rounded && this.counter !== undefined),

package/components/tab-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"tab-item.js","mappings":";;AAAA,MAAM,UAAU,GAAG,~~gvIAAgvI~~,CAAC;~~AACpwI~~,wBAAe,UAAU;;MCmBZ,OAAO;;;;;;wBAIC,KAAK;wBAKL,KAAK;qBAKR,KAAK;oBAKN,KAAK;uBAKF,KAAK;;sBAUgB,MAAM;yBAKP,QAAQ;;IAStC,cAAc,CAAC,KAQtB;QACC,OAAO;YACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,WAAW,EAAE,KAAK,CAAC,KAAK;YACxB,IAAI,EAAE,KAAK,CAAC,KAAK;YACjB,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;YACvC,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;YACpC,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;YAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;SACrB,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,MAAM,EAAE,IAAI,CAAC,OAAO;aACrB,CAAC,EACF,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,CAAC,KAAiB;gBACzB,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;oBACrC,WAAW,EAAE,KAAK;iBACnB,CAAC,CAAC;gBAEH,IAAI,WAAW,CAAC,gBAAgB,EAAE;oBAChC,KAAK,CAAC,eAAe,EAAE,CAAC;iBACzB;aACF,IAED,4DACE,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI,CAAC,OAAO;gBACpB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;gBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,8DAAa,CACT,EACN,4DACE,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;gBACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEA,IAAI,CAAC,OAAO,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px $large-space;\n line-height: 20px;\n font-size: 14px;\n font-weight: bold;\n background-color: var(--theme-tab--background);\n color: var(--theme-tab--color);\n\n ::after {\n content: '';\n position: absolute;\n background-color: var(--theme-tab-indicator--background);\n width: 100%;\n height: var(--theme-tab-indicator--height);\n left: 0;\n }\n\n .text {\n @include ellipsis;\n\n span,\n span::before {\n pointer-events: none;\n }\n\n vertical-align: middle;\n }\n\n .circle {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 3rem;\n width: 3rem;\n background-color: var(--theme-animated-tab-indicator--background);\n border-radius: 50%;\n border: 2px solid var(--theme-animated-tab-circle--border-color);\n color: var(--theme-an…icon--color);\n cursor: pointer;\n\n &.selected:not(.disabled) {\n background-color: var(--theme-animated-tab-circle--background--selected);\n color: var(--theme-animated-tab-icon--color--selected);\n border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n &:hover {\n background-color: var(\n --theme-animated-tab-circle--background--selected\n );\n }\n }\n\n &:hover {\n background-color: var(--theme-animated-tab-circle--background--hover);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &.disabled {\n background-color: var(--theme-animated-tab-circle--background--disabled);\n border-color: var(--theme-animated-tab-circle--border-color--disabled);\n }\n }\n\n .counter {\n position: absolute;\n z-index: 1;\n height: 16px;\n width: auto;\n background-color: var(--theme-pill-outline--background);\n border: 1px solid var(--theme-tab-pill--border-color);\n border-radius: 100px;\n bottom: 6px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-left: $tiny-space;\n padding-right: $tiny-space;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-pill-outline--color);\n cursor: pointer;\n\n &.selected {\n border-color: var(--theme-tab-pill--border-color--selected);\n~~\n &::after {\n display: none;\n }\n~~ }\n\n &.disabled {\n border-color: var(--theme-tab-pill--border-color--disabled);\n }\n~~\n &::after {\n display: none;\n }\n~~ }\n\n .hidden {\n display: none;\n }\n}\n\n:host(.circle) {\n height: 72px;\n}\n\n:host(.top) {\n ::after {\n top: 0;\n }\n}\n\n:host(.bottom) {\n ::after {\n bottom: 0;\n }\n}\n\n:host(.stretched) {\n flex-basis: 100%;\n width: 100%;\n @include ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n background-color: var(--theme-tab--background--hover);\n color: var(--theme-tab-color-hover);\n cursor: pointer;\n\n ::after {\n background-color: var(--theme-tab-indicator--background--hover);\n }\n}\n\n:host(:active:not(.circle)) {\n background-color: var(--theme-tab--background--active);\n color: var(--theme-tab-color--active);\n\n ::after {\n background-color: var(--theme-tab-indicator--background--active);\n }\n}\n\n:host(:focus-visible) {\n outline: 0px solid var(--focus--border-color);\n\n .circle {\n outline: 1px solid var(--focus--border-color);\n }\n}\n\n:host(:focus-visible:not(.circle)) {\n outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n pointer-events: none;\n color: var(--theme-tab--color--disabled);\n background-color: var(--theme-tab--background--disabled);\n\n ::after {\n background-color: var(--theme-tab-indicator--background--disabled);\n }\n}\n\n:host(.selected:not(.disabled)) {\n background-color: var(--theme-tab--background--selected);\n color: var(--theme-tab--color--selected);\n\n ::after {\n background-color: var(--theme-tab-indicator--background--selected);\n }\n}\n\n:host(.icon) {\n padding: $large-space $small-space;\n}\n\n:host(.small-tab) {\n height: 32px;\n padding: $default-space;\n}\n\n:host(.small-tab.icon) {\n padding: $default-space $tiny-space;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type TabClickDetail = {\n nativeEvent: MouseEvent;\n};\n\n@Component({\n tag: 'ix-tab-item',\n styleUrl: 'tab-item.scss',\n shadow: true,\n})\nexport class TabItem {\n /\n Set selected tab\n /\n @Prop() selected = false;\n\n /\n Set disabled tab\n /\n @Prop() disabled = false;\n\n /\n Set small size tab\n /\n @Prop() small = false;\n\n /\n Set icon only tab\n /\n @Prop() icon = false;\n\n /\n Set rounded tab\n /\n @Prop() rounded = false;\n\n /\n Set counter value\n /\n @Prop() counter: number;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set selected placement\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n On tab click\n \n @since 2.0.0\n */\n @Event() tabClick: EventEmitter<TabClickDetail>;\n\n private tabItemClasses(props: {\n selected: boolean;\n disabled: boolean;\n small: boolean;\n icon: boolean;\n circle: boolean;\n layout: 'auto' \| 'stretched';\n placement: 'bottom' \| 'top';\n }) {\n return {\n selected: props.selected,\n disabled: props.disabled,\n 'small-tab': props.small,\n icon: props.small,\n stretched: props.layout === 'stretched',\n bottom: props.placement === 'bottom',\n top: props.placement === 'top',\n circle: props.circle,\n };\n }\n\n render() {\n return (\n <Host\n class={this.tabItemClasses({\n selected: this.selected,\n disabled: this.disabled,\n small: this.small,\n icon: this.icon,\n layout: this.layout,\n placement: this.placement,\n circle: this.rounded,\n })}\n tabIndex={0}\n onClick={(event: MouseEvent) => {\n const clientEvent = this.tabClick.emit({\n nativeEvent: event,\n });\n\n if (clientEvent.defaultPrevented) {\n event.stopPropagation();\n }\n }}\n >\n <div\n class={{\n circle: this.rounded,\n text: !this.rounded,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n <div\n class={{\n counter: true,\n selected: this.selected,\n hidden: !(this.rounded && this.counter !== undefined),\n disabled: this.disabled,\n }}\n >\n {this.counter}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"tab-item.js","mappings":";;AAAA,MAAM,UAAU,GAAG,szIAAszI,CAAC;AAC10I,wBAAe,UAAU;;MCmBZ,OAAO;;;;;;wBAIC,KAAK;wBAKL,KAAK;qBAKR,KAAK;oBAKN,KAAK;uBAKF,KAAK;;sBAUgB,MAAM;yBAKP,QAAQ;;IAStC,cAAc,CAAC,KAQtB;QACC,OAAO;YACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,WAAW,EAAE,KAAK,CAAC,KAAK;YACxB,IAAI,EAAE,KAAK,CAAC,KAAK;YACjB,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;YACvC,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;YACpC,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;YAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;SACrB,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,MAAM,EAAE,IAAI,CAAC,OAAO;aACrB,CAAC,EACF,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,CAAC,KAAiB;gBACzB,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;oBACrC,WAAW,EAAE,KAAK;iBACnB,CAAC,CAAC;gBAEH,IAAI,WAAW,CAAC,gBAAgB,EAAE;oBAChC,KAAK,CAAC,eAAe,EAAE,CAAC;iBACzB;aACF,IAED,4DACE,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI,CAAC,OAAO;gBACpB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;gBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,8DAAa,CACT,EACN,4DACE,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;gBACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEA,IAAI,CAAC,OAAO,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px $large-space;\n line-height: 20px;\n font-size: 14px;\n font-weight: bold;\n background-color: var(--theme-tab--background);\n color: var(--theme-tab--color);\n\n &::after {\n content: '';\n position: absolute;\n background-color: var(--theme-tab-indicator--background);\n width: 100%;\n height: var(--theme-tab-indicator--height);\n left: 0;\n }\n\n .text {\n @include ellipsis;\n\n span,\n span::before {\n pointer-events: none;\n }\n\n vertical-align: middle;\n }\n\n .circle {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 3rem;\n width: 3rem;\n background-color: var(--theme-animated-tab-indicator--background);\n border-radius: 50%;\n border: 2px solid var(--theme-animated-tab-circle--border-color);\n color: var(--theme-an…icon--color);\n cursor: pointer;\n\n &.selected:not(.disabled) {\n background-color: var(--theme-animated-tab-circle--background--selected);\n color: var(--theme-animated-tab-icon--color--selected);\n border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n &:hover {\n background-color: var(\n --theme-animated-tab-circle--background--selected\n );\n }\n }\n\n &:hover {\n background-color: var(--theme-animated-tab-circle--background--hover);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &.disabled {\n background-color: var(--theme-animated-tab-circle--background--disabled);\n border-color: var(--theme-animated-tab-circle--border-color--disabled);\n }\n }\n\n .counter {\n position: absolute;\n z-index: 1;\n height: 16px;\n width: auto;\n background-color: var(--theme-pill-outline--background);\n border: 1px solid var(--theme-tab-pill--border-color);\n border-radius: 100px;\n bottom: 6px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-left: $tiny-space;\n padding-right: $tiny-space;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-pill-outline--color);\n cursor: pointer;\n\n &.selected {\n border-color: var(--theme-tab-pill--border-color--selected);\n }\n\n &.disabled {\n border-color: var(--theme-tab-pill--border-color--disabled);\n }\n }\n\n .hidden {\n display: none;\n }\n}\n\n:host(.circle) {\n height: 72px;\n}\n\n:host(.top) {\n &::after {\n top: 0;\n }\n}\n\n:host(.bottom) {\n &::after {\n bottom: 0;\n }\n}\n\n:host(.stretched) {\n flex-basis: 100%;\n width: 100%;\n @include ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n background-color: var(--theme-tab--background--hover);\n color: var(--theme-tab-color-hover);\n cursor: pointer;\n\n &::after {\n background-color: var(--theme-tab-indicator--background--hover);\n }\n}\n\n:host(:active:not(.circle)) {\n background-color: var(--theme-tab--background--active);\n color: var(--theme-tab-color--active);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--active);\n }\n}\n\n:host(:focus-visible) {\n outline: 0px solid var(--focus--border-color);\n\n .circle {\n outline: 1px solid var(--focus--border-color);\n }\n}\n\n:host(:focus-visible:not(.circle)) {\n outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n pointer-events: none;\n color: var(--theme-tab--color--disabled);\n background-color: var(--theme-tab--background--disabled);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--disabled);\n }\n}\n\n:host(.selected:not(.disabled)) {\n background-color: var(--theme-tab--background--selected);\n color: var(--theme-tab--color--selected);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--selected);\n }\n}\n\n:host(.icon) {\n padding: $large-space $small-space;\n}\n\n:host(.small-tab) {\n height: 32px;\n padding: $default-space;\n}\n\n:host(.small-tab.icon) {\n padding: $default-space $tiny-space;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type TabClickDetail = {\n nativeEvent: MouseEvent;\n};\n\n@Component({\n tag: 'ix-tab-item',\n styleUrl: 'tab-item.scss',\n shadow: true,\n})\nexport class TabItem {\n /\n Set selected tab\n /\n @Prop() selected = false;\n\n /\n Set disabled tab\n /\n @Prop() disabled = false;\n\n /\n Set small size tab\n /\n @Prop() small = false;\n\n /\n Set icon only tab\n /\n @Prop() icon = false;\n\n /\n Set rounded tab\n /\n @Prop() rounded = false;\n\n /\n Set counter value\n /\n @Prop() counter: number;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set selected placement\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n On tab click\n \n @since 2.0.0\n */\n @Event() tabClick: EventEmitter<TabClickDetail>;\n\n private tabItemClasses(props: {\n selected: boolean;\n disabled: boolean;\n small: boolean;\n icon: boolean;\n circle: boolean;\n layout: 'auto' \| 'stretched';\n placement: 'bottom' \| 'top';\n }) {\n return {\n selected: props.selected,\n disabled: props.disabled,\n 'small-tab': props.small,\n icon: props.small,\n stretched: props.layout === 'stretched',\n bottom: props.placement === 'bottom',\n top: props.placement === 'top',\n circle: props.circle,\n };\n }\n\n render() {\n return (\n <Host\n class={this.tabItemClasses({\n selected: this.selected,\n disabled: this.disabled,\n small: this.small,\n icon: this.icon,\n layout: this.layout,\n placement: this.placement,\n circle: this.rounded,\n })}\n tabIndex={0}\n onClick={(event: MouseEvent) => {\n const clientEvent = this.tabClick.emit({\n nativeEvent: event,\n });\n\n if (clientEvent.defaultPrevented) {\n event.stopPropagation();\n }\n }}\n >\n <div\n class={{\n circle: this.rounded,\n text: !this.rounded,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n <div\n class={{\n counter: true,\n selected: this.selected,\n hidden: !(this.rounded && this.counter !== undefined),\n disabled: this.disabled,\n }}\n >\n {this.counter}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/tabs.js CHANGED Viewed

@@ -24,7 +24,7 @@ const requestAnimationFrameNoNgZone = (callback) => {
     return setTimeout(callback);
 };
-const tabsCss = ":host{width:auto;display:flex;align-items:center;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}:host .tab-items .items-content{display:flex;align-items:center}:host .arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-invisible-primary--color);background-color:var(--theme-btn-invisible-primary--background);z-index:2}:host .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}:host .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}:host .arrow.right{left:auto;right:0}:host .overflow-shadow{display:block;position:relative;height:100%;width:100%;pointer-events:all}:host .overflow-shadow.shadow-left{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px);mask-image:linear-gradient(90deg, transparent 0px, black 45px)}:host .overflow-shadow.shadow-right{-webkit-mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%)}:host .overflow-shadow.shadow-both{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%)}";
+const tabsCss = ":host{width:auto;display:flex;align-items:center;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}:host .tab-items .items-content{display:flex;align-items:center}:host .arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-invisible-primary--color);background-color:var(--theme-btn-invisible-primary--background);z-index:2}:host .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}:host .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}:host .arrow.right{left:auto;right:0}:host .overflow-shadow{display:block;position:relative;height:100%;width:100%;pointer-events:all}:host .overflow-shadow.shadow-left{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px);mask-image:linear-gradient(90deg, transparent 0px, black 45px)}:host .overflow-shadow.shadow-right{-webkit-mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%)}:host .overflow-shadow.shadow-both{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%)}";
 const IxTabsStyle0 = tabsCss;
 const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
@@ -220,13 +220,13 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         });
     }
     render() {
-        return (h(Host, { key: 'd78a0e8848762853905f0a00ad0e29eb8010f058' }, h("div", { key: '81f8018608a4ead1b07a2c8dbc275f3e6b1a4f9f', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { key: '74ac11767dded217d438e58f3d9af659b5f7913c', name: 'chevron-left-small' })), h("div", { key: '22172b312ee82c63c590780030766262d5655be3', class: {
+        return (h(Host, { key: 'a9c383f30565690984150c5bb5e144a50a08e422' }, h("div", { key: 'e505fbd880ce2eef0faf325c12a1352304f62345', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { key: '390e636793050dec280c0af33f3f7f55a7955dbf', name: 'chevron-left-small' })), h("div", { key: '190636a8f3eb4eedef2f9971285a807e94e84798', class: {
                 'tab-items': true,
                 'overflow-shadow': true,
                 'shadow-left': this.showPreviousArrow(),
                 'shadow-right': this.showNextArrow(),
                 'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
-            } }, h("div", { key: '31a8df74124a12d6abc6e3af8c45e2f59c9e8e7f', class: "items-content" }, h("slot", { key: '0a37dea0573b5123c6de66831c028401d1da86b4' }))), h("div", { key: 'cd946069a8dbb2708bc90923c2bb8a897eeaf3b5', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { key: '3542fc3e7cba8477f2367492620dc16cdaecbad8', name: 'chevron-right-small' }))));
+            } }, h("div", { key: '3a93ba0ebc7bf708de196b86bfa640d941a67750', class: "items-content" }, h("slot", { key: '504236daba4c544bd0b574e0b50556deaba8c9c8' }))), h("div", { key: '40dd25a8e3fac3840bdb6b8f2b76abccd090aaaa', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { key: 'c163d47af17bf1b9b85890d70ad2d90a1b842b9c', name: 'chevron-right-small' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxTabsStyle0; }

package/components/tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"tabs.js","mappings":"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","names":[],"sources":["src/components/utils/requestAnimationFrame.ts","src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/\n Prevents angular from change detection when requesting an animation frame\n \n Credits goes to:\n * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts\n /\nexport const requestAnimationFrameNoNgZone = (\n callback: (...args: any[]) => void\n) => {\n if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n return __zone_symbol__requestAnimationFrame(callback);\n }\n if (typeof requestAnimationFrame === 'function') {\n return requestAnimationFrame(callback);\n }\n return setTimeout(callback);\n};\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n width: auto;\n display: flex;\n align-items: center;\n position: relative;\n\n .tab-items {\n overflow: hidden;\n scroll-behavior: smooth;\n width: 100%;\n\n .items-content {\n display: flex;\n align-items: center;\n }\n }\n\n .arrow {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n top: 0;\n bottom: 0;\n left: 0;\n margin: auto 0;\n border-radius: 4px;\n color: var(--theme-btn-invisible-primary--color);\n background-color: var(--theme-btn-invisible-primary--background);\n z-index: 2;\n\n &:hover {\n color: var(--theme-btn-invisible-primary--color--hover);\n background-color: var(--theme-btn-invisible-primary--background--hover);\n }\n\n &:active {\n color: var(--theme-btn-invisible-primary--color--active);\n background-color: var(--theme-btn-invisible-primary--background--active);\n }\n\n &.right {\n left: auto;\n right: 0;\n }\n }\n\n .overflow-shadow {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n pointer-events: all;\n\n &.shadow-left {\n mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n }\n\n &.shadow-right {\n mask-image: linear-gradient(\n 90deg,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n\n &.shadow-both {\n mask-image: linear-gradient(\n 90deg,\n transparent 0px,\n black 45px,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\n\n@Component({\n tag: 'ix-tabs',\n styleUrl: 'tabs.scss',\n shadow: true,\n})\nexport class Tabs {\n @Element() hostElement!: HTMLIxTabsElement;\n\n /\n Set tab items to small size\n /\n @Prop() small = false;\n\n /\n Set rounded tabs\n /\n @Prop() rounded = false;\n\n /\n Set default selected tab by index\n /\n @Prop({ mutable: true }) selected = 0;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set placement style\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n `selected` property changed\n \n @since 2.0.0\n /\n @Event() selectedChange: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n\n @State() scrollActionAmount = 0;\n\n private windowStartSize = window.innerWidth;\n\n private get arrowLeftElement() {\n return this.hostElement.shadowRoot.querySelector(\n '[data-arrow-left]'\n ) as HTMLElement;\n }\n\n private get arrowRightElement() {\n return this.hostElement.shadowRoot.querySelector(\n '[data-arrow-right]'\n ) as HTMLElement;\n }\n\n private clickAction: {\n timeout: NodeJS.Timeout;\n isClick: boolean;\n } = {\n timeout: null,\n isClick: true,\n };\n\n @Listen('resize', { target: 'window' })\n onWindowResize() {\n this.totalItems = 0;\n this.totalItems = this.getTabs().length;\n\n if (this.windowStartSize === 0)\n return (this.windowStartSize = window.innerWidth);\n this.move(this.windowStartSize - window.innerWidth);\n this.windowStartSize = window.innerWidth;\n }\n\n private getTabs() {\n return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n }\n\n private getTab(tabIndex: number) {\n return this.getTabs()[tabIndex];\n }\n\n private getTabsWrapper() {\n return this.hostElement.shadowRoot.querySelector('.items-content');\n }\n\n private showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\n tabWrapper.scrollWidth >\n Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n this.layout === 'auto'\n );\n } catch (error) {\n return false;\n }\n }\n\n private showPreviousArrow() {\n try {\n return this.showArrows() && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private getArrowStyle(condition: boolean) {\n return {\n opacity: condition ? '1' : '0',\n zIndex: condition ? '1' : '-1',\n };\n }\n\n private move(amount: number, click = false) {\n const tabWrapper = this.getTabsWrapper();\n const maxScrollWidth =\n (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;\n\n amount = this.currentScrollAmount + amount;\n amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n private moveTabToView(tabIndex: number) {\n if (!this.showArrows()) return;\n\n const tab = this.getTab(tabIndex).getBoundingClientRect();\n const amount = tab.x * -1;\n this.move(amount, true);\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (this.dragStop()) {\n return;\n }\n\n const { defaultPrevented } = this.selectedChange.emit(index);\n if (defaultPrevented) {\n return;\n }\n\n this.setSelected(index);\n this.moveTabToView(index);\n }\n\n private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n if (!this.showArrows()) return;\n if (event.button > 0) return;\n\n this.clickAction.timeout =\n this.clickAction.timeout === null\n ? setTimeout(() => (this.clickAction.isClick = false), 300)\n : null;\n\n const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n const mousedownPositionX = event.clientX;\n const move = (event: MouseEvent) =>\n this.dragMove(event, tabPositionX, mousedownPositionX);\n\n window.addEventListener('mouseup', () => {\n window.removeEventListener('mousemove', move, false);\n this.dragStop();\n });\n window.addEventListener('mousemove', move, false);\n }\n\n private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n this.move(event.clientX + tabX - mousedownX);\n }\n\n private dragStop() {\n clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\n\n if (this.clickAction.isClick) return false;\n\n this.currentScrollAmount = this.scrollActionAmount;\n this.clickAction.isClick = true;\n\n return true;\n }\n\n componentWillLoad() {\n const tabs = this.getTabs();\n\n tabs.map((element, index) => {\n if (this.small) element.setAttribute('small', 'true');\n\n if (this.rounded) element.setAttribute('rounded', 'true');\n\n element.setAttribute('layout', this.layout);\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n\n element.setAttribute('placement', this.placement);\n });\n }\n\n componentDidRender() {\n const tabs = this.getTabs();\n this.totalItems = tabs.length;\n\n tabs.map((element, index) => {\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n });\n }\n\n componentWillRender() {\n requestAnimationFrameNoNgZone(() => {\n const showNextArrow = this.showNextArrow();\n const previousArrow = this.showPreviousArrow();\n\n Object.assign(\n this.arrowLeftElement.style,\n this.getArrowStyle(previousArrow)\n );\n Object.assign(\n this.arrowRightElement.style,\n this.getArrowStyle(showNextArrow)\n );\n });\n }\n\n componentDidLoad() {\n const tabs = this.getTabs();\n tabs.forEach((element) => {\n element.addEventListener('mousedown', (event) =>\n this.dragStart(element, event)\n );\n });\n }\n\n @Listen('tabClick')\n onTabClick(event: CustomEvent) {\n if (event.defaultPrevented) {\n return;\n }\n\n const target = event.target;\n const tabs = this.getTabs();\n\n tabs.forEach((tab, index) => {\n if (!tab.disabled && tab === target) {\n this.clickTab(index);\n }\n });\n }\n\n render() {\n return (\n <Host>\n <div\n class=\"arrow\"\n data-arrow-left\n onClick={() => this.move(this.scrollAmount, true)}\n >\n <ix-icon name={'chevron-left-small'}></ix-icon>\n </div>\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showPreviousArrow(),\n 'shadow-right': this.showNextArrow(),\n 'shadow-both': this.showNextArrow() && this.showPreviousArrow(),\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n <div\n class=\"arrow right\"\n data-arrow-right\n onClick={() => this.move(-this.scrollAmount, true)}\n >\n <ix-icon name={'chevron-right-small'}></ix-icon>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"tabs.js","mappings":"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","names":[],"sources":["src/components/utils/requestAnimationFrame.ts","src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/\n Prevents angular from change detection when requesting an animation frame\n \n Credits goes to:\n * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts\n /\nexport const requestAnimationFrameNoNgZone = (\n callback: (...args: any[]) => void\n) => {\n if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n return __zone_symbol__requestAnimationFrame(callback);\n }\n if (typeof requestAnimationFrame === 'function') {\n return requestAnimationFrame(callback);\n }\n return setTimeout(callback);\n};\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n width: auto;\n display: flex;\n align-items: center;\n position: relative;\n\n .tab-items {\n overflow: hidden;\n scroll-behavior: smooth;\n width: 100%;\n\n .items-content {\n display: flex;\n align-items: center;\n }\n }\n\n .arrow {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n top: 0;\n bottom: 0;\n left: 0;\n margin: auto 0;\n border-radius: 4px;\n color: var(--theme-btn-invisible-primary--color);\n background-color: var(--theme-btn-invisible-primary--background);\n z-index: 2;\n\n &:hover {\n color: var(--theme-btn-invisible-primary--color--hover);\n background-color: var(--theme-btn-invisible-primary--background--hover);\n }\n\n &:active {\n color: var(--theme-btn-invisible-primary--color--active);\n background-color: var(--theme-btn-invisible-primary--background--active);\n }\n\n &.right {\n left: auto;\n right: 0;\n }\n }\n\n .overflow-shadow {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n pointer-events: all;\n\n &.shadow-left {\n mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n }\n\n &.shadow-right {\n mask-image: linear-gradient(\n 90deg,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n\n &.shadow-both {\n mask-image: linear-gradient(\n 90deg,\n transparent 0px,\n black 45px,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\n\n@Component({\n tag: 'ix-tabs',\n styleUrl: 'tabs.scss',\n shadow: true,\n})\nexport class Tabs {\n @Element() hostElement!: HTMLIxTabsElement;\n\n /\n Set tab items to small size\n /\n @Prop() small = false;\n\n /\n Set rounded tabs\n /\n @Prop() rounded = false;\n\n /\n Set default selected tab by index\n /\n @Prop({ mutable: true }) selected = 0;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set placement style\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n `selected` property changed\n \n @since 2.0.0\n /\n @Event() selectedChange: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n\n @State() scrollActionAmount = 0;\n\n private windowStartSize = window.innerWidth;\n\n private get arrowLeftElement() {\n return this.hostElement.shadowRoot.querySelector(\n '[data-arrow-left]'\n ) as HTMLElement;\n }\n\n private get arrowRightElement() {\n return this.hostElement.shadowRoot.querySelector(\n '[data-arrow-right]'\n ) as HTMLElement;\n }\n\n private clickAction: {\n timeout: NodeJS.Timeout;\n isClick: boolean;\n } = {\n timeout: null,\n isClick: true,\n };\n\n @Listen('resize', { target: 'window' })\n onWindowResize() {\n this.totalItems = 0;\n this.totalItems = this.getTabs().length;\n\n if (this.windowStartSize === 0)\n return (this.windowStartSize = window.innerWidth);\n this.move(this.windowStartSize - window.innerWidth);\n this.windowStartSize = window.innerWidth;\n }\n\n private getTabs() {\n return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n }\n\n private getTab(tabIndex: number) {\n return this.getTabs()[tabIndex];\n }\n\n private getTabsWrapper() {\n return this.hostElement.shadowRoot.querySelector('.items-content');\n }\n\n private showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\n tabWrapper.scrollWidth >\n Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n this.layout === 'auto'\n );\n } catch (error) {\n return false;\n }\n }\n\n private showPreviousArrow() {\n try {\n return this.showArrows() && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private getArrowStyle(condition: boolean) {\n return {\n opacity: condition ? '1' : '0',\n zIndex: condition ? '1' : '-1',\n };\n }\n\n private move(amount: number, click = false) {\n const tabWrapper = this.getTabsWrapper();\n const maxScrollWidth =\n (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;\n\n amount = this.currentScrollAmount + amount;\n amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n private moveTabToView(tabIndex: number) {\n if (!this.showArrows()) return;\n\n const tab = this.getTab(tabIndex).getBoundingClientRect();\n const amount = tab.x * -1;\n this.move(amount, true);\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (this.dragStop()) {\n return;\n }\n\n const { defaultPrevented } = this.selectedChange.emit(index);\n if (defaultPrevented) {\n return;\n }\n\n this.setSelected(index);\n this.moveTabToView(index);\n }\n\n private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n if (!this.showArrows()) return;\n if (event.button > 0) return;\n\n this.clickAction.timeout =\n this.clickAction.timeout === null\n ? setTimeout(() => (this.clickAction.isClick = false), 300)\n : null;\n\n const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n const mousedownPositionX = event.clientX;\n const move = (event: MouseEvent) =>\n this.dragMove(event, tabPositionX, mousedownPositionX);\n\n window.addEventListener('mouseup', () => {\n window.removeEventListener('mousemove', move, false);\n this.dragStop();\n });\n window.addEventListener('mousemove', move, false);\n }\n\n private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n this.move(event.clientX + tabX - mousedownX);\n }\n\n private dragStop() {\n clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\n\n if (this.clickAction.isClick) return false;\n\n this.currentScrollAmount = this.scrollActionAmount;\n this.clickAction.isClick = true;\n\n return true;\n }\n\n componentWillLoad() {\n const tabs = this.getTabs();\n\n tabs.map((element, index) => {\n if (this.small) element.setAttribute('small', 'true');\n\n if (this.rounded) element.setAttribute('rounded', 'true');\n\n element.setAttribute('layout', this.layout);\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n\n element.setAttribute('placement', this.placement);\n });\n }\n\n componentDidRender() {\n const tabs = this.getTabs();\n this.totalItems = tabs.length;\n\n tabs.map((element, index) => {\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n });\n }\n\n componentWillRender() {\n requestAnimationFrameNoNgZone(() => {\n const showNextArrow = this.showNextArrow();\n const previousArrow = this.showPreviousArrow();\n\n Object.assign(\n this.arrowLeftElement.style,\n this.getArrowStyle(previousArrow)\n );\n Object.assign(\n this.arrowRightElement.style,\n this.getArrowStyle(showNextArrow)\n );\n });\n }\n\n componentDidLoad() {\n const tabs = this.getTabs();\n tabs.forEach((element) => {\n element.addEventListener('mousedown', (event) =>\n this.dragStart(element, event)\n );\n });\n }\n\n @Listen('tabClick')\n onTabClick(event: CustomEvent) {\n if (event.defaultPrevented) {\n return;\n }\n\n const target = event.target;\n const tabs = this.getTabs();\n\n tabs.forEach((tab, index) => {\n if (!tab.disabled && tab === target) {\n this.clickTab(index);\n }\n });\n }\n\n render() {\n return (\n <Host>\n <div\n class=\"arrow\"\n data-arrow-left\n onClick={() => this.move(this.scrollAmount, true)}\n >\n <ix-icon name={'chevron-left-small'}></ix-icon>\n </div>\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showPreviousArrow(),\n 'shadow-right': this.showNextArrow(),\n 'shadow-both': this.showNextArrow() && this.showPreviousArrow(),\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n <div\n class=\"arrow right\"\n data-arrow-right\n onClick={() => this.move(-this.scrollAmount, true)}\n >\n <ix-icon name={'chevron-right-small'}></ix-icon>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}