npm - q2-tecton-elements - Versions diffs - 1.66.2 → 1.67.1 - Mend

q2-tecton-elements 1.66.2 → 1.67.1

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

Files changed (694) hide show

package/dist/components/q2-tab-container.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './q2-btn2.js';
 import { d as defineCustomElement$3 } from './q2-icon2.js';
 import { d as defineCustomElement$2 } from './q2-loading2.js';
-const q2TabContainerCss = "*{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 q2TabContainerCss = "*{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));line-height:var(--tct-tab-line-height, 20px);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, 14px);line-height:var(--tct-tab-section-line-height, 18px);padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:focus-visible{box-shadow:var(--tct-tab-focus-visible-box-shadow, var(--const-double-focus-ring))}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)));text-decoration:var(--tct-tab-active-text-decoration, none)}: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 Q2TabContainer$1 = /*@__PURE__*/ proxyCustomElement(class Q2TabContainer extends HTMLElement {
     constructor() {
@@ -274,7 +274,7 @@ const Q2TabContainer$1 = /*@__PURE__*/ proxyCustomElement(class Q2TabContainer e
         return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${description}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: theme, status: tab.badgeStatus })));
     }
     render() {
-        return (h(Fragment, { key: '2181b2505b4d48d9812b61d5414264425ff7f4af' }, h("div", { key: '0901678c9f074277414bf0dfd1b73cb3ec93cd6f', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '3cc265f40d308947e07bb2ca7cf2496bf1f74d44' }, h("div", { key: '8b0606af29da80fb969e94b2708077bf2e4ef7e2', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: '2412d226cf903beae013965e345f0f56ca9991d6', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: 'edf2bf63eebe24832e529178fa185ad27c3a45ba', class: "btn-left", hidden: !this.showScrollLeft, onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '7900b5426d1ec51880fe8c36d33a59873b1be508', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: '001628dae8b16b4c5aff651c8515cce25d08bbf2', class: "btn-right", hidden: !this.showScrollRight, onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'f4579ca37dd0e2908e3f68dc60eb923d4a3f314e', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '53efc8ffaaf29dc1dfd9b86ee4105a87350aebfb', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '1e3d76467f667d04a488aacd5a51b641a0acbabc', class: "tab-content" }, h("slot", { key: '4384593fb9579c4187c50eee288517aba22c9ace', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '1913175c15aecb5bf14cd1dbdc35e9c987fde9d4' }, h("div", { key: '635d91af2197e6ef1078cdc9bd6fcf8d4b135675', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '138d7b25a3644ccf9b14934a06ba515e04770bac' }, h("div", { key: 'a5e723731fb2c42a0c280cc15d7220a64f67b60b', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: 'bd13d0b8412a08277b112473aa4664e287bce7c4', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: '7887ac9fcf831190abc8610cb6271839a662efd2', class: "btn-left", hidden: !this.showScrollLeft, onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'c7ef1331d91747e4c23f0ecdc48600ae2ca0d2ad', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: 'a8564bd1e158bef750300112d024933600f7f6ac', class: "btn-right", hidden: !this.showScrollRight, onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '16dfc165369e2cc344d76e817b879d8c02d47b23', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '660241dfc441a2f55328156e23c601061ff89c17', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '54fc457ab57a00bd13eac3ebdb019bd49bbd7a71', class: "tab-content" }, h("slot", { key: '479a982a16116bc5e82e28f171387c07a33bcb9c', onSlotchange: () => this.onSlotChange() }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-tab-container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-tab-container.js","mappings":";;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,ynLAAynL;;MCmCtoLA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAA,WAAA,CAAA;AAD3B,IAAA,WAAA,GAAA;;;;;;;;AAII,QAAA,IAAI,CAAA,IAAA,GAAW,UAAU,EAAE;AAC3B,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;QAC5B,IAAY,CAAA,YAAA,GAAW,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE;AAI/C,QAAA,IAAoB,CAAA,oBAAA,GAAmB,EAAE;;;AAYzC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAGxB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAGzB,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAG9B,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAG/B,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;;AA8BhC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAuJxB,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;YACpB,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE;YACvB,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,WAAW;AACjE,YAAA,IAAI,CAAC,aAAa,GAAG,WAAW,GAAG,WAAW;AAC9C,YAAA,IAAI,CAAC,cAAc,GAAG,UAAU,GAAG,CAAC;AACpC,YAAA,IAAI,CAAC,eAAe,GAAG,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,WAAW;AAC5E,SAAC;QASD,IAAA,CAAA,iBAAiB,GAAG,CAAC,KAAa,EAAE,SAA6C,KAAI;YACjF,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC;AAEhE,YAAA,IAAI,QAAQ;YACZ,QAAQ,SAAS;AACb,gBAAA,KAAK,MAAM;AACP,oBAAA,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;oBACpD;AAEJ,gBAAA,KAAK,MAAM;oBACP,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC;oBACjC;AAEJ,gBAAA,KAAK,OAAO;oBACR,QAAQ,GAAG,CAAC;oBACZ;AAEJ,gBAAA,KAAK,MAAM;oBACP,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;oBAC/B;;YAGR,IAAI,KAAK,KAAK,QAAQ;gBAAE;AAExB,YAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC;AAClC,SAAC;QAED,IAAA,CAAA,SAAS,GAAG,CAAC,KAAa,EAAE,WAAuB,GAAA,IAAI,KAAI;YACvD,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK;AAC3C,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAoB,CAAgB,aAAA,EAAA,YAAY,CAAI,EAAA,CAAA,CAAC;YACtG,IAAI,WAAW,EAAE;gBACb,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;;AAG7C,YAAA,MAAM,IAAI,GAAG,UAAU,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,CAAC;AACrE,YAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;gBACtB,IAAI;AACJ,gBAAA,QAAQ,EAAE,QAAQ;AACrB,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,SAA4B,KAAI;YAChD,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,WAAW;YACjE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,CAAC;YAC7C,IAAI,YAAY,GAAW,CAAC;AAC5B,YAAA,IAAI,SAAS,KAAK,MAAM,EAAE;AACtB,gBAAA,YAAY,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;;iBACtD;AACH,gBAAA,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,UAAU,GAAG,WAAW,CAAC,CAAC;;AAExF,YAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AACzE,SAAC;AAED,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAChB,IAAI,CAAC,gBAAgB,EAAE;AAC3B,SAAC;AAED,QAAA,IAAA,CAAA,UAAU,GAAG,CAAC,KAAiB,KAAI;YAC/B,MAAM,WAAW,GAAK,KAAK,CAAC,MAA4B,CAAC,OAAO,CAAC,oBAAoB;iBAChF,OAAO,CAAC,KAAK;AAClB,YAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,KAAK,WAAW;AACpD,YAAA,IAAI,iBAAiB;gBAAE;YAEvB,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE;AACtC,gBAAA,KAAK,EAAE,WAAW;AACrB,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAoB,KAAI;YACpC,MAAM,KAAK,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,KAAK;AACzD,YAAA,QAAQ,KAAK,CAAC,GAAG;AACb,gBAAA,KAAK,YAAY;oBACb,KAAK,CAAC,cAAc,EAAE;AACtB,oBAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC;oBACrC;AAEJ,gBAAA,KAAK,WAAW;oBACZ,KAAK,CAAC,cAAc,EAAE;AACtB,oBAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC;oBACrC;AAEJ,gBAAA,KAAK,MAAM;oBACP,KAAK,CAAC,cAAc,EAAE;AACtB,oBAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,OAAO,CAAC;oBACtC;AAEJ,gBAAA,KAAK,KAAK;oBACN,KAAK,CAAC,cAAc,EAAE;AACtB,oBAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC;oBACrC;AAEJ,gBAAA,KAAK,OAAO;AACZ,gBAAA,KAAK,OAAO;oBACR,KAAK,CAAC,cAAc,EAAE;AACtB,oBAAA,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC;oBACpD;;AAEZ,SAAC;AAMD,QAAA,IAAO,CAAA,OAAA,GAAG,MAAK;YACX,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM;gBACxG,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE;gBAClC,KAAK;gBACL,UAAU;gBACV,gBAAgB;gBAChB,UAAU;gBACV,WAAW;AACd,aAAA,CAAC,CAAC;AACP,SAAC;AAED,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;YACtB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,KAAI;gBACjC,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,gBAAgB;AAClD,gBAAA,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;AACpB,gBAAA,GAAG,CAAC,KAAK,GAAG,KAAK;AACrB,aAAC,CAAC;AACN,SAAC;AAED,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACd,YAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW;YAC1C,IAAI,CAAC,kBAAkB,EAAE;YACzB,IAAI,CAAC,OAAO,EAAE;;YAEd,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;;AAElE,YAAA,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,EAAE;AACxC,gBAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;;AAErE,SAAC;AAyGJ;;;IA7WG,oBAAoB,GAAA;;QAChB,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AACjC,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI;QAC1B,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AACnC,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;;IAGhC,iBAAiB,GAAA;AACb,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC,EAAE;YACzE,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;;AAExE,QAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;AAC9D,QAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AACzE,QAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ;AAChC,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACvE,IAAI,CAAC,UAAU,EAAE;;IAGrB,gBAAgB,GAAA;;AACZ,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC;QAC9C,IAAI,CAAC,gBAAgB,EAAE;AACvB,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;AAC/B,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;;IAGjE,kBAAkB,GAAA;AACd,QAAA,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC;AAC7C,QAAA,IAAI,CAAC,oBAAoB,GAAG,EAAE;AAC9B,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;;;IAOvB,OAAO,GAAA;QACH,IAAI,CAAC,OAAO,EAAE;;AAIlB,IAAA,oBAAoB,CAAC,KAAkB,EAAA;AACnC,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;YACjE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;;;AAKvC,IAAA,OAAO,CAAC,KAAiB,EAAA;QACrB,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;QAClD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,gBAAgB,CAAC;AAC3E,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC;;IAI/B,QAAQ,GAAA;QACJ,IAAI,CAAC,gBAAgB,EAAE;;;;AAM3B;;;;AAIG;IAEH,MAAM,SAAS,CAAC,KAAa,EAAA;AACzB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,CAAA,gCAAA,EAAmC,KAAK,CAAA,EAAA,CAAI,CAAC;AACzG,QAAA,UAAgC,aAAhC,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAwB,KAAK,EAAE;;;;IAO9C,YAAY,GAAA;QACR,IAAI,CAAC,UAAU,EAAE;;IAIrB,aAAa,GAAA;QACT,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;QACjD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;AAChE,QAAA,IAAI,KAAK,GAAG,EAAE,EAAE;AACZ,YAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;;;;;AAO1E,IAAA,IAAI,gBAAgB,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE;;AAG3B,IAAA,IAAI,OAAO,GAAA;QACP,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC;;AAGjE,IAAA,IAAI,QAAQ,GAAA;QACR,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC9C,8BAA8B,CACjC;AAED,QAAA,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;AACvB,YAAA,OAAO,EAAE;;QAGb,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC;;IAWvE,gBAAgB,GAAA;QACZ,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QAChE,IAAI,KAAK,KAAK,EAAE;YAAE;AAClB,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;;IAsGhC,YAAY,GAAA;;QACR,OAAO,CAAA,EAAA,GAAA,MAAA,MAAM,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,YAAY,kDAAI;;;;IAqClD,SAAS,CAAC,GAAY,EAAE,KAAa,EAAA;AACjC,QAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,GAAG;AAC5B,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,KAAK,KAAK;QAClD,QACI,CAAA,CAAA,IAAA,EAAA,EAAI,IAAI,EAAC,cAAc,EAAA,EACnB,CAAA,CAAA,QAAA,EAAA,EACI,EAAE,EAAE,CAAA,IAAA,EAAO,IAAI,CAAC,IAAI,IAAI,KAAK,CAAA,CAAE,EACnB,YAAA,EAAA,KAAK,EACT,SAAA,EAAA,SAAS,EACjB,QAAQ,EAAE,UAAU,GAAG,CAAC,GAAG,EAAE,EAC7B,IAAI,EAAC,KAAK,EACK,eAAA,EAAA,CAAG,EAAA,UAAU,EAAE,EAC9B,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,SAAS,EAAE,IAAI,CAAC,YAAY,EAE3B,EAAA,GAAG,CAAC,UAAU,KAAK,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,UAAU,CAAC,CAC3E,CACR;;IAIb,kBAAkB,CAAC,GAAY,EAAE,UAAmB,EAAA;AAChD,QAAA,IAAI,KAAK;AACT,QAAA,IAAI,CAAC,GAAG,CAAC,WAAW,IAAI,UAAU;AAAE,YAAA,KAAK,GAAG,GAAG,CAAC,UAAU,IAAI,SAAS;AACvE,QAAA,IAAI,WAAW;QACf,IAAI,GAAG,CAAC,gBAAgB;AAAE,YAAA,WAAW,GAAG,GAAG,CAAC,GAAG,CAAC,gBAAgB,CAAC;aAC5D,IAAI,GAAG,CAAC,WAAW;AAAE,YAAA,WAAW,GAAG,GAAG,CAAC,CAAA,wBAAA,EAA2B,GAAG,CAAC,WAAW,CAAE,CAAA,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;;AACtG,YAAA,WAAW,GAAG,GAAG,CAAC,6BAA6B,CAAC;QAErD,QACI,CACI,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,gBAAgB,gBACV,GAAG,GAAG,CAAC,KAAK,CAAA,EAAA,EAAK,GAAG,CAAC,UAAU,CAAI,CAAA,EAAA,WAAW,CAAE,CAAA,EAAA,EAE3D,GAAG,CAAC,KAAK,EACV,CAAA,CAAA,UAAA,EAAA,EACI,KAAK,EAAE,GAAG,CAAC,UAAU,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,GAAG,CAAC,WAAW,EACzB,CAAA,CACA;;IAId,MAAM,GAAA;AACF,QAAA,QACI,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACL,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACrB,IAAI,CAAC,aAAa,KACf,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACL,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EACrB,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EACzB,CAAA,EACP,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EACtB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,EAC1B,CAAA,EAEP,CACI,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAChB,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAC5B,UAAU,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAA,EAE/C,CACI,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,aAAa,GACZ,CACN,EAET,CACI,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EACjB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,EAC7B,UAAU,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAA,EAEhD,CACI,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,cAAc,EAAA,CACb,CACN,CACF,CACd,EAED,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAClC,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,IAAI,EACvC,IAAI,EAAC,SAAS,EAAA,EAEb,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CACzD,CACH,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAAA,CAAI,CAC/C,CACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2TabContainer","__stencil_proxyCustomElement"],"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"],"version":3}
1	+ {"file":"q2-tab-container.js","mappings":"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","names":["Q2TabContainer","__stencil_proxyCustomElement"],"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 line-height: var-list(--tct-tab-line-height, 20px);\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, 14px);\n line-height: var-list(--tct-tab-section-line-height, 18px);\n padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n }\n\n &:focus-visible {\n box-shadow: var-list(--tct-tab-focus-visible-box-shadow, --const-double-focus-ring);\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 text-decoration: var-list(--tct-tab-active-text-decoration, none);\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"],"version":3}

package/dist/components/q2-tab-pane.js CHANGED Viewed

@@ -23,7 +23,7 @@ const Q2TabPane$1 = /*@__PURE__*/ proxyCustomElement(class Q2TabPane extends HTM
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '1f9e5f993a4d548dade126f8acf05e9c958eddc0', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: 'd5eeb1c72d8c416b91851a661d3aa4736d17f16b' })));
+        return (h("div", { key: '6550750c490f276b314f5e10cba438aa5f458657', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: 'bc8b8e38e3d2635f61ccc06830c095cc743c235a' })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-tag.js CHANGED Viewed

@@ -1,260 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, l as loc } from './index2.js';
-import { m as mirrorEmit } from './mirror-emit.js';
-import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet.js';
-import { d as defineCustomElement$5 } from './click-elsewhere2.js';
-import { d as defineCustomElement$4 } from './q2-icon2.js';
-import { d as defineCustomElement$3 } from './q2-option-list2.js';
-import { d as defineCustomElement$2 } from './q2-popover2.js';
-const q2TagCss = "*{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:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x, 30px)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));--comp-tag-border-color:var(--tct-tag-border-color, transparent);background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 4px)));border-width:var(--tct-tag-border-width, 0);border-style:var(--tct-tag-border-style, 0);border-color:var(--comp-tag-border-color);font-size:var(--tct-tag-font-size, inherit);font-weight:var(--tct-tag-font-weight, inherit);position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary, #0079c1));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff));--comp-tag-border-color:var(--tct-tag-primary-border-color, var(--t-primary, #0079c1))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary, #b3c2cc));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #141414));--comp-tag-border-color:var(--tct-tag-secondary-border-color, var(--t-secondary, #b3c2cc))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414));--comp-tag-border-color:var(--tct-tag-tertiary-border-color, var(--t-tertiary, #e8f5fc))}.tag{display:flex;align-items:center;width:max-content;gap:6px;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag ::slotted(q2-icon[slot=decorator]){--tct-icon-size:1em;--tct-icon-stroke-primary:var(--tct-tag-decorator-icon-primary-stroke);--tct-icon-stroke-secondary:var(--tct-tag-decorator-icon-secondary-stroke)}:host([theme=primary]) .tag ::slotted(q2-icon[slot=decorator]){--tct-icon-stroke-primary:var(--tct-tag-primary-decorator-icon-primary-stroke);--tct-icon-stroke-secondary:var(--tct-tag-primary-decorator-icon-secondary-stroke)}.tag ::slotted(q2-badge[slot=decorator]){--tct-badge-height:1em;--tct-badge-line-height:30px}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";
-const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class Q2Tag extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.click = createEvent(this, "click", 7);
-        this.tctClick = createEvent(this, "tctClick", 7);
-        var _a;
-        // #endregion
-        // #region Public Property API
-        /**
-         * Instructs the component to use the action sheet workflow for displaying its options.
-         *
-         * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
-         */
-        this.hoist = !!((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.useActionSheets);
-        /** Determines the label that is applied to the option list for accessibility purposes. */
-        this.optionListLabel = 'options';
-        /** Aligns the popover dropdown to the left or right side of the input field. */
-        this.popoverAlignment = 'right';
-        this.determineOptionCount = () => {
-            const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;
-            this.optionCount = numberOfOptions;
-        };
-        this.filterSlottedElements = () => {
-            if (!('HTMLSlotElement' in window))
-                return;
-            const slot = this.hostElement.shadowRoot.querySelector('slot[name="decorator"]');
-            const assignedElements = Array.from((slot === null || slot === void 0 ? void 0 : slot.assignedElements()) || []);
-            if (!assignedElements.length)
-                return;
-            const approvedElements = ['Q2-ICON', 'Q2-BADGE'];
-            assignedElements.forEach((element, index) => {
-                if (!approvedElements.includes(element.tagName) || index > 0) {
-                    element.remove();
-                }
-            });
-        };
-        this.handleButtonFocusout = async (event) => {
-            var _a;
-            const relatedTarget = event.relatedTarget;
-            if ((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget))
-                return;
-            if (this.hostElement.contains(relatedTarget))
-                return;
-            this.open = false;
-        };
-        this.handleChange = event => {
-            event.stopPropagation();
-            if (!this.optionCount)
-                return;
-            const { value } = event.detail;
-            mirrorEmit(this, ['click', 'tctClick'], { value });
-        };
-        this.handleClick = async (event) => {
-            event.stopPropagation();
-            this.popoverElement.controlElement = this.dropdownBtn;
-            if (shouldShowActionSheet(this)) {
-                const { value } = await showActionSheetList(this, event);
-                this.dropdownBtn.focus();
-                mirrorEmit(this, ['click', 'tctClick'], { value });
-            }
-            else {
-                await this.popoverElement.toggle();
-            }
-        };
-        this.handleKeydown = async (event) => {
-            const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';
-            if (isTabMetaOrCtrl)
-                return;
-            event.preventDefault();
-            this.popoverElement.controlElement = this.dropdownBtn;
-            if (shouldShowActionSheet(this, event)) {
-                const { value } = await showActionSheetList(this, event);
-                this.dropdownBtn.focus();
-                mirrorEmit(this, ['click', 'tctClick'], { value });
-            }
-            else {
-                this.optionList.handleExternalKeydown(event);
-            }
-        };
-        this.handleWrapperClick = () => {
-            this.dropdownBtn.focus();
-            this.dropdownBtn.click();
-        };
-        this.initMutationObserver = () => {
-            if (!('MutationObserver' in window))
-                return;
-            const observer = new MutationObserver(this.onMutationObserved);
-            observer.observe(this.hostElement, { childList: true, attributes: true });
-            this.mutationObserver = observer;
-        };
-        this.onClickElsewhere = (event) => {
-            const target = event.target;
-            if (target.localName === 'click-elsewhere') {
-                event.stopPropagation();
-                const { popoverElement } = this;
-                if (!popoverElement)
-                    return;
-                popoverElement.open = false;
-            }
-        };
-        this.onMutationObserved = () => {
-            this.determineOptionCount();
-            this.filterSlottedElements();
-        };
-    }
-    // #endregion
-    // #region Component Lifecycle Events
-    disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.mutationObserver = null;
-    }
-    componentWillLoad() {
-        this.initMutationObserver();
-        this.determineOptionCount();
-    }
-    componentDidLoad() {
-        overrideFocus(this.hostElement);
-        this.filterSlottedElements();
-    }
-    // #endregion
-    // #region Listeners
-    delegateFocus(event) {
-        if (!isEventFromElement(event, this.hostElement))
-            return;
-        if (!this.optionCount)
-            return;
-        this.dropdownBtn.focus();
-    }
-    popoverStateHandler({ detail: { open } }) {
-        if (this.open !== open)
-            this.open = open;
-        if (open)
-            return;
-        this.optionList.setActiveElement(null);
-    }
-    // #endregion
-    // #region Public Methods API
-    /**
-     * Emulates clicking the tag to close the popover when options are provided and the popover is open.
-     * @testonly
-     */
-    async closePopover() {
-        if (!this.optionCount || !this.open)
-            return;
-        this._togglePopover();
-    }
-    /**
-     * Emulates clicking the tag to open the popover when options are provided and the popover is closed.
-     * @testonly
-     */
-    async openPopover() {
-        if (!this.optionCount || this.open)
-            return;
-        this._togglePopover();
-    }
-    /**
-     * Emulates selecting an option matching the passed value.
-     *
-     * If the popover is closed, this will open it before selecting the option.
-     *
-     * If there are not options, or the passed value does not match any option's value, this method does nothing.
-     * @testonly
-     */
-    async selectOption(value) {
-        if (!this.optionCount)
-            return;
-        await this.openPopover();
-        await waitForNextPaint();
-        const allOptions = await this.optionList.getOptions();
-        const desiredOption = allOptions.find(option => option.value === value);
-        desiredOption === null || desiredOption === void 0 ? void 0 : desiredOption.click();
-    }
-    // #endregion
-    // #region Local Methods
-    _togglePopover() {
-        const { dropdownBtn } = this;
-        dropdownBtn === null || dropdownBtn === void 0 ? void 0 : dropdownBtn.click();
-        dropdownBtn === null || dropdownBtn === void 0 ? void 0 : dropdownBtn.focus();
-        dropdownBtn.dispatchEvent(new FocusEvent('focus'));
-    }
-    // #endregion
-    // #region Render Methods
-    renderHiddenElement() {
-        return (h("div", { id: "option-description", class: "sr", "aria-hidden": "true" }, loc('tecton.element.optionList.optionCount', [this.optionCount])));
-    }
-    render() {
-        const { open } = this;
-        const wrapperClassNames = ['tag'];
-        if (this.optionCount)
-            wrapperClassNames.push('has-options');
-        const shouldShowOptions = this.optionCount > 0;
-        return (h(Host, { key: '2ce592e9fc8db8d547cad71623270837ec0539d6' }, h("click-elsewhere", { key: 'b0a0ad314e84ccae1e06b197bc6fec8f1c333349', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: 'd67e1d087a62530ef3c013f070ae522531acd508', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '6c2484d7110eeff81dfebef4c05dec99adffe935', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: 'db0c912240b4e2425c16bce894abb8be42ab67e2' })))))));
-    }
-    get hostElement() { return this; }
-    static get style() { return q2TagCss; }
-}, [1, "q2-tag", {
-        "hoist": [4],
-        "label": [513],
-        "open": [1540],
-        "optionListLabel": [1, "option-list-label"],
-        "popoverAlignment": [1025, "popover-alignment"],
-        "popoverDirection": [1, "popover-direction"],
-        "popoverMaxHeight": [2, "popover-max-height"],
-        "popoverMinHeight": [2, "popover-min-height"],
-        "theme": [513],
-        "optionCount": [32],
-        "closePopover": [64],
-        "openPopover": [64],
-        "selectOption": [64]
-    }, [[0, "focus", "delegateFocus"], [0, "popoverStateChanged", "popoverStateHandler"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["q2-tag", "click-elsewhere", "q2-icon", "q2-option-list", "q2-popover"];
-    components.forEach(tagName => { switch (tagName) {
-        case "q2-tag":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Q2Tag$1);
-            }
-            break;
-        case "click-elsewhere":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "q2-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "q2-option-list":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "q2-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { Q as Q2Tag$1, d as defineCustomElement$1 } from './q2-tag2.js';
 const Q2Tag = Q2Tag$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/q2-tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-tag.js","mappings":"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","names":["Q2Tag","__stencil_proxyCustomElement"],"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"],"version":3}
1	+ {"file":"q2-tag.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}