@siemens/ix 2.0.2 → 2.1.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/base-button.js +1 -1
- package/components/base-button.js.map +1 -1
- package/components/breadcrumb-item.js +1 -1
- package/components/breadcrumb-item.js.map +1 -1
- package/components/button.js +1 -1
- package/components/button.js.map +1 -1
- package/components/dropdown.js +26 -1
- package/components/dropdown.js.map +1 -1
- package/components/icon-button.js +1 -1
- package/components/icon-button.js.map +1 -1
- package/components/ix-category-filter.js +1 -1
- package/components/ix-category-filter.js.map +1 -1
- package/components/ix-icon-toggle-button.js +1 -1
- package/components/ix-icon-toggle-button.js.map +1 -1
- package/components/ix-modal.js +6 -3
- package/components/ix-modal.js.map +1 -1
- package/components/ix-pagination.js +1 -1
- package/components/ix-pagination.js.map +1 -1
- package/components/ix-slider.js +26 -4
- package/components/ix-slider.js.map +1 -1
- package/components/listener.js +69 -0
- package/components/listener.js.map +1 -0
- package/components/select.js +23 -1
- package/components/select.js.map +1 -1
- package/components/tabs.js +35 -9
- package/components/tabs.js.map +1 -1
- package/dist/cjs/{base-button-c158438e.js → base-button-7af4dae7.js} +2 -2
- package/dist/cjs/base-button-7af4dae7.js.map +1 -0
- package/dist/cjs/{base-icon-button-bbca2582.js → base-icon-button-d085fd45.js} +2 -2
- package/dist/cjs/{base-icon-button-bbca2582.js.map → base-icon-button-d085fd45.js.map} +1 -1
- package/dist/cjs/ix-breadcrumb-item.cjs.entry.js +2 -2
- package/dist/cjs/ix-breadcrumb-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-burger-menu.cjs.entry.js +1 -1
- package/dist/cjs/ix-button.cjs.entry.js +2 -2
- package/dist/cjs/ix-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-category-filter.cjs.entry.js +2 -2
- package/dist/cjs/ix-category-filter.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-dropdown.cjs.entry.js +25 -0
- package/dist/cjs/ix-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-icon-button_2.cjs.entry.js +3 -3
- package/dist/cjs/ix-icon-button_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-icon-toggle-button.cjs.entry.js +3 -3
- package/dist/cjs/ix-icon-toggle-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-modal.cjs.entry.js +6 -3
- package/dist/cjs/ix-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-pagination.cjs.entry.js +2 -2
- package/dist/cjs/ix-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-select.cjs.entry.js +22 -0
- package/dist/cjs/ix-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-slider.cjs.entry.js +25 -3
- package/dist/cjs/ix-slider.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-tab-item_2.cjs.entry.js +35 -7
- package/dist/cjs/ix-tab-item_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-toggle-button.cjs.entry.js +1 -1
- package/dist/cjs/listener-0cce68b2.js +71 -0
- package/dist/cjs/listener-0cce68b2.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/siemens-ix.cjs.js +1 -1
- package/dist/collection/components/breadcrumb-item/breadcrumb-item.css +6 -0
- package/dist/collection/components/button/base-button.js +1 -1
- package/dist/collection/components/button/base-button.js.map +1 -1
- package/dist/collection/components/button/button.css +3 -0
- package/dist/collection/components/category-filter/category-filter.css +3 -0
- package/dist/collection/components/dropdown/dropdown.js +17 -15
- package/dist/collection/components/dropdown/dropdown.js.map +1 -1
- package/dist/collection/components/icon-button/icon-button.css +3 -0
- package/dist/collection/components/icon-toggle-button/icon-toggle-button.css +3 -0
- package/dist/collection/components/modal/modal.js +6 -3
- package/dist/collection/components/modal/modal.js.map +1 -1
- package/dist/collection/components/pagination/pagination.css +3 -0
- package/dist/collection/components/select/select.js +14 -6
- package/dist/collection/components/select/select.js.map +1 -1
- package/dist/collection/components/slider/slider.js +15 -10
- package/dist/collection/components/slider/slider.js.map +1 -1
- package/dist/collection/components/tabs/tabs.js +12 -9
- package/dist/collection/components/tabs/tabs.js.map +1 -1
- package/dist/collection/components/utils/listener.js +65 -0
- package/dist/collection/components/utils/listener.js.map +1 -0
- package/dist/collection/components/utils/requestAnimationFrame.js +24 -0
- package/dist/collection/components/utils/requestAnimationFrame.js.map +1 -0
- package/dist/esm/{base-button-87048318.js → base-button-a4078c61.js} +2 -2
- package/dist/esm/base-button-a4078c61.js.map +1 -0
- package/dist/esm/{base-icon-button-afac2d95.js → base-icon-button-a3dc30a2.js} +2 -2
- package/dist/esm/{base-icon-button-afac2d95.js.map → base-icon-button-a3dc30a2.js.map} +1 -1
- package/dist/esm/ix-breadcrumb-item.entry.js +2 -2
- package/dist/esm/ix-breadcrumb-item.entry.js.map +1 -1
- package/dist/esm/ix-burger-menu.entry.js +1 -1
- package/dist/esm/ix-button.entry.js +2 -2
- package/dist/esm/ix-button.entry.js.map +1 -1
- package/dist/esm/ix-category-filter.entry.js +2 -2
- package/dist/esm/ix-category-filter.entry.js.map +1 -1
- package/dist/esm/ix-dropdown.entry.js +25 -0
- package/dist/esm/ix-dropdown.entry.js.map +1 -1
- package/dist/esm/ix-icon-button_2.entry.js +3 -3
- package/dist/esm/ix-icon-button_2.entry.js.map +1 -1
- package/dist/esm/ix-icon-toggle-button.entry.js +3 -3
- package/dist/esm/ix-icon-toggle-button.entry.js.map +1 -1
- package/dist/esm/ix-modal.entry.js +6 -3
- package/dist/esm/ix-modal.entry.js.map +1 -1
- package/dist/esm/ix-pagination.entry.js +2 -2
- package/dist/esm/ix-pagination.entry.js.map +1 -1
- package/dist/esm/ix-select.entry.js +22 -0
- package/dist/esm/ix-select.entry.js.map +1 -1
- package/dist/esm/ix-slider.entry.js +25 -3
- package/dist/esm/ix-slider.entry.js.map +1 -1
- package/dist/esm/ix-tab-item_2.entry.js +35 -7
- package/dist/esm/ix-tab-item_2.entry.js.map +1 -1
- package/dist/esm/ix-toggle-button.entry.js +1 -1
- package/dist/esm/listener-3ed639e6.js +69 -0
- package/dist/esm/listener-3ed639e6.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/siemens-ix.js +1 -1
- package/dist/siemens-ix/p-1c77b603.entry.js +2 -0
- package/dist/siemens-ix/p-1c77b603.entry.js.map +1 -0
- package/dist/siemens-ix/p-1d71b7bb.entry.js +2 -0
- package/dist/siemens-ix/p-1d71b7bb.entry.js.map +1 -0
- package/dist/siemens-ix/p-222b1672.entry.js +2 -0
- package/dist/siemens-ix/p-222b1672.entry.js.map +1 -0
- package/dist/siemens-ix/{p-fa7f3eef.entry.js → p-37e0706d.entry.js} +2 -2
- package/dist/siemens-ix/{p-fa7f3eef.entry.js.map → p-37e0706d.entry.js.map} +1 -1
- package/dist/siemens-ix/p-49fab806.entry.js +2 -0
- package/dist/siemens-ix/{p-9249df8d.entry.js.map → p-49fab806.entry.js.map} +1 -1
- package/dist/siemens-ix/p-51853519.entry.js +2 -0
- package/dist/siemens-ix/{p-302cd093.entry.js.map → p-51853519.entry.js.map} +1 -1
- package/dist/siemens-ix/p-5a0d7f95.entry.js +2 -0
- package/dist/siemens-ix/{p-355f9085.entry.js.map → p-5a0d7f95.entry.js.map} +1 -1
- package/dist/siemens-ix/p-79405d11.entry.js +2 -0
- package/dist/siemens-ix/{p-59dc0873.entry.js.map → p-79405d11.entry.js.map} +1 -1
- package/dist/siemens-ix/{p-ab452b82.js → p-7c5fc1c9.js} +2 -2
- package/dist/siemens-ix/{p-ab452b82.js.map → p-7c5fc1c9.js.map} +1 -1
- package/dist/siemens-ix/p-8b0793be.js +2 -0
- package/dist/siemens-ix/{p-b2042a15.entry.js → p-a00079d9.entry.js} +2 -2
- package/dist/siemens-ix/p-a00079d9.entry.js.map +1 -0
- package/dist/siemens-ix/p-b59e7155.js +2 -0
- package/dist/siemens-ix/p-b59e7155.js.map +1 -0
- package/dist/siemens-ix/p-cbf309da.entry.js +2 -0
- package/dist/siemens-ix/{p-32265ee2.entry.js.map → p-cbf309da.entry.js.map} +1 -1
- package/dist/siemens-ix/{p-042b8889.entry.js → p-d11781e7.entry.js} +2 -2
- package/dist/siemens-ix/p-dc7bb79e.entry.js +2 -0
- package/dist/siemens-ix/p-dc7bb79e.entry.js.map +1 -0
- package/dist/siemens-ix/{p-228c5657.entry.js → p-e483ad44.entry.js} +2 -2
- package/dist/siemens-ix/siemens-ix.esm.js +1 -1
- package/dist/siemens-ix/siemens-ix.esm.js.map +1 -1
- package/dist/types/components/slider/slider.d.ts +1 -1
- package/dist/types/components/tabs/tabs.d.ts +2 -2
- package/dist/types/components/utils/listener.d.ts +11 -0
- package/dist/types/components/utils/requestAnimationFrame.d.ts +7 -0
- package/package.json +1 -1
- package/dist/cjs/base-button-c158438e.js.map +0 -1
- package/dist/esm/base-button-87048318.js.map +0 -1
- package/dist/siemens-ix/p-1b9b19e6.js +0 -2
- package/dist/siemens-ix/p-28d29e36.entry.js +0 -2
- package/dist/siemens-ix/p-28d29e36.entry.js.map +0 -1
- package/dist/siemens-ix/p-302cd093.entry.js +0 -2
- package/dist/siemens-ix/p-32265ee2.entry.js +0 -2
- package/dist/siemens-ix/p-355f9085.entry.js +0 -2
- package/dist/siemens-ix/p-3ab30153.entry.js +0 -2
- package/dist/siemens-ix/p-3ab30153.entry.js.map +0 -1
- package/dist/siemens-ix/p-59dc0873.entry.js +0 -2
- package/dist/siemens-ix/p-9249df8d.entry.js +0 -2
- package/dist/siemens-ix/p-b2042a15.entry.js.map +0 -1
- package/dist/siemens-ix/p-bd873b87.entry.js +0 -2
- package/dist/siemens-ix/p-bd873b87.entry.js.map +0 -1
- package/dist/siemens-ix/p-d16a4670.entry.js +0 -2
- package/dist/siemens-ix/p-d16a4670.entry.js.map +0 -1
- /package/dist/siemens-ix/{p-1b9b19e6.js.map → p-8b0793be.js.map} +0 -0
- /package/dist/siemens-ix/{p-042b8889.entry.js.map → p-d11781e7.entry.js.map} +0 -0
- /package/dist/siemens-ix/{p-228c5657.entry.js.map → p-e483ad44.entry.js.map} +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["tabItemCss","TabItem","tabItemClasses","props","selected","disabled","small","icon","stretched","layout","bottom","placement","top","circle","render","h","Host","class","this","rounded","tabIndex","onClick","event","clientEvent","tabClick","emit","nativeEvent","defaultPrevented","stopPropagation","text","counter","hidden","undefined","tabsCss","Tabs","windowStartSize","window","innerWidth","clickAction","timeout","isClick","onWindowResize","totalItems","getTabs","length","move","Array","from","hostElement","querySelectorAll","getTab","getTabsWrapper","shadowRoot","querySelector","showArrows","tabWrapper","scrollWidth","Math","ceil","getBoundingClientRect","width","error","showPreviousArrow","scrollActionAmount","showNextArrow","tabWrapperRect","getArrowStyle","condition","opacity","zIndex","amount","click","maxScrollWidth","currentScrollAmount","styles","join","setAttribute","moveTabToView","tab","x","setSelected","index","clickTab","dragStop","selectedChange","dragStart","element","button","setTimeout","tabPositionX","parseFloat","getComputedStyle","left","mousedownPositionX","clientX","dragMove","addEventListener","removeEventListener","tabX","mousedownX","clearTimeout","componentDidRender","tabs","forEach","componentWillRender","requestAnimationFrame","previousArrow","styleNextArrow","stylePreviousArrow","componentDidLoad","onTabClick","target","style","scrollAmount","name"],"sources":["./src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","./src/components/tab-item/tab-item.tsx","./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@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","/*\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';\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 @State() styleNextArrow = {};\n @State() stylePreviousArrow = {};\n\n @State() scrollActionAmount = 0;\n\n private windowStartSize = window.innerWidth;\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 componentDidRender() {\n const tabs = this.getTabs();\n this.totalItems = tabs.length;\n\n tabs.forEach((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 element.setAttribute('placement', this.placement);\n });\n }\n\n componentWillRender() {\n requestAnimationFrame(() => {\n const showNextArrow = this.showNextArrow();\n const previousArrow = this.showPreviousArrow();\n this.styleNextArrow = this.getArrowStyle(showNextArrow);\n this.stylePreviousArrow = this.getArrowStyle(previousArrow);\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 style={this.stylePreviousArrow}\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 style={this.styleNextArrow}\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"],"mappings":"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"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|