npm - @siemens/ix - Versions diffs - 0.0.0-pr-2212-20251017115125 → 0.0.0-pr-2214-20251017134939 - Mend

@siemens/ix 0.0.0-pr-2212-20251017115125 → 0.0.0-pr-2214-20251017134939

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

package/components/ix-menu-about.js +2 -2
package/components/ix-menu-settings.js +1 -1
package/components/ix-tab-item.js +1 -1
package/components/{p-COHP8TmU.js → p-4zrYEasX.js} +3 -3
package/components/p-4zrYEasX.js.map +1 -0
package/components/{p-BrKwrb_Z.js → p-C_x_G0ux.js} +3 -3
package/components/{p-BrKwrb_Z.js.map → p-C_x_G0ux.js.map} +1 -1
package/dist/cjs/ix-tab-item.ix-tabs.entry.cjs.js.map +1 -1
package/dist/cjs/ix-tab-item_2.cjs.entry.js +1 -1
package/dist/collection/components/tab-item/tab-item.css +1 -1
package/dist/esm/ix-tab-item.ix-tabs.entry.js.map +1 -1
package/dist/esm/ix-tab-item_2.entry.js +1 -1
package/dist/siemens-ix/ix-tab-item.ix-tabs.entry.esm.js.map +1 -1
package/dist/siemens-ix/p-a25ebeb2.entry.js +2 -0
package/dist/siemens-ix/{p-f55c3bed.entry.js.map → p-a25ebeb2.entry.js.map} +1 -1
package/dist/siemens-ix/siemens-ix.esm.js +1 -1
package/hydrate/index.js +1 -1
package/hydrate/index.mjs +1 -1
package/package.json +1 -1
package/components/p-COHP8TmU.js.map +0 -1
package/dist/siemens-ix/p-f55c3bed.entry.js +0 -2

package/components/ix-menu-about.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, e as createEvent, f as forceUpdate, h } from './p-DFHA6KvD.js';
-import { s as setTab, i as initialize, M as MenuTabs } from './p-BrKwrb_Z.js';
+import { s as setTab, i as initialize, M as MenuTabs } from './p-C_x_G0ux.js';
 import { d as defineCustomElement$5 } from './p-D99ntB9D.js';
 import { d as defineCustomElement$4 } from './p-fef9-zXA.js';
-import { d as defineCustomElement$3 } from './p-COHP8TmU.js';
+import { d as defineCustomElement$3 } from './p-4zrYEasX.js';
 import { d as defineCustomElement$2 } from './p-_g5-yLTd.js';
 const menuAboutCss = ".text-xs{font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-s{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption-single{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-h2{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-xl{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host .about-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .about-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:1rem}:host ix-tabs{margin-bottom:1.5rem}:host ix-menu-about-item{display:none}";

package/components/ix-menu-settings.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { a as MenuSettings, d as defineCustomElement$1 } from './p-BrKwrb_Z.js';
+import { a as MenuSettings, d as defineCustomElement$1 } from './p-C_x_G0ux.js';
 const IxMenuSettings = MenuSettings;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { T as TabItem, d as defineCustomElement$1 } from './p-COHP8TmU.js';
+import { T as TabItem, d as defineCustomElement$1 } from './p-4zrYEasX.js';
 const IxTabItem = TabItem;
 const defineCustomElement = defineCustomElement$1;

package/components/{p-COHP8TmU.js → p-4zrYEasX.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-DFHA6KvD.js';
-const tabItemCss = "@charset \"UTF-8\";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .text span,:host .text span::before{pointer-events:none}:host .text{vertical-align:middle}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}";
+const tabItemCss = "@charset \"UTF-8\";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .text span,:host .text span::before{pointer-events:none}:host .text{vertical-align:middle}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-color-1);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}";
 const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends H {
     constructor(registerHost) {
@@ -107,6 +107,6 @@ function defineCustomElement() {
 }
 export { TabItem as T, defineCustomElement as d };
-//# sourceMappingURL=p-COHP8TmU.js.map
+//# sourceMappingURL=p-4zrYEasX.js.map
-//# sourceMappingURL=p-COHP8TmU.js.map
+//# sourceMappingURL=p-4zrYEasX.js.map

package/components/p-4zrYEasX.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-4zrYEasX.js","mappings":";;AAAA,MAAM,UAAU,GAAG,60IAA60I;;MCiBn1I,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAErB;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAEpB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAOvB;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAyB,MAAM;AAE7C;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAqB,QAAQ;AA4E/C;AArES,IAAA,cAAc,CAAC,KAQtB,EAAA;QACC,OAAO;YACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,WAAW,EAAE,KAAK,CAAC,KAAK;YACxB,IAAI,EAAE,KAAK,CAAC,KAAK;AACjB,YAAA,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;AACvC,YAAA,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;AACpC,YAAA,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;YAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;SACrB;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,MAAM,EAAE,IAAI,CAAC,OAAO;aACrB,CAAC,EACF,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,CAAC,KAAiB,KAAI;gBAC7B,IAAI,KAAK,CAAC,gBAAgB;oBAAE;AAE5B,gBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACrC,oBAAA,WAAW,EAAE,KAAK;AACnB,iBAAA,CAAC;AAEF,gBAAA,IAAI,WAAW,CAAC,gBAAgB,EAAE;oBAChC,KAAK,CAAC,eAAe,EAAE;;AAE3B,aAAC,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI,CAAC,OAAO;AACpB,gBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;gBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,gBAAA,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;gBACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,EAAA,EAEA,IAAI,CAAC,OAAO,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px vars.$large-space;\n line-height: 20px;\n font-size: 14px;\n font-weight: bold;\n background-color: var(--theme-tab--background);\n color: var(--theme-tab--color);\n\n @include component.ix-component;\n\n &::after {\n content: '';\n position: absolute;\n background-color: var(--theme-tab-indicator--background);\n width: 100%;\n height: var(--theme-tab-indicator--height);\n left: 0;\n }\n\n .text {\n @include text-truncation.ellipsis;\n\n span,\n span::before {\n pointer-events: none;\n }\n\n vertical-align: middle;\n }\n\n .circle {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 3rem;\n width: 3rem;\n background-color: var(--theme-animated-tab-indicator--background);\n border-radius: 50%;\n border: 2px solid var(--theme-animated-tab-circle--border-color);\n color: var(--theme-an…icon--color);\n cursor: pointer;\n\n &.selected:not(.disabled) {\n background-color: var(--theme-animated-tab-circle--background--selected);\n color: var(--theme-animated-tab-icon--color--selected);\n border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n &:hover {\n background-color: var(\n --theme-animated-tab-circle--background--selected\n );\n }\n }\n\n &:hover {\n background-color: var(--theme-animated-tab-circle--background--hover);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &.disabled {\n background-color: var(--theme-animated-tab-circle--background--disabled);\n border-color: var(--theme-animated-tab-circle--border-color--disabled);\n }\n }\n\n .counter {\n position: absolute;\n z-index: 1;\n height: 16px;\n width: auto;\n background-color: var(--theme-color-1);\n border: 1px solid var(--theme-tab-pill--border-color);\n border-radius: 100px;\n bottom: 6px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-left: vars.$tiny-space;\n padding-right: vars.$tiny-space;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-pill-outline--color);\n cursor: pointer;\n\n &.selected {\n border-color: var(--theme-tab-pill--border-color--selected);\n }\n\n &.disabled {\n border-color: var(--theme-tab-pill--border-color--disabled);\n }\n }\n\n .hidden {\n display: none;\n }\n}\n\n:host(.circle) {\n height: 72px;\n}\n\n:host(.top) {\n &::after {\n top: 0;\n }\n}\n\n:host(.bottom) {\n &::after {\n bottom: 0;\n }\n}\n\n:host(.stretched) {\n flex-basis: 100%;\n width: 100%;\n @include text-truncation.ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n background-color: var(--theme-tab--background--hover);\n color: var(--theme-tab-color-hover);\n cursor: pointer;\n\n &::after {\n background-color: var(--theme-tab-indicator--background--hover);\n }\n}\n\n:host(:active:not(.circle)) {\n background-color: var(--theme-tab--background--active);\n color: var(--theme-tab-color--active);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--active);\n }\n}\n\n:host(:focus-visible) {\n outline: 0px solid var(--focus--border-color);\n\n .circle {\n outline: 1px solid var(--focus--border-color);\n }\n}\n\n:host(:focus-visible:not(.circle)) {\n outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n pointer-events: none;\n color: var(--theme-tab--color--disabled);\n background-color: var(--theme-tab--background--disabled);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--disabled);\n }\n}\n\n:host(.selected:not(.disabled)) {\n background-color: var(--theme-tab--background--selected);\n color: var(--theme-tab--color--selected);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--selected);\n }\n}\n\n:host(.icon) {\n padding: vars.$large-space vars.$small-space;\n}\n\n:host(.small-tab) {\n height: 32px;\n padding: vars.$default-space;\n}\n\n:host(.small-tab.icon) {\n padding: vars.$default-space vars.$tiny-space;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { TabClickDetail } from './tab-item.types';\n\n@Component({\n tag: 'ix-tab-item',\n styleUrl: 'tab-item.scss',\n shadow: true,\n})\nexport class TabItem {\n /**\n * Set selected tab\n */\n @Prop() selected = false;\n\n /**\n * Set disabled tab\n */\n @Prop() disabled = false;\n\n /**\n * Set small size tab\n */\n @Prop() small = false;\n\n /**\n * Set icon only tab\n */\n @Prop() icon = false;\n\n /**\n * Set rounded tab\n */\n @Prop() rounded = false;\n\n /**\n * Set counter value\n */\n @Prop() counter?: number;\n\n /**\n * Set layout width style\n */\n @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n /**\n * Set selected placement\n */\n @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n /**\n * Emitted when the tab is clicked.\n */\n @Event() tabClick!: EventEmitter<TabClickDetail>;\n\n private tabItemClasses(props: {\n selected: boolean;\n disabled: boolean;\n small: boolean;\n icon: boolean;\n circle: boolean;\n layout: 'auto' | 'stretched';\n placement: 'bottom' | 'top';\n }) {\n return {\n selected: props.selected,\n disabled: props.disabled,\n 'small-tab': props.small,\n icon: props.small,\n stretched: props.layout === 'stretched',\n bottom: props.placement === 'bottom',\n top: props.placement === 'top',\n circle: props.circle,\n };\n }\n\n render() {\n return (\n <Host\n class={this.tabItemClasses({\n selected: this.selected,\n disabled: this.disabled,\n small: this.small,\n icon: this.icon,\n layout: this.layout,\n placement: this.placement,\n circle: this.rounded,\n })}\n tabIndex={0}\n onClick={(event: MouseEvent) => {\n if (event.defaultPrevented) return;\n\n const clientEvent = this.tabClick.emit({\n nativeEvent: event,\n });\n\n if (clientEvent.defaultPrevented) {\n event.stopPropagation();\n }\n }}\n >\n <div\n class={{\n circle: this.rounded,\n text: !this.rounded,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n <div\n class={{\n counter: true,\n selected: this.selected,\n hidden: !(this.rounded && this.counter !== undefined),\n disabled: this.disabled,\n }}\n >\n {this.counter}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/{p-BrKwrb_Z.js → p-C_x_G0ux.js} RENAMED Viewed

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, e as createEvent, f as forceUpdate, h, d as
 import { v as iconClose } from './p-taILGXkr.js';
 import { d as defineCustomElement$4 } from './p-D99ntB9D.js';
 import { d as defineCustomElement$3 } from './p-fef9-zXA.js';
-import { d as defineCustomElement$2 } from './p-COHP8TmU.js';
+import { d as defineCustomElement$2 } from './p-4zrYEasX.js';
 import { d as defineCustomElement$1 } from './p-_g5-yLTd.js';
 const menuSettingsCss = ".text-xs{font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-s{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption-single{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-h2{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-xl{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .settings-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .settings-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:1rem}:host ix-tabs{margin-bottom:1.5rem}:host .settings-tabs{margin-bottom:1.5rem}";
@@ -156,6 +156,6 @@ const MenuTabs = ({ context }) => {
 };
 export { MenuTabs as M, MenuSettings as a, defineCustomElement as d, initialize as i, setTab as s };
-//# sourceMappingURL=p-BrKwrb_Z.js.map
+//# sourceMappingURL=p-C_x_G0ux.js.map
-//# sourceMappingURL=p-BrKwrb_Z.js.map
+//# sourceMappingURL=p-C_x_G0ux.js.map

package/components/{p-BrKwrb_Z.js.map → p-C_x_G0ux.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~BrKwrb_Z~~.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/menu-settings/menu-settings.scss?tag=ix-menu-settings&encapsulation=shadow","src/components/menu-settings/menu-settings.tsx","src/components/utils/menu-tabs/menu-tabs-utils.ts","src/components/utils/menu-tabs/menu-tabs-fc.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@use './common-variables' as vars;\n@use 'legacy/fonts';\n@use 'mixins/shadow-dom/component';\n\n:host {\n display: block;\n background-color: var(--theme-nav-overlay--background);\n padding: vars.$medium-space vars.$default-space vars.$default-space vars.$x-large-space;\n flex-grow: 1;\n position: absolute;\n width: 100%;\n height: 100%;\n\n @include component.ix-component;\n\n .settings-header {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n height: vars.$x-large-space;\n margin-bottom: vars.$small-space;\n\n h2 {\n color: var(--theme-nav-overlay-header--color);\n margin-bottom: 1rem;\n }\n }\n\n ix-tabs {\n margin-bottom: 1.5rem;\n }\n\n .settings-tabs {\n margin-bottom: vars.$large-space;\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 forceUpdate,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n CustomCloseEvent,\n initialize,\n setTab,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n tag: 'ix-menu-settings',\n styleUrl: 'menu-settings.scss',\n shadow: true,\n})\nexport class MenuSettings {\n @Element() el!: HTMLIxMenuSettingsElement;\n\n /\n Active tab\n /\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ mutable: true }) activeTabLabel?: string;\n\n /\n Label of first tab\n /\n @Prop() label = 'Settings';\n\n /* @internal /\n @Prop() show = false;\n\n /\n Active tab changed\n * @since 3.0.0\n /\n @Event() tabChange!: EventEmitter<string>;\n\n /\n Popover closed\n /\n @Event() close!: EventEmitter<CustomCloseEvent>;\n\n @State() items!: HTMLIxMenuSettingsItemElement[];\n\n @Watch('activeTabLabel')\n updateTab(label: string) {\n setTab(this, label);\n }\n\n componentWillLoad() {\n initialize(this);\n }\n\n componentDidLoad() {\n forceUpdate(this.el);\n }\n\n render() {\n return <MenuTabs context={this} />;\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 { MenuAbout } from '../../menu-about/menu-about';\nimport { MenuSettings } from '../../menu-settings/menu-settings';\n\nfunction getItems(\n context: MenuSettings \| MenuAbout\n): HTMLIxMenuSettingsItemElement[] \| HTMLIxMenuAboutItemElement[] {\n return Array.from(\n context.el.querySelectorAll(\n context instanceof MenuSettings\n ? 'ix-menu-settings-item'\n : 'ix-menu-about-item'\n )\n );\n}\n\nexport function setTab(context: MenuSettings \| MenuAbout, label: string) {\n const { defaultPrevented } = context.tabChange.emit(label);\n\n if (defaultPrevented) {\n return;\n }\n\n context.activeTabLabel = label;\n context.items.forEach((i) => {\n i.style.display = 'none';\n if (i.label === context.activeTabLabel) {\n i.style.display = 'block';\n }\n });\n}\n\nexport function initialize(context: MenuSettings \| MenuAbout) {\n context.items = getItems(context);\n\n if (context.items.length) {\n const selectedLabel = context.activeTabLabel \|\| context.items[0].label;\n if (selectedLabel) {\n setTab(context, selectedLabel);\n }\n }\n\n context.items.forEach((item) => {\n item.addEventListener('labelChange', (e: CustomEvent) => {\n context.items = getItems(context);\n\n if (e.detail.oldLabel === context.activeTabLabel) {\n context.activeTabLabel = e.detail.newLabel;\n }\n });\n });\n}\n\nexport interface CustomLabelChangeEvent {\n name: string;\n oldLabel: string;\n newLabel: string;\n}\n\nexport interface CustomCloseEvent {\n nativeEvent: MouseEvent;\n name: string;\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 { FunctionalComponent, h, Host } from '@stencil/core';\nimport { setTab } from './menu-tabs-utils';\nimport { MenuAbout } from '../../menu-about/menu-about';\nimport { MenuSettings } from '../../menu-settings/menu-settings';\nimport { iconClose } from '@siemens/ix-icons/icons';\n\ninterface MenuTabsProps {\n context: MenuSettings \| MenuAbout;\n}\n\nconst getTabItems = (context: MenuSettings \| MenuAbout) => {\n return context.items.map(({ label }) => {\n return (\n <ix-tab-item\n selected={label === context.activeTabLabel}\n onTabClick={(e) => e.preventDefault()}\n onClick={() => {\n if (label) {\n setTab(context, label);\n }\n }}\n >\n {label}\n </ix-tab-item>\n );\n });\n};\n\nexport const MenuTabs: FunctionalComponent<MenuTabsProps> = ({ context }) => {\n const selectedIndex = context.items.findIndex(\n (item) => item.label === context.activeTabLabel\n );\n return (\n <Host\n slot={\n context instanceof MenuSettings ? 'ix-menu-settings' : 'ix-menu-about'\n }\n class={{\n show: context.show,\n }}\n >\n <div\n class={\n context instanceof MenuSettings ? 'settings-header' : 'about-header'\n }\n >\n <h2 class=\"text-h2\">{context.label}</h2>\n <ix-icon-button\n variant=\"tertiary\"\n size=\"24\"\n icon={iconClose}\n iconColor=\"color-soft-text\"\n onClick={(e) =>\n context.close.emit({\n name:\n context instanceof MenuSettings\n ? 'ix-menu-settings'\n : 'ix-menu-about',\n nativeEvent: e,\n })\n }\n ></ix-icon-button>\n </div>\n <ix-tabs selected={selectedIndex !== -1 ? selectedIndex : 0}>\n {getTabItems(context)}\n </ix-tabs>\n <slot></slot>\n </Host>\n );\n};\n"],"version":3}
1	+ {"file":"p-C_x_G0ux.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/menu-settings/menu-settings.scss?tag=ix-menu-settings&encapsulation=shadow","src/components/menu-settings/menu-settings.tsx","src/components/utils/menu-tabs/menu-tabs-utils.ts","src/components/utils/menu-tabs/menu-tabs-fc.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@use './common-variables' as vars;\n@use 'legacy/fonts';\n@use 'mixins/shadow-dom/component';\n\n:host {\n display: block;\n background-color: var(--theme-nav-overlay--background);\n padding: vars.$medium-space vars.$default-space vars.$default-space vars.$x-large-space;\n flex-grow: 1;\n position: absolute;\n width: 100%;\n height: 100%;\n\n @include component.ix-component;\n\n .settings-header {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n height: vars.$x-large-space;\n margin-bottom: vars.$small-space;\n\n h2 {\n color: var(--theme-nav-overlay-header--color);\n margin-bottom: 1rem;\n }\n }\n\n ix-tabs {\n margin-bottom: 1.5rem;\n }\n\n .settings-tabs {\n margin-bottom: vars.$large-space;\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 forceUpdate,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n CustomCloseEvent,\n initialize,\n setTab,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n tag: 'ix-menu-settings',\n styleUrl: 'menu-settings.scss',\n shadow: true,\n})\nexport class MenuSettings {\n @Element() el!: HTMLIxMenuSettingsElement;\n\n /\n Active tab\n /\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ mutable: true }) activeTabLabel?: string;\n\n /\n Label of first tab\n /\n @Prop() label = 'Settings';\n\n /* @internal /\n @Prop() show = false;\n\n /\n Active tab changed\n * @since 3.0.0\n /\n @Event() tabChange!: EventEmitter<string>;\n\n /\n Popover closed\n /\n @Event() close!: EventEmitter<CustomCloseEvent>;\n\n @State() items!: HTMLIxMenuSettingsItemElement[];\n\n @Watch('activeTabLabel')\n updateTab(label: string) {\n setTab(this, label);\n }\n\n componentWillLoad() {\n initialize(this);\n }\n\n componentDidLoad() {\n forceUpdate(this.el);\n }\n\n render() {\n return <MenuTabs context={this} />;\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 { MenuAbout } from '../../menu-about/menu-about';\nimport { MenuSettings } from '../../menu-settings/menu-settings';\n\nfunction getItems(\n context: MenuSettings \| MenuAbout\n): HTMLIxMenuSettingsItemElement[] \| HTMLIxMenuAboutItemElement[] {\n return Array.from(\n context.el.querySelectorAll(\n context instanceof MenuSettings\n ? 'ix-menu-settings-item'\n : 'ix-menu-about-item'\n )\n );\n}\n\nexport function setTab(context: MenuSettings \| MenuAbout, label: string) {\n const { defaultPrevented } = context.tabChange.emit(label);\n\n if (defaultPrevented) {\n return;\n }\n\n context.activeTabLabel = label;\n context.items.forEach((i) => {\n i.style.display = 'none';\n if (i.label === context.activeTabLabel) {\n i.style.display = 'block';\n }\n });\n}\n\nexport function initialize(context: MenuSettings \| MenuAbout) {\n context.items = getItems(context);\n\n if (context.items.length) {\n const selectedLabel = context.activeTabLabel \|\| context.items[0].label;\n if (selectedLabel) {\n setTab(context, selectedLabel);\n }\n }\n\n context.items.forEach((item) => {\n item.addEventListener('labelChange', (e: CustomEvent) => {\n context.items = getItems(context);\n\n if (e.detail.oldLabel === context.activeTabLabel) {\n context.activeTabLabel = e.detail.newLabel;\n }\n });\n });\n}\n\nexport interface CustomLabelChangeEvent {\n name: string;\n oldLabel: string;\n newLabel: string;\n}\n\nexport interface CustomCloseEvent {\n nativeEvent: MouseEvent;\n name: string;\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 { FunctionalComponent, h, Host } from '@stencil/core';\nimport { setTab } from './menu-tabs-utils';\nimport { MenuAbout } from '../../menu-about/menu-about';\nimport { MenuSettings } from '../../menu-settings/menu-settings';\nimport { iconClose } from '@siemens/ix-icons/icons';\n\ninterface MenuTabsProps {\n context: MenuSettings \| MenuAbout;\n}\n\nconst getTabItems = (context: MenuSettings \| MenuAbout) => {\n return context.items.map(({ label }) => {\n return (\n <ix-tab-item\n selected={label === context.activeTabLabel}\n onTabClick={(e) => e.preventDefault()}\n onClick={() => {\n if (label) {\n setTab(context, label);\n }\n }}\n >\n {label}\n </ix-tab-item>\n );\n });\n};\n\nexport const MenuTabs: FunctionalComponent<MenuTabsProps> = ({ context }) => {\n const selectedIndex = context.items.findIndex(\n (item) => item.label === context.activeTabLabel\n );\n return (\n <Host\n slot={\n context instanceof MenuSettings ? 'ix-menu-settings' : 'ix-menu-about'\n }\n class={{\n show: context.show,\n }}\n >\n <div\n class={\n context instanceof MenuSettings ? 'settings-header' : 'about-header'\n }\n >\n <h2 class=\"text-h2\">{context.label}</h2>\n <ix-icon-button\n variant=\"tertiary\"\n size=\"24\"\n icon={iconClose}\n iconColor=\"color-soft-text\"\n onClick={(e) =>\n context.close.emit({\n name:\n context instanceof MenuSettings\n ? 'ix-menu-settings'\n : 'ix-menu-about',\n nativeEvent: e,\n })\n }\n ></ix-icon-button>\n </div>\n <ix-tabs selected={selectedIndex !== -1 ? selectedIndex : 0}>\n {getTabItems(context)}\n </ix-tabs>\n <slot></slot>\n </Host>\n );\n};\n"],"version":3}

package/dist/cjs/ix-tab-item.ix-tabs.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-tab-item.ix-tabs.entry.cjs.js","sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx","src/components/utils/requestAnimationFrame.ts","src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px vars.$large-space;\n line-height: 20px;\n font-size: 14px;\n font-weight: bold;\n background-color: var(--theme-tab--background);\n color: var(--theme-tab--color);\n\n @include component.ix-component;\n\n &::after {\n content: '';\n position: absolute;\n background-color: var(--theme-tab-indicator--background);\n width: 100%;\n height: var(--theme-tab-indicator--height);\n left: 0;\n }\n\n .text {\n @include text-truncation.ellipsis;\n\n span,\n span::before {\n pointer-events: none;\n }\n\n vertical-align: middle;\n }\n\n .circle {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 3rem;\n width: 3rem;\n background-color: var(--theme-animated-tab-indicator--background);\n border-radius: 50%;\n border: 2px solid var(--theme-animated-tab-circle--border-color);\n color: var(--theme-an…icon--color);\n cursor: pointer;\n\n &.selected:not(.disabled) {\n background-color: var(--theme-animated-tab-circle--background--selected);\n color: var(--theme-animated-tab-icon--color--selected);\n border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n &:hover {\n background-color: var(\n --theme-animated-tab-circle--background--selected\n );\n }\n }\n\n &:hover {\n background-color: var(--theme-animated-tab-circle--background--hover);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &.disabled {\n background-color: var(--theme-animated-tab-circle--background--disabled);\n border-color: var(--theme-animated-tab-circle--border-color--disabled);\n }\n }\n\n .counter {\n position: absolute;\n z-index: 1;\n height: 16px;\n width: auto;\n background-color: var(--theme-pill-outline--background);\n border: 1px solid var(--theme-tab-pill--border-color);\n border-radius: 100px;\n bottom: 6px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-left: vars.$tiny-space;\n padding-right: vars.$tiny-space;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-pill-outline--color);\n cursor: pointer;\n\n &.selected {\n border-color: var(--theme-tab-pill--border-color--selected);\n }\n\n &.disabled {\n border-color: var(--theme-tab-pill--border-color--disabled);\n }\n }\n\n .hidden {\n display: none;\n }\n}\n\n:host(.circle) {\n height: 72px;\n}\n\n:host(.top) {\n &::after {\n top: 0;\n }\n}\n\n:host(.bottom) {\n &::after {\n bottom: 0;\n }\n}\n\n:host(.stretched) {\n flex-basis: 100%;\n width: 100%;\n @include text-truncation.ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n background-color: var(--theme-tab--background--hover);\n color: var(--theme-tab-color-hover);\n cursor: pointer;\n\n &::after {\n background-color: var(--theme-tab-indicator--background--hover);\n }\n}\n\n:host(:active:not(.circle)) {\n background-color: var(--theme-tab--background--active);\n color: var(--theme-tab-color--active);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--active);\n }\n}\n\n:host(:focus-visible) {\n outline: 0px solid var(--focus--border-color);\n\n .circle {\n outline: 1px solid var(--focus--border-color);\n }\n}\n\n:host(:focus-visible:not(.circle)) {\n outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n pointer-events: none;\n color: var(--theme-tab--color--disabled);\n background-color: var(--theme-tab--background--disabled);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--disabled);\n }\n}\n\n:host(.selected:not(.disabled)) {\n background-color: var(--theme-tab--background--selected);\n color: var(--theme-tab--color--selected);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--selected);\n }\n}\n\n:host(.icon) {\n padding: vars.$large-space vars.$small-space;\n}\n\n:host(.small-tab) {\n height: 32px;\n padding: vars.$default-space;\n}\n\n:host(.small-tab.icon) {\n padding: vars.$default-space vars.$tiny-space;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { TabClickDetail } from './tab-item.types';\n\n@Component({\n tag: 'ix-tab-item',\n styleUrl: 'tab-item.scss',\n shadow: true,\n})\nexport class TabItem {\n /\n Set selected tab\n /\n @Prop() selected = false;\n\n /\n Set disabled tab\n /\n @Prop() disabled = false;\n\n /\n Set small size tab\n /\n @Prop() small = false;\n\n /\n Set icon only tab\n /\n @Prop() icon = false;\n\n /\n Set rounded tab\n /\n @Prop() rounded = false;\n\n /\n Set counter value\n /\n @Prop() counter?: number;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set selected placement\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n Emitted when the tab is clicked.\n /\n @Event() tabClick!: EventEmitter<TabClickDetail>;\n\n private tabItemClasses(props: {\n selected: boolean;\n disabled: boolean;\n small: boolean;\n icon: boolean;\n circle: boolean;\n layout: 'auto' \| 'stretched';\n placement: 'bottom' \| 'top';\n }) {\n return {\n selected: props.selected,\n disabled: props.disabled,\n 'small-tab': props.small,\n icon: props.small,\n stretched: props.layout === 'stretched',\n bottom: props.placement === 'bottom',\n top: props.placement === 'top',\n circle: props.circle,\n };\n }\n\n render() {\n return (\n <Host\n class={this.tabItemClasses({\n selected: this.selected,\n disabled: this.disabled,\n small: this.small,\n icon: this.icon,\n layout: this.layout,\n placement: this.placement,\n circle: this.rounded,\n })}\n tabIndex={0}\n onClick={(event: MouseEvent) => {\n if (event.defaultPrevented) return;\n\n const clientEvent = this.tabClick.emit({\n nativeEvent: event,\n });\n\n if (clientEvent.defaultPrevented) {\n event.stopPropagation();\n }\n }}\n >\n <div\n class={{\n circle: this.rounded,\n text: !this.rounded,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n <div\n class={{\n counter: true,\n selected: this.selected,\n hidden: !(this.rounded && this.counter !== undefined),\n disabled: this.disabled,\n }}\n >\n {this.counter}\n </div>\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/\n Prevents angular from change detection when requesting an animation frame\n \n Credits goes to:\n * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts\n /\nexport const requestAnimationFrameNoNgZone = (\n callback: (...args: any[]) => void\n) => {\n if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n return __zone_symbol__requestAnimationFrame(callback);\n }\n if (typeof requestAnimationFrame === 'function') {\n return requestAnimationFrame(callback);\n }\n return setTimeout(callback);\n};\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n width: auto;\n display: flex;\n align-items: center;\n position: relative;\n\n @include component.ix-component;\n\n .tab-items {\n overflow: hidden;\n scroll-behavior: smooth;\n width: 100%;\n\n .items-content {\n display: flex;\n align-items: center;\n }\n }\n\n .arrow {\n // unset button styles first\n all: unset;\n\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n top: 0;\n bottom: 0;\n left: 0;\n margin: auto 0;\n border-radius: 4px;\n color: var(--theme-btn-tertiary--color);\n background-color: var(--theme-btn-tertiary--background);\n z-index: 2;\n\n &:hover {\n color: var(--theme-btn-tertiary--color--hover);\n background-color: var(--theme-btn-tertiary--background--hover);\n }\n\n &:active {\n color: var(--theme-btn-tertiary--color--active);\n background-color: var(--theme-btn-tertiary--background--active);\n }\n\n &.right {\n left: auto;\n right: 0;\n }\n }\n\n .overflow-shadow {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n pointer-events: all;\n\n &.shadow-left {\n mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n }\n\n &.shadow-right {\n mask-image: linear-gradient(\n 90deg,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n\n &.shadow-both {\n mask-image: linear-gradient(\n 90deg,\n transparent 0px,\n black 45px,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\nimport {\n iconChevronLeftSmall,\n iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-tabs',\n styleUrl: 'tabs.scss',\n shadow: true,\n})\nexport class Tabs {\n @Element() hostElement!: HTMLIxTabsElement;\n\n /\n Set tab items to small size\n /\n @Prop() small = false;\n\n /\n Set rounded tabs\n /\n @Prop() rounded = false;\n\n /\n Set default selected tab by index\n /\n @Prop({ mutable: true }) selected = 0;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set placement style\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n ARIA label for the chevron left icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronLeftIconButton?: string;\n\n /\n ARIA label for the chevron right icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronRightIconButton?: string;\n\n /\n `selected` property changed\n /\n @Event() selectedChange!: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n @State() scrollActionAmount = 0;\n @State() showArrowPrevious = false;\n @State() showArrowNext = false;\n\n private windowStartSize = window.innerWidth;\n private resizeObserver?: ResizeObserver;\n\n private clickAction: {\n timeout: NodeJS.Timeout \| null;\n isClick: boolean;\n } = {\n timeout: null,\n isClick: true,\n };\n\n @Listen('resize', { target: 'window' })\n onWindowResize() {\n this.totalItems = 0;\n this.totalItems = this.getTabs().length;\n\n if (this.windowStartSize === 0)\n return (this.windowStartSize = window.innerWidth);\n this.move(this.windowStartSize - window.innerWidth);\n this.windowStartSize = window.innerWidth;\n }\n\n private getTabs() {\n return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n }\n\n private getTab(tabIndex: number) {\n return this.getTabs()[tabIndex];\n }\n\n private getTabsWrapper() {\n return this.hostElement.shadowRoot?.querySelector('.items-content');\n }\n\n private initResizeObserver() {\n const parentElement = this.hostElement.parentElement;\n if (!parentElement) return;\n this.resizeObserver = new ResizeObserver(() => {\n this.renderArrows();\n });\n this.resizeObserver.observe(parentElement);\n }\n\n private showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\n tabWrapper &&\n tabWrapper.scrollWidth >\n Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n this.layout === 'auto'\n );\n } catch (error) {\n return false;\n }\n }\n\n private showPreviousArrow() {\n try {\n return this.showArrows() === true && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n\n if (!tabWrapper) {\n return false;\n }\n\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() === true &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private move(amount: number, click = false) {\n const tabsWrapper = this.getTabsWrapper();\n\n if (!tabsWrapper) {\n return;\n }\n\n const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n const maxScrollWidth =\n -this.currentScrollAmount +\n tabsWrapperVisibleWidth -\n tabsWrapper.scrollWidth;\n\n amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n amount += this.currentScrollAmount;\n amount = Math.min(amount, 0);\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabsWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n @Watch('selected')\n onSelectedChange(newValue: number) {\n if (!this.showArrows()) return;\n\n const tabRect = this.getTab(newValue).getBoundingClientRect();\n const wrapperWidth = this.getTabsWrapper()?.clientWidth;\n const arrowWidth = 32;\n\n if (tabRect.left < arrowWidth) {\n this.move(-tabRect.left + arrowWidth, true);\n } else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {\n this.move(wrapperWidth - tabRect.right - arrowWidth, true);\n }\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (!this.clickAction.isClick \|\| this.dragStop()) {\n return;\n }\n\n const { defaultPrevented } = this.selectedChange.emit(index);\n if (defaultPrevented) {\n return;\n }\n\n this.setSelected(index);\n }\n\n private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n if (!this.showArrows()) return;\n if (event.button > 0) return;\n\n this.clickAction.timeout =\n this.clickAction.timeout === null\n ? setTimeout(() => (this.clickAction.isClick = false), 300)\n : null;\n\n const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n const mousedownPositionX = event.clientX;\n const move = (event: MouseEvent) =>\n this.dragMove(event, tabPositionX, mousedownPositionX);\n const windowClick = () => {\n window.removeEventListener('mousemove', move, false);\n window.removeEventListener('click', windowClick, false);\n this.dragStop();\n };\n window.addEventListener('click', windowClick);\n window.addEventListener('mousemove', move, false);\n }\n\n private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n this.move(event.clientX + tabX - mousedownX);\n }\n\n private dragStop() {\n if (this.clickAction.timeout) {\n clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\n }\n\n if (this.clickAction.isClick) return false;\n\n this.currentScrollAmount = this.scrollActionAmount;\n this.clickAction.isClick = true;\n\n return true;\n }\n\n componentWillLoad() {\n const tabs = this.getTabs();\n\n tabs.map((element, index) => {\n if (this.small) element.setAttribute('small', 'true');\n\n if (this.rounded) element.setAttribute('rounded', 'true');\n\n element.setAttribute('layout', this.layout);\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n\n element.setAttribute('placement', this.placement);\n });\n\n this.initResizeObserver();\n }\n\n componentDidRender() {\n const tabs = this.getTabs();\n this.totalItems = tabs.length;\n\n tabs.map((element, index) => {\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n });\n }\n\n componentWillRender() {\n this.renderArrows();\n }\n\n private renderArrows() {\n requestAnimationFrameNoNgZone(() => {\n this.showArrowNext = this.showNextArrow();\n this.showArrowPrevious = this.showPreviousArrow();\n });\n }\n\n componentDidLoad() {\n const tabs = this.getTabs();\n tabs.forEach((element) => {\n element.addEventListener('mousedown', (event) =>\n this.dragStart(element, event)\n );\n });\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n @Listen('tabClick')\n onTabClick(event: CustomEvent) {\n if (event.defaultPrevented) {\n return;\n }\n\n const target = event.target;\n const tabs = this.getTabs();\n\n tabs.forEach((tab, index) => {\n if (!tab.disabled && tab === target) {\n this.clickTab(index);\n }\n });\n }\n\n render() {\n return (\n <Host>\n {this.showArrowPrevious && (\n <button\n class=\"arrow\"\n onClick={() => this.move(this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronLeftIconButton}\n >\n <ix-icon name={iconChevronLeftSmall}></ix-icon>\n </button>\n )}\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showArrowPrevious,\n 'shadow-right': this.showArrowNext,\n 'shadow-both': this.showArrowNext && this.showArrowPrevious,\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n {this.showArrowNext && (\n <button\n class=\"arrow right\"\n onClick={() => this.move(-this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronRightIconButton}\n >\n <ix-icon name={iconChevronRightSmall}></ix-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"names":["h","Host","iconChevronLeftSmall","iconChevronRightSmall"],"mappings":"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"}
1	+ {"version":3,"file":"ix-tab-item.ix-tabs.entry.cjs.js","sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx","src/components/utils/requestAnimationFrame.ts","src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px vars.$large-space;\n line-height: 20px;\n font-size: 14px;\n font-weight: bold;\n background-color: var(--theme-tab--background);\n color: var(--theme-tab--color);\n\n @include component.ix-component;\n\n &::after {\n content: '';\n position: absolute;\n background-color: var(--theme-tab-indicator--background);\n width: 100%;\n height: var(--theme-tab-indicator--height);\n left: 0;\n }\n\n .text {\n @include text-truncation.ellipsis;\n\n span,\n span::before {\n pointer-events: none;\n }\n\n vertical-align: middle;\n }\n\n .circle {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 3rem;\n width: 3rem;\n background-color: var(--theme-animated-tab-indicator--background);\n border-radius: 50%;\n border: 2px solid var(--theme-animated-tab-circle--border-color);\n color: var(--theme-an…icon--color);\n cursor: pointer;\n\n &.selected:not(.disabled) {\n background-color: var(--theme-animated-tab-circle--background--selected);\n color: var(--theme-animated-tab-icon--color--selected);\n border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n &:hover {\n background-color: var(\n --theme-animated-tab-circle--background--selected\n );\n }\n }\n\n &:hover {\n background-color: var(--theme-animated-tab-circle--background--hover);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &.disabled {\n background-color: var(--theme-animated-tab-circle--background--disabled);\n border-color: var(--theme-animated-tab-circle--border-color--disabled);\n }\n }\n\n .counter {\n position: absolute;\n z-index: 1;\n height: 16px;\n width: auto;\n background-color: var(--theme-color-1);\n border: 1px solid var(--theme-tab-pill--border-color);\n border-radius: 100px;\n bottom: 6px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-left: vars.$tiny-space;\n padding-right: vars.$tiny-space;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-pill-outline--color);\n cursor: pointer;\n\n &.selected {\n border-color: var(--theme-tab-pill--border-color--selected);\n }\n\n &.disabled {\n border-color: var(--theme-tab-pill--border-color--disabled);\n }\n }\n\n .hidden {\n display: none;\n }\n}\n\n:host(.circle) {\n height: 72px;\n}\n\n:host(.top) {\n &::after {\n top: 0;\n }\n}\n\n:host(.bottom) {\n &::after {\n bottom: 0;\n }\n}\n\n:host(.stretched) {\n flex-basis: 100%;\n width: 100%;\n @include text-truncation.ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n background-color: var(--theme-tab--background--hover);\n color: var(--theme-tab-color-hover);\n cursor: pointer;\n\n &::after {\n background-color: var(--theme-tab-indicator--background--hover);\n }\n}\n\n:host(:active:not(.circle)) {\n background-color: var(--theme-tab--background--active);\n color: var(--theme-tab-color--active);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--active);\n }\n}\n\n:host(:focus-visible) {\n outline: 0px solid var(--focus--border-color);\n\n .circle {\n outline: 1px solid var(--focus--border-color);\n }\n}\n\n:host(:focus-visible:not(.circle)) {\n outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n pointer-events: none;\n color: var(--theme-tab--color--disabled);\n background-color: var(--theme-tab--background--disabled);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--disabled);\n }\n}\n\n:host(.selected:not(.disabled)) {\n background-color: var(--theme-tab--background--selected);\n color: var(--theme-tab--color--selected);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--selected);\n }\n}\n\n:host(.icon) {\n padding: vars.$large-space vars.$small-space;\n}\n\n:host(.small-tab) {\n height: 32px;\n padding: vars.$default-space;\n}\n\n:host(.small-tab.icon) {\n padding: vars.$default-space vars.$tiny-space;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { TabClickDetail } from './tab-item.types';\n\n@Component({\n tag: 'ix-tab-item',\n styleUrl: 'tab-item.scss',\n shadow: true,\n})\nexport class TabItem {\n /\n Set selected tab\n /\n @Prop() selected = false;\n\n /\n Set disabled tab\n /\n @Prop() disabled = false;\n\n /\n Set small size tab\n /\n @Prop() small = false;\n\n /\n Set icon only tab\n /\n @Prop() icon = false;\n\n /\n Set rounded tab\n /\n @Prop() rounded = false;\n\n /\n Set counter value\n /\n @Prop() counter?: number;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set selected placement\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n Emitted when the tab is clicked.\n /\n @Event() tabClick!: EventEmitter<TabClickDetail>;\n\n private tabItemClasses(props: {\n selected: boolean;\n disabled: boolean;\n small: boolean;\n icon: boolean;\n circle: boolean;\n layout: 'auto' \| 'stretched';\n placement: 'bottom' \| 'top';\n }) {\n return {\n selected: props.selected,\n disabled: props.disabled,\n 'small-tab': props.small,\n icon: props.small,\n stretched: props.layout === 'stretched',\n bottom: props.placement === 'bottom',\n top: props.placement === 'top',\n circle: props.circle,\n };\n }\n\n render() {\n return (\n <Host\n class={this.tabItemClasses({\n selected: this.selected,\n disabled: this.disabled,\n small: this.small,\n icon: this.icon,\n layout: this.layout,\n placement: this.placement,\n circle: this.rounded,\n })}\n tabIndex={0}\n onClick={(event: MouseEvent) => {\n if (event.defaultPrevented) return;\n\n const clientEvent = this.tabClick.emit({\n nativeEvent: event,\n });\n\n if (clientEvent.defaultPrevented) {\n event.stopPropagation();\n }\n }}\n >\n <div\n class={{\n circle: this.rounded,\n text: !this.rounded,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n <div\n class={{\n counter: true,\n selected: this.selected,\n hidden: !(this.rounded && this.counter !== undefined),\n disabled: this.disabled,\n }}\n >\n {this.counter}\n </div>\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/\n Prevents angular from change detection when requesting an animation frame\n \n Credits goes to:\n * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts\n /\nexport const requestAnimationFrameNoNgZone = (\n callback: (...args: any[]) => void\n) => {\n if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n return __zone_symbol__requestAnimationFrame(callback);\n }\n if (typeof requestAnimationFrame === 'function') {\n return requestAnimationFrame(callback);\n }\n return setTimeout(callback);\n};\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n width: auto;\n display: flex;\n align-items: center;\n position: relative;\n\n @include component.ix-component;\n\n .tab-items {\n overflow: hidden;\n scroll-behavior: smooth;\n width: 100%;\n\n .items-content {\n display: flex;\n align-items: center;\n }\n }\n\n .arrow {\n // unset button styles first\n all: unset;\n\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n top: 0;\n bottom: 0;\n left: 0;\n margin: auto 0;\n border-radius: 4px;\n color: var(--theme-btn-tertiary--color);\n background-color: var(--theme-btn-tertiary--background);\n z-index: 2;\n\n &:hover {\n color: var(--theme-btn-tertiary--color--hover);\n background-color: var(--theme-btn-tertiary--background--hover);\n }\n\n &:active {\n color: var(--theme-btn-tertiary--color--active);\n background-color: var(--theme-btn-tertiary--background--active);\n }\n\n &.right {\n left: auto;\n right: 0;\n }\n }\n\n .overflow-shadow {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n pointer-events: all;\n\n &.shadow-left {\n mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n }\n\n &.shadow-right {\n mask-image: linear-gradient(\n 90deg,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n\n &.shadow-both {\n mask-image: linear-gradient(\n 90deg,\n transparent 0px,\n black 45px,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\nimport {\n iconChevronLeftSmall,\n iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-tabs',\n styleUrl: 'tabs.scss',\n shadow: true,\n})\nexport class Tabs {\n @Element() hostElement!: HTMLIxTabsElement;\n\n /\n Set tab items to small size\n /\n @Prop() small = false;\n\n /\n Set rounded tabs\n /\n @Prop() rounded = false;\n\n /\n Set default selected tab by index\n /\n @Prop({ mutable: true }) selected = 0;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set placement style\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n ARIA label for the chevron left icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronLeftIconButton?: string;\n\n /\n ARIA label for the chevron right icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronRightIconButton?: string;\n\n /\n `selected` property changed\n /\n @Event() selectedChange!: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n @State() scrollActionAmount = 0;\n @State() showArrowPrevious = false;\n @State() showArrowNext = false;\n\n private windowStartSize = window.innerWidth;\n private resizeObserver?: ResizeObserver;\n\n private clickAction: {\n timeout: NodeJS.Timeout \| null;\n isClick: boolean;\n } = {\n timeout: null,\n isClick: true,\n };\n\n @Listen('resize', { target: 'window' })\n onWindowResize() {\n this.totalItems = 0;\n this.totalItems = this.getTabs().length;\n\n if (this.windowStartSize === 0)\n return (this.windowStartSize = window.innerWidth);\n this.move(this.windowStartSize - window.innerWidth);\n this.windowStartSize = window.innerWidth;\n }\n\n private getTabs() {\n return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n }\n\n private getTab(tabIndex: number) {\n return this.getTabs()[tabIndex];\n }\n\n private getTabsWrapper() {\n return this.hostElement.shadowRoot?.querySelector('.items-content');\n }\n\n private initResizeObserver() {\n const parentElement = this.hostElement.parentElement;\n if (!parentElement) return;\n this.resizeObserver = new ResizeObserver(() => {\n this.renderArrows();\n });\n this.resizeObserver.observe(parentElement);\n }\n\n private showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\n tabWrapper &&\n tabWrapper.scrollWidth >\n Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n this.layout === 'auto'\n );\n } catch (error) {\n return false;\n }\n }\n\n private showPreviousArrow() {\n try {\n return this.showArrows() === true && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n\n if (!tabWrapper) {\n return false;\n }\n\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() === true &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private move(amount: number, click = false) {\n const tabsWrapper = this.getTabsWrapper();\n\n if (!tabsWrapper) {\n return;\n }\n\n const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n const maxScrollWidth =\n -this.currentScrollAmount +\n tabsWrapperVisibleWidth -\n tabsWrapper.scrollWidth;\n\n amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n amount += this.currentScrollAmount;\n amount = Math.min(amount, 0);\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabsWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n @Watch('selected')\n onSelectedChange(newValue: number) {\n if (!this.showArrows()) return;\n\n const tabRect = this.getTab(newValue).getBoundingClientRect();\n const wrapperWidth = this.getTabsWrapper()?.clientWidth;\n const arrowWidth = 32;\n\n if (tabRect.left < arrowWidth) {\n this.move(-tabRect.left + arrowWidth, true);\n } else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {\n this.move(wrapperWidth - tabRect.right - arrowWidth, true);\n }\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (!this.clickAction.isClick \|\| this.dragStop()) {\n return;\n }\n\n const { defaultPrevented } = this.selectedChange.emit(index);\n if (defaultPrevented) {\n return;\n }\n\n this.setSelected(index);\n }\n\n private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n if (!this.showArrows()) return;\n if (event.button > 0) return;\n\n this.clickAction.timeout =\n this.clickAction.timeout === null\n ? setTimeout(() => (this.clickAction.isClick = false), 300)\n : null;\n\n const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n const mousedownPositionX = event.clientX;\n const move = (event: MouseEvent) =>\n this.dragMove(event, tabPositionX, mousedownPositionX);\n const windowClick = () => {\n window.removeEventListener('mousemove', move, false);\n window.removeEventListener('click', windowClick, false);\n this.dragStop();\n };\n window.addEventListener('click', windowClick);\n window.addEventListener('mousemove', move, false);\n }\n\n private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n this.move(event.clientX + tabX - mousedownX);\n }\n\n private dragStop() {\n if (this.clickAction.timeout) {\n clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\n }\n\n if (this.clickAction.isClick) return false;\n\n this.currentScrollAmount = this.scrollActionAmount;\n this.clickAction.isClick = true;\n\n return true;\n }\n\n componentWillLoad() {\n const tabs = this.getTabs();\n\n tabs.map((element, index) => {\n if (this.small) element.setAttribute('small', 'true');\n\n if (this.rounded) element.setAttribute('rounded', 'true');\n\n element.setAttribute('layout', this.layout);\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n\n element.setAttribute('placement', this.placement);\n });\n\n this.initResizeObserver();\n }\n\n componentDidRender() {\n const tabs = this.getTabs();\n this.totalItems = tabs.length;\n\n tabs.map((element, index) => {\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n });\n }\n\n componentWillRender() {\n this.renderArrows();\n }\n\n private renderArrows() {\n requestAnimationFrameNoNgZone(() => {\n this.showArrowNext = this.showNextArrow();\n this.showArrowPrevious = this.showPreviousArrow();\n });\n }\n\n componentDidLoad() {\n const tabs = this.getTabs();\n tabs.forEach((element) => {\n element.addEventListener('mousedown', (event) =>\n this.dragStart(element, event)\n );\n });\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n @Listen('tabClick')\n onTabClick(event: CustomEvent) {\n if (event.defaultPrevented) {\n return;\n }\n\n const target = event.target;\n const tabs = this.getTabs();\n\n tabs.forEach((tab, index) => {\n if (!tab.disabled && tab === target) {\n this.clickTab(index);\n }\n });\n }\n\n render() {\n return (\n <Host>\n {this.showArrowPrevious && (\n <button\n class=\"arrow\"\n onClick={() => this.move(this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronLeftIconButton}\n >\n <ix-icon name={iconChevronLeftSmall}></ix-icon>\n </button>\n )}\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showArrowPrevious,\n 'shadow-right': this.showArrowNext,\n 'shadow-both': this.showArrowNext && this.showArrowPrevious,\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n {this.showArrowNext && (\n <button\n class=\"arrow right\"\n onClick={() => this.move(-this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronRightIconButton}\n >\n <ix-icon name={iconChevronRightSmall}></ix-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"names":["h","Host","iconChevronLeftSmall","iconChevronRightSmall"],"mappings":"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"}

package/dist/cjs/ix-tab-item_2.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 var index = require('./index-DuDLgBnw.js');
 var index$1 = require('./index-Dyz3z1FD.js');
-const tabItemCss = "@charset \"UTF-8\";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .text span,:host .text span::before{pointer-events:none}:host .text{vertical-align:middle}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}";
+const tabItemCss = "@charset \"UTF-8\";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .text span,:host .text span::before{pointer-events:none}:host .text{vertical-align:middle}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-color-1);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}";
 const TabItem = class {
     constructor(hostRef) {

package/dist/collection/components/tab-item/tab-item.css CHANGED Viewed

@@ -167,7 +167,7 @@
   z-index: 1;
   height: 16px;
   width: auto;
-  background-color: var(--theme-pill-outline--background);
+  background-color: var(--theme-color-1);
   border: 1px solid var(--theme-tab-pill--border-color);
   border-radius: 100px;
   bottom: 6px;

package/dist/esm/ix-tab-item.ix-tabs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-tab-item.ix-tabs.entry.js","sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx","src/components/utils/requestAnimationFrame.ts","src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px vars.$large-space;\n line-height: 20px;\n font-size: 14px;\n font-weight: bold;\n background-color: var(--theme-tab--background);\n color: var(--theme-tab--color);\n\n @include component.ix-component;\n\n &::after {\n content: '';\n position: absolute;\n background-color: var(--theme-tab-indicator--background);\n width: 100%;\n height: var(--theme-tab-indicator--height);\n left: 0;\n }\n\n .text {\n @include text-truncation.ellipsis;\n\n span,\n span::before {\n pointer-events: none;\n }\n\n vertical-align: middle;\n }\n\n .circle {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 3rem;\n width: 3rem;\n background-color: var(--theme-animated-tab-indicator--background);\n border-radius: 50%;\n border: 2px solid var(--theme-animated-tab-circle--border-color);\n color: var(--theme-an…icon--color);\n cursor: pointer;\n\n &.selected:not(.disabled) {\n background-color: var(--theme-animated-tab-circle--background--selected);\n color: var(--theme-animated-tab-icon--color--selected);\n border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n &:hover {\n background-color: var(\n --theme-animated-tab-circle--background--selected\n );\n }\n }\n\n &:hover {\n background-color: var(--theme-animated-tab-circle--background--hover);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &.disabled {\n background-color: var(--theme-animated-tab-circle--background--disabled);\n border-color: var(--theme-animated-tab-circle--border-color--disabled);\n }\n }\n\n .counter {\n position: absolute;\n z-index: 1;\n height: 16px;\n width: auto;\n background-color: var(--theme-pill-outline--background);\n border: 1px solid var(--theme-tab-pill--border-color);\n border-radius: 100px;\n bottom: 6px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-left: vars.$tiny-space;\n padding-right: vars.$tiny-space;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-pill-outline--color);\n cursor: pointer;\n\n &.selected {\n border-color: var(--theme-tab-pill--border-color--selected);\n }\n\n &.disabled {\n border-color: var(--theme-tab-pill--border-color--disabled);\n }\n }\n\n .hidden {\n display: none;\n }\n}\n\n:host(.circle) {\n height: 72px;\n}\n\n:host(.top) {\n &::after {\n top: 0;\n }\n}\n\n:host(.bottom) {\n &::after {\n bottom: 0;\n }\n}\n\n:host(.stretched) {\n flex-basis: 100%;\n width: 100%;\n @include text-truncation.ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n background-color: var(--theme-tab--background--hover);\n color: var(--theme-tab-color-hover);\n cursor: pointer;\n\n &::after {\n background-color: var(--theme-tab-indicator--background--hover);\n }\n}\n\n:host(:active:not(.circle)) {\n background-color: var(--theme-tab--background--active);\n color: var(--theme-tab-color--active);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--active);\n }\n}\n\n:host(:focus-visible) {\n outline: 0px solid var(--focus--border-color);\n\n .circle {\n outline: 1px solid var(--focus--border-color);\n }\n}\n\n:host(:focus-visible:not(.circle)) {\n outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n pointer-events: none;\n color: var(--theme-tab--color--disabled);\n background-color: var(--theme-tab--background--disabled);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--disabled);\n }\n}\n\n:host(.selected:not(.disabled)) {\n background-color: var(--theme-tab--background--selected);\n color: var(--theme-tab--color--selected);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--selected);\n }\n}\n\n:host(.icon) {\n padding: vars.$large-space vars.$small-space;\n}\n\n:host(.small-tab) {\n height: 32px;\n padding: vars.$default-space;\n}\n\n:host(.small-tab.icon) {\n padding: vars.$default-space vars.$tiny-space;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { TabClickDetail } from './tab-item.types';\n\n@Component({\n tag: 'ix-tab-item',\n styleUrl: 'tab-item.scss',\n shadow: true,\n})\nexport class TabItem {\n /\n Set selected tab\n /\n @Prop() selected = false;\n\n /\n Set disabled tab\n /\n @Prop() disabled = false;\n\n /\n Set small size tab\n /\n @Prop() small = false;\n\n /\n Set icon only tab\n /\n @Prop() icon = false;\n\n /\n Set rounded tab\n /\n @Prop() rounded = false;\n\n /\n Set counter value\n /\n @Prop() counter?: number;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set selected placement\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n Emitted when the tab is clicked.\n /\n @Event() tabClick!: EventEmitter<TabClickDetail>;\n\n private tabItemClasses(props: {\n selected: boolean;\n disabled: boolean;\n small: boolean;\n icon: boolean;\n circle: boolean;\n layout: 'auto' \| 'stretched';\n placement: 'bottom' \| 'top';\n }) {\n return {\n selected: props.selected,\n disabled: props.disabled,\n 'small-tab': props.small,\n icon: props.small,\n stretched: props.layout === 'stretched',\n bottom: props.placement === 'bottom',\n top: props.placement === 'top',\n circle: props.circle,\n };\n }\n\n render() {\n return (\n <Host\n class={this.tabItemClasses({\n selected: this.selected,\n disabled: this.disabled,\n small: this.small,\n icon: this.icon,\n layout: this.layout,\n placement: this.placement,\n circle: this.rounded,\n })}\n tabIndex={0}\n onClick={(event: MouseEvent) => {\n if (event.defaultPrevented) return;\n\n const clientEvent = this.tabClick.emit({\n nativeEvent: event,\n });\n\n if (clientEvent.defaultPrevented) {\n event.stopPropagation();\n }\n }}\n >\n <div\n class={{\n circle: this.rounded,\n text: !this.rounded,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n <div\n class={{\n counter: true,\n selected: this.selected,\n hidden: !(this.rounded && this.counter !== undefined),\n disabled: this.disabled,\n }}\n >\n {this.counter}\n </div>\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/\n Prevents angular from change detection when requesting an animation frame\n \n Credits goes to:\n * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts\n /\nexport const requestAnimationFrameNoNgZone = (\n callback: (...args: any[]) => void\n) => {\n if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n return __zone_symbol__requestAnimationFrame(callback);\n }\n if (typeof requestAnimationFrame === 'function') {\n return requestAnimationFrame(callback);\n }\n return setTimeout(callback);\n};\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n width: auto;\n display: flex;\n align-items: center;\n position: relative;\n\n @include component.ix-component;\n\n .tab-items {\n overflow: hidden;\n scroll-behavior: smooth;\n width: 100%;\n\n .items-content {\n display: flex;\n align-items: center;\n }\n }\n\n .arrow {\n // unset button styles first\n all: unset;\n\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n top: 0;\n bottom: 0;\n left: 0;\n margin: auto 0;\n border-radius: 4px;\n color: var(--theme-btn-tertiary--color);\n background-color: var(--theme-btn-tertiary--background);\n z-index: 2;\n\n &:hover {\n color: var(--theme-btn-tertiary--color--hover);\n background-color: var(--theme-btn-tertiary--background--hover);\n }\n\n &:active {\n color: var(--theme-btn-tertiary--color--active);\n background-color: var(--theme-btn-tertiary--background--active);\n }\n\n &.right {\n left: auto;\n right: 0;\n }\n }\n\n .overflow-shadow {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n pointer-events: all;\n\n &.shadow-left {\n mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n }\n\n &.shadow-right {\n mask-image: linear-gradient(\n 90deg,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n\n &.shadow-both {\n mask-image: linear-gradient(\n 90deg,\n transparent 0px,\n black 45px,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\nimport {\n iconChevronLeftSmall,\n iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-tabs',\n styleUrl: 'tabs.scss',\n shadow: true,\n})\nexport class Tabs {\n @Element() hostElement!: HTMLIxTabsElement;\n\n /\n Set tab items to small size\n /\n @Prop() small = false;\n\n /\n Set rounded tabs\n /\n @Prop() rounded = false;\n\n /\n Set default selected tab by index\n /\n @Prop({ mutable: true }) selected = 0;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set placement style\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n ARIA label for the chevron left icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronLeftIconButton?: string;\n\n /\n ARIA label for the chevron right icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronRightIconButton?: string;\n\n /\n `selected` property changed\n /\n @Event() selectedChange!: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n @State() scrollActionAmount = 0;\n @State() showArrowPrevious = false;\n @State() showArrowNext = false;\n\n private windowStartSize = window.innerWidth;\n private resizeObserver?: ResizeObserver;\n\n private clickAction: {\n timeout: NodeJS.Timeout \| null;\n isClick: boolean;\n } = {\n timeout: null,\n isClick: true,\n };\n\n @Listen('resize', { target: 'window' })\n onWindowResize() {\n this.totalItems = 0;\n this.totalItems = this.getTabs().length;\n\n if (this.windowStartSize === 0)\n return (this.windowStartSize = window.innerWidth);\n this.move(this.windowStartSize - window.innerWidth);\n this.windowStartSize = window.innerWidth;\n }\n\n private getTabs() {\n return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n }\n\n private getTab(tabIndex: number) {\n return this.getTabs()[tabIndex];\n }\n\n private getTabsWrapper() {\n return this.hostElement.shadowRoot?.querySelector('.items-content');\n }\n\n private initResizeObserver() {\n const parentElement = this.hostElement.parentElement;\n if (!parentElement) return;\n this.resizeObserver = new ResizeObserver(() => {\n this.renderArrows();\n });\n this.resizeObserver.observe(parentElement);\n }\n\n private showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\n tabWrapper &&\n tabWrapper.scrollWidth >\n Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n this.layout === 'auto'\n );\n } catch (error) {\n return false;\n }\n }\n\n private showPreviousArrow() {\n try {\n return this.showArrows() === true && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n\n if (!tabWrapper) {\n return false;\n }\n\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() === true &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private move(amount: number, click = false) {\n const tabsWrapper = this.getTabsWrapper();\n\n if (!tabsWrapper) {\n return;\n }\n\n const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n const maxScrollWidth =\n -this.currentScrollAmount +\n tabsWrapperVisibleWidth -\n tabsWrapper.scrollWidth;\n\n amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n amount += this.currentScrollAmount;\n amount = Math.min(amount, 0);\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabsWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n @Watch('selected')\n onSelectedChange(newValue: number) {\n if (!this.showArrows()) return;\n\n const tabRect = this.getTab(newValue).getBoundingClientRect();\n const wrapperWidth = this.getTabsWrapper()?.clientWidth;\n const arrowWidth = 32;\n\n if (tabRect.left < arrowWidth) {\n this.move(-tabRect.left + arrowWidth, true);\n } else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {\n this.move(wrapperWidth - tabRect.right - arrowWidth, true);\n }\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (!this.clickAction.isClick \|\| this.dragStop()) {\n return;\n }\n\n const { defaultPrevented } = this.selectedChange.emit(index);\n if (defaultPrevented) {\n return;\n }\n\n this.setSelected(index);\n }\n\n private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n if (!this.showArrows()) return;\n if (event.button > 0) return;\n\n this.clickAction.timeout =\n this.clickAction.timeout === null\n ? setTimeout(() => (this.clickAction.isClick = false), 300)\n : null;\n\n const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n const mousedownPositionX = event.clientX;\n const move = (event: MouseEvent) =>\n this.dragMove(event, tabPositionX, mousedownPositionX);\n const windowClick = () => {\n window.removeEventListener('mousemove', move, false);\n window.removeEventListener('click', windowClick, false);\n this.dragStop();\n };\n window.addEventListener('click', windowClick);\n window.addEventListener('mousemove', move, false);\n }\n\n private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n this.move(event.clientX + tabX - mousedownX);\n }\n\n private dragStop() {\n if (this.clickAction.timeout) {\n clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\n }\n\n if (this.clickAction.isClick) return false;\n\n this.currentScrollAmount = this.scrollActionAmount;\n this.clickAction.isClick = true;\n\n return true;\n }\n\n componentWillLoad() {\n const tabs = this.getTabs();\n\n tabs.map((element, index) => {\n if (this.small) element.setAttribute('small', 'true');\n\n if (this.rounded) element.setAttribute('rounded', 'true');\n\n element.setAttribute('layout', this.layout);\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n\n element.setAttribute('placement', this.placement);\n });\n\n this.initResizeObserver();\n }\n\n componentDidRender() {\n const tabs = this.getTabs();\n this.totalItems = tabs.length;\n\n tabs.map((element, index) => {\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n });\n }\n\n componentWillRender() {\n this.renderArrows();\n }\n\n private renderArrows() {\n requestAnimationFrameNoNgZone(() => {\n this.showArrowNext = this.showNextArrow();\n this.showArrowPrevious = this.showPreviousArrow();\n });\n }\n\n componentDidLoad() {\n const tabs = this.getTabs();\n tabs.forEach((element) => {\n element.addEventListener('mousedown', (event) =>\n this.dragStart(element, event)\n );\n });\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n @Listen('tabClick')\n onTabClick(event: CustomEvent) {\n if (event.defaultPrevented) {\n return;\n }\n\n const target = event.target;\n const tabs = this.getTabs();\n\n tabs.forEach((tab, index) => {\n if (!tab.disabled && tab === target) {\n this.clickTab(index);\n }\n });\n }\n\n render() {\n return (\n <Host>\n {this.showArrowPrevious && (\n <button\n class=\"arrow\"\n onClick={() => this.move(this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronLeftIconButton}\n >\n <ix-icon name={iconChevronLeftSmall}></ix-icon>\n </button>\n )}\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showArrowPrevious,\n 'shadow-right': this.showArrowNext,\n 'shadow-both': this.showArrowNext && this.showArrowPrevious,\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n {this.showArrowNext && (\n <button\n class=\"arrow right\"\n onClick={() => this.move(-this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronRightIconButton}\n >\n <ix-icon name={iconChevronRightSmall}></ix-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ix-tab-item.ix-tabs.entry.js","sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx","src/components/utils/requestAnimationFrame.ts","src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px vars.$large-space;\n line-height: 20px;\n font-size: 14px;\n font-weight: bold;\n background-color: var(--theme-tab--background);\n color: var(--theme-tab--color);\n\n @include component.ix-component;\n\n &::after {\n content: '';\n position: absolute;\n background-color: var(--theme-tab-indicator--background);\n width: 100%;\n height: var(--theme-tab-indicator--height);\n left: 0;\n }\n\n .text {\n @include text-truncation.ellipsis;\n\n span,\n span::before {\n pointer-events: none;\n }\n\n vertical-align: middle;\n }\n\n .circle {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 3rem;\n width: 3rem;\n background-color: var(--theme-animated-tab-indicator--background);\n border-radius: 50%;\n border: 2px solid var(--theme-animated-tab-circle--border-color);\n color: var(--theme-an…icon--color);\n cursor: pointer;\n\n &.selected:not(.disabled) {\n background-color: var(--theme-animated-tab-circle--background--selected);\n color: var(--theme-animated-tab-icon--color--selected);\n border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n &:hover {\n background-color: var(\n --theme-animated-tab-circle--background--selected\n );\n }\n }\n\n &:hover {\n background-color: var(--theme-animated-tab-circle--background--hover);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &.disabled {\n background-color: var(--theme-animated-tab-circle--background--disabled);\n border-color: var(--theme-animated-tab-circle--border-color--disabled);\n }\n }\n\n .counter {\n position: absolute;\n z-index: 1;\n height: 16px;\n width: auto;\n background-color: var(--theme-color-1);\n border: 1px solid var(--theme-tab-pill--border-color);\n border-radius: 100px;\n bottom: 6px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-left: vars.$tiny-space;\n padding-right: vars.$tiny-space;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-pill-outline--color);\n cursor: pointer;\n\n &.selected {\n border-color: var(--theme-tab-pill--border-color--selected);\n }\n\n &.disabled {\n border-color: var(--theme-tab-pill--border-color--disabled);\n }\n }\n\n .hidden {\n display: none;\n }\n}\n\n:host(.circle) {\n height: 72px;\n}\n\n:host(.top) {\n &::after {\n top: 0;\n }\n}\n\n:host(.bottom) {\n &::after {\n bottom: 0;\n }\n}\n\n:host(.stretched) {\n flex-basis: 100%;\n width: 100%;\n @include text-truncation.ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n background-color: var(--theme-tab--background--hover);\n color: var(--theme-tab-color-hover);\n cursor: pointer;\n\n &::after {\n background-color: var(--theme-tab-indicator--background--hover);\n }\n}\n\n:host(:active:not(.circle)) {\n background-color: var(--theme-tab--background--active);\n color: var(--theme-tab-color--active);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--active);\n }\n}\n\n:host(:focus-visible) {\n outline: 0px solid var(--focus--border-color);\n\n .circle {\n outline: 1px solid var(--focus--border-color);\n }\n}\n\n:host(:focus-visible:not(.circle)) {\n outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n pointer-events: none;\n color: var(--theme-tab--color--disabled);\n background-color: var(--theme-tab--background--disabled);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--disabled);\n }\n}\n\n:host(.selected:not(.disabled)) {\n background-color: var(--theme-tab--background--selected);\n color: var(--theme-tab--color--selected);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--selected);\n }\n}\n\n:host(.icon) {\n padding: vars.$large-space vars.$small-space;\n}\n\n:host(.small-tab) {\n height: 32px;\n padding: vars.$default-space;\n}\n\n:host(.small-tab.icon) {\n padding: vars.$default-space vars.$tiny-space;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { TabClickDetail } from './tab-item.types';\n\n@Component({\n tag: 'ix-tab-item',\n styleUrl: 'tab-item.scss',\n shadow: true,\n})\nexport class TabItem {\n /\n Set selected tab\n /\n @Prop() selected = false;\n\n /\n Set disabled tab\n /\n @Prop() disabled = false;\n\n /\n Set small size tab\n /\n @Prop() small = false;\n\n /\n Set icon only tab\n /\n @Prop() icon = false;\n\n /\n Set rounded tab\n /\n @Prop() rounded = false;\n\n /\n Set counter value\n /\n @Prop() counter?: number;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set selected placement\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n Emitted when the tab is clicked.\n /\n @Event() tabClick!: EventEmitter<TabClickDetail>;\n\n private tabItemClasses(props: {\n selected: boolean;\n disabled: boolean;\n small: boolean;\n icon: boolean;\n circle: boolean;\n layout: 'auto' \| 'stretched';\n placement: 'bottom' \| 'top';\n }) {\n return {\n selected: props.selected,\n disabled: props.disabled,\n 'small-tab': props.small,\n icon: props.small,\n stretched: props.layout === 'stretched',\n bottom: props.placement === 'bottom',\n top: props.placement === 'top',\n circle: props.circle,\n };\n }\n\n render() {\n return (\n <Host\n class={this.tabItemClasses({\n selected: this.selected,\n disabled: this.disabled,\n small: this.small,\n icon: this.icon,\n layout: this.layout,\n placement: this.placement,\n circle: this.rounded,\n })}\n tabIndex={0}\n onClick={(event: MouseEvent) => {\n if (event.defaultPrevented) return;\n\n const clientEvent = this.tabClick.emit({\n nativeEvent: event,\n });\n\n if (clientEvent.defaultPrevented) {\n event.stopPropagation();\n }\n }}\n >\n <div\n class={{\n circle: this.rounded,\n text: !this.rounded,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n <div\n class={{\n counter: true,\n selected: this.selected,\n hidden: !(this.rounded && this.counter !== undefined),\n disabled: this.disabled,\n }}\n >\n {this.counter}\n </div>\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/\n Prevents angular from change detection when requesting an animation frame\n \n Credits goes to:\n * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts\n /\nexport const requestAnimationFrameNoNgZone = (\n callback: (...args: any[]) => void\n) => {\n if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n return __zone_symbol__requestAnimationFrame(callback);\n }\n if (typeof requestAnimationFrame === 'function') {\n return requestAnimationFrame(callback);\n }\n return setTimeout(callback);\n};\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n width: auto;\n display: flex;\n align-items: center;\n position: relative;\n\n @include component.ix-component;\n\n .tab-items {\n overflow: hidden;\n scroll-behavior: smooth;\n width: 100%;\n\n .items-content {\n display: flex;\n align-items: center;\n }\n }\n\n .arrow {\n // unset button styles first\n all: unset;\n\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n top: 0;\n bottom: 0;\n left: 0;\n margin: auto 0;\n border-radius: 4px;\n color: var(--theme-btn-tertiary--color);\n background-color: var(--theme-btn-tertiary--background);\n z-index: 2;\n\n &:hover {\n color: var(--theme-btn-tertiary--color--hover);\n background-color: var(--theme-btn-tertiary--background--hover);\n }\n\n &:active {\n color: var(--theme-btn-tertiary--color--active);\n background-color: var(--theme-btn-tertiary--background--active);\n }\n\n &.right {\n left: auto;\n right: 0;\n }\n }\n\n .overflow-shadow {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n pointer-events: all;\n\n &.shadow-left {\n mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n }\n\n &.shadow-right {\n mask-image: linear-gradient(\n 90deg,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n\n &.shadow-both {\n mask-image: linear-gradient(\n 90deg,\n transparent 0px,\n black 45px,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\nimport {\n iconChevronLeftSmall,\n iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-tabs',\n styleUrl: 'tabs.scss',\n shadow: true,\n})\nexport class Tabs {\n @Element() hostElement!: HTMLIxTabsElement;\n\n /\n Set tab items to small size\n /\n @Prop() small = false;\n\n /\n Set rounded tabs\n /\n @Prop() rounded = false;\n\n /\n Set default selected tab by index\n /\n @Prop({ mutable: true }) selected = 0;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set placement style\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n ARIA label for the chevron left icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronLeftIconButton?: string;\n\n /\n ARIA label for the chevron right icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronRightIconButton?: string;\n\n /\n `selected` property changed\n /\n @Event() selectedChange!: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n @State() scrollActionAmount = 0;\n @State() showArrowPrevious = false;\n @State() showArrowNext = false;\n\n private windowStartSize = window.innerWidth;\n private resizeObserver?: ResizeObserver;\n\n private clickAction: {\n timeout: NodeJS.Timeout \| null;\n isClick: boolean;\n } = {\n timeout: null,\n isClick: true,\n };\n\n @Listen('resize', { target: 'window' })\n onWindowResize() {\n this.totalItems = 0;\n this.totalItems = this.getTabs().length;\n\n if (this.windowStartSize === 0)\n return (this.windowStartSize = window.innerWidth);\n this.move(this.windowStartSize - window.innerWidth);\n this.windowStartSize = window.innerWidth;\n }\n\n private getTabs() {\n return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n }\n\n private getTab(tabIndex: number) {\n return this.getTabs()[tabIndex];\n }\n\n private getTabsWrapper() {\n return this.hostElement.shadowRoot?.querySelector('.items-content');\n }\n\n private initResizeObserver() {\n const parentElement = this.hostElement.parentElement;\n if (!parentElement) return;\n this.resizeObserver = new ResizeObserver(() => {\n this.renderArrows();\n });\n this.resizeObserver.observe(parentElement);\n }\n\n private showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\n tabWrapper &&\n tabWrapper.scrollWidth >\n Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n this.layout === 'auto'\n );\n } catch (error) {\n return false;\n }\n }\n\n private showPreviousArrow() {\n try {\n return this.showArrows() === true && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n\n if (!tabWrapper) {\n return false;\n }\n\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() === true &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private move(amount: number, click = false) {\n const tabsWrapper = this.getTabsWrapper();\n\n if (!tabsWrapper) {\n return;\n }\n\n const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n const maxScrollWidth =\n -this.currentScrollAmount +\n tabsWrapperVisibleWidth -\n tabsWrapper.scrollWidth;\n\n amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n amount += this.currentScrollAmount;\n amount = Math.min(amount, 0);\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabsWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n @Watch('selected')\n onSelectedChange(newValue: number) {\n if (!this.showArrows()) return;\n\n const tabRect = this.getTab(newValue).getBoundingClientRect();\n const wrapperWidth = this.getTabsWrapper()?.clientWidth;\n const arrowWidth = 32;\n\n if (tabRect.left < arrowWidth) {\n this.move(-tabRect.left + arrowWidth, true);\n } else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {\n this.move(wrapperWidth - tabRect.right - arrowWidth, true);\n }\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (!this.clickAction.isClick \|\| this.dragStop()) {\n return;\n }\n\n const { defaultPrevented } = this.selectedChange.emit(index);\n if (defaultPrevented) {\n return;\n }\n\n this.setSelected(index);\n }\n\n private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n if (!this.showArrows()) return;\n if (event.button > 0) return;\n\n this.clickAction.timeout =\n this.clickAction.timeout === null\n ? setTimeout(() => (this.clickAction.isClick = false), 300)\n : null;\n\n const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n const mousedownPositionX = event.clientX;\n const move = (event: MouseEvent) =>\n this.dragMove(event, tabPositionX, mousedownPositionX);\n const windowClick = () => {\n window.removeEventListener('mousemove', move, false);\n window.removeEventListener('click', windowClick, false);\n this.dragStop();\n };\n window.addEventListener('click', windowClick);\n window.addEventListener('mousemove', move, false);\n }\n\n private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n this.move(event.clientX + tabX - mousedownX);\n }\n\n private dragStop() {\n if (this.clickAction.timeout) {\n clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\n }\n\n if (this.clickAction.isClick) return false;\n\n this.currentScrollAmount = this.scrollActionAmount;\n this.clickAction.isClick = true;\n\n return true;\n }\n\n componentWillLoad() {\n const tabs = this.getTabs();\n\n tabs.map((element, index) => {\n if (this.small) element.setAttribute('small', 'true');\n\n if (this.rounded) element.setAttribute('rounded', 'true');\n\n element.setAttribute('layout', this.layout);\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n\n element.setAttribute('placement', this.placement);\n });\n\n this.initResizeObserver();\n }\n\n componentDidRender() {\n const tabs = this.getTabs();\n this.totalItems = tabs.length;\n\n tabs.map((element, index) => {\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n });\n }\n\n componentWillRender() {\n this.renderArrows();\n }\n\n private renderArrows() {\n requestAnimationFrameNoNgZone(() => {\n this.showArrowNext = this.showNextArrow();\n this.showArrowPrevious = this.showPreviousArrow();\n });\n }\n\n componentDidLoad() {\n const tabs = this.getTabs();\n tabs.forEach((element) => {\n element.addEventListener('mousedown', (event) =>\n this.dragStart(element, event)\n );\n });\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n @Listen('tabClick')\n onTabClick(event: CustomEvent) {\n if (event.defaultPrevented) {\n return;\n }\n\n const target = event.target;\n const tabs = this.getTabs();\n\n tabs.forEach((tab, index) => {\n if (!tab.disabled && tab === target) {\n this.clickTab(index);\n }\n });\n }\n\n render() {\n return (\n <Host>\n {this.showArrowPrevious && (\n <button\n class=\"arrow\"\n onClick={() => this.move(this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronLeftIconButton}\n >\n <ix-icon name={iconChevronLeftSmall}></ix-icon>\n </button>\n )}\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showArrowPrevious,\n 'shadow-right': this.showArrowNext,\n 'shadow-both': this.showArrowNext && this.showArrowPrevious,\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n {this.showArrowNext && (\n <button\n class=\"arrow right\"\n onClick={() => this.move(-this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronRightIconButton}\n >\n <ix-icon name={iconChevronRightSmall}></ix-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ix-tab-item_2.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-DGODjp4O.js';
 import { v as iconChevronRightSmall, D as iconChevronLeftSmall } from './index-Cz75KU1f.js';
-const tabItemCss = "@charset \"UTF-8\";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .text span,:host .text span::before{pointer-events:none}:host .text{vertical-align:middle}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}";
+const tabItemCss = "@charset \"UTF-8\";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .text span,:host .text span::before{pointer-events:none}:host .text{vertical-align:middle}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-color-1);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}";
 const TabItem = class {
     constructor(hostRef) {