q2-tecton-elements 1.47.0 → 1.48.0

package/dist/q2-tecton-elements/p-30296b0e.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as a,F as r,g as o}from"./p-a5f18e27.js";import{r as l,l as n}from"./p-84190698.js";const d="*{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}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-background, var(--tct-table-header-background))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}:host(:is([bordered=vertical],[bordered=grid])) col{border-width:var(--tct-data-table-column-border-width, 0 1px 0 0);border-style:var(--tct-data-table-column-border-style, solid);border-color:var(--tct-data-table-column-border-color, var(--t-gray-9, #999999))}:host(:is([bordered=vertical],[bordered=grid])) col:last-child{border:none}td,th{padding:var(--comp-cell-padding);text-align:start;vertical-align:middle}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}td.vertical-align-top,th.vertical-align-top{vertical-align:top}td.vertical-align-bottom,th.vertical-align-bottom{vertical-align:bottom}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.striped:nth-child(even){background:var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2))}tr.striped:nth-child(odd){background:var(--tct-data-table-row-odd-background, transparent)}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--tct-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host(:is([bordered],[bordered=horizontal],[bordered=grid]):not([bordered=vertical],[bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.empty-state{background:var(--tct-data-table-loading-row-background, var(--t-base, #ffffff))}tr.empty-state td{text-align:center}tr.empty-state .empty-state-content{display:flex;flex-direction:column;align-items:center;padding-top:var(--app-scale-10x, 50px);padding-bottom:var(--app-scale-10x, 50px);gap:var(--app-scale-4x, 20px);--tct-icon-size:var(--app-scale-6x, 30px)}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}td.clamped div{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--comp-line-clamp-count, 1);-webkit-box-orient:vertical}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 5px));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 5px));text-align:center}caption{padding:var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));font-weight:var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));text-align:var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));color:var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit))}q2-checkbox{padding:0}";const c=d;const i=class{constructor(a){t(this,a);this.select=e(this,"select",7);this.click=e(this,"click",7);this.toggle=e(this,"toggle",7);this.sort=e(this,"sort",7);this.selectAllRows=e(this,"selectAllRows",7);this.checkSlots=()=>{var t,e,a,r;this.hasExpandableRows=!!((e=(t=this.hostElement)===null||t===void 0?void 0:t.querySelector(`[slot$="-expandable-content"]`))!==null&&e!==void 0?e:false);this.hasDropdowns=!!((r=(a=this.hostElement)===null||a===void 0?void 0:a.querySelector(`[slot$="-dropdown"]`))!==null&&r!==void 0?r:false);this.checkSlotCount+=1};this.onSort=t=>{const e=t.sorted==="ASC"?"DESC":"ASC";const a=t.key;const r=this.sort.emit({header:t,direction:e});if(r.defaultPrevented)return;this.serializedHeaders=this.serializedHeaders.map((t=>{const r=a===t.key?e:undefined;return Object.assign(Object.assign({},t),{sorted:r})}));this.serializedRows=this.sortRows(this.serializedRows,Object.assign(Object.assign({},t),{sorted:e}))};this.onSelectRow=(t,e)=>{t.stopPropagation();const{selectMode:a,serializedRows:r,selectedRows:o}=this;const{checked:l}=t.detail;const n=Object.assign(Object.assign({},e),{selected:l});let d;if(a==="single"){d=l?[n]:[]}else{d=l?[...o,n]:o.filter((t=>t.id!==n.id))}const c=d.length===r.length;const i=!c&&d.length>0;const s=this.select.emit({row:n,rows:d,allSelected:c});if(s.defaultPrevented)return;this.serializedRows=this.serializedRows.map((t=>t.id===n.id?n:t));this.allRowsSelected=c;this.someRowsSelected=i};this.onClickTableRow=(t,e)=>{if(this.clickable){this.onClickRow(t,e)}else if(this.hasExpandableRows){this.onToggleRow(t,e)}};this.onClickRow=(t,e)=>{t.stopPropagation();this.click.emit({row:e})};this.onToggleRow=(t,e)=>{t.stopPropagation();const a=Object.assign(Object.assign({},e),{expanded:!e.expanded});const r=this.toggle.emit({row:a});if(r.defaultPrevented)return;this.serializedRows=this.serializedRows.map((t=>{if(t.id===a.id)return a;else return Object.assign({},t)}))};this.onControlContainerClick=t=>{t.stopPropagation()};this.bordered=undefined;this.clickable=undefined;this.caption=undefined;this.density=undefined;this.emptyIcon="inbox";this.emptyMessage="tecton.element.dataTable.emptyMessage";this.headers=undefined;this.hideCaption=undefined;this.hideClickable=undefined;this.loading=undefined;this.rows=undefined;this.selectable=undefined;this.selectMode="multiple";this.shadowed=undefined;this.striped=undefined;this.serializedHeaders=[];this.serializedRows=[];this.hasExpandableRows=false;this.hasDropdowns=false;this.allRowsSelected=false;this.someRowsSelected=false;this.hasRowData=false;this.checkSlotCount=0}componentWillLoad(){this.headersHandler(this.headers);this.rowsHandler(this.rows)}componentDidLoad(){if(typeof MutationObserver!=="undefined"){const t=new MutationObserver((()=>this.checkSlots()));t.observe(this.hostElement,{childList:true,subtree:true,attributes:true});this.mutationObserver=t}if(typeof ResizeObserver!=="undefined"){this.resizeObserver=new ResizeObserver((()=>l()));this.resizeObserver.observe(this.hostElement)}}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect();this.mutationObserver=null}if(this.resizeObserver){this.resizeObserver.disconnect();this.resizeObserver=null}}get selectedRows(){return this.serializedRows.filter((({selected:t})=>t))}get selectedRow(){return this.selectedRows.find((({selected:t})=>!!t))}get numberOfColumns(){var t,e;return((e=(t=this.serializedHeaders)===null||t===void 0?void 0:t.length)!==null&&e!==void 0?e:0)+(this.selectable?1:0)+(this.clickable?1:0)+(this.hasExpandableRows?1:0)+(this.hasDropdowns?1:0)}get mappedHeaders(){return this.serializedHeaders.reduce(((t,e)=>{t[e.key]=e;return t}),{})}sortRows(t,e){const{key:a,sorted:r}=e;const o=r||"ASC";const l=[...t].sort(((t,e)=>{const r=t.cells[a].value;const l=e.cells[a].value;if(r<l)return o==="ASC"?-1:1;if(r>l)return o==="ASC"?1:-1;return 0}));return l}headersHandler(t=[]){this.serializedHeaders=t.map((t=>{const{title:e}=t;let{key:a}=t;if(!a)a=e.toLowerCase().replace(/\s/g,"-");return Object.assign({key:a},t)}))}rowsHandler(t=[]){const{serializedHeaders:e,mappedHeaders:a}=this;const r={id:null,cells:{},selected:false,expanded:false,disabled:false};let o=true;let l=false;const n=t.map((({id:t,cells:e,selected:n,expanded:d,disabled:c})=>{const i=Object.entries(e).reduce(((t,[e,r])=>{const o=a[e]||{};const{align:l,type:n="text",lineClamp:d,verticalAlign:c}=o;const i="type"in o&&o.type==="badge";const s={value:"",ariaLabel:undefined,type:n,align:l,lineClamp:d,verticalAlign:c,badgeStatus:i?o.badgeStatus:undefined,badgeTheme:i?o.badgeTheme:undefined};const b=typeof r==="object"?Object.assign(Object.assign({},s),r):Object.assign(Object.assign({},s),{value:r});t[e]=b;return t}),{});if(o&&!n)o=false;if(!o&&n)l=true;return Object.assign(Object.assign({},r),{id:t,selected:!!n,expanded:!!d,disabled:!!c,cells:i})}));const d=e.find((({sorted:t})=>t));this.hasRowData=!!t.length;this.allRowsSelected=this.hasRowData&&o;this.someRowsSelected=this.hasRowData&&l;this.serializedRows=!!d?this.sortRows(n,d):n;this.checkSlots()}selectableHandler(){if(this.selectable===false){this.selectAllRows.emit({checked:false})}}onClickListener(t){if(t instanceof PointerEvent)t.stopImmediatePropagation()}onSelectAllRows(t){t.stopPropagation();const{checked:e}=t.detail;const a=e?this.serializedRows.map((t=>{if(t.disabled){return t}else{return Object.assign(Object.assign({},t),{selected:e})}})):[];const r=this.select.emit({row:undefined,rows:a,allSelected:e});if(r.defaultPrevented)return;this.serializedRows=this.serializedRows.map((t=>{if(t.disabled)return t;t.selected=e;return t}));this.allRowsSelected=e;this.someRowsSelected=false}render(){const{caption:t}=this;return a("div",{key:"30e25533bb3c08e39535399938c6612722b4f058",class:"container"},a("table",{key:"c961a20fb875484f83b8023b9c5b03e95aa03427"},t&&a("caption",{key:"e4ad3f9d2c5717914794479caaae1b1961aa92b9",class:this.hideCaption?"sr":undefined},t),this.renderTableColGroup(),this.renderTableHeader(),this.renderEmptyState(),this.renderTableRows()))}renderTableColGroup(){const{serializedHeaders:t,selectable:e,clickable:r,hasExpandableRows:o,hasDropdowns:l}=this;if(!t.length)return null;return a("colgroup",null,e&&a("col",{class:"select-column"}),t.map((({width:t,backgroundColor:e})=>a("col",{style:{width:t,backgroundColor:e}}))),r&&a("col",{class:"click-column"}),o&&a("col",{class:"expandable-row-control-column"}),l&&a("col",{class:"dropdown-column"}))}renderTableHeader(){const{serializedHeaders:t,selectable:e,clickable:r,hideClickable:o,selectMode:l,hasExpandableRows:d,hasDropdowns:c,allRowsSelected:i,someRowsSelected:s,hasRowData:b,loading:h}=this;if(!t.length)return null;return a("thead",null,a("tr",null,e&&a("th",null,l==="multiple"&&a("q2-checkbox",{label:n("tecton.element.dataTable.selectAllRows"),"hide-label":true,onChange:()=>this.selectAllRows.emit({checked:!i}),checked:b&&i&&!s,indeterminate:b&&s&&!i,disabled:h||!b,"test-id":"select-all-rows-control"})),t.map((t=>{const{align:e,sorted:r,verticalAlign:o}=t;const l=[];if(e)l.push(`align-${e}`);if(o)l.push(`vertical-align-${o}`);if(!!r)l.push("sorted");return a("th",{class:l.join(" "),id:`header-${t.key}`},t.sortable?a("q2-btn",{onClick:()=>this.onSort(t),"test-id":"sort-control",disabled:this.loading},a("div",{class:"header-content","aria-label":t.ariaLabel||undefined},a("slot",{name:`header-cell-${t.key}`},t.title),!!r?a("q2-icon",{class:`sorted-indicator direction-${r}`,type:"arrow-down",label:r==="ASC"?n("tecton.element.dataTable.sortedAscending"):n("tecton.element.dataTable.sortedDescending"),"test-id":"sorted-indicator"}):a("q2-icon",{class:`sorted-indicator`,type:"sort",label:n("tecton.element.dataTable.clickToSort"),"test-id":"sorted-indicator"}))):a("div",{class:"header-content","aria-label":t.ariaLabel||undefined},a("slot",{name:`header-cell-${t.key}`},t.title)))})),r&&a("th",{id:"click",class:o?"sr":undefined},a("span",{class:"sr"},n("tecton.element.dataTable.clickRow"))),d&&a("th",{id:"toggle"},a("span",{class:"sr"},n("tecton.element.dataTable.toggleRow"))),c&&a("th",null,a("span",{class:"sr"},n("tecton.element.dataTable.dropdown")))))}renderEmptyState(){const{hasRowData:t,numberOfColumns:e,emptyIcon:r,emptyMessage:o,loading:l}=this;if(t||l)return null;return a("slot",{name:"empty-table"},a("tbody",null,a("tr",{class:"empty-state"},a("td",{colSpan:e},a("div",{class:"empty-state-content"},a("q2-icon",{type:r}),a("p",null,n(o)))))))}renderTableRows(){const{serializedHeaders:t,serializedRows:e,selectable:o,clickable:l,striped:d,hideClickable:c,selectMode:i,hasExpandableRows:s,hasDropdowns:b,numberOfColumns:h,loading:p}=this;if(p){return a("tbody",null,a("tr",{class:"loading-row"},a("td",{colSpan:h},a("q2-loading",{inline:true}))))}let u=false;let v;if(i==="single"){v=this.selectedRow;u=!!v}const g=[];if(l)g.push("click-column");if(c)g.push("sr");const f=g.join(" ");return a("tbody",null,e.map((e=>{const c=`row-${e.id}-cell`;const i=`row-${e.id}-expandable-content`;const p=`row-${e.id}-dropdown`;const g=s&&!!this.hostElement.querySelector(`[slot="${i}"]`);const w=b&&!!this.hostElement.querySelector(`[slot="${p}"]`);const m=[];if(g)m.push("expandable");if(l)m.push("clickable");if(d)m.push("striped");if(e.expanded)m.push("expanded");if(e.selected)m.push("selected");const x=l||g;return a(r,null,a("tr",{id:`row-${e.id}`,class:m.join(" "),onClick:x&&(t=>this.onClickTableRow(t,e)),tabIndex:x?-1:undefined},o&&a("td",{class:"select-column",onClick:this.onControlContainerClick},a("q2-checkbox",{label:n("tecton.element.dataTable.selectRow"),"hide-label":true,checked:e.selected,disabled:u&&e!==v||e.disabled,onChange:t=>this.onSelectRow(t,e),"test-id":"select-row-control"})),t.map((({key:t})=>{const r=e.cells[t];const o=r===null||r===void 0?void 0:r.lineClamp;const l=r===null||r===void 0?void 0:r.align;const n=r===null||r===void 0?void 0:r.verticalAlign;const d=[];if(l)d.push(`align-${l}`);if(n)d.push(`vertical-align-${n}`);if(o)d.push("clamped");const i=o?{"--comp-line-clamp-count":`${o}`}:undefined;return a("td",{class:d.join(" "),style:i},a("slot",{name:`${c}-${t}`},this.renderCellContent(r)))})),l&&a("td",{class:f},a("q2-btn",{intent:"neutral",size:"small",onClick:t=>this.onClickRow(t,e),"test-id":"clickable-row-control"},n("tecton.element.dataTable.clickRow"))),s&&a("td",{class:"expandable-row-control-column",onClick:this.onControlContainerClick},g&&a("q2-btn",{onClick:t=>this.onToggleRow(t,e),ariaExpanded:`${e.expanded}`,ariaControls:i,ariaLabel:n("tecton.element.dataTable.toggleRow"),"test-id":"expandable-row-control"},a("q2-icon",{type:"chevron-down",class:"toggle-expandable-row"}))),b&&a("td",{class:"dropdown-column",onClick:this.onControlContainerClick},w&&a("slot",{name:p}))),g&&a("tr",{id:i,class:"expandable-row",hidden:!e.expanded,"aria-hidden":!e.expanded},a("td",{colSpan:h,headers:"toggle"},a("div",{class:"expandable-content"},a("slot",{name:i})))))})))}renderCellContent(t){if(!t)return;const{type:e,ariaLabel:r,value:o}=t;if([undefined,null].includes(o))return;switch(e){case"badge":let e;switch(typeof o){case"string":e=parseFloat(o);break;case"boolean":e=o?1:0;break;default:e=o;break}return a("q2-badge",{"aria-label":r,value:e,theme:t.badgeTheme,status:t.badgeStatus,size:"large"});case"icon":const l=typeof o==="string"?o:`${o}`;return a("q2-icon",{label:r,type:l});case"boolean":return!!o?a("q2-icon",{label:n("tecton.element.dataTable.booleanTrue"),type:"checkmark"}):a("div",{"aria-label":n("tecton.element.dataTable.booleanFalse")});case"code":return a("code",{"aria-label":r},o);default:return a("div",{"aria-label":r},o)}}get hostElement(){return o(this)}static get watchers(){return{headers:["headersHandler"],rows:["rowsHandler"],selectable:["selectableHandler"]}}};i.style=c;export{i as q2_data_table};
+//# sourceMappingURL=p-30296b0e.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2DataTableCss","Q2DataTableStyle0","Q2DataTable","this","checkSlots","hasExpandableRows","_b","_a","hostElement","querySelector","hasDropdowns","_d","_c","checkSlotCount","onSort","header","direction","sorted","sortKey","key","sortEvent","sort","emit","defaultPrevented","serializedHeaders","map","serializedHeader","undefined","Object","assign","serializedRows","sortRows","onSelectRow","event","row","stopPropagation","selectMode","selectedRows","currentlySelectedRows","checked","detail","selectedRow","selected","filter","id","allRowsSelected","length","isIndeterminate","selectEvent","select","rows","allSelected","someRowsSelected","onClickTableRow","clickable","onClickRow","onToggleRow","click","expanded","toggleEvent","toggle","onControlContainerClick","componentWillLoad","headersHandler","headers","rowsHandler","componentDidLoad","MutationObserver","observer","observe","childList","subtree","attributes","mutationObserver","ResizeObserver","resizeObserver","resizeIframe","disconnectedCallback","disconnect","find","numberOfColumns","selectable","mappedHeaders","reduce","accum","sortedRows","a","b","aValue","cells","value","bValue","title","toLowerCase","replace","defaultRow","disabled","isAllSelected","serializedCells","entries","cellKey","cellData","align","type","lineClamp","verticalAlign","isBadge","defaultCell","ariaLabel","badgeStatus","badgeTheme","result","sortedHeader","hasRowData","selectableHandler","selectAllRows","onClickListener","PointerEvent","stopImmediatePropagation","onSelectAllRows","render","caption","h","class","hideCaption","renderTableColGroup","renderTableHeader","renderEmptyState","renderTableRows","width","backgroundColor","style","hideClickable","loading","label","loc","onChange","indeterminate","headerClasses","push","join","sortable","onClick","name","emptyIcon","emptyMessage","colSpan","striped","inline","isSelectDisabled","clickableClasses","clickableClassString","cellSlotPrefix","expandableRowName","dropdownCellName","rowHasExpandableSlot","rowHasDropdownSlot","rowClasses","rowIsClickable","Fragment","e","tabIndex","cell","cellAlign","cellVerticalAlign","cellClasses","cellStyles","renderCellContent","intent","size","ariaExpanded","ariaControls","hidden","includes","valueAsInt","parseFloat","theme","status","valueAsString"],"sources":["src/components/q2-data-table/q2-data-table.scss?tag=q2-data-table&encapsulation=shadow","src/components/q2-data-table/q2-data-table.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    --comp-cell-padding: #{var-list(--tct-data-table-cell-padding, --tct-table-cell-padding, --app-scale-3x, 15px)};\n    --comp-select-column-width: #{var-list(\n            --tct-data-table-select-column-width,\n            --tct-table-select-column-width,\n            --tct-checkbox-size,\n            20px\n        )};\n    --comp-dropdown-column-width: #{var-list(\n            --tct-data-table-dropdown-column-width,\n            --tct-table-dropdown-column-width,\n            --tct-btn-icon-width,\n            44px\n        )};\n    --comp-expandable-row-control-column-width: #{var-list(\n            --tct-data-table-expandable-row-control-column-width,\n            --tct-table-expandable-row-control-column-width,\n            --tct-btn-icon-width,\n            44px\n        )};\n\n    overflow: auto;\n    @include tiny-scrollbar();\n\n    :host([shadowed]:not([shadowed='false'])) & {\n        box-shadow: var-list(\n            --tct-data-table-shadow,\n            --tct-table-shadow,\n            --app-shadow-1,\n            unquote('0 2px 4px rgba(0, 0, 0, 0.3)')\n        );\n    }\n\n    :host([density='compact']) & {\n        --comp-cell-padding: #{var-list(\n                --tct-data-table-cell-padding-compact,\n                --tct-table-cell-padding-compact,\n                --app-scale-1x,\n                5px\n            )};\n    }\n\n    :host([density='comfortable']) & {\n        --comp-cell-padding: #{var-list(\n                --tct-data-table-cell-padding-comfortable,\n                --tct-table-cell-padding-comfortable,\n                --app-scale-5x,\n                25px\n            )};\n    }\n}\n\ntable {\n    table-layout: var-list(--tct-data-table-layout, --tct-table-layout, auto);\n    border-collapse: collapse;\n    border-spacing: 0;\n    width: var-list(--tct-data-table-width, --tct-table-width);\n    min-width: 100%;\n    background: var-list(--tct-data-table-background, --tct-table-background, --t-base, #ffffff);\n    caption-side: var-list(--tct-data-table-caption-side, --tct-table-caption-side, bottom);\n}\n\nthead {\n    border-width: var-list(--tct-data-table-header-border-width, --tct-table-header-border-width, unquote('0 0 2px 0'));\n    border-style: var-list(--tct-data-table-header-border-style, --tct-table-header-border-style, solid);\n    border-color: var-list(--tct-data-table-header-border-color, --tct-table-header-border-color, --t-gray-9, #999999);\n    background: var-list(--tct-data-table-header-background, --tct-table-header-background);\n}\n\ncol {\n    &.select-column {\n        width: var(--comp-select-column-width);\n    }\n\n    &.expandable-row-control-column {\n        width: var(--comp-expandable-row-control-column-width);\n    }\n\n    &.dropdown-column {\n        width: var(--comp-dropdown-column-width);\n    }\n\n    :host(:is([bordered='vertical'], [bordered='grid'])) & {\n        border-width: var-list(--tct-data-table-column-border-width, unquote('0 1px 0 0'));\n        border-style: var-list(--tct-data-table-column-border-style, solid);\n        border-color: var-list(--tct-data-table-column-border-color, --t-gray-9, #999999);\n\n        &:last-child {\n            border: none;\n        }\n    }\n}\n\ntd,\nth {\n    padding: var(--comp-cell-padding);\n    text-align: start;\n    vertical-align: middle;\n\n    &.align-end {\n        text-align: end;\n    }\n    &.align-center {\n        text-align: center;\n    }\n    &.vertical-align-top {\n        vertical-align: top;\n    }\n    &.vertical-align-bottom {\n        vertical-align: bottom;\n    }\n}\n\nth {\n    .header-content {\n        font-weight: var-list(--tct-data-table-header-font-weight, --tct-table-header-font-weight, 600);\n        font-size: var-list(--tct-data-table-header-font-size, --app-font-size, 14px);\n    }\n\n    &.sorted {\n        .header-content {\n            font-weight: var-list(\n                --tct-data-table-header-sorted-font-weight,\n                --tct-table-header-sorted-font-weight,\n                600\n            );\n        }\n    }\n\n    .sorted-indicator {\n        --comp-header-sortable-icon-size: #{var-list(\n                --tct-data-table-header-sortable-icon-size,\n                --tct-table-header-sortable-icon-size,\n                --app-scale-3x,\n                15px\n            )};\n        --tct-icon-stroke-width: 2;\n\n        width: var(--comp-header-sortable-icon-size);\n        height: var(--comp-header-sortable-icon-size);\n\n        &.direction-ASC {\n            transform: rotate(180deg);\n        }\n    }\n\n    q2-btn {\n        .header-content {\n            display: flex;\n            align-items: center;\n            gap: var-list(--tct-data-table-header-content-gap, --tct-table-header-content-gap, --app-scale-2x, 10px);\n        }\n    }\n}\n\ntr {\n    &.expandable,\n    &.clickable {\n        cursor: pointer;\n\n        &:focus {\n            outline: none;\n            box-shadow: none;\n        }\n    }\n\n    &.striped {\n        &:nth-child(even) {\n            background: var-list(--tct-data-table-row-even-background, --t-gray-14, #f2f2f2);\n        }\n        &:nth-child(odd) {\n            background: var-list(--tct-data-table-row-odd-background, transparent);\n        }\n    }\n\n    &.expandable {\n        &:hover {\n            background: var-list(\n                --tct-data-table-expandable-row-hover-background,\n                --tct-table-expandable-row-hover-background,\n                --t-gray-14,\n                #f2f2f2\n            );\n        }\n    }\n\n    &.clickable {\n        &:hover {\n            background: var-list(\n                --tct-data-table-clickable-row-hover-background,\n                --tct-table-clickable-row-hover-background,\n                --t-gray-14,\n                #f2f2f2\n            );\n        }\n    }\n\n    &.selected {\n        background: var-list(\n            --tct-data-table-selected-row-background,\n            --tct-table-selected-row-background,\n            --t-gray-14,\n            #f2f2f2\n        );\n    }\n\n    &.expanded {\n        background: var-list(\n            --tct-data-table-expanded-row-background,\n            --tct-table-expanded-row-background,\n            --t-gray-14,\n            #f2f2f2\n        );\n\n        .toggle-expandable-row {\n            transform: rotate(180deg);\n        }\n    }\n\n    :host(:is([bordered], [bordered='horizontal'], [bordered='grid']):not([bordered='vertical'], [bordered='false']))\n        tbody\n        & {\n        border-width: var-list(--tct-data-table-row-border-width, --tct-table-row-border-width, unquote('0 0 1px 0'));\n        border-style: var-list(--tct-data-table-row-border-style, --tct-table-row-border-style, solid);\n        border-color: var-list(--tct-data-table-row-border-color, --tct-table-row-border-color, --t-gray-9, #999999);\n    }\n\n    &.loading-row {\n        background: var-list(\n            --tct-data-table-loading-row-background,\n            --tct-table-loading-row-background,\n            --t-base,\n            #ffffff\n        );\n        td {\n            text-align: center;\n        }\n\n        q2-loading {\n            font-size: 4em;\n        }\n    }\n\n    &.empty-state {\n        background: var-list(--tct-data-table-loading-row-background, --t-base, #ffffff);\n        td {\n            text-align: center;\n        }\n        .empty-state-content {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding-top: var(--app-scale-10x, 50px);\n            padding-bottom: var(--app-scale-10x, 50px);\n            gap: var(--app-scale-4x, 20px);\n            --tct-icon-size: var(--app-scale-6x, 30px);\n        }\n    }\n\n    &.expandable-row {\n        background: var-list(\n            --tct-data-table-expanded-row-background,\n            --tct-table-expanded-row-background,\n            --t-gray-14,\n            #f2f2f2\n        );\n    }\n}\n\ntd {\n    &.clamped {\n        div {\n            text-overflow: ellipsis;\n            overflow: hidden;\n            display: -webkit-box;\n            -webkit-line-clamp: var(--comp-line-clamp-count, 1);\n            -webkit-box-orient: vertical;\n        }\n    }\n\n    &.expandable-row-control-column {\n        --tct-btn-icon-hover-bg: transparent;\n        padding: var-list(\n            --tct-data-table-expandable-row-control-column-padding,\n            --tct-table-expandable-row-control-column-padding,\n            unquote('0 5px')\n        );\n        text-align: center;\n    }\n\n    &.dropdown-column {\n        padding: var-list(\n            --tct-data-table-dropdown-column-padding,\n            --tct-table-dropdown-column-padding,\n            unquote('0 5px')\n        );\n        text-align: center;\n    }\n\n    &.click-column:not(.sr) {\n        padding: var-list(\n            --tct-data-table-clickable-column-padding,\n            --tct-table-clickable-column-padding,\n            unquote('0 5px')\n        );\n        text-align: center;\n    }\n}\n\ncaption {\n    padding: var-list(--tct-data-table-caption-padding, --tct-table-caption-padding, --app-scale-2x, 10px);\n    font-size: var-list(--tct-data-table-caption-font-size, --tct-table-caption-font-size, inherit);\n    font-weight: var-list(--tct-data-table-caption-font-weight, --tct-table-caption-font-weight, 600);\n    text-align: var-list(--tct-data-table-caption-text-align, --tct-table-caption-text-align, center);\n    color: var-list(--tct-data-table-caption-color, --tct-table-caption-color, inherit);\n}\n\nq2-checkbox {\n    padding: 0;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Event,\n    Element,\n    EventEmitter,\n    Fragment,\n    Listen,\n} from '@stencil/core';\nimport { loc, resizeIframe } from '../../utils';\n\nexport type Q2DataTableCellAlignOptions = 'start' | 'center' | 'end';\n\nexport type Q2DataTableCellType =\n    | {\n          // defines the type of cell\n          type?: 'text' | 'number' | 'icon' | 'boolean' | 'code';\n      }\n    | {\n          // when type='badge'\n          type?: 'badge';\n          badgeStatus?: HTMLQ2BadgeElement['status'];\n          badgeTheme?: HTMLQ2BadgeElement['theme'];\n      };\n\nexport type Q2DataTableHeader = {\n    title: string;\n    align?: Q2DataTableCellAlignOptions;\n    // Will be autogenerated from the title if not provided\n    // The key is used to grab the data from the row data\n    key?: string;\n    // Enables sorting for this column when true\n    sortable?: boolean;\n    width?: string;\n    // defines background for the column\n    backgroundColor?: string;\n    sorted?: 'ASC' | 'DESC';\n    ariaLabel?: string;\n    lineClamp?: number;\n    verticalAlign?: 'top' | 'bottom';\n} & Partial<Q2DataTableCellType>;\n\nexport type Q2DataTableCell = {\n    value: string | number | boolean;\n    align?: Q2DataTableCellAlignOptions;\n    ariaLabel?: string;\n    lineClamp?: number;\n    verticalAlign?: 'top' | 'bottom';\n} & Q2DataTableCellType;\n\nexport type Q2DataTableBaseRow = {\n    id: string | number;\n    selected?: boolean;\n    expanded?: boolean;\n    disabled?: boolean;\n};\n\nexport type Q2DataTableCells = Record<string, string | number | Q2DataTableCell>;\nexport type Q2DataTableSerializedCells = Record<string, Q2DataTableCell>;\n\nexport type Q2DataTableRow = Q2DataTableBaseRow & {\n    cells: Q2DataTableCells;\n};\nexport type Q2DataTableSerializedRow = Q2DataTableBaseRow & {\n    cells: Q2DataTableSerializedCells;\n};\n\n@Component({ tag: 'q2-data-table', shadow: true, styleUrl: 'q2-data-table.scss' })\nexport class Q2DataTable implements ComponentInterface {\n    /** Adds borders between rows and/or columns in the table. */\n    @Prop({ mutable: true, reflect: true }) bordered: boolean | 'horizontal' | 'vertical' | 'grid';\n\n    /** Adds the ability to click a row and have the table emit an event with the selected row's data. */\n    @Prop({ mutable: true, reflect: true }) clickable: boolean;\n\n    /** Provides a caption for the data table. */\n    @Prop({ mutable: true }) caption: string;\n\n    /** Determines the amount of padding for each of the cells in the table. */\n    @Prop({ mutable: true, reflect: true }) density: 'compact' | 'normal' | 'comfortable';\n\n    /** Determines the `q2-icon` that will display when `rows` has no value. */\n    @Prop({ reflect: true }) emptyIcon: string = 'inbox';\n\n    /** Determines the message that will display when `rows` has no value.\n     * @localizable\n     */\n    @Prop({ reflect: true }) emptyMessage: string = 'tecton.element.dataTable.emptyMessage';\n\n    /**\n     * Defines the headers of the table.\n     *\n     * @snippet\n     * element.headers = [\n     *  {\n     *    title: 'Day of the Week',\n     *    key: 'day',\n     *  },\n     *  {\n     *    title: 'Sales',\n     *    key: 'sales',\n     *    align: 'end',\n     *  }\n     * ]\n     *\n     */\n    @Prop({ mutable: true }) headers: Q2DataTableHeader[];\n\n    /** Hides the caption from view, but still makes it available to screen readers for accessibility purposes. */\n    @Prop({ mutable: true, reflect: true }) hideCaption: boolean;\n\n    /**\n     * Visually hides the `Select` button that displays when `clickable=true`. It will still be discoverable by assistive technologies.\n     *\n     * @info\n     * Use of this property requires `clickable` to be set to `true`.\n     */\n    @Prop({ mutable: true }) hideClickable: boolean;\n\n    /** Displays a loading state on the table to indicate background activity. */\n    @Prop({ mutable: true, reflect: true }) loading: boolean;\n\n    /**\n     * Defines the rows of the table.\n     *\n     * @snippet\n     * element.rows = [\n     *  {\n     *    id: 1,\n     *    cells: {\n     *      day: 'Monday',\n     *      sales: 93\n     *    }\n     *  },\n     *  {\n     *    id: 2,\n     *    cells: {\n     *      day: 'Tuesday',\n     *      sales: 127\n     *    }\n     *  },\n     *  {\n     *    id: 3,\n     *    cells: {\n     *      day: 'Wednesday',\n     *      sales: 121\n     *    }\n     * ]\n     */\n    @Prop({ mutable: true }) rows: Q2DataTableRow[];\n\n    /** Adds a checkbox to each row of the table making it selectable. */\n    @Prop({ mutable: true, reflect: true }) selectable: boolean;\n\n    /**\n     * Determines if the selectable checkboxes allow for multi-select or not. If set to \"single\", once a row is selected, all other rows will be disabled.\n     * See the documentation on the `select` event for how to handle selections.\n     *\n     * @warning\n     * Use of this property requires `selectable` to be set to `true`.\n     */\n    @Prop({ mutable: true }) selectMode: 'multiple' | 'single' = 'multiple';\n\n    /** Adds a shadow to the table */\n    @Prop({ mutable: true, reflect: true }) shadowed: boolean;\n\n    /** Enables alternating background colors for the table rows */\n    @Prop({ reflect: true }) striped: boolean;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() serializedHeaders: Q2DataTableHeader[] = [];\n    @State() serializedRows: Q2DataTableSerializedRow[] = [];\n    @State() hasExpandableRows: boolean = false;\n    @State() hasDropdowns: boolean = false;\n    @State() allRowsSelected: boolean = false;\n    @State() someRowsSelected: boolean = false;\n    @State() hasRowData: boolean = false;\n    @State() checkSlotCount: number = 0;\n\n    /**\n     * Emitted when a row is selected.\n     *\n     * Requires the `selectable` prop to be set to `true`.\n     *\n     * Call `event.preventDefault()` to prevent the default selection behavior.\n     */\n    @Event() select: EventEmitter<{\n        row: Q2DataTableSerializedRow;\n        rows: Q2DataTableSerializedRow[];\n        allSelected: boolean;\n    }>;\n\n    /**\n     * Emitted when a row is clicked.\n     *\n     * Requires the `clickable` prop to be set to `true`.\n     *\n     * Call `event.preventDefault()` to prevent the default click behavior.\n     */\n    @Event() click: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n    /**\n     * Emitted when an expandable row is toggled.\n     *\n     * Requires content in the `row-{id}-expandable-content` slot.\n     *\n     * Call `event.preventDefault()` to prevent the default toggling behavior.\n     */\n    @Event() toggle: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n    /**\n     * Emitted when a column is sorted.\n     *\n     * Requires the `sortable` prop to be set to `true` on the column.\n     *\n     * Call `event.preventDefault()` to prevent the default sorting behavior.\n     */\n    @Event() sort: EventEmitter<{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }>;\n\n    /**\n     * Emitted when the select-all checkbox is toggled.\n     *\n     * Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.\n     *\n     * Call `event.preventDefault()` to prevent the default behavior.\n     */\n    @Event() selectAllRows: EventEmitter<{ checked: boolean }>;\n\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        this.headersHandler(this.headers);\n        this.rowsHandler(this.rows);\n    }\n\n    componentDidLoad(): void {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => this.checkSlots());\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        if (typeof ResizeObserver !== 'undefined') {\n            this.resizeObserver = new ResizeObserver(() => resizeIframe());\n            this.resizeObserver.observe(this.hostElement);\n        }\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n        if (this.resizeObserver) {\n            this.resizeObserver.disconnect();\n            this.resizeObserver = null;\n        }\n    }\n\n    /// Getters ///\n    get selectedRows() {\n        return this.serializedRows.filter(({ selected }) => selected);\n    }\n\n    get selectedRow() {\n        return this.selectedRows.find(({ selected }) => !!selected);\n    }\n\n    get numberOfColumns() {\n        return (\n            (this.serializedHeaders?.length ?? 0) +\n            (this.selectable ? 1 : 0) +\n            (this.clickable ? 1 : 0) +\n            (this.hasExpandableRows ? 1 : 0) +\n            (this.hasDropdowns ? 1 : 0)\n        );\n    }\n\n    get mappedHeaders() {\n        return this.serializedHeaders.reduce<Record<string, Q2DataTableHeader>>((accum, header) => {\n            accum[header.key] = header;\n            return accum;\n        }, {});\n    }\n\n    /// Helpers ///\n    sortRows(rows: Q2DataTableSerializedRow[], header: Q2DataTableHeader) {\n        const { key, sorted } = header;\n        const direction = sorted || 'ASC';\n\n        const sortedRows = [...rows].sort((a, b) => {\n            const aValue = a.cells[key].value;\n            const bValue = b.cells[key].value;\n\n            if (aValue < bValue) return direction === 'ASC' ? -1 : 1;\n            if (aValue > bValue) return direction === 'ASC' ? 1 : -1;\n            return 0;\n        });\n\n        return sortedRows;\n    }\n\n    checkSlots = () => {\n        this.hasExpandableRows = !!(this.hostElement?.querySelector(`[slot$=\"-expandable-content\"]`) ?? false);\n        this.hasDropdowns = !!(this.hostElement?.querySelector(`[slot$=\"-dropdown\"]`) ?? false);\n\n        // The booleans above may not change, even if the slot has content\n        // So we increment this property to force a re-render and ensure proper rendering\n        this.checkSlotCount += 1;\n    };\n\n    /// Watchers ///\n    @Watch('headers')\n    headersHandler(headers: Q2DataTableHeader[] = []) {\n        this.serializedHeaders = headers.map<Q2DataTableHeader>(header => {\n            const { title } = header;\n            let { key } = header;\n\n            // If no key is provided, generate one from the title\n            if (!key) key = title.toLowerCase().replace(/\\s/g, '-');\n\n            return {\n                key,\n                ...header,\n            };\n        });\n    }\n\n    @Watch('rows')\n    rowsHandler(rows: Q2DataTableRow[] = []) {\n        const { serializedHeaders, mappedHeaders } = this;\n        const defaultRow = {\n            id: null,\n            cells: {},\n            selected: false,\n            expanded: false,\n            disabled: false,\n        };\n\n        // tracks if the select-all checkbox should be visually updated as the `rows` are built\n        let isAllSelected = true;\n        let isIndeterminate = false;\n\n        const serializedRows = rows.map(({ id, cells, selected, expanded, disabled }) => {\n            const serializedCells = Object.entries(cells).reduce<Q2DataTableSerializedCells>(\n                (accum, [cellKey, cellData]) => {\n                    const header = mappedHeaders[cellKey] || ({} as Q2DataTableHeader);\n                    const { align, type = 'text', lineClamp, verticalAlign } = header;\n\n                    const isBadge = 'type' in header && header.type === 'badge';\n                    const defaultCell: Q2DataTableCell = {\n                        value: '',\n                        ariaLabel: undefined,\n                        type,\n                        align,\n                        lineClamp,\n                        verticalAlign,\n                        badgeStatus: isBadge ? header.badgeStatus : undefined,\n                        badgeTheme: isBadge ? header.badgeTheme : undefined,\n                    };\n\n                    const result: Q2DataTableCell =\n                        typeof cellData === 'object'\n                            ? { ...defaultCell, ...cellData }\n                            : { ...defaultCell, value: cellData };\n\n                    accum[cellKey] = result;\n                    return accum;\n                },\n                {}\n            );\n\n            if (isAllSelected && !selected) isAllSelected = false;\n            if (!isAllSelected && selected) isIndeterminate = true;\n            return {\n                ...defaultRow,\n                id,\n                selected: !!selected,\n                expanded: !!expanded,\n                disabled: !!disabled,\n                cells: serializedCells,\n            };\n        });\n\n        const sortedHeader = serializedHeaders.find(({ sorted }) => sorted);\n\n        this.hasRowData = !!rows.length;\n        this.allRowsSelected = this.hasRowData && isAllSelected;\n        this.someRowsSelected = this.hasRowData && isIndeterminate;\n\n        this.serializedRows = !!sortedHeader ? this.sortRows(serializedRows, sortedHeader) : serializedRows;\n        this.checkSlots();\n    }\n\n    @Watch('selectable')\n    selectableHandler() {\n        if (this.selectable === false) {\n            this.selectAllRows.emit({ checked: false });\n        }\n    }\n\n    /// Listeners ///\n    @Listen('click')\n    onClickListener(event: MouseEvent) {\n        if (event instanceof PointerEvent) event.stopImmediatePropagation();\n    }\n\n    @Listen('selectAllRows')\n    onSelectAllRows(event: CustomEvent<{ checked: boolean }>) {\n        event.stopPropagation();\n        const { checked } = event.detail;\n        const selectedRows = checked\n            ? this.serializedRows.map(row => {\n                  if (row.disabled) {\n                      return row;\n                  } else {\n                      return {\n                          ...row,\n                          selected: checked,\n                      };\n                  }\n              })\n            : [];\n        const selectEvent = this.select.emit({ row: undefined, rows: selectedRows, allSelected: checked });\n        if (selectEvent.defaultPrevented) return;\n\n        this.serializedRows = this.serializedRows.map(row => {\n            if (row.disabled) return row;\n            row.selected = checked;\n            return row;\n        });\n        this.allRowsSelected = checked;\n        this.someRowsSelected = false;\n    }\n\n    /// Event Handlers ///\n    onSort = (header: Q2DataTableHeader) => {\n        const direction = header.sorted === 'ASC' ? 'DESC' : 'ASC';\n        const sortKey = header.key;\n        const sortEvent = this.sort.emit({ header, direction });\n        if (sortEvent.defaultPrevented) return;\n\n        this.serializedHeaders = this.serializedHeaders.map<Q2DataTableHeader>(serializedHeader => {\n            const sorted = sortKey === serializedHeader.key ? direction : undefined;\n            return { ...serializedHeader, sorted };\n        });\n        this.serializedRows = this.sortRows(this.serializedRows, { ...header, sorted: direction });\n    };\n\n    onSelectRow = (event: CustomEvent<{ checked: boolean }>, row: Q2DataTableSerializedRow) => {\n        event.stopPropagation();\n        const { selectMode, serializedRows, selectedRows: currentlySelectedRows } = this;\n        const { checked } = event.detail;\n\n        const selectedRow = { ...row, selected: checked };\n        let selectedRows;\n        if (selectMode === 'single') {\n            selectedRows = checked ? [selectedRow] : [];\n        } else {\n            selectedRows = checked\n                ? [...currentlySelectedRows, selectedRow]\n                : currentlySelectedRows.filter(row => row.id !== selectedRow.id);\n        }\n\n        const allRowsSelected = selectedRows.length === serializedRows.length;\n        const isIndeterminate = !allRowsSelected && selectedRows.length > 0;\n        const selectEvent = this.select.emit({ row: selectedRow, rows: selectedRows, allSelected: allRowsSelected });\n        if (selectEvent.defaultPrevented) return;\n\n        this.serializedRows = this.serializedRows.map(row => (row.id === selectedRow.id ? selectedRow : row));\n        this.allRowsSelected = allRowsSelected;\n        this.someRowsSelected = isIndeterminate;\n    };\n\n    onClickTableRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n        if (this.clickable) {\n            this.onClickRow(event, row);\n        } else if (this.hasExpandableRows) {\n            this.onToggleRow(event, row);\n        }\n    };\n\n    onClickRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n        event.stopPropagation();\n        this.click.emit({ row });\n    };\n\n    onToggleRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n        event.stopPropagation();\n        const selectedRow = { ...row, expanded: !row.expanded };\n        const toggleEvent = this.toggle.emit({ row: selectedRow });\n        if (toggleEvent.defaultPrevented) return;\n\n        this.serializedRows = this.serializedRows.map(row => {\n            if (row.id === selectedRow.id) return selectedRow;\n            else return { ...row };\n        });\n    };\n\n    onControlContainerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    /// DOM ///\n\n    render() {\n        const { caption } = this;\n        return (\n            <div class=\"container\">\n                <table>\n                    {caption && <caption class={this.hideCaption ? 'sr' : undefined}>{caption}</caption>}\n                    {this.renderTableColGroup()}\n                    {this.renderTableHeader()}\n                    {this.renderEmptyState()}\n                    {this.renderTableRows()}\n                </table>\n            </div>\n        );\n    }\n\n    renderTableColGroup() {\n        const { serializedHeaders: headers, selectable, clickable, hasExpandableRows, hasDropdowns } = this;\n\n        if (!headers.length) return null;\n\n        return (\n            <colgroup>\n                {selectable && <col class=\"select-column\" />}\n                {headers.map(({ width, backgroundColor }) => (\n                    <col style={{ width, backgroundColor }} />\n                ))}\n                {clickable && <col class=\"click-column\" />}\n                {hasExpandableRows && <col class=\"expandable-row-control-column\" />}\n                {hasDropdowns && <col class=\"dropdown-column\" />}\n            </colgroup>\n        );\n    }\n\n    renderTableHeader() {\n        const {\n            serializedHeaders: headers,\n            selectable,\n            clickable,\n            hideClickable,\n            selectMode,\n            hasExpandableRows,\n            hasDropdowns,\n            allRowsSelected,\n            someRowsSelected,\n            hasRowData,\n            loading,\n        } = this;\n\n        if (!headers.length) return null;\n\n        return (\n            <thead>\n                <tr>\n                    {selectable && (\n                        <th>\n                            {selectMode === 'multiple' && (\n                                <q2-checkbox\n                                    label={loc('tecton.element.dataTable.selectAllRows')}\n                                    hide-label\n                                    onChange={() => this.selectAllRows.emit({ checked: !allRowsSelected })}\n                                    checked={hasRowData && allRowsSelected && !someRowsSelected}\n                                    indeterminate={hasRowData && someRowsSelected && !allRowsSelected}\n                                    disabled={loading || !hasRowData}\n                                    test-id=\"select-all-rows-control\"\n                                ></q2-checkbox>\n                            )}\n                        </th>\n                    )}\n                    {headers.map(header => {\n                        const { align, sorted, verticalAlign } = header;\n                        const headerClasses = [];\n                        if (align) headerClasses.push(`align-${align}`);\n                        if (verticalAlign) headerClasses.push(`vertical-align-${verticalAlign}`);\n                        if (!!sorted) headerClasses.push('sorted');\n                        return (\n                            <th\n                                class={headerClasses.join(' ')}\n                                id={`header-${header.key}`}\n                            >\n                                {header.sortable ? (\n                                    <q2-btn\n                                        onClick={() => this.onSort(header)}\n                                        test-id=\"sort-control\"\n                                        disabled={this.loading}\n                                    >\n                                        <div\n                                            class=\"header-content\"\n                                            aria-label={header.ariaLabel || undefined}\n                                        >\n                                            <slot name={`header-cell-${header.key}`}>{header.title}</slot>\n\n                                            {!!sorted ? (\n                                                <q2-icon\n                                                    class={`sorted-indicator direction-${sorted}`}\n                                                    type=\"arrow-down\"\n                                                    label={\n                                                        sorted === 'ASC'\n                                                            ? loc('tecton.element.dataTable.sortedAscending')\n                                                            : loc('tecton.element.dataTable.sortedDescending')\n                                                    }\n                                                    test-id=\"sorted-indicator\"\n                                                ></q2-icon>\n                                            ) : (\n                                                <q2-icon\n                                                    class={`sorted-indicator`}\n                                                    type=\"sort\"\n                                                    label={loc('tecton.element.dataTable.clickToSort')}\n                                                    test-id=\"sorted-indicator\"\n                                                ></q2-icon>\n                                            )}\n                                        </div>\n                                    </q2-btn>\n                                ) : (\n                                    <div\n                                        class=\"header-content\"\n                                        aria-label={header.ariaLabel || undefined}\n                                    >\n                                        <slot name={`header-cell-${header.key}`}>{header.title}</slot>\n                                    </div>\n                                )}\n                            </th>\n                        );\n                    })}\n                    {clickable && (\n                        <th\n                            id=\"click\"\n                            class={hideClickable ? 'sr' : undefined}\n                        >\n                            <span class=\"sr\">{loc('tecton.element.dataTable.clickRow')}</span>\n                        </th>\n                    )}\n                    {hasExpandableRows && (\n                        <th id=\"toggle\">\n                            <span class=\"sr\">{loc('tecton.element.dataTable.toggleRow')}</span>\n                        </th>\n                    )}\n                    {hasDropdowns && (\n                        <th>\n                            <span class=\"sr\">{loc('tecton.element.dataTable.dropdown')}</span>\n                        </th>\n                    )}\n                </tr>\n            </thead>\n        );\n    }\n\n    renderEmptyState() {\n        const { hasRowData, numberOfColumns, emptyIcon, emptyMessage, loading } = this;\n        if (hasRowData || loading) return null;\n\n        return (\n            <slot name=\"empty-table\">\n                <tbody>\n                    <tr class=\"empty-state\">\n                        <td colSpan={numberOfColumns}>\n                            <div class=\"empty-state-content\">\n                                <q2-icon type={emptyIcon}></q2-icon>\n                                <p>{loc(emptyMessage)}</p>\n                            </div>\n                        </td>\n                    </tr>\n                </tbody>\n            </slot>\n        );\n    }\n\n    renderTableRows() {\n        const {\n            serializedHeaders: headers,\n            serializedRows: rows,\n            selectable,\n            clickable,\n            striped,\n            hideClickable,\n            selectMode,\n            hasExpandableRows,\n            hasDropdowns,\n            numberOfColumns,\n            loading,\n        } = this;\n\n        if (loading) {\n            return (\n                <tbody>\n                    <tr class=\"loading-row\">\n                        <td colSpan={numberOfColumns}>\n                            <q2-loading inline></q2-loading>\n                        </td>\n                    </tr>\n                </tbody>\n            );\n        }\n\n        let isSelectDisabled = false;\n        let selectedRow;\n        if (selectMode === 'single') {\n            selectedRow = this.selectedRow;\n            isSelectDisabled = !!selectedRow;\n        }\n        const clickableClasses = [];\n        if (clickable) clickableClasses.push('click-column');\n        if (hideClickable) clickableClasses.push('sr');\n        const clickableClassString = clickableClasses.join(' ');\n\n        return (\n            <tbody>\n                {rows.map(row => {\n                    const cellSlotPrefix = `row-${row.id}-cell`;\n                    const expandableRowName = `row-${row.id}-expandable-content`;\n                    const dropdownCellName = `row-${row.id}-dropdown`;\n                    const rowHasExpandableSlot =\n                        hasExpandableRows && !!this.hostElement.querySelector(`[slot=\"${expandableRowName}\"]`);\n                    const rowHasDropdownSlot =\n                        hasDropdowns && !!this.hostElement.querySelector(`[slot=\"${dropdownCellName}\"]`);\n                    const rowClasses = [];\n                    if (rowHasExpandableSlot) rowClasses.push('expandable');\n                    if (clickable) rowClasses.push('clickable');\n                    if (striped) rowClasses.push('striped');\n                    if (row.expanded) rowClasses.push('expanded');\n                    if (row.selected) rowClasses.push('selected');\n                    const rowIsClickable = clickable || rowHasExpandableSlot;\n\n                    return (\n                        <Fragment>\n                            <tr\n                                id={`row-${row.id}`}\n                                class={rowClasses.join(' ')}\n                                onClick={rowIsClickable && (e => this.onClickTableRow(e, row))}\n                                tabIndex={rowIsClickable ? -1 : undefined}\n                            >\n                                {selectable && (\n                                    <td\n                                        class=\"select-column\"\n                                        onClick={this.onControlContainerClick}\n                                    >\n                                        <q2-checkbox\n                                            label={loc('tecton.element.dataTable.selectRow')}\n                                            hide-label\n                                            checked={row.selected}\n                                            disabled={(isSelectDisabled && row !== selectedRow) || row.disabled}\n                                            onChange={e => this.onSelectRow(e, row)}\n                                            test-id=\"select-row-control\"\n                                        ></q2-checkbox>\n                                    </td>\n                                )}\n                                {headers.map(({ key }) => {\n                                    const cell = row.cells[key];\n                                    const lineClamp = cell?.lineClamp;\n                                    const cellAlign = cell?.align;\n                                    const cellVerticalAlign = cell?.verticalAlign;\n                                    const cellClasses = [];\n                                    if (cellAlign) cellClasses.push(`align-${cellAlign}`);\n                                    if (cellVerticalAlign) cellClasses.push(`vertical-align-${cellVerticalAlign}`);\n                                    if (lineClamp) cellClasses.push('clamped');\n                                    const cellStyles = lineClamp\n                                        ? { '--comp-line-clamp-count': `${lineClamp}` }\n                                        : undefined;\n\n                                    return (\n                                        <td\n                                            class={cellClasses.join(' ')}\n                                            style={cellStyles}\n                                        >\n                                            <slot name={`${cellSlotPrefix}-${key}`}>\n                                                {this.renderCellContent(cell)}\n                                            </slot>\n                                        </td>\n                                    );\n                                })}\n                                {clickable && (\n                                    <td class={clickableClassString}>\n                                        <q2-btn\n                                            intent=\"neutral\"\n                                            size=\"small\"\n                                            onClick={e => this.onClickRow(e, row)}\n                                            test-id=\"clickable-row-control\"\n                                        >\n                                            {loc('tecton.element.dataTable.clickRow')}\n                                        </q2-btn>\n                                    </td>\n                                )}\n                                {hasExpandableRows && (\n                                    <td\n                                        class=\"expandable-row-control-column\"\n                                        onClick={this.onControlContainerClick}\n                                    >\n                                        {rowHasExpandableSlot && (\n                                            <q2-btn\n                                                onClick={e => this.onToggleRow(e, row)}\n                                                ariaExpanded={`${row.expanded}`}\n                                                ariaControls={expandableRowName}\n                                                ariaLabel={loc('tecton.element.dataTable.toggleRow')}\n                                                test-id=\"expandable-row-control\"\n                                            >\n                                                <q2-icon\n                                                    type=\"chevron-down\"\n                                                    class=\"toggle-expandable-row\"\n                                                ></q2-icon>\n                                            </q2-btn>\n                                        )}\n                                    </td>\n                                )}\n                                {hasDropdowns && (\n                                    <td\n                                        class=\"dropdown-column\"\n                                        onClick={this.onControlContainerClick}\n                                    >\n                                        {rowHasDropdownSlot && <slot name={dropdownCellName}></slot>}\n                                    </td>\n                                )}\n                            </tr>\n                            {rowHasExpandableSlot && (\n                                <tr\n                                    id={expandableRowName}\n                                    class=\"expandable-row\"\n                                    hidden={!row.expanded}\n                                    aria-hidden={!row.expanded}\n                                >\n                                    <td\n                                        colSpan={numberOfColumns}\n                                        headers=\"toggle\"\n                                    >\n                                        <div class=\"expandable-content\">\n                                            <slot name={expandableRowName}></slot>\n                                        </div>\n                                    </td>\n                                </tr>\n                            )}\n                        </Fragment>\n                    );\n                })}\n            </tbody>\n        );\n    }\n\n    renderCellContent(cell: Q2DataTableCell) {\n        if (!cell) return;\n\n        const { type, ariaLabel, value } = cell;\n\n        if ([undefined, null].includes(value)) return;\n\n        switch (type) {\n            case 'badge':\n                let valueAsInt;\n                switch (typeof value) {\n                    case 'string':\n                        valueAsInt = parseFloat(value);\n                        break;\n\n                    case 'boolean':\n                        valueAsInt = value ? 1 : 0;\n                        break;\n\n                    default:\n                        valueAsInt = value;\n                        break;\n                }\n\n                return (\n                    <q2-badge\n                        aria-label={ariaLabel}\n                        value={valueAsInt}\n                        theme={cell.badgeTheme}\n                        status={cell.badgeStatus}\n                        size=\"large\"\n                    ></q2-badge>\n                );\n\n            case 'icon':\n                const valueAsString = typeof value === 'string' ? value : `${value}`;\n                return (\n                    <q2-icon\n                        label={ariaLabel}\n                        type={valueAsString}\n                    ></q2-icon>\n                );\n\n            case 'boolean':\n                return !!value ? (\n                    <q2-icon\n                        label={loc('tecton.element.dataTable.booleanTrue')}\n                        type=\"checkmark\"\n                    ></q2-icon>\n                ) : (\n                    <div aria-label={loc('tecton.element.dataTable.booleanFalse')}></div>\n                );\n\n            case 'code':\n                return <code aria-label={ariaLabel}>{value}</code>;\n\n            default:\n                return <div aria-label={ariaLabel}>{value}</div>;\n        }\n    }\n}\n"],"mappings":"2GAAA,MAAMA,EAAiB,soQACvB,MAAAC,EAAeD,E,MCuEFE,EAAW,M,4LA4OpBC,KAAAC,WAAa,K,YACTD,KAAKE,sBAAuBC,GAAAC,EAAAJ,KAAKK,eAAW,MAAAD,SAAA,SAAAA,EAAEE,cAAc,oCAAgC,MAAAH,SAAA,EAAAA,EAAI,OAChGH,KAAKO,iBAAkBC,GAAAC,EAAAT,KAAKK,eAAW,MAAAI,SAAA,SAAAA,EAAEH,cAAc,0BAAsB,MAAAE,SAAA,EAAAA,EAAI,OAIjFR,KAAKU,gBAAkB,CAAC,EAgI5BV,KAAAW,OAAUC,IACN,MAAMC,EAAYD,EAAOE,SAAW,MAAQ,OAAS,MACrD,MAAMC,EAAUH,EAAOI,IACvB,MAAMC,EAAYjB,KAAKkB,KAAKC,KAAK,CAAEP,SAAQC,cAC3C,GAAII,EAAUG,iBAAkB,OAEhCpB,KAAKqB,kBAAoBrB,KAAKqB,kBAAkBC,KAAuBC,IACnE,MAAMT,EAASC,IAAYQ,EAAiBP,IAAMH,EAAYW,UAC9D,OAAAC,OAAAC,OAAAD,OAAAC,OAAA,GAAYH,GAAgB,CAAET,UAAM,IAExCd,KAAK2B,eAAiB3B,KAAK4B,SAAS5B,KAAK2B,eAAcF,OAAAC,OAAAD,OAAAC,OAAA,GAAOd,GAAM,CAAEE,OAAQD,IAAY,EAG9Fb,KAAA6B,YAAc,CAACC,EAA0CC,KACrDD,EAAME,kBACN,MAAMC,WAAEA,EAAUN,eAAEA,EAAgBO,aAAcC,GAA0BnC,KAC5E,MAAMoC,QAAEA,GAAYN,EAAMO,OAE1B,MAAMC,EAAWb,OAAAC,OAAAD,OAAAC,OAAA,GAAQK,GAAG,CAAEQ,SAAUH,IACxC,IAAIF,EACJ,GAAID,IAAe,SAAU,CACzBC,EAAeE,EAAU,CAACE,GAAe,E,KACtC,CACHJ,EAAeE,EACT,IAAID,EAAuBG,GAC3BH,EAAsBK,QAAOT,GAAOA,EAAIU,KAAOH,EAAYG,I,CAGrE,MAAMC,EAAkBR,EAAaS,SAAWhB,EAAegB,OAC/D,MAAMC,GAAmBF,GAAmBR,EAAaS,OAAS,EAClE,MAAME,EAAc7C,KAAK8C,OAAO3B,KAAK,CAAEY,IAAKO,EAAaS,KAAMb,EAAcc,YAAaN,IAC1F,GAAIG,EAAYzB,iBAAkB,OAElCpB,KAAK2B,eAAiB3B,KAAK2B,eAAeL,KAAIS,GAAQA,EAAIU,KAAOH,EAAYG,GAAKH,EAAcP,IAChG/B,KAAK0C,gBAAkBA,EACvB1C,KAAKiD,iBAAmBL,CAAe,EAG3C5C,KAAAkD,gBAAkB,CAACpB,EAAmBC,KAClC,GAAI/B,KAAKmD,UAAW,CAChBnD,KAAKoD,WAAWtB,EAAOC,E,MACpB,GAAI/B,KAAKE,kBAAmB,CAC/BF,KAAKqD,YAAYvB,EAAOC,E,GAIhC/B,KAAAoD,WAAa,CAACtB,EAAmBC,KAC7BD,EAAME,kBACNhC,KAAKsD,MAAMnC,KAAK,CAAEY,OAAM,EAG5B/B,KAAAqD,YAAc,CAACvB,EAAmBC,KAC9BD,EAAME,kBACN,MAAMM,EAAWb,OAAAC,OAAAD,OAAAC,OAAA,GAAQK,GAAG,CAAEwB,UAAWxB,EAAIwB,WAC7C,MAAMC,EAAcxD,KAAKyD,OAAOtC,KAAK,CAAEY,IAAKO,IAC5C,GAAIkB,EAAYpC,iBAAkB,OAElCpB,KAAK2B,eAAiB3B,KAAK2B,eAAeL,KAAIS,IAC1C,GAAIA,EAAIU,KAAOH,EAAYG,GAAI,OAAOH,OACjC,OAAAb,OAAAC,OAAA,GAAYK,EAAG,GACtB,EAGN/B,KAAA0D,wBAA2B5B,IACvBA,EAAME,iBAAiB,E,8GApakB,Q,kBAKG,wC,oKA0Ea,W,sEAUX,G,oBACI,G,uBAChB,M,kBACL,M,qBACG,M,sBACC,M,gBACN,M,oBACG,C,CAuDlC,iBAAA2B,GACI3D,KAAK4D,eAAe5D,KAAK6D,SACzB7D,KAAK8D,YAAY9D,KAAK+C,K,CAG1B,gBAAAgB,GACI,UAAWC,mBAAqB,YAAa,CACzC,MAAMC,EAAW,IAAID,kBAAiB,IAAMhE,KAAKC,eACjDgE,EAASC,QAAQlE,KAAKK,YAAa,CAAE8D,UAAW,KAAMC,QAAS,KAAMC,WAAY,OACjFrE,KAAKsE,iBAAmBL,C,CAE5B,UAAWM,iBAAmB,YAAa,CACvCvE,KAAKwE,eAAiB,IAAID,gBAAe,IAAME,MAC/CzE,KAAKwE,eAAeN,QAAQlE,KAAKK,Y,EAIzC,oBAAAqE,GACI,GAAI1E,KAAKsE,iBAAkB,CACvBtE,KAAKsE,iBAAiBK,aACtB3E,KAAKsE,iBAAmB,I,CAE5B,GAAItE,KAAKwE,eAAgB,CACrBxE,KAAKwE,eAAeG,aACpB3E,KAAKwE,eAAiB,I,EAK9B,gBAAItC,GACA,OAAOlC,KAAK2B,eAAea,QAAO,EAAGD,cAAeA,G,CAGxD,eAAID,GACA,OAAOtC,KAAKkC,aAAa0C,MAAK,EAAGrC,gBAAiBA,G,CAGtD,mBAAIsC,G,QACA,QACK1E,GAAAC,EAAAJ,KAAKqB,qBAAiB,MAAAjB,SAAA,SAAAA,EAAEuC,UAAM,MAAAxC,SAAA,EAAAA,EAAI,IAClCH,KAAK8E,WAAa,EAAI,IACtB9E,KAAKmD,UAAY,EAAI,IACrBnD,KAAKE,kBAAoB,EAAI,IAC7BF,KAAKO,aAAe,EAAI,E,CAIjC,iBAAIwE,GACA,OAAO/E,KAAKqB,kBAAkB2D,QAA0C,CAACC,EAAOrE,KAC5EqE,EAAMrE,EAAOI,KAAOJ,EACpB,OAAOqE,CAAK,GACb,G,CAIP,QAAArD,CAASmB,EAAkCnC,GACvC,MAAMI,IAAEA,EAAGF,OAAEA,GAAWF,EACxB,MAAMC,EAAYC,GAAU,MAE5B,MAAMoE,EAAa,IAAInC,GAAM7B,MAAK,CAACiE,EAAGC,KAClC,MAAMC,EAASF,EAAEG,MAAMtE,GAAKuE,MAC5B,MAAMC,EAASJ,EAAEE,MAAMtE,GAAKuE,MAE5B,GAAIF,EAASG,EAAQ,OAAO3E,IAAc,OAAS,EAAI,EACvD,GAAIwE,EAASG,EAAQ,OAAO3E,IAAc,MAAQ,GAAK,EACvD,OAAO,CAAC,IAGZ,OAAOqE,C,CAcX,cAAAtB,CAAeC,EAA+B,IAC1C7D,KAAKqB,kBAAoBwC,EAAQvC,KAAuBV,IACpD,MAAM6E,MAAEA,GAAU7E,EAClB,IAAII,IAAEA,GAAQJ,EAGd,IAAKI,EAAKA,EAAMyE,EAAMC,cAAcC,QAAQ,MAAO,KAEnD,OAAAlE,OAAAC,OAAA,CACIV,OACGJ,EAAM,G,CAMrB,WAAAkD,CAAYf,EAAyB,IACjC,MAAM1B,kBAAEA,EAAiB0D,cAAEA,GAAkB/E,KAC7C,MAAM4F,EAAa,CACfnD,GAAI,KACJ6C,MAAO,GACP/C,SAAU,MACVgB,SAAU,MACVsC,SAAU,OAId,IAAIC,EAAgB,KACpB,IAAIlD,EAAkB,MAEtB,MAAMjB,EAAiBoB,EAAKzB,KAAI,EAAGmB,KAAI6C,QAAO/C,WAAUgB,WAAUsC,eAC9D,MAAME,EAAkBtE,OAAOuE,QAAQV,GAAON,QAC1C,CAACC,GAAQgB,EAASC,MACd,MAAMtF,EAASmE,EAAckB,IAAa,GAC1C,MAAME,MAAEA,EAAKC,KAAEA,EAAO,OAAMC,UAAEA,EAASC,cAAEA,GAAkB1F,EAE3D,MAAM2F,EAAU,SAAU3F,GAAUA,EAAOwF,OAAS,QACpD,MAAMI,EAA+B,CACjCjB,MAAO,GACPkB,UAAWjF,UACX4E,OACAD,QACAE,YACAC,gBACAI,YAAaH,EAAU3F,EAAO8F,YAAclF,UAC5CmF,WAAYJ,EAAU3F,EAAO+F,WAAanF,WAG9C,MAAMoF,SACKV,IAAa,S,+BACTM,GAAgBN,GAAQzE,OAAAC,OAAAD,OAAAC,OAAA,GACxB8E,GAAW,CAAEjB,MAAOW,IAEnCjB,EAAMgB,GAAWW,EACjB,OAAO3B,CAAK,GAEhB,IAGJ,GAAIa,IAAkBvD,EAAUuD,EAAgB,MAChD,IAAKA,GAAiBvD,EAAUK,EAAkB,KAClD,OAAAnB,OAAAC,OAAAD,OAAAC,OAAA,GACOkE,GAAU,CACbnD,KACAF,WAAYA,EACZgB,WAAYA,EACZsC,WAAYA,EACZP,MAAOS,GAAe,IAI9B,MAAMc,EAAexF,EAAkBuD,MAAK,EAAG9D,YAAaA,IAE5Dd,KAAK8G,aAAe/D,EAAKJ,OACzB3C,KAAK0C,gBAAkB1C,KAAK8G,YAAchB,EAC1C9F,KAAKiD,iBAAmBjD,KAAK8G,YAAclE,EAE3C5C,KAAK2B,iBAAmBkF,EAAe7G,KAAK4B,SAASD,EAAgBkF,GAAgBlF,EACrF3B,KAAKC,Y,CAIT,iBAAA8G,GACI,GAAI/G,KAAK8E,aAAe,MAAO,CAC3B9E,KAAKgH,cAAc7F,KAAK,CAAEiB,QAAS,O,EAM3C,eAAA6E,CAAgBnF,GACZ,GAAIA,aAAiBoF,aAAcpF,EAAMqF,0B,CAI7C,eAAAC,CAAgBtF,GACZA,EAAME,kBACN,MAAMI,QAAEA,GAAYN,EAAMO,OAC1B,MAAMH,EAAeE,EACfpC,KAAK2B,eAAeL,KAAIS,IACpB,GAAIA,EAAI8D,SAAU,CACd,OAAO9D,C,KACJ,CACH,OAAAN,OAAAC,OAAAD,OAAAC,OAAA,GACOK,GAAG,CACNQ,SAAUH,G,KAItB,GACN,MAAMS,EAAc7C,KAAK8C,OAAO3B,KAAK,CAAEY,IAAKP,UAAWuB,KAAMb,EAAcc,YAAaZ,IACxF,GAAIS,EAAYzB,iBAAkB,OAElCpB,KAAK2B,eAAiB3B,KAAK2B,eAAeL,KAAIS,IAC1C,GAAIA,EAAI8D,SAAU,OAAO9D,EACzBA,EAAIQ,SAAWH,EACf,OAAOL,CAAG,IAEd/B,KAAK0C,gBAAkBN,EACvBpC,KAAKiD,iBAAmB,K,CAyE5B,MAAAoE,GACI,MAAMC,QAAEA,GAAYtH,KACpB,OACIuH,EAAA,OAAAvG,IAAA,2CAAKwG,MAAM,aACPD,EAAA,SAAAvG,IAAA,4CACKsG,GAAWC,EAAA,WAAAvG,IAAA,2CAASwG,MAAOxH,KAAKyH,YAAc,KAAOjG,WAAY8F,GACjEtH,KAAK0H,sBACL1H,KAAK2H,oBACL3H,KAAK4H,mBACL5H,KAAK6H,mB,CAMtB,mBAAAH,GACI,MAAQrG,kBAAmBwC,EAAOiB,WAAEA,EAAU3B,UAAEA,EAASjD,kBAAEA,EAAiBK,aAAEA,GAAiBP,KAE/F,IAAK6D,EAAQlB,OAAQ,OAAO,KAE5B,OACI4E,EAAA,gBACKzC,GAAcyC,EAAA,OAAKC,MAAM,kBACzB3D,EAAQvC,KAAI,EAAGwG,QAAOC,qBACnBR,EAAA,OAAKS,MAAO,CAAEF,QAAOC,uBAExB5E,GAAaoE,EAAA,OAAKC,MAAM,iBACxBtH,GAAqBqH,EAAA,OAAKC,MAAM,kCAChCjH,GAAgBgH,EAAA,OAAKC,MAAM,oB,CAKxC,iBAAAG,GACI,MACItG,kBAAmBwC,EAAOiB,WAC1BA,EAAU3B,UACVA,EAAS8E,cACTA,EAAahG,WACbA,EAAU/B,kBACVA,EAAiBK,aACjBA,EAAYmC,gBACZA,EAAeO,iBACfA,EAAgB6D,WAChBA,EAAUoB,QACVA,GACAlI,KAEJ,IAAK6D,EAAQlB,OAAQ,OAAO,KAE5B,OACI4E,EAAA,aACIA,EAAA,UACKzC,GACGyC,EAAA,UACKtF,IAAe,YACZsF,EAAA,eACIY,MAAOC,EAAI,0CAAyC,kBAEpDC,SAAU,IAAMrI,KAAKgH,cAAc7F,KAAK,CAAEiB,SAAUM,IACpDN,QAAS0E,GAAcpE,IAAoBO,EAC3CqF,cAAexB,GAAc7D,IAAqBP,EAClDmD,SAAUqC,IAAYpB,EAAU,UACxB,6BAKvBjD,EAAQvC,KAAIV,IACT,MAAMuF,MAAEA,EAAKrF,OAAEA,EAAMwF,cAAEA,GAAkB1F,EACzC,MAAM2H,EAAgB,GACtB,GAAIpC,EAAOoC,EAAcC,KAAK,SAASrC,KACvC,GAAIG,EAAeiC,EAAcC,KAAK,kBAAkBlC,KACxD,KAAMxF,EAAQyH,EAAcC,KAAK,UACjC,OACIjB,EAAA,MACIC,MAAOe,EAAcE,KAAK,KAC1BhG,GAAI,UAAU7B,EAAOI,OAEpBJ,EAAO8H,SACJnB,EAAA,UACIoB,QAAS,IAAM3I,KAAKW,OAAOC,GAAO,UAC1B,eACRiF,SAAU7F,KAAKkI,SAEfX,EAAA,OACIC,MAAM,iBAAgB,aACV5G,EAAO6F,WAAajF,WAEhC+F,EAAA,QAAMqB,KAAM,eAAehI,EAAOI,OAAQJ,EAAO6E,SAE9C3E,EACCyG,EAAA,WACIC,MAAO,8BAA8B1G,IACrCsF,KAAK,aACL+B,MACIrH,IAAW,MACLsH,EAAI,4CACJA,EAAI,6CAA4C,UAElD,qBAGZb,EAAA,WACIC,MAAO,mBACPpB,KAAK,OACL+B,MAAOC,EAAI,wCAAuC,UAC1C,uBAMxBb,EAAA,OACIC,MAAM,iBAAgB,aACV5G,EAAO6F,WAAajF,WAEhC+F,EAAA,QAAMqB,KAAM,eAAehI,EAAOI,OAAQJ,EAAO6E,QAGxD,IAGZtC,GACGoE,EAAA,MACI9E,GAAG,QACH+E,MAAOS,EAAgB,KAAOzG,WAE9B+F,EAAA,QAAMC,MAAM,MAAMY,EAAI,uCAG7BlI,GACGqH,EAAA,MAAI9E,GAAG,UACH8E,EAAA,QAAMC,MAAM,MAAMY,EAAI,wCAG7B7H,GACGgH,EAAA,UACIA,EAAA,QAAMC,MAAM,MAAMY,EAAI,wC,CAQ9C,gBAAAR,GACI,MAAMd,WAAEA,EAAUjC,gBAAEA,EAAegE,UAAEA,EAASC,aAAEA,EAAYZ,QAAEA,GAAYlI,KAC1E,GAAI8G,GAAcoB,EAAS,OAAO,KAElC,OACIX,EAAA,QAAMqB,KAAK,eACPrB,EAAA,aACIA,EAAA,MAAIC,MAAM,eACND,EAAA,MAAIwB,QAASlE,GACT0C,EAAA,OAAKC,MAAM,uBACPD,EAAA,WAASnB,KAAMyC,IACftB,EAAA,SAAIa,EAAIU,Q,CASpC,eAAAjB,GACI,MACIxG,kBAAmBwC,EACnBlC,eAAgBoB,EAAI+B,WACpBA,EAAU3B,UACVA,EAAS6F,QACTA,EAAOf,cACPA,EAAahG,WACbA,EAAU/B,kBACVA,EAAiBK,aACjBA,EAAYsE,gBACZA,EAAeqD,QACfA,GACAlI,KAEJ,GAAIkI,EAAS,CACT,OACIX,EAAA,aACIA,EAAA,MAAIC,MAAM,eACND,EAAA,MAAIwB,QAASlE,GACT0C,EAAA,cAAY0B,OAAM,S,CAOtC,IAAIC,EAAmB,MACvB,IAAI5G,EACJ,GAAIL,IAAe,SAAU,CACzBK,EAActC,KAAKsC,YACnB4G,IAAqB5G,C,CAEzB,MAAM6G,EAAmB,GACzB,GAAIhG,EAAWgG,EAAiBX,KAAK,gBACrC,GAAIP,EAAekB,EAAiBX,KAAK,MACzC,MAAMY,EAAuBD,EAAiBV,KAAK,KAEnD,OACIlB,EAAA,aACKxE,EAAKzB,KAAIS,IACN,MAAMsH,EAAiB,OAAOtH,EAAIU,UAClC,MAAM6G,EAAoB,OAAOvH,EAAIU,wBACrC,MAAM8G,EAAmB,OAAOxH,EAAIU,cACpC,MAAM+G,EACFtJ,KAAuBF,KAAKK,YAAYC,cAAc,UAAUgJ,OACpE,MAAMG,EACFlJ,KAAkBP,KAAKK,YAAYC,cAAc,UAAUiJ,OAC/D,MAAMG,EAAa,GACnB,GAAIF,EAAsBE,EAAWlB,KAAK,cAC1C,GAAIrF,EAAWuG,EAAWlB,KAAK,aAC/B,GAAIQ,EAASU,EAAWlB,KAAK,WAC7B,GAAIzG,EAAIwB,SAAUmG,EAAWlB,KAAK,YAClC,GAAIzG,EAAIQ,SAAUmH,EAAWlB,KAAK,YAClC,MAAMmB,EAAiBxG,GAAaqG,EAEpC,OACIjC,EAACqC,EAAQ,KACLrC,EAAA,MACI9E,GAAI,OAAOV,EAAIU,KACf+E,MAAOkC,EAAWjB,KAAK,KACvBE,QAASgB,GAAc,CAAKE,GAAK7J,KAAKkD,gBAAgB2G,EAAG9H,IACzD+H,SAAUH,GAAkB,EAAInI,WAE/BsD,GACGyC,EAAA,MACIC,MAAM,gBACNmB,QAAS3I,KAAK0D,yBAEd6D,EAAA,eACIY,MAAOC,EAAI,sCAAqC,kBAEhDhG,QAASL,EAAIQ,SACbsD,SAAWqD,GAAoBnH,IAAQO,GAAgBP,EAAI8D,SAC3DwC,SAAUwB,GAAK7J,KAAK6B,YAAYgI,EAAG9H,GAAI,UAC/B,wBAInB8B,EAAQvC,KAAI,EAAGN,UACZ,MAAM+I,EAAOhI,EAAIuD,MAAMtE,GACvB,MAAMqF,EAAY0D,IAAI,MAAJA,SAAI,SAAJA,EAAM1D,UACxB,MAAM2D,EAAYD,IAAI,MAAJA,SAAI,SAAJA,EAAM5D,MACxB,MAAM8D,EAAoBF,IAAI,MAAJA,SAAI,SAAJA,EAAMzD,cAChC,MAAM4D,EAAc,GACpB,GAAIF,EAAWE,EAAY1B,KAAK,SAASwB,KACzC,GAAIC,EAAmBC,EAAY1B,KAAK,kBAAkByB,KAC1D,GAAI5D,EAAW6D,EAAY1B,KAAK,WAChC,MAAM2B,EAAa9D,EACb,CAAE,0BAA2B,GAAGA,KAChC7E,UAEN,OACI+F,EAAA,MACIC,MAAO0C,EAAYzB,KAAK,KACxBT,MAAOmC,GAEP5C,EAAA,QAAMqB,KAAM,GAAGS,KAAkBrI,KAC5BhB,KAAKoK,kBAAkBL,IAE3B,IAGZ5G,GACGoE,EAAA,MAAIC,MAAO4B,GACP7B,EAAA,UACI8C,OAAO,UACPC,KAAK,QACL3B,QAASkB,GAAK7J,KAAKoD,WAAWyG,EAAG9H,GAAI,UAC7B,yBAEPqG,EAAI,uCAIhBlI,GACGqH,EAAA,MACIC,MAAM,gCACNmB,QAAS3I,KAAK0D,yBAEb8F,GACGjC,EAAA,UACIoB,QAASkB,GAAK7J,KAAKqD,YAAYwG,EAAG9H,GAClCwI,aAAc,GAAGxI,EAAIwB,WACrBiH,aAAclB,EACd7C,UAAW2B,EAAI,sCAAqC,UAC5C,0BAERb,EAAA,WACInB,KAAK,eACLoB,MAAM,4BAMzBjH,GACGgH,EAAA,MACIC,MAAM,kBACNmB,QAAS3I,KAAK0D,yBAEb+F,GAAsBlC,EAAA,QAAMqB,KAAMW,MAI9CC,GACGjC,EAAA,MACI9E,GAAI6G,EACJ9B,MAAM,iBACNiD,QAAS1I,EAAIwB,SAAQ,eACPxB,EAAIwB,UAElBgE,EAAA,MACIwB,QAASlE,EACThB,QAAQ,UAER0D,EAAA,OAAKC,MAAM,sBACPD,EAAA,QAAMqB,KAAMU,OAKrB,I,CAO/B,iBAAAc,CAAkBL,GACd,IAAKA,EAAM,OAEX,MAAM3D,KAAEA,EAAIK,UAAEA,EAASlB,MAAEA,GAAUwE,EAEnC,GAAI,CAACvI,UAAW,MAAMkJ,SAASnF,GAAQ,OAEvC,OAAQa,GACJ,IAAK,QACD,IAAIuE,EACJ,cAAepF,GACX,IAAK,SACDoF,EAAaC,WAAWrF,GACxB,MAEJ,IAAK,UACDoF,EAAapF,EAAQ,EAAI,EACzB,MAEJ,QACIoF,EAAapF,EACb,MAGR,OACIgC,EAAA,yBACgBd,EACZlB,MAAOoF,EACPE,MAAOd,EAAKpD,WACZmE,OAAQf,EAAKrD,YACb4D,KAAK,UAIjB,IAAK,OACD,MAAMS,SAAuBxF,IAAU,SAAWA,EAAQ,GAAGA,IAC7D,OACIgC,EAAA,WACIY,MAAO1B,EACPL,KAAM2E,IAIlB,IAAK,UACD,QAASxF,EACLgC,EAAA,WACIY,MAAOC,EAAI,wCACXhC,KAAK,cAGTmB,EAAA,oBAAiBa,EAAI,2CAG7B,IAAK,OACD,OAAOb,EAAA,qBAAkBd,GAAYlB,GAEzC,QACI,OAAOgC,EAAA,oBAAiBd,GAAYlB,G"}

package/dist/q2-tecton-elements/{p-b849365e.entry.js → p-32b56406.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as r,F as i,g as o}from"./p-a5f18e27.js";import{o as s,i as a,l}from"./p-84190698.js";const n='*{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}ul{--comp-bullet-background:var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-label-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;margin-top:2px;--comp-active-color:var(--comp-bullet-background)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn[aria-disabled]{cursor:not-allowed}.step-btn[aria-disabled],.step-btn[aria-disabled]+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-background:var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9))))}.step-icon,.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}.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(--comp-bullet-font-color);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected] .step-icon,[aria-selected] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}.step-bubble{background:var(--comp-bullet-background)}.step-divider{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-background);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d))));font-size:var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));line-height:var(--tct-stepper-label-line-height, 1.5em);text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, 2);-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:var(--tct-stepper-label-line-count, 1)}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-description-line-count, 4);-webkit-box-orient:vertical;padding-bottom:0.2em}.step-description .ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--comp-step-width);display:block}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 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}';const c=n;const p=class{constructor(r){t(this,r);this.change=e(this,"change",7);this.scheduledAfterRender=[];this.onSlotChange=()=>{this.checkForPanes();this.checkScrollState()};this.onScrollBtnClick=t=>{const e=Math.floor(this.listElement.clientWidth/2);this.listElement.scrollBy({left:t==="left"?-e:e,behavior:"smooth"})};this.onStepClick=(t,e)=>{t.stopPropagation();const{currentStep:r,stepCount:i,lastEnabledStep:o}=this;if(e>o||e===r)return;this.change.emit({selectedStep:e,lastEnabledStep:o,currentStep:r,stepCount:i})};this.onStepKeyDown=(t,e)=>{const{lastEnabledStep:r,stepCount:i}=this;const{key:o}=t;let s;switch(o){case"ArrowLeft":t.preventDefault();s=Math.max(e-1,0);break;case"ArrowRight":t.preventDefault();s=Math.min(e+1,i);break;case"Home":t.preventDefault();s=1;break;case"End":t.preventDefault();s=r;break}if(!s)return;this.focusStep(s,true)};this.checkForPanes=()=>{const{allPanes:t}=this;if(!t.length)return;this.stepCount=t.length};this.checkScrollState=()=>{if(!this.listElement)return;const{scrollLeft:t,scrollWidth:e,clientWidth:r}=this.listElement;this.scrollEnabled=e>r;this.showScrollLeft=!!t;this.showScrollRight=e!==t+r};this.currentStep=1;this.stepCount=undefined;this.lastEnabledStep=undefined;this.contentChangeTriggerCount=0;this.scrollEnabled=false;this.showScrollLeft=false;this.showScrollRight=false}componentWillLoad(){if(!this.lastEnabledStep)this.lastEnabledStep=this.currentStep||1;this.resizeObserver=new ResizeObserver((()=>this.checkScrollState()));this.checkForPanes()}componentDidLoad(){this.resizeObserver.observe(this.listElement);this.checkScrollState();s(this.hostElement);setTimeout((()=>this.showStep(this.currentStep||1)),0)}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}disconnectedCallback(){this.resizeObserver.disconnect()}currentStepChanged(t){this.showStep(t)}defaultChangeHandler(t){const{hostElement:e}=this;if(t.target===e&&!e.getAttribute("onchange")&&!!t.detail){this.currentStep=t.detail.selectedStep}}delegateFocus(t){if(!a(t,this.hostElement))return;this.focusStep(this.currentStep,true,true)}statusChangeHandler(t){const e=Array.from(this.allPanes).findIndex((e=>t.detail.id===e.id));if(e>-1){this.allPanes[e].status=t.detail.status;this.renderStepBtn(e)}}contentChangeHandler(){this.contentChangeTriggerCount+=1}get allPanes(){return this.hostElement.querySelectorAll("q2-stepper-pane")}showStep(t){if(t>this.lastEnabledStep){const{currentStep:e,stepCount:r}=this;this.lastEnabledStep=t;this.change.emit({selectedStep:null,lastEnabledStep:t,currentStep:e,stepCount:r})}this.scheduledAfterRender.push(this.resizeIframe);this.showStepPane(t);this.focusStep(t,this.scrollEnabled)}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)}showStepPane(t){this.allPanes.forEach(((e,r)=>{e.isActive=t===r+1}))}focusStep(t,e,r){var i;const o=this.listElement.children[t-1];const s=document.activeElement===this.hostElement;if(!o)return;if(s||r){(i=o.firstElementChild)===null||i===void 0?void 0:i.focus()}if(e){const t=o.offsetLeft-this.listElement.clientWidth/2;this.listElement.scrollTo({left:t,behavior:"smooth"})}}getPaneSlotOrProperty(t,e){var r;const i=t.querySelector(`[slot="${e}"]`);return(r=i===null||i===void 0?void 0:i.outerHTML)!==null&&r!==void 0?r:l(t[e])}renderStepBtn(t){var e;const{allPanes:o,stepCount:s,currentStep:a,lastEnabledStep:n}=this;const c=(e=o===null||o===void 0?void 0:o[t])!==null&&e!==void 0?e:null;const{id:p,status:d}=c;const b=this.getPaneSlotOrProperty(c,"label");const h=this.getPaneSlotOrProperty(c,"description");const v=t+1;const f=v===a;const u=!!b&&`label-${p}`;const g=!!b&&!!h&&`description-${p}`;const m=!b&&l("tecton.element.stepper.number",[`${v}`,`${s}`]);let w;if(d==="complete")w="success-filled";else if(d==="error")w="warning-filled";const x=["step-btn"];if(d)x.push(`status-${d}`);const k=d==="locked";const y=k||v>n;return r("li",{role:"presentation"},r("button",{class:x.join(" "),type:"button","aria-labelledby":u,"aria-describedBy":g,"aria-label":m,"aria-selected":f,"aria-disabled":y?"true":null,role:"tab",tabIndex:f?0:-1,onKeyDown:t=>this.onStepKeyDown(t,v),onClick:t=>!k&&this.onStepClick(t,v)},r(i,null,w?r("div",{class:"step-icon"},r("q2-icon",{type:w})):r("div",{class:"step-bubble"},v),u&&r("div",{class:"step-label",id:u,innerHTML:b}),u&&g&&r("div",{class:"step-description",id:g,innerHTML:h}))),t?r("div",{class:"step-divider"}):"")}render(){const{stepCount:t,scrollEnabled:e,showScrollLeft:o,showScrollRight:s}=this;const a=["step-container"];if(e)a.push("has-scroll");return r(i,{key:"a429a249a7650c79ec1650b41dc8c89dd391b387"},r("div",{key:"765d7e96a7dd17b5ce6a1e5fcfb45dd5da3e08f9",class:a.join(" ")},e&&r(i,{key:"9c04762cb3939f829e996a1a280fa8f0f84ffc16"},r("div",{key:"4f74ad07bcdaa70f637b58fab0d3a6369fda16a7",class:"gradient-left",hidden:!o}),r("div",{key:"23304db40b9ae8d77d881330ebdf2cab05e2b7f3",class:"gradient-right",hidden:!s}),r("q2-btn",{key:"75d8e8ce8314d8260af007b4bd1328c67740c2dc",class:"btn-left",hideLabel:true,hidden:!this.showScrollLeft,label:l("tecton.element.stepper.scrollLeft"),onClick:()=>this.onScrollBtnClick("left")},r("q2-icon",{key:"4f95f8ac5488b348b2d2a4e05e7cf3524f4c252f",type:"chevron-left"})),r("q2-btn",{key:"8f1fe6be6d19abc348e17684556702b187fe2dbc",class:"btn-right",hideLabel:true,hidden:!this.showScrollRight,label:l("tecton.element.stepper.scrollRight"),onClick:()=>this.onScrollBtnClick("right")},r("q2-icon",{key:"1eeb883d12029d84373f635c33b0ede60f3d9c2a",type:"chevron-right"}))),r("ul",{key:"ea6664652e5213c8ba792e6e6e1d09c72a5f3357",onScroll:this.checkScrollState,ref:t=>this.listElement=t,role:"tablist"},t>0&&[...Array(t).keys()].map((t=>this.renderStepBtn(t))))),r("div",{key:"3567e2927ad62704fbb15821cd92b7f1f6d3926d",role:"list"},r("slot",{key:"c48ec1c4eef9bc0c7524134bd15efaab802a2f9d",onSlotchange:()=>this.onSlotChange()})))}get hostElement(){return o(this)}static get watchers(){return{currentStep:["currentStepChanged"]}}};p.style=c;export{p as q2_stepper};
-//# sourceMappingURL=p-b849365e.entry.js.map
+import{r as t,c as e,h as r,F as i,g as o}from"./p-a5f18e27.js";import{o as s,i as a,l}from"./p-84190698.js";const n='*{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}ul{--comp-bullet-background:var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-label-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;margin-top:2px;--comp-active-color:var(--comp-bullet-background)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn[aria-disabled]{cursor:not-allowed}.step-btn[aria-disabled],.step-btn[aria-disabled]+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-background:var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9))))}.step-icon,.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}.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(--comp-bullet-font-color);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected] .step-icon,[aria-selected] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}.step-bubble{background:var(--comp-bullet-background)}.step-divider{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-background);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d))));font-size:var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));line-height:var(--tct-stepper-label-line-height, 1.5em);text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, 2);-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:var(--tct-stepper-label-line-count, 1)}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-description-line-count, 4);-webkit-box-orient:vertical;padding-bottom:0.2em}.step-description .ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--comp-step-width);display:block}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 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}';const c=n;const p=class{constructor(r){t(this,r);this.change=e(this,"change",7);this.scheduledAfterRender=[];this.onSlotChange=()=>{this.checkForPanes();this.checkScrollState()};this.onScrollBtnClick=t=>{const e=Math.floor(this.listElement.clientWidth/2);this.listElement.scrollBy({left:t==="left"?-e:e,behavior:"smooth"})};this.onStepClick=(t,e)=>{t.stopPropagation();const{currentStep:r,stepCount:i,lastEnabledStep:o}=this;if(e>o||e===r)return;this.change.emit({selectedStep:e,lastEnabledStep:o,currentStep:r,stepCount:i})};this.onStepKeyDown=(t,e)=>{const{lastEnabledStep:r,stepCount:i}=this;const{key:o}=t;let s;switch(o){case"ArrowLeft":t.preventDefault();s=Math.max(e-1,0);break;case"ArrowRight":t.preventDefault();s=Math.min(e+1,i);break;case"Home":t.preventDefault();s=1;break;case"End":t.preventDefault();s=r;break}if(!s)return;this.focusStep(s,true)};this.checkForPanes=()=>{const{allPanes:t}=this;if(!t.length)return;this.stepCount=t.length};this.checkScrollState=()=>{if(!this.listElement)return;const{scrollLeft:t,scrollWidth:e,clientWidth:r}=this.listElement;this.scrollEnabled=e>r;this.showScrollLeft=!!t;this.showScrollRight=e!==t+r};this.currentStep=1;this.stepCount=undefined;this.lastEnabledStep=undefined;this.contentChangeTriggerCount=0;this.scrollEnabled=false;this.showScrollLeft=false;this.showScrollRight=false}componentWillLoad(){if(!this.lastEnabledStep)this.lastEnabledStep=this.currentStep||1;this.resizeObserver=new ResizeObserver((()=>this.checkScrollState()));this.checkForPanes()}componentDidLoad(){this.resizeObserver.observe(this.listElement);this.checkScrollState();s(this.hostElement);setTimeout((()=>this.showStep(this.currentStep||1)),0)}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}disconnectedCallback(){this.resizeObserver.disconnect()}currentStepChanged(t){this.showStep(t)}defaultChangeHandler(t){const{hostElement:e}=this;if(t.target===e&&!e.getAttribute("onchange")&&!!t.detail){this.currentStep=t.detail.selectedStep}}delegateFocus(t){if(!a(t,this.hostElement))return;this.focusStep(this.currentStep,true,true)}statusChangeHandler(t){const e=Array.from(this.allPanes).findIndex((e=>t.detail.id===e.id));if(e>-1){this.allPanes[e].status=t.detail.status;this.renderStepBtn(e)}}contentChangeHandler(){this.contentChangeTriggerCount+=1}get allPanes(){return this.hostElement.querySelectorAll("q2-stepper-pane")}showStep(t){if(t>this.lastEnabledStep){const{currentStep:e,stepCount:r}=this;this.lastEnabledStep=t;this.change.emit({selectedStep:null,lastEnabledStep:t,currentStep:e,stepCount:r})}this.scheduledAfterRender.push(this.resizeIframe);this.showStepPane(t);this.focusStep(t,this.scrollEnabled)}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)}showStepPane(t){this.allPanes.forEach(((e,r)=>{e.isActive=t===r+1}))}focusStep(t,e,r){var i;const o=this.listElement.children[t-1];const s=document.activeElement===this.hostElement;if(!o)return;if(s||r){(i=o.firstElementChild)===null||i===void 0?void 0:i.focus()}if(e){const t=o.offsetLeft-this.listElement.clientWidth/2;this.listElement.scrollTo({left:t,behavior:"smooth"})}}getPaneSlotOrProperty(t,e){var r;const i=t.querySelector(`:scope > [slot="${e}"]`);return(r=i===null||i===void 0?void 0:i.outerHTML)!==null&&r!==void 0?r:l(t[e])}renderStepBtn(t){var e;const{allPanes:o,stepCount:s,currentStep:a,lastEnabledStep:n}=this;const c=(e=o===null||o===void 0?void 0:o[t])!==null&&e!==void 0?e:null;const{id:p,status:b}=c;const d=this.getPaneSlotOrProperty(c,"label");const h=this.getPaneSlotOrProperty(c,"description");const v=t+1;const f=v===a;const u=!!d&&`label-${p}`;const g=!!d&&!!h&&`description-${p}`;const m=!d&&l("tecton.element.stepper.number",[`${v}`,`${s}`]);let w;if(b==="complete")w="success-filled";else if(b==="error")w="warning-filled";const x=["step-btn"];if(b)x.push(`status-${b}`);const k=b==="locked";const y=k||v>n;return r("li",{role:"presentation"},r("button",{class:x.join(" "),type:"button","aria-labelledby":u,"aria-describedBy":g,"aria-label":m,"aria-selected":f,"aria-disabled":y?"true":null,role:"tab",tabIndex:f?0:-1,onKeyDown:t=>this.onStepKeyDown(t,v),onClick:t=>!k&&this.onStepClick(t,v)},r(i,null,w?r("div",{class:"step-icon"},r("q2-icon",{type:w})):r("div",{class:"step-bubble"},v),u&&r("div",{class:"step-label",id:u,innerHTML:d}),u&&g&&r("div",{class:"step-description",id:g,innerHTML:h}))),t?r("div",{class:"step-divider"}):"")}render(){const{stepCount:t,scrollEnabled:e,showScrollLeft:o,showScrollRight:s}=this;const a=["step-container"];if(e)a.push("has-scroll");return r(i,{key:"c0404254664a428ac18474f18b28b118742f5ddb"},r("div",{key:"1d02d0a90cb1c7b25cecf1417b404f77e9850698",class:a.join(" ")},e&&r(i,{key:"1f6b31854df94d4fe1407631b6627fe5c1978815"},r("div",{key:"7b526f6a893165630665fb408472ef8b8f24ef89",class:"gradient-left",hidden:!o}),r("div",{key:"075a7786f909e28d4d97f5c63a79dcd4214b7df6",class:"gradient-right",hidden:!s}),r("q2-btn",{key:"4942d3b13149e1f37a29d2fdfb055a81508d218b",class:"btn-left",hideLabel:true,hidden:!this.showScrollLeft,label:l("tecton.element.stepper.scrollLeft"),onClick:()=>this.onScrollBtnClick("left")},r("q2-icon",{key:"03dd7f944e302e8b9290108067639695e204ece0",type:"chevron-left"})),r("q2-btn",{key:"30ec2e36e39dd9f077596fb3e659cae1eb35baff",class:"btn-right",hideLabel:true,hidden:!this.showScrollRight,label:l("tecton.element.stepper.scrollRight"),onClick:()=>this.onScrollBtnClick("right")},r("q2-icon",{key:"9289c567b081dbe76e4b878a5ffb8ed408e80ccc",type:"chevron-right"}))),r("ul",{key:"a2eedabe32bc8b3d1aae53e41fcdd46bd4964955",onScroll:this.checkScrollState,ref:t=>this.listElement=t,role:"tablist"},t>0&&[...Array(t).keys()].map((t=>this.renderStepBtn(t))))),r("div",{key:"a45c694855ec2764bdaf309c06848ffd10cdd7a4",role:"list"},r("slot",{key:"5f8bbe5a4f4c7574a92076bbee8b03b3e15ad7d7",onSlotchange:()=>this.onSlotChange()})))}get hostElement(){return o(this)}static get watchers(){return{currentStep:["currentStepChanged"]}}};p.style=c;export{p as q2_stepper};
+//# sourceMappingURL=p-32b56406.entry.js.map

package/dist/q2-tecton-elements/{p-b849365e.entry.js.map → p-32b56406.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["q2StepperCss","Q2StepperStyle0","Q2Stepper","this","scheduledAfterRender","onSlotChange","checkForPanes","checkScrollState","onScrollBtnClick","direction","scrollAmount","Math","floor","listElement","clientWidth","scrollBy","left","behavior","onStepClick","event","selectedStep","stopPropagation","currentStep","stepCount","lastEnabledStep","change","emit","onStepKeyDown","stepNumber","key","preventDefault","max","min","focusStep","allPanes","length","scrollLeft","scrollWidth","scrollEnabled","showScrollLeft","showScrollRight","componentWillLoad","resizeObserver","ResizeObserver","componentDidLoad","observe","overrideFocus","hostElement","setTimeout","showStep","componentDidRender","forEach","fn","disconnectedCallback","disconnect","currentStepChanged","defaultChangeHandler","target","getAttribute","detail","delegateFocus","isEventFromElement","statusChangeHandler","index","Array","from","findIndex","el","id","status","renderStepBtn","contentChangeHandler","contentChangeTriggerCount","querySelectorAll","push","resizeIframe","showStepPane","_b","_a","window","TectonElements","call","pane","isActive","scrollIntoView","forceFocus","stepListItem","children","document","activeElement","firstElementChild","focus","offsetLeft","scrollTo","getPaneSlotOrProperty","slotName","slot","querySelector","outerHTML","loc","stepIndex","label","description","isCurrentStep","labelId","descriptionId","btnLabel","statusIcon","stepClasses","isLocked","disabled","h","role","class","join","type","tabIndex","onKeyDown","ev","onClick","Fragment","innerHTML","render","containerClasses","hidden","hideLabel","onScroll","ref","keys","map","onSlotchange"],"sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nul {\n    --comp-bullet-background: #{var-list(\n            --tct-stepper-bullet-active-background,\n            var-prefixer(stepper-bullet-active-bg),\n            --t-primary,\n            #0079c1\n        )};\n    --comp-bullet-font-color: #{var-list(\n            var-prefixer(stepper-bullet-active-font-color),\n            --t-primary-font-color,\n            #ffffff\n        )};\n    --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n    --comp-bullet-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n\n    --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n    --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n    --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-btn-label-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n    --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n    overflow-x: auto;\n    display: flex;\n    justify-content: center;\n    list-style: none;\n    padding: 0;\n    padding: var-list(var-prefixer(stepper-list-padding), 2px);\n    margin: 0;\n    gap: var(--comp-step-gap);\n    @include tiny-scrollbar();\n\n    .has-scroll & {\n        justify-content: unset;\n    }\n}\n\nli {\n    min-height: var-list(var-prefixer(stepper-min-height), 50px);\n    flex: 0 0 auto;\n    position: relative;\n    width: var(--comp-step-width);\n    text-align: center;\n    max-width: 150px;\n    min-width: 80px;\n}\n\n.step-btn {\n    position: relative;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: calc(100% - 4px);\n    width: 100%;\n    transition: var(--comp-tween);\n    padding: 0;\n    transition-property: box-shadow;\n    outline: none;\n    margin-top: 2px;\n\n    --comp-active-color: var(--comp-bullet-background);\n    &.status-complete {\n        --comp-active-color: var(--const-stoplight-success, #0e8a00);\n        --tct-stoplight-success: var(--comp-active-color);\n    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n        --tct-stoplight-warning: var(--comp-active-color);\n    }\n\n    &[aria-disabled] {\n        cursor: not-allowed;\n\n        &,\n        & + .step-divider {\n            --comp-bullet-font-color: #{var-list(var-prefixer(stepper-bullet-inactive-font-color), --t-text, #4d4d4d)};\n            --comp-bullet-background: #{var-list(\n                    --tct-stepper-bullet-inactive-background,\n                    var-prefixer(stepper-bullet-inactive-bg),\n                    --t-gray-12,\n                    #d9d9d9\n                )};\n        }\n    }\n}\n.step-icon,\n.step-bubble {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    line-height: 0;\n    margin: var(--comp-bullet-gap) auto;\n    color: var(--comp-bullet-font-color);\n    width: var(--comp-btn-icon-size);\n    height: var(--comp-btn-icon-size);\n    min-height: var(--comp-btn-icon-size);\n    font-size: var(--comp-bullet-font-size);\n    transition: var(--comp-tween);\n    transition-property: background, color;\n    border-radius: 50%;\n    position: relative;\n\n    q2-icon {\n        --tct-icon-fill: var(--comp-active-color);\n        &:before {\n            content: '';\n            display: block;\n            background: var(--comp-bullet-font-color);\n            position: absolute;\n            width: 80%;\n            height: 80%;\n            left: 11%;\n            top: 11%;\n            border-radius: 50%;\n        }\n    }\n    .status-complete &,\n    .status-error & {\n        background: var(--comp-active-color);\n    }\n    [aria-selected] & {\n        box-shadow:\n            0 0 0 2px var(--t-base, #ffffff),\n            0 0 0 4px var(--comp-active-color);\n        font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n    }\n}\n\n.step-bubble {\n    background: var(--comp-bullet-background);\n}\n\n.step-divider {\n    width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n    top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n    left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n    border: 0;\n    border-top: 1px solid var(--comp-bullet-background);\n    height: 0;\n    position: absolute;\n    margin: 0;\n    transition: border var(--comp-tween);\n}\n\n.step-container {\n    position: relative;\n}\n\n.step-label {\n    color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n    font-size: var-list(\n        --tct-stepper-label-font-size,\n        var-prefixer(stepper-title-font-size),\n        --app-font-size-small,\n        12px\n    );\n    line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n    @include line-clamp(var(--tct-stepper-label-line-count, 2));\n\n    [aria-selected] & {\n        font-weight: var-list(var-prefixer(stepper-active-font-weight), 600);\n    }\n\n    [aria-describedby] & {\n        -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n    }\n}\n\n.step-description {\n    color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n    @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n    // Add padding for descenders\n    padding-bottom: 0.2em;\n\n    // For description slot on q2-stepper-pane\n    .ellipsize {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: var(--comp-step-width);\n        display: block;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 18px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(\n        to left,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(\n        to right,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\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","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 } from 'src/utils';\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n    /** The currently selected step. */\n    @Prop({ reflect: true, mutable: true }) currentStep: number = 1;\n\n    /**\n     * Used to determine the number of steps in the stepper.\n     * @private\n     */\n    @Prop({ mutable: true }) stepCount: number;\n\n    /**\n     * The last step the user may navigate to.\n     * @info\n     * Will be managed automatically if not provided.\n     */\n    @Prop({ mutable: true }) lastEnabledStep: number;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter;\n    @State() contentChangeTriggerCount: number = 0;\n    @State() scrollEnabled: boolean = false;\n    @State() showScrollLeft: boolean = false;\n    @State() showScrollRight: boolean = false;\n    listElement: HTMLUListElement;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        if (!this.lastEnabledStep) this.lastEnabledStep = this.currentStep || 1;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.checkForPanes();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.showStep(this.currentStep || 1), 0);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n    }\n\n    ////////// WATCHER METHODS ////////\n\n    @Watch('currentStep')\n    currentStepChanged(stepNumber: number) {\n        this.showStep(stepNumber);\n    }\n\n    ////////// HOST EVENTS ////////\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        const { hostElement } = this;\n        if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n            this.currentStep = event.detail.selectedStep;\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusStep(this.currentStep, true, true);\n    }\n\n    @Listen('statusChange')\n    statusChangeHandler(event: CustomEvent) {\n        const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n        if (index > -1) {\n            this.allPanes[index].status = event.detail.status;\n            this.renderStepBtn(index);\n        }\n    }\n\n    @Listen('contentChange')\n    contentChangeHandler() {\n        this.contentChangeTriggerCount += 1;\n    }\n\n    ////////// GETTER METHODS ////////\n\n    get allPanes() {\n        return this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane');\n    }\n\n    ////////// EVENT HANDLERS ////////\n\n    onSlotChange = () => {\n        this.checkForPanes();\n        this.checkScrollState();\n    };\n\n    onScrollBtnClick = (direction: 'left' | 'right') => {\n        const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n        this.listElement.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n        });\n    };\n\n    onStepClick = (event, selectedStep: number) => {\n        event.stopPropagation();\n        const { currentStep, stepCount, lastEnabledStep } = this;\n        if (selectedStep > lastEnabledStep || selectedStep === currentStep) return;\n\n        this.change.emit({\n            selectedStep,\n            lastEnabledStep,\n            currentStep,\n            stepCount,\n        });\n    };\n\n    onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n        const { lastEnabledStep, stepCount } = this;\n        const { key } = event;\n\n        let selectedStep;\n        switch (key) {\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedStep = Math.max(stepNumber - 1, 0);\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedStep = Math.min(stepNumber + 1, stepCount);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                selectedStep = 1;\n                break;\n\n            case 'End':\n                event.preventDefault();\n                selectedStep = lastEnabledStep;\n                break;\n        }\n\n        if (!selectedStep) return;\n        this.focusStep(selectedStep, true);\n    };\n\n    ////////// HELPER METHODS ////////\n\n    showStep(stepNumber: number) {\n        if (stepNumber > this.lastEnabledStep) {\n            const { currentStep, stepCount } = this;\n            this.lastEnabledStep = stepNumber;\n            this.change.emit({\n                selectedStep: null,\n                lastEnabledStep: stepNumber,\n                currentStep,\n                stepCount,\n            });\n        }\n\n        this.scheduledAfterRender.push(this.resizeIframe);\n        this.showStepPane(stepNumber);\n        this.focusStep(stepNumber, this.scrollEnabled);\n    }\n\n    checkForPanes = () => {\n        const { allPanes } = this;\n        if (!allPanes.length) return;\n\n        this.stepCount = allPanes.length;\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;\n        this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n    };\n\n    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\n    }\n\n    showStepPane(stepNumber: number) {\n        this.allPanes.forEach((pane, index) => {\n            pane.isActive = stepNumber === index + 1;\n        });\n    }\n\n    focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n        const stepListItem = this.listElement.children[stepNumber - 1] as HTMLLIElement;\n        const isActive = document.activeElement === this.hostElement;\n        if (!stepListItem) return;\n        if (isActive || forceFocus) {\n            (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n        }\n\n        if (scrollIntoView) {\n            const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n            this.listElement.scrollTo({\n                left,\n                behavior: 'smooth',\n            });\n        }\n    }\n\n    ////////// RENDER METHODS ////////\n    getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label') {\n        const slot = pane.querySelector<HTMLElement>(`[slot=\"${slotName}\"]`);\n        return slot?.outerHTML ?? loc(pane[slotName]);\n    }\n\n    renderStepBtn(stepIndex: number) {\n        const { allPanes, stepCount, currentStep, lastEnabledStep } = this;\n        const pane = allPanes?.[stepIndex] ?? null;\n        const { id, status } = pane;\n        const label = this.getPaneSlotOrProperty(pane, 'label');\n        const description = this.getPaneSlotOrProperty(pane, 'description');\n\n        const stepNumber = stepIndex + 1;\n        const isCurrentStep = stepNumber === currentStep;\n        const labelId = !!label && `label-${id}`;\n        const descriptionId = !!label && !!description && `description-${id}`;\n        const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\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        const isLocked = status === 'locked';\n        const disabled = isLocked || stepNumber > lastEnabledStep;\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-disabled={disabled ? 'true' : null}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n                >\n                    <Fragment>\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                        {labelId && (\n                            <div\n                                class=\"step-label\"\n                                id={labelId}\n                                innerHTML={label}\n                            ></div>\n                        )}\n                        {labelId && descriptionId && (\n                            <div\n                                class=\"step-description\"\n                                id={descriptionId}\n                                innerHTML={description}\n                            ></div>\n                        )}\n                    </Fragment>\n                </button>\n                {stepIndex ? <div class=\"step-divider\"></div> : ''}\n            </li>\n        );\n    }\n\n    render() {\n        const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n        const containerClasses = ['step-container'];\n        if (scrollEnabled) containerClasses.push('has-scroll');\n\n        return (\n            <Fragment>\n                <div class={containerClasses.join(' ')}>\n                    {scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hideLabel={true}\n                                hidden={!this.showScrollLeft}\n                                label={loc('tecton.element.stepper.scrollLeft')}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon type=\"chevron-left\"></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hideLabel={true}\n                                hidden={!this.showScrollRight}\n                                label={loc('tecton.element.stepper.scrollRight')}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon type=\"chevron-right\"></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        role=\"tablist\"\n                    >\n                        {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n                    </ul>\n                </div>\n                <div role=\"list\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2StepperCss","Q2StepperStyle0","Q2Stepper","this","scheduledAfterRender","onSlotChange","checkForPanes","checkScrollState","onScrollBtnClick","direction","scrollAmount","Math","floor","listElement","clientWidth","scrollBy","left","behavior","onStepClick","event","selectedStep","stopPropagation","currentStep","stepCount","lastEnabledStep","change","emit","onStepKeyDown","stepNumber","key","preventDefault","max","min","focusStep","allPanes","length","scrollLeft","scrollWidth","scrollEnabled","showScrollLeft","showScrollRight","componentWillLoad","resizeObserver","ResizeObserver","componentDidLoad","observe","overrideFocus","hostElement","setTimeout","showStep","componentDidRender","forEach","fn","disconnectedCallback","disconnect","currentStepChanged","defaultChangeHandler","target","getAttribute","detail","delegateFocus","isEventFromElement","statusChangeHandler","index","Array","from","findIndex","el","id","status","renderStepBtn","contentChangeHandler","contentChangeTriggerCount","querySelectorAll","push","resizeIframe","showStepPane","_b","_a","window","TectonElements","call","pane","isActive","scrollIntoView","forceFocus","stepListItem","children","document","activeElement","firstElementChild","focus","offsetLeft","scrollTo","getPaneSlotOrProperty","slotName","slot","querySelector","outerHTML","loc","stepIndex","label","description","isCurrentStep","labelId","descriptionId","btnLabel","statusIcon","stepClasses","isLocked","disabled","h","role","class","join","type","tabIndex","onKeyDown","ev","onClick","Fragment","innerHTML","render","containerClasses","hidden","hideLabel","onScroll","ref","keys","map","onSlotchange"],"sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nul {\n    --comp-bullet-background: #{var-list(\n            --tct-stepper-bullet-active-background,\n            var-prefixer(stepper-bullet-active-bg),\n            --t-primary,\n            #0079c1\n        )};\n    --comp-bullet-font-color: #{var-list(\n            var-prefixer(stepper-bullet-active-font-color),\n            --t-primary-font-color,\n            #ffffff\n        )};\n    --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n    --comp-bullet-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n\n    --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n    --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n    --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-btn-label-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n    --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n    overflow-x: auto;\n    display: flex;\n    justify-content: center;\n    list-style: none;\n    padding: 0;\n    padding: var-list(var-prefixer(stepper-list-padding), 2px);\n    margin: 0;\n    gap: var(--comp-step-gap);\n    @include tiny-scrollbar();\n\n    .has-scroll & {\n        justify-content: unset;\n    }\n}\n\nli {\n    min-height: var-list(var-prefixer(stepper-min-height), 50px);\n    flex: 0 0 auto;\n    position: relative;\n    width: var(--comp-step-width);\n    text-align: center;\n    max-width: 150px;\n    min-width: 80px;\n}\n\n.step-btn {\n    position: relative;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: calc(100% - 4px);\n    width: 100%;\n    transition: var(--comp-tween);\n    padding: 0;\n    transition-property: box-shadow;\n    outline: none;\n    margin-top: 2px;\n\n    --comp-active-color: var(--comp-bullet-background);\n    &.status-complete {\n        --comp-active-color: var(--const-stoplight-success, #0e8a00);\n        --tct-stoplight-success: var(--comp-active-color);\n    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n        --tct-stoplight-warning: var(--comp-active-color);\n    }\n\n    &[aria-disabled] {\n        cursor: not-allowed;\n\n        &,\n        & + .step-divider {\n            --comp-bullet-font-color: #{var-list(var-prefixer(stepper-bullet-inactive-font-color), --t-text, #4d4d4d)};\n            --comp-bullet-background: #{var-list(\n                    --tct-stepper-bullet-inactive-background,\n                    var-prefixer(stepper-bullet-inactive-bg),\n                    --t-gray-12,\n                    #d9d9d9\n                )};\n        }\n    }\n}\n.step-icon,\n.step-bubble {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    line-height: 0;\n    margin: var(--comp-bullet-gap) auto;\n    color: var(--comp-bullet-font-color);\n    width: var(--comp-btn-icon-size);\n    height: var(--comp-btn-icon-size);\n    min-height: var(--comp-btn-icon-size);\n    font-size: var(--comp-bullet-font-size);\n    transition: var(--comp-tween);\n    transition-property: background, color;\n    border-radius: 50%;\n    position: relative;\n\n    q2-icon {\n        --tct-icon-fill: var(--comp-active-color);\n        &:before {\n            content: '';\n            display: block;\n            background: var(--comp-bullet-font-color);\n            position: absolute;\n            width: 80%;\n            height: 80%;\n            left: 11%;\n            top: 11%;\n            border-radius: 50%;\n        }\n    }\n    .status-complete &,\n    .status-error & {\n        background: var(--comp-active-color);\n    }\n    [aria-selected] & {\n        box-shadow:\n            0 0 0 2px var(--t-base, #ffffff),\n            0 0 0 4px var(--comp-active-color);\n        font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n    }\n}\n\n.step-bubble {\n    background: var(--comp-bullet-background);\n}\n\n.step-divider {\n    width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n    top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n    left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n    border: 0;\n    border-top: 1px solid var(--comp-bullet-background);\n    height: 0;\n    position: absolute;\n    margin: 0;\n    transition: border var(--comp-tween);\n}\n\n.step-container {\n    position: relative;\n}\n\n.step-label {\n    color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n    font-size: var-list(\n        --tct-stepper-label-font-size,\n        var-prefixer(stepper-title-font-size),\n        --app-font-size-small,\n        12px\n    );\n    line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n    @include line-clamp(var(--tct-stepper-label-line-count, 2));\n\n    [aria-selected] & {\n        font-weight: var-list(var-prefixer(stepper-active-font-weight), 600);\n    }\n\n    [aria-describedby] & {\n        -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n    }\n}\n\n.step-description {\n    color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n    @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n    // Add padding for descenders\n    padding-bottom: 0.2em;\n\n    // For description slot on q2-stepper-pane\n    .ellipsize {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: var(--comp-step-width);\n        display: block;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 18px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(\n        to left,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(\n        to right,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\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","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 } from 'src/utils';\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n    /** The currently selected step. */\n    @Prop({ reflect: true, mutable: true }) currentStep: number = 1;\n\n    /**\n     * Used to determine the number of steps in the stepper.\n     * @private\n     */\n    @Prop({ mutable: true }) stepCount: number;\n\n    /**\n     * The last step the user may navigate to.\n     * @info\n     * Will be managed automatically if not provided.\n     */\n    @Prop({ mutable: true }) lastEnabledStep: number;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter;\n    @State() contentChangeTriggerCount: number = 0;\n    @State() scrollEnabled: boolean = false;\n    @State() showScrollLeft: boolean = false;\n    @State() showScrollRight: boolean = false;\n    listElement: HTMLUListElement;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        if (!this.lastEnabledStep) this.lastEnabledStep = this.currentStep || 1;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.checkForPanes();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.showStep(this.currentStep || 1), 0);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n    }\n\n    ////////// WATCHER METHODS ////////\n\n    @Watch('currentStep')\n    currentStepChanged(stepNumber: number) {\n        this.showStep(stepNumber);\n    }\n\n    ////////// HOST EVENTS ////////\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        const { hostElement } = this;\n        if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n            this.currentStep = event.detail.selectedStep;\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusStep(this.currentStep, true, true);\n    }\n\n    @Listen('statusChange')\n    statusChangeHandler(event: CustomEvent) {\n        const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n        if (index > -1) {\n            this.allPanes[index].status = event.detail.status;\n            this.renderStepBtn(index);\n        }\n    }\n\n    @Listen('contentChange')\n    contentChangeHandler() {\n        this.contentChangeTriggerCount += 1;\n    }\n\n    ////////// GETTER METHODS ////////\n\n    get allPanes() {\n        return this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane');\n    }\n\n    ////////// EVENT HANDLERS ////////\n\n    onSlotChange = () => {\n        this.checkForPanes();\n        this.checkScrollState();\n    };\n\n    onScrollBtnClick = (direction: 'left' | 'right') => {\n        const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n        this.listElement.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n        });\n    };\n\n    onStepClick = (event, selectedStep: number) => {\n        event.stopPropagation();\n        const { currentStep, stepCount, lastEnabledStep } = this;\n        if (selectedStep > lastEnabledStep || selectedStep === currentStep) return;\n\n        this.change.emit({\n            selectedStep,\n            lastEnabledStep,\n            currentStep,\n            stepCount,\n        });\n    };\n\n    onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n        const { lastEnabledStep, stepCount } = this;\n        const { key } = event;\n\n        let selectedStep;\n        switch (key) {\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedStep = Math.max(stepNumber - 1, 0);\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedStep = Math.min(stepNumber + 1, stepCount);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                selectedStep = 1;\n                break;\n\n            case 'End':\n                event.preventDefault();\n                selectedStep = lastEnabledStep;\n                break;\n        }\n\n        if (!selectedStep) return;\n        this.focusStep(selectedStep, true);\n    };\n\n    ////////// HELPER METHODS ////////\n\n    showStep(stepNumber: number) {\n        if (stepNumber > this.lastEnabledStep) {\n            const { currentStep, stepCount } = this;\n            this.lastEnabledStep = stepNumber;\n            this.change.emit({\n                selectedStep: null,\n                lastEnabledStep: stepNumber,\n                currentStep,\n                stepCount,\n            });\n        }\n\n        this.scheduledAfterRender.push(this.resizeIframe);\n        this.showStepPane(stepNumber);\n        this.focusStep(stepNumber, this.scrollEnabled);\n    }\n\n    checkForPanes = () => {\n        const { allPanes } = this;\n        if (!allPanes.length) return;\n\n        this.stepCount = allPanes.length;\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;\n        this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n    };\n\n    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\n    }\n\n    showStepPane(stepNumber: number) {\n        this.allPanes.forEach((pane, index) => {\n            pane.isActive = stepNumber === index + 1;\n        });\n    }\n\n    focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n        const stepListItem = this.listElement.children[stepNumber - 1] as HTMLLIElement;\n        const isActive = document.activeElement === this.hostElement;\n        if (!stepListItem) return;\n        if (isActive || forceFocus) {\n            (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n        }\n\n        if (scrollIntoView) {\n            const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n            this.listElement.scrollTo({\n                left,\n                behavior: 'smooth',\n            });\n        }\n    }\n\n    ////////// RENDER METHODS ////////\n    getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label') {\n        const slot = pane.querySelector<HTMLElement>(`:scope > [slot=\"${slotName}\"]`);\n        return slot?.outerHTML ?? loc(pane[slotName]);\n    }\n\n    renderStepBtn(stepIndex: number) {\n        const { allPanes, stepCount, currentStep, lastEnabledStep } = this;\n        const pane = allPanes?.[stepIndex] ?? null;\n        const { id, status } = pane;\n        const label = this.getPaneSlotOrProperty(pane, 'label');\n        const description = this.getPaneSlotOrProperty(pane, 'description');\n\n        const stepNumber = stepIndex + 1;\n        const isCurrentStep = stepNumber === currentStep;\n        const labelId = !!label && `label-${id}`;\n        const descriptionId = !!label && !!description && `description-${id}`;\n        const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\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        const isLocked = status === 'locked';\n        const disabled = isLocked || stepNumber > lastEnabledStep;\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-disabled={disabled ? 'true' : null}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n                >\n                    <Fragment>\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                        {labelId && (\n                            <div\n                                class=\"step-label\"\n                                id={labelId}\n                                innerHTML={label}\n                            ></div>\n                        )}\n                        {labelId && descriptionId && (\n                            <div\n                                class=\"step-description\"\n                                id={descriptionId}\n                                innerHTML={description}\n                            ></div>\n                        )}\n                    </Fragment>\n                </button>\n                {stepIndex ? <div class=\"step-divider\"></div> : ''}\n            </li>\n        );\n    }\n\n    render() {\n        const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n        const containerClasses = ['step-container'];\n        if (scrollEnabled) containerClasses.push('has-scroll');\n\n        return (\n            <Fragment>\n                <div class={containerClasses.join(' ')}>\n                    {scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hideLabel={true}\n                                hidden={!this.showScrollLeft}\n                                label={loc('tecton.element.stepper.scrollLeft')}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon type=\"chevron-left\"></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hideLabel={true}\n                                hidden={!this.showScrollRight}\n                                label={loc('tecton.element.stepper.scrollRight')}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon type=\"chevron-right\"></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        role=\"tablist\"\n                    >\n                        {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n                    </ul>\n                </div>\n                <div role=\"list\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-43236cac.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,g as s}from"./p-a5f18e27.js";import{h as n,o as a,l as h,i as r,w as d}from"./p-84190698.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:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";const o=l;const c=class{constructor(e){t(this,e);this.input=i(this,"input",7);this.change=i(this,"change",7);this.scheduledAfterRender=[];this.defaultValue=this.value;this.inputInput=t=>{t.stopPropagation();this.input.emit(t.detail);this.formattedValue=t.detail.formattedValue;this.innerValue=t.detail.value};this.inputChange=t=>{t.stopPropagation()};this.inputKeyDown=t=>{if(t.key==="Escape"||t.key==="Esc"){t.preventDefault();this.cancelClick();return}if(t.key==="Enter"){t.preventDefault();this.saveClick();return}};this.inputClick=t=>{t.stopPropagation()};this.saveClick=t=>{t&&t.stopPropagation();const i=this.hostElement.shadowRoot.querySelector("q2-input").value;this.defaultValue=i;this.change.emit({editing:false,name:"save",value:this.innerValue||i,formattedValue:this.formattedValue||i})};this.editClick=t=>{t===null||t===void 0?void 0:t.stopPropagation();this.change.emit({editing:true,name:"edit"})};this.cancelClick=t=>{t===null||t===void 0?void 0:t.stopPropagation();this.change.emit({editing:false,name:"cancel"});this.inputElement.setValue(this.defaultValue)};this.block=undefined;this.disabled=undefined;this.editing=false;this.errors=undefined;this.formatModifier=undefined;this.hideLabel=undefined;this.hints=undefined;this.label="";this.maxlength=undefined;this.persistentLabel=undefined;this.truncated=undefined;this.type=undefined;this.value="";this.ariaLabel=undefined;this.formattedValue=undefined}componentWillLoad(){n(this)}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[];this.formattedValue=this.inputElement.formattedValue}componentDidLoad(){a(this.hostElement)}get hasErrors(){return Array.isArray(this.errors)&&!!this.errors.length}get hasHints(){return Array.isArray(this.hints)&&!!this.hints.length}get wrapperClass(){return`q2-editable-field-wrapper ${this.editing?"editing":""}`}get locLabel(){return this.label&&h(this.label)||""}errorsObserver(){const{editing:t,hasErrors:i}=this;const e=this.hostElement.shadowRoot.activeElement;const s=(e===null||e===void 0?void 0:e.tagName)==="Q2-INPUT";if(s||!e||!t||!i)return;this.inputElement.focus()}ariaLabelObserver(){n(this)}observesEditing(t,i){if(t===i)return;this.scheduledAfterRender.push(this.hostElement.focus)}onHostElementChange(t){if(!r(t,this.hostElement)||this.hostElement.onchange)return;setTimeout((()=>{switch(t.detail.name){case"save":if(this.hasErrors){this.inputElement.focus();break}this.value=t.detail.value;this.editing=t.detail.editing;break;case"cancel":this.inputElement.value=this.value;this.editing=t.detail.editing;break;case"edit":this.editing=t.detail.editing;break}}),1)}delegateFocus(t){if(!r(t,this.hostElement))return;this.hostElement.shadowRoot.querySelector(this.editing?"q2-input":"q2-btn.begin-edit").focus()}clickEdit(){var t;if(this.editing)return;(t=this.editBtnElement)===null||t===void 0?void 0:t.click()}clickCancel(){var t;if(!this.editing)return;(t=this.cancelBtnElement)===null||t===void 0?void 0:t.click()}clickSave(){var t;if(!this.editing)return;(t=this.saveBtnElement)===null||t===void 0?void 0:t.click()}async setValue(t,i={clickSave:true}){await this.clickEdit();await d();await this.inputElement.setValue(t);if(i.clickSave){await this.clickSave();await d()}}render(){return e("div",{key:"cb9b4c1fefeea576703bba7ee15852249bcc5943"},this.generateEditStateDOM(),this.generateReadStateDOM())}generateEditStateDOM(){return e("div",{class:this.wrapperClass,hidden:!this.editing},e("q2-input",{ref:t=>this.inputElement=t,label:this.locLabel,hideLabel:this.hideLabel,value:this.value,hints:this.hasHints?this.hints:undefined,errors:this.hasErrors?this.errors:undefined,type:this.type,disabled:this.disabled,formatModifier:this.formatModifier,maxlength:this.maxlength,"test-id":"editableInput",onInput:this.inputInput,onChange:this.inputChange,onKeyDown:this.inputKeyDown,onClick:this.inputClick}),e("q2-btn",{ref:t=>this.cancelBtnElement=t,class:"cancel-edit",label:`${h("tecton.element.editableField.cancel")} ${this.locLabel}`,"hide-label":true,"test-id":"cancelButton",onClick:this.cancelClick},e("q2-icon",{type:"close"})),e("q2-btn",{ref:t=>this.saveBtnElement=t,class:"save-edit",label:`${h("tecton.element.editableField.save")} ${this.locLabel}`,"hide-label":true,"test-id":"saveButton",onClick:this.saveClick},e("q2-icon",{type:"checkmark"})))}generateReadStateDOM(){if(this.persistentLabel&&this.locLabel){return e("div",{class:this.wrapperClass,hidden:this.editing},e("dl",null,e("dt",{class:"read-state-label"},this.locLabel),e("dd",null,e("span",{class:"text-wrapper"},this.formattedValue||this.value),this.generateEditBtn())))}return e("div",{class:this.wrapperClass,hidden:this.editing},e("div",{class:"text-wrapper"},this.formattedValue||this.value),this.generateEditBtn())}generateEditBtn(){return e("q2-btn",{ref:t=>this.editBtnElement=t,class:"begin-edit",label:`${h("tecton.element.editableField.edit")} ${this.locLabel}`,"hide-label":true,disabled:this.disabled,"test-id":"editButton",onClick:this.editClick},e("q2-icon",{type:"edit"}))}get hostElement(){return s(this)}static get watchers(){return{errors:["errorsObserver"],ariaLabel:["ariaLabelObserver"],editing:["observesEditing"]}}};c.style=o;export{c as q2_editable_field};
+//# sourceMappingURL=p-43236cac.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2EditableFieldCss","Q2EditableFieldStyle0","Q2EditableField","this","scheduledAfterRender","defaultValue","value","inputInput","event","stopPropagation","input","emit","detail","formattedValue","innerValue","inputChange","e","inputKeyDown","key","preventDefault","cancelClick","saveClick","inputClick","valueFromInputProp","hostElement","shadowRoot","querySelector","change","editing","name","editClick","inputElement","setValue","componentWillLoad","handleAriaLabel","componentDidRender","forEach","fn","componentDidLoad","overrideFocus","hasErrors","Array","isArray","errors","length","hasHints","hints","wrapperClass","locLabel","label","loc","errorsObserver","focusedElement","activeElement","isInputFocused","tagName","focus","ariaLabelObserver","observesEditing","newValue","oldValue","push","onHostElementChange","isEventFromElement","onchange","setTimeout","delegateFocus","clickEdit","_a","editBtnElement","click","clickCancel","cancelBtnElement","clickSave","saveBtnElement","options","waitForNextPaint","render","h","generateEditStateDOM","generateReadStateDOM","class","hidden","ref","el","hideLabel","undefined","type","disabled","formatModifier","maxlength","onInput","onChange","onKeyDown","onClick","persistentLabel","generateEditBtn"],"sources":["src/components/q2-editable-field/q2-editable-field.scss?tag=q2-editable-field&encapsulation=shadow","src/components/q2-editable-field/q2-editable-field.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    display: inline-block;\n    max-width: 100%;\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n    display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n    align-items: flex-end;\n}\n\n:host([block]) {\n    display:block;\n    width: 100%;\n    .q2-editable-field-wrapper:not([hidden]) {\n        display: grid;\n        grid-template-columns: 1fr auto auto;\n    }\n}\n\nq2-input,\n.text-wrapper {\n    margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n    flex: 1 1 auto;\n    min-width: 170px;\n}\n\n.text-wrapper {\n    flex: 0 auto;\n    align-self: center;\n    display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\nq2-btn {\n    flex: 0 0 44px;\n}\n\ndl {\n    margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n    font-weight: 600;\n}\n\ndd {\n    margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n    display: flex;\n    align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { Q2Input } from '../q2-input/q2-input';\nimport { IFormatterValueObject } from '../q2-input/q2-input-types';\n\ninterface IExtendedQ2InputElement extends HTMLQ2InputElement {\n    formattedValue: IFormatterValueObject['formattedValue'];\n}\n\n@Component({ tag: 'q2-editable-field', shadow: true, styleUrl: 'q2-editable-field.scss' })\nexport class Q2EditableField {\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true }) block: boolean;\n\n    /** Disables the edit button and field. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Controls the edit state of the element. */\n    @Prop({ reflect: true, mutable: true }) editing: boolean = false;\n\n    /**\n     * Determines the `errors` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.\n     */\n    @Prop() errors: string[];\n\n    /**\n     * Determines the `formatModifier` applied to the `q2-input` element.\n     * @info\n     * Only applicable when `type=\"currency\"`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.\n     */\n    @Prop({ reflect: true }) formatModifier: string;\n\n    /** Hide's the field's `<label>` element from view. */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /**\n     * Determines the `hints` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.\n     */\n    @Prop() hints: string[];\n\n    /**\n     * The visible descriptor for the element.\n     * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string = '';\n\n    /**\n     * Determines the `maxLength` applied to the `q2-input`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.\n     */\n    @Prop({ reflect: true }) maxlength: number;\n\n    /** Displays the provided label in the read state. */\n    @Prop({ reflect: true }) persistentLabel: boolean;\n\n    /** Shortens long values with ellipses instead of splitting into multiple lines. */\n    @Prop({ reflect: true }) truncated: boolean;\n\n    /**\n     * Determines the `type` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for all `type` values.\n     */\n    @Prop({ reflect: true }) type: Q2Input['type'];\n\n    /** Serves as the visible text while in the read state, and the default value of the input while in the edit state. */\n    @Prop({ reflect: true, mutable: true }) value: string = '';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    scheduledAfterRender: (() => void)[] = [];\n\n    @Element() hostElement: HTMLElement;\n    inputElement: HTMLQ2InputElement;\n    editBtnElement: HTMLQ2BtnElement;\n    cancelBtnElement: HTMLQ2BtnElement;\n    saveBtnElement: HTMLQ2BtnElement;\n\n    @State() formattedValue: string;\n    innerValue: string;\n    defaultValue: string = this.value;\n\n    /////// LIFECYCLE HOOKS ///////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.formattedValue = (this.inputElement as IExtendedQ2InputElement).formattedValue;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    //////// GETTERS ////////\n    get hasErrors(): boolean {\n        return Array.isArray(this.errors) && !!this.errors.length;\n    }\n\n    get hasHints(): boolean {\n        return Array.isArray(this.hints) && !!this.hints.length;\n    }\n\n    get wrapperClass() {\n        return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n    }\n\n    get locLabel() {\n        return (this.label && loc(this.label)) || '';\n    }\n\n    //////// OBSERVERS ////////\n\n    @Watch('errors')\n    errorsObserver() {\n        const { editing, hasErrors } = this;\n        const focusedElement = this.hostElement.shadowRoot.activeElement;\n        const isInputFocused = focusedElement?.tagName === 'Q2-INPUT';\n        if (isInputFocused || !focusedElement || !editing || !hasErrors) return;\n        this.inputElement.focus();\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('editing')\n    observesEditing(newValue: boolean, oldValue: boolean) {\n        if (newValue === oldValue) return;\n        this.scheduledAfterRender.push(this.hostElement.focus);\n    }\n\n    ///////// HOST ELEMENT EVENTS //////\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (!isEventFromElement(event, this.hostElement) || this.hostElement.onchange) return;\n        setTimeout(() => {\n            switch (event.detail.name) {\n                case 'save':\n                    if (this.hasErrors) {\n                        this.inputElement.focus();\n                        break;\n                    }\n                    this.value = event.detail.value;\n                    this.editing = event.detail.editing;\n                    break;\n\n                case 'cancel':\n                    this.inputElement.value = this.value;\n                    this.editing = event.detail.editing;\n                    break;\n\n                case 'edit':\n                    this.editing = event.detail.editing;\n                    break;\n            }\n        }, 1);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n    }\n\n    ///////// EVENTS /////////\n\n    /**\n     * Emitted when the user updates the `q2-input` element in the editing state.\n     */\n    @Event() input: EventEmitter<{ formattedValue: string; value: string }>;\n\n    /**\n     * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n     *\n     * The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n     *@info\n     * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n     */\n    @Event() change: EventEmitter<{\n        editing: boolean;\n        name: 'edit' | 'cancel' | 'save';\n        value?: string;\n        formattedValue?: string;\n    }>;\n\n    /// Methods ///\n    /**\n     * Emulates clicking the edit button, which will display the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickEdit() {\n        if (this.editing) return;\n        this.editBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the cancel button, which will hide the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickCancel() {\n        if (!this.editing) return;\n        this.cancelBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickSave() {\n        if (!this.editing) return;\n        this.saveBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.\n     *\n     * If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\\\n     * `change` event will be emitted.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(value: string, options: { clickSave?: boolean } = { clickSave: true }) {\n        await this.clickEdit();\n        await waitForNextPaint();\n\n        await this.inputElement.setValue(value);\n\n        if (options.clickSave) {\n            await this.clickSave();\n            await waitForNextPaint();\n        }\n    }\n\n    //////// ACTIONS /////////\n\n    inputInput = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        this.input.emit(event.detail);\n        this.formattedValue = event.detail.formattedValue;\n        this.innerValue = event.detail.value;\n    };\n\n    inputChange = (e: CustomEvent) => {\n        e.stopPropagation();\n    };\n\n    inputKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape' || e.key === 'Esc') {\n            e.preventDefault();\n            this.cancelClick();\n            return;\n        }\n\n        if (e.key === 'Enter') {\n            e.preventDefault();\n            this.saveClick();\n            return;\n        }\n    };\n\n    inputClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    saveClick = (event?: MouseEvent) => {\n        event && event.stopPropagation();\n        const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n        this.defaultValue = valueFromInputProp;\n        this.change.emit({\n            editing: false,\n            name: 'save',\n            value: this.innerValue || valueFromInputProp,\n            formattedValue: this.formattedValue || valueFromInputProp,\n        });\n    };\n\n    editClick = (event: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: true, name: 'edit' });\n    };\n\n    cancelClick = (event?: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: false, name: 'cancel' });\n        this.inputElement.setValue(this.defaultValue);\n    };\n\n    render() {\n        return (\n            <div>\n                {this.generateEditStateDOM()}\n                {this.generateReadStateDOM()}\n            </div>\n        );\n    }\n\n    generateEditStateDOM() {\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={!this.editing}\n            >\n                <q2-input\n                    ref={el => (this.inputElement = el)}\n                    label={this.locLabel}\n                    hideLabel={this.hideLabel}\n                    value={this.value}\n                    hints={this.hasHints ? this.hints : undefined}\n                    errors={this.hasErrors ? this.errors : undefined}\n                    type={this.type}\n                    disabled={this.disabled}\n                    formatModifier={this.formatModifier}\n                    maxlength={this.maxlength}\n                    test-id=\"editableInput\"\n                    onInput={this.inputInput}\n                    onChange={this.inputChange}\n                    onKeyDown={this.inputKeyDown}\n                    onClick={this.inputClick}\n                />\n                <q2-btn\n                    ref={el => (this.cancelBtnElement = el)}\n                    class=\"cancel-edit\"\n                    label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"cancelButton\"\n                    onClick={this.cancelClick}\n                >\n                    <q2-icon type=\"close\" />\n                </q2-btn>\n                <q2-btn\n                    ref={el => (this.saveBtnElement = el)}\n                    class=\"save-edit\"\n                    label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"saveButton\"\n                    onClick={this.saveClick}\n                >\n                    <q2-icon type=\"checkmark\" />\n                </q2-btn>\n            </div>\n        );\n    }\n\n    generateReadStateDOM() {\n        if (this.persistentLabel && this.locLabel) {\n            return (\n                <div\n                    class={this.wrapperClass}\n                    hidden={this.editing}\n                >\n                    <dl>\n                        <dt class=\"read-state-label\">{this.locLabel}</dt>\n                        <dd>\n                            <span class=\"text-wrapper\">{this.formattedValue || this.value}</span>\n                            {this.generateEditBtn()}\n                        </dd>\n                    </dl>\n                </div>\n            );\n        }\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={this.editing}\n            >\n                <div class=\"text-wrapper\">{this.formattedValue || this.value}</div>\n                {this.generateEditBtn()}\n            </div>\n        );\n    }\n\n    generateEditBtn() {\n        return (\n            <q2-btn\n                ref={el => (this.editBtnElement = el)}\n                class=\"begin-edit\"\n                label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n                hide-label\n                disabled={this.disabled}\n                test-id=\"editButton\"\n                onClick={this.editClick}\n            >\n                <q2-icon type=\"edit\" />\n            </q2-btn>\n        );\n    }\n}\n"],"mappings":"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"}