q2-tecton-elements 1.13.0-alpha.0 → 1.13.2

package/dist/q2-tecton-elements/{p-ac859fcc.entry.js → p-6fec9235.entry.js}

@@ -1 +1 @@
-import{r as t,c as a,h as i,F as r,g as e}from"./p-080839ed.js";import{a as o,c as s,l as n,i as c,o as l}from"./p-37aba2a4.js";o();const h=class{constructor(i){t(this,i),this.change=a(this,"change",7),this.settled=a(this,"settled",7),this.noPrint=!1,this.guid=s(),this.scheduledAfterRender=[],this.lastScrolled=new Date(null).getTime(),this.hasLeft=!1,this.hasRight=!1,this.scrollEnabled=!1,this.showScrollLeft=!1,this.showScrollRight=!1,this.updateTabData=()=>{this.updateTabPaneProps(),this.setTabs()},this.updateTabPaneProps=()=>{this.tabPanes.forEach(((t,a)=>{t.selected=t.value===this.selectedTabValue,t.guid=this.guid,t.index=a}))},this.setTabs=()=>{this.tabs=this.tabPanes.map((({label:t,value:a})=>({label:t&&n(t)||"",value:a})))},this.onTabClick=t=>{this.value===t.target.dataset.value||this.change.emit({value:t.target.dataset.value})},this.onTabKeyDown=t=>{const a=t.target.dataset.value;switch(t.key){case"ArrowRight":t.preventDefault(),this.moveToAdjacentTab(a,"next");break;case"ArrowLeft":t.preventDefault(),this.moveToAdjacentTab(a,"prev");break;case"Home":t.preventDefault(),this.moveToAdjacentTab(a,"first");break;case"End":t.preventDefault(),this.moveToAdjacentTab(a,"last");break;case"Space":case"Enter":t.preventDefault(),this.change.emit({value:a})}},this.moveToAdjacentTab=(t,a)=>{let i,r=this.tabs.map((({value:t})=>t)).indexOf(t);switch(a){case"next":i=Math.min(r+1,this.tabs.length-1);break;case"prev":i=Math.max(r-1,0);break;case"first":i=0;break;case"last":i=this.tabs.length-1}r!==i&&this.moveFocus(i,!1)},this.moveFocus=(t,a=!0)=>{const i=this.listElement.querySelector(`[data-value="${this.tabs[t].value}"]`);return i.focus({preventScroll:a}),this.listElement.scrollTo({left:i.offsetLeft-this.listElement.clientWidth/2,behavior:"smooth"}),i},this.checkScrollState=()=>{if(!this.listElement)return;const{scrollLeft:t,scrollWidth:a,clientWidth:i}=this.listElement;this.scrollEnabled=a>i,this.showScrollLeft=!!t,this.showScrollRight=a!==t+i},this.onScrollBtnClick=t=>{const a=Math.floor(this.listElement.clientWidth/2);this.listElement.scrollBy({left:"left"===t?-a:a,behavior:"smooth"})},this.onSlotChange=()=>{this.checkScrollState()}}resizeIframe(){var t,a;return null===(a=null===(t=window.TectonElements)||void 0===t?void 0:t.resizeIframe)||void 0===a?void 0:a.call(t)}get tabPanes(){const t=this.hostElement.querySelectorAll("q2-tab-pane, tecton-tab-pane");return 0===t.length?[]:Array.from(t).filter((t=>t.name===this.name))}get selectedTabValue(){return this.value||this.tabPanes[0].value||""}get tabList(){return this.hostElement.shadowRoot.querySelector(".tab-list")}defaultChangeHandler(t){t.target!==this.hostElement||this.hostElement.onchange||(this.value=t.detail.value)}onResize(){this.checkScrollState()}onFocus(t){if(!c(t,this.hostElement))return;const a=this.tabs.findIndex((t=>t.value===this.selectedTabValue));this.moveFocus(a)}componentWillLoad(){const t=new MutationObserver(this.updateTabData);t.observe(this.hostElement,{childList:!0,attributes:!0}),this.mutationObserver=t,this.resizeObserver=new ResizeObserver((()=>this.checkScrollState())),this.updateTabData()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t())),this.scheduledAfterRender=[],this.settled.emit()}componentDidLoad(){this.resizeObserver.observe(this.listElement),this.checkScrollState(),l(this.hostElement);const t=this.tabs.findIndex((t=>t.value===this.value));this.scheduledAfterRender.push((()=>{const a=this.moveFocus(Math.max(t,0));this.value=a.dataset.value,a.blur()}))}disconnectedCallback(){this.resizeObserver.disconnect(),this.mutationObserver.disconnect(),this.mutationObserver=null}valueObserver(){this.updateTabData(),this.scheduledAfterRender.push(this.resizeIframe);const t=this.tabs.findIndex((t=>t.value===this.value));t>-1&&this.scheduledAfterRender.push((()=>this.moveFocus(t,!1)))}nameObserver(){this.updateTabData()}render(){return i(r,null,i("div",{class:"tab-container"},this.scrollEnabled&&i(r,null,i("div",{class:"gradient-left",hidden:!this.showScrollLeft}),i("div",{class:"gradient-right",hidden:!this.showScrollRight}),i("q2-btn",{class:"btn-left",hidden:!this.showScrollLeft,onClick:()=>this.onScrollBtnClick("left")},i("q2-icon",{type:"chevron-left"})),i("q2-btn",{class:"btn-right",hidden:!this.showScrollRight,onClick:()=>this.onScrollBtnClick("right")},i("q2-icon",{type:"chevron-right"}))),i("ul",{onScroll:this.checkScrollState,ref:t=>this.listElement=t,class:this.noPrint?"no-print":null,role:"tablist"},this.tabs.map(((t,a)=>this.generateTab(t,a))))),i("div",{class:"tab-content"},i("slot",{onSlotchange:()=>this.onSlotChange()})))}generateTab(t,a){const{label:r,value:e}=t,o=this.selectedTabValue===e;return i("li",{role:"presentation"},i("button",{id:`tab-${this.guid}-${a}`,"data-value":e,"test-id":"tabLink",tabIndex:o?0:-1,role:"tab","aria-selected":o?"true":void 0,"aria-controls":`tab-pane-${this.guid}-${a}`,onClick:this.onTabClick,onKeyDown:this.onTabKeyDown},r))}get hostElement(){return e(this)}static get watchers(){return{value:["valueObserver"],name:["nameObserver"]}}};h.style="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1, 5px))));list-style:none;border-bottom:1px solid 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-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-2, 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:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));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-color: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-color: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-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 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-2, 10px)) 0;padding:var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)))}.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 right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg: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{left:0}.btn-right{right:0}";export{h as q2_tab_container}
+import{r as t,c as a,h as i,F as r,g as e}from"./p-2caa89fd.js";import{b as o,c as s,l as n,i as c,o as l}from"./p-dd02cf8d.js";o();const h=class{constructor(i){t(this,i),this.change=a(this,"change",7),this.settled=a(this,"settled",7),this.noPrint=!1,this.guid=s(),this.scheduledAfterRender=[],this.lastScrolled=new Date(null).getTime(),this.hasLeft=!1,this.hasRight=!1,this.scrollEnabled=!1,this.showScrollLeft=!1,this.showScrollRight=!1,this.updateTabData=()=>{this.updateTabPaneProps(),this.setTabs()},this.updateTabPaneProps=()=>{this.tabPanes.forEach(((t,a)=>{t.selected=t.value===this.selectedTabValue,t.guid=this.guid,t.index=a}))},this.setTabs=()=>{this.tabs=this.tabPanes.map((({label:t,value:a})=>({label:t&&n(t)||"",value:a})))},this.onTabClick=t=>{this.value===t.target.dataset.value||this.change.emit({value:t.target.dataset.value})},this.onTabKeyDown=t=>{const a=t.target.dataset.value;switch(t.key){case"ArrowRight":t.preventDefault(),this.moveToAdjacentTab(a,"next");break;case"ArrowLeft":t.preventDefault(),this.moveToAdjacentTab(a,"prev");break;case"Home":t.preventDefault(),this.moveToAdjacentTab(a,"first");break;case"End":t.preventDefault(),this.moveToAdjacentTab(a,"last");break;case"Space":case"Enter":t.preventDefault(),this.change.emit({value:a})}},this.moveToAdjacentTab=(t,a)=>{const i=this.tabs.map((({value:t})=>t)).indexOf(t);let r;switch(a){case"next":r=Math.min(i+1,this.tabs.length-1);break;case"prev":r=Math.max(i-1,0);break;case"first":r=0;break;case"last":r=this.tabs.length-1}i!==r&&this.moveFocus(r,!1)},this.moveFocus=(t,a=!0)=>{const i=this.listElement.querySelector(`[data-value="${this.tabs[t].value}"]`);return i.focus({preventScroll:a}),this.listElement.scrollTo({left:i.offsetLeft-this.listElement.clientWidth/2,behavior:"smooth"}),i},this.checkScrollState=()=>{if(!this.listElement)return;const{scrollLeft:t,scrollWidth:a,clientWidth:i}=this.listElement;this.scrollEnabled=a>i,this.showScrollLeft=!!t,this.showScrollRight=a!==t+i},this.onScrollBtnClick=t=>{const a=Math.floor(this.listElement.clientWidth/2);this.listElement.scrollBy({left:"left"===t?-a:a,behavior:"smooth"})},this.onSlotChange=()=>{this.checkScrollState()}}resizeIframe(){var t,a;return null===(a=null===(t=window.TectonElements)||void 0===t?void 0:t.resizeIframe)||void 0===a?void 0:a.call(t)}get tabPanes(){const t=this.hostElement.querySelectorAll("q2-tab-pane, tecton-tab-pane");return 0===t.length?[]:Array.from(t).filter((t=>t.name===this.name))}get selectedTabValue(){return this.value||this.tabPanes[0].value||""}get tabList(){return this.hostElement.shadowRoot.querySelector(".tab-list")}defaultChangeHandler(t){t.target!==this.hostElement||this.hostElement.onchange||(this.value=t.detail.value)}onResize(){this.checkScrollState()}onFocus(t){if(!c(t,this.hostElement))return;const a=this.tabs.findIndex((t=>t.value===this.selectedTabValue));this.moveFocus(a)}componentWillLoad(){const t=new MutationObserver(this.updateTabData);t.observe(this.hostElement,{childList:!0,attributes:!0}),this.mutationObserver=t,this.resizeObserver=new ResizeObserver((()=>this.checkScrollState())),this.updateTabData()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t())),this.scheduledAfterRender=[],this.settled.emit()}componentDidLoad(){this.resizeObserver.observe(this.listElement),this.checkScrollState(),l(this.hostElement);const t=this.tabs.findIndex((t=>t.value===this.value));this.scheduledAfterRender.push((()=>{if(!(this.tabs.length>0))return;const a=this.moveFocus(Math.max(t,0));this.value=a.dataset.value,a.blur()}))}disconnectedCallback(){this.resizeObserver.disconnect(),this.mutationObserver.disconnect(),this.resizeObserver=null,this.mutationObserver=null}valueObserver(){this.updateTabData(),this.scheduledAfterRender.push(this.resizeIframe);const t=this.tabs.findIndex((t=>t.value===this.value));t>-1&&this.scheduledAfterRender.push((()=>this.moveFocus(t,!1)))}nameObserver(){this.updateTabData()}render(){return i(r,null,i("div",{class:"tab-container"},this.scrollEnabled&&i(r,null,i("div",{class:"gradient-left",hidden:!this.showScrollLeft}),i("div",{class:"gradient-right",hidden:!this.showScrollRight}),i("q2-btn",{class:"btn-left",hidden:!this.showScrollLeft,onClick:()=>this.onScrollBtnClick("left")},i("q2-icon",{type:"chevron-left"})),i("q2-btn",{class:"btn-right",hidden:!this.showScrollRight,onClick:()=>this.onScrollBtnClick("right")},i("q2-icon",{type:"chevron-right"}))),i("ul",{onScroll:this.checkScrollState,ref:t=>this.listElement=t,class:this.noPrint?"no-print":null,role:"tablist"},this.tabs.map(((t,a)=>this.generateTab(t,a))))),i("div",{class:"tab-content"},i("slot",{onSlotchange:()=>this.onSlotChange()})))}generateTab(t,a){const{label:r,value:e}=t,o=this.selectedTabValue===e;return i("li",{role:"presentation"},i("button",{id:`tab-${this.guid}-${a}`,"data-value":e,"test-id":"tabLink",tabIndex:o?0:-1,role:"tab","aria-selected":o?"true":"false","aria-controls":`tab-pane-${this.guid}-${a}`,onClick:this.onTabClick,onKeyDown:this.onTabKeyDown},r))}get hostElement(){return e(this)}static get watchers(){return{value:["valueObserver"],name:["nameObserver"]}}};h.style="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1, 5px))));list-style:none;border-bottom:1px solid 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-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-2, 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:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));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-color: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-color: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-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 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-2, 10px)) 0;padding:var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)))}.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 right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg: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{left:0}.btn-right{right:0}";export{h as q2_tab_container}