q2-tecton-elements 1.65.0 → 1.66.1

package/dist/q2-tecton-elements/q2-tab-container.entry.js

@@ -4,9 +4,11 @@ import { c as o, l as n, o as s, i as c } from "./index-B4WYBDS9.js";
 
 import { m as l } from "./mirror-emit-DUjY_ucm.js";
 
-const b = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));margin:var(--tct-tab-container-margin, var(--t-tab-container-margin, 0));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));list-style:none;border-bottom-width:var(--tct-tab-container-border-width, 1px);border-bottom-style:var(--tct-tab-container-border-style, solid);border-bottom-color:var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-background, var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent)));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs)}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:var(--tct-tab-section-font-size, inherit);padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background:var(--tct-tab-hover-background, var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit)));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background:var(--tct-tab-active-background, var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit)))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;padding:var(--tct-tab-container-content-padding, var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding))));background:var(--tct-tab-container-content-backgrond, none)}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}.tab-pane-badge{display:flex;justify-content:space-between;align-items:center}.tab-pane-badge q2-badge{margin-left:5px;margin-right:5px}";
+import { h as b, f as d } from "./component-DVxzK3WH.js";
 
-const d = class {
+const h = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));margin:var(--tct-tab-container-margin, var(--t-tab-container-margin, 0));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));list-style:none;border-bottom-width:var(--tct-tab-container-border-width, 1px);border-bottom-style:var(--tct-tab-container-border-style, solid);border-bottom-color:var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-background, var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent)));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs)}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:var(--tct-tab-section-font-size, inherit);padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background:var(--tct-tab-hover-background, var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit)));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background:var(--tct-tab-active-background, var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit)))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;padding:var(--tct-tab-container-content-padding, var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding))));background:var(--tct-tab-container-content-backgrond, none)}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}.tab-pane-badge{display:flex;justify-content:space-between;align-items:center}.tab-pane-badge q2-badge{margin-left:5px;margin-right:5px}";
+
+const v = class {
   constructor(e) {
     t(this, e);
     this.change = a(this, "change", 7);
@@ -165,6 +167,9 @@ const d = class {
     this.mutationObserver = null;
   }
   componentWillLoad() {
+    if (!b(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ])) {
+      d(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]);
+    }
     const t = new MutationObserver((() => this.updateTabs()));
     t.observe(this.hostElement, {
       childList: true,
@@ -287,49 +292,49 @@ const d = class {
   }
   render() {
     return e(i, {
-      key: "163b23c303ecb1bf182d935efd451a84dae3373f"
+      key: "2181b2505b4d48d9812b61d5414264425ff7f4af"
     }, e("div", {
-      key: "62f40515232ce696bc163a8b2e2e88d29801c8f2",
+      key: "0901678c9f074277414bf0dfd1b73cb3ec93cd6f",
       class: "tab-container"
     }, this.scrollEnabled && e(i, {
-      key: "106027e03ed5beaf4bd1c1c647e7eea944e2ccce"
+      key: "3cc265f40d308947e07bb2ca7cf2496bf1f74d44"
     }, e("div", {
-      key: "4a39b7fc38ccdc795835f06ae632006bea157882",
+      key: "8b0606af29da80fb969e94b2708077bf2e4ef7e2",
       class: "gradient-left",
       hidden: !this.showScrollLeft
     }), e("div", {
-      key: "8c6e3fbae7198b3737cbfe37f0edb7c45fefc391",
+      key: "2412d226cf903beae013965e345f0f56ca9991d6",
       class: "gradient-right",
       hidden: !this.showScrollRight
     }), e("q2-btn", {
-      key: "2961327ec8ba90420ccf3a086547a6fdff84d050",
+      key: "edf2bf63eebe24832e529178fa185ad27c3a45ba",
       class: "btn-left",
       hidden: !this.showScrollLeft,
       onTctClick: () => this.onScrollBtnClick("left")
     }, e("q2-icon", {
-      key: "e4398650ca11c5eae8c3a242239e9375b9d0499b",
+      key: "7900b5426d1ec51880fe8c36d33a59873b1be508",
       type: "chevron-left",
       label: "scroll left"
     })), e("q2-btn", {
-      key: "17ee9e3b15b10a235c6c4e740fabd11d3fa7ecaf",
+      key: "001628dae8b16b4c5aff651c8515cce25d08bbf2",
       class: "btn-right",
       hidden: !this.showScrollRight,
       onTctClick: () => this.onScrollBtnClick("right")
     }, e("q2-icon", {
-      key: "55c3a61d5496496089d231aa4b4ce906f58e8728",
+      key: "f4579ca37dd0e2908e3f68dc60eb923d4a3f314e",
       type: "chevron-right",
       label: "scroll right"
     }))), e("ul", {
-      key: "b7ad9d2134a9ec8c20affe93c6ddc5fed3ea02f8",
+      key: "53efc8ffaaf29dc1dfd9b86ee4105a87350aebfb",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       class: this.noPrint ? "no-print" : null,
       role: "tablist"
     }, this.tabs.map(((t, a) => this.renderTab(t, a))))), e("div", {
-      key: "abb62308bc971d6545c539a98f48214c9c83f601",
+      key: "1e3d76467f667d04a488aacd5a51b641a0acbabc",
       class: "tab-content"
     }, e("slot", {
-      key: "9656113ef3fd30109b5e1d0b278f5eec241b4aaa",
+      key: "4384593fb9579c4187c50eee288517aba22c9ace",
       onSlotchange: () => this.onSlotChange()
     })));
   }
@@ -344,8 +349,8 @@ const d = class {
   }
 };
 
-d.style = b;
+v.style = h;
 
-export { d as q2_tab_container };
+export { v as q2_tab_container };
 //# sourceMappingURL=q2-tab-container.entry.esm.js.map
 //# sourceMappingURL=q2-tab-container.entry.js.map

package/dist/q2-tecton-elements/q2-tab-container.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2TabContainerCss","Q2TabContainer","constructor","hostRef","this","guid","createGuid","hasValidTab","lastScrolled","Date","getTime","scheduledAfterRender","hasLeft","hasRight","scrollEnabled","showScrollLeft","showScrollRight","noPrint","checkScrollState","listElement","scrollLeft","scrollWidth","clientWidth","Math","ceil","moveToAdjacentTab","value","direction","index","tabs","map","indexOf","newIndex","min","length","max","moveToTab","shouldFocus","focusedValue","focusedTab","querySelector","focus","preventScroll","left","offsetLeft","scrollTo","behavior","onScrollBtnClick","halfWidth","floor","scrollAmount","abs","scrollBy","onSlotChange","onTabClick","event","targetValue","target","closest","dataset","isAlreadySelected","mirrorEmit","onTabKeyDown","key","preventDefault","setTabs","tabPanes","label","badgeCount","badgeDescription","badgeTheme","badgeStatus","loc","updateTabPaneProps","forEach","tab","selected","selectedTabValue","updateTabs","validTabPreUpdate","some","push","determineTabMove","disconnectedCallback","_a","resizeObserver","disconnect","_b","mutationObserver","componentWillLoad","observer","MutationObserver","observe","hostElement","childList","attributes","ResizeObserver","componentDidLoad","overrideFocus","componentDidRender","fn","settled","emit","onBadge","defaultChangeHandler","onchange","detail","onFocus","isEventFromElement","findIndex","el","onResize","selectTab","paneButton","shadowRoot","click","nameObserver","valueObserver","resizeIframe","tabList","querySelectorAll","Array","from","filter","pane","name","window","TectonElements","call","renderTab","isSelected","h","role","id","tabIndex","onClick","onKeyDown","undefined","renderTabWithBadge","theme","description","class","status","render","Fragment","hidden","onTctClick","type","onScroll","ref","onSlotchange"],"sources":["src/components/q2-tab-container/q2-tab-container.scss?tag=q2-tab-container&encapsulation=shadow","src/components/q2-tab-container/q2-tab-container.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin), 0);\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom-width: var-list(--tct-tab-container-border-width, 1px);\n    border-bottom-style: var-list(--tct-tab-container-border-style, solid);\n    border-bottom-color: var-list(\n        var-prefixer(tab-container-border-color),\n        --tct-gray-11,\n        --t-gray-11,\n        --tct-gray-l1,\n        --app-gray-l1,\n        #cccccc\n    );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition:\n            background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs);\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: var-list(--tct-tab-section-font-size, inherit);\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentcolor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(\n        --tct-tab-container-content-padding,\n        var-prefixer(tab-content-padding),\n        --comp-tab-content-padding\n    );\n    background: var-list(--tct-tab-container-content-backgrond, none);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc, overrideFocus, isEventFromElement } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n/**\n * @name Tab Container\n * @category Display\n * @summary Use for switching between multiple views within the same context.\n */\n@Component({ tag: 'q2-tab-container', shadow: true, styleUrl: 'q2-tab-container.scss' })\nexport class Q2TabContainer implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    hasValidTab: boolean = false;\n    lastScrolled: number = new Date(null).getTime();\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasLeft: boolean = false;\n\n    @State()\n    hasRight: boolean = false;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    @State()\n    tabs: TabPane[];\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls which variables are used to color the tab controls.\n     *\n     * - `undefined` (default)\n     *   - Uses `--t-tab-active` and `--t-tab-inactive`.\n     * - `alt`\n     *   - Uses `--t-tab-alt-active` and `--t-tab-alt-inactive`.\n     *   - The default fallback for these variables is `inherit`.\n     */\n    @Prop({ reflect: true })\n    color: 'alt' | undefined;\n\n    /**\n     * Used to establish a relationship between `q2-tab-container` and its associated tab panes.\n     * @warning\n     * The element can fail if this property is not set. Nested tab containers without the `name` property will not render correctly.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */\n    @Prop({ reflect: true })\n    noPrint: boolean = false;\n\n    /** Determines the font size of the tab controls. */\n    @Prop({ reflect: true })\n    type: 'main' | 'section';\n\n    /** Corresponds to the value of the selected tab pane. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event()\n    settled: EventEmitter<undefined>;\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(() => this.updateTabs());\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabs();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        this.scheduledAfterRender.push(() => this.determineTabMove());\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveToTab(index, true);\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to select a tab pane corresponding with the value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async selectTab(value: string) {\n        const paneButton = this.hostElement.shadowRoot.querySelector(`[test-id=\"tabLink\"][data-value=\"${value}\"]`);\n        (paneButton as HTMLButtonElement)?.click();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabs();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateTabs();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveToTab(index, false));\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get selectedTabValue() {\n        return this.value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\n    }\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = scrollLeft > 0;\n        this.showScrollRight = scrollWidth > Math.ceil(scrollLeft) + clientWidth;\n    };\n\n    determineTabMove() {\n        if (!this.tabs) return;\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index === -1) return;\n        this.moveToTab(index, false);\n    }\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveToTab(newIndex, true);\n    };\n\n    moveToTab = (index: number, shouldFocus: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        if (shouldFocus) {\n            focusedTab.focus({ preventScroll: true });\n        }\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        const halfWidth = Math.floor(clientWidth / 2);\n        let scrollAmount: number = 0;\n        if (direction === 'left') {\n            scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));\n        } else {\n            scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));\n        }\n        this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], {\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                mirrorEmit(this, ['change', 'tctChange'], { value });\n                break;\n        }\n    };\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    updateTabs = () => {\n        const validTabPreUpdate = this.hasValidTab;\n        this.updateTabPaneProps();\n        this.setTabs();\n        // Check if we now have a valid tab\n        this.hasValidTab = this.tabs.some(tab => tab.value === this.value);\n        // Only move if we didn't have a valid tab before but do now\n        if (!validTabPreUpdate && this.hasValidTab) {\n            this.scheduledAfterRender.push(() => this.determineTabMove());\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={`${isSelected}`}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    renderTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onTctClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onTctClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.renderTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2TabContainerCss","Q2TabContainer","constructor","hostRef","this","guid","createGuid","hasValidTab","lastScrolled","Date","getTime","scheduledAfterRender","hasLeft","hasRight","scrollEnabled","showScrollLeft","showScrollRight","noPrint","checkScrollState","listElement","scrollLeft","scrollWidth","clientWidth","Math","ceil","moveToAdjacentTab","value","direction","index","tabs","map","indexOf","newIndex","min","length","max","moveToTab","shouldFocus","focusedValue","focusedTab","querySelector","focus","preventScroll","left","offsetLeft","scrollTo","behavior","onScrollBtnClick","halfWidth","floor","scrollAmount","abs","scrollBy","onSlotChange","onTabClick","event","targetValue","target","closest","dataset","isAlreadySelected","mirrorEmit","onTabKeyDown","key","preventDefault","setTabs","tabPanes","label","badgeCount","badgeDescription","badgeTheme","badgeStatus","loc","updateTabPaneProps","forEach","tab","selected","selectedTabValue","updateTabs","validTabPreUpdate","some","push","determineTabMove","disconnectedCallback","_a","resizeObserver","disconnect","_b","mutationObserver","componentWillLoad","hasValidChildren","hostElement","filterChildren","observer","MutationObserver","observe","childList","attributes","ResizeObserver","componentDidLoad","overrideFocus","componentDidRender","fn","settled","emit","onBadge","defaultChangeHandler","onchange","detail","onFocus","isEventFromElement","findIndex","el","onResize","selectTab","paneButton","shadowRoot","click","nameObserver","valueObserver","resizeIframe","tabList","querySelectorAll","Array","from","filter","pane","name","window","TectonElements","call","renderTab","isSelected","h","role","id","tabIndex","onClick","onKeyDown","undefined","renderTabWithBadge","theme","description","class","status","render","Fragment","hidden","onTctClick","type","onScroll","ref","onSlotchange"],"sources":["src/components/q2-tab-container/q2-tab-container.scss?tag=q2-tab-container&encapsulation=shadow","src/components/q2-tab-container/q2-tab-container.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin), 0);\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom-width: var-list(--tct-tab-container-border-width, 1px);\n    border-bottom-style: var-list(--tct-tab-container-border-style, solid);\n    border-bottom-color: var-list(\n        var-prefixer(tab-container-border-color),\n        --tct-gray-11,\n        --t-gray-11,\n        --tct-gray-l1,\n        --app-gray-l1,\n        #cccccc\n    );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition:\n            background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs);\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: var-list(--tct-tab-section-font-size, inherit);\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentcolor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(\n        --tct-tab-container-content-padding,\n        var-prefixer(tab-content-padding),\n        --comp-tab-content-padding\n    );\n    background: var-list(--tct-tab-container-content-backgrond, none);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc, overrideFocus, isEventFromElement } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\nimport { filterChildren, hasValidChildren } from '@/utils/component';\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n/**\n * @name Tab Container\n * @category Display\n * @summary Use for switching between multiple views within the same context.\n */\n@Component({ tag: 'q2-tab-container', shadow: true, styleUrl: 'q2-tab-container.scss' })\nexport class Q2TabContainer implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    hasValidTab: boolean = false;\n    lastScrolled: number = new Date(null).getTime();\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasLeft: boolean = false;\n\n    @State()\n    hasRight: boolean = false;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    @State()\n    tabs: TabPane[];\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls which variables are used to color the tab controls.\n     *\n     * - `undefined` (default)\n     *   - Uses `--t-tab-active` and `--t-tab-inactive`.\n     * - `alt`\n     *   - Uses `--t-tab-alt-active` and `--t-tab-alt-inactive`.\n     *   - The default fallback for these variables is `inherit`.\n     */\n    @Prop({ reflect: true })\n    color: 'alt' | undefined;\n\n    /**\n     * Used to establish a relationship between `q2-tab-container` and its associated tab panes.\n     * @warning\n     * The element can fail if this property is not set. Nested tab containers without the `name` property will not render correctly.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */\n    @Prop({ reflect: true })\n    noPrint: boolean = false;\n\n    /** Determines the font size of the tab controls. */\n    @Prop({ reflect: true })\n    type: 'main' | 'section';\n\n    /** Corresponds to the value of the selected tab pane. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event()\n    settled: EventEmitter<undefined>;\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        if (!hasValidChildren(this.hostElement, ['q2-tab-pane', 'tecton-tab-pane'])) {\n            filterChildren(this.hostElement, ['q2-tab-pane', 'tecton-tab-pane']);\n        }\n        const observer = new MutationObserver(() => this.updateTabs());\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabs();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        this.scheduledAfterRender.push(() => this.determineTabMove());\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveToTab(index, true);\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to select a tab pane corresponding with the value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async selectTab(value: string) {\n        const paneButton = this.hostElement.shadowRoot.querySelector(`[test-id=\"tabLink\"][data-value=\"${value}\"]`);\n        (paneButton as HTMLButtonElement)?.click();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabs();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateTabs();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveToTab(index, false));\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get selectedTabValue() {\n        return this.value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\n    }\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = scrollLeft > 0;\n        this.showScrollRight = scrollWidth > Math.ceil(scrollLeft) + clientWidth;\n    };\n\n    determineTabMove() {\n        if (!this.tabs) return;\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index === -1) return;\n        this.moveToTab(index, false);\n    }\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveToTab(newIndex, true);\n    };\n\n    moveToTab = (index: number, shouldFocus: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        if (shouldFocus) {\n            focusedTab.focus({ preventScroll: true });\n        }\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        const halfWidth = Math.floor(clientWidth / 2);\n        let scrollAmount: number = 0;\n        if (direction === 'left') {\n            scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));\n        } else {\n            scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));\n        }\n        this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], {\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                mirrorEmit(this, ['change', 'tctChange'], { value });\n                break;\n        }\n    };\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    updateTabs = () => {\n        const validTabPreUpdate = this.hasValidTab;\n        this.updateTabPaneProps();\n        this.setTabs();\n        // Check if we now have a valid tab\n        this.hasValidTab = this.tabs.some(tab => tab.value === this.value);\n        // Only move if we didn't have a valid tab before but do now\n        if (!validTabPreUpdate && this.hasValidTab) {\n            this.scheduledAfterRender.push(() => this.determineTabMove());\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={`${isSelected}`}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    renderTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onTctClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onTctClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.renderTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-tab-pane.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-tab-pane.entry.esm.js","sources":["src/components/q2-tab-pane/q2-tab-pane.scss?tag=q2-tab-pane&encapsulation=shadow","src/components/q2-tab-pane/q2-tab-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n.tab-pane[aria-hidden='true'] {\n    display: none;\n}\n\n.tab-pane:focus {\n    outline: none;\n    box-shadow: none;\n}\n\n","import { Component, ComponentInterface, Prop, Event, EventEmitter, Watch, h } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge/q2-badge';\n\n/**\n * @name Tab Pane\n * @category Display\n * @summary Use as a single tab within a Tab Container.\n */\n@Component({ tag: 'q2-tab-pane', shadow: true, styleUrl: 'q2-tab-pane.scss' })\nexport class Q2TabPane implements ComponentInterface {\n    // #region Public Property API\n\n    /** Adds a `q2-badge` component with the number provided right next to the tab pane label. */\n    @Prop({ reflect: true })\n    badgeCount: number;\n\n    /**\n     * The text that will be pronounced alongside `badgeCount` when the screen reader presents the tab.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    badgeDescription: string;\n\n    /** Allows you to specify the status of the tab, which is always visible. */\n    @Prop({ reflect: true })\n    badgeStatus: Q2Badge['status'];\n\n    /** Allows you to specify the color of the badge when the tab is active. */\n    @Prop({ reflect: true })\n    badgeTheme: Q2Badge['theme'];\n\n    /**\n     * Used by q2-tab-container to apply a unique id to each tab pane\n     * @private\n     */\n    @Prop()\n    guid: number;\n\n    /**\n     * Used by q2-tab-container to indicate the pane's index\n     * @private\n     */\n    @Prop()\n    index: number;\n\n    /**\n     * Serves as the text that will be visible in the tab control provided by `q2-tab-container`.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Used by q2-tab-container to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Used by q2-tab-container to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /** Serves as the pane's value. Should correspond to the `q2-tab-container` value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the badge count, description, theme, or status changes.\n     * @private\n     */\n    @Event({ bubbles: true })\n    badge: EventEmitter<boolean>;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('badgeCount')\n    @Watch('badgeDescription')\n    @Watch('badgeTheme')\n    @Watch('badgeStatus')\n    badgeObserver() {\n        this.badge.emit();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                id={`tab-pane-${this.guid}-${this.index}`}\n                class={`tab-pane${this.selected ? '' : ' hidden'}`}\n                role=\"tabpanel\"\n                tabindex=\"-1\"\n                aria-hidden={`${!this.selected}`}\n                aria-labelledby={`tab-${this.guid}-${this.index}`}\n            >\n                <slot />\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,uvBAAuvB;;MCS/vB,SAAS,GAAA,MAAA;;;;;;;IA8ElB,aAAa,GAAA;AACT,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;;;;IAMrB,MAAM,GAAA;AACF,QAAA,QACI,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,CAAA,SAAA,EAAY,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAA,CAAE,EACzC,KAAK,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,SAAS,CAAA,CAAE,EAClD,IAAI,EAAC,UAAU,EACf,QAAQ,EAAC,IAAI,EAAA,aAAA,EACA,CAAG,EAAA,CAAC,IAAI,CAAC,QAAQ,CAAE,CAAA,EAAA,iBAAA,EACf,CAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAEjD,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;;;;;;;"}
+{"version":3,"file":"q2-tab-pane.entry.esm.js","sources":["src/components/q2-tab-pane/q2-tab-pane.scss?tag=q2-tab-pane&encapsulation=shadow","src/components/q2-tab-pane/q2-tab-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n.tab-pane[aria-hidden='true'] {\n    display: none;\n}\n\n.tab-pane:focus {\n    outline: none;\n    box-shadow: none;\n}\n\n","import { Component, ComponentInterface, Prop, Element, Event, EventEmitter, Watch, h } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge/q2-badge';\nimport { hasValidAncestor } from '@/utils/component';\n\n/**\n * @name Tab Pane\n * @category Display\n * @summary Use as a single tab within a Tab Container.\n */\n@Component({ tag: 'q2-tab-pane', shadow: true, styleUrl: 'q2-tab-pane.scss' })\nexport class Q2TabPane implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a `q2-badge` component with the number provided right next to the tab pane label. */\n    @Prop({ reflect: true })\n    badgeCount: number;\n\n    /**\n     * The text that will be pronounced alongside `badgeCount` when the screen reader presents the tab.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    badgeDescription: string;\n\n    /** Allows you to specify the status of the tab, which is always visible. */\n    @Prop({ reflect: true })\n    badgeStatus: Q2Badge['status'];\n\n    /** Allows you to specify the color of the badge when the tab is active. */\n    @Prop({ reflect: true })\n    badgeTheme: Q2Badge['theme'];\n\n    /**\n     * Used by q2-tab-container to apply a unique id to each tab pane\n     * @private\n     */\n    @Prop()\n    guid: number;\n\n    /**\n     * Used by q2-tab-container to indicate the pane's index\n     * @private\n     */\n    @Prop()\n    index: number;\n\n    /**\n     * Serves as the text that will be visible in the tab control provided by `q2-tab-container`.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Used by q2-tab-container to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Used by q2-tab-container to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /** Serves as the pane's value. Should correspond to the `q2-tab-container` value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the badge count, description, theme, or status changes.\n     * @private\n     */\n    @Event({ bubbles: true })\n    badge: EventEmitter<boolean>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        hasValidAncestor(this.hostElement, 'q2-tab-container');\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('badgeCount')\n    @Watch('badgeDescription')\n    @Watch('badgeTheme')\n    @Watch('badgeStatus')\n    badgeObserver() {\n        this.badge.emit();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                id={`tab-pane-${this.guid}-${this.index}`}\n                class={`tab-pane${this.selected ? '' : ' hidden'}`}\n                role=\"tabpanel\"\n                tabindex=\"-1\"\n                aria-hidden={`${!this.selected}`}\n                aria-labelledby={`tab-${this.guid}-${this.index}`}\n            >\n                <slot />\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,YAAY,GAAG,uvBAAuvB;;MCU/vB,SAAS,GAAA,MAAA;;;;;;;IAgFlB,iBAAiB,GAAA;AACb,QAAA,gBAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,kBAAkB,CAAC;;;;IAU1D,aAAa,GAAA;AACT,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;;;;IAMrB,MAAM,GAAA;AACF,QAAA,QACI,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,CAAA,SAAA,EAAY,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAA,CAAE,EACzC,KAAK,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,SAAS,CAAA,CAAE,EAClD,IAAI,EAAC,UAAU,EACf,QAAQ,EAAC,IAAI,EAAA,aAAA,EACA,CAAG,EAAA,CAAC,IAAI,CAAC,QAAQ,CAAE,CAAA,EAAA,iBAAA,EACf,CAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAEjD,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;;;;;;;;"}

package/dist/q2-tecton-elements/q2-tab-pane.entry.js

@@ -1,13 +1,20 @@
-import { r as e, c as t, h as i } from "./index-CGkHOjh1.js";
+import { r as e, c as t, h as i, g as n } from "./index-CGkHOjh1.js";
 
-const n = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}";
+import { b as o } from "./component-DVxzK3WH.js";
 
-const a = class {
+const a = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}";
+
+const s = class {
   constructor(i) {
     e(this, i);
     this.badge = t(this, "badge", 7);
   }
   // #endregion
+  // #region Component Lifecycle Events
+  componentWillLoad() {
+    o(this.hostElement, "q2-tab-container");
+  }
+  // #endregion
   // #region Watchers
   badgeObserver() {
     this.badge.emit();
@@ -16,7 +23,7 @@ const a = class {
   // #region Render Methods
   render() {
     return i("div", {
-      key: "76630068cdab0cae437c6f7465a198a29a69e8d2",
+      key: "1f9e5f993a4d548dade126f8acf05e9c958eddc0",
       id: `tab-pane-${this.guid}-${this.index}`,
       class: `tab-pane${this.selected ? "" : " hidden"}`,
       role: "tabpanel",
@@ -24,9 +31,12 @@ const a = class {
       "aria-hidden": `${!this.selected}`,
       "aria-labelledby": `tab-${this.guid}-${this.index}`
     }, i("slot", {
-      key: "50e66071eb8ece4219e26a658dac682186839470"
+      key: "d5eeb1c72d8c416b91851a661d3aa4736d17f16b"
     }));
   }
+  get hostElement() {
+    return n(this);
+  }
   static get watchers() {
     return {
       badgeCount: [ "badgeObserver" ],
@@ -37,8 +47,8 @@ const a = class {
   }
 };
 
-a.style = n;
+s.style = a;
 
-export { a as q2_tab_pane };
+export { s as q2_tab_pane };
 //# sourceMappingURL=q2-tab-pane.entry.esm.js.map
 //# sourceMappingURL=q2-tab-pane.entry.js.map

package/dist/q2-tecton-elements/q2-tab-pane.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2TabPaneCss","Q2TabPane","badgeObserver","this","badge","emit","render","h","key","id","guid","index","class","selected","role","tabindex"],"sources":["src/components/q2-tab-pane/q2-tab-pane.scss?tag=q2-tab-pane&encapsulation=shadow","src/components/q2-tab-pane/q2-tab-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n.tab-pane[aria-hidden='true'] {\n    display: none;\n}\n\n.tab-pane:focus {\n    outline: none;\n    box-shadow: none;\n}\n\n","import { Component, ComponentInterface, Prop, Event, EventEmitter, Watch, h } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge/q2-badge';\n\n/**\n * @name Tab Pane\n * @category Display\n * @summary Use as a single tab within a Tab Container.\n */\n@Component({ tag: 'q2-tab-pane', shadow: true, styleUrl: 'q2-tab-pane.scss' })\nexport class Q2TabPane implements ComponentInterface {\n    // #region Public Property API\n\n    /** Adds a `q2-badge` component with the number provided right next to the tab pane label. */\n    @Prop({ reflect: true })\n    badgeCount: number;\n\n    /**\n     * The text that will be pronounced alongside `badgeCount` when the screen reader presents the tab.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    badgeDescription: string;\n\n    /** Allows you to specify the status of the tab, which is always visible. */\n    @Prop({ reflect: true })\n    badgeStatus: Q2Badge['status'];\n\n    /** Allows you to specify the color of the badge when the tab is active. */\n    @Prop({ reflect: true })\n    badgeTheme: Q2Badge['theme'];\n\n    /**\n     * Used by q2-tab-container to apply a unique id to each tab pane\n     * @private\n     */\n    @Prop()\n    guid: number;\n\n    /**\n     * Used by q2-tab-container to indicate the pane's index\n     * @private\n     */\n    @Prop()\n    index: number;\n\n    /**\n     * Serves as the text that will be visible in the tab control provided by `q2-tab-container`.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Used by q2-tab-container to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Used by q2-tab-container to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /** Serves as the pane's value. Should correspond to the `q2-tab-container` value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the badge count, description, theme, or status changes.\n     * @private\n     */\n    @Event({ bubbles: true })\n    badge: EventEmitter<boolean>;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('badgeCount')\n    @Watch('badgeDescription')\n    @Watch('badgeTheme')\n    @Watch('badgeStatus')\n    badgeObserver() {\n        this.badge.emit();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                id={`tab-pane-${this.guid}-${this.index}`}\n                class={`tab-pane${this.selected ? '' : ' hidden'}`}\n                role=\"tabpanel\"\n                tabindex=\"-1\"\n                aria-hidden={`${!this.selected}`}\n                aria-labelledby={`tab-${this.guid}-${this.index}`}\n            >\n                <slot />\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAe;;MCSRC,IAAS;;;;;;;EA8ElB,aAAAC;IACIC,KAAKC,MAAMC;;;;EAMf,MAAAC;IACI,OACIC,EACI;MAAAC,KAAA;MAAAC,IAAI,YAAYN,KAAKO,QAAQP,KAAKQ;MAClCC,OAAO,WAAWT,KAAKU,WAAW,KAAK;MACvCC,MAAK;MACLC,UAAS;MAAI,eACA,IAAIZ,KAAKU;MAAU,mBACf,OAAOV,KAAKO,QAAQP,KAAKQ;OAE1CJ,EAAQ;MAAAC,KAAA","ignoreList":[]}
+{"version":3,"names":["q2TabPaneCss","Q2TabPane","componentWillLoad","hasValidAncestor","this","hostElement","badgeObserver","badge","emit","render","h","key","id","guid","index","class","selected","role","tabindex"],"sources":["src/components/q2-tab-pane/q2-tab-pane.scss?tag=q2-tab-pane&encapsulation=shadow","src/components/q2-tab-pane/q2-tab-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n.tab-pane[aria-hidden='true'] {\n    display: none;\n}\n\n.tab-pane:focus {\n    outline: none;\n    box-shadow: none;\n}\n\n","import { Component, ComponentInterface, Prop, Element, Event, EventEmitter, Watch, h } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge/q2-badge';\nimport { hasValidAncestor } from '@/utils/component';\n\n/**\n * @name Tab Pane\n * @category Display\n * @summary Use as a single tab within a Tab Container.\n */\n@Component({ tag: 'q2-tab-pane', shadow: true, styleUrl: 'q2-tab-pane.scss' })\nexport class Q2TabPane implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a `q2-badge` component with the number provided right next to the tab pane label. */\n    @Prop({ reflect: true })\n    badgeCount: number;\n\n    /**\n     * The text that will be pronounced alongside `badgeCount` when the screen reader presents the tab.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    badgeDescription: string;\n\n    /** Allows you to specify the status of the tab, which is always visible. */\n    @Prop({ reflect: true })\n    badgeStatus: Q2Badge['status'];\n\n    /** Allows you to specify the color of the badge when the tab is active. */\n    @Prop({ reflect: true })\n    badgeTheme: Q2Badge['theme'];\n\n    /**\n     * Used by q2-tab-container to apply a unique id to each tab pane\n     * @private\n     */\n    @Prop()\n    guid: number;\n\n    /**\n     * Used by q2-tab-container to indicate the pane's index\n     * @private\n     */\n    @Prop()\n    index: number;\n\n    /**\n     * Serves as the text that will be visible in the tab control provided by `q2-tab-container`.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Used by q2-tab-container to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Used by q2-tab-container to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /** Serves as the pane's value. Should correspond to the `q2-tab-container` value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the badge count, description, theme, or status changes.\n     * @private\n     */\n    @Event({ bubbles: true })\n    badge: EventEmitter<boolean>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        hasValidAncestor(this.hostElement, 'q2-tab-container');\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('badgeCount')\n    @Watch('badgeDescription')\n    @Watch('badgeTheme')\n    @Watch('badgeStatus')\n    badgeObserver() {\n        this.badge.emit();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                id={`tab-pane-${this.guid}-${this.index}`}\n                class={`tab-pane${this.selected ? '' : ' hidden'}`}\n                role=\"tabpanel\"\n                tabindex=\"-1\"\n                aria-hidden={`${!this.selected}`}\n                aria-labelledby={`tab-${this.guid}-${this.index}`}\n            >\n                <slot />\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAe;;MCURC,IAAS;;;;;;;EAgFlB,iBAAAC;IACIC,EAAiBC,KAAKC,aAAa;;;;EAUvC,aAAAC;IACIF,KAAKG,MAAMC;;;;EAMf,MAAAC;IACI,OACIC,EACI;MAAAC,KAAA;MAAAC,IAAI,YAAYR,KAAKS,QAAQT,KAAKU;MAClCC,OAAO,WAAWX,KAAKY,WAAW,KAAK;MACvCC,MAAK;MACLC,UAAS;MAAI,eACA,IAAId,KAAKY;MAAU,mBACf,OAAOZ,KAAKS,QAAQT,KAAKU;OAE1CJ,EAAQ;MAAAC,KAAA","ignoreList":[]}

package/dist/q2-tecton-elements/q2-tag.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-tag.entry.esm.js","sources":["src/components/q2-tag/q2-tag.scss?tag=q2-tag&encapsulation=shadow","src/components/q2-tag/q2-tag.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n    --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x, 30px)};\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n    --comp-tag-border-color: #{var-list(--tct-tag-border-color, transparent)};\n    background: var(--comp-tag-background);\n    color: var(--comp-tag-color);\n    border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 4px);\n    border-width: var-list(--tct-tag-border-width, 0);\n    border-style: var-list(--tct-tag-border-style, 0);\n    border-color: var(--comp-tag-border-color);\n    position: relative;\n\n    :host([theme='primary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-primary-background, --t-primary, #0079c1)};\n        --comp-tag-color: #{var-list(--tct-tag-primary-font-color, --t-primary-text, #ffffff)};\n        --comp-tag-border-color: #{var-list(--tct-tag-primary-border-color, --t-primary, #0079c1)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-tag-color: #{var-list(--tct-tag-secondary-font-color, --t-secondary-text, #141414)};\n        --comp-tag-border-color: #{var-list(--tct-tag-secondary-border-color, --t-secondary, #b3c2cc)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-tag-color: #{var-list(--tct-tag-tertiary-font-color, --t-tertiary-text, #141414)};\n        --comp-tag-border-color: #{var-list(--tct-tag-tertiary-border-color, --t-tertiary, #e8f5fc)};\n    }\n}\n\n.tag {\n    display: flex;\n    align-items: center;\n    width: max-content;\n    gap: 6px;\n    height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n\n    ::slotted(q2-icon[slot='decorator']) {\n        --tct-icon-size: 1em;\n    }\n\n    ::slotted(q2-badge[slot='decorator']) {\n        --tct-badge-height: 1em;\n        --tct-badge-line-height: 30px;\n    }\n}\n\n.tag.has-options {\n    padding-right: 6px;\n}\n\n.btn-wrapper {\n    --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n    --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    height: var(--comp-tag-clickable-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    right: var(--comp-tag-btn-offset);\n    top: var(--comp-tag-btn-offset);\n    cursor: pointer;\n}\n\nbutton {\n    height: var(--comp-tag-btn-size);\n    stroke: var(--comp-tag-color);\n    --tct-icon-stroke-primary: var(--comp-tag-color);\n    cursor: pointer;\n    border: 0;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    padding-right: 6px;\n    --tct-icon-size: 18px;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Method,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n/**\n * @name Tag\n * @category Display\n * @summary Use for displaying metadata labels or categories on content.\n * @slot decorator - An optional slot that supports either an [Icon](https://tecton.q2developer.com/design-system/q2-icon) or [Badge](https://tecton.q2developer.com/design-system/q2-badge) to be displayed with the tag content.\n * This is **not** available when using [Multiple Options](https://tecton.q2developer.com/design-system/q2-tag#multiple-options).\n */\n@Component({ tag: 'q2-tag', shadow: true, styleUrl: 'q2-tag.scss' })\nexport class Q2Tag implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownBtn: HTMLButtonElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    optionCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string = 'options';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /** The color of the element. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     * @deprecated Use 'tctClick' instead\n     */\n    @Event()\n    click: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     */\n    @Event()\n    tctClick: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initMutationObserver();\n        this.determineOptionCount();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.filterSlottedElements();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the tag to close the popover when options are provided and the popover is open.\n     * @testonly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.optionCount || !this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the tag to open the popover when options are provided and the popover is closed.\n     * @testonly\n     */\n    @Method()\n    async openPopover() {\n        if (!this.optionCount || this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates selecting an option matching the passed value.\n     *\n     * If the popover is closed, this will open it before selecting the option.\n     *\n     * If there are not options, or the passed value does not match any option's value, this method does nothing.\n     * @testonly\n     */\n    @Method()\n    async selectOption(value) {\n        if (!this.optionCount) return;\n        await this.openPopover();\n        await waitForNextPaint();\n        const allOptions = await this.optionList.getOptions();\n        const desiredOption = allOptions.find(option => option.value === value);\n        desiredOption?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    _togglePopover() {\n        const { dropdownBtn } = this;\n        dropdownBtn?.click();\n        dropdownBtn?.focus();\n        dropdownBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        const slot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const assignedElements = Array.from(slot?.assignedElements() || []);\n        if (!assignedElements.length) return;\n\n        const approvedElements = ['Q2-ICON', 'Q2-BADGE'];\n        assignedElements.forEach((element, index) => {\n            if (!approvedElements.includes(element.tagName) || index > 0) {\n                element.remove();\n            }\n        });\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        mirrorEmit(this, ['click', 'tctClick'], { value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            mirrorEmit(this, ['click', 'tctClick'], { value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            mirrorEmit(this, ['click', 'tctClick'], { value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.determineOptionCount();\n        this.filterSlottedElements();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { open } = this;\n        const wrapperClassNames = ['tag'];\n        if (this.optionCount) wrapperClassNames.push('has-options');\n        const shouldShowOptions = this.optionCount > 0;\n\n        return (\n            <Host>\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {shouldShowOptions ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                    aria-label={loc(this.label)}\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{loc(this.label)}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.renderHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>\n                                <slot name=\"decorator\" />\n                                {loc(this.label)}\n                            </div>\n                        </div>\n                    )}\n\n                    {shouldShowOptions && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            maxHeight={this.popoverMaxHeight}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-tag.entry.esm.js","sources":["src/components/q2-tag/q2-tag.scss?tag=q2-tag&encapsulation=shadow","src/components/q2-tag/q2-tag.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n    --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x, 30px)};\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n    --comp-tag-border-color: #{var-list(--tct-tag-border-color, transparent)};\n    background: var(--comp-tag-background);\n    color: var(--comp-tag-color);\n    border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 4px);\n    border-width: var-list(--tct-tag-border-width, 0);\n    border-style: var-list(--tct-tag-border-style, 0);\n    border-color: var(--comp-tag-border-color);\n    font-size: var(--tct-tag-font-size, inherit);\n    font-weight: var(--tct-tag-font-weight, inherit);\n    position: relative;\n\n    :host([theme='primary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-primary-background, --t-primary, #0079c1)};\n        --comp-tag-color: #{var-list(--tct-tag-primary-font-color, --t-primary-text, #ffffff)};\n        --comp-tag-border-color: #{var-list(--tct-tag-primary-border-color, --t-primary, #0079c1)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-tag-color: #{var-list(--tct-tag-secondary-font-color, --t-secondary-text, #141414)};\n        --comp-tag-border-color: #{var-list(--tct-tag-secondary-border-color, --t-secondary, #b3c2cc)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-tag-color: #{var-list(--tct-tag-tertiary-font-color, --t-tertiary-text, #141414)};\n        --comp-tag-border-color: #{var-list(--tct-tag-tertiary-border-color, --t-tertiary, #e8f5fc)};\n    }\n}\n\n.tag {\n    display: flex;\n    align-items: center;\n    width: max-content;\n    gap: 6px;\n    height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n\n    ::slotted(q2-icon[slot='decorator']) {\n        --tct-icon-size: 1em;\n        --tct-icon-stroke-primary: var(--tct-tag-decorator-icon-primary-stroke);\n        --tct-icon-stroke-secondary: var(--tct-tag-decorator-icon-secondary-stroke);\n    }\n\n    :host([theme=\"primary\"]) & ::slotted(q2-icon[slot='decorator']) {\n        --tct-icon-stroke-primary: var(--tct-tag-primary-decorator-icon-primary-stroke);\n        --tct-icon-stroke-secondary: var(--tct-tag-primary-decorator-icon-secondary-stroke);\n    }\n\n    ::slotted(q2-badge[slot='decorator']) {\n        --tct-badge-height: 1em;\n        --tct-badge-line-height: 30px;\n    }\n}\n\n.tag.has-options {\n    padding-right: 6px;\n}\n\n.btn-wrapper {\n    --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n    --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    height: var(--comp-tag-clickable-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    right: var(--comp-tag-btn-offset);\n    top: var(--comp-tag-btn-offset);\n    cursor: pointer;\n}\n\nbutton {\n    height: var(--comp-tag-btn-size);\n    stroke: var(--comp-tag-color);\n    --tct-icon-stroke-primary: var(--comp-tag-color);\n    cursor: pointer;\n    border: 0;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    padding-right: 6px;\n    --tct-icon-size: 18px;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Method,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n/**\n * @name Tag\n * @category Display\n * @summary Use for displaying metadata labels or categories on content.\n * @slot decorator - An optional slot that supports either an [Icon](https://tecton.q2developer.com/design-system/q2-icon) or [Badge](https://tecton.q2developer.com/design-system/q2-badge) to be displayed with the tag content.\n * This is **not** available when using [Multiple Options](https://tecton.q2developer.com/design-system/q2-tag#multiple-options).\n */\n@Component({ tag: 'q2-tag', shadow: true, styleUrl: 'q2-tag.scss' })\nexport class Q2Tag implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownBtn: HTMLButtonElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    optionCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string = 'options';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /** The color of the element. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     * @deprecated Use 'tctClick' instead\n     */\n    @Event()\n    click: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     */\n    @Event()\n    tctClick: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initMutationObserver();\n        this.determineOptionCount();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.filterSlottedElements();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the tag to close the popover when options are provided and the popover is open.\n     * @testonly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.optionCount || !this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the tag to open the popover when options are provided and the popover is closed.\n     * @testonly\n     */\n    @Method()\n    async openPopover() {\n        if (!this.optionCount || this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates selecting an option matching the passed value.\n     *\n     * If the popover is closed, this will open it before selecting the option.\n     *\n     * If there are not options, or the passed value does not match any option's value, this method does nothing.\n     * @testonly\n     */\n    @Method()\n    async selectOption(value) {\n        if (!this.optionCount) return;\n        await this.openPopover();\n        await waitForNextPaint();\n        const allOptions = await this.optionList.getOptions();\n        const desiredOption = allOptions.find(option => option.value === value);\n        desiredOption?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    _togglePopover() {\n        const { dropdownBtn } = this;\n        dropdownBtn?.click();\n        dropdownBtn?.focus();\n        dropdownBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        const slot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const assignedElements = Array.from(slot?.assignedElements() || []);\n        if (!assignedElements.length) return;\n\n        const approvedElements = ['Q2-ICON', 'Q2-BADGE'];\n        assignedElements.forEach((element, index) => {\n            if (!approvedElements.includes(element.tagName) || index > 0) {\n                element.remove();\n            }\n        });\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        mirrorEmit(this, ['click', 'tctClick'], { value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            mirrorEmit(this, ['click', 'tctClick'], { value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            mirrorEmit(this, ['click', 'tctClick'], { value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.determineOptionCount();\n        this.filterSlottedElements();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { open } = this;\n        const wrapperClassNames = ['tag'];\n        if (this.optionCount) wrapperClassNames.push('has-options');\n        const shouldShowOptions = this.optionCount > 0;\n\n        return (\n            <Host>\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {shouldShowOptions ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                    aria-label={loc(this.label)}\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{loc(this.label)}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.renderHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>\n                                <slot name=\"decorator\" />\n                                {loc(this.label)}\n                            </div>\n                        </div>\n                    )}\n\n                    {shouldShowOptions && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            maxHeight={this.popoverMaxHeight}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}