npm - @siemens/ix - Versions diffs - 1.6.3 → 2.0.0-beta.1 - Mend

@siemens/ix 1.6.3 → 2.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1549) hide show

package/dist/components/spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"spinner.js","mappings":"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","names":[],"sources":["./src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n height: 2rem;\n width: 2rem;\n justify-content: center;\n align-items: center;\n\n svg {\n height: 2rem;\n width: 2rem;\n }\n\n #fill {\n fill: var(--theme-color-weak-text);\n }\n\n #stroke {\n stroke: var(--theme-color-weak-text);\n }\n}\n\n:host(.primary) {\n #fill {\n fill: var(--theme-color-primary);\n }\n\n #stroke {\n stroke: var(--theme-color-primary);\n }\n}\n\n:host(.large) {\n height: 6rem;\n width: 6rem;\n\n svg {\n height: 5.75rem;\n width: 6rem;\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 { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n /\n Variant of spinner\n /\n @Prop() variant: 'primary' \| 'sencodary' \| 'secondary' = 'secondary';\n\n /\n Size of spinner\n */\n @Prop() size: 'medium' \| 'large' = 'medium';\n\n render() {\n return (\n <Host\n class={{\n primary: this.variant === 'primary',\n large: this.size === 'large',\n }}\n >\n <svg\n viewBox=\"0 0 32 32\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g\n id=\"waiting-anim\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g\n id=\"stroke\"\n transform=\"translate(4.5, 3)\"\n fill-rule=\"nonzero\"\n stroke=\"#0F8287\"\n stroke-linejoin=\"round\"\n >\n <polygon\n id=\"w1\"\n points=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n visibility=\"hidden\"\n >\n <set\n attributeName=\"visibility\"\n begin=\"0s;w6ul.end\"\n to=\"visible\"\n />\n <animate\n id=\"w1l\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"0s;w6ul.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n to=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"w1ul\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f6uf.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n to=\"16.88749535 9.25 22.5166605 6.5 11.2583302 13\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"w1ul.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"w2\"\n points=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"w1l.end\" to=\"visible\" />\n <animate\n id=\"w2l\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w1l.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n to=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"w2ul\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w1ul.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n to=\"16.88749535 16.25 22.5166605 19.5 11.2583302 13\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"w2ul.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"w3\"\n points=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"w2l.end\" to=\"visible\" />\n <animate\n id=\"w3l\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w2l.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n to=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"w3ul\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w2ul.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n to=\"11.2583302 13 11.2583302 19.5 11.2583302 26\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"w3ul.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"w4\"\n points=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"w3l.end\" to=\"visible\" />\n <animate\n id=\"w4l\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w3l.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n to=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"w4ul\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w3ul.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n to=\"5.62651 16.25 4.4408921e-15 19.5 11.2583302 13\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"w4ul.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"w5\"\n points=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"w4l.end\" to=\"visible\" />\n <animate\n id=\"w5l\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w4l.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n to=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"w5ul\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w4ul.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n to=\"11.2583302 13 5.6291651 9.75 1.687539e-14 6.5\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"w5ul.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"w6\"\n points=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"w5l.end\" to=\"visible\" />\n <animate\n id=\"w6l\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w5l.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n to=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"w6ul\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w5ul.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n to=\"11.2583302 0 11.2583302 13 11.2583302 6.5\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"w6ul.end\" to=\"hidden\" />\n </polygon>\n </g>\n <g\n id=\"fill\"\n transform=\"translate(4.5, 3)\"\n fill=\"#0F8287\"\n fill-rule=\"nonzero\"\n >\n <polygon\n id=\"f1\"\n points=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"w6l.end\" to=\"visible\" />\n <animate\n id=\"f1f\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w6l.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n to=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"f1uf\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f6f.end + 0.2s\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n to=\"16.88749535 9.25 22.5166605 6.5 11.2583302 13\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"f1uf.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"f2\"\n points=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"f1f.end\" to=\"visible\" />\n <animate\n id=\"f2f\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f1f.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n to=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"f2uf\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f1uf.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n to=\"16.88749535 16.25 22.5166605 19.5 11.2583302 13\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"f2uf.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"f3\"\n points=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"f2f.end\" to=\"visible\" />\n <animate\n id=\"f3f\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f2f.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n to=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"f3uf\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f2uf.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n to=\"11.2583302 13 11.2583302 19.5 11.2583302 26\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"f3uf.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"f4\"\n points=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"f3f.end\" to=\"visible\" />\n <animate\n id=\"f4f\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f3f.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n to=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"f4uf\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f3uf.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n to=\"5.62651 16.25 4.4408921e-15 19.5 11.2583302 13\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"f4uf.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"f5\"\n points=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"f4f.end\" to=\"visible\" />\n <animate\n id=\"f5f\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f4f.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n to=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"f5uf\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f4uf.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n to=\"11.2583302 13 5.6291651 9.75 1.687539e-14 6.5\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"f5uf.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"f6\"\n points=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"f5f.end\" to=\"visible\" />\n <animate\n id=\"f6f\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f5f.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n to=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"f6uf\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f5uf.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n to=\"11.2583302 0 11.2583302 13 11.2583302 6.5\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"f6uf.end\" to=\"hidden\" />\n </polygon>\n </g>\n </g>\n </svg>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"spinner.js","mappings":";;AAAA,MAAM,UAAU,GAAG,sjbAAsjb;;MCgB5jb,OAAO;;;;;mBAMyB,WAAW;gBAMpD,QAAQ;qBAKU,KAAK;;EAEzB,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;QACpC,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QAClC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QAC9B,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QAC5B,YAAY,EAAE,IAAI,CAAC,SAAS;OAC7B,GACK,EACR;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/shadow-dom/component';\n\n@mixin ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 4px) {\n :host(.#{$host-class}) {\n @include ix-component;\n display: block;\n position: relative;\n\n width: $size;\n height: $size;\n min-width: $size;\n min-height: $size;\n max-width: $size;\n max-height: $size;\n border-radius: 100%;\n position: relative;\n animation: rotate 2s linear infinite;\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes clipMask {\n 0% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 12.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 25% {\n clip-path: polygon(\n 50% 50%,\n 0 0,\n 100% 0,\n 100% 100%,\n 100% 100%,\n 100% 100%\n );\n }\n 37.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 50% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 62.5% {\n clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 75% {\n clip-path: polygon(\n 50% 50%,\n 100% 100%,\n 100% 100%,\n 100% 100%,\n 0 100%,\n 0 0\n );\n }\n 87.5% {\n clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n }\n 100% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n }\n }\n\n :host(.#{$host-class})::after {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid\n var(--ix-button-color, var(--theme-color-soft-text));\n animation: clipMask 3s linear infinite;\n }\n\n :host(:not(.hide-track)):host(.#{$host-class})::before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid var(--theme-color-ghost--hover);\n }\n\n :host(.primary)::after {\n border-color: var(--theme-color-dynamic);\n }\n\n :host(.primary)::before {\n border-color: var(--theme-color-ghost--hover);\n }\n}\n\n@include ix-spinner($host-class: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($host-class: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($host-class: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($host-class: 'large', $size: 6rem, $track-size: 4px);\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() hostElement!: HTMLIxSpinnerElement;\n\n /\n Variant of spinner\n /\n @Prop() variant: 'primary' \| 'secondary' = 'secondary';\n\n /\n Size of spinner\n /\n @Prop() size: 'xx-small' \| 'x-small' \| 'small' \| 'medium' \| 'large' =\n 'medium';\n\n /\n @internal\n */\n @Prop() hideTrack = false;\n\n render() {\n return (\n <Host\n class={{\n primary: this.variant === 'primary',\n 'xx-small': this.size === 'xx-small',\n 'x-small': this.size === 'x-small',\n small: this.size === 'small',\n medium: this.size === 'medium',\n large: this.size === 'large',\n 'hide-track': this.hideTrack,\n }}\n ></Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,11 +1,13 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-const tabItemCss = "@charset \"UTF-8\";ix-tab-item{position:relative;display:flex;align-items:center;justify-content:center;height:40px;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}ix-tab-item.circle{height:72px}ix-tab-item.top::after{top:0}ix-tab-item.bottom::after{bottom:0}ix-tab-item::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}ix-tab-item.stretched{flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ix-tab-item .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}ix-tab-item .text span,ix-tab-item .text span::before{pointer-events:none}ix-tab-item:hover:not(.circle){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}ix-tab-item:hover:not(.circle)::after{background-color:var(--theme-tab-indicator--background--hover)}ix-tab-item:active:not(.circle){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}ix-tab-item:active:not(.circle)::after{background-color:var(--theme-tab-indicator--background--active)}ix-tab-item:focus-visible{outline:0px solid var(--focus--border-color)}ix-tab-item:focus-visible .circle{outline:1px solid var(--focus--border-color)}ix-tab-item:focus-visible:not(.circle){outline:1px solid var(--focus--border-color)}ix-tab-item.disabled{color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}ix-tab-item.disabled::after{background-color:var(--theme-tab-indicator--background--disabled)}ix-tab-item.selected:not(.disabled){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}ix-tab-item.selected:not(.disabled)::after{background-color:var(--theme-tab-indicator--background--selected)}ix-tab-item.icon{padding:1.5rem 0.5rem}ix-tab-item.small-tab{height:32px;padding:1rem}ix-tab-item.small-tab.icon{padding:1rem 0.25rem}ix-tab-item .circle{display:flex;justify-content:center;align-items:center;height:48px;width:48px;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}ix-tab-item .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)}ix-tab-item .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}ix-tab-item .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}ix-tab-item .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}ix-tab-item .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}ix-tab-item .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}ix-tab-item .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:16px;color:var(--theme-pill-outline--color);cursor:pointer}ix-tab-item .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}ix-tab-item .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}ix-tab-item .hidden{display:none}";
+const tabItemCss = "@charset \"UTF-8\";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host .text span,:host .text span::before{pointer-events:none}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.selected::after{display:none}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .counter::after{display:none}:host .hidden{display:none}:host(.circle){height:72px}:host(.top) ::after{top:0}:host(.bottom) ::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle)) ::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle)) ::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled) ::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled)) ::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}";
 const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
+    this.tabClick = createEvent(this, "tabClick", 7);
     this.selected = false;
     this.disabled = false;
     this.small = false;
@@ -36,7 +38,14 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
         layout: this.layout,
         placement: this.placement,
         circle: this.rounded,
-      }), tabIndex: 0 }, h("div", { class: {
+      }), tabIndex: 0, onClick: (event) => {
+        const clientEvent = this.tabClick.emit({
+          nativeEvent: event,
+        });
+        if (clientEvent.defaultPrevented) {
+          event.stopPropagation();
+        }
+      } }, h("div", { class: {
         circle: this.rounded,
         text: !this.rounded,
         selected: this.selected,
@@ -49,7 +58,7 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
       } }, this.counter)));
   }
   static get style() { return tabItemCss; }
-}, [4, "ix-tab-item", {
+}, [1, "ix-tab-item", {
     "selected": [4],
     "disabled": [4],
     "small": [4],

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

	@@ -1 +1 @@
1	- {"file":"tab-item.js","mappings":";;AAAA,MAAM,UAAU,GAAG,~~8tHAA8tH~~;;~~MCgBpuH~~,OAAO~~;;;;~~oBAIC,KAAK;oBAKL,KAAK;iBAKR,KAAK;gBAKN,KAAK;mBAKF,KAAK;;kBAUgB,MAAM;qBAKP,QAAQ;;~~EAEtC~~,cAAc,CAAC,KAQtB;IACC,OAAO;MACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,WAAW,EAAE,KAAK,CAAC,KAAK;MACxB,IAAI,EAAE,KAAK,CAAC,KAAK;MACjB,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;MACvC,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;MACpC,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;MAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;KACrB,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;QACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,MAAM,EAAE,IAAI,CAAC,OAAO;OACrB,CAAC,EACF,QAAQ,EAAE,CAAC,~~IAEX~~,WACE,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,OAAO;QACpB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAa,CACT,EACN,WACE,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;QACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAEA,IAAI,CAAC,OAAO,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tab-item/tab-item.scss?tag=ix-tab-item","./src/components/tab-item/tab-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n\~~nix-tab-item~~ {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n ~~height: 40px;\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 ~~&.circle {\n height: 72px;\n }\n\n &.top {\n &::~~after {\n ~~top: 0;\n~~ ~~}\n }\n\n &.bottom {\n &::after {\n bottom: 0;\n }\n }\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 ~~&.stretched {\n flex-basis: 100%;\n width: 100%;\n @include ellipsis;\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 ~~&: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 &: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 &: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 &:focus-visible:not(.circle) {\n outline: 1px solid var(--focus--border-color);\n }\n\n &.disabled {\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 &.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 &.icon {\n padding: $large-space $small-space;\n }\n\n &.small-tab {\n height: 32px;\n padding: $default-space;\n\n &.icon {\n padding: $default-space $tiny-space;\n }\n }\n\n .circle {\n display: flex;\n justify-content: center;\n align-items: center;\n height: ~~48px~~;\n width: ~~48px~~;\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: ~~16px~~;\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 * 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, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-tab-item',\n styleUrl: 'tab-item.scss',\n ~~scoped~~: ~~false~~,\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 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 >\n <div\n class={{\n circle: this.rounded,\n text: !this.rounded,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n <div\n class={{\n counter: true,\n selected: this.selected,\n hidden: !(this.rounded && this.counter !== undefined),\n disabled: this.disabled,\n }}\n >\n {this.counter}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"tab-item.js","mappings":";;AAAA,MAAM,UAAU,GAAG,gvIAAgvI;;MCoBtvI,OAAO;;;;;;oBAIC,KAAK;oBAKL,KAAK;iBAKR,KAAK;gBAKN,KAAK;mBAKF,KAAK;;kBAUgB,MAAM;qBAKP,QAAQ;;EAStC,cAAc,CAAC,KAQtB;IACC,OAAO;MACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,WAAW,EAAE,KAAK,CAAC,KAAK;MACxB,IAAI,EAAE,KAAK,CAAC,KAAK;MACjB,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;MACvC,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;MACpC,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;MAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;KACrB,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;QACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,MAAM,EAAE,IAAI,CAAC,OAAO;OACrB,CAAC,EACF,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,CAAC,KAAiB;QACzB,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACrC,WAAW,EAAE,KAAK;SACnB,CAAC,CAAC;QAEH,IAAI,WAAW,CAAC,gBAAgB,EAAE;UAChC,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;OACF,IAED,WACE,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,OAAO;QACpB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAa,CACT,EACN,WACE,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;QACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAEA,IAAI,CAAC,OAAO,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","./src/components/tab-item/tab-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px $large-space;\n line-height: 20px;\n font-size: 14px;\n font-weight: bold;\n background-color: var(--theme-tab--background);\n color: var(--theme-tab--color);\n\n ::after {\n content: '';\n position: absolute;\n background-color: var(--theme-tab-indicator--background);\n width: 100%;\n height: var(--theme-tab-indicator--height);\n left: 0;\n }\n\n .text {\n @include ellipsis;\n\n span,\n span::before {\n pointer-events: none;\n }\n\n vertical-align: middle;\n }\n\n .circle {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 3rem;\n width: 3rem;\n background-color: var(--theme-animated-tab-indicator--background);\n border-radius: 50%;\n border: 2px solid var(--theme-animated-tab-circle--border-color);\n color: var(--theme-an…icon--color);\n cursor: pointer;\n\n &.selected:not(.disabled) {\n background-color: var(--theme-animated-tab-circle--background--selected);\n color: var(--theme-animated-tab-icon--color--selected);\n border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n &:hover {\n background-color: var(\n --theme-animated-tab-circle--background--selected\n );\n }\n }\n\n &:hover {\n background-color: var(--theme-animated-tab-circle--background--hover);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &.disabled {\n background-color: var(--theme-animated-tab-circle--background--disabled);\n border-color: var(--theme-animated-tab-circle--border-color--disabled);\n }\n }\n\n .counter {\n position: absolute;\n z-index: 1;\n height: 16px;\n width: auto;\n background-color: var(--theme-pill-outline--background);\n border: 1px solid var(--theme-tab-pill--border-color);\n border-radius: 100px;\n bottom: 6px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-left: $tiny-space;\n padding-right: $tiny-space;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-pill-outline--color);\n cursor: pointer;\n\n &.selected {\n border-color: var(--theme-tab-pill--border-color--selected);\n\n &::after {\n display: none;\n }\n }\n\n &.disabled {\n border-color: var(--theme-tab-pill--border-color--disabled);\n }\n\n &::after {\n display: none;\n }\n }\n\n .hidden {\n display: none;\n }\n}\n\n:host(.circle) {\n height: 72px;\n}\n\n:host(.top) {\n ::after {\n top: 0;\n }\n}\n\n:host(.bottom) {\n ::after {\n bottom: 0;\n }\n}\n\n:host(.stretched) {\n flex-basis: 100%;\n width: 100%;\n @include ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n background-color: var(--theme-tab--background--hover);\n color: var(--theme-tab-color-hover);\n cursor: pointer;\n\n ::after {\n background-color: var(--theme-tab-indicator--background--hover);\n }\n}\n\n:host(:active:not(.circle)) {\n background-color: var(--theme-tab--background--active);\n color: var(--theme-tab-color--active);\n\n ::after {\n background-color: var(--theme-tab-indicator--background--active);\n }\n}\n\n:host(:focus-visible) {\n outline: 0px solid var(--focus--border-color);\n\n .circle {\n outline: 1px solid var(--focus--border-color);\n }\n}\n\n:host(:focus-visible:not(.circle)) {\n outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n pointer-events: none;\n color: var(--theme-tab--color--disabled);\n background-color: var(--theme-tab--background--disabled);\n\n ::after {\n background-color: var(--theme-tab-indicator--background--disabled);\n }\n}\n\n:host(.selected:not(.disabled)) {\n background-color: var(--theme-tab--background--selected);\n color: var(--theme-tab--color--selected);\n\n ::after {\n background-color: var(--theme-tab-indicator--background--selected);\n }\n}\n\n:host(.icon) {\n padding: $large-space $small-space;\n}\n\n:host(.small-tab) {\n height: 32px;\n padding: $default-space;\n}\n\n:host(.small-tab.icon) {\n padding: $default-space $tiny-space;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type TabClickDetail = {\n nativeEvent: MouseEvent;\n};\n\n@Component({\n tag: 'ix-tab-item',\n styleUrl: 'tab-item.scss',\n shadow: true,\n})\nexport class TabItem {\n /\n Set selected tab\n /\n @Prop() selected = false;\n\n /\n Set disabled tab\n /\n @Prop() disabled = false;\n\n /\n Set small size tab\n /\n @Prop() small = false;\n\n /\n Set icon only tab\n /\n @Prop() icon = false;\n\n /\n Set rounded tab\n /\n @Prop() rounded = false;\n\n /\n Set counter value\n /\n @Prop() counter: number;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set selected placement\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n On tab click\n \n @since 2.0.0\n */\n @Event() tabClick: EventEmitter<TabClickDetail>;\n\n private tabItemClasses(props: {\n selected: boolean;\n disabled: boolean;\n small: boolean;\n icon: boolean;\n circle: boolean;\n layout: 'auto' \| 'stretched';\n placement: 'bottom' \| 'top';\n }) {\n return {\n selected: props.selected,\n disabled: props.disabled,\n 'small-tab': props.small,\n icon: props.small,\n stretched: props.layout === 'stretched',\n bottom: props.placement === 'bottom',\n top: props.placement === 'top',\n circle: props.circle,\n };\n }\n\n render() {\n return (\n <Host\n class={this.tabItemClasses({\n selected: this.selected,\n disabled: this.disabled,\n small: this.small,\n icon: this.icon,\n layout: this.layout,\n placement: this.placement,\n circle: this.rounded,\n })}\n tabIndex={0}\n onClick={(event: MouseEvent) => {\n const clientEvent = this.tabClick.emit({\n nativeEvent: event,\n });\n\n if (clientEvent.defaultPrevented) {\n event.stopPropagation();\n }\n }}\n >\n <div\n class={{\n circle: this.rounded,\n text: !this.rounded,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n <div\n class={{\n counter: true,\n selected: this.selected,\n hidden: !(this.rounded && this.counter !== undefined),\n disabled: this.disabled,\n }}\n >\n {this.counter}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/tabs.js CHANGED Viewed

@@ -1,12 +1,15 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './icon.js';
-const tabsCss = "ix-tabs{width:auto;display:flex;align-items:center;position:relative}ix-tabs .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}ix-tabs .tab-items .items-content{display:flex;align-items:center}ix-tabs .arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-invisible-primary--color);background-color:var(--theme-btn-invisible-primary--background);z-index:2}ix-tabs .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}ix-tabs .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}ix-tabs .arrow.right{left:auto;right:0}ix-tabs .overflow-shadow{width:50px;height:40px;position:absolute;left:0;top:0;background:linear-gradient(90deg, var(--theme-color-1) 50%, transparent);z-index:1}ix-tabs .overflow-shadow.right{left:auto;right:0;background:linear-gradient(90deg, transparent, var(--theme-color-1) 50%)}";
+const tabsCss = ":host{width:auto;display:flex;align-items:center;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}:host .tab-items .items-content{display:flex;align-items:center}:host .arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-invisible-primary--color);background-color:var(--theme-btn-invisible-primary--background);z-index:2}:host .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}:host .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}:host .arrow.right{left:auto;right:0}:host .overflow-shadow{display:block;position:relative;height:100%;width:100%;pointer-events:all}:host .overflow-shadow.shadow-left{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px);mask-image:linear-gradient(90deg, transparent 0px, black 45px)}:host .overflow-shadow.shadow-right{-webkit-mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%)}:host .overflow-shadow.shadow-both{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%)}";
 let windowStartSize = window.innerWidth;
 const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
+    this.selectedChange = createEvent(this, "selectedChange", 7);
     this.clickAction = {
       timeout: null,
       isClick: true,
@@ -38,7 +41,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
     return this.getTabs()[tabIndex];
   }
   getTabsWrapper() {
-    return this.hostElement.getElementsByClassName('items-content')[0];
+    return this.hostElement.shadowRoot.querySelector('.items-content');
   }
   showArrows() {
     try {
@@ -103,8 +106,13 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
     this.selected = index;
   }
   clickTab(index) {
-    if (this.dragStop())
+    if (this.dragStop()) {
       return;
+    }
+    const { defaultPrevented } = this.selectedChange.emit(index);
+    if (defaultPrevented) {
+      return;
+    }
     this.setSelected(index);
     this.moveTabToView(index);
   }
@@ -153,25 +161,42 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
   }
   componentWillRender() {
     requestAnimationFrame(() => {
-      this.styleNextArrow = this.getArrowStyle(this.showNextArrow());
-      this.stylePreviousArrow = this.getArrowStyle(this.showPreviousArrow());
+      const showNextArrow = this.showNextArrow();
+      const previousArrow = this.showPreviousArrow();
+      this.styleNextArrow = this.getArrowStyle(showNextArrow);
+      this.stylePreviousArrow = this.getArrowStyle(previousArrow);
     });
   }
   componentDidLoad() {
     const tabs = this.getTabs();
-    tabs.forEach((element, index) => {
-      const isDisabled = element.getAttribute('disabled') !== null;
-      if (!isDisabled)
-        element.addEventListener('click', () => this.clickTab(index));
+    tabs.forEach((element) => {
       element.addEventListener('mousedown', (event) => this.dragStart(element, event));
     });
   }
+  onTabClick(event) {
+    if (event.defaultPrevented) {
+      return;
+    }
+    const target = event.target;
+    const tabs = this.getTabs();
+    tabs.forEach((tab, index) => {
+      if (!tab.disabled && tab === target) {
+        this.clickTab(index);
+      }
+    });
+  }
   render() {
-    return (h(Host, null, h("div", { class: "overflow-shadow", style: this.stylePreviousArrow }), h("div", { class: "arrow", style: this.stylePreviousArrow, onClick: () => this.move(this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-left-small" })), h("div", { class: "tab-items" }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "overflow-shadow right", style: this.styleNextArrow }), h("div", { class: "arrow right", style: this.styleNextArrow, onClick: () => this.move(-this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-right-small" }))));
+    return (h(Host, null, h("div", { class: "arrow", style: this.stylePreviousArrow, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { name: "chevron-left-small" })), h("div", { class: {
+        'tab-items': true,
+        'overflow-shadow': true,
+        'shadow-left': this.showPreviousArrow(),
+        'shadow-right': this.showNextArrow(),
+        'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
+      } }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "arrow right", style: this.styleNextArrow, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { name: "chevron-right-small" }))));
   }
   get hostElement() { return this; }
   static get style() { return tabsCss; }
-}, [4, "ix-tabs", {
+}, [1, "ix-tabs", {
     "small": [4],
     "rounded": [4],
     "selected": [1026],
@@ -183,18 +208,23 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
     "styleNextArrow": [32],
     "stylePreviousArrow": [32],
     "scrollActionAmount": [32]
-  }, [[9, "resize", "onWindowResize"]]]);
+  }, [[9, "resize", "onWindowResize"], [0, "tabClick", "onTabClick"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-tabs"];
+  const components = ["ix-tabs", "ix-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-tabs":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, Tabs);
       }
       break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
   } });
 }

package/dist/components/tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"tabs.js","mappings":"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","names":[],"sources":["./src/components/tabs/tabs.scss?tag=ix-tabs","./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\nix-tabs {\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 width: 50px;\n height: 40px;\n position: absolute;\n left: 0;\n top: 0;\n background: linear-gradient(90deg, var(--theme-color-1) 50%, transparent);\n z-index: 1;\n\n &.right {\n left: auto;\n right: 0;\n background: linear-gradient(90deg, transparent, var(--theme-color-1) 50%);\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 h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\n\nlet windowStartSize = window.innerWidth;\n\n@Component({\n tag: 'ix-tabs',\n styleUrl: 'tabs.scss',\n scoped: false,\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 @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n @State() styleNextArrow = {};\n @State() stylePreviousArrow = {};\n\n @State() scrollActionAmount = 0;\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 (windowStartSize === 0) return (windowStartSize = window.innerWidth);\n this.move(windowStartSize - window.innerWidth);\n 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.getElementsByClassName('items-content')[0];\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()) return;\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 this.styleNextArrow = this.getArrowStyle(this.showNextArrow());\n this.stylePreviousArrow = this.getArrowStyle(this.showPreviousArrow());\n });\n }\n\n componentDidLoad() {\n const tabs = this.getTabs();\n tabs.forEach((element, index) => {\n const isDisabled = element.getAttribute('disabled') !== null;\n if (!isDisabled)\n element.addEventListener('click', () => this.clickTab(index));\n\n element.addEventListener('mousedown', (event) =>\n this.dragStart(element, event)\n );\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"overflow-shadow\" style={this.stylePreviousArrow}></div>\n <div\n class=\"arrow\"\n style={this.stylePreviousArrow}\n onClick={() => this.move(this.scrollAmount, true)}\n >\n <span class=\"glyph glyph-chevron-left-small\"></span>\n </div>\n <div class=\"tab-items\">\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n <div class=\"overflow-shadow right\" style={this.styleNextArrow}></div>\n <div\n class=\"arrow right\"\n style={this.styleNextArrow}\n onClick={() => this.move(-this.scrollAmount, true)}\n >\n <span class=\"glyph glyph-chevron-right-small\"></span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"tabs.js","mappings":"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","names":[],"sources":["./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/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\nlet windowStartSize = window.innerWidth;\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 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 (windowStartSize === 0) return (windowStartSize = window.innerWidth);\n this.move(windowStartSize - window.innerWidth);\n 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"],"version":3}

package/dist/components/theme-switcher.js CHANGED Viewed

@@ -11,10 +11,19 @@ class ThemeSwitcher {
   isThemeClass(className) {
     return (className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className));
   }
-  setTheme(themeName) {
-    if (!this.isThemeClass(themeName)) {
+  setTheme(themeName, systemAppearance = false) {
+    if (!this.isThemeClass(themeName) && systemAppearance === false) {
       throw Error(`Provided theme name ${themeName} does not match our naming conventions. (theme-<name>-(dark,light))`);
     }
+    if (systemAppearance) {
+      const currentSystemAppearance = getCurrentSystemAppearance();
+      this.replaceBodyThemeClass(themeName);
+      this.setVariant(currentSystemAppearance);
+      return;
+    }
+    this.replaceBodyThemeClass(themeName);
+  }
+  replaceBodyThemeClass(themeName) {
     const oldThemes = [];
     document.body.classList.forEach((className) => {
       if (this.isThemeClass(className)) {
@@ -39,6 +48,22 @@ class ThemeSwitcher {
       document.body.classList.replace(themeName, this.getOppositeMode(themeName));
     });
   }
+  getCurrentTheme() {
+    var _a;
+    return ((_a = Array.from(document.body.classList).find((className) => this.isThemeClass(className))) !== null && _a !== void 0 ? _a : `theme-${window
+      .getComputedStyle(document.body)
+      .getPropertyValue('--ix-theme-name')}`);
+  }
+  setVariant(variant = getCurrentSystemAppearance()) {
+    const currentTheme = this.getCurrentTheme();
+    document.body.classList.remove(currentTheme);
+    if (currentTheme.endsWith(this.suffixDark)) {
+      document.body.classList.add(currentTheme.replace(/-dark$/g, `-${variant}`));
+    }
+    if (currentTheme.endsWith(this.suffixLight)) {
+      document.body.classList.add(currentTheme.replace(/-light$/g, `-${variant}`));
+    }
+  }
   getOppositeMode(themeName) {
     if (themeName.endsWith(this.suffixDark)) {
       return themeName.replace(/-dark$/g, this.suffixLight);
@@ -84,8 +109,15 @@ class ThemeSwitcher {
     this.registerMutationObserver();
   }
 }
+const getCurrentSystemAppearance = () => {
+  const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+  if (matchMedia.matches) {
+    return 'dark';
+  }
+  return 'light';
+};
 const themeSwitcher = new ThemeSwitcher();
-export { ThemeSwitcher as T, themeSwitcher as t };
+export { getCurrentSystemAppearance as g, themeSwitcher as t };
 //# sourceMappingURL=theme-switcher.js.map

package/dist/components/theme-switcher.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"theme-switcher.js","mappings":";;~~MAEa~~,aAAa;~~EASxB~~,IAAW,YAAY;IACrB,OAAO,IAAI,CAAC,aAAa,CAAC;GAC3B;~~EAEO~~,gBAAgB,CAAC,SAAiB;~~IACxC~~,QACE,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;MACnC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EACpC;GACH;EAEO,YAAY,CAAC,SAAiB;IACpC,QACE,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,EAC1E;GACH;EAEM,QAAQ,CAAC,SAAiB;~~IAC/B~~,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE;~~MACjC~~,MAAM,KAAK,CACT,uBAAuB,SAAS,qEAAqE,CACtG,CAAC;KACH;IAED,MAAM,SAAS,GAAa,EAAE,CAAC;~~IAE~~/B,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,SAAS;MACxC,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE;QAChC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;OAC3B;KACF,CAAC,CAAC;IAEH,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC;IAC7C,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;GACxC;EAEM,UAAU;IACf,MAAM,SAAS,GAAa,EAAE,CAAC;IAE/B,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,SAAS;MACxC,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE;QAChC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;OAC3B;KACF,CAAC,CAAC;IAEH,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;MAC1B,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;MACrE,OAAO;KACR;IAED,SAAS,CAAC,OAAO,CAAC,CAAC,SAAS;MAC1B,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAC7B,SAAS,EACT,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAChC,CAAC;KACH,CAAC,CAAC;GACJ;EAEO,eAAe,CAAC,SAAiB;IACvC,IAAI,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;MACvC,OAAO,SAAS,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;KACvD;IAED,IAAI,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;MACxC,OAAO,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KACvD;GACF;EAEO,eAAe,CAAC,SAA2B;IACjD,OAAO,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ;MAChC,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC;MAC3B,MAAsB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,SAAS;;QAClD,IACE,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;UAC5B,EAAC,MAAA,QAAQ,CAAC,QAAQ,0CAAE,QAAQ,CAAC,SAAS,CAAC,CAAA,EACvC;UACA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACpC;OACF,CAAC,CAAC;KACJ,CAAC,CAAC;GACJ;EAEO,wBAAwB;IAC9B,IAAI,OAAQ,MAAc,KAAK,WAAW,EAAE;MAC1C,OAAO;KACR;IAED,IAAI,EAAE,kBAAkB,IAAI,MAAM,CAAC,EAAE;MACnC,OAAO,CAAC,IAAI,CACV,2EAA2E,CAC5E,CAAC;MACF,OAAO;KACR;IAED,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS;MACrD,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC,CAAC;IAEH,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;MAC3C,eAAe,EAAE,CAAC,OAAO,CAAC;MAC1B,iBAAiB,EAAE,IAAI;KACxB,CAAC,CAAC;GACJ;EAED;~~IAhHS~~,gBAAW,GAAG,QAAQ,CAAC;IACvB,gBAAW,GAAG,QAAQ,CAAC;IACvB,eAAU,GAAG,OAAO,CAAC;IACrB,iBAAY,GAAG,oBAAoB,CAAC;IAG7C,kBAAa,GAAG,IAAI,UAAU,EAAU,CAAC;~~IA2GvC~~,IAAI,CAAC,wBAAwB,EAAE,CAAC;GACjC;CACF;~~MAEY~~,aAAa,GAAG,IAAI,aAAa;;;;","names":[],"sources":["./src/components/utils/theme-switcher.ts"],"sourcesContent":["import { TypedEvent } from './typed-event';\n\nexport ~~class~~ ThemeSwitcher {\n readonly prefixTheme = 'theme-';\n readonly suffixLight = '-light';\n readonly suffixDark = '-dark';\n readonly defaultTheme = 'theme-classic-dark';\n\n mutationObserver: MutationObserver;\n _themeChanged = new TypedEvent<string>();\n\n public get themeChanged() {\n return this._themeChanged;\n }\n\n ~~private~~ hasVariantSuffix(className: string) {\n return (\n className.endsWith(this.suffixDark) \|\|\n className.endsWith(this.suffixLight)\n );\n }\n\n private isThemeClass(className: string) {\n return (\n className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className)\n );\n }\n\n public setTheme(themeName: string) {\n if (!this.isThemeClass(themeName)) {\n throw Error(\n `Provided theme name ${themeName} does not match our naming conventions. (theme-<name>-(dark,light))`\n );\n }\n\n const oldThemes: string[] = [];\n\n document.body.classList.forEach((className) => {\n if (this.isThemeClass(className)) {\n oldThemes.push(className);\n }\n });\n\n document.body.classList.remove(...oldThemes);\n document.body.classList.add(themeName);\n }\n\n public toggleMode() {\n const oldThemes: string[] = [];\n\n document.body.classList.forEach((className) => {\n if (this.isThemeClass(className)) {\n oldThemes.push(className);\n }\n });\n\n if (oldThemes.length === 0) {\n document.body.classList.add(this.getOppositeMode(this.defaultTheme));\n return;\n }\n\n oldThemes.forEach((themeName) => {\n document.body.classList.replace(\n themeName,\n this.getOppositeMode(themeName)\n );\n });\n }\n\n private getOppositeMode(themeName: string) {\n if (themeName.endsWith(this.suffixDark)) {\n return themeName.replace(/-dark$/g, this.suffixLight);\n }\n\n if (themeName.endsWith(this.suffixLight)) {\n return themeName.replace(/-light$/g, this.suffixDark);\n }\n }\n\n private handleMutations(mutations: MutationRecord[]) {\n return mutations.forEach((mutation) => {\n const { target } = mutation;\n (target as HTMLElement).classList.forEach((className) => {\n if (\n this.isThemeClass(className) &&\n !mutation.oldValue?.includes(className)\n ) {\n this._themeChanged.emit(className);\n }\n });\n });\n }\n\n private registerMutationObserver() {\n if (typeof (window as any) === 'undefined') {\n return;\n }\n\n if (!('MutationObserver' in window)) {\n console.warn(\n 'ThemeSwitcher not supported by your browser. Missing MutationObserver API'\n );\n return;\n }\n\n this.mutationObserver = new MutationObserver((mutations) => {\n this.handleMutations(mutations);\n });\n\n this.mutationObserver.observe(document.body, {\n attributeFilter: ['class'],\n attributeOldValue: true,\n });\n }\n\n public constructor() {\n this.registerMutationObserver();\n }\n}\n\nexport const themeSwitcher = new ThemeSwitcher();\n"],"version":3}
1	+ {"file":"theme-switcher.js","mappings":"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","names":[],"sources":["./src/components/utils/theme-switcher.ts"],"sourcesContent":["import { TypedEvent } from './typed-event';\n\nexport type ThemeVariant = 'light' \| 'dark';\n\nclass ThemeSwitcher {\n readonly prefixTheme = 'theme-';\n readonly suffixLight = '-light';\n readonly suffixDark = '-dark';\n readonly defaultTheme = 'theme-classic-dark';\n\n mutationObserver: MutationObserver;\n _themeChanged = new TypedEvent<string>();\n\n public get themeChanged() {\n return this._themeChanged;\n }\n\n public hasVariantSuffix(className: string) {\n return (\n className.endsWith(this.suffixDark) \|\|\n className.endsWith(this.suffixLight)\n );\n }\n\n private isThemeClass(className: string) {\n return (\n className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className)\n );\n }\n\n public setTheme(themeName: string, systemAppearance = false) {\n if (!this.isThemeClass(themeName) && systemAppearance === false) {\n throw Error(\n `Provided theme name ${themeName} does not match our naming conventions. (theme-<name>-(dark,light))`\n );\n }\n\n if (systemAppearance) {\n const currentSystemAppearance = getCurrentSystemAppearance();\n this.replaceBodyThemeClass(themeName);\n this.setVariant(currentSystemAppearance);\n return;\n }\n\n this.replaceBodyThemeClass(themeName);\n }\n\n private replaceBodyThemeClass(themeName: string) {\n const oldThemes: string[] = [];\n document.body.classList.forEach((className) => {\n if (this.isThemeClass(className)) {\n oldThemes.push(className);\n }\n });\n\n document.body.classList.remove(...oldThemes);\n document.body.classList.add(themeName);\n }\n\n public toggleMode() {\n const oldThemes: string[] = [];\n\n document.body.classList.forEach((className) => {\n if (this.isThemeClass(className)) {\n oldThemes.push(className);\n }\n });\n\n if (oldThemes.length === 0) {\n document.body.classList.add(this.getOppositeMode(this.defaultTheme));\n return;\n }\n\n oldThemes.forEach((themeName) => {\n document.body.classList.replace(\n themeName,\n this.getOppositeMode(themeName)\n );\n });\n }\n\n public getCurrentTheme() {\n return (\n Array.from(document.body.classList).find((className) =>\n this.isThemeClass(className)\n ) ??\n `theme-${window\n .getComputedStyle(document.body)\n .getPropertyValue('--ix-theme-name')}`\n );\n }\n\n public setVariant(variant: ThemeVariant = getCurrentSystemAppearance()) {\n const currentTheme = this.getCurrentTheme();\n document.body.classList.remove(currentTheme);\n\n if (currentTheme.endsWith(this.suffixDark)) {\n document.body.classList.add(\n currentTheme.replace(/-dark$/g, `-${variant}`)\n );\n }\n\n if (currentTheme.endsWith(this.suffixLight)) {\n document.body.classList.add(\n currentTheme.replace(/-light$/g, `-${variant}`)\n );\n }\n }\n\n private getOppositeMode(themeName: string) {\n if (themeName.endsWith(this.suffixDark)) {\n return themeName.replace(/-dark$/g, this.suffixLight);\n }\n\n if (themeName.endsWith(this.suffixLight)) {\n return themeName.replace(/-light$/g, this.suffixDark);\n }\n }\n\n private handleMutations(mutations: MutationRecord[]) {\n return mutations.forEach((mutation) => {\n const { target } = mutation;\n (target as HTMLElement).classList.forEach((className) => {\n if (\n this.isThemeClass(className) &&\n !mutation.oldValue?.includes(className)\n ) {\n this._themeChanged.emit(className);\n }\n });\n });\n }\n\n private registerMutationObserver() {\n if (typeof (window as any) === 'undefined') {\n return;\n }\n\n if (!('MutationObserver' in window)) {\n console.warn(\n 'ThemeSwitcher not supported by your browser. Missing MutationObserver API'\n );\n return;\n }\n\n this.mutationObserver = new MutationObserver((mutations) => {\n this.handleMutations(mutations);\n });\n\n this.mutationObserver.observe(document.body, {\n attributeFilter: ['class'],\n attributeOldValue: true,\n });\n }\n\n public constructor() {\n this.registerMutationObserver();\n }\n}\n\nexport type IxTheme =\n \| 'classic'\n \| 'classic-dark'\n \| 'classic-light'\n \| (string & {});\n\nexport const getCurrentSystemAppearance = (): ThemeVariant => {\n const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');\n\n if (matchMedia.matches) {\n return 'dark';\n }\n\n return 'light';\n};\n\nexport const themeSwitcher = new ThemeSwitcher();\n"],"version":3}