q2-tecton-elements 1.44.0 → 1.45.0

package/dist/q2-tecton-elements/p-d7e608f7.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as a,h as e,F as i,g as r}from"./p-a5f18e27.js";import{c as o,l as n,i as s,o as c}from"./p-5c46acb8.js";const l="*{box-sizing:border-box}*:active{outline:none}*:focus{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));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: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-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: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-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 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: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-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 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 b=l;const d=class{constructor(e){t(this,e);this.change=a(this,"change",7);this.settled=a(this,"settled",7);this.guid=o();this.scheduledAfterRender=[];this.lastScrolled=new Date(null).getTime();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,badgeCount:e,badgeDescription:i,badgeTheme:r,badgeStatus:o})=>({label:t&&n(t)||"",value:a,badgeCount:e,badgeDescription:i,badgeTheme:r,badgeStatus:o})))};this.onTabClick=t=>{const a=t.target.closest('button[role="tab"]').dataset.value;const e=this.value===a;if(e)return;this.change.emit({value:a})};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});break}};this.moveToAdjacentTab=(t,a)=>{const e=this.tabs.map((({value:t})=>t)).indexOf(t);let i;switch(a){case"next":i=Math.min(e+1,this.tabs.length-1);break;case"prev":i=Math.max(e-1,0);break;case"first":i=0;break;case"last":i=this.tabs.length-1;break}if(e===i)return;this.moveFocus(i,false)};this.moveFocus=(t,a=true)=>{const e=this.tabs[t].value;const i=this.listElement.querySelector(`[data-value="${e}"]`);i.focus({preventScroll:a});const r=i.offsetLeft-this.listElement.clientWidth/2;this.listElement.scrollTo({left:r,behavior:"smooth"});return i};this.checkScrollState=()=>{if(!this.listElement)return;const{scrollLeft:t,scrollWidth:a,clientWidth:e}=this.listElement;this.scrollEnabled=a>e;this.showScrollLeft=t>0;this.showScrollRight=a>Math.ceil(t)+e};this.onScrollBtnClick=t=>{const{scrollLeft:a,scrollWidth:e,clientWidth:i}=this.listElement;const r=Math.floor(i/2);let o=0;if(t==="left"){o=-Math.min(r,Math.abs(a))}else{o=Math.min(r,Math.abs(e-a-i))}this.listElement.scrollBy({left:o,behavior:"smooth"})};this.onSlotChange=()=>{this.checkScrollState()};this.color=undefined;this.name=undefined;this.noPrint=false;this.type=undefined;this.value=undefined;this.hasLeft=false;this.hasRight=false;this.scrollEnabled=false;this.showScrollLeft=false;this.showScrollRight=false;this.tabs=undefined}resizeIframe(){var t,a;return(a=(t=window.TectonElements)===null||t===void 0?void 0:t.resizeIframe)===null||a===void 0?void 0:a.call(t)}get tabPanes(){const t=this.hostElement.querySelectorAll("q2-tab-pane, tecton-tab-pane");if(t.length===0){return[]}return 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){if(t.target===this.hostElement&&!this.hostElement.onchange){this.value=t.detail.value}}onResize(){this.checkScrollState()}onFocus(t){if(!s(t,this.hostElement))return;const a=this.tabs.findIndex((t=>t.value===this.selectedTabValue));this.moveFocus(a)}onBadge(){this.setTabs()}componentWillLoad(){const t=new MutationObserver(this.updateTabData);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t;this.resizeObserver=new ResizeObserver((()=>this.checkScrollState()));this.updateTabData()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[];this.settled.emit()}componentDidLoad(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.observe(this.listElement);this.checkScrollState();c(this.hostElement);const a=this.tabs.findIndex((t=>t.value===this.value));this.scheduledAfterRender.push((()=>{const t=this.tabs.length>0;if(!t)return;const e=this.moveFocus(Math.max(a,0));this.value=e.dataset.value;e.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));if(t>-1){this.scheduledAfterRender.push((()=>this.moveFocus(t,false)))}}nameObserver(){this.updateTabData()}render(){return e(i,{key:"162af260c78f4b3a6044f690fa080f5035e90fe7"},e("div",{key:"46852861fff3930e2eb38d9ced7d6faf9d4636db",class:"tab-container"},this.scrollEnabled&&e(i,{key:"48c51f20b3147bc7cca6f05a95ec7d8ab1bfcbe2"},e("div",{key:"7b1995039c620f7ecd2536a72a925e71f103408a",class:"gradient-left",hidden:!this.showScrollLeft}),e("div",{key:"351dcec21169a704929ba4e9ab2358e08424d471",class:"gradient-right",hidden:!this.showScrollRight}),e("q2-btn",{key:"77f1679ed5a285d744d2aa0ef2efda47165b9a5c",class:"btn-left",hidden:!this.showScrollLeft,onClick:()=>this.onScrollBtnClick("left")},e("q2-icon",{key:"ba1262980c547366f499febf7053136f53b0af55",type:"chevron-left",label:"scroll left"})),e("q2-btn",{key:"e3cc26823904a8e9bcfd0c7ef8a100db751041f1",class:"btn-right",hidden:!this.showScrollRight,onClick:()=>this.onScrollBtnClick("right")},e("q2-icon",{key:"eb51960d6e65691e82f133b1c46b8732ad6b102b",type:"chevron-right",label:"scroll right"}))),e("ul",{key:"5c429620d475be7f205bcd50fc2d61cf29c08011",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))))),e("div",{key:"267b90e4648ba9eb5ae03fbc7c07e59553f7c54d",class:"tab-content"},e("slot",{key:"02aee83c72d6234fa648fadb074e25c7cf26cd20",onSlotchange:()=>this.onSlotChange()})))}generateTab(t,a){const{label:i,value:r}=t;const o=this.selectedTabValue===r;return e("li",{role:"presentation"},e("button",{id:`tab-${this.guid}-${a}`,"data-value":r,"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},t.badgeCount===undefined?i:this.generateTabWithBadge(t,o)))}generateTabWithBadge(t,a){let i;if(!t.badgeStatus&&a)i=t.badgeTheme||"primary";let r;if(t.badgeDescription)r=n(t.badgeDescription);else if(t.badgeStatus)r=n(`tecton.element.tab.pane.${t.badgeStatus}`,[t.badgeCount]);else r=n("tecton.element.tab.pane.new");return e("div",{class:"tab-pane-badge","aria-label":`${t.label}, ${t.badgeCount} ${r}`},t.label,e("q2-badge",{value:t.badgeCount,theme:i,status:t.badgeStatus}))}get hostElement(){return r(this)}static get watchers(){return{value:["valueObserver"],name:["nameObserver"]}}};d.style=b;export{d as q2_tab_container};
-//# sourceMappingURL=p-d7e608f7.entry.js.map

package/dist/q2-tecton-elements/p-d7e608f7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["q2TabContainerCss","Q2TabContainerStyle0","Q2TabContainer","this","guid","createGuid","scheduledAfterRender","lastScrolled","Date","getTime","updateTabData","updateTabPaneProps","setTabs","tabPanes","forEach","tab","index","selected","value","selectedTabValue","tabs","map","label","badgeCount","badgeDescription","badgeTheme","badgeStatus","loc","onTabClick","event","targetValue","target","closest","dataset","isAlreadySelected","change","emit","onTabKeyDown","key","preventDefault","moveToAdjacentTab","direction","indexOf","newIndex","Math","min","length","max","moveFocus","preventScroll","focusedValue","focusedTab","listElement","querySelector","focus","left","offsetLeft","clientWidth","scrollTo","behavior","checkScrollState","scrollLeft","scrollWidth","scrollEnabled","showScrollLeft","showScrollRight","ceil","onScrollBtnClick","halfWidth","floor","scrollAmount","abs","scrollBy","onSlotChange","resizeIframe","_b","_a","window","TectonElements","call","hostElement","querySelectorAll","Array","from","filter","pane","name","tabList","shadowRoot","defaultChangeHandler","onchange","detail","onResize","onFocus","isEventFromElement","findIndex","el","onBadge","componentWillLoad","observer","MutationObserver","observe","childList","attributes","mutationObserver","resizeObserver","ResizeObserver","componentDidRender","fn","settled","componentDidLoad","overrideFocus","push","hasTabs","blur","disconnectedCallback","disconnect","valueObserver","nameObserver","render","h","Fragment","class","hidden","onClick","type","onScroll","ref","noPrint","role","generateTab","onSlotchange","isSelected","id","tabIndex","onKeyDown","undefined","generateTabWithBadge","theme","description","status"],"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));\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: 1px solid\n        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: color var-list(--tct-tween-2, --app-tween-2, unquote('0.4s ease')),\n            border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\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: 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(var-prefixer(tab-content-padding), --comp-tab-content-padding);\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} from '@stencil/core';\nimport { createGuid, loc, overrideFocus, isEventFromElement } from 'src/utils';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n@Component({ tag: 'q2-tab-container', shadow: true, styleUrl: 'q2-tab-container.scss' })\nexport class Q2TabContainer implements ComponentInterface {\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 }) 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 }) 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 }) noPrint: boolean = false;\n\n    /** Determines the font size of the tab controls. */\n    @Prop({ reflect: true }) type: 'main' | 'section';\n\n    /** Corresponds to the value of the selected tab pane. */\n    @Prop({ reflect: true, mutable: true }) value: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event() settled: EventEmitter<undefined>;\n\n    guid: number = createGuid();\n    scheduledAfterRender: (() => void)[] = [];\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    lastScrolled: number = new Date(null).getTime();\n    @State() hasLeft: boolean = false;\n    @State() hasRight: boolean = false;\n    @State() scrollEnabled: boolean = false;\n    @State() showScrollLeft: boolean = false;\n    @State() showScrollRight: boolean = false;\n    @State() tabs: TabPane[];\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\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    get selectedTabValue() {\n        return this.value || this.tabPanes[0].value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    ///////// Default Handler /////////\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('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\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.moveFocus(index);\n    }\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    ///////// Lifecycle Hooks /////////\n    componentWillLoad() {\n        const observer = new MutationObserver(this.updateTabData);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabData();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        this.scheduledAfterRender.push(() => {\n            const hasTabs = this.tabs.length > 0;\n            if (!hasTabs) return;\n            const tab = this.moveFocus(Math.max(index, 0));\n            this.value = tab.dataset.value;\n            tab.blur();\n        });\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n        this.mutationObserver.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver = null;\n    }\n\n    ///////// Observers /////////\n    @Watch('value')\n    valueObserver() {\n        this.updateTabData();\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.moveFocus(index, false));\n        }\n    }\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabData();\n    }\n\n    ///////// Actions /////////\n    updateTabData = () => {\n        this.updateTabPaneProps();\n        this.setTabs();\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    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    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        this.change.emit({\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                this.change.emit({ value });\n                break;\n        }\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.moveFocus(newIndex, false);\n    };\n\n    moveFocus = (index: number, preventScroll: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        focusedTab.focus({ preventScroll });\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n\n        return focusedTab;\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    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    ///////// View Methods /////////\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                                onClick={() => 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                                onClick={() => 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.generateTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    generateTab(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 ? 'true' : 'false'}\n                    aria-controls={`tab-pane-${this.guid}-${index}`}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.generateTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    generateTabWithBadge(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"],"mappings":"yHAAA,MAAMA,EAAoB,oyKAC1B,MAAAC,EAAeD,E,MC0BFE,EAAc,M,yFA0CvBC,KAAAC,KAAeC,IACfF,KAAAG,qBAAuC,GAIvCH,KAAAI,aAAuB,IAAIC,KAAK,MAAMC,UA8GtCN,KAAAO,cAAgB,KACZP,KAAKQ,qBACLR,KAAKS,SAAS,EAGlBT,KAAAQ,mBAAqB,KACjBR,KAAKU,SAASC,SAAQ,CAACC,EAAKC,KACxBD,EAAIE,SAAWF,EAAIG,QAAUf,KAAKgB,iBAClCJ,EAAIX,KAAOD,KAAKC,KAChBW,EAAIC,MAAQA,CAAK,GACnB,EAGNb,KAAAS,QAAU,KACNT,KAAKiB,KAAOjB,KAAKU,SAASQ,KAAI,EAAGC,QAAOJ,QAAOK,aAAYC,mBAAkBC,aAAYC,kBAAa,CAClGJ,MAAQA,GAASK,EAAIL,IAAW,GAChCJ,QACAK,aACAC,mBACAC,aACAC,iBACD,EAGPvB,KAAAyB,WAAcC,IACV,MAAMC,EAAgBD,EAAME,OAA6BC,QAAQ,sBAC5DC,QAAQf,MACb,MAAMgB,EAAoB/B,KAAKe,QAAUY,EACzC,GAAII,EAAmB,OAEvB/B,KAAKgC,OAAOC,KAAK,CACblB,MAAOY,GACT,EAGN3B,KAAAkC,aAAgBR,IACZ,MAAMX,EAASW,EAAME,OAAuBE,QAAQf,MACpD,OAAQW,EAAMS,KACV,IAAK,aACDT,EAAMU,iBACNpC,KAAKqC,kBAAkBtB,EAAO,QAC9B,MAEJ,IAAK,YACDW,EAAMU,iBACNpC,KAAKqC,kBAAkBtB,EAAO,QAC9B,MAEJ,IAAK,OACDW,EAAMU,iBACNpC,KAAKqC,kBAAkBtB,EAAO,SAC9B,MAEJ,IAAK,MACDW,EAAMU,iBACNpC,KAAKqC,kBAAkBtB,EAAO,QAC9B,MAEJ,IAAK,QACL,IAAK,QACDW,EAAMU,iBACNpC,KAAKgC,OAAOC,KAAK,CAAElB,UACnB,M,EAIZf,KAAAqC,kBAAoB,CAACtB,EAAeuB,KAChC,MAAMzB,EAAQb,KAAKiB,KAAKC,KAAI,EAAGH,WAAYA,IAAOwB,QAAQxB,GAE1D,IAAIyB,EACJ,OAAQF,GACJ,IAAK,OACDE,EAAWC,KAAKC,IAAI7B,EAAQ,EAAGb,KAAKiB,KAAK0B,OAAS,GAClD,MAEJ,IAAK,OACDH,EAAWC,KAAKG,IAAI/B,EAAQ,EAAG,GAC/B,MAEJ,IAAK,QACD2B,EAAW,EACX,MAEJ,IAAK,OACDA,EAAWxC,KAAKiB,KAAK0B,OAAS,EAC9B,MAGR,GAAI9B,IAAU2B,EAAU,OAExBxC,KAAK6C,UAAUL,EAAU,MAAM,EAGnCxC,KAAA6C,UAAY,CAAChC,EAAeiC,EAAyB,QACjD,MAAMC,EAAe/C,KAAKiB,KAAKJ,GAAOE,MACtC,MAAMiC,EAAahD,KAAKiD,YAAYC,cAAiC,gBAAgBH,OACrFC,EAAWG,MAAM,CAAEL,kBAEnB,MAAMM,EAAOJ,EAAWK,WAAarD,KAAKiD,YAAYK,YAAc,EACpEtD,KAAKiD,YAAYM,SAAS,CACtBH,OACAI,SAAU,WAGd,OAAOR,CAAU,EAGrBhD,KAAAyD,iBAAmB,KACf,IAAKzD,KAAKiD,YAAa,OACvB,MAAMS,WAAEA,EAAUC,YAAEA,EAAWL,YAAEA,GAAgBtD,KAAKiD,YACtDjD,KAAK4D,cAAgBD,EAAcL,EACnCtD,KAAK6D,eAAiBH,EAAa,EACnC1D,KAAK8D,gBAAkBH,EAAclB,KAAKsB,KAAKL,GAAcJ,CAAW,EAG5EtD,KAAAgE,iBAAoB1B,IAChB,MAAMoB,WAAEA,EAAUC,YAAEA,EAAWL,YAAEA,GAAgBtD,KAAKiD,YACtD,MAAMgB,EAAYxB,KAAKyB,MAAMZ,EAAc,GAC3C,IAAIa,EAAuB,EAC3B,GAAI7B,IAAc,OAAQ,CACtB6B,GAAgB1B,KAAKC,IAAIuB,EAAWxB,KAAK2B,IAAIV,G,KAC1C,CACHS,EAAe1B,KAAKC,IAAIuB,EAAWxB,KAAK2B,IAAIT,EAAcD,EAAaJ,G,CAE3EtD,KAAKiD,YAAYoB,SAAS,CAAEjB,KAAMe,EAAcX,SAAU,UAAW,EAGzExD,KAAAsE,aAAe,KACXtE,KAAKyD,kBAAkB,E,sDAzQiB,M,sDA4BhB,M,cACC,M,mBACK,M,oBACC,M,qBACC,M,oBAGpC,YAAAc,G,QACI,OAAOC,GAAAC,EAAAC,OAAOC,kBAAc,MAAAF,SAAA,SAAAA,EAAEF,gBAAY,MAAAC,SAAA,SAAAA,EAAAI,KAAAH,E,CAG9C,YAAI/D,GACA,MAAMA,EAAWV,KAAK6E,YAAYC,iBAC9B,gCAGJ,GAAIpE,EAASiC,SAAW,EAAG,CACvB,MAAO,E,CAGX,OAAOoC,MAAMC,KAAKtE,GAAUuE,QAAOC,GAAQA,EAAKC,OAASnF,KAAKmF,M,CAGlE,oBAAInE,GACA,OAAOhB,KAAKe,OAASf,KAAKU,SAAS,GAAGK,OAAS,E,CAGnD,WAAIqE,GACA,OAAOpF,KAAK6E,YAAYQ,WAAWnC,cAAc,Y,CAKrD,oBAAAoC,CAAqB5D,GACjB,GAAIA,EAAME,SAAW5B,KAAK6E,cAAgB7E,KAAK6E,YAAYU,SAAU,CACjEvF,KAAKe,MAAQW,EAAM8D,OAAOzE,K,EAKlC,QAAA0E,GACIzF,KAAKyD,kB,CAIT,OAAAiC,CAAQhE,GACJ,IAAKiE,EAAmBjE,EAAO1B,KAAK6E,aAAc,OAClD,MAAMhE,EAAQb,KAAKiB,KAAK2E,WAAUC,GAAMA,EAAG9E,QAAUf,KAAKgB,mBAC1DhB,KAAK6C,UAAUhC,E,CAInB,OAAAiF,GACI9F,KAAKS,S,CAIT,iBAAAsF,GACI,MAAMC,EAAW,IAAIC,iBAAiBjG,KAAKO,eAC3CyF,EAASE,QAAQlG,KAAK6E,YAAa,CAAEsB,UAAW,KAAMC,WAAY,OAClEpG,KAAKqG,iBAAmBL,EACxBhG,KAAKsG,eAAiB,IAAIC,gBAAe,IAAMvG,KAAKyD,qBACpDzD,KAAKO,e,CAGT,kBAAAiG,GACIxG,KAAKG,qBAAqBQ,SAAQ8F,GAAMA,MACxCzG,KAAKG,qBAAuB,GAC5BH,KAAK0G,QAAQzE,M,CAGjB,gBAAA0E,G,OACIlC,EAAAzE,KAAKsG,kBAAc,MAAA7B,SAAA,SAAAA,EAAEyB,QAAQlG,KAAKiD,aAClCjD,KAAKyD,mBACLmD,EAAc5G,KAAK6E,aACnB,MAAMhE,EAAQb,KAAKiB,KAAK2E,WAAUC,GAAMA,EAAG9E,QAAUf,KAAKe,QAC1Df,KAAKG,qBAAqB0G,MAAK,KAC3B,MAAMC,EAAU9G,KAAKiB,KAAK0B,OAAS,EACnC,IAAKmE,EAAS,OACd,MAAMlG,EAAMZ,KAAK6C,UAAUJ,KAAKG,IAAI/B,EAAO,IAC3Cb,KAAKe,MAAQH,EAAIkB,QAAQf,MACzBH,EAAImG,MAAM,G,CAIlB,oBAAAC,GACIhH,KAAKsG,eAAeW,aACpBjH,KAAKqG,iBAAiBY,aACtBjH,KAAKsG,eAAiB,KACtBtG,KAAKqG,iBAAmB,I,CAK5B,aAAAa,GACIlH,KAAKO,gBACLP,KAAKG,qBAAqB0G,KAAK7G,KAAKuE,cACpC,MAAM1D,EAAQb,KAAKiB,KAAK2E,WAAUC,GAAMA,EAAG9E,QAAUf,KAAKe,QAC1D,GAAIF,GAAS,EAAG,CACZb,KAAKG,qBAAqB0G,MAAK,IAAM7G,KAAK6C,UAAUhC,EAAO,Q,EAKnE,YAAAsG,GACInH,KAAKO,e,CAwIT,MAAA6G,GACI,OACIC,EAACC,EAAQ,CAAAnF,IAAA,4CACLkF,EAAA,OAAAlF,IAAA,2CAAKoF,MAAM,iBACNvH,KAAK4D,eACFyD,EAACC,EAAQ,CAAAnF,IAAA,4CACLkF,EAAA,OAAAlF,IAAA,2CACIoF,MAAM,gBACNC,QAASxH,KAAK6D,iBAElBwD,EAAA,OAAAlF,IAAA,2CACIoF,MAAM,iBACNC,QAASxH,KAAK8D,kBAGlBuD,EAAA,UAAAlF,IAAA,2CACIoF,MAAM,WACNC,QAASxH,KAAK6D,eACd4D,QAAS,IAAMzH,KAAKgE,iBAAiB,SAErCqD,EAAA,WAAAlF,IAAA,2CACIuF,KAAK,eACLvG,MAAM,iBAIdkG,EAAA,UAAAlF,IAAA,2CACIoF,MAAM,YACNC,QAASxH,KAAK8D,gBACd2D,QAAS,IAAMzH,KAAKgE,iBAAiB,UAErCqD,EAAA,WAAAlF,IAAA,2CACIuF,KAAK,gBACLvG,MAAM,mBAMtBkG,EAAA,MAAAlF,IAAA,2CACIwF,SAAU3H,KAAKyD,iBACfmE,IAAK/B,GAAO7F,KAAKiD,YAAc4C,EAC/B0B,MAAOvH,KAAK6H,QAAU,WAAa,KACnCC,KAAK,WAEJ9H,KAAKiB,KAAKC,KAAI,CAACN,EAAKC,IAAUb,KAAK+H,YAAYnH,EAAKC,OAG7DwG,EAAA,OAAAlF,IAAA,2CAAKoF,MAAM,eACPF,EAAA,QAAAlF,IAAA,2CAAM6F,aAAc,IAAMhI,KAAKsE,kB,CAM/C,WAAAyD,CAAYnH,EAAcC,GACtB,MAAMM,MAAEA,EAAKJ,MAAEA,GAAUH,EACzB,MAAMqH,EAAajI,KAAKgB,mBAAqBD,EAC7C,OACIsG,EAAA,MAAIS,KAAK,gBACLT,EAAA,UACIa,GAAI,OAAOlI,KAAKC,QAAQY,IAAO,aACnBE,EAAK,UACT,UACRoH,SAAUF,EAAa,GAAK,EAC5BH,KAAK,MAAK,gBACKG,EAAa,OAAS,QAAO,gBAC7B,YAAYjI,KAAKC,QAAQY,IACxC4G,QAASzH,KAAKyB,WACd2G,UAAWpI,KAAKkC,cAEftB,EAAIQ,aAAeiH,UAAYlH,EAAQnB,KAAKsI,qBAAqB1H,EAAKqH,I,CAMvF,oBAAAK,CAAqB1H,EAAcqH,GAC/B,IAAIM,EACJ,IAAK3H,EAAIW,aAAe0G,EAAYM,EAAQ3H,EAAIU,YAAc,UAC9D,IAAIkH,EACJ,GAAI5H,EAAIS,iBAAkBmH,EAAchH,EAAIZ,EAAIS,uBAC3C,GAAIT,EAAIW,YAAaiH,EAAchH,EAAI,2BAA2BZ,EAAIW,cAAe,CAACX,EAAIQ,kBAC1FoH,EAAchH,EAAI,+BAEvB,OACI6F,EAAA,OACIE,MAAM,iBAAgB,aACV,GAAG3G,EAAIO,UAAUP,EAAIQ,cAAcoH,KAE9C5H,EAAIO,MACLkG,EAAA,YACItG,MAAOH,EAAIQ,WACXmH,MAAOA,EACPE,OAAQ7H,EAAIW,c"}

package/dist/q2-tecton-elements/p-dce084f9.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as a,F as r,g as i}from"./p-a5f18e27.js";import{o as c,c as n,i as s,l as o}from"./p-5c46acb8.js";const l='*{box-sizing:border-box}*:active{outline:none}*:focus{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:grid;grid-template-columns:var(--tct-stepper-vertical-list-width, var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px))) 1fr;gap:var(--tct-stepper-vertical-layout-gap, var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px)))}.step-label,.step-child-label{color:var(--comp-btn-label-color);font-size:var(--comp-btn-label-font-size);font-weight:var(--comp-label-font-weight, 400);min-height:1.5em}.step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 2)));-webkit-box-orient:vertical}[aria-selected=true] .step-label{font-weight:var(--tct-stepper-vertical-btn-active-font-weight, var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600)))}[aria-describedby] .step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 1)));-webkit-box-orient:vertical}.step-child-label{grid-area:content;color:var(--comp-btn-label-color)}.step-description{color:var(--tct-stepper-vertical-description-color, var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-stepper-vertical-description-font-size, var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px))));padding-bottom:0.2em}ul{--comp-top-btn-icon-size:var(--tct-stepper-vertical-btn-icon-size, var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px)));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px))));--comp-btn-label-font-size:var-list(--tct-stepper-vertical-btn-label-font-size, var-prefixer(advanced-stepper-btn-label-font-size), 16px);--comp-btn-label-color:var(--tct-stepper-vertical-label-color, var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, var(--t-text, #4d4d4d))));--comp-tween:var(--tct-stepper-vertical-tween, var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease))));--comp-bullet-bg:var(--tct-stepper-vertical-bullet-active-bg, var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1))));list-style:none;margin:0;padding:0}ul ul{--comp-btn-icon-size:var(--tct-stepper-vertical-child-btn-icon-size, var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px)));--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px))));--comp-btn-label-font-size:var-list(\n      --tct-stepper-vertical-child-btn-label-font-size,\n      var-prefixer(advanced-stepper-child-btn-label-font-size),\n      --app-font-size-small,\n      12px\n  )}ul ul[aria-hidden=true]{display:none}.step-btn,.step-child-btn{display:grid;grid-template-columns:var(--comp-btn-icon-size) 1fr;gap:var(--comp-btn-content-gap);text-align:var(--tct-stepper-vertical-btn-text-align, var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start)));grid-template-areas:"icon content";align-items:center;width:100%;position:relative;background:transparent;border:0;cursor:pointer;padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled],.step-child-btn[aria-disabled]{cursor:default;--comp-label-font-weight:300;--comp-btn-label-color:var(--tct-stepper-vertical-btn-locked-color, var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77)))))}.step-btn[aria-selected=true],.step-child-btn[aria-selected=true]{--comp-label-font-weight:600}.step-btn{min-height:var(--tct-stepper-vertical-btn-height, var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px)));font-size:var(--tct-stepper-vertical-btn-font-size, var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px)));--comp-active-color:var(--comp-bullet-bg)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-btn.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--comp-bullet-bg);min-height:var(--tct-stepper-vertical-child-btn-height, var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px)));padding-left:var(--tct-stepper-vertical-child-btn-left-padding, var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px))));font-size:var(--tct-stepper-vertical-child-btn-font-size, var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px)));border-left-width:var(--tct-stepper-vertical-child-btn-left-border-width, var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px)));border-left-style:var(--tct-stepper-vertical-child-btn-left-border-style, var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid)));border-left-color:transparent}.step-child-btn[aria-selected=true]{--comp-btn-label-color:var(--comp-active-color);border-left-color:var(--comp-active-color)}.step-child-btn.status-error{--comp-btn-label-color:var(--const-stoplight-alert, #d20a0a);--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-child-btn.status-locked{cursor:not-allowed}.step-content{grid-area:content}.step-icon,.step-bubble,.step-child-icon{grid-area:icon;width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);line-height:0}.step-icon q2-icon,.step-bubble q2-icon,.step-child-icon q2-icon{width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);--tct-icon-fill:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--comp-active-color);color:var(--t-base, #ffffff);border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:"";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color)}.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0}.step-child-icon q2-icon{--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--comp-active-color)}[aria-selected=true] .step-child-icon q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base, #ffffff)}.spacer{height:0;border-left-width:var(--tct-stepper-vertical-child-border-width, var(--tct-advanced-stepaer-child-border-width, var(--t-advanced-stepaer-child-border-width, 1px)));border-left-style:var(--tct-stepper-vertical-child-border-style, var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid)));border-left-color:var(--tct-stepper-vertical-child-border-color, var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9))));overflow:hidden;margin-left:calc(var(--comp-top-btn-icon-size) / 2);transition:height var(--comp-tween)}.spacer.has-sibling{height:var(--tct-stepper-vertical-spacer-height, var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px))))}.spacer ul{opacity:0;transition:opacity var(--comp-tween)}.spacer.is-opening ul,.spacer.is-open ul{display:block;opacity:1 !important}.spacer.is-open{overflow:visible}';const p=l;const d=class{constructor(a){t(this,a);this.change=e(this,"change",7);this.scheduledAfterRender=[];this.determinePaneChanges=t=>{t.forEach((t=>{var e,a;if(t.type!=="childList")return;if(!t.addedNodes.length&&!t.removedNodes.length)return;if(((e=t.addedNodes[0])===null||e===void 0?void 0:e.nodeType)!==Node.ELEMENT_NODE&&((a=t.removedNodes[0])===null||a===void 0?void 0:a.nodeType)!==Node.ELEMENT_NODE)return;this.buildPaneList()}))};this.buildPaneList=()=>{const{allRootPanes:t}=this;if(!t.length)return;this.structuredPanes=Array.from(t).reduce(((t,e)=>{var a,r;const i=Array.from((r=(a=e.querySelector("[slot=children]"))===null||a===void 0?void 0:a.children)!==null&&r!==void 0?r:[]).filter((({tagName:t})=>t==="Q2-STEPPER-PANE")).map(this.extractDetails);t.push(Object.assign(Object.assign({},this.extractDetails(e)),{children:i}));return t}),[])};this.onStepClick=(t,e)=>{t.stopPropagation();const{currentStepId:a}=this;if(e===a)return;const r=this.allPanes.find((t=>t.id===e));this.change.emit({selectedStep:r,selectedStepId:e,currentStepId:a})};this.onStepKeyDown=(t,e)=>{const{key:a}=t;let r;switch(a){case"ArrowUp":case"ArrowLeft":t.preventDefault();r=this.getStepId(e,"prev");break;case"ArrowDown":case"ArrowRight":t.preventDefault();r=this.getStepId(e,"next");break;case"Home":t.preventDefault();r=this.getStepId(e,"first");break;case"End":t.preventDefault();r=this.getStepId(e,"last");break}if(!r)return;this.focusStepBtn(r,true)};this.currentStepId=undefined;this.structuredPanes=[]}componentWillLoad(){this.setDefaultPane();this.buildPaneList();const t=new MutationObserver(this.determinePaneChanges);const e={childList:true};t.observe(this.hostElement,e);this.allRootPanes.forEach((a=>{const r=a.querySelector("[slot=children]");if(r)t.observe(r,e)}));this.mutationObserver=t}componentDidLoad(){c(this.hostElement);setTimeout((()=>this.showStep(this.currentStepId)),0)}componentWillUpdate(){this.expandedStepChildrenList=null}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[];this.openCurrentStepChildren()}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}get allRootPanes(){return Array.from(this.hostElement.querySelectorAll(":scope > q2-stepper-pane"))}get allPanes(){return Array.from(this.hostElement.querySelectorAll("q2-stepper-pane"))}setDefaultPane(){if(this.currentStepId)return;const t=this.hostElement.querySelector("q2-stepper-pane");if(!t)return;if(!t.id)t.id=`step-${n()}`;this.currentStepId=t.id}getStepId(t,e){const a=Array.from(this.hostElement.shadowRoot.querySelectorAll('ul:not([aria-hidden="true"]) > li > button:not([aria-disabled="true"])'));const r=a.findIndex((e=>e.getAttribute("aria-controls")===t));let i;switch(e){case"prev":i=Math.max(r-1,0);break;case"next":i=Math.min(r+1,a.length-1);break;case"first":i=0;break;case"last":i=a.length-1;break}return a[i].getAttribute("aria-controls")}showStep(t){this.scheduledAfterRender.push(this.resizeIframe);this.showStepPane(t);this.focusStepBtn(t)}extractDetails(t){const{label:e,description:a,status:r}=t;if(!t.id)t.id=`step-${n()}`;return{id:t.id,label:e,description:a,status:r}}resizeIframe(){var t,e;return(e=(t=window===null||window===void 0?void 0:window.TectonElements)===null||t===void 0?void 0:t.resizeIframe)===null||e===void 0?void 0:e.call(t)}openCurrentStepChildren(){const{expandedStepChildrenList:t}=this;const e=this.hostElement.shadowRoot.querySelectorAll(".spacer");e.forEach((e=>{if(t&&e.contains(t)){e.style.height=`${t.clientHeight}px`;if(e.classList.contains("is-open"))return;e.classList.add("is-opening");e.addEventListener("transitionend",(()=>{e.classList.remove("is-opening");e.classList.add("is-open");this.resizeIframe()}),{once:true})}else{e.removeAttribute("style");e.classList.remove("is-open","is-opening")}}))}showStepPane(t){this.allPanes.forEach((e=>{if(e.isActive||e.id===t){e.isActive=t===e.id}}))}focusStepBtn(t,e){const a=this.hostElement.shadowRoot.querySelector(`button[aria-controls="${t}"]`);const r=document.activeElement===this.hostElement;if(!a)return;if(r||e){a.focus()}}defaultChangeHandler(t){const{hostElement:e}=this;if(t.target===e&&!e.getAttribute("onchange")&&!!t.detail){this.currentStepId=t.detail.selectedStepId}}delegateFocus(t){if(!s(t,this.hostElement))return;this.focusStepBtn(this.currentStepId,true)}statusChangeHandler(){this.buildPaneList()}currentStepChanged(t){this.showStep(t)}renderStepBtn(t,e){const{currentStepId:r,structuredPanes:i}=this;const c=e===i.length-1;const{id:n,label:s,description:l,status:p}=t;const d=e+1;const b=n===r;const v=s&&`label-${n}`;const h=p==="locked";const u=s&&o(s);const f=s&&l&&`description-${n}`;const g=!s&&o("tecton.element.advancedStepper.number",[`${d}`,`${i.length}`]);let m;if(p==="complete")m="success-filled";else if(p==="error")m="warning-filled";const w=["step-btn"];if(p)w.push(`status-${p}`);const x=t.children.map((t=>t.id));const y=b||x.includes(r);return a("li",{role:"presentation"},a("button",{class:w.join(" "),type:"button","aria-labelledby":v,"aria-describedBy":f,"aria-label":g,"aria-selected":`${b}`,"aria-expanded":!!t.children.length?`${y}`:null,"aria-controls":n,"aria-disabled":h?"true":null,role:"tab",tabIndex:b?0:-1,onKeyDown:t=>!h&&this.onStepKeyDown(t,n),onClick:t=>!h&&this.onStepClick(t,n)},m?a("div",{class:"step-icon"},a("q2-icon",{type:m})):a("div",{class:"step-bubble"},d),s&&a("div",null,a("div",{class:"step-label",id:v},u),l&&a("div",{class:"step-description",id:f},o(l)))),this.renderSpacer(t,u,y,c))}renderSpacer(t,e,r,i){const c=i&&!!t.children.length||!i;const n=["spacer"];if(!i)n.push("has-sibling");return c&&a("div",{class:n.join(" ")},!!t.children.length&&a("ul",{ref:t=>r&&(this.expandedStepChildrenList=t),"aria-hidden":`${!r}`},t.children.map(((t,a,r)=>this.renderChildStepBtn(t,a,r.length,e)))))}renderChildStepBtn(t,e,r,i){const{currentStepId:c}=this;const{id:n,label:s,status:l}=t;const p=e+1;const d=s&&`label-${n}`;const b=n===c;const v=l==="locked";const h=!s&&o("tecton.element.advancedStepper.childNumber",[`${p}`,`${r}`,i]);let u;if(l==="error")u="warning-filled";const f=["step-child-btn"];if(l)f.push(`status-${l}`);return a("li",{role:"presentation"},a("button",{class:f.join(" "),type:"button","aria-labelledby":d,"aria-label":h,"aria-selected":`${b}`,"aria-controls":n,"aria-disabled":v?"true":null,role:"tab",tabIndex:b?0:-1,onKeyDown:t=>!v&&this.onStepKeyDown(t,n),onClick:t=>!v&&this.onStepClick(t,n)},u&&a("div",{class:"step-child-icon"},a("q2-icon",{type:u})),s&&a("div",{class:"step-child-label",id:d},o(s))))}render(){return a(r,{key:"a8625d5c0ba5e238741b84e8e6250f54f366265a"},a("ul",{key:"1880ef7536871343bea6247a3b68f921528740fb",role:"tablist"},this.structuredPanes.map(((t,e)=>this.renderStepBtn(t,e)))),a("div",{key:"d050040f17ac8785dc9ae64a7fa3b37b2d103832"},a("slot",{key:"b58acf928b80a223df9bc16546d489c22de7cade"})))}get hostElement(){return i(this)}static get watchers(){return{currentStepId:["currentStepChanged"]}}};d.style=p;export{d as q2_stepper_vertical};
-//# sourceMappingURL=p-dce084f9.entry.js.map

package/dist/q2-tecton-elements/p-dce084f9.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["q2StepperVerticalCss","Q2StepperVerticalStyle0","Q2StepperVertical","this","scheduledAfterRender","determinePaneChanges","mutations","forEach","mutation","type","addedNodes","length","removedNodes","_a","nodeType","Node","ELEMENT_NODE","_b","buildPaneList","allRootPanes","structuredPanes","Array","from","reduce","accum","pane","children","querySelector","filter","tagName","map","extractDetails","push","Object","assign","onStepClick","event","stepId","stopPropagation","currentStepId","selectedStep","allPanes","find","id","change","emit","selectedStepId","onStepKeyDown","key","preventDefault","getStepId","focusStepBtn","componentWillLoad","setDefaultPane","observer","MutationObserver","observerOptions","childList","observe","hostElement","childrenSlot","mutationObserver","componentDidLoad","overrideFocus","setTimeout","showStep","componentWillUpdate","expandedStepChildrenList","componentDidRender","fn","openCurrentStepChildren","disconnectedCallback","disconnect","querySelectorAll","firstEnabledStep","createGuid","goTo","allEnabledStepBtns","shadowRoot","currentStepIndex","findIndex","btn","getAttribute","nextStepIndex","Math","max","min","resizeIframe","showStepPane","label","description","status","window","TectonElements","call","allSpacers","spacer","contains","style","height","clientHeight","classList","add","addEventListener","remove","once","removeAttribute","isActive","forceFocus","stepBtn","isComponentActive","document","activeElement","focus","defaultChangeHandler","target","detail","delegateFocus","isEventFromElement","statusChangeHandler","currentStepChanged","renderStepBtn","index","isLastStep","stepNumber","isCurrentStep","labelId","isLocked","stepLabel","loc","descriptionId","btnLabel","statusIcon","stepClasses","childIds","child","isExpanded","includes","h","role","class","join","tabIndex","onKeyDown","ev","onClick","renderSpacer","shouldRender","spacerClasses","ref","el","renderChildStepBtn","parentLabel","render","Fragment"],"sources":["src/components/q2-stepper-vertical/q2-stepper-vertical.scss?tag=q2-stepper-vertical&encapsulation=shadow","src/components/q2-stepper-vertical/q2-stepper-vertical.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: grid;\n    grid-template-columns: var-list(--tct-stepper-vertical-list-width, var-prefixer(advanced-stepper-list-width), 180px) 1fr;\n    gap: var-list(--tct-stepper-vertical-layout-gap, var-prefixer(advanced-stepper-layout-gap), 120px);\n}\n\n.step-label,\n.step-child-label {\n    color: var(--comp-btn-label-color);\n    font-size: var(--comp-btn-label-font-size);\n    font-weight: var(--comp-label-font-weight, 400);\n    min-height: 1.5em;\n}\n\n.step-label {\n    @include line-clamp(var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 2));\n\n    [aria-selected='true'] & {\n        font-weight: var-list(--tct-stepper-vertical-btn-active-font-weight, var-prefixer(advanced-stepper-btn-active-font-weight), 600);\n    }\n\n    [aria-describedby] & {\n        @include line-clamp(var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 1));\n    }\n}\n\n.step-child-label {\n    grid-area: content;\n    color: var(--comp-btn-label-color);\n}\n\n.step-description {\n    color: var-list(--tct-stepper-vertical-description-color, var-prefixer(advanced-stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(--tct-stepper-vertical-description-font-size, var-prefixer(advanced-stepper-description-font-size), --app-font-size-small, 12px);\n\n    // Add padding for descenders\n    padding-bottom: 0.2em;\n}\n\nul {\n    --comp-top-btn-icon-size: #{var-list(--tct-stepper-vertical-btn-icon-size, var-prefixer(advanced-stepper-btn-icon-size), 24px)};\n    --comp-btn-icon-size: #{var(--comp-top-btn-icon-size)};\n    --comp-btn-content-gap: #{var-list(--tct-stepper-vertical-btn-gap, var-prefixer(advanced-stepper-btn-gap), --app-scale-3x, 15px)};\n    --comp-btn-label-font-size: var-list(--tct-stepper-vertical-btn-label-font-size, var-prefixer(advanced-stepper-btn-label-font-size), 16px);\n    --comp-btn-label-color: #{var-list(--tct-stepper-vertical-label-color, var-prefixer(advanced-stepper-label-color), --t-text, #4d4d4d)};\n    --comp-tween: #{var-list(--tct-stepper-vertical-tween, var-prefixer(advanced-stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n    --comp-bullet-bg: #{var-list(--tct-stepper-vertical-bullet-active-bg, var-prefixer(advanced-stepper-bullet-active-bg), --t-primary, #0079c1)};\n\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n    ul {\n        --comp-btn-icon-size: #{var-list(--tct-stepper-vertical-child-btn-icon-size, var-prefixer(advanced-stepper-child-btn-icon-size), 12px)};\n        --comp-btn-content-gap: #{var-list(--tct-stepper-vertical-btn-gap, var-prefixer(advanced-stepper-btn-gap), --app-scale-2x, 10px)};\n        --comp-btn-label-font-size: var-list(\n            --tct-stepper-vertical-child-btn-label-font-size,\n            var-prefixer(advanced-stepper-child-btn-label-font-size),\n            --app-font-size-small,\n            12px\n        );\n\n        &[aria-hidden='true'] {\n            display: none;\n        }\n    }\n}\n\n.step-btn,\n.step-child-btn {\n    display: grid;\n    grid-template-columns: var(--comp-btn-icon-size) 1fr;\n    gap: var(--comp-btn-content-gap);\n    text-align: var-list(--tct-stepper-vertical-btn-text-align, var-prefixer(advanced-stepper-btn-text-align), start);\n    grid-template-areas: 'icon content';\n    align-items: center;\n    width: 100%;\n    position: relative;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    padding: 0;\n    transition-property: box-shadow;\n    outline: none;\n\n    &[aria-disabled] {\n        cursor: default;\n        --comp-label-font-weight: 300;\n        --comp-btn-label-color: #{var-list(\n                --tct-stepper-vertical-btn-locked-color,\n                var-prefixer(advanced-stepper-btn-locked-color),\n                --t-textA,\n                rgba(77, 77, 77, 0.77)\n            )};\n    }\n\n    &[aria-selected='true'] {\n        --comp-label-font-weight: 600;\n    }\n}\n\n.step-btn {\n    min-height: var-list(--tct-stepper-vertical-btn-height, var-prefixer(advanced-stepper-btn-height), 40px);\n    font-size: var-list(--tct-stepper-vertical-btn-font-size, var-prefixer(advanced-stepper-btn-font-size), 16px);\n\n    --comp-active-color: var(--comp-bullet-bg);\n    &.status-complete {\n        --comp-active-color: var(--const-stoplight-success, #0e8a00);\n    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n    }\n    &.status-locked {\n        cursor: not-allowed;\n    }\n}\n\n.step-child-btn {\n    --comp-active-color: var(--comp-bullet-bg);\n\n    min-height: var-list(--tct-stepper-vertical-child-btn-height, var-prefixer(advanced-stepper-child-btn-height), 30px);\n    padding-left: var-list(--tct-stepper-vertical-child-btn-left-padding, var-prefixer(advanced-stepper-child-btn-left-padding), --app-scale-2x, 10px);\n    font-size: var-list(--tct-stepper-vertical-child-btn-font-size, var-prefixer(advanced-stepper-child-btn-font-size), 12px);\n    border-left-width: var-list(--tct-stepper-vertical-child-btn-left-border-width, var-prefixer(advanced-stepper-child-btn-left-border-width), 3px);\n    border-left-style: var-list(--tct-stepper-vertical-child-btn-left-border-style, var-prefixer(advanced-stepper-child-btn-left-border-style), solid);\n    border-left-color: transparent;\n\n    &[aria-selected='true'] {\n        --comp-btn-label-color: var(--comp-active-color);\n        border-left-color: var(--comp-active-color);\n    }\n\n    &.status-error {\n        --comp-btn-label-color: var(--const-stoplight-alert, #d20a0a);\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n    }\n\n    &.status-locked {\n        cursor: not-allowed;\n    }\n}\n\n.step-content {\n    grid-area: content;\n}\n\n.step-icon,\n.step-bubble,\n.step-child-icon {\n    grid-area: icon;\n    width: var(--comp-btn-icon-size);\n    height: var(--comp-btn-icon-size);\n    line-height: 0;\n\n    q2-icon {\n        width: var(--comp-btn-icon-size);\n        height: var(--comp-btn-icon-size);\n        --tct-icon-fill: var(--comp-active-color);\n    }\n}\n\n.step-icon,\n.step-bubble {\n    background: var(--comp-active-color);\n    color: var(--t-base, #ffffff);\n    border-radius: 50%;\n\n    .status-complete &,\n    .status-error & {\n        background: var(--comp-active-color);\n    }\n\n    q2-icon {\n        --tct-icon-fill: var(--comp-active-color);\n        &:before {\n            content: '';\n            display: block;\n            background: var(--t-base, #ffffff);\n            position: absolute;\n            width: 80%;\n            height: 80%;\n            left: 11%;\n            top: 11%;\n            border-radius: 50%;\n        }\n    }\n\n    // Text-based statuses\n    .status-locked & {\n        background: var(--t-gray-12, #d9d9d9);\n        color: var(--t-text, #4d4d4d);\n    }\n\n    [aria-selected='true'] & {\n        box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n    }\n}\n\n.step-bubble {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    line-height: 0;\n}\n\n.step-child-icon {\n    q2-icon {\n        --tct-icon-stroke-primary: var(--comp-active-color);\n        --tct-icon-stroke-secondary: var(--comp-active-color);\n    }\n    [aria-selected='true'] & {\n        q2-icon {\n            fill: var(--comp-active-color);\n            --tct-icon-stroke-secondary: var(--t-base, #ffffff);\n        }\n    }\n}\n\n.spacer {\n    height: 0;\n    border-left-width: var-list(--tct-stepper-vertical-child-border-width, var-prefixer(advanced-stepaer-child-border-width), 1px);\n    border-left-style: var-list(--tct-stepper-vertical-child-border-style, var-prefixer(advanced-stepper-child-border-style), solid);\n    border-left-color: var-list(--tct-stepper-vertical-child-border-color, var-prefixer(advanced-stepper-child-border-color), --t-gray-12, #d9d9d9);\n    overflow: hidden;\n    margin-left: calc(var(--comp-top-btn-icon-size) / 2);\n    transition: height var(--comp-tween);\n\n    &.has-sibling {\n        height: var-list(--tct-stepper-vertical-spacer-height, var-prefixer(advanced-stepper-spacer-height), --app-scale-6x, 30px);\n    }\n\n    ul {\n        opacity: 0;\n        transition: opacity var(--comp-tween);\n    }\n\n    &.is-opening,\n    &.is-open {\n        ul {\n            display: block;\n            opacity: 1 !important;\n        }\n    }\n\n    &.is-open {\n        overflow: visible;\n    }\n}\n","import {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    State,\n    Watch,\n    Listen,\n    Event,\n    EventEmitter,\n    Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';\n\ninterface IBaseStructuredPane {\n    id: string;\n    label: string;\n    description: string;\n    isActive: boolean;\n    status: string;\n}\n\ninterface IStructuredPane extends IBaseStructuredPane {\n    children: IBaseStructuredPane[];\n}\n\n@Component({ tag: 'q2-stepper-vertical', shadow: true, styleUrl: 'q2-stepper-vertical.scss' })\nexport class Q2StepperVertical implements ComponentInterface {\n    /** The `id` of the currently selected `q2-stepper-pane`. */\n    @Prop({ reflect: true, mutable: true }) currentStepId: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{\n        selectedStep: HTMLQ2StepperPaneElement;\n        selectedStepId: string;\n        currentStepId: string;\n    }>;\n    @State() structuredPanes: IStructuredPane[] = [];\n    mutationObserver: MutationObserver;\n    expandedStepChildrenList: HTMLUListElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        this.setDefaultPane();\n        this.buildPaneList();\n        const observer = new MutationObserver(this.determinePaneChanges);\n        const observerOptions = {\n            childList: true,\n        };\n        observer.observe(this.hostElement, observerOptions);\n        this.allRootPanes.forEach(pane => {\n            const childrenSlot = pane.querySelector('[slot=children]');\n            if (childrenSlot) observer.observe(childrenSlot, observerOptions);\n        });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.showStep(this.currentStepId), 0);\n    }\n\n    componentWillUpdate() {\n        this.expandedStepChildrenList = null;\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n\n        this.openCurrentStepChildren();\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n    get allRootPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>(':scope > q2-stepper-pane'));\n    }\n\n    get allPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n    }\n\n    /// Helpers ///\n    setDefaultPane() {\n        if (this.currentStepId) return;\n        const firstEnabledStep = this.hostElement.querySelector('q2-stepper-pane');\n        if (!firstEnabledStep) return;\n        if (!firstEnabledStep.id) firstEnabledStep.id = `step-${createGuid()}`;\n        this.currentStepId = firstEnabledStep.id;\n    }\n\n    determinePaneChanges = (mutations: MutationRecord[]) => {\n        mutations.forEach(mutation => {\n            if (mutation.type !== 'childList') return;\n            if (!mutation.addedNodes.length && !mutation.removedNodes.length) return;\n            if (\n                mutation.addedNodes[0]?.nodeType !== Node.ELEMENT_NODE &&\n                mutation.removedNodes[0]?.nodeType !== Node.ELEMENT_NODE\n            )\n                return;\n            this.buildPaneList();\n        });\n    };\n\n    getStepId(currentStepId: string, goTo: string) {\n        const allEnabledStepBtns = Array.from(\n            this.hostElement.shadowRoot.querySelectorAll<HTMLQ2StepperPaneElement>(\n                'ul:not([aria-hidden=\"true\"]) > li > button:not([aria-disabled=\"true\"])'\n            )\n        );\n        const currentStepIndex = allEnabledStepBtns.findIndex(\n            btn => btn.getAttribute('aria-controls') === currentStepId\n        );\n\n        let nextStepIndex;\n        switch (goTo) {\n            case 'prev':\n                nextStepIndex = Math.max(currentStepIndex - 1, 0);\n                break;\n\n            case 'next':\n                nextStepIndex = Math.min(currentStepIndex + 1, allEnabledStepBtns.length - 1);\n                break;\n\n            case 'first':\n                nextStepIndex = 0;\n                break;\n\n            case 'last':\n                nextStepIndex = allEnabledStepBtns.length - 1;\n                break;\n        }\n\n        return allEnabledStepBtns[nextStepIndex].getAttribute('aria-controls');\n    }\n\n    showStep(stepId: string) {\n        this.scheduledAfterRender.push(this.resizeIframe);\n        this.showStepPane(stepId);\n        this.focusStepBtn(stepId);\n    }\n\n    extractDetails(pane: HTMLQ2StepperPaneElement) {\n        const { label, description, status } = pane;\n        if (!pane.id) pane.id = `step-${createGuid()}`;\n        return {\n            id: pane.id,\n            label,\n            description,\n            status,\n        };\n    }\n\n    buildPaneList = () => {\n        const { allRootPanes } = this;\n        if (!allRootPanes.length) return;\n\n        this.structuredPanes = Array.from(allRootPanes).reduce((accum, pane) => {\n            const children = Array.from(pane.querySelector('[slot=children]')?.children ?? [])\n                .filter(({ tagName }) => tagName === 'Q2-STEPPER-PANE')\n                .map(this.extractDetails);\n\n            accum.push({ ...this.extractDetails(pane), children });\n            return accum;\n        }, []);\n    };\n\n    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\n    }\n\n    openCurrentStepChildren() {\n        const { expandedStepChildrenList } = this;\n        const allSpacers = this.hostElement.shadowRoot.querySelectorAll<HTMLDivElement>('.spacer');\n        allSpacers.forEach(spacer => {\n            if (expandedStepChildrenList && spacer.contains(expandedStepChildrenList)) {\n                spacer.style.height = `${expandedStepChildrenList.clientHeight}px`;\n                if (spacer.classList.contains('is-open')) return;\n                spacer.classList.add('is-opening');\n                spacer.addEventListener(\n                    'transitionend',\n                    () => {\n                        spacer.classList.remove('is-opening');\n                        spacer.classList.add('is-open');\n                        this.resizeIframe();\n                    },\n                    { once: true }\n                );\n            } else {\n                spacer.removeAttribute('style');\n                spacer.classList.remove('is-open', 'is-opening');\n            }\n        });\n    }\n\n    showStepPane(stepId: string) {\n        this.allPanes.forEach(pane => {\n            if (pane.isActive || pane.id === stepId) {\n                pane.isActive = stepId === pane.id;\n            }\n        });\n    }\n\n    focusStepBtn(stepId: string, forceFocus?: boolean) {\n        const stepBtn = this.hostElement.shadowRoot.querySelector<HTMLElement>(`button[aria-controls=\"${stepId}\"]`);\n        const isComponentActive = document.activeElement === this.hostElement;\n        if (!stepBtn) return;\n        if (isComponentActive || forceFocus) {\n            stepBtn.focus();\n        }\n    }\n\n    /// Listeners ///\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        const { hostElement } = this;\n        if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n            this.currentStepId = event.detail.selectedStepId;\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusStepBtn(this.currentStepId, true);\n    }\n\n    @Listen('statusChange')\n    statusChangeHandler() {\n        this.buildPaneList();\n    }\n\n    /// Watchers ///\n    @Watch('currentStepId')\n    currentStepChanged(stepId: string) {\n        this.showStep(stepId);\n    }\n\n    /// Event Handlers ///\n    onStepClick = (event, stepId: string) => {\n        event.stopPropagation();\n        const { currentStepId } = this;\n        if (stepId === currentStepId) return;\n        const selectedStep = this.allPanes.find(pane => pane.id === stepId);\n\n        this.change.emit({\n            selectedStep,\n            selectedStepId: stepId,\n            currentStepId,\n        });\n    };\n\n    onStepKeyDown = (event: KeyboardEvent, stepId: string) => {\n        const { key } = event;\n\n        let selectedStepId;\n        switch (key) {\n            case 'ArrowUp':\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedStepId = this.getStepId(stepId, 'prev');\n                break;\n\n            case 'ArrowDown':\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedStepId = this.getStepId(stepId, 'next');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                selectedStepId = this.getStepId(stepId, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                selectedStepId = this.getStepId(stepId, 'last');\n                break;\n        }\n\n        if (!selectedStepId) return;\n        this.focusStepBtn(selectedStepId, true);\n    };\n\n    /// DOM ///\n    renderStepBtn(pane: IStructuredPane, index: number) {\n        const { currentStepId, structuredPanes } = this;\n        const isLastStep = index === structuredPanes.length - 1;\n        const { id, label, description, status } = pane;\n        const stepNumber = index + 1;\n        const isCurrentStep = id === currentStepId;\n        const labelId = label && `label-${id}`;\n        const isLocked = status === 'locked';\n        const stepLabel = label && loc(label);\n        const descriptionId = label && description && `description-${id}`;\n        const btnLabel =\n            !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);\n\n        let statusIcon;\n        if (status === 'complete') statusIcon = 'success-filled';\n        else if (status === 'error') statusIcon = 'warning-filled';\n\n        const stepClasses = ['step-btn'];\n        if (status) stepClasses.push(`status-${status}`);\n\n        const childIds = pane.children.map(child => child.id);\n        const isExpanded = isCurrentStep || childIds.includes(currentStepId);\n\n        return (\n            <li role=\"presentation\">\n                <button\n                    class={stepClasses.join(' ')}\n                    type=\"button\"\n                    aria-labelledby={labelId}\n                    aria-describedBy={descriptionId}\n                    aria-label={btnLabel}\n                    aria-selected={`${isCurrentStep}`}\n                    aria-expanded={!!pane.children.length ? `${isExpanded}` : null}\n                    aria-controls={id}\n                    aria-disabled={isLocked ? 'true' : null}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, id)}\n                >\n                    {statusIcon ? (\n                        <div class=\"step-icon\">\n                            <q2-icon type={statusIcon}></q2-icon>\n                        </div>\n                    ) : (\n                        <div class=\"step-bubble\">{stepNumber}</div>\n                    )}\n\n                    {label && (\n                        <div>\n                            <div\n                                class=\"step-label\"\n                                id={labelId}\n                            >\n                                {stepLabel}\n                            </div>\n                            {description && (\n                                <div\n                                    class=\"step-description\"\n                                    id={descriptionId}\n                                >\n                                    {loc(description)}\n                                </div>\n                            )}\n                        </div>\n                    )}\n                </button>\n                {this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)}\n            </li>\n        );\n    }\n\n    renderSpacer(pane: IStructuredPane, stepLabel: string, isExpanded: boolean, isLastStep: boolean) {\n        const shouldRender = (isLastStep && !!pane.children.length) || !isLastStep;\n        const spacerClasses = ['spacer'];\n        if (!isLastStep) spacerClasses.push('has-sibling');\n        return (\n            shouldRender && (\n                <div class={spacerClasses.join(' ')}>\n                    {!!pane.children.length && (\n                        <ul\n                            ref={el => isExpanded && (this.expandedStepChildrenList = el)}\n                            aria-hidden={`${!isExpanded}`}\n                        >\n                            {pane.children.map((child, index, children) =>\n                                this.renderChildStepBtn(child, index, children.length, stepLabel)\n                            )}\n                        </ul>\n                    )}\n                </div>\n            )\n        );\n    }\n\n    renderChildStepBtn(pane: IBaseStructuredPane, index: number, children: number, parentLabel: string) {\n        const { currentStepId } = this;\n        const { id, label, status } = pane;\n        const stepNumber = index + 1;\n        const labelId = label && `label-${id}`;\n        const isCurrentStep = id === currentStepId;\n        const isLocked = status === 'locked';\n        const btnLabel =\n            !label && loc('tecton.element.advancedStepper.childNumber', [`${stepNumber}`, `${children}`, parentLabel]);\n\n        let statusIcon;\n        if (status === 'error') statusIcon = 'warning-filled';\n\n        const stepClasses = ['step-child-btn'];\n        if (status) stepClasses.push(`status-${status}`);\n\n        return (\n            <li role=\"presentation\">\n                <button\n                    class={stepClasses.join(' ')}\n                    type=\"button\"\n                    aria-labelledby={labelId}\n                    aria-label={btnLabel}\n                    aria-selected={`${isCurrentStep}`}\n                    aria-controls={id}\n                    aria-disabled={isLocked ? 'true' : null}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, id)}\n                >\n                    {statusIcon && (\n                        <div class=\"step-child-icon\">\n                            <q2-icon type={statusIcon}></q2-icon>\n                        </div>\n                    )}\n                    {label && (\n                        <div\n                            class=\"step-child-label\"\n                            id={labelId}\n                        >\n                            {loc(label)}\n                        </div>\n                    )}\n                </button>\n            </li>\n        );\n    }\n\n    render() {\n        return (\n            <Fragment>\n                <ul role=\"tablist\">{this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))}</ul>\n                <div>\n                    <slot />\n                </div>\n            </Fragment>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-ecce27a0.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as r,g as a}from"./p-a5f18e27.js";import{c as o,s as i,o as n,i as s,m as c,d as l,l as v}from"./p-5c46acb8.js";const h="*{box-sizing:border-box}*:active{outline:none}*:focus{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;margin:var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-6x, 30px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-6x, 30px)));font-size:var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}label{--comp-label-padding:var(--tct-textarea-label-padding, 0 var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0)) 0 var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0)));--comp-label-margin:var(--tct-textarea-label-margin, var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0)) 0 var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));display:block;padding:var(--comp-label-padding);margin:var(--comp-label-margin);color:var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit));font-size:var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit));font-weight:var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600));text-transform:var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none));letter-spacing:var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)));font-size:var(--tct-textarea-error-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)));font-weight:var(--tct-textarea-error-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)));text-transform:var(--tct-textarea-error-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)));letter-spacing:var(--tct-textarea-error-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)))}:hover label{color:var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)));font-size:var(--tct-textarea-hover-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)));font-weight:var(--tct-textarea-hover-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)));text-transform:var(--tct-textarea-hover-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)));letter-spacing:var(--tct-textarea-hover-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)))}.has-error :hover label{color:var(--tct-textarea-error-hover-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, inherit)))));font-size:var(--tct-textarea-error-hover-label-font-size, var(--tct-textarea-error-label-font-size, var(--tct-textarea-hover-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)))));font-weight:var(--tct-textarea-error-hover-label-font-weight, var(--tct-textarea-error-label-font-weight, var(--tct-textarea-hover-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)))));text-transform:var(--tct-textarea-error-hover-label-text-transform, var(--tct-textarea-error-label-text-transform, var(--tct-textarea-hover-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)))));letter-spacing:var(--tct-textarea-error-hover-label-letter-spacing, var(--tct-textarea-error-label-letter-spacing, var(--tct-textarea-hover-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)))))}:focus-within label{color:var(--tct-textarea-focused-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)));font-size:var(--tct-textarea-focused-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)));font-weight:var(--tct-textarea-focused-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)));text-transform:var(--tct-textarea-focused-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)));letter-spacing:var(--tct-textarea-focused-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)))}.has-error :focus-within label{color:var(--tct-textarea-error-focused-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-focused-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit))))));font-size:var(--tct-textarea-error-focused-label-font-size, var(--tct-textarea-error-label-font-size, var(--tct-textarea-focused-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)))));font-weight:var(--tct-textarea-error-focused-label-font-weight, var(--tct-textarea-error-label-font-weight, var(--tct-textarea-focused-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)))));text-transform:var(--tct-textarea-error-focused-label-text-transform, var(--tct-textarea-error-label-text-transform, var(--tct-textarea-focused-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)))));letter-spacing:var(--tct-textarea-error-focused-label-letter-spacing, var(--tct-textarea-error-label-letter-spacing, var(--tct-textarea-focused-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)))))}.optional-tag{--comp-label-optional-margin:var(--tct-textarea-label-optional-margin, 0 0 0 var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-textarea-label-optional-font-color, var(--t-textarea-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-textarea-label-optional-font-size, var(--t-textarea-label-optional-font-size, 12px));font-weight:var(--tct-textarea-label-optional-font-weight, var(--t-textarea-label-optional-font-weight, 400))}.input-container{min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));height:100%;--comp-default-border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 3px));--comp-textarea-border-top-left-radius:var(--tct-textarea-border-top-left-radius, var(--t-textarea-border-top-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-top-right-radius:var(--tct-textarea-border-top-right-radius, var(--t-textarea-border-top-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-right-radius:var(--tct-textarea-border-bottom-right-radius, var(--t-textarea-border-bottom-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-left-radius:var(--tct-textarea-border-bottom-left-radius, var(--t-textarea-border-bottom-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n      var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n      var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) var(--tct-textarea-border-right-width, var(--t-textarea-border-right-width, 1px)) var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) var(--tct-textarea-border-left-width, var(--t-textarea-border-left-width, 1px));--comp-textarea-focus-border-width:var(--tct-textarea-focus-border-top-width, var(--t-textarea-focus-border-top-width, 1px)) var(--tct-textarea-focus-border-right-width, var(--t-textarea-focus-border-right-width, 1px)) var(--tct-textarea-focus-border-bottom-width, var(--t-textarea-focus-border-bottom-width, 1px)) var(--tct-textarea-focus-border-left-width, var(--t-textarea-focus-border-left-width, 1px));--comp-textarea-icon-clearance:34px}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-textarea-disabled-opacity, var(--t-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.content-container{--comp-textarea-min-height:46px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));min-width:var(--tct-textarea-min-width, var(--t-textarea-min-width, var(--comp-textarea-min-width)))}:host(:not([cols])) .content-container{width:100%}textarea{--comp-textarea-padding:var(--tct-textarea-padding, var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))) var(--tct-textarea-horizontal-padding, var(--t-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))));--comp-textarea-border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));--comp-textarea-background:var(--tct-textarea-background, var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))))));--comp-textarea-hover-ring-color:var(--tct-textarea-hover-ring-color);--comp-textarea-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color), var(--tct-textarea-hover-box-shadow, 0 0 transparent);resize:none;height:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));padding:var(--comp-textarea-padding);background:var(--comp-textarea-background);color:var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(--comp-textarea-border-color);border-radius:var(--comp-textarea-border-radius);box-shadow:var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none));scrollbar-width:thin;scrollbar-color:var(--t-a11y-gray-color) transparent;--comp-textarea-tween:var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));transition:border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween), box-shadow var(--comp-textarea-tween)}textarea::-webkit-scrollbar{width:var(--app-scale-1x);height:var(--app-scale-1x);margin:var(--app-scale-1x)}textarea::-webkit-scrollbar-thumb{background:var(--t-a11y-gray-color);border-radius:2px}textarea::-webkit-scrollbar-track{background:transparent}textarea:not([cols]){width:100%}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance);border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-textarea-error-background, var(--comp-textarea-background))}textarea:hover{border-color:var(--tct-textarea-hover-border-color, var(--comp-textarea-border-color));background:var(--tct-textarea-hover-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))}.has-error textarea:hover{border-color:var(--tct-textarea-error-hover-border-color, var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a))));background:var(--tct-textarea-error-hover-background, var(--tct-textarea-error-background, var(--comp-textarea-background)));box-shadow:var(--tct-textarea-error-hover-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))))}textarea:focus{border-color:var(--tct-textarea-focus-border-color, var(--comp-textarea-border-color));background:var(--tct-textarea-focus-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))}.has-error textarea:focus{border-color:var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-textarea-error-focus-background, var(--tct-textarea-error-background, var(--tct-textarea-focus-background, var(--comp-textarea-background))));box-shadow:var(--tct-textarea-error-focus-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))))}textarea::placeholder{color:var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))))}textarea[disabled]{cursor:not-allowed}textarea.resize-vertical-auto{overflow:hidden}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error textarea:not(:focus){border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)))}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));color:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));--t-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))))}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));box-shadow:var(--tct-textarea-message-box-shadow, var(--t-textarea-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))));transition:height var(--tct-textarea-messages-tween, var(--t-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, var(--t-textarea-messages-font-color, inherit))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(\n      calc(\n              var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px))) - var(--tct-textarea-resize-icon-size, var(--t-textarea-resize-icon-size, 12px))\n          ) / 2\n  );width:var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)));height:var(--tct-textarea-resize-btn-height, var(--t-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px)));background:var(--tct-textarea-resize-btn-background, var(--t-textarea-resize-btn-background, transparent));stroke:var(--tct-textarea-resize-color, var(--t-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77))));border:0;position:absolute;right:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);bottom:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);display:block;padding:var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding));font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize=both]) .btn-resize{cursor:se-resize}:host([resize=vertical]) .btn-resize,:host([resize=vertical-auto]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";const x=h;const d=class{constructor(r){t(this,r);this.input=e(this,"input",7);this.change=e(this,"change",7);this.scheduledAfterRender=[];this.guid=o();this.checkRows=()=>{const{contentContainer:t,rows:e,textareaField:r,resize:a}=this;if(!e||["none","horizontal"].includes(a))return;t.style.height=`${t.offsetHeight}px`;r.removeAttribute("rows")};this.checkCols=()=>{const{contentContainer:t,cols:e,textareaField:r,resize:a}=this;if(!e||["none","vertical"].includes(a))return;t.style.width=`${t.offsetWidth}px`;r.removeAttribute("cols")};this.onTextareaFocus=()=>{this.hasFocus=true;this.valueOnFocus=this.value;i(this)};this.onTextareaBlur=()=>{const{valueOnFocus:t,textareaField:{value:e}}=this;this.hasFocus=false;i(this);if(t!==e)this.change.emit({value:e})};this.onTextareaInput=t=>{t.stopPropagation();const e=t.target.value;this.increaseHeightIfOverflowing();this.input.emit({value:e})};this.onTextareaChange=t=>{t.stopPropagation();const e=t.target.value;this.change.emit({value:e})};this.onMouseDown=t=>{const{contentContainer:e}=this;this.downParams={width:e.offsetWidth,height:e.offsetHeight,x:t.clientX,y:t.clientY};document.addEventListener("mousemove",this.onMouseMove);document.addEventListener("mouseup",this.onMouseUp)};this.onMouseMove=t=>{this.setHeight(t);this.setWidth(t)};this.onTouchStart=t=>{if(t.touches.length!==1)return;t.preventDefault();const{contentContainer:e}=this;const r=t.touches[0];this.downParams={width:e.offsetWidth,height:e.offsetHeight,x:r.pageX,y:r.pageY};document.addEventListener("touchmove",this.onTouchMove);document.addEventListener("touchend",this.onTouchMove)};this.onTouchMove=t=>{this.setHeight(t);this.setWidth(t)};this.increaseHeightIfOverflowing=()=>{const{scrollHeight:t}=this.textareaField;if(this.resize==="vertical-auto"&&this.isOverflowingVertically()){const e=t+this.getBorderOffset();this.contentContainer.style.height=`${e}px`}};this.isOverflowingVertically=()=>{const{clientHeight:t,scrollHeight:e}=this.textareaField;return e>t};this.getBorderOffset=()=>{const t=window.getComputedStyle(this.textareaField);return parseInt(t.borderTopWidth,10)+parseInt(t.borderBottomWidth,10)};this.onMouseUp=()=>{document.removeEventListener("mousemove",this.onMouseMove);this.downParams=null};this.cols=undefined;this.disabled=undefined;this.errors=undefined;this.hints=undefined;this.hideLabel=undefined;this.hideMessages=undefined;this.label=undefined;this.maxlength=undefined;this.optional=undefined;this.placeholder=undefined;this.readonly=undefined;this.resize="vertical";this.rows=undefined;this.spellcheck=undefined;this.value=undefined;this.hasFocus=undefined;this.downParams=undefined}componentWillLoad(){if(isNaN(this.maxlength)){this.maxlength=undefined}}componentDidRender(){this.scheduledAfterRender.push(this.checkRows,this.checkCols,this.increaseHeightIfOverflowing);this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}componentDidLoad(){n(this.hostElement)}get hasError(){return Array.isArray(this.errors)&&this.errors.length>0}get messages(){return this.errors&&this.errors.length>0&&this.errors||this.hints&&this.hints.length>0&&this.hints||[]}get showMessages(){return this.messages.length>0&&!this.hideMessages}get inputId(){return`input-guid-${this.guid}`}get inputDescribedBy(){return this.showMessages?`${this.inputId}-description`:undefined}get wrapperClasses(){const t=this.hasError?" has-error":"";const e=!!this.value?" has-value":"";const r=this.hasFocus?" has-focus":"";return`field-container${t}${e}${r}`}get showResize(){const{resize:t}=this;return t&&t!=="none"}valueObserver(){const{maxlength:t,value:e=""}=this;if(!t)return;const r=e.substr(0,t);if(r===e)return;this.change.emit({value:r})}rowsObserver(){this.contentContainer.style.height=null}colsObserver(){this.contentContainer.style.width=null}hintsObserver(){this.hasFocus&&this.scheduledAfterRender.push((()=>i(this)))}errorsObserver(){this.hasFocus&&this.scheduledAfterRender.push((()=>i(this)))}onHostElementFocus(t){if(!s(t,this.hostElement))return;this.textareaField.focus()}onHostElementChange(t){if(t.target===this.hostElement&&!this.hostElement.onchange){this.value=t.detail.value}}onHostElementInput(t){if(t.target===this.hostElement&&!this.hostElement.oninput){this.value=t.detail.value}}setValue(t){const{textareaField:e}=this;e.focus();e.value=t;e.dispatchEvent(new InputEvent("input"))}setWidth(t){var e,r;const{contentContainer:a,resize:o,downParams:{width:i,x:n}}=this;const s=["both","horizontal"].includes(o);if(!s)return;const c=t instanceof MouseEvent?t.clientX:(r=(e=t.touches[0])===null||e===void 0?void 0:e.pageX)!==null&&r!==void 0?r:0;const l=i-(n-c);a.style.width=`${l}px`}setHeight(t){var e,r;const{contentContainer:a,resize:o,downParams:{height:i,y:n}}=this;const s=["both","vertical","vertical-auto"].includes(o);if(!s)return;const c=t instanceof MouseEvent?t.clientY:(r=(e=t.touches[0])===null||e===void 0?void 0:e.pageY)!==null&&r!==void 0?r:0;const l=i-(n-c);if(o!=="vertical-auto"||l>i||o==="vertical-auto"&&!this.isOverflowingVertically()){a.style.height=`${l}px`}}render(){return r("div",{key:"dc6f1027bf094f312023641cf17b5cd70a5e9c76",class:this.wrapperClasses},l(this),r("div",{key:"8b329ded6e721ed344e765dc7c2d76dfaada8cfe",class:"content-container",ref:t=>this.contentContainer=t},this.inputDOM(),this.maxlength?this.maxLengthDOM():"",c(this)))}maxLengthDOM(){var t;return r("div",{class:"max-length","aria-hidden":"true"},((t=this.value)===null||t===void 0?void 0:t.length)||0,"/",this.maxlength)}inputDOM(){const t=this.resize==="vertical-auto"?"resize-vertical-auto":"";return r("div",{class:"input-container"},r("textarea",{id:this.inputId,class:t,placeholder:this.placeholder&&v(this.placeholder)||undefined,"test-id":"inputField",maxLength:this.maxlength,"aria-describedby":this.inputDescribedBy,"aria-invalid":`${this.hasError}`,"aria-required":`${!this.optional}`,"aria-label":this.hideLabel&&this.label,spellcheck:this.spellcheck,rows:this.rows||3,cols:this.cols,value:this.value,ref:t=>this.textareaField=t,readonly:!!this.readonly,disabled:!!this.disabled,maxlength:this.maxlength,onInput:this.onTextareaInput,onChange:this.onTextareaChange,onFocus:this.onTextareaFocus,onBlur:this.onTextareaBlur}),this.hasError?r("q2-icon",{type:"error",class:"icon-error"}):"",this.showResize&&r("button",{onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,class:"btn-resize","aria-label":v("tecton.element.input.resize"),tabIndex:-1},r("svg",{"aria-hidden":"true",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},r("path",{d:"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11",fill:"none","stroke-stroke-linecap":"square"}))))}get hostElement(){return a(this)}static get watchers(){return{value:["valueObserver"],rows:["rowsObserver"],cols:["colsObserver"],hints:["hintsObserver"],errors:["errorsObserver"]}}};d.style=x;export{d as q2_textarea};
-//# sourceMappingURL=p-ecce27a0.entry.js.map

package/dist/q2-tecton-elements/p-ecce27a0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["q2TextareaCss","Q2TextareaStyle0","Q2Textarea","this","scheduledAfterRender","guid","createGuid","checkRows","contentContainer","rows","textareaField","resize","includes","style","height","offsetHeight","removeAttribute","checkCols","cols","width","offsetWidth","onTextareaFocus","hasFocus","valueOnFocus","value","setMessageHeight","onTextareaBlur","change","emit","onTextareaInput","event","stopPropagation","target","increaseHeightIfOverflowing","input","onTextareaChange","onMouseDown","downParams","x","clientX","y","clientY","document","addEventListener","onMouseMove","onMouseUp","setHeight","setWidth","onTouchStart","touches","length","preventDefault","firstTouch","pageX","pageY","onTouchMove","scrollHeight","isOverflowingVertically","newHeight","getBorderOffset","clientHeight","computedStyle","window","getComputedStyle","parseInt","borderTopWidth","borderBottomWidth","removeEventListener","componentWillLoad","isNaN","maxlength","undefined","componentDidRender","push","forEach","fn","componentDidLoad","overrideFocus","hostElement","hasError","Array","isArray","errors","messages","hints","showMessages","hideMessages","inputId","inputDescribedBy","wrapperClasses","errorClass","valueClass","focusClass","showResize","valueObserver","truncatedValue","substr","rowsObserver","colsObserver","hintsObserver","errorsObserver","onHostElementFocus","isEventFromElement","focus","onHostElementChange","onchange","detail","onHostElementInput","oninput","setValue","dispatchEvent","InputEvent","resizeX","eventX","MouseEvent","_b","_a","newWidth","resizeY","eventY","render","h","key","class","labelDOM","ref","el","inputDOM","maxLengthDOM","messagesDOM","textareaClasses","id","placeholder","loc","maxLength","optional","hideLabel","label","spellcheck","readonly","disabled","onInput","onChange","onFocus","onBlur","type","tabIndex","viewBox","xmlns","d","fill"],"sources":["src/components/q2-textarea/q2-textarea.scss?tag=q2-textarea&encapsulation=shadow","src/components/q2-textarea/q2-textarea.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    margin: var-list(var-prefixer(textarea-margin-top), --app-scale-6x, 30px) 0\n        var-list(var-prefixer(textarea-margin-bottom), --app-scale-6x, 30px);\n    font-size: var-list(var-prefixer(textarea-font-size), --app-font-size, inherit);\n}\n\n:host([hidden]) {\n    display: none;\n}\n\nlabel {\n    --comp-label-padding: #{var-list(\n            --tct-textarea-label-padding,\n            unquote(\n                '0 #{var-list(var-prefixer(textarea-label-padding-right), 0)} 0 #{var-list(var-prefixer(textarea-label-padding-left), 0)}'\n            )\n        )};\n    --comp-label-margin: #{var-list(\n            --tct-textarea-label-margin,\n            unquote(\n                '#{var-list(var-prefixer(textarea-label-margin-top), 0)} 0 #{var-list(var-prefixer(textarea-label-margin-bottom), --tct-scale-1x, --app-scale-1x, 5px)}'\n            )\n        )};\n    display: block;\n    padding: var(--comp-label-padding);\n    margin: var(--comp-label-margin);\n    color: var-list(var-prefixer(textarea-label-font-color), inherit);\n    font-size: var-list(var-prefixer(textarea-label-font-size), inherit);\n    font-weight: var-list(var-prefixer(textarea-label-font-weight), 600);\n    text-transform: var-list(var-prefixer(textarea-label-text-transform), none);\n    letter-spacing: var-list(var-prefixer(textarea-label-letter-spacing), normal);\n    transition: color var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'));\n\n    .has-error & {\n        color: var-list(var-prefixer(textarea-error-label-font-color), --tct-textarea-label-font-color, inherit);\n        font-size: var-list(--tct-textarea-error-label-font-size, var-prefixer(textarea-label-font-size), inherit);\n        font-weight: var-list(--tct-textarea-error-label-font-weight, var-prefixer(textarea-label-font-weight), 600);\n        text-transform: var-list(\n            --tct-textarea-error-label-text-transform,\n            var-prefixer(textarea-label-text-transform),\n            none\n        );\n        letter-spacing: var-list(\n            --tct-textarea-error-label-letter-spacing,\n            var-prefixer(textarea-label-letter-spacing),\n            normal\n        );\n    }\n\n    :hover & {\n        color: var-list(--tct-textarea-hover-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n        font-size: var-list(--tct-textarea-hover-label-font-size, var-prefixer(textarea-label-font-size), inherit);\n        font-weight: var-list(--tct-textarea-hover-label-font-weight, var-prefixer(textarea-label-font-weight), 600);\n        text-transform: var-list(\n            --tct-textarea-hover-label-text-transform,\n            var-prefixer(textarea-label-text-transform),\n            none\n        );\n        letter-spacing: var-list(\n            --tct-textarea-hover-label-letter-spacing,\n            var-prefixer(textarea-label-letter-spacing),\n            normal\n        );\n\n        .has-error & {\n            color: var-list(\n                --tct-textarea-error-hover-label-font-color,\n                var-prefixer(textarea-error-label-font-color),\n                --tct-textarea-hover-label-font-color,\n                --tct-textarea-label-font-color,\n                inherit\n            );\n            font-size: var-list(\n                --tct-textarea-error-hover-label-font-size,\n                --tct-textarea-error-label-font-size,\n                --tct-textarea-hover-label-font-size,\n                var-prefixer(textarea-label-font-size),\n                inherit\n            );\n            font-weight: var-list(\n                --tct-textarea-error-hover-label-font-weight,\n                --tct-textarea-error-label-font-weight,\n                --tct-textarea-hover-label-font-weight,\n                var-prefixer(textarea-label-font-weight),\n                600\n            );\n            text-transform: var-list(\n                --tct-textarea-error-hover-label-text-transform,\n                --tct-textarea-error-label-text-transform,\n                --tct-textarea-hover-label-text-transform,\n                var-prefixer(textarea-label-text-transform),\n                none\n            );\n            letter-spacing: var-list(\n                --tct-textarea-error-hover-label-letter-spacing,\n                --tct-textarea-error-label-letter-spacing,\n                --tct-textarea-hover-label-letter-spacing,\n                var-prefixer(textarea-label-letter-spacing),\n                normal\n            );\n        }\n    }\n\n    :focus-within & {\n        color: var-list(--tct-textarea-focused-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n        font-size: var-list(--tct-textarea-focused-label-font-size, var-prefixer(textarea-label-font-size), inherit);\n        font-weight: var-list(--tct-textarea-focused-label-font-weight, var-prefixer(textarea-label-font-weight), 600);\n        text-transform: var-list(\n            --tct-textarea-focused-label-text-transform,\n            var-prefixer(textarea-label-text-transform),\n            none\n        );\n        letter-spacing: var-list(\n            --tct-textarea-focused-label-letter-spacing,\n            var-prefixer(textarea-label-letter-spacing),\n            normal\n        );\n\n        .has-error & {\n            color: var-list(\n                --tct-textarea-error-focused-label-font-color,\n                var-prefixer(textarea-error-label-font-color),\n                --tct-textarea-focused-label-font-color,\n                var-prefixer(textarea-label-font-color),\n                inherit\n            );\n            font-size: var-list(\n                --tct-textarea-error-focused-label-font-size,\n                --tct-textarea-error-label-font-size,\n                --tct-textarea-focused-label-font-size,\n                var-prefixer(textarea-label-font-size),\n                inherit\n            );\n            font-weight: var-list(\n                --tct-textarea-error-focused-label-font-weight,\n                --tct-textarea-error-label-font-weight,\n                --tct-textarea-focused-label-font-weight,\n                var-prefixer(textarea-label-font-weight),\n                600\n            );\n            text-transform: var-list(\n                --tct-textarea-error-focused-label-text-transform,\n                --tct-textarea-error-label-text-transform,\n                --tct-textarea-focused-label-text-transform,\n                var-prefixer(textarea-label-text-transform),\n                none\n            );\n            letter-spacing: var-list(\n                --tct-textarea-error-focused-label-letter-spacing,\n                --tct-textarea-error-label-letter-spacing,\n                --tct-textarea-focused-label-letter-spacing,\n                var-prefixer(textarea-label-letter-spacing),\n                normal\n            );\n        }\n    }\n}\n\n.optional-tag {\n    --comp-label-optional-margin: #{var-list(\n            --tct-textarea-label-optional-margin,\n            unquote(\n                '0 0 0 #{var-list(var-prefixer(textarea-label-optional-margin-left), --tct-scale-1x, --app-scale-1x, 5px)}'\n            )\n        )};\n    margin: var(--comp-label-optional-margin);\n    color: var-list(\n        var-prefixer(textarea-label-optional-font-color),\n        --t-textA,\n        --t-a11y-gray-color,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(textarea-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(textarea-label-optional-font-weight), 400);\n}\n\n.input-container {\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    height: 100%;\n    --comp-default-border-radius: #{var-list(--tct-border-radius-1, --app-border-radius-1, 3px)};\n    --comp-textarea-border-top-left-radius: #{var-list(\n            var-prefixer(textarea-border-top-left-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-top-right-radius: #{var-list(\n            var-prefixer(textarea-border-top-right-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-bottom-right-radius: #{var-list(\n            var-prefixer(textarea-border-bottom-right-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-bottom-left-radius: #{var-list(\n            var-prefixer(textarea-border-bottom-left-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-radius: var(--comp-textarea-border-top-left-radius)\n        var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n        var(--comp-textarea-border-bottom-left-radius);\n    --comp-textarea-border-width: #{var-list(var-prefixer(textarea-border-top-width), 1px)\n        var-list(var-prefixer(textarea-border-right-width), 1px)\n        var-list(var-prefixer(textarea-border-bottom-width), 1px)\n        var-list(var-prefixer(textarea-border-left-width), 1px)};\n    --comp-textarea-focus-border-width: #{var-list(var-prefixer(textarea-focus-border-top-width), 1px)\n        var-list(var-prefixer(textarea-focus-border-right-width), 1px)\n        var-list(var-prefixer(textarea-focus-border-bottom-width), 1px)\n        var-list(var-prefixer(textarea-focus-border-left-width), 1px)};\n    --comp-textarea-icon-clearance: 34px;\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n        opacity: var-list(var-prefixer(textarea-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    }\n}\n\n.content-container {\n    --comp-textarea-min-height: 46px;\n    --comp-textarea-min-width: 150px;\n    position: relative;\n    display: inline-block;\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    min-width: var-list(var-prefixer(textarea-min-width) --comp-textarea-min-width);\n\n    :host(:not([cols])) & {\n        width: 100%;\n    }\n}\n\ntextarea {\n    --comp-textarea-padding: #{var-list(\n            --tct-textarea-padding,\n            unquote(\n                '#{var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px)} #{var-list(var-prefixer(textarea-horizontal-padding), --tct-scale-2x, --app-scale-2x, 10px)}'\n            )\n        )};\n    --comp-textarea-border-color: #{var-list(\n            var-prefixer(textarea-border-color),\n            var-prefixer(input-border-color),\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-textarea-background: #{var-list(\n            --tct-textarea-background,\n            var-prefixer(textarea-bg),\n            --tct-input-background,\n            var-prefixer(input-bg),\n            --t-gray-14,\n            #fcfcfd\n        )};\n    --comp-textarea-hover-ring-color: var(--tct-textarea-hover-ring-color);\n    --comp-textarea-hover-ring: #{0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color),\n        var-list(--tct-textarea-hover-box-shadow, unquote('0 0 transparent'))};\n\n    resize: none;\n    height: 100%;\n    -webkit-appearance: none;\n    appearance: none;\n    display: block;\n    box-sizing: border-box;\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    padding: var(--comp-textarea-padding);\n    background: var(--comp-textarea-background);\n    color: var-list(var-prefixer(textarea-font-color), --t-input-font-color, inherit);\n    border-width: var(--comp-textarea-border-width);\n    border-style: solid;\n    border-color: var(--comp-textarea-border-color);\n    border-radius: var(--comp-textarea-border-radius);\n    box-shadow: var-list(var-prefixer(textarea-box-shadow), none);\n    scrollbar-width: thin;\n    scrollbar-color: var(--t-a11y-gray-color) transparent;\n    --comp-textarea-tween: #{var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'))};\n    transition: border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween),\n        box-shadow var(--comp-textarea-tween);\n\n    &::-webkit-scrollbar {\n        width: var(--app-scale-1x);\n        height: var(--app-scale-1x);\n        margin: var(--app-scale-1x);\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: var(--t-a11y-gray-color);\n        border-radius: 2px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &:not([cols]) {\n        width: 100%;\n    }\n\n    .has-error & {\n        padding-right: var(--comp-textarea-icon-clearance);\n        border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n        background: var-list(--tct-textarea-error-background, --comp-textarea-background);\n    }\n\n    &:hover {\n        border-color: var-list(--tct-textarea-hover-border-color, --comp-textarea-border-color);\n        background: var-list(--tct-textarea-hover-background, --comp-textarea-background);\n        box-shadow: var-list(--tct-textarea-hover-box-shadow, --comp-textarea-hover-ring);\n\n        .has-error & {\n            border-color: var-list(\n                --tct-textarea-error-hover-border-color,\n                var-prefixer(textarea-error-border-color),\n                --const-stoplight-alert,\n                #d20a0a\n            );\n            background: var-list(\n                --tct-textarea-error-hover-background,\n                --tct-textarea-error-background,\n                --comp-textarea-background\n            );\n            box-shadow: var-list(\n                --tct-textarea-error-hover-box-shadow,\n                --tct-textarea-error-box-shadow,\n                --tct-textarea-hover-box-shadow,\n                --comp-textarea-hover-ring\n            );\n        }\n    }\n\n    &:focus {\n        border-color: var-list(--tct-textarea-focus-border-color, --comp-textarea-border-color);\n        background: var-list(--tct-textarea-focus-background, --comp-textarea-background);\n        box-shadow: var-list(--tct-textarea-focus-box-shadow, --const-double-focus-ring);\n\n        .has-error & {\n            border-color: var-list(\n                --tct-textarea-error-focus-border-color,\n                --tct-textarea-error-border-color,\n                --const-stoplight-alert,\n                #d20a0a\n            );\n            background: var-list(\n                --tct-textarea-error-focus-background,\n                --tct-textarea-error-background,\n                --tct-textarea-focus-background,\n                --comp-textarea-background\n            );\n            box-shadow: var-list(\n                --tct-textarea-error-focus-box-shadow,\n                --tct-textarea-error-box-shadow,\n                --tct-textarea-focus-box-shadow,\n                --const-double-focus-ring\n            );\n        }\n    }\n\n    &::placeholder {\n        color: var-list(\n            var-prefixer(textarea-placeholder-font-color),\n            --t-input-placeholder-font-color,\n            --tct-gray-7,\n            --app-gray-7,\n            --tct-gray-d1,\n            --app-gray-d1,\n            #666666\n        );\n    }\n\n    &[disabled] {\n        cursor: not-allowed;\n    }\n\n    &.resize-vertical-auto {\n        overflow: hidden;\n    }\n\n    .has-error & {\n        padding-right: var(--comp-textarea-icon-clearance);\n\n        &:not(:focus) {\n            border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n        }\n    }\n}\n\nq2-icon {\n    margin-top: calc(#{var-list(var-prefixer(textarea-border-top-width), 1px)} / 2);\n    margin-bottom: calc(#{var-list(var-prefixer(textarea-border-bottom-width), 1px)} / 2);\n    pointer-events: none;\n    position: absolute;\n    top: var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px);\n    color: var-list(var-prefixer(textarea-icon-stroke-primary), --app-gray-9, --tct-gray, --app-gray, #999999);\n    right: 0;\n    margin-right: var-list(--tct-scale-2x, --app-scale-2x, 10px);\n    --tct-icon-stroke-primary: #{var-list(\n            var-prefixer(textarea-icon-stroke-primary),\n            var-prefixer(gray-9),\n            --tct-gray,\n            --app-gray,\n            #999999\n        )};\n    --t-icon-stroke-primary: #{var-list(\n            var-prefixer(textarea-icon-stroke-primary),\n            var-prefixer(gray-9),\n            --tct-gray,\n            --app-gray,\n            #999999\n        )};\n}\n\n.icon-error {\n    color: var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n    --t-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n}\n\n.messages-container {\n    height: 0px;\n    overflow: hidden;\n    background: var-list(\n        --tct-message-background,\n        --tct-message-bg,\n        var-prefixer(gray-14),\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    box-shadow: var-list(\n        var-prefixer(textarea-message-box-shadow),\n        --tct-box-shadow-1,\n        --app-shadow-1,\n        unquote('0 2px 4px rgba(0, 0, 0, 0.3)')\n    );\n    transition: height\n        var-list(var-prefixer(textarea-messages-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    margin-top: 2px;\n    z-index: 1;\n    position: absolute;\n    width: 100%;\n    color: var-list(var-prefixer(textarea-messages-font-color), inherit);\n}\n\n.max-length {\n    color: var-list(var-prefixer(textarea-max-length-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(\n        var-prefixer(textarea-max-length-font-size),\n        --tct-font-size-small,\n        --app-font-size-small,\n        12px\n    );\n    position: absolute;\n    right: 0;\n}\n\n.btn-resize {\n    --tct-textarea-resize-icon-padding: calc(\n        calc(\n                #{var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px)} - #{var-list(\n                        var-prefixer(textarea-resize-icon-size),\n                        12px\n                    )}\n            ) / 2\n    );\n    width: var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px);\n    height: var-list(var-prefixer(textarea-resize-btn-height), --tct-btn-icon-height, 44px);\n    background: var-list(var-prefixer(textarea-resize-btn-background), transparent);\n    stroke: var-list(var-prefixer(textarea-resize-color), --t-textA, rgba(77, 77, 77, 0.77));\n    border: 0;\n    position: absolute;\n    right: calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px);\n    bottom: calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px);\n    display: block;\n    padding: var-list(var-prefixer(textarea-resize-icon-padding));\n    font-size: 0;\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n\n    :host([resize='both']) & {\n        cursor: se-resize;\n    }\n\n    :host([resize='vertical']) &,\n    :host([resize='vertical-auto']) & {\n        cursor: s-resize;\n    }\n\n    :host([resize='horizontal']) & {\n        cursor: e-resize;\n    }\n}\n","import { Component, EventEmitter, Prop, Event, Element, State, h, Watch, Listen, Method } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport { createGuid, isEventFromElement, labelDOM, loc, messagesDOM, overrideFocus, setMessageHeight } from 'src/utils';\n\n@Component({ tag: 'q2-textarea', shadow: true, styleUrl: 'q2-textarea.scss' })\nexport class Q2Textarea {\n    private textareaField?: HTMLTextAreaElement;\n    private contentContainer?: HTMLDivElement;\n    private valueOnFocus: string;\n    private scheduledAfterRender: (() => void)[] = [];\n    private guid = createGuid();\n\n    /**\n     * Defines the number of columns displayed in the field.\n     * If not set, the field will be full-width and respond to the window size.\n     */\n    @Prop({ reflect: true }) cols: number;\n\n    /** Indicates the field cannot be focused or interacted with. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /**\n     * Each item in the `errors` array will appear below the input field when the field is focused.\n     * @localizable\n     */\n    @Prop() errors: string[];\n\n    /**\n     * Each item in the `hints` array will appear below the input field when the field is focused.\n     * @info\n     * The `errors` array takes precedence over the `hints` array. If an input field has both hints and errors, only the errors will display.\n     * Once all errors are resolved, the hints display the next time the field is focused.\n     * @localizable\n     */\n    @Prop() hints: string[];\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true }) hideLabel: boolean;\n\n    /**\n     * When `true` and the input field has an active validation error, the field shows the error state without displaying associated error messages below the field (from the errors array above).\n     * Primarily used for dropdown selects and date pickers whose controls appear below the input field (where the error messages, if displayed, would also appear).\n     */\n    @Prop({ reflect: true }) hideMessages: boolean;\n\n    /**\n     * The label that appears above the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /**\n     * Defines the maximum allowed input length in characters. Formatting characters (e.g. `.`, `-`, etc) are included in the `maxlength` comparison.\n     * Make sure you account for them when setting the `maxlength` value.\n     * @info\n     * Please set the `rows` attribute in correlation with `maxlength` to show as much text as possible in the field viewport.\n     */\n    @Prop({ reflect: true, mutable: true }) maxlength: number;\n\n    /** Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true }) optional: boolean;\n\n    /**\n     * Text that appears within the field when it is blurred and empty.\n     * Placeholder text disappears when the user focuses on the field and provides input.\n     * @info\n     * Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).\n     * @localizable\n     */\n    @Prop({ reflect: true }) placeholder: string;\n\n    /**\n     * Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n     * Takes priority over `optional` if both are `true`.\n     */\n    @Prop({ reflect: true }) readonly: boolean;\n\n    /** Indicates how the field is resizable. */\n    @Prop({ reflect: true }) resize: 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical-auto' = 'vertical';\n\n    /** Defines the number of rows displayed in the field. */\n    @Prop({ reflect: true }) rows: number;\n\n    /** Determines whether the field is subject to spell-checking by the underlying browser or OS. */\n    @Prop({ reflect: true }) spellcheck: boolean;\n\n    /** The value of the field. */\n    @Prop({ mutable: true }) value: string;\n\n    @State() hasFocus: boolean;\n    @State() downParams: IDict<number>;\n\n    /////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        if (isNaN(this.maxlength)) {\n            this.maxlength = undefined;\n        }\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.push(this.checkRows, this.checkCols, this.increaseHeightIfOverflowing);\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    checkRows = () => {\n        const { contentContainer, rows, textareaField, resize } = this;\n\n        if (!rows || ['none', 'horizontal'].includes(resize)) return;\n        contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n        textareaField.removeAttribute('rows');\n    };\n\n    checkCols = () => {\n        const { contentContainer, cols, textareaField, resize } = this;\n\n        if (!cols || ['none', 'vertical'].includes(resize)) return;\n        contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n        textareaField.removeAttribute('cols');\n    };\n\n    @Element() hostElement: HTMLElement;\n\n    get hasError() {\n        return Array.isArray(this.errors) && this.errors.length > 0;\n    }\n\n    get messages(): string[] {\n        return (\n            (this.errors && this.errors.length > 0 && this.errors) ||\n            (this.hints && this.hints.length > 0 && this.hints) ||\n            []\n        );\n    }\n\n    get showMessages() {\n        return this.messages.length > 0 && !this.hideMessages;\n    }\n\n    get inputId() {\n        return `input-guid-${this.guid}`;\n    }\n\n    get inputDescribedBy() {\n        return this.showMessages ? `${this.inputId}-description` : undefined;\n    }\n\n    get wrapperClasses() {\n        const errorClass = this.hasError ? ' has-error' : '';\n        const valueClass = !!this.value ? ' has-value' : '';\n        const focusClass = this.hasFocus ? ' has-focus' : '';\n\n        return `field-container${errorClass}${valueClass}${focusClass}`;\n    }\n\n    get showResize() {\n        const { resize } = this;\n        return resize && resize !== 'none';\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('value')\n    valueObserver() {\n        const { maxlength, value = '' } = this;\n        if (!maxlength) return;\n\n        const truncatedValue = value.substr(0, maxlength);\n        if (truncatedValue === value) return;\n\n        this.change.emit({ value: truncatedValue });\n    }\n\n    @Watch('rows')\n    rowsObserver() {\n        this.contentContainer.style.height = null;\n    }\n\n    @Watch('cols')\n    colsObserver() {\n        this.contentContainer.style.width = null;\n    }\n\n    @Watch('hints')\n    hintsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    ///////// HOST ELEMENT EVENTS //////\n    @Listen('focus')\n    onHostElementFocus(event: Event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.textareaField.focus();\n    }\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.oninput) {\n            this.value = event.detail.value;\n        }\n    }\n\n    ///////// Events /////////\n\n    /**\n     * Emitted when the field value is updated.\n     * @legacyEvent\n     */\n    @Event() input: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the field loses focus after the value has been changed.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string }>;\n\n    /// Methods ///\n    /**\n     * Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.\n     *\n     * This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want\n     * to trigger the `change` event, move the focus to another element after calling this method.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        const { textareaField } = this;\n        textareaField.focus();\n        textareaField.value = value;\n        textareaField.dispatchEvent(new InputEvent('input'));\n    }\n\n    ///// ACTIONS ////////\n\n    onTextareaFocus = () => {\n        this.hasFocus = true;\n        this.valueOnFocus = this.value;\n        setMessageHeight(this);\n    };\n\n    onTextareaBlur = () => {\n        const {\n            valueOnFocus,\n            textareaField: { value },\n        } = this;\n        this.hasFocus = false;\n        setMessageHeight(this);\n        if (valueOnFocus !== value) this.change.emit({ value });\n    };\n\n    onTextareaInput = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n        this.increaseHeightIfOverflowing();\n\n        this.input.emit({ value });\n    };\n\n    onTextareaChange = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.change.emit({ value });\n    };\n\n    onMouseDown = (event: MouseEvent) => {\n        const { contentContainer } = this;\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: event.clientX,\n            y: event.clientY,\n        };\n        document.addEventListener('mousemove', this.onMouseMove);\n        document.addEventListener('mouseup', this.onMouseUp);\n    };\n\n    onMouseMove = (event: MouseEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    onTouchStart = (event: TouchEvent) => {\n        if (event.touches.length !== 1) return;\n\n        event.preventDefault();\n\n        const { contentContainer } = this;\n        const firstTouch = event.touches[0];\n\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: firstTouch.pageX,\n            y: firstTouch.pageY,\n        };\n\n        document.addEventListener('touchmove', this.onTouchMove);\n        document.addEventListener('touchend', this.onTouchMove);\n    };\n\n    onTouchMove = (event: TouchEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    setWidth(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { width, x },\n        } = this;\n\n        const resizeX = ['both', 'horizontal'].includes(resize);\n\n        if (!resizeX) return;\n        const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n        const newWidth = width - (x - eventX);\n        contentContainer.style.width = `${newWidth}px`;\n    }\n\n    setHeight(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { height, y },\n        } = this;\n        const resizeY = ['both', 'vertical', 'vertical-auto'].includes(resize);\n\n        if (!resizeY) return;\n\n        const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n        const newHeight = height - (y - eventY);\n        // If 'vertical-auto', change height if the new height is greater\n        // than the current height or the textarea is not overflowing.\n        // Otherwise, change height regardless of the new height.\n        if (\n            resize !== 'vertical-auto' ||\n            newHeight > height ||\n            (resize === 'vertical-auto' && !this.isOverflowingVertically())\n        ) {\n            contentContainer.style.height = `${newHeight}px`;\n        }\n    }\n\n    increaseHeightIfOverflowing = () => {\n        const { scrollHeight } = this.textareaField;\n        if (this.resize === 'vertical-auto' && this.isOverflowingVertically()) {\n            // need to account for border width because scrollHeight does not include it\n            const newHeight = scrollHeight + this.getBorderOffset();\n            this.contentContainer.style.height = `${newHeight}px`;\n        }\n    };\n\n    isOverflowingVertically = () => {\n        const { clientHeight, scrollHeight } = this.textareaField;\n\n        return scrollHeight > clientHeight;\n    };\n\n    getBorderOffset = () => {\n        const computedStyle = window.getComputedStyle(this.textareaField);\n\n        return parseInt(computedStyle.borderTopWidth, 10) + parseInt(computedStyle.borderBottomWidth, 10);\n    };\n\n    onMouseUp = () => {\n        document.removeEventListener('mousemove', this.onMouseMove);\n        this.downParams = null;\n    };\n\n    /////// VIEW METHODS ///////\n\n    render() {\n        return (\n            <div class={this.wrapperClasses}>\n                {labelDOM(this)}\n                <div\n                    class=\"content-container\"\n                    ref={el => (this.contentContainer = el)}\n                >\n                    {this.inputDOM()}\n                    {this.maxlength ? this.maxLengthDOM() : ''}\n                    {messagesDOM(this)}\n                </div>\n            </div>\n        );\n    }\n\n    maxLengthDOM() {\n        return (\n            <div\n                class=\"max-length\"\n                aria-hidden=\"true\"\n            >\n                {this.value?.length || 0}/{this.maxlength}\n            </div>\n        );\n    }\n\n    inputDOM() {\n        const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';\n\n        return (\n            <div class=\"input-container\">\n                <textarea\n                    id={this.inputId}\n                    class={textareaClasses}\n                    placeholder={(this.placeholder && loc(this.placeholder)) || undefined}\n                    test-id=\"inputField\"\n                    maxLength={this.maxlength}\n                    aria-describedby={this.inputDescribedBy}\n                    aria-invalid={`${this.hasError}`}\n                    aria-required={`${!this.optional}`}\n                    aria-label={this.hideLabel && this.label}\n                    spellcheck={this.spellcheck}\n                    rows={this.rows || 3}\n                    cols={this.cols}\n                    value={this.value}\n                    ref={el => (this.textareaField = el)}\n                    readonly={!!this.readonly}\n                    disabled={!!this.disabled}\n                    maxlength={this.maxlength}\n                    onInput={this.onTextareaInput}\n                    onChange={this.onTextareaChange}\n                    onFocus={this.onTextareaFocus}\n                    onBlur={this.onTextareaBlur}\n                ></textarea>\n                {this.hasError ? (\n                    <q2-icon\n                        type=\"error\"\n                        class=\"icon-error\"\n                    />\n                ) : (\n                    ''\n                )}\n                {this.showResize && (\n                    <button\n                        onMouseDown={this.onMouseDown}\n                        onTouchStart={this.onTouchStart}\n                        class=\"btn-resize\"\n                        aria-label={loc('tecton.element.input.resize')}\n                        tabIndex={-1}\n                    >\n                        <svg\n                            aria-hidden=\"true\"\n                            viewBox=\"0 0 12 12\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                            <path\n                                d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n                                fill=\"none\"\n                                stroke-stroke-linecap=\"square\"\n                            />\n                        </svg>\n                    </button>\n                )}\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}