@siemens/ix 0.0.0-pr-2214-20251017134939 → 0.0.0-pr-2198-20251023082407
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.
- package/components/ix-menu-about.js +2 -2
- package/components/ix-menu-settings.js +1 -1
- package/components/ix-tab-item.js +1 -1
- package/components/ix-textarea.js +56 -3
- package/components/ix-textarea.js.map +1 -1
- package/components/p-BkCOZyt9.js.map +1 -1
- package/components/{p-C_x_G0ux.js → p-BrKwrb_Z.js} +3 -3
- package/components/{p-C_x_G0ux.js.map → p-BrKwrb_Z.js.map} +1 -1
- package/components/{p-4zrYEasX.js → p-COHP8TmU.js} +3 -3
- package/components/p-COHP8TmU.js.map +1 -0
- package/dist/cjs/input.util-B2BCXE7G.js.map +1 -1
- package/dist/cjs/ix-tab-item.ix-tabs.entry.cjs.js.map +1 -1
- package/dist/cjs/ix-tab-item_2.cjs.entry.js +1 -1
- package/dist/cjs/ix-textarea.cjs.entry.js +52 -3
- package/dist/cjs/ix-textarea.entry.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/siemens-ix.cjs.js +1 -1
- package/dist/collection/components/input/input.fc.js.map +1 -1
- package/dist/collection/components/input/textarea.js +59 -3
- package/dist/collection/components/input/textarea.js.map +1 -1
- package/dist/collection/components/tab-item/tab-item.css +1 -1
- package/dist/esm/input.util-6IjJg2ik.js.map +1 -1
- package/dist/esm/ix-tab-item.ix-tabs.entry.js.map +1 -1
- package/dist/esm/ix-tab-item_2.entry.js +1 -1
- package/dist/esm/ix-textarea.entry.js +52 -3
- package/dist/esm/ix-textarea.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/siemens-ix.js +1 -1
- package/dist/siemens-ix/ix-tab-item.ix-tabs.entry.esm.js.map +1 -1
- package/dist/siemens-ix/ix-textarea.entry.esm.js.map +1 -1
- package/dist/siemens-ix/{p-cd11dfa8.entry.js → p-20b5fc48.entry.js} +2 -2
- package/dist/siemens-ix/p-20b5fc48.entry.js.map +1 -0
- package/dist/siemens-ix/p-f55c3bed.entry.js +2 -0
- package/dist/siemens-ix/{p-a25ebeb2.entry.js.map → p-f55c3bed.entry.js.map} +1 -1
- package/dist/siemens-ix/p-q1WCgUmY.js.map +1 -1
- package/dist/siemens-ix/siemens-ix.esm.js +1 -1
- package/dist/types/components/input/input.fc.d.ts +1 -1
- package/dist/types/components/input/textarea.d.ts +9 -0
- package/hydrate/index.js +53 -4
- package/hydrate/index.mjs +53 -4
- package/package.json +1 -1
- package/components/p-4zrYEasX.js.map +0 -1
- package/dist/siemens-ix/p-a25ebeb2.entry.js +0 -2
- package/dist/siemens-ix/p-cd11dfa8.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-tab-item.ix-tabs.entry.cjs.js","sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx","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\n@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px vars.$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 @include component.ix-component;\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 text-truncation.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-color-1);\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: vars.$tiny-space;\n padding-right: vars.$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 text-truncation.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: vars.$large-space vars.$small-space;\n}\n\n:host(.small-tab) {\n height: 32px;\n padding: vars.$default-space;\n}\n\n:host(.small-tab.icon) {\n padding: vars.$default-space vars.$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';\nimport type { TabClickDetail } from './tab-item.types';\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 * Emitted when the tab is clicked.\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 if (event.defaultPrevented) return;\n\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","/*\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: 2024 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@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n width: auto;\n display: flex;\n align-items: center;\n position: relative;\n\n @include component.ix-component;\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 // unset button styles first\n all: unset;\n\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-tertiary--color);\n background-color: var(--theme-btn-tertiary--background);\n z-index: 2;\n\n &:hover {\n color: var(--theme-btn-tertiary--color--hover);\n background-color: var(--theme-btn-tertiary--background--hover);\n }\n\n &:active {\n color: var(--theme-btn-tertiary--color--active);\n background-color: var(--theme-btn-tertiary--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: 2024 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 { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\nimport {\n iconChevronLeftSmall,\n iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\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 * ARIA label for the chevron left icon button\n *\n * @since 3.2.0\n */\n @Prop() ariaLabelChevronLeftIconButton?: string;\n\n /**\n * ARIA label for the chevron right icon button\n *\n * @since 3.2.0\n */\n @Prop() ariaLabelChevronRightIconButton?: string;\n\n /**\n * `selected` property changed\n */\n @Event() selectedChange!: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n @State() scrollActionAmount = 0;\n @State() showArrowPrevious = false;\n @State() showArrowNext = false;\n\n private windowStartSize = window.innerWidth;\n private resizeObserver?: ResizeObserver;\n\n private clickAction: {\n timeout: NodeJS.Timeout | null;\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 initResizeObserver() {\n const parentElement = this.hostElement.parentElement;\n if (!parentElement) return;\n this.resizeObserver = new ResizeObserver(() => {\n this.renderArrows();\n });\n this.resizeObserver.observe(parentElement);\n }\n\n private showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\n tabWrapper &&\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() === true && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n\n if (!tabWrapper) {\n return false;\n }\n\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() === true &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) * -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private move(amount: number, click = false) {\n const tabsWrapper = this.getTabsWrapper();\n\n if (!tabsWrapper) {\n return;\n }\n\n const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n const maxScrollWidth =\n -this.currentScrollAmount +\n tabsWrapperVisibleWidth -\n tabsWrapper.scrollWidth;\n\n amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n amount += this.currentScrollAmount;\n amount = Math.min(amount, 0);\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabsWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n @Watch('selected')\n onSelectedChange(newValue: number) {\n if (!this.showArrows()) return;\n\n const tabRect = this.getTab(newValue).getBoundingClientRect();\n const wrapperWidth = this.getTabsWrapper()?.clientWidth;\n const arrowWidth = 32;\n\n if (tabRect.left < arrowWidth) {\n this.move(-tabRect.left + arrowWidth, true);\n } else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {\n this.move(wrapperWidth - tabRect.right - arrowWidth, true);\n }\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (!this.clickAction.isClick || 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 }\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 const windowClick = () => {\n window.removeEventListener('mousemove', move, false);\n window.removeEventListener('click', windowClick, false);\n this.dragStop();\n };\n window.addEventListener('click', windowClick);\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 if (this.clickAction.timeout) {\n clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\n }\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 this.initResizeObserver();\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 this.renderArrows();\n }\n\n private renderArrows() {\n requestAnimationFrameNoNgZone(() => {\n this.showArrowNext = this.showNextArrow();\n this.showArrowPrevious = this.showPreviousArrow();\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 disconnectedCallback() {\n this.resizeObserver?.disconnect();\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 {this.showArrowPrevious && (\n <button\n class=\"arrow\"\n onClick={() => this.move(this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronLeftIconButton}\n >\n <ix-icon name={iconChevronLeftSmall}></ix-icon>\n </button>\n )}\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showArrowPrevious,\n 'shadow-right': this.showArrowNext,\n 'shadow-both': this.showArrowNext && this.showArrowPrevious,\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n {this.showArrowNext && (\n <button\n class=\"arrow right\"\n onClick={() => this.move(-this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronRightIconButton}\n >\n <ix-icon name={iconChevronRightSmall}></ix-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"names":["h","Host","iconChevronLeftSmall","iconChevronRightSmall"],"mappings":";;;;;AAAA,MAAM,UAAU,GAAG,60IAA60I;;MCiBn1I,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAErB;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAEpB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAOvB;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAyB,MAAM;AAE7C;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAqB,QAAQ;AA4E/C;AArES,IAAA,cAAc,CAAC,KAQtB,EAAA;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;AACjB,YAAA,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;AACvC,YAAA,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;AACpC,YAAA,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;YAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;SACrB;;IAGH,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,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,KAAI;gBAC7B,IAAI,KAAK,CAAC,gBAAgB;oBAAE;AAE5B,gBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACrC,oBAAA,WAAW,EAAE,KAAK;AACnB,iBAAA,CAAC;AAEF,gBAAA,IAAI,WAAW,CAAC,gBAAgB,EAAE;oBAChC,KAAK,CAAC,eAAe,EAAE;;AAE3B,aAAC,EAAA,EAEDD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI,CAAC,OAAO;AACpB,gBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;gBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EAAA,EAEDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,gBAAA,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;gBACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,EAAA,EAEA,IAAI,CAAC,OAAO,CACT,CACD;;;;;ACjIb;;;;;;;AAOG;AAIH;;;;;AAKG;AACI,MAAM,6BAA6B,GAAG,CAC3C,QAAkC,KAChC;AACF,IAAA,IAAI,OAAO,oCAAoC,KAAK,UAAU,EAAE;AAC9D,QAAA,OAAO,oCAAoC,CAAC,QAAQ,CAAC;;AAEvD,IAAA,IAAI,OAAO,qBAAqB,KAAK,UAAU,EAAE;AAC/C,QAAA,OAAO,qBAAqB,CAAC,QAAQ,CAAC;;AAExC,IAAA,OAAO,UAAU,CAAC,QAAQ,CAAC;AAC7B,CAAC;;AC3BD,MAAM,OAAO,GAAG,suEAAsuE;;MCgCzuE,IAAI,GAAA,MAAA;AALjB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQE;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAErB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEvB;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,CAAC;AAErC;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAyB,MAAM;AAE7C;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAqB,QAAQ;AAqBrC,QAAA,IAAU,CAAA,UAAA,GAAG,CAAC;AACd,QAAA,IAAmB,CAAA,mBAAA,GAAG,CAAC;AACvB,QAAA,IAAY,CAAA,YAAA,GAAG,GAAG;AAClB,QAAA,IAAkB,CAAA,kBAAA,GAAG,CAAC;AACtB,QAAA,IAAiB,CAAA,iBAAA,GAAG,KAAK;AACzB,QAAA,IAAa,CAAA,aAAA,GAAG,KAAK;AAEtB,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAC,UAAU;QAGnC,IAAA,CAAA,WAAW,GAGf;AACF,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,OAAO,EAAE,IAAI;SACd;AA6RF;IA1RC,cAAc,GAAA;AACZ,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC;QACnB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM;AAEvC,QAAA,IAAI,IAAI,CAAC,eAAe,KAAK,CAAC;YAC5B,QAAQ,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU;QAClD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC;AACnD,QAAA,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU;;IAGlC,OAAO,GAAA;AACb,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;;AAG7D,IAAA,MAAM,CAAC,QAAgB,EAAA;AAC7B,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC;;IAGzB,cAAc,GAAA;;AACpB,QAAA,OAAO,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,aAAa,CAAC,gBAAgB,CAAC;;IAG7D,kBAAkB,GAAA;AACxB,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa;AACpD,QAAA,IAAI,CAAC,aAAa;YAAE;AACpB,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;YAC5C,IAAI,CAAC,YAAY,EAAE;AACrB,SAAC,CAAC;AACF,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC;;IAGpC,UAAU,GAAA;AAChB,QAAA,IAAI;AACF,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE;AACxC,YAAA,QACE,UAAU;AACV,gBAAA,UAAU,CAAC,WAAW;oBACpB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;AACrD,gBAAA,IAAI,CAAC,MAAM,KAAK,MAAM;;QAExB,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,KAAK;;;IAIR,iBAAiB,GAAA;AACvB,QAAA,IAAI;AACF,YAAA,OAAO,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,kBAAkB,GAAG,CAAC;;QAChE,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,KAAK;;;IAIR,aAAa,GAAA;AACnB,QAAA,IAAI;AACF,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE;YAExC,IAAI,CAAC,UAAU,EAAE;AACf,gBAAA,OAAO,KAAK;;AAGd,YAAA,MAAM,cAAc,GAAG,UAAU,CAAC,qBAAqB,EAAE;AAEzD,YAAA,QACE,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI;AAC1B,gBAAA,IAAI,CAAC,kBAAkB;AACrB,oBAAA,CAAC,UAAU,CAAC,WAAW,GAAG,cAAc,CAAC,KAAK,IAAI,EAAE;;QAExD,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,KAAK;;;AAIR,IAAA,IAAI,CAAC,MAAc,EAAE,KAAK,GAAG,KAAK,EAAA;AACxC,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE;QAEzC,IAAI,CAAC,WAAW,EAAE;YAChB;;QAGF,MAAM,uBAAuB,GAAG,WAAW,CAAC,qBAAqB,EAAE,CAAC,KAAK;AACzE,QAAA,MAAM,cAAc,GAClB,CAAC,IAAI,CAAC,mBAAmB;YACzB,uBAAuB;YACvB,WAAW,CAAC,WAAW;AAEzB,QAAA,MAAM,GAAG,MAAM,GAAG,cAAc,GAAG,cAAc,GAAG,MAAM;AAC1D,QAAA,MAAM,IAAI,IAAI,CAAC,mBAAmB;QAClC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;AAE5B,QAAA,MAAM,MAAM,GAAG;AACb,YAAA,CAAA,sBAAA,EAAyB,MAAM,CAAM,IAAA,CAAA;AACrC,YAAA,KAAK,GAAG,oCAAoC,GAAG,EAAE;AAClD,SAAA,CAAC,IAAI,CAAC,EAAE,CAAC;AAEV,QAAA,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC;AAEzC,QAAA,IAAI,KAAK;YAAE,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,kBAAkB,GAAG,MAAM;;AACjE,YAAA,IAAI,CAAC,kBAAkB,GAAG,MAAM;;AAIvC,IAAA,gBAAgB,CAAC,QAAgB,EAAA;;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAAE;QAExB,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,qBAAqB,EAAE;AAC7D,QAAA,MAAM,YAAY,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,EAAE,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW;QACvD,MAAM,UAAU,GAAG,EAAE;AAErB,QAAA,IAAI,OAAO,CAAC,IAAI,GAAG,UAAU,EAAE;AAC7B,YAAA,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,GAAG,UAAU,EAAE,IAAI,CAAC;;aACtC,IAAI,YAAY,IAAI,OAAO,CAAC,KAAK,GAAG,YAAY,GAAG,UAAU,EAAE;AACpE,YAAA,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,KAAK,GAAG,UAAU,EAAE,IAAI,CAAC;;;AAItD,IAAA,WAAW,CAAC,KAAa,EAAA;AAC/B,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;;AAGf,IAAA,QAAQ,CAAC,KAAa,EAAA;AAC5B,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YAChD;;AAGF,QAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5D,IAAI,gBAAgB,EAAE;YACpB;;AAGF,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;;IAGjB,SAAS,CAAC,OAA6B,EAAE,KAAiB,EAAA;AAChE,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAAE;AACxB,QAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;YAAE;QAEtB,IAAI,CAAC,WAAW,CAAC,OAAO;AACtB,YAAA,IAAI,CAAC,WAAW,CAAC,OAAO,KAAK;AAC3B,kBAAE,UAAU,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC,EAAE,GAAG;kBACxD,IAAI;AAEV,QAAA,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC;AACtE,QAAA,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO;AACxC,QAAA,MAAM,IAAI,GAAG,CAAC,KAAiB,KAC7B,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,YAAY,EAAE,kBAAkB,CAAC;QACxD,MAAM,WAAW,GAAG,MAAK;YACvB,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC;YACpD,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,CAAC;YACvD,IAAI,CAAC,QAAQ,EAAE;AACjB,SAAC;AACD,QAAA,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC;QAC7C,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC;;AAG3C,IAAA,QAAQ,CAAC,KAAiB,EAAE,IAAY,EAAE,UAAkB,EAAA;QAClE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,GAAG,UAAU,CAAC;;IAGtC,QAAQ,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;AAC5B,YAAA,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;AACtC,YAAA,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI;;AAGjC,QAAA,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO;AAAE,YAAA,OAAO,KAAK;AAE1C,QAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,kBAAkB;AAClD,QAAA,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI;AAE/B,QAAA,OAAO,IAAI;;IAGb,iBAAiB,GAAA;AACf,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;QAE3B,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,KAAI;YAC1B,IAAI,IAAI,CAAC,KAAK;AAAE,gBAAA,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC;YAErD,IAAI,IAAI,CAAC,OAAO;AAAE,gBAAA,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC;YAEzD,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC;AAC3C,YAAA,OAAO,CAAC,YAAY,CAClB,UAAU,EACV,KAAK,KAAK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAC3C;YAED,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC;AACnD,SAAC,CAAC;QAEF,IAAI,CAAC,kBAAkB,EAAE;;IAG3B,kBAAkB,GAAA;AAChB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;AAC3B,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM;QAE7B,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,KAAI;AAC1B,YAAA,OAAO,CAAC,YAAY,CAClB,UAAU,EACV,KAAK,KAAK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAC3C;AACH,SAAC,CAAC;;IAGJ,mBAAmB,GAAA;QACjB,IAAI,CAAC,YAAY,EAAE;;IAGb,YAAY,GAAA;QAClB,6BAA6B,CAAC,MAAK;AACjC,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AACzC,YAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,EAAE;AACnD,SAAC,CAAC;;IAGJ,gBAAgB,GAAA;AACd,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;AAC3B,QAAA,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,KAAI;AACvB,YAAA,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,KAC1C,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAC/B;AACH,SAAC,CAAC;;IAGJ,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;;AAInC,IAAA,UAAU,CAAC,KAAkB,EAAA;AAC3B,QAAA,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B;;AAGF,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM;AAC3B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;QAE3B,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,KAAI;YAC1B,IAAI,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,KAAK,MAAM,EAAE;AACnC,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;;AAExB,SAAC,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,iBAAiB,KACrBD,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,EAAA,YAAA,EACrC,IAAI,CAAC,8BAA8B,EAAA,EAE/CA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAEE,4BAAoB,EAAA,CAAY,CACxC,CACV,EACDF,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,aAAa,EAAE,IAAI,CAAC,iBAAiB;gBACrC,cAAc,EAAE,IAAI,CAAC,aAAa;AAClC,gBAAA,aAAa,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,iBAAiB;AAC5D,aAAA,EAAA,EAEDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,EACL,IAAI,CAAC,aAAa,KACjBA,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,EAAA,YAAA,EACtC,IAAI,CAAC,+BAA+B,EAAA,EAEhDA,OAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAEG,6BAAqB,EAAA,CAAY,CACzC,CACV,CACI;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"ix-tab-item.ix-tabs.entry.cjs.js","sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx","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\n@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px vars.$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 @include component.ix-component;\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 text-truncation.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: vars.$tiny-space;\n padding-right: vars.$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 text-truncation.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: vars.$large-space vars.$small-space;\n}\n\n:host(.small-tab) {\n height: 32px;\n padding: vars.$default-space;\n}\n\n:host(.small-tab.icon) {\n padding: vars.$default-space vars.$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';\nimport type { TabClickDetail } from './tab-item.types';\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 * Emitted when the tab is clicked.\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 if (event.defaultPrevented) return;\n\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","/*\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: 2024 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@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n width: auto;\n display: flex;\n align-items: center;\n position: relative;\n\n @include component.ix-component;\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 // unset button styles first\n all: unset;\n\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-tertiary--color);\n background-color: var(--theme-btn-tertiary--background);\n z-index: 2;\n\n &:hover {\n color: var(--theme-btn-tertiary--color--hover);\n background-color: var(--theme-btn-tertiary--background--hover);\n }\n\n &:active {\n color: var(--theme-btn-tertiary--color--active);\n background-color: var(--theme-btn-tertiary--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: 2024 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 { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\nimport {\n iconChevronLeftSmall,\n iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\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 * ARIA label for the chevron left icon button\n *\n * @since 3.2.0\n */\n @Prop() ariaLabelChevronLeftIconButton?: string;\n\n /**\n * ARIA label for the chevron right icon button\n *\n * @since 3.2.0\n */\n @Prop() ariaLabelChevronRightIconButton?: string;\n\n /**\n * `selected` property changed\n */\n @Event() selectedChange!: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n @State() scrollActionAmount = 0;\n @State() showArrowPrevious = false;\n @State() showArrowNext = false;\n\n private windowStartSize = window.innerWidth;\n private resizeObserver?: ResizeObserver;\n\n private clickAction: {\n timeout: NodeJS.Timeout | null;\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 initResizeObserver() {\n const parentElement = this.hostElement.parentElement;\n if (!parentElement) return;\n this.resizeObserver = new ResizeObserver(() => {\n this.renderArrows();\n });\n this.resizeObserver.observe(parentElement);\n }\n\n private showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\n tabWrapper &&\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() === true && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n\n if (!tabWrapper) {\n return false;\n }\n\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() === true &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) * -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private move(amount: number, click = false) {\n const tabsWrapper = this.getTabsWrapper();\n\n if (!tabsWrapper) {\n return;\n }\n\n const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n const maxScrollWidth =\n -this.currentScrollAmount +\n tabsWrapperVisibleWidth -\n tabsWrapper.scrollWidth;\n\n amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n amount += this.currentScrollAmount;\n amount = Math.min(amount, 0);\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabsWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n @Watch('selected')\n onSelectedChange(newValue: number) {\n if (!this.showArrows()) return;\n\n const tabRect = this.getTab(newValue).getBoundingClientRect();\n const wrapperWidth = this.getTabsWrapper()?.clientWidth;\n const arrowWidth = 32;\n\n if (tabRect.left < arrowWidth) {\n this.move(-tabRect.left + arrowWidth, true);\n } else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {\n this.move(wrapperWidth - tabRect.right - arrowWidth, true);\n }\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (!this.clickAction.isClick || 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 }\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 const windowClick = () => {\n window.removeEventListener('mousemove', move, false);\n window.removeEventListener('click', windowClick, false);\n this.dragStop();\n };\n window.addEventListener('click', windowClick);\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 if (this.clickAction.timeout) {\n clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\n }\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 this.initResizeObserver();\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 this.renderArrows();\n }\n\n private renderArrows() {\n requestAnimationFrameNoNgZone(() => {\n this.showArrowNext = this.showNextArrow();\n this.showArrowPrevious = this.showPreviousArrow();\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 disconnectedCallback() {\n this.resizeObserver?.disconnect();\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 {this.showArrowPrevious && (\n <button\n class=\"arrow\"\n onClick={() => this.move(this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronLeftIconButton}\n >\n <ix-icon name={iconChevronLeftSmall}></ix-icon>\n </button>\n )}\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showArrowPrevious,\n 'shadow-right': this.showArrowNext,\n 'shadow-both': this.showArrowNext && this.showArrowPrevious,\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n {this.showArrowNext && (\n <button\n class=\"arrow right\"\n onClick={() => this.move(-this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronRightIconButton}\n >\n <ix-icon name={iconChevronRightSmall}></ix-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"names":["h","Host","iconChevronLeftSmall","iconChevronRightSmall"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-DuDLgBnw.js');
|
|
4
4
|
var index$1 = require('./index-Dyz3z1FD.js');
|
|
5
5
|
|
|
6
|
-
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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}: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}:host .text span,:host .text span::before{pointer-events:none}:host .text{vertical-align:middle}: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-
|
|
6
|
+
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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}: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}:host .text span,:host .text span::before{pointer-events:none}:host .text{vertical-align:middle}: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}";
|
|
7
7
|
|
|
8
8
|
const TabItem = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -69,15 +69,59 @@ const Textarea = class {
|
|
|
69
69
|
this.isInfo = false;
|
|
70
70
|
this.isWarning = false;
|
|
71
71
|
this.isInvalidByRequired = false;
|
|
72
|
-
this.textAreaRef = makeRef.makeRef()
|
|
72
|
+
this.textAreaRef = makeRef.makeRef(() => {
|
|
73
|
+
this.initResizeObserver();
|
|
74
|
+
});
|
|
73
75
|
this.touched = false;
|
|
76
|
+
this.isManuallyResized = false;
|
|
77
|
+
this.isProgrammaticResize = false;
|
|
74
78
|
}
|
|
75
79
|
updateClassMappings(result) {
|
|
76
80
|
input_util.mapValidationResult(this, result);
|
|
77
81
|
}
|
|
82
|
+
onDimensionPropsChange() {
|
|
83
|
+
this.isManuallyResized = false;
|
|
84
|
+
this.manualHeight = undefined;
|
|
85
|
+
this.manualWidth = undefined;
|
|
86
|
+
this.isProgrammaticResize = true;
|
|
87
|
+
}
|
|
88
|
+
onResizeBehaviorChange() {
|
|
89
|
+
this.initResizeObserver();
|
|
90
|
+
}
|
|
78
91
|
componentWillLoad() {
|
|
79
92
|
this.updateFormInternalValue(this.value);
|
|
80
93
|
}
|
|
94
|
+
disconnectedCallback() {
|
|
95
|
+
var _a;
|
|
96
|
+
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
97
|
+
}
|
|
98
|
+
initResizeObserver() {
|
|
99
|
+
var _a;
|
|
100
|
+
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
101
|
+
const textarea = this.textAreaRef.current;
|
|
102
|
+
if (!textarea)
|
|
103
|
+
return;
|
|
104
|
+
if (this.resizeBehavior === 'none')
|
|
105
|
+
return;
|
|
106
|
+
let isInitialResize = true;
|
|
107
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
108
|
+
const textarea = this.textAreaRef.current;
|
|
109
|
+
if (!textarea)
|
|
110
|
+
return;
|
|
111
|
+
if (isInitialResize) {
|
|
112
|
+
isInitialResize = false;
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
if (this.isProgrammaticResize) {
|
|
116
|
+
this.isProgrammaticResize = false;
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
this.isManuallyResized = true;
|
|
120
|
+
this.manualHeight = textarea.style.height;
|
|
121
|
+
this.manualWidth = textarea.style.width;
|
|
122
|
+
});
|
|
123
|
+
this.resizeObserver.observe(textarea);
|
|
124
|
+
}
|
|
81
125
|
updateFormInternalValue(value) {
|
|
82
126
|
this.formInternals.setFormValue(value);
|
|
83
127
|
this.value = value;
|
|
@@ -111,16 +155,21 @@ const Textarea = class {
|
|
|
111
155
|
}
|
|
112
156
|
render() {
|
|
113
157
|
var _a;
|
|
114
|
-
return (index.h(index.Host, { key: '
|
|
158
|
+
return (index.h(index.Host, { key: '03eb959f2c582fb1dddef9c4af3775ff27d4c391', class: {
|
|
115
159
|
disabled: this.disabled,
|
|
116
160
|
readonly: this.readonly,
|
|
117
|
-
} }, index.h("ix-field-wrapper", { key: '
|
|
161
|
+
} }, index.h("ix-field-wrapper", { key: '66ec862af71b352b89418708782d0a73bd54e49f', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.textAreaRef }, !!this.maxLength && this.maxLength > 0 && (index.h("ix-typography", { key: 'c75441f683c072a52d5d51481bc87e7ea00c42ff', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)), index.h("div", { key: 'c49e36dd468cc9e4b83887891316436359b750b6', class: "input-wrapper" }, index.h(input_util.TextareaElement, { key: '9c051f207d06a4943540ed2c4f6d8b8be8ab1358', minLength: this.minLength, maxLength: this.maxLength, textareaCols: this.textareaCols, textareaRows: this.textareaRows, textareaHeight: this.isManuallyResized ? this.manualHeight : this.textareaHeight, textareaWidth: this.isManuallyResized ? this.manualWidth : this.textareaWidth, resizeBehavior: this.resizeBehavior, readonly: this.readonly, disabled: this.disabled, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, textAreaRef: this.textAreaRef, valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
|
|
118
162
|
input_util.onInputBlur(this, this.textAreaRef.current);
|
|
119
163
|
this.touched = true;
|
|
120
164
|
} })))));
|
|
121
165
|
}
|
|
122
166
|
static get formAssociated() { return true; }
|
|
123
167
|
get hostElement() { return index.getElement(this); }
|
|
168
|
+
static get watchers() { return {
|
|
169
|
+
"textareaHeight": ["onDimensionPropsChange"],
|
|
170
|
+
"textareaWidth": ["onDimensionPropsChange"],
|
|
171
|
+
"resizeBehavior": ["onResizeBehaviorChange"]
|
|
172
|
+
}; }
|
|
124
173
|
};
|
|
125
174
|
__decorate([
|
|
126
175
|
validation.HookValidationLifecycle()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-textarea.entry.cjs.js","sources":["src/components/input/textarea.scss?tag=ix-textarea&encapsulation=shadow","src/components/input/textarea.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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@use './input.mixins.scss';\n@use 'mixins/validation/form-component';\n\n@include input.input-field;\n\n@include form-component.host-valid;\n\n@include form-component.host-info {\n textarea {\n border-color: var(--theme-input--border-color--info);\n }\n\n textarea:hover {\n border-color: var(--theme-input--border-color--info--hover) !important;\n }\n\n textarea:active {\n border-color: var(--theme-input--border-color--info--active) !important;\n }\n}\n\n@include form-component.host-warning {\n textarea {\n background-color: var(--theme-input--background--warning);\n border-color: var(--theme-input--border-color--warning--active) !important;\n }\n\n textarea:hover {\n background-color: var(--theme-input--background--warning--hover);\n border-color: var(--theme-input--border-color--warning--hover) !important;\n }\n\n textarea:active {\n border-color: var(--theme-input--border-color--warning--active) !important;\n }\n}\n\n@include form-component.host-invalid {\n textarea {\n background-color: var(--theme-input--background--invalid);\n border-color: var(--theme-input--border-color--invalid) !important;\n }\n\n textarea:hover {\n background-color: var(--theme-input--background--invalid--hover);\n border-color: var(--theme-input--border-color--invalid--hover) !important;\n }\n\n textarea:active {\n border-color: var(--theme-input--border-color--invalid--active) !important;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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 Host,\n Method,\n Prop,\n State,\n h,\n} from '@stencil/core';\nimport {\n HookValidationLifecycle,\n IxInputFieldComponent,\n ValidationResults,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { TextareaElement } from './input.fc';\nimport { mapValidationResult, onInputBlur } from './input.util';\nimport type { TextareaResizeBehavior } from './textarea.types';\n\n/**\n * @form-ready\n */\n@Component({\n tag: 'ix-textarea',\n styleUrl: 'textarea.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Textarea implements IxInputFieldComponent<string> {\n @Element() hostElement!: HTMLIxTextareaElement;\n @AttachInternals() formInternals!: ElementInternals;\n\n /**\n * The name of the textarea field.\n */\n @Prop({ reflect: true }) name?: string;\n\n /**\n * The placeholder text for the textarea field.\n */\n @Prop({ reflect: true }) placeholder?: string;\n\n /**\n * The value of the textarea field.\n */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /**\n * Determines if the textarea field is required.\n */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Determines if the textarea field is disabled.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Determines if the textarea field is readonly.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * The helper text for the textarea field.\n */\n @Prop() helperText?: string;\n\n /**\n * The info text for the textarea field.\n */\n @Prop() infoText?: string;\n\n /**\n * Determines if the text should be displayed as a tooltip.\n */\n @Prop() showTextAsTooltip?: boolean;\n\n /**\n * The valid text for the textarea field.\n */\n @Prop() validText?: string;\n\n /**\n * The warning text for the textarea field.\n */\n @Prop() warningText?: string;\n\n /**\n * The label for the textarea field.\n */\n @Prop({ reflect: true }) label?: string;\n\n /**\n * The error text for the textarea field.\n */\n @Prop() invalidText?: string;\n\n /**\n * The height of the textarea field (e.g. \"52px\").\n */\n @Prop() textareaHeight?: string;\n\n /**\n * The width of the textarea field (e.g. \"200px\").\n */\n @Prop() textareaWidth?: string;\n\n /**\n * The height of the textarea specified by number of rows.\n */\n @Prop() textareaRows?: number;\n\n /**\n * The width of the textarea specified by number of characters.\n */\n @Prop() textareaCols?: number;\n\n /**\n * Determines the resize behavior of the textarea field.\n * Resizing can be enabled in one direction, both directions or completely disabled.\n */\n @Prop() resizeBehavior: TextareaResizeBehavior = 'both';\n\n /**\n * The maximum length of the textarea field.\n */\n @Prop() maxLength?: number;\n\n /**\n * The minimum length of the textarea field.\n */\n @Prop() minLength?: number;\n\n /**\n * Event emitted when the value of the textarea field changes.\n */\n @Event() valueChange!: EventEmitter<string>;\n\n /**\n * Event emitted when the validity state of the textarea field changes.\n */\n @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n /**\n * Event emitted when the textarea field loses focus.\n */\n @Event() ixBlur!: EventEmitter<void>;\n\n @State() isInvalid = false;\n @State() isValid = false;\n @State() isInfo = false;\n @State() isWarning = false;\n @State() isInvalidByRequired = false;\n\n private readonly textAreaRef = makeRef<HTMLTextAreaElement>();\n private touched = false;\n\n @HookValidationLifecycle()\n updateClassMappings(result: ValidationResults) {\n mapValidationResult(this, result);\n }\n\n componentWillLoad() {\n this.updateFormInternalValue(this.value);\n }\n\n updateFormInternalValue(value: string) {\n this.formInternals.setFormValue(value);\n this.value = value;\n }\n\n /** @internal */\n @Method()\n async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n return this.formInternals.form;\n }\n\n /** @internal */\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(!!this.value);\n }\n\n /**\n * Get the native textarea element.\n */\n @Method()\n getNativeInputElement(): Promise<HTMLTextAreaElement> {\n return this.textAreaRef.waitForCurrent();\n }\n\n /**\n * Focuses the input field\n */\n @Method()\n async focusInput(): Promise<void> {\n return (await this.getNativeInputElement()).focus();\n }\n\n /**\n * Check if the textarea field has been touched.\n * @internal\n * */\n @Method()\n isTouched(): Promise<boolean> {\n return Promise.resolve(this.touched);\n }\n\n render() {\n return (\n <Host\n class={{\n disabled: this.disabled,\n readonly: this.readonly,\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.textAreaRef}\n >\n {!!this.maxLength && this.maxLength > 0 && (\n <ix-typography\n class=\"bottom-text\"\n slot=\"bottom-right\"\n textColor=\"soft\"\n >\n {(this.value ?? '').length}/{this.maxLength}\n </ix-typography>\n )}\n <div class=\"input-wrapper\">\n <TextareaElement\n minLength={this.minLength}\n maxLength={this.maxLength}\n textareaCols={this.textareaCols}\n textareaRows={this.textareaRows}\n textareaHeight={this.textareaHeight}\n textareaWidth={this.textareaWidth}\n resizeBehavior={this.resizeBehavior}\n readonly={this.readonly}\n disabled={this.disabled}\n isInvalid={this.isInvalid}\n required={this.required}\n value={this.value}\n placeholder={this.placeholder}\n textAreaRef={this.textAreaRef}\n valueChange={(value) => this.valueChange.emit(value)}\n updateFormInternalValue={(value) =>\n this.updateFormInternalValue(value)\n }\n onBlur={() => {\n onInputBlur(this, this.textAreaRef.current);\n this.touched = true;\n }}\n ></TextareaElement>\n </div>\n </ix-field-wrapper>\n </Host>\n );\n }\n}\n"],"names":["makeRef","mapValidationResult","h","Host","TextareaElement","onInputBlur","HookValidationLifecycle"],"mappings":";;;;;;;;;;;;AAAA,MAAM,WAAW,GAAG,u7fAAu7f;;ACA38f;;;;;;;AAOG;;;;;;;;;;;MAiCU,QAAQ,GAAA,MAAA;AANrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;;;;;;AAoBE;;AAEG;AACqC,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAyDjC;;;AAGG;AACK,QAAA,IAAc,CAAA,cAAA,GAA2B,MAAM;AA2B9C,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AACjB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AACf,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AACd,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AACjB,QAAA,IAAmB,CAAA,mBAAA,GAAG,KAAK;AAEnB,QAAA,IAAW,CAAA,WAAA,GAAGA,eAAO,EAAuB;AACrD,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAmHxB;AAhHC,IAAA,mBAAmB,CAAC,MAAyB,EAAA;AAC3C,QAAAC,8BAAmB,CAAC,IAAI,EAAE,MAAM,CAAC;;IAGnC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC;;AAG1C,IAAA,uBAAuB,CAAC,KAAa,EAAA;AACnC,QAAA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC;AACtC,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;;AAKpB,IAAA,MAAM,wBAAwB,GAAA;AAC5B,QAAA,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI;;;IAKhC,aAAa,GAAA;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;;AAGtC;;AAEG;IAEH,qBAAqB,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,WAAW,CAAC,cAAc,EAAE;;AAG1C;;AAEG;AAEH,IAAA,MAAM,UAAU,GAAA;QACd,OAAO,CAAC,MAAM,IAAI,CAAC,qBAAqB,EAAE,EAAE,KAAK,EAAE;;AAGrD;;;AAGK;IAEL,SAAS,GAAA;QACP,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGtC,MAAM,GAAA;;QACJ,QACEC,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,EAAA,EAEDD,OAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,WAAW,EAAA,EAE3B,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,KACrCA,OACE,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,cAAc,EACnB,SAAS,EAAC,MAAM,EAAA,EAEf,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,EAAE,MAAM,OAAG,IAAI,CAAC,SAAS,CAC7B,CACjB,EACDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAC,CAAAE,0BAAe,EACd,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,WAAW,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EACpD,uBAAuB,EAAE,CAAC,KAAK,KAC7B,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAErC,MAAM,EAAE,MAAK;gBACXC,sBAAW,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;AAC3C,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACrB,aAAC,EACgB,CAAA,CACf,CACW,CACd;;;;;AA7GX,UAAA,CAAA;AADC,IAAAC,kCAAuB;CAGvB,EAAA,QAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,IAAA,CAAA;;;;;"}
|
|
1
|
+
{"version":3,"file":"ix-textarea.entry.cjs.js","sources":["src/components/input/textarea.scss?tag=ix-textarea&encapsulation=shadow","src/components/input/textarea.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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@use './input.mixins.scss';\n@use 'mixins/validation/form-component';\n\n@include input.input-field;\n\n@include form-component.host-valid;\n\n@include form-component.host-info {\n textarea {\n border-color: var(--theme-input--border-color--info);\n }\n\n textarea:hover {\n border-color: var(--theme-input--border-color--info--hover) !important;\n }\n\n textarea:active {\n border-color: var(--theme-input--border-color--info--active) !important;\n }\n}\n\n@include form-component.host-warning {\n textarea {\n background-color: var(--theme-input--background--warning);\n border-color: var(--theme-input--border-color--warning--active) !important;\n }\n\n textarea:hover {\n background-color: var(--theme-input--background--warning--hover);\n border-color: var(--theme-input--border-color--warning--hover) !important;\n }\n\n textarea:active {\n border-color: var(--theme-input--border-color--warning--active) !important;\n }\n}\n\n@include form-component.host-invalid {\n textarea {\n background-color: var(--theme-input--background--invalid);\n border-color: var(--theme-input--border-color--invalid) !important;\n }\n\n textarea:hover {\n background-color: var(--theme-input--background--invalid--hover);\n border-color: var(--theme-input--border-color--invalid--hover) !important;\n }\n\n textarea:active {\n border-color: var(--theme-input--border-color--invalid--active) !important;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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 Host,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport {\n HookValidationLifecycle,\n IxInputFieldComponent,\n ValidationResults,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { TextareaElement } from './input.fc';\nimport { mapValidationResult, onInputBlur } from './input.util';\nimport type { TextareaResizeBehavior } from './textarea.types';\n\n/**\n * @form-ready\n */\n@Component({\n tag: 'ix-textarea',\n styleUrl: 'textarea.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Textarea implements IxInputFieldComponent<string> {\n @Element() hostElement!: HTMLIxTextareaElement;\n @AttachInternals() formInternals!: ElementInternals;\n\n /**\n * The name of the textarea field.\n */\n @Prop({ reflect: true }) name?: string;\n\n /**\n * The placeholder text for the textarea field.\n */\n @Prop({ reflect: true }) placeholder?: string;\n\n /**\n * The value of the textarea field.\n */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /**\n * Determines if the textarea field is required.\n */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Determines if the textarea field is disabled.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Determines if the textarea field is readonly.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * The helper text for the textarea field.\n */\n @Prop() helperText?: string;\n\n /**\n * The info text for the textarea field.\n */\n @Prop() infoText?: string;\n\n /**\n * Determines if the text should be displayed as a tooltip.\n */\n @Prop() showTextAsTooltip?: boolean;\n\n /**\n * The valid text for the textarea field.\n */\n @Prop() validText?: string;\n\n /**\n * The warning text for the textarea field.\n */\n @Prop() warningText?: string;\n\n /**\n * The label for the textarea field.\n */\n @Prop({ reflect: true }) label?: string;\n\n /**\n * The error text for the textarea field.\n */\n @Prop() invalidText?: string;\n\n /**\n * The height of the textarea field (e.g. \"52px\").\n */\n @Prop() textareaHeight?: string;\n\n /**\n * The width of the textarea field (e.g. \"200px\").\n */\n @Prop() textareaWidth?: string;\n\n /**\n * The height of the textarea specified by number of rows.\n */\n @Prop() textareaRows?: number;\n\n /**\n * The width of the textarea specified by number of characters.\n */\n @Prop() textareaCols?: number;\n\n /**\n * Determines the resize behavior of the textarea field.\n * Resizing can be enabled in one direction, both directions or completely disabled.\n */\n @Prop() resizeBehavior: TextareaResizeBehavior = 'both';\n\n /**\n * The maximum length of the textarea field.\n */\n @Prop() maxLength?: number;\n\n /**\n * The minimum length of the textarea field.\n */\n @Prop() minLength?: number;\n\n /**\n * Event emitted when the value of the textarea field changes.\n */\n @Event() valueChange!: EventEmitter<string>;\n\n /**\n * Event emitted when the validity state of the textarea field changes.\n */\n @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n /**\n * Event emitted when the textarea field loses focus.\n */\n @Event() ixBlur!: EventEmitter<void>;\n\n @State() isInvalid = false;\n @State() isValid = false;\n @State() isInfo = false;\n @State() isWarning = false;\n @State() isInvalidByRequired = false;\n\n private readonly textAreaRef = makeRef<HTMLTextAreaElement>(() => {\n this.initResizeObserver();\n });\n private touched = false;\n private resizeObserver?: ResizeObserver;\n private isManuallyResized = false;\n private manualHeight?: string;\n private manualWidth?: string;\n private isProgrammaticResize = false;\n\n @HookValidationLifecycle()\n updateClassMappings(result: ValidationResults) {\n mapValidationResult(this, result);\n }\n\n @Watch('textareaHeight')\n @Watch('textareaWidth')\n onDimensionPropsChange() {\n this.isManuallyResized = false;\n this.manualHeight = undefined;\n this.manualWidth = undefined;\n this.isProgrammaticResize = true;\n }\n\n @Watch('resizeBehavior')\n onResizeBehaviorChange() {\n this.initResizeObserver();\n }\n\n componentWillLoad() {\n this.updateFormInternalValue(this.value);\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n private initResizeObserver() {\n this.resizeObserver?.disconnect();\n\n const textarea = this.textAreaRef.current;\n if (!textarea) return;\n\n if (this.resizeBehavior === 'none') return;\n\n let isInitialResize = true;\n\n this.resizeObserver = new ResizeObserver(() => {\n const textarea = this.textAreaRef.current;\n if (!textarea) return;\n\n if (isInitialResize) {\n isInitialResize = false;\n return;\n }\n\n if (this.isProgrammaticResize) {\n this.isProgrammaticResize = false;\n return;\n }\n\n this.isManuallyResized = true;\n this.manualHeight = textarea.style.height;\n this.manualWidth = textarea.style.width;\n });\n\n this.resizeObserver.observe(textarea);\n }\n\n updateFormInternalValue(value: string) {\n this.formInternals.setFormValue(value);\n this.value = value;\n }\n\n /** @internal */\n @Method()\n async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n return this.formInternals.form;\n }\n\n /** @internal */\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(!!this.value);\n }\n\n /**\n * Get the native textarea element.\n */\n @Method()\n getNativeInputElement(): Promise<HTMLTextAreaElement> {\n return this.textAreaRef.waitForCurrent();\n }\n\n /**\n * Focuses the input field\n */\n @Method()\n async focusInput(): Promise<void> {\n return (await this.getNativeInputElement()).focus();\n }\n\n /**\n * Check if the textarea field has been touched.\n * @internal\n * */\n @Method()\n isTouched(): Promise<boolean> {\n return Promise.resolve(this.touched);\n }\n\n render() {\n return (\n <Host\n class={{\n disabled: this.disabled,\n readonly: this.readonly,\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.textAreaRef}\n >\n {!!this.maxLength && this.maxLength > 0 && (\n <ix-typography\n class=\"bottom-text\"\n slot=\"bottom-right\"\n textColor=\"soft\"\n >\n {(this.value ?? '').length}/{this.maxLength}\n </ix-typography>\n )}\n <div class=\"input-wrapper\">\n <TextareaElement\n minLength={this.minLength}\n maxLength={this.maxLength}\n textareaCols={this.textareaCols}\n textareaRows={this.textareaRows}\n textareaHeight={\n this.isManuallyResized ? this.manualHeight : this.textareaHeight\n }\n textareaWidth={\n this.isManuallyResized ? this.manualWidth : this.textareaWidth\n }\n resizeBehavior={this.resizeBehavior}\n readonly={this.readonly}\n disabled={this.disabled}\n isInvalid={this.isInvalid}\n required={this.required}\n value={this.value}\n placeholder={this.placeholder}\n textAreaRef={this.textAreaRef}\n valueChange={(value) => this.valueChange.emit(value)}\n updateFormInternalValue={(value) =>\n this.updateFormInternalValue(value)\n }\n onBlur={() => {\n onInputBlur(this, this.textAreaRef.current);\n this.touched = true;\n }}\n ></TextareaElement>\n </div>\n </ix-field-wrapper>\n </Host>\n );\n }\n}\n"],"names":["makeRef","mapValidationResult","h","Host","TextareaElement","onInputBlur","HookValidationLifecycle"],"mappings":"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"}
|