q2-tecton-elements 1.47.0 → 1.48.1-alpha.0

package/dist/q2-tecton-elements/{p-a3d58a50.entry.js → p-56dd051a.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as s,H as i,g as n}from"./p-a5f18e27.js";import{n as o,l as h,o as a,w as c,q as r,i as l}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{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";const f=d;const p=class{constructor(s){t(this,s);this.change=e(this,"change",7);this.popoverState=e(this,"popoverState",7);this.ready=e(this,"ready",3);this.scheduledAfterRender=[];this.keyStore={queue:[],lastPressedAt:new Date};this.searchAndFocus=(t,e)=>{const s=()=>{this.pivotIndex=this.pivotIndex===undefined?0:(this.activeIndex||0)+1;const t=this.allOptions.map(((t,e)=>({element:t,index:e})));return[...t.slice(this.pivotIndex),...t.slice(0,this.pivotIndex)]};const i=()=>{const e=new Date;if(e.getTime()-this.keyStore.lastPressedAt.getTime()>1e3){this.keyStore.queue.length=0}if(this.keyStore.queue.length!==1||this.keyStore.queue[0]!==t){this.keyStore.queue.push(t)}this.keyStore.lastPressedAt=e};const n=t=>{const e=this.keyStore.queue.join("");return t.find((t=>!t.element.disabled&&t.element.display&&(t.element.display.match(new RegExp(`^${e}`,"i"))||t.element.display.replace(/\s/g,"").match(new RegExp(`^${e}`,"i")))))};const o=({index:t})=>{if(this.multiple){this.openDropdownWithActiveElement(t)}else{this.activeIndex=t;if(e){this.selectOption(this.allOptions[t]);this.popoverState.emit({open:false,action:"select"})}else this.setActiveElement(t)}};i();const h=n(s());if(h){o(h)}};this.externalKeydownHandler=t=>{t.stopPropagation();const{activeIndex:e,customSearch:s,allOptions:i}=this;const{key:n}=t;let h;switch(n){case" ":if(this.searchString){if(s)break;this.searchOptions(n,true);break}else if(this.type==="menu"){this.activeIndex=0;this.openDropdownWithActiveElement(0)}else{this.setDefaultActiveElement();o((()=>this.popoverState.emit({open:true,action:"open"})))}break;case"Enter":if(this.type==="menu"){this.activeIndex=0;this.openDropdownWithActiveElement(0)}else{this.setDefaultActiveElement();o((()=>this.popoverState.emit({open:true,action:"open"})))}break;case"ArrowUp":t.preventDefault();this.activeIndex=0;h=!!this.selectedOptions.length?this.getDefaultActiveIndex():this.getNextVisibleIndex(-1);if(h===-1)break;this.openDropdownWithActiveElement(h);break;case"ArrowDown":t.preventDefault();this.activeIndex=0;h=!!this.selectedOptions.length?this.getDefaultActiveIndex():this.getNextVisibleIndex(0);if(h===-1)break;this.openDropdownWithActiveElement(h);break;case"Home":t.preventDefault();this.openDropdownWithActiveElement(0);break;case"End":t.preventDefault();this.openDropdownWithActiveElement(i.length-1);break;case"PageUp":t.preventDefault();this.openDropdownWithActiveElement(Math.max((e||0)-10,0));break;case"PageDown":t.preventDefault();this.openDropdownWithActiveElement(Math.min((e||0)+10,i.length-1));break;case"Tab":this.popoverState.emit({open:false,action:"close"});break;case"Esc":case"Escape":if(this.noSelect)this.setActiveElement(null);this.popoverState.emit({open:false,action:"close"});break;default:if(s)break;if(!n.match(/^[\w]$/))break;this.searchOptions(n,true);break}};this.internalKeydownHandler=t=>{t.stopPropagation();const{activeIndex:e,customSearch:s,allOptions:i,multiple:n}=this;const{key:o,shiftKey:h}=t;let a;switch(o){case" ":if(this.searchString&&!this.multiple){if(s)break;this.searchOptions(o,false);break}t.preventDefault();a=i.find((t=>t.active));if(!a||a.disabled)break;this.selectOption(a);if(n)break;this.popoverState.emit({open:false,action:"select"});break;case"Enter":t.preventDefault();a=i.find((t=>t.active));if(!a||a.disabled)break;this.selectOption(a);if(n)break;this.popoverState.emit({open:false,action:"select"});break;case"ArrowUp":t.preventDefault();const c=e===0;if(c)break;if(e===undefined){this.setDefaultActiveElement();break}else{const t=this.getNextVisibleIndex(-1);if(t===-1)break;this.adjustActiveOptionAndScroll(t-e);break}case"ArrowDown":t.preventDefault();const r=e===i.length-1;if(r)break;if(e===undefined){this.setDefaultActiveElement();break}else{const t=this.getNextVisibleIndex(1);if(t===-1)break;this.adjustActiveOptionAndScroll(t-e);break}case"Home":t.preventDefault();this.openDropdownWithActiveElement(0);break;case"End":t.preventDefault();this.openDropdownWithActiveElement(i.length-1);break;case"PageUp":t.preventDefault();this.openDropdownWithActiveElement(Math.max(e-10,0));break;case"PageDown":t.preventDefault();this.openDropdownWithActiveElement(Math.min(e+10,i.length-1));break;case"Tab":if(h)break;if(this.multiple&&this.type==="listbox")break;a=i.find((t=>t.active));if(!a||a.disabled)return;this.selectOption(a);break;case"Esc":case"Escape":if(this.noSelect)this.setActiveElement(null);this.popoverState.emit({open:false,action:"close"});break;default:if(s)break;if(!o.match(/^[\w]$/))break;this.searchOptions(o,false);break}};this.focusoutHandler=t=>{const{relatedTarget:e}=t;const s=this.allOptions.includes(e);const i=!s&&this.hostElement.contains(e);if(s||i){t.stopPropagation()}};this.clickHandler=t=>{const e=t.target;const s=e.closest("q2-option");this.selectOption(s);if(this.multiple)return;this.popoverState.emit({open:false,action:"select"})};this.align=undefined;this.customSearch=undefined;this.disabled=undefined;this.label=h("tecton.element.optionList.label");this.multiple=undefined;this.noSelect=undefined;this.selectedOptions=[];this.showSelected=undefined;this.type="listbox";this.hasOptions=undefined}componentWillLoad(){this.hasOptions=!!this.hostElement.querySelectorAll("q2-option").length}componentDidLoad(){a(this.hostElement);this.checkOptions();this.selectedOptionsUpdated();this.ready.emit()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}get allContents(){const t=this.getRootSlot(this.hostElement);const e=["Q2-OPTGROUP","Q2-OPTION"];return t.filter((t=>e.includes(t.tagName)))}get allOptions(){const t=this.allContents;const e=t=>t.reduce(((t,s)=>{if(s.tagName==="Q2-OPTGROUP"){return[...t,...e(Array.from(s.children))]}else if(s.tagName==="Q2-OPTION"){return[...t,s]}else{return t}}),[]);return e(t)}get allVisibleOptions(){return this.allOptions.filter((t=>!t.hidden&&!t._multiSelectHidden&&!t.disabled&&!t.disabledGroup))}async checkOptions(){const{type:t}=this;const e=await this.getOptions();if(!t)return;const s=t==="menu"?"menuitem":"option";e.forEach((t=>{t.role=s}))}getRootSlot(t){var e;const s=t.querySelector("slot");const i=(e=s===null||s===void 0?void 0:s.assignedElements())!==null&&e!==void 0?e:Array.from(t.children);const n=!!i.length&&i[0].tagName==="SLOT";if(n){return this.getRootSlot(i[0])}else{return i}}scrollToActiveOption(){const t=this.allOptions[this.activeIndex];t===null||t===void 0?void 0:t.scrollIntoView({block:"nearest"})}async openDropdownWithActiveElement(t){if(this.disabled)return;this.activeIndex=t;this.popoverState.emit({open:true,action:"open"});await c();this.setActiveOption();await c();this.setFocusedOption();this.scrollToActiveOption()}getDefaultActiveIndex(){const{allOptions:t}=this;const e=t.findIndex((t=>t.selected));if(e>-1)return e;const s=t.findIndex((t=>!t.hidden));if(s>-1)return s;return 0}updateSingleOptionAttrs(){var t;const{allOptions:e,selectedOptions:s}=this;const i=((t=s[0])===null||t===void 0?void 0:t.value)||undefined;e.forEach((t=>{t.selected=t.value===i}))}updateMultipleOptionAttrs(){const{allOptions:t,selectedOptions:e}=this;const s=e.map((({value:t})=>t));t.forEach((t=>{t.selected=s.includes(t.value)}))}setActiveOption(){const t=this.activeIndex;this.allOptions.forEach(((e,s)=>{e.active=t===s}))}setFocusedOption(){const t=this.allOptions[this.activeIndex];if(!t)return;const e=r(t);if(e)t.focus();else o((()=>t.focus()))}getNextVisibleIndex(t){const{allVisibleOptions:e,allOptions:s,activeIndex:i}=this;const n=s[i];const o=e.indexOf(n);let h=o+t;if(h<0){h=e.length-1}else if(h>e.length-1){h=0}const a=e[h];return s.indexOf(a)}focusSelectedSibling(t){const{allVisibleOptions:e,allOptions:s}=this;const i=e.length<2;if(i){this.showSelected=false;return}const n=e.indexOf(t);const o=n?n-1:n+1;const h=e[o];const a=s.indexOf(h);this.activeIndex=a;this.setFocusedOption();this.scheduledAfterRender.push((()=>{t._multiSelectHidden=!t.selected}))}selectOption(t){const{multiple:e,noSelect:s,showSelected:i}=this;if(!t||t.disabled||t.disabledGroup)return;const n=t.value;const o={value:n,display:t.display||t.innerText.trim()};let h=[];if(e){const{selectedOptions:e}=this;const s=e.find((t=>t.value===n));if(s){h=e.filter((({value:t})=>t!==n))}else{h=[...e,o]}if(i)this.focusSelectedSibling(t)}else{h=[o]}if(s)this.setActiveElement(null);else this.selectedOptions=h;this.change.emit({value:n,values:h})}adjustActiveOptionAndScroll(t){this.activeIndex+=t;this.setActiveOption();this.setFocusedOption();this.scrollToActiveOption()}resetTimer(){if(this.searchStringTimer){clearTimeout(this.searchStringTimer)}this.searchStringTimer=window.setTimeout((()=>{this.searchString=null}),2e3)}searchOptions(t,e){this.searchString=t;this.searchAndFocus(t,e)}showSelectedUpdated(t){if(t&&this.selectedOptions.length===0){this.showSelected=false;return}this.allOptions.forEach((e=>e._multiSelectHidden=t?!e.selected:false))}selectedOptionsUpdated(){if(this.multiple){this.updateMultipleOptionAttrs()}else{this.updateSingleOptionAttrs()}}delegateFocus(t){if(!l(t,this.hostElement))return;this.popoverState.emit({open:true,action:"open"});const{activeIndex:e}=this;if(typeof e==="number"&&e>-1){this.setActiveOption();this.setFocusedOption()}else{this.setDefaultActiveElement()}}handleClick(t){t.stopPropagation()}async setDefaultActiveElement(){this.activeIndex=this.getDefaultActiveIndex();this.setActiveOption();this.setFocusedOption()}async setActiveElement(t){this.activeIndex=t;this.setActiveOption();this.setFocusedOption()}async handleExternalKeydown(t){this.externalKeydownHandler(t)}async getContents(){return this.allContents}async getOptions(){return this.allOptions}render(){return s(i,{key:"c3c1aa149c1696c2025e7be8d0185a500cdc40e1"},s("div",{key:"0788af1766ce408de56b8d56f87898c048dfd618",class:"content",ref:t=>this.contentElement=t,onFocusout:this.focusoutHandler},s("div",{key:"04341860dc01b4c64905bdead1125adc03c3d036",class:"options","aria-label":h("tecton.element.optionList.label",[this.label]),"aria-multiselectable":`${!!this.multiple}`,role:this.type||"listbox",onKeyDown:this.internalKeydownHandler,onClick:this.clickHandler},s("slot",{key:"e1fa1fc07a9dd268a84491177a6c8e15632f3afa"}))))}get hostElement(){return n(this)}static get watchers(){return{showSelected:["showSelectedUpdated"],selectedOptions:["selectedOptionsUpdated"]}}};p.style=f;export{p as q2_option_list};
-//# sourceMappingURL=p-a3d58a50.entry.js.map
+import{r as t,c as e,h as s,H as i,g as n}from"./p-a5f18e27.js";import{n as o,l as h,o as a,w as c,q as r,i as l}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{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";const f=d;const p=class{constructor(s){t(this,s);this.change=e(this,"change",7);this.popoverState=e(this,"popoverState",7);this.ready=e(this,"ready",3);this.scheduledAfterRender=[];this.keyStore={queue:[],lastPressedAt:new Date};this.searchAndFocus=(t,e)=>{const s=()=>{this.pivotIndex=this.pivotIndex===undefined?0:(this.activeIndex||0)+1;const t=this.allOptions.map(((t,e)=>({element:t,index:e})));return[...t.slice(this.pivotIndex),...t.slice(0,this.pivotIndex)]};const i=()=>{const e=new Date;if(e.getTime()-this.keyStore.lastPressedAt.getTime()>1e3){this.keyStore.queue.length=0}if(this.keyStore.queue.length!==1||this.keyStore.queue[0]!==t){this.keyStore.queue.push(t)}this.keyStore.lastPressedAt=e};const n=t=>{const e=this.keyStore.queue.join("");return t.find((t=>!t.element.disabled&&t.element.display&&(t.element.display.match(new RegExp(`^${e}`,"i"))||t.element.display.replace(/\s/g,"").match(new RegExp(`^${e}`,"i")))))};const o=({index:t})=>{if(this.multiple){this.openDropdownWithActiveElement(t)}else{this.activeIndex=t;if(e){this.selectOption(this.allOptions[t]);this.popoverState.emit({open:false,action:"select"})}else this.setActiveElement(t)}};i();const h=n(s());if(h){o(h)}};this.externalKeydownHandler=t=>{t.stopPropagation();const{activeIndex:e,customSearch:s,allOptions:i}=this;const{key:n}=t;let h;switch(n){case" ":if(this.searchString){if(s)break;this.searchOptions(n,true);break}else if(this.type==="menu"){this.activeIndex=0;this.openDropdownWithActiveElement(0)}else{this.setDefaultActiveElement();o((()=>this.popoverState.emit({open:true,action:"open"})))}break;case"Enter":if(this.type==="menu"){this.activeIndex=0;this.openDropdownWithActiveElement(0)}else{this.setDefaultActiveElement();o((()=>this.popoverState.emit({open:true,action:"open"})))}break;case"ArrowUp":t.preventDefault();this.activeIndex=0;h=!!this.selectedOptions.length?this.getDefaultActiveIndex():this.getNextVisibleIndex(-1);if(h===-1)break;this.openDropdownWithActiveElement(h);break;case"ArrowDown":t.preventDefault();this.activeIndex=0;h=!!this.selectedOptions.length?this.getDefaultActiveIndex():this.getNextVisibleIndex(0);if(h===-1)break;this.openDropdownWithActiveElement(h);break;case"Home":t.preventDefault();this.openDropdownWithActiveElement(0);break;case"End":t.preventDefault();this.openDropdownWithActiveElement(i.length-1);break;case"PageUp":t.preventDefault();this.openDropdownWithActiveElement(Math.max((e||0)-10,0));break;case"PageDown":t.preventDefault();this.openDropdownWithActiveElement(Math.min((e||0)+10,i.length-1));break;case"Tab":this.popoverState.emit({open:false,action:"close"});break;case"Esc":case"Escape":if(this.noSelect)this.setActiveElement(null);this.popoverState.emit({open:false,action:"close"});break;default:if(s)break;if(!n.match(/^[\w]$/))break;this.searchOptions(n,true);break}};this.internalKeydownHandler=t=>{t.stopPropagation();const{activeIndex:e,customSearch:s,allOptions:i,multiple:n}=this;const{key:o,shiftKey:h}=t;let a;switch(o){case" ":if(this.searchString&&!this.multiple){if(s)break;this.searchOptions(o,false);break}t.preventDefault();a=i.find((t=>t.active));if(!a||a.disabled)break;this.selectOption(a);if(n)break;this.popoverState.emit({open:false,action:"select"});break;case"Enter":t.preventDefault();a=i.find((t=>t.active));if(!a||a.disabled)break;this.selectOption(a);if(n)break;this.popoverState.emit({open:false,action:"select"});break;case"ArrowUp":t.preventDefault();const c=e===0;if(c)break;if(e===undefined){this.setDefaultActiveElement();break}else{const t=this.getNextVisibleIndex(-1);if(t===-1)break;this.adjustActiveOptionAndScroll(t-e);break}case"ArrowDown":t.preventDefault();const r=e===i.length-1;if(r)break;if(e===undefined){this.setDefaultActiveElement();break}else{const t=this.getNextVisibleIndex(1);if(t===-1)break;this.adjustActiveOptionAndScroll(t-e);break}case"Home":t.preventDefault();this.openDropdownWithActiveElement(0);break;case"End":t.preventDefault();this.openDropdownWithActiveElement(i.length-1);break;case"PageUp":t.preventDefault();this.openDropdownWithActiveElement(Math.max(e-10,0));break;case"PageDown":t.preventDefault();this.openDropdownWithActiveElement(Math.min(e+10,i.length-1));break;case"Tab":if(h)break;if(this.multiple&&this.type==="listbox")break;a=i.find((t=>t.active));if(!a||a.disabled)return;this.selectOption(a);break;case"Esc":case"Escape":if(this.noSelect)this.setActiveElement(null);this.popoverState.emit({open:false,action:"close"});break;default:if(s)break;if(!o.match(/^[\w]$/))break;this.searchOptions(o,false);break}};this.focusoutHandler=t=>{const{relatedTarget:e}=t;const s=this.allOptions.includes(e);const i=!s&&this.hostElement.contains(e);if(s||i){t.stopPropagation()}};this.clickHandler=t=>{const e=t.target;const s=e.closest("q2-option");this.selectOption(s);if(this.multiple)return;this.popoverState.emit({open:false,action:"select"})};this.align=undefined;this.customSearch=undefined;this.disabled=undefined;this.label=h("tecton.element.optionList.label");this.multiple=undefined;this.noSelect=undefined;this.selectedOptions=[];this.showSelected=undefined;this.type="listbox";this.hasOptions=undefined}componentWillLoad(){this.hasOptions=!!this.hostElement.querySelectorAll("q2-option").length}componentDidLoad(){a(this.hostElement);this.checkOptions();this.selectedOptionsUpdated();this.ready.emit()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}get allContents(){const t=this.getRootSlot(this.hostElement);const e=["Q2-OPTGROUP","Q2-OPTION"];return t.filter((t=>e.includes(t.tagName)))}get allOptions(){const t=this.allContents;const e=t=>t.reduce(((t,s)=>{if(s.tagName==="Q2-OPTGROUP"){return[...t,...e(Array.from(s.children))]}else if(s.tagName==="Q2-OPTION"){return[...t,s]}else{return t}}),[]);return e(t)}get allVisibleOptions(){return this.allOptions.filter((t=>!t.hidden&&!t._multiSelectHidden&&!t.disabled&&!t.disabledGroup))}async checkOptions(){const{type:t}=this;const e=await this.getOptions();if(!t)return;const s=t==="menu"?"menuitem":"option";e.forEach((t=>{t.role=s}))}getRootSlot(t){var e;const s=t.querySelector("slot");const i=(e=s===null||s===void 0?void 0:s.assignedElements())!==null&&e!==void 0?e:Array.from(t.children);const n=!!i.length&&i[0].tagName==="SLOT";if(n){return this.getRootSlot(i[0])}else{return i}}scrollToActiveOption(){const t=this.allOptions[this.activeIndex];t===null||t===void 0?void 0:t.scrollIntoView({block:"nearest"})}async openDropdownWithActiveElement(t){if(this.disabled)return;this.popoverState.emit({open:true,action:"open"});await c();this.activeIndex=t;this.setActiveOption();this.setFocusedOption();this.scrollToActiveOption()}getDefaultActiveIndex(){const{allOptions:t}=this;const e=t.findIndex((t=>t.selected));if(e>-1)return e;const s=t.findIndex((t=>!t.hidden));if(s>-1)return s;return 0}updateSingleOptionAttrs(){var t;const{allOptions:e,selectedOptions:s}=this;const i=((t=s[0])===null||t===void 0?void 0:t.value)||undefined;e.forEach((t=>{t.selected=t.value===i}))}updateMultipleOptionAttrs(){const{allOptions:t,selectedOptions:e}=this;const s=e.map((({value:t})=>t));t.forEach((t=>{t.selected=s.includes(t.value)}))}setActiveOption(){const t=this.activeIndex;this.allOptions.forEach(((e,s)=>{e.active=t===s}))}setFocusedOption(){const t=this.allOptions[this.activeIndex];if(!t)return;const e=r(t);if(e)t.focus();else o((()=>t.focus()))}getNextVisibleIndex(t){const{allVisibleOptions:e,allOptions:s,activeIndex:i}=this;const n=s[i];const o=e.indexOf(n);let h=o+t;if(h<0){h=e.length-1}else if(h>e.length-1){h=0}const a=e[h];return s.indexOf(a)}focusSelectedSibling(t){const{allVisibleOptions:e,allOptions:s}=this;const i=e.length<2;if(i){this.showSelected=false;return}const n=e.indexOf(t);const o=n?n-1:n+1;const h=e[o];const a=s.indexOf(h);this.activeIndex=a;this.setFocusedOption();this.scheduledAfterRender.push((()=>{t._multiSelectHidden=!t.selected}))}selectOption(t){const{multiple:e,noSelect:s,showSelected:i}=this;if(!t||t.disabled||t.disabledGroup)return;const n=t.value;const o={value:n,display:t.display||t.innerText.trim()};let h=[];if(e){const{selectedOptions:e}=this;const s=e.find((t=>t.value===n));if(s){h=e.filter((({value:t})=>t!==n))}else{h=[...e,o]}if(i)this.focusSelectedSibling(t)}else{h=[o]}if(s)this.setActiveElement(null);else this.selectedOptions=h;this.change.emit({value:n,values:h})}adjustActiveOptionAndScroll(t){this.activeIndex+=t;this.setActiveOption();this.setFocusedOption();this.scrollToActiveOption()}resetTimer(){if(this.searchStringTimer){clearTimeout(this.searchStringTimer)}this.searchStringTimer=window.setTimeout((()=>{this.searchString=null}),2e3)}searchOptions(t,e){this.searchString=t;this.searchAndFocus(t,e)}showSelectedUpdated(t){if(t&&this.selectedOptions.length===0){this.showSelected=false;return}this.allOptions.forEach((e=>e._multiSelectHidden=t?!e.selected:false))}selectedOptionsUpdated(){if(this.multiple){this.updateMultipleOptionAttrs()}else{this.updateSingleOptionAttrs()}}delegateFocus(t){if(!l(t,this.hostElement))return;this.popoverState.emit({open:true,action:"open"});const{activeIndex:e}=this;if(typeof e==="number"&&e>-1){this.setActiveOption();this.setFocusedOption()}else{this.setDefaultActiveElement()}}handleClick(t){t.stopPropagation()}async setDefaultActiveElement(){this.activeIndex=this.getDefaultActiveIndex();this.setActiveOption();this.setFocusedOption()}async setActiveElement(t){this.activeIndex=t;this.setActiveOption();this.setFocusedOption()}async handleExternalKeydown(t){this.externalKeydownHandler(t)}async getContents(){return this.allContents}async getOptions(){return this.allOptions}render(){return s(i,{key:"2a470de268f16262aa675475fd2425bd50b4edad"},s("div",{key:"549deb2fbe009ea6cef0444a4867710b4ad1abf6",class:"content",ref:t=>this.contentElement=t,onFocusout:this.focusoutHandler},s("div",{key:"0f5857df5db8f073ef28e2a6760d6d798ab3d1fd",class:"options","aria-label":h("tecton.element.optionList.label",[this.label]),"aria-multiselectable":`${!!this.multiple}`,role:this.type||"listbox",onKeyDown:this.internalKeydownHandler,onClick:this.clickHandler},s("slot",{key:"cbee273a92302a2b8c9302d65444534a6c04b42f"}))))}get hostElement(){return n(this)}static get watchers(){return{showSelected:["showSelectedUpdated"],selectedOptions:["selectedOptionsUpdated"]}}};p.style=f;export{p as q2_option_list};
+//# sourceMappingURL=p-56dd051a.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2OptionListCss","Q2OptionListStyle0","Q2OptionList","this","scheduledAfterRender","keyStore","queue","lastPressedAt","Date","searchAndFocus","keyValue","shouldSelect","reorder","pivotIndex","undefined","activeIndex","list","allOptions","map","element","index","slice","buildQueue","now","getTime","length","push","searchIndex","keyStr","join","find","v","disabled","display","match","RegExp","replace","setFocus","multiple","openDropdownWithActiveElement","selectOption","popoverState","emit","open","action","setActiveElement","matched","externalKeydownHandler","event","stopPropagation","customSearch","key","nextIndex","searchString","searchOptions","type","setDefaultActiveElement","nextPaint","preventDefault","selectedOptions","getDefaultActiveIndex","getNextVisibleIndex","Math","max","min","noSelect","internalKeydownHandler","shiftKey","newOption","active","isFirstOptionActive","adjustActiveOptionAndScroll","isLastOptionActive","focusoutHandler","relatedTarget","isInQ2OptionList","includes","isInLightDom","hostElement","contains","clickHandler","target","option","closest","loc","componentWillLoad","hasOptions","querySelectorAll","componentDidLoad","overrideFocus","checkOptions","selectedOptionsUpdated","ready","componentDidRender","forEach","fn","allContents","rootSlot","getRootSlot","acceptedTags","filter","tagName","contents","extractOptions","elements","reduce","acc","Array","from","children","allVisibleOptions","hidden","_multiSelectHidden","disabledGroup","options","getOptions","optionRole","role","slot","querySelector","assignedElements","_a","hasAnotherSlot","scrollToActiveOption","activeOption","scrollIntoView","block","waitForNextPaint","setActiveOption","setFocusedOption","firstSelected","findIndex","selected","firstEnabled","updateSingleOptionAttrs","selectedValue","value","updateMultipleOptionAttrs","selectedValues","elementIndex","isOptionVisible","isVisible","focus","direction","visibleActiveOptionIndex","indexOf","nextVisibleOptionIndex","nextVisibleOption","focusSelectedSibling","hasNoSiblings","showSelected","selectedOptionVisibleIndex","nextVisibleSiblingIndex","nextVisibleSibling","nextSiblingIndex","selectedOption","valueObject","innerText","trim","values","isAlreadySelected","change","numToAdd","resetTimer","searchStringTimer","clearTimeout","window","setTimeout","showSelectedUpdated","delegateFocus","isEventFromElement","handleClick","handleExternalKeydown","getContents","render","h","Host","class","ref","el","contentElement","onFocusout","label","onKeyDown","onClick"],"sources":["src/components/q2-option-list/q2-option-list.scss?tag=q2-option-list&encapsulation=shadow","src/components/q2-option-list/q2-option-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n    line-height: var-list(var-prefixer(option-list-line-height),--app-line-height, 1.428571429em);\n}\n\n.content {\n    text-align: start;\n\n    :host([is-sizeable]) & {\n        display: block;\n        height: auto;\n    }\n}\n","import {\n    Component,\n    Prop,\n    h,\n    Event,\n    State,\n    Element,\n    ComponentInterface,\n    Host,\n    EventEmitter,\n    Method,\n    Watch,\n    Listen,\n} from '@stencil/core';\nimport { isEventFromElement, isVisible, loc, nextPaint, overrideFocus, waitForNextPaint } from 'src/utils';\n\nexport interface IOptionValue {\n    value: string;\n    display?: string;\n}\n\n@Component({ tag: 'q2-option-list', shadow: true, styleUrl: 'q2-option-list.scss' })\nexport class Q2OptionList implements ComponentInterface {\n    @Prop({ reflect: true }) align: 'left' | 'right';\n\n    /** Indicates a custom search is being implemented for the option list. */\n    @Prop({ reflect: true }) customSearch: boolean;\n\n    /** Disables the option list. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop() label: string = loc('tecton.element.optionList.label');\n\n    /**\n     * Enables the multi-select ability for the option list.\n     * @info\n     * Only applicable when options are provided.\n     */\n    @Prop({ reflect: true }) multiple: boolean;\n\n    /** Disables the logic that handles selecting and focusing an option in the option list. */\n    @Prop({ reflect: true }) noSelect: boolean;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n\n    /** Applies focus to the selected option. */\n    @Prop({ reflect: true, mutable: true }) showSelected: boolean;\n\n    /** Translates to the role of the option list */\n    @Prop() type: 'menu' | 'listbox' = 'listbox';\n\n    /**\n     * Emitted when an option is selected or deselected.\n     *\n     * When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property\n     * will contain the selected option values.\n     */\n    @Event() change: EventEmitter<{ value: string; values: IOptionValue[] }>;\n\n    /**\n     * Emitted to indicate the intended state of the popover.\n     * @private\n     */\n    @Event() popoverState: EventEmitter<{ open: boolean; action: 'close' | 'select' | 'open' }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false }) ready: EventEmitter<undefined>;\n    @State() hasOptions: boolean;\n    contentElement: HTMLElement;\n    activeIndex: number;\n    pivotIndex: number;\n    scheduledAfterRender: (() => void)[] = [];\n    searchString: string;\n    searchStringTimer: number;\n    keyStore: {\n        queue: string[];\n        lastPressedAt: Date;\n    } = {\n        queue: [],\n        lastPressedAt: new Date(),\n    };\n\n    @Element() hostElement: HTMLElement;\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        this.hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.checkOptions();\n        this.selectedOptionsUpdated();\n        this.ready.emit();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    /// Getters ///\n    get allContents(): (HTMLQ2OptgroupElement | HTMLQ2OptionElement)[] {\n        const rootSlot = this.getRootSlot(this.hostElement);\n        const acceptedTags = ['Q2-OPTGROUP', 'Q2-OPTION'];\n        return rootSlot.filter(element => acceptedTags.includes(element.tagName)) as (\n            | HTMLQ2OptgroupElement\n            | HTMLQ2OptionElement\n        )[];\n    }\n\n    get allOptions(): HTMLQ2OptionElement[] {\n        const contents = this.allContents;\n\n        const extractOptions = (\n            elements: (HTMLQ2OptgroupElement | HTMLQ2OptionElement | Element)[]\n        ): HTMLQ2OptionElement[] => {\n            return elements.reduce((acc, element) => {\n                if (element.tagName === 'Q2-OPTGROUP') {\n                    return [...acc, ...extractOptions(Array.from(element.children))];\n                } else if (element.tagName === 'Q2-OPTION') {\n                    return [...acc, element];\n                } else {\n                    return acc;\n                }\n            }, []);\n        };\n\n        return extractOptions(contents);\n    }\n\n    get allVisibleOptions(): HTMLQ2OptionElement[] {\n        return this.allOptions.filter(\n            option => !option.hidden && !option._multiSelectHidden && !option.disabled && !option.disabledGroup\n        );\n    }\n\n    /// Helpers ///\n    async checkOptions() {\n        const { type } = this;\n        const options = await this.getOptions();\n        if (!type) return;\n        const optionRole = type === 'menu' ? 'menuitem' : 'option';\n        options.forEach(option => {\n            option.role = optionRole;\n        });\n    }\n\n    getRootSlot(element: Element): Element[] {\n        const slot = element.querySelector('slot');\n        const assignedElements = slot?.assignedElements() ?? Array.from(element.children);\n        const hasAnotherSlot = !!assignedElements.length && assignedElements[0].tagName === 'SLOT';\n        if (hasAnotherSlot) {\n            return this.getRootSlot(assignedElements[0]);\n        } else {\n            return assignedElements;\n        }\n    }\n\n    scrollToActiveOption() {\n        const activeOption = this.allOptions[this.activeIndex];\n        activeOption?.scrollIntoView({ block: 'nearest' });\n    }\n\n    async openDropdownWithActiveElement(activeIndex: number) {\n        if (this.disabled) return;\n        this.popoverState.emit({ open: true, action: 'open' });\n        await waitForNextPaint();\n        this.activeIndex = activeIndex;\n        this.setActiveOption();\n        this.setFocusedOption();\n        this.scrollToActiveOption();\n    }\n\n    getDefaultActiveIndex() {\n        const { allOptions } = this;\n        const firstSelected = allOptions.findIndex(element => element.selected);\n        if (firstSelected > -1) return firstSelected;\n\n        const firstEnabled = allOptions.findIndex(element => !element.hidden);\n        if (firstEnabled > -1) return firstEnabled;\n\n        return 0;\n    }\n\n    updateSingleOptionAttrs() {\n        const { allOptions, selectedOptions } = this;\n        const selectedValue = selectedOptions[0]?.value || undefined;\n        allOptions.forEach(element => {\n            element.selected = element.value === selectedValue;\n        });\n    }\n\n    updateMultipleOptionAttrs() {\n        const { allOptions, selectedOptions } = this;\n        const selectedValues = selectedOptions.map(({ value }) => value);\n        allOptions.forEach(element => {\n            element.selected = selectedValues.includes(element.value);\n        });\n    }\n\n    setActiveOption() {\n        const activeIndex = this.activeIndex;\n\n        this.allOptions.forEach((element, elementIndex) => {\n            element.active = activeIndex === elementIndex;\n        });\n    }\n\n    setFocusedOption() {\n        const option = this.allOptions[this.activeIndex];\n        if (!option) return;\n\n        const isOptionVisible = isVisible(option);\n        if (isOptionVisible) option.focus();\n        else nextPaint(() => option.focus());\n    }\n\n    getNextVisibleIndex(direction) {\n        const { allVisibleOptions, allOptions, activeIndex } = this;\n        const activeOption = allOptions[activeIndex];\n        const visibleActiveOptionIndex = allVisibleOptions.indexOf(activeOption);\n        let nextVisibleOptionIndex = visibleActiveOptionIndex + direction;\n\n        if (nextVisibleOptionIndex < 0) {\n            nextVisibleOptionIndex = allVisibleOptions.length - 1;\n        } else if (nextVisibleOptionIndex > allVisibleOptions.length - 1) {\n            nextVisibleOptionIndex = 0;\n        }\n\n        const nextVisibleOption = allVisibleOptions[nextVisibleOptionIndex];\n        return allOptions.indexOf(nextVisibleOption);\n    }\n\n    focusSelectedSibling(option: HTMLQ2OptionElement) {\n        const { allVisibleOptions, allOptions } = this;\n        const hasNoSiblings = allVisibleOptions.length < 2;\n        if (hasNoSiblings) {\n            this.showSelected = false;\n            return;\n        }\n\n        const selectedOptionVisibleIndex = allVisibleOptions.indexOf(option);\n        const nextVisibleSiblingIndex = selectedOptionVisibleIndex\n            ? selectedOptionVisibleIndex - 1\n            : selectedOptionVisibleIndex + 1;\n        const nextVisibleSibling = allVisibleOptions[nextVisibleSiblingIndex];\n        const nextSiblingIndex = allOptions.indexOf(nextVisibleSibling);\n\n        this.activeIndex = nextSiblingIndex;\n        this.setFocusedOption();\n        this.scheduledAfterRender.push(() => {\n            option._multiSelectHidden = !option.selected;\n        });\n    }\n\n    selectOption(selectedOption: HTMLQ2OptionElement) {\n        const { multiple, noSelect, showSelected } = this;\n        if (!selectedOption || selectedOption.disabled || selectedOption.disabledGroup) return;\n        const selectedValue = selectedOption.value;\n        const valueObject = {\n            value: selectedValue,\n            display: selectedOption.display || selectedOption.innerText.trim(),\n        };\n\n        let values: IOptionValue[] = [];\n        if (multiple) {\n            const { selectedOptions } = this;\n            const isAlreadySelected = selectedOptions.find(option => option.value === selectedValue);\n\n            if (isAlreadySelected) {\n                values = selectedOptions.filter(({ value }) => value !== selectedValue);\n            } else {\n                values = [...selectedOptions, valueObject];\n            }\n\n            if (showSelected) this.focusSelectedSibling(selectedOption);\n        } else {\n            values = [valueObject];\n        }\n\n        if (noSelect) this.setActiveElement(null);\n        else this.selectedOptions = values;\n\n        this.change.emit({ value: selectedValue, values });\n    }\n\n    adjustActiveOptionAndScroll(numToAdd: number) {\n        this.activeIndex += numToAdd;\n        this.setActiveOption();\n        this.setFocusedOption();\n        this.scrollToActiveOption();\n    }\n\n    resetTimer() {\n        if (this.searchStringTimer) {\n            clearTimeout(this.searchStringTimer);\n        }\n\n        this.searchStringTimer = window.setTimeout(() => {\n            this.searchString = null;\n        }, 2000);\n    }\n\n    searchAndFocus = (keyValue: string, shouldSelect: boolean) => {\n        // pseudo search in non-searchable select\n        const reorder = () => {\n            this.pivotIndex = this.pivotIndex === undefined ? 0 : (this.activeIndex || 0) + 1;\n            const list = this.allOptions.map((element, index) => ({ element, index }));\n            return [...list.slice(this.pivotIndex), ...list.slice(0, this.pivotIndex)];\n        };\n\n        const buildQueue = () => {\n            const now = new Date();\n            if (now.getTime() - this.keyStore.lastPressedAt.getTime() > 1000) {\n                // empty stored keys if delay > 1s\n                this.keyStore.queue.length = 0;\n            }\n            if (this.keyStore.queue.length !== 1 || this.keyStore.queue[0] !== keyValue) {\n                this.keyStore.queue.push(keyValue);\n            }\n            this.keyStore.lastPressedAt = now;\n        };\n\n        const searchIndex = (list: any[]) => {\n            const keyStr = this.keyStore.queue.join('');\n            return list.find(v => {\n                return (\n                    !v.element.disabled &&\n                    v.element.display &&\n                    (v.element.display.match(new RegExp(`^${keyStr}`, 'i')) ||\n                        v.element.display.replace(/\\s/g, '').match(new RegExp(`^${keyStr}`, 'i')))\n                );\n            });\n        };\n\n        const setFocus = ({ index }) => {\n            if (this.multiple) {\n                // multiple: should open to make sure that which options are selected\n                this.openDropdownWithActiveElement(index);\n            } else {\n                this.activeIndex = index;\n                if (shouldSelect) {\n                    this.selectOption(this.allOptions[index]);\n                    this.popoverState.emit({ open: false, action: 'select' });\n                } else this.setActiveElement(index);\n            }\n        };\n\n        buildQueue();\n        const matched = searchIndex(reorder());\n        if (matched) {\n            setFocus(matched);\n        }\n    };\n\n    searchOptions(key: string, shouldSelect?: boolean) {\n        this.searchString = key;\n        this.searchAndFocus(key, shouldSelect);\n    }\n\n    /// Watchers ///\n    @Watch('showSelected')\n    showSelectedUpdated(showSelected: boolean) {\n        if (showSelected && this.selectedOptions.length === 0) {\n            this.showSelected = false;\n            return;\n        }\n        this.allOptions.forEach(option => (option._multiSelectHidden = showSelected ? !option.selected : false));\n    }\n\n    @Watch('selectedOptions')\n    selectedOptionsUpdated() {\n        if (this.multiple) {\n            this.updateMultipleOptionAttrs();\n        } else {\n            this.updateSingleOptionAttrs();\n        }\n    }\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.popoverState.emit({ open: true, action: 'open' });\n        const { activeIndex } = this;\n        if (typeof activeIndex === 'number' && activeIndex > -1) {\n            this.setActiveOption();\n            this.setFocusedOption();\n        } else {\n            this.setDefaultActiveElement();\n        }\n    }\n\n    @Listen('click')\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n    }\n\n    /// Public Methods ///\n    @Method()\n    async setDefaultActiveElement() {\n        this.activeIndex = this.getDefaultActiveIndex();\n        this.setActiveOption();\n        this.setFocusedOption();\n    }\n\n    @Method()\n    async setActiveElement(index: number) {\n        this.activeIndex = index;\n        this.setActiveOption();\n        this.setFocusedOption();\n    }\n\n    @Method()\n    async handleExternalKeydown(event: KeyboardEvent) {\n        this.externalKeydownHandler(event);\n    }\n\n    @Method()\n    async getContents(): Promise<(HTMLQ2OptgroupElement | HTMLQ2OptionElement)[]> {\n        return this.allContents;\n    }\n\n    @Method()\n    async getOptions(): Promise<HTMLQ2OptionElement[]> {\n        return this.allOptions;\n    }\n\n    /// Event Handlers ///\n    /* tslint:disable:cyclomatic-complexity */\n    externalKeydownHandler = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        const { activeIndex, customSearch, allOptions } = this;\n        const { key } = event;\n\n        let nextIndex;\n        switch (key) {\n            case ' ':\n                if (this.searchString) {\n                    if (customSearch) break;\n\n                    this.searchOptions(key, true);\n                    break;\n                } else if (this.type === 'menu') {\n                    this.activeIndex = 0;\n                    this.openDropdownWithActiveElement(0);\n                } else {\n                    this.setDefaultActiveElement();\n                    nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));\n                }\n                break;\n\n            case 'Enter':\n                if (this.type === 'menu') {\n                    this.activeIndex = 0;\n                    this.openDropdownWithActiveElement(0);\n                } else {\n                    this.setDefaultActiveElement();\n                    nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));\n                }\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                this.activeIndex = 0;\n                nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(-1);\n                if (nextIndex === -1) break;\n                this.openDropdownWithActiveElement(nextIndex);\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                this.activeIndex = 0;\n                nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(0);\n                if (nextIndex === -1) break;\n                this.openDropdownWithActiveElement(nextIndex);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(0);\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(allOptions.length - 1);\n                break;\n\n            case 'PageUp':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.max((activeIndex || 0) - 10, 0));\n                break;\n\n            case 'PageDown':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.min((activeIndex || 0) + 10, allOptions.length - 1));\n                break;\n\n            case 'Tab':\n                this.popoverState.emit({ open: false, action: 'close' });\n                break;\n\n            case 'Esc':\n            case 'Escape':\n                if (this.noSelect) this.setActiveElement(null);\n                this.popoverState.emit({ open: false, action: 'close' });\n                break;\n\n            default:\n                if (customSearch) break;\n                if (!key.match(/^[\\w]$/)) break;\n\n                this.searchOptions(key, true);\n                break;\n        }\n    };\n\n    internalKeydownHandler = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        const { activeIndex, customSearch, allOptions, multiple } = this;\n        const { key, shiftKey } = event;\n\n        let newOption;\n        switch (key) {\n            case ' ':\n                if (this.searchString && !this.multiple) {\n                    if (customSearch) break;\n\n                    this.searchOptions(key, false);\n                    break;\n                }\n\n                event.preventDefault();\n                newOption = allOptions.find(element => element.active);\n                if (!newOption || newOption.disabled) break;\n                this.selectOption(newOption);\n                if (multiple) break;\n                this.popoverState.emit({ open: false, action: 'select' });\n                break;\n\n            case 'Enter':\n                event.preventDefault();\n                newOption = allOptions.find(element => element.active);\n                if (!newOption || newOption.disabled) break;\n                this.selectOption(newOption);\n                if (multiple) break;\n                this.popoverState.emit({ open: false, action: 'select' });\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                const isFirstOptionActive = activeIndex === 0;\n                if (isFirstOptionActive) break;\n                if (activeIndex === undefined) {\n                    this.setDefaultActiveElement();\n                    break;\n                } else {\n                    const nextIndex = this.getNextVisibleIndex(-1);\n                    if (nextIndex === -1) break;\n                    this.adjustActiveOptionAndScroll(nextIndex - activeIndex);\n                    break;\n                }\n\n            case 'ArrowDown':\n                event.preventDefault();\n                const isLastOptionActive = activeIndex === allOptions.length - 1;\n                if (isLastOptionActive) break;\n                if (activeIndex === undefined) {\n                    this.setDefaultActiveElement();\n                    break;\n                } else {\n                    const nextIndex = this.getNextVisibleIndex(1);\n                    if (nextIndex === -1) break;\n                    this.adjustActiveOptionAndScroll(nextIndex - activeIndex);\n                    break;\n                }\n\n            case 'Home':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(0);\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(allOptions.length - 1);\n                break;\n\n            case 'PageUp':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.max(activeIndex - 10, 0));\n                break;\n\n            case 'PageDown':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.min(activeIndex + 10, allOptions.length - 1));\n                break;\n\n            case 'Tab':\n                if (shiftKey) break;\n                if (this.multiple && this.type === 'listbox') break;\n                newOption = allOptions.find(element => element.active);\n                if (!newOption || newOption.disabled) return;\n                this.selectOption(newOption);\n                break;\n\n            case 'Esc':\n            case 'Escape':\n                if (this.noSelect) this.setActiveElement(null);\n                this.popoverState.emit({ open: false, action: 'close' });\n                break;\n\n            default:\n                if (customSearch) break;\n                if (!key.match(/^[\\w]$/)) break;\n\n                this.searchOptions(key, false);\n                break;\n        }\n    };\n    /* tslint:enable:cyclomatic-complexity */\n\n    focusoutHandler = (event: FocusEvent) => {\n        const { relatedTarget } = event as unknown as { relatedTarget: HTMLQ2OptionElement };\n        const isInQ2OptionList = this.allOptions.includes(relatedTarget);\n        const isInLightDom = !isInQ2OptionList && this.hostElement.contains(relatedTarget);\n        if (isInQ2OptionList || isInLightDom) {\n            event.stopPropagation();\n        }\n    };\n\n    clickHandler = (event: Event) => {\n        const target = event.target as HTMLQ2OptionElement;\n        const option = target.closest('q2-option');\n        this.selectOption(option);\n        if (this.multiple) return;\n        this.popoverState.emit({ open: false, action: 'select' });\n    };\n\n    /// DOM ///\n    render() {\n        return (\n            <Host>\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                    onFocusout={this.focusoutHandler}\n                >\n                    <div\n                        class=\"options\"\n                        aria-label={loc('tecton.element.optionList.label', [this.label])}\n                        aria-multiselectable={`${!!this.multiple}`}\n                        role={this.type || 'listbox'}\n                        onKeyDown={this.internalKeydownHandler}\n                        onClick={this.clickHandler}\n                    >\n                        <slot />\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/{p-abe30d0c.entry.js → p-6e313705.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,g as r}from"./p-a5f18e27.js";import{c as o,l as a}from"./p-84190698.js";const i="*{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}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";const s=i;const p=class{constructor(e){t(this,e);this.guid=o();this.setHidden=()=>{this.hidden=this.options.every((t=>t.hidden||t._multiSelectHidden))};this.disabled=false;this.label=undefined;this.hidden=false}componentWillLoad(){const t=new MutationObserver(this.setHidden);t.observe(this.hostElement,{childList:true,attributes:true,subtree:true});this.mutationObserver=t;this.setHidden();this.disabledWatcher(this.disabled)}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}get headerId(){return`q2-optgroup-header-${this.guid}`}get options(){return Array.from(this.hostElement.querySelectorAll("q2-option"))}disabledWatcher(t){this.options.forEach((e=>{e.disabledGroup=!!t}))}render(){return e("div",{key:"22334d6ad4d588af06d33c426442c17e517bfdff",class:"q2-optgroup-container",hidden:this.hidden,"aria-labelledby":this.headerId,role:"group"},e("div",{key:"82470c713ed744c41ca8a1682d78e4795e83e125",class:"q2-optgroup-header",id:this.headerId},this.label&&a(this.label)||""),e("div",{key:"d246db5839936be3b0ee56eec47e7a11aa0269ee",class:"q2-optgroup-options"},e("slot",{key:"12442af1a98a84db8023dd7572ffa3d6fba34fdc"})))}get hostElement(){return r(this)}static get watchers(){return{disabled:["disabledWatcher"]}}};p.style=s;export{p as q2_optgroup};
-//# sourceMappingURL=p-abe30d0c.entry.js.map
+import{r as t,h as e,g as r}from"./p-a5f18e27.js";import{c as o,l as a}from"./p-84190698.js";const i="*{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}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";const s=i;const p=class{constructor(e){t(this,e);this.guid=o();this.setHidden=()=>{this.hidden=this.options.every((t=>t.hidden||t._multiSelectHidden))};this.disabled=false;this.label=undefined;this.hidden=false}componentWillLoad(){const t=new MutationObserver(this.setHidden);t.observe(this.hostElement,{childList:true,attributes:true,subtree:true});this.mutationObserver=t;this.setHidden();this.disabledWatcher(this.disabled)}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}get headerId(){return`q2-optgroup-header-${this.guid}`}get options(){return Array.from(this.hostElement.querySelectorAll("q2-option"))}disabledWatcher(t){this.options.forEach((e=>{e.disabledGroup=!!t}))}render(){return e("div",{key:"b8965c37e06ab4982edb4caa426806cf8485ce53",class:"q2-optgroup-container",hidden:this.hidden,"aria-labelledby":this.headerId,role:"group"},e("div",{key:"85968a9f908e48d9529f4a1008b699e62aa0efb6",class:"q2-optgroup-header",id:this.headerId},this.label&&a(this.label)||""),e("div",{key:"e38bc428fd9391c5be43688e8d352ae1639b6b5e",class:"q2-optgroup-options"},e("slot",{key:"34ade8fcca59370ae20efc44678cadd417ceb3c7"})))}get hostElement(){return r(this)}static get watchers(){return{disabled:["disabledWatcher"]}}};p.style=s;export{p as q2_optgroup};
+//# sourceMappingURL=p-6e313705.entry.js.map

package/dist/q2-tecton-elements/p-75bb43b2.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,g as o}from"./p-a5f18e27.js";import{l as r,h as n}from"./p-84190698.js";const i="*{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}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, 2px))}.dropdown-item-content{--comp-default-content-padding:12px var(--app-scale-3x, 15px);padding:var(--tct-dropdown-item-content-padding, var(--t-dropdown-item-content-padding, var(--comp-default-content-padding)));text-align:left;background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));transition:background-color var(--tct-dropdown-item-content-tween, var(--t-dropdown-item-content-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}.remove-dropdown-item{flex:0 0 44px;margin:2px}";const d=i;const a=class{constructor(e){t(this,e);this.handleQ2LocValue=()=>{const t=this.hostElement.querySelector("q2-loc");return t?r(t.value,t.substitutions):""};this.onItemClick=t=>{t.stopImmediatePropagation();this.hostElement.dispatchEvent(new CustomEvent("click",{detail:{type:"select",value:this.value||""},bubbles:true}))};this.onItemKeydown=t=>{if(["ArrowRight","Right"].includes(t.key)){this.focusRemoveBtn()}};this.onItemFocus=t=>{t.stopPropagation()};this.onRemoveBtnClick=t=>{t.stopImmediatePropagation();this.hostElement.dispatchEvent(new CustomEvent("click",{detail:{type:"remove",value:this.value||""},bubbles:true}))};this.onRemoveBtnKeydown=t=>{if(["ArrowLeft","Left"].includes(t.key)){this.focusItem()}};this.onRemoveBtnFocus=t=>{t.stopPropagation()};this.disabled=undefined;this.label=undefined;this.removable=undefined;this.separator=undefined;this.value=undefined;this.ariaLabel=undefined;this.q2LocValue=undefined}componentWillLoad(){n(this);this.q2LocValue=this.handleQ2LocValue()}ariaLabelObserver(){n(this)}get innerLabel(){return this.label||this.hostElement.textContent.trim()||this.q2LocValue}get removeLabel(){return r("tecton.element.dropdownItem.remove",[this.innerLabel||""])}get dropdownItemBtn(){return this.hostElement.shadowRoot.querySelector(".dropdown-item")}get removeBtn(){return this.hostElement.shadowRoot.querySelector(".remove-dropdown-item")}onHostElementFocus(){if(event.target===this.hostElement){this.focusItem()}}focusItem(){this.dropdownItemBtn.dispatchEvent(new FocusEvent("focus",{bubbles:false}))}focusRemoveBtn(){this.removeBtn&&this.removeBtn.dispatchEvent(new FocusEvent("focus",{bubbles:false}))}render(){if(!!this.separator){return this.separatorDOM()}return this.itemDOM()}separatorDOM(){return e("div",{class:"dropdown-separator",role:"separator","test-id":"dropdownItemSeparator"})}itemDOM(){return e("div",{class:"dropdown-item-wrapper"},e("q2-btn",{class:"dropdown-item",label:this.innerLabel,"hide-label":true,disabled:!!this.disabled,_role:"menuitem",onClick:this.onItemClick,onKeyDown:this.onItemKeydown,onFocus:this.onItemFocus,"test-id":"dropdownItem"},e("div",{class:"dropdown-item-content"},e("slot",null))),!!this.removable&&e("q2-btn",{class:"remove-dropdown-item",label:this.removeLabel,"hide-label":true,disabled:!!this.disabled,_role:"menuitem",onClick:this.onRemoveBtnClick,onKeyDown:this.onRemoveBtnKeydown,onFocus:this.onRemoveBtnFocus,"test-id":"removeDropdownItem"},e("q2-icon",{type:"close"})))}get hostElement(){return o(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};a.style=d;export{a as q2_dropdown_item};
+//# sourceMappingURL=p-75bb43b2.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2DropdownItemCss","Q2DropdownItemStyle0","Q2DropdownItem","this","handleQ2LocValue","locElement","hostElement","querySelector","loc","value","substitutions","onItemClick","event","stopImmediatePropagation","dispatchEvent","CustomEvent","detail","type","bubbles","onItemKeydown","includes","key","focusRemoveBtn","onItemFocus","stopPropagation","onRemoveBtnClick","onRemoveBtnKeydown","focusItem","onRemoveBtnFocus","componentWillLoad","handleAriaLabel","q2LocValue","ariaLabelObserver","innerLabel","label","textContent","trim","removeLabel","dropdownItemBtn","shadowRoot","removeBtn","onHostElementFocus","target","FocusEvent","render","separator","separatorDOM","itemDOM","h","class","role","disabled","_role","onClick","onKeyDown","onFocus","removable"],"sources":["src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(dropdown-item-separator-color),\n            var-prefixer(gray-11),\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n}\n\n.dropdown-item-wrapper {\n    display: flex;\n}\n\n.dropdown-item {\n    min-height: 44px;\n    flex: 1 1 100%;\n    padding: var-list(var-prefixer(dropdown-item-padding), 2px);\n}\n\n.dropdown-item-content {\n    --comp-default-content-padding: 12px var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(dropdown-item-content-padding), --comp-default-content-padding);\n    text-align: left;\n    background: var-list(\n        --tct-dropdown-item-background,\n        var-prefixer(dropdown-item-bg),\n        --tct-white,\n        --t-base,\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    transition: background-color\n        var-list(var-prefixer(dropdown-item-content-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n}\n\n:host(:not([disabled])) .dropdown-item-content:hover,\n:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content {\n    background: var-list(\n        --tct-dropdown-item-hover-background,\n        var-prefixer(dropdown-item-selected-bg),\n        var-prefixer(gray-14),\n        --tct-gray-l3,\n        --app-gray-l3,\n        --t-base,\n        #f2f2f2\n    );\n    color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n}\n\n.remove-dropdown-item {\n    flex: 0 0 44px;\n    margin: 2px;\n}\n","import { Component, ComponentInterface, Prop, State, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     *\n     * @info\n     * This will be used as the `aria-label` for this item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true }) removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true }) separator: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @State() q2LocValue: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /////// LIFECYCLE HOOKS //////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.q2LocValue = this.handleQ2LocValue();\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    //////// GETTERS ////////\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent.trim() || this.q2LocValue;\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.innerLabel || '']);\n    }\n\n    get dropdownItemBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n    }\n\n    get removeBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\n    }\n\n    //////// HELPERS /////////\n\n    handleQ2LocValue = (): string => {\n        const locElement = this.hostElement.querySelector('q2-loc');\n        return locElement ? loc(locElement.value, locElement.substitutions) : '';\n    };\n\n    ///////// Host Element Events //////\n    @Listen('focus')\n    onHostElementFocus() {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    ///////// Actions /////////\n    focusItem() {\n        this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'select',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (['ArrowRight', 'Right'].includes(event.key)) {\n            this.focusRemoveBtn();\n        }\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'remove',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (['ArrowLeft', 'Left'].includes(event.key)) {\n            this.focusItem();\n        }\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    //////// DOM ////////\n\n    render() {\n        if (!!this.separator) {\n            return this.separatorDOM();\n        }\n\n        return this.itemDOM();\n    }\n\n    separatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                role=\"separator\"\n                test-id=\"dropdownItemSeparator\"\n            />\n        );\n    }\n\n    itemDOM(): JSX.IntrinsicElements {\n        return (\n            <div class=\"dropdown-item-wrapper\">\n                <q2-btn\n                    class=\"dropdown-item\"\n                    label={this.innerLabel}\n                    hide-label\n                    disabled={!!this.disabled}\n                    _role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <div class=\"dropdown-item-content\">\n                        <slot />\n                    </div>\n                </q2-btn>\n                {!!this.removable && (\n                    <q2-btn\n                        class=\"remove-dropdown-item\"\n                        label={this.removeLabel}\n                        hide-label\n                        disabled={!!this.disabled}\n                        _role=\"menuitem\"\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </q2-btn>\n                )}\n            </div>\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAoB,25EAC1B,MAAAC,EAAeD,E,MCIFE,EAAc,M,yBAsEvBC,KAAAC,iBAAmB,KACf,MAAMC,EAAaF,KAAKG,YAAYC,cAAc,UAClD,OAAOF,EAAaG,EAAIH,EAAWI,MAAOJ,EAAWK,eAAiB,EAAE,EAoB5EP,KAAAQ,YAAeC,IACXA,EAAMC,2BACNV,KAAKG,YAAYQ,cACb,IAAIC,YAAY,QAAS,CACrBC,OAAQ,CACJC,KAAM,SACNR,MAAON,KAAKM,OAAS,IAEzBS,QAAS,OAEhB,EAGLf,KAAAgB,cAAiBP,IACb,GAAI,CAAC,aAAc,SAASQ,SAASR,EAAMS,KAAM,CAC7ClB,KAAKmB,gB,GAIbnB,KAAAoB,YAAeX,IACXA,EAAMY,iBAAiB,EAG3BrB,KAAAsB,iBAAoBb,IAChBA,EAAMC,2BAENV,KAAKG,YAAYQ,cACb,IAAIC,YAAY,QAAS,CACrBC,OAAQ,CACJC,KAAM,SACNR,MAAON,KAAKM,OAAS,IAEzBS,QAAS,OAEhB,EAGLf,KAAAuB,mBAAsBd,IAClB,GAAI,CAAC,YAAa,QAAQQ,SAASR,EAAMS,KAAM,CAC3ClB,KAAKwB,W,GAIbxB,KAAAyB,iBAAoBhB,IAChBA,EAAMY,iBAAiB,E,uKAlG3B,iBAAAK,GACIC,EAAgB3B,MAChBA,KAAK4B,WAAa5B,KAAKC,kB,CAM3B,iBAAA4B,GACIF,EAAgB3B,K,CAKpB,cAAI8B,GACA,OAAO9B,KAAK+B,OAAS/B,KAAKG,YAAY6B,YAAYC,QAAUjC,KAAK4B,U,CAGrE,eAAIM,GACA,OAAO7B,EAAI,qCAAsC,CAACL,KAAK8B,YAAc,I,CAGzE,mBAAIK,GACA,OAAOnC,KAAKG,YAAYiC,WAAWhC,cAAc,iB,CAGrD,aAAIiC,GACA,OAAOrC,KAAKG,YAAYiC,WAAWhC,cAAc,wB,CAYrD,kBAAAkC,GACI,GAAI7B,MAAM8B,SAAWvC,KAAKG,YAAa,CACnCH,KAAKwB,W,EAKb,SAAAA,GACIxB,KAAKmC,gBAAgBxB,cAAc,IAAI6B,WAAW,QAAS,CAAEzB,QAAS,Q,CAG1E,cAAAI,GACInB,KAAKqC,WAAarC,KAAKqC,UAAU1B,cAAc,IAAI6B,WAAW,QAAS,CAAEzB,QAAS,Q,CAoDtF,MAAA0B,GACI,KAAMzC,KAAK0C,UAAW,CAClB,OAAO1C,KAAK2C,c,CAGhB,OAAO3C,KAAK4C,S,CAGhB,YAAAD,GACI,OACIE,EAAA,OACIC,MAAM,qBACNC,KAAK,YAAW,UACR,yB,CAKpB,OAAAH,GACI,OACIC,EAAA,OAAKC,MAAM,yBACPD,EAAA,UACIC,MAAM,gBACNf,MAAO/B,KAAK8B,WAAU,kBAEtBkB,WAAYhD,KAAKgD,SACjBC,MAAM,WACNC,QAASlD,KAAKQ,YACd2C,UAAWnD,KAAKgB,cAChBoC,QAASpD,KAAKoB,YAAW,UACjB,gBAERyB,EAAA,OAAKC,MAAM,yBACPD,EAAA,iBAGL7C,KAAKqD,WACJR,EAAA,UACIC,MAAM,uBACNf,MAAO/B,KAAKkC,YAAW,kBAEvBc,WAAYhD,KAAKgD,SACjBC,MAAM,WACNC,QAASlD,KAAKsB,iBACd6B,UAAWnD,KAAKuB,mBAChB6B,QAASpD,KAAKyB,iBAAgB,UACtB,sBAERoB,EAAA,WAAS/B,KAAK,W"}

package/dist/q2-tecton-elements/p-79696bef.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as e,h as c,g as t}from"./p-a5f18e27.js";import{c as r,h as a,o as h,i,l}from"./p-84190698.js";const s='*{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{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);display:block;position:relative;padding:var(--comp-checkbox-padding);--comp-default-checkbox-margin:var(--tct-checkbox-margin-top, var(--t-checkbox-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-checkbox-margin-bottom, var(--t-checkbox-margin-bottom, var(--app-scale-5x, 25px)));margin:var(--tct-checkbox-margin, var(--comp-default-checkbox-margin))}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 46px));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));display:grid;grid-template-areas:"svg label" "svg description";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:"svg";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:"label svg" "description svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label;font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400))}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]:not([checked=false])) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}:host(:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host(:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host([description]:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):hover) .label-text{font-weight:var(--tct-checkbox-checked-hover-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}:host([description]:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):focus-within) .label-text{font-weight:var(--tct-checkbox-checked-focused-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);cursor:pointer;hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}:host([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host([has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-error-box-shadow)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-hover-box-shadow)}:host(:hover[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--comp-checkbox-focused-box-shadow)}:host(:focus-within[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error][type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{stroke:var(--tct-checkbox-checkmark-stroke-color, var(--comp-checkbox-checked-color))}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]:not([checked=false])) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]:not([checked=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}:host([has-error]) .toggle-track{fill:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]:not([checked=false])) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]:not([checked=false])) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:is(:not([checked]),[checked=false]):focus-within) .toggle-circle,:host(:is(:not([checked]),[checked=false]):hover) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host([has-error]) .toggle-circle,:host([has-error]:focus-within) .toggle-circle,:host([has-error]:hover) .toggle-circle{fill:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)))}.toggle-hover-circle{stroke-width:0}:host(:focus-within) .toggle-hover-circle,:host(:hover) .toggle-hover-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:is(:not([checked]),[checked=false]):focus-within) .toggle-hover-circle,:host(:is(:not([checked]),[checked=false]):hover) .toggle-hover-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([has-error]) .toggle-hover-circle,:host([has-error]:focus-within) .toggle-hover-circle,:host([has-error]:hover) .toggle-hover-circle{stroke:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)))}:host([checked]:not([checked=false])) .off,:host(:is(:not([checked]),[checked=false])) .on{opacity:0}';const k=s;const b=class{constructor(c){o(this,c);this.change=e(this,"change",7);this._id=`checkbox-${r()}`;this.onInputClick=o=>{o.stopPropagation();o.preventDefault();const e=this.disabled||this.readonly||this.slotReadonly;if(e)return;if(!(o.target instanceof HTMLInputElement))return;const{value:c,checked:t}=o.target;this.change.emit({value:c,checked:t});this.inputElement.focus()};this.alignment=undefined;this.checked=false;this.description=undefined;this.disabled=undefined;this.hasError=false;this.hideLabel=undefined;this.indeterminate=undefined;this.label=undefined;this.name=undefined;this.readonly=undefined;this.slotReadonly=undefined;this.type=undefined;this.value=undefined;this.groupDisabled=undefined;this.ariaLabel=undefined}componentWillLoad(){a(this)}componentDidLoad(){h(this.hostElement);this.hostElement.click=()=>this.inputElement.click()}defaultChangeHandler(o){setTimeout((()=>this.handleChangeEvent(o)),0)}delegateFocus(o){if(!i(o,this.hostElement))return;this.hostElement.shadowRoot.querySelector("input").focus()}ariaLabelObserver(){a(this)}handleChangeEvent(o){if(this.readonly||this.disabled||this.hostElement.onchange||o.defaultPrevented||o.target!==this.hostElement||!o.detail){return}this.checked=o.detail.checked}render(){const o=["label-text"];if(this.hideLabel)o.push("sr");return c("div",{key:"f71504e3c4a400cc2793d5db532637bb04989bb8",class:"container"},c("input",{key:"aa1fbc10ed45975184fa3b0e571c8d651fc548cc",ref:o=>this.inputElement=o,"aria-describedby":this.description?"description":undefined,"aria-invalid":`${this.hasError}`,checked:this.indeterminate||this.checked||false,class:"sr",disabled:!!this.disabled||!!this.groupDisabled,id:this._id,name:this.name||this._id,onClick:this.onInputClick,"test-id":"q2CheckboxInnerCheckBox",type:"checkbox",value:this.value}),c("label",{key:"57a9f3ad41317c6c1804179cd81caf11d18038a2",htmlFor:this._id,class:"label-control","test-id":"checkboxButton"},this.generateCheckboxSVG()),c("div",{key:"a36286a3e670e3de961b8a0191b4509caedbb78e",class:o.join(" ")},c("label",{key:"7e0894a98ccbb7f1101384f0d256160a70db8c36","test-id":"checkboxLabel",htmlFor:this._id},l(this.label),c("slot",{key:"cc3171e6df7743d3e80757267a336b6e2b99020d"}))),this.description&&c("div",{key:"cde56109f516026ee00ca00857897c5766cc0459",class:"description-text","test-id":"checkboxDescription",id:"description"},l(this.description)))}generateCheckboxSVG(){if(this.type==="favorite"){return c("q2-icon",{type:"star",class:"checkbox-icon"})}if(this.type==="toggle"){return this.generateToggleSVG()}return c("svg",{"aria-hidden":"true",width:"20",height:"20",viewBox:"0 0 20 20",class:"checkbox-icon",focusable:"false"},c("rect",{x:"1",y:"1",width:"18",height:"18",rx:"3"}),(this.checked||this.indeterminate)&&this.generateCheckBoxSVGFill())}generateCheckBoxSVGFill(){if(this.indeterminate){return c("line",{class:"checkbox-fill indeterminate-fill",x1:"4",y1:"10",x2:"16",y2:"10"})}return c("polyline",{class:"checkbox-fill checked-fill",points:"5 11 8.5 14.5 15 6"})}generateToggleSVG(){return c("div",{class:"toggle-svg"},c("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 46 14",class:"toggle-track","test-id":"toggleTrack"},c("rect",{width:"36",height:"14",rx:"7",x:"5"})),c("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 30 30",class:"toggle-indicator","test-id":"toggleIndicator"},c("circle",{class:"toggle-hover-circle",width:"20",height:"20",cx:"15",cy:"15",r:"10"}),c("circle",{class:"toggle-circle",width:"20",height:"20",cx:"15",cy:"15",r:"10"}),c("line",{class:"off checked-fill",x1:"12",y1:"18",x2:"18",y2:"12"}),c("line",{class:"off checked-fill",x1:"12",y1:"12",x2:"18",y2:"18"}),c("polyline",{class:"on checked-fill",points:"11,16 14,19 18,12 14,19"})))}get hostElement(){return t(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};b.style=k;export{b as q2_checkbox};
+//# sourceMappingURL=p-79696bef.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2CheckboxCss","Q2CheckboxStyle0","Q2Checkbox","this","_id","createGuid","onInputClick","event","stopPropagation","preventDefault","isNotInteractive","disabled","readonly","slotReadonly","target","HTMLInputElement","value","checked","change","emit","inputElement","focus","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","hostElement","click","defaultChangeHandler","setTimeout","handleChangeEvent","delegateFocus","isEventFromElement","shadowRoot","querySelector","ariaLabelObserver","onchange","defaultPrevented","detail","render","textLabelClasses","hideLabel","push","h","key","class","ref","el","description","undefined","hasError","indeterminate","groupDisabled","id","name","onClick","type","htmlFor","generateCheckboxSVG","join","loc","label","generateToggleSVG","width","height","viewBox","focusable","x","y","rx","generateCheckBoxSVGFill","x1","y1","x2","y2","points","cx","cy","r"],"sources":["src/components/q2-checkbox/q2-checkbox.scss?tag=q2-checkbox&encapsulation=shadow","src/components/q2-checkbox/q2-checkbox.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-checkbox-padding: #{var-list(\n            --tct-checkbox-padding,\n            unquote('#{var-list(var-prefixer(checkbox-vertical-padding), --tct-scale-2, --app-scale-2x, 10px)} 0')\n        )};\n    display: block;\n    position: relative;\n    padding: var(--comp-checkbox-padding);\n    --comp-default-checkbox-margin: #{var-list(var-prefixer(checkbox-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(checkbox-margin-bottom), --app-scale-5x, 25px)};\n    margin: var-list(--tct-checkbox-margin, --comp-default-checkbox-margin);\n}\n\n.container {\n    --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 20px)};\n    --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);\n    --comp-checkbox-default-row-gap: 0;\n    --comp-checkbox-default-gap: #{var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap)};\n    --comp-checkbox-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-checkbox-toggle-width: #{var-list(var-prefixer(checkbox-toggle-width), 46px)};\n    --comp-checkbox-gap: #{var-list(var-prefixer(checkbox-gap), --comp-checkbox-default-gap)};\n    --comp-checkbox-outer-stroke-color: #{var-list(\n            var-prefixer(checkbox-outer-stroke-color),\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-checkbox-outer-fill-color: #{var-list(\n            var-prefixer(checkbox-outer-fill-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        )};\n    --comp-checkbox-checked-color: #{var-list(\n            var-prefixer(checkbox-check-stroke-color),\n            --t-checkbox-fill,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    --comp-control-width: var(--comp-checkbox-size);\n    --comp-checkbox-error-color: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n\n    :host([type='favorite']) & {\n        --comp-checkbox-favorite-stroke-color: #{var-list(\n                var-prefixer(checkbox-favorite-stroke-color),\n                --t-a11y-gray-color-AA,\n                #949494\n            )};\n        --comp-checkbox-favorite-fill-color: #{var-list(var-prefixer(checkbox-favorite-fill-color), #db7d24)};\n    }\n\n    display: grid;\n    grid-template-areas:\n        'svg label'\n        'svg description';\n    align-items: center;\n    gap: var(--comp-checkbox-gap);\n    grid-template-columns: var(--comp-control-width) calc(\n            100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)\n        );\n\n    :host([hide-label]:not([hide-label='false'])) & {\n        grid-template-areas: 'svg';\n        grid-template-columns: var(--comp-control-width);\n    }\n\n    :host([type='toggle']) & {\n        --comp-control-width: var(--comp-checkbox-toggle-width);\n    }\n\n    :host([alignment='right']) &,\n    :host([type='toggle']:not([alignment])) & {\n        grid-template-areas:\n            'label svg'\n            'description svg';\n        grid-template-columns: calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(\n                --comp-control-width\n            );\n    }\n}\n\n.label-control {\n    align-items: center;\n    display: flex;\n}\n\n.label-text {\n    grid-area: label;\n    font-weight: var-list(var-prefixer(checkbox-label-font-weight), 400);\n\n    :host([description]) & {\n        font-weight: var-list(var-prefixer(checkbox-label-font-weight), 600);\n    }\n    :host([checked]:not([checked='false'])) & {\n        font-weight: var-list(var-prefixer(checkbox-checked-label-font-weight), 600);\n    }\n    :host(:hover) & {\n        font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n    }\n    :host(:focus-within) & {\n        font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n    }\n    :host([description]:hover) & {\n        font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n    }\n    :host([checked]:not([checked='false']):hover) & {\n        font-weight: var-list(\n            --tct-checkbox-checked-hover-label-font-weight,\n            var-prefixer(checkbox-checked-label-font-weight),\n            600\n        );\n    }\n    :host([description]:focus-within) & {\n        font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n    }\n    :host([checked]:not([checked='false']):focus-within) & {\n        font-weight: var-list(\n            --tct-checkbox-checked-focused-label-font-weight,\n            var-prefixer(checkbox-checked-label-font-weight),\n            600\n        );\n    }\n}\n\n.description-text {\n    grid-area: description;\n    font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n\n    :host(:hover) & {\n        font-weight: var-list(\n            --tct-checkbox-hover-description-font-weight,\n            var-prefixer(checkbox-description-font-weight),\n            400\n        );\n    }\n}\n\nlabel {\n    color: var-list(--tct-checkbox-label-color);\n    cursor: pointer;\n    hyphens: var-list(--tct-checkbox-label-hyphens, auto);\n    word-break: var-list(--tct-checkbox-label-word-break, break-word);\n    word-wrap: var-list(--tct-checkbox-label-word-wrap, break-word);\n}\n\n:host([disabled]:not([disabled='false'])),\n:host([group-disabled]) {\n    opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n\n    label {\n        cursor: not-allowed;\n    }\n}\n\n.checkbox-icon {\n    width: var(--comp-checkbox-size);\n    height: var(--comp-checkbox-size);\n    border-radius: var-list(\n        var-prefixer(checkbox-outer-border-radius),\n        --tct-border-radius-1,\n        --app-border-radius-1,\n        3px\n    );\n    stroke: var(--comp-checkbox-outer-stroke-color);\n    fill: var(--comp-checkbox-outer-fill-color);\n    stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n    flex-shrink: 0;\n\n    :host([checked]:not([checked='false']):not([type='favorite'])) & {\n        stroke: var-list(var-prefixer(checkbox-checked-outer-stroke-color), --comp-checkbox-outer-stroke-color);\n        fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-fill-color);\n    }\n\n    :host([has-error]:not([type='favorite'])) & {\n        stroke: var-list(--tct-checkbox-error-outer-stroke-color, --comp-checkbox-error-color);\n        fill: var-list(--tct-checkbox-error-outer-fill-color, --comp-checkbox-outer-fill-color);\n        box-shadow: var(--tct-checkbox-error-box-shadow);\n    }\n\n    :host(:hover:not([type='favorite'])) & {\n        stroke: var-list(--tct-checkbox-hover-outer-stroke-color, --comp-checkbox-outer-stroke-color);\n        fill: var-list(--tct-checkbox-hover-outer-fill-color, --comp-checkbox-outer-fill-color);\n        box-shadow: var(--tct-checkbox-hover-box-shadow);\n    }\n    :host(:hover[has-error]:not([type='favorite'])) & {\n        stroke: var-list(\n            --tct-checkbox-error-hover-outer-stroke-color,\n            --tct-checkbox-error-outer-stroke-color,\n            --comp-checkbox-error-color\n        );\n        fill: var-list(\n            --tct-checkbox-error-hover-outer-fill-color,\n            --tct-checkbox-error-outer-fill-color,\n            --comp-checkbox-outer-fill-color\n        );\n        box-shadow: var-list(\n            --tct-checkbox-error-hover-box-shadow,\n            --tct-checkbox-error-box-shadow,\n            --tct-checkbox-hover-box-shadow\n        );\n    }\n\n    :host(:focus-within:not([type='favorite'])) & {\n        --comp-checkbox-focused-box-shadow: #{var(--const-double-focus-ring),\n            var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n\n        stroke: var-list(var-prefixer(checkbox-focused-outer-stroke-color), --comp-checkbox-checked-color);\n        fill: var-list(--tct-checkbox-focused-outer-fill-color, --comp-checkbox-outer-fill-color);\n        box-shadow: var(--comp-checkbox-focused-box-shadow);\n    }\n    :host(:focus-within[has-error]:not([type='favorite'])) & {\n        stroke: var-list(\n            --tct-checkbox-error-focused-outer-stroke-color,\n            --tct-checkbox-error-outer-stroke-color,\n            --comp-checkbox-error-color\n        );\n        fill: var-list(\n            --tct-checkbox-error-focused-outer-fill-color,\n            --tct-checkbox-error-outer-fill-color,\n            --comp-checkbox-outer-fill-color\n        );\n        box-shadow: var-list(\n            --tct-checkbox-error-focused-box-shadow,\n            --tct-checkbox-error-box-shadow,\n            --comp-checkbox-focused-box-shadow\n        );\n    }\n\n    // Favorite\n    :host([type='favorite']) & {\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-stroke-width), 1)};\n        --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);\n        transition:\n            fill var(--comp-checkbox-tween),\n            color var(--comp-checkbox-tween),\n            stroke var(--comp-checkbox-tween);\n    }\n\n    :host(:hover[type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-hover-stroke-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    :host([type='favorite']:focus-within) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-focused-stroke-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    // Checked favorite\n    :host([checked]:not([checked='false'])[type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-checked-stroke-color,\n                --tct-checkbox-favorite-stroke-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        fill: var-list(--tct-checkbox-favorite-checked-fill-color, --comp-checkbox-favorite-fill-color);\n        transition:\n            fill var(--comp-checkbox-tween),\n            color var(--comp-checkbox-tween),\n            stroke var(--comp-checkbox-tween);\n    }\n\n    :host([checked]:not([checked='false'])[type='favorite']:hover) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-checked-hover-stroke-color,\n                --tct-checkbox-favorite-hover-stroke-color,\n                --comp-checkbox-favorite-stroke-color\n            )};\n        --tct-icon-fill-primary: #{var-list(\n                --tct-checkbox-favorite-checked-fill-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    :host([checked]:not([checked='false'])[type='favorite']:focus-within) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-checked-focused-stroke-color,\n                --tct-checkbox-favorite-focused-stroke-color,\n                --comp-checkbox-favorite-stroke-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    :host([has-error][type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n    }\n    :host([has-error][type='favorite'][checked]:not([checked='false'])) & {\n        --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n    }\n}\n\n.checkbox-fill {\n    stroke: var-list(--tct-checkbox-checkmark-stroke-color, --comp-checkbox-checked-color);\n}\n\n.checked-fill {\n    stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    :host([type='toggle']) & {\n        stroke: var-list(var-prefixer(checkbox-toggle-icon-stroke), --tct-white, --app-white, #ffffff);\n        transition: opacity var(--comp-checkbox-tween);\n    }\n    :host([type='toggle'][checked]:not([checked='false'])) & {\n        stroke: var-list(\n            var-prefixer(checkbox-toggle-checked-icon-stroke),\n            --t-checkbox-text,\n            --tct-white,\n            --app-white,\n            #ffffff\n        );\n    }\n}\n\n.indeterminate-fill {\n    stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg {\n    height: 30px;\n    width: var(--comp-checkbox-toggle-width);\n    position: relative;\n    text-align: initial;\n}\n\n.toggle-track,\n.toggle-indicator {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.toggle-track {\n    fill: var-list(\n        var-prefixer(checkbox-toggle-track-color),\n        var-prefixer(gray-11),\n        --tct-gray-l1,\n        --app-gray-l1,\n        #cccccc\n    );\n    height: 14px;\n    width: 46px;\n\n    :host([checked]:not([checked='false'])) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n        opacity: 0.5;\n    }\n    :host([has-error]) & {\n        fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n        opacity: 0.5;\n    }\n}\n\n.toggle-indicator {\n    transition: left var(--comp-checkbox-tween);\n    height: 30px;\n    width: 30px;\n    left: 0;\n    border-radius: 50%;\n\n    :host([checked]:not([checked='false'])) & {\n        left: 21px;\n    }\n}\n\n.toggle-circle {\n    fill: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n    :host([checked]:not([checked='false'])) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n    }\n\n    :host(:is(:not([checked]), [checked='false']):focus-within) &,\n    :host(:is(:not([checked]), [checked='false']):hover) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n    }\n    :host([has-error]) &,\n    :host([has-error]:focus-within) &,\n    :host([has-error]:hover) & {\n        fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    }\n}\n\n.toggle-hover-circle {\n    stroke-width: 0;\n\n    :host(:focus-within) &,\n    :host(:hover) & {\n        stroke: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n        stroke-width: 10px;\n        stroke-opacity: 0.5;\n    }\n\n    :host(:is(:not([checked]), [checked='false']):focus-within) &,\n    :host(:is(:not([checked]), [checked='false']):hover) & {\n        stroke: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n    }\n    :host([has-error]) &,\n    :host([has-error]:focus-within) &,\n    :host([has-error]:hover) & {\n        stroke: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    }\n}\n\n:host([checked]:not([checked='false'])) .off,\n:host(:is(:not([checked]), [checked='false'])) .on {\n    opacity: 0;\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n    /** Determine which side of the label the checkbox will render on. */\n    @Prop({ reflect: true }) alignment: string;\n\n    /** The state of the checkbox. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n    /**\n     * Populates a description that is displayed beneath the label.\n     * @localizable\n     */\n    @Prop({ reflect: true }) description: string;\n\n    /** Disables the checkbox and prevents interaction. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /**\n     * Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n     *\n     * When `true`, the \"indeterminate\" selection style is applied.\n     * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n     */\n    @Prop({ reflect: true }) indeterminate: boolean;\n\n    /**\n     * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n     * Yielded content will be adjacent to this text.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /** A static string used to establish a symbolic relationship between checkboxes. */\n    @Prop({ reflect: true }) name: string;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true }) readonly: boolean;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true }) slotReadonly: boolean;\n\n    /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n    @Prop({ reflect: true }) type: 'favorite' | 'toggle';\n\n    /** A static reference value for the checkbox. */\n    @Prop({ reflect: true }) value: string;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true }) groupDisabled: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n    }\n\n    //////// Host Element Events ////////\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        // We use setTimeout to give an opportunity to call preventDefault\n        setTimeout(() => this.handleChangeEvent(event), 0);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('input').focus();\n    }\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    ///// Event ////////\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string; checked: boolean }>;\n\n    ///// Actions ////////\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly || this.slotReadonly;\n        if (isNotInteractive) return;\n        if (!(event.target instanceof HTMLInputElement)) return;\n        const { value, checked } = event.target;\n\n        this.change.emit({\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    /////// View Methods ///////\n    render() {\n        const textLabelClasses = ['label-text'];\n        if (this.hideLabel) textLabelClasses.push('sr');\n        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.description ? 'description' : undefined}\n                    aria-invalid={`${this.hasError}`}\n                    checked={this.indeterminate || this.checked || false}\n                    class=\"sr\"\n                    disabled={!!this.disabled || !!this.groupDisabled}\n                    id={this._id}\n                    name={this.name || this._id}\n                    onClick={this.onInputClick}\n                    test-id=\"q2CheckboxInnerCheckBox\"\n                    type=\"checkbox\"\n                    value={this.value}\n                />\n                <label\n                    htmlFor={this._id}\n                    class=\"label-control\"\n                    test-id=\"checkboxButton\"\n                >\n                    {this.generateCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={this._id}\n                    >\n                        {loc(this.label)}\n                        <slot />\n                    </label>\n                </div>\n                {this.description && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    generateCheckboxSVG() {\n        if (this.type === 'favorite') {\n            return (\n                <q2-icon\n                    type=\"star\"\n                    class=\"checkbox-icon\"\n                />\n            );\n        }\n\n        if (this.type === 'toggle') {\n            return this.generateToggleSVG();\n        }\n\n        return (\n            <svg\n                aria-hidden=\"true\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                class=\"checkbox-icon\"\n                focusable=\"false\"\n            >\n                <rect\n                    x=\"1\"\n                    y=\"1\"\n                    width=\"18\"\n                    height=\"18\"\n                    rx=\"3\"\n                />\n                {(this.checked || this.indeterminate) && this.generateCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    generateCheckBoxSVGFill() {\n        if (this.indeterminate) {\n            return (\n                <line\n                    class=\"checkbox-fill indeterminate-fill\"\n                    x1=\"4\"\n                    y1=\"10\"\n                    x2=\"16\"\n                    y2=\"10\"\n                />\n            );\n        }\n        return (\n            <polyline\n                class=\"checkbox-fill checked-fill\"\n                points=\"5 11 8.5 14.5 15 6\"\n            />\n        );\n    }\n\n    generateToggleSVG() {\n        return (\n            <div class=\"toggle-svg\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 46 14\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <rect\n                        width=\"36\"\n                        height=\"14\"\n                        rx=\"7\"\n                        x=\"5\"\n                    />\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 30 30\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <circle\n                        class=\"toggle-hover-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <circle\n                        class=\"toggle-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"18\"\n                        x2=\"18\"\n                        y2=\"12\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"12\"\n                        x2=\"18\"\n                        y2=\"18\"\n                    />\n                    <polyline\n                        class=\"on checked-fill\"\n                        points=\"11,16 14,19 18,12 14,19\"\n                    />\n                </svg>\n            </div>\n        );\n    }\n}\n"],"mappings":"+GAAA,MAAMA,EAAgB,kvcACtB,MAAAC,EAAeD,E,MCGFE,EAAU,M,wDAmEnBC,KAAAC,IAAc,YAAYC,MA0C1BF,KAAAG,aAAgBC,IACZA,EAAMC,kBACND,EAAME,iBAEN,MAAMC,EAAmBP,KAAKQ,UAAYR,KAAKS,UAAYT,KAAKU,aAChE,GAAIH,EAAkB,OACtB,KAAMH,EAAMO,kBAAkBC,kBAAmB,OACjD,MAAMC,MAAEA,EAAKC,QAAEA,GAAYV,EAAMO,OAEjCX,KAAKe,OAAOC,KAAK,CACbH,QACAC,YAEJd,KAAKiB,aAAaC,OAAO,E,sCArH8B,M,iEAYd,M,kPAuD7C,iBAAAC,GACIC,EAAgBpB,K,CAGpB,gBAAAqB,GACIC,EAActB,KAAKuB,aACnBvB,KAAKuB,YAAYC,MAAQ,IAAMxB,KAAKiB,aAAaO,O,CAKrD,oBAAAC,CAAqBrB,GAEjBsB,YAAW,IAAM1B,KAAK2B,kBAAkBvB,IAAQ,E,CAIpD,aAAAwB,CAAcxB,GACV,IAAKyB,EAAmBzB,EAAOJ,KAAKuB,aAAc,OAClDvB,KAAKuB,YAAYO,WAAWC,cAAc,SAASb,O,CAMvD,iBAAAc,GACIZ,EAAgBpB,K,CA2BpB,iBAAA2B,CAAkBvB,GACd,GACIJ,KAAKS,UACLT,KAAKQ,UACLR,KAAKuB,YAAYU,UACjB7B,EAAM8B,kBACN9B,EAAMO,SAAWX,KAAKuB,cACrBnB,EAAM+B,OACT,CACE,M,CAEJnC,KAAKc,QAAUV,EAAM+B,OAAOrB,O,CAIhC,MAAAsB,GACI,MAAMC,EAAmB,CAAC,cAC1B,GAAIrC,KAAKsC,UAAWD,EAAiBE,KAAK,MAC1C,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACPF,EAAA,SAAAC,IAAA,2CACIE,IAAKC,GAAO5C,KAAKiB,aAAe2B,EAAG,mBACjB5C,KAAK6C,YAAc,cAAgBC,UAAS,eAChD,GAAG9C,KAAK+C,WACtBjC,QAASd,KAAKgD,eAAiBhD,KAAKc,SAAW,MAC/C4B,MAAM,KACNlC,WAAYR,KAAKQ,YAAcR,KAAKiD,cACpCC,GAAIlD,KAAKC,IACTkD,KAAMnD,KAAKmD,MAAQnD,KAAKC,IACxBmD,QAASpD,KAAKG,aAAY,UAClB,0BACRkD,KAAK,WACLxC,MAAOb,KAAKa,QAEhB2B,EAAA,SAAAC,IAAA,2CACIa,QAAStD,KAAKC,IACdyC,MAAM,gBAAe,UACb,kBAEP1C,KAAKuD,uBAEVf,EAAA,OAAAC,IAAA,2CAAKC,MAAOL,EAAiBmB,KAAK,MAC9BhB,EAAA,SAAAC,IAAA,qDACY,gBACRa,QAAStD,KAAKC,KAEbwD,EAAIzD,KAAK0D,OACVlB,EAAA,QAAAC,IAAA,+CAGPzC,KAAK6C,aACFL,EAAA,OAAAC,IAAA,2CACIC,MAAM,mBAAkB,UAChB,sBACRQ,GAAG,eAEFO,EAAIzD,KAAK6C,c,CAO9B,mBAAAU,GACI,GAAIvD,KAAKqD,OAAS,WAAY,CAC1B,OACIb,EAAA,WACIa,KAAK,OACLX,MAAM,iB,CAKlB,GAAI1C,KAAKqD,OAAS,SAAU,CACxB,OAAOrD,KAAK2D,mB,CAGhB,OACInB,EAAA,qBACgB,OACZoB,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRpB,MAAM,gBACNqB,UAAU,SAEVvB,EAAA,QACIwB,EAAE,IACFC,EAAE,IACFL,MAAM,KACNC,OAAO,KACPK,GAAG,OAELlE,KAAKc,SAAWd,KAAKgD,gBAAkBhD,KAAKmE,0B,CAK1D,uBAAAA,GACI,GAAInE,KAAKgD,cAAe,CACpB,OACIR,EAAA,QACIE,MAAM,mCACN0B,GAAG,IACHC,GAAG,KACHC,GAAG,KACHC,GAAG,M,CAIf,OACI/B,EAAA,YACIE,MAAM,6BACN8B,OAAO,sB,CAKnB,iBAAAb,GACI,OACInB,EAAA,OAAKE,MAAM,cACPF,EAAA,qBACgB,OACZuB,UAAU,QACVD,QAAQ,YACRpB,MAAM,eAAc,UACZ,eAERF,EAAA,QACIoB,MAAM,KACNC,OAAO,KACPK,GAAG,IACHF,EAAE,OAGVxB,EAAA,qBACgB,OACZuB,UAAU,QACVD,QAAQ,YACRpB,MAAM,mBAAkB,UAChB,mBAERF,EAAA,UACIE,MAAM,sBACNkB,MAAM,KACNC,OAAO,KACPY,GAAG,KACHC,GAAG,KACHC,EAAE,OAENnC,EAAA,UACIE,MAAM,gBACNkB,MAAM,KACNC,OAAO,KACPY,GAAG,KACHC,GAAG,KACHC,EAAE,OAENnC,EAAA,QACIE,MAAM,mBACN0B,GAAG,KACHC,GAAG,KACHC,GAAG,KACHC,GAAG,OAEP/B,EAAA,QACIE,MAAM,mBACN0B,GAAG,KACHC,GAAG,KACHC,GAAG,KACHC,GAAG,OAEP/B,EAAA,YACIE,MAAM,kBACN8B,OAAO,6B"}

package/dist/q2-tecton-elements/{p-1d824cdf.entry.js → p-828850c1.entry.js}

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

package/dist/q2-tecton-elements/{p-774975fa.entry.js → p-861e83de.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,g as a}from"./p-a5f18e27.js";import{r as n,o as s,i as r,n as o,l as c}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;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 3px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, 20px);font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, uppercase);letter-spacing:var(--tct-section-title-letter-spacing, 0.5px)}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";const h=d;const p=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.titleId="title";this.contentId="content";this.onHeaderClick=()=>{this.change.emit({expanded:!this.expanded})};this.onTransitionEnd=()=>{if(this.expanded){this.contentHeight=undefined}else{this.hideContent=true}setTimeout((()=>{this.clearResizeInterval()}),1e3)};this.onHeaderSlotChange=()=>{const t=!!this.hostElement.querySelector('[slot="q2-section-header"]');if(this.hasYieldedHeader!==t){this.hasYieldedHeader=!!t}};this.clearResizeInterval=()=>{this.resizerFn&&clearInterval(this.resizerFn)};this.addHeaderSlotListener=()=>{if(this.headerSlot){this.headerSlot.addEventListener("slotchange",this.onHeaderSlotChange);return}const t=new MutationObserver(this.onHeaderSlotChange);t.observe(this.headerSlotWrapper,{childList:true});this.headerSlotMutationObserver=t};this.removeHeaderSlotListener=()=>{if(this.headerSlot){this.headerSlot.removeEventListener("slotchange",this.onHeaderSlotChange);return}this.headerSlotMutationObserver.disconnect()};this.addContentSlotListener=()=>{if(this.contentSlot){this.contentSlot.addEventListener("slotchange",n);return}const t=new MutationObserver(n);t.observe(this.contentContainer,{childList:true,subtree:true});this.contentSlotMutationObserver=t};this.removeContentSlotListener=()=>{if(this.contentSlot){this.contentSlot.removeEventListener("slotchange",n);return}this.contentSlotMutationObserver.disconnect()};this.collapsible=undefined;this.expanded=undefined;this.label=undefined;this.noCollapseIcon=undefined;this.contentHeight=undefined;this.hideContent=false;this.hasYieldedHeader=false}componentWillLoad(){this.onHeaderSlotChange();const{collapsible:t,expanded:e}=this;this.contentHeight=t&&e?undefined:"0px";this.hideContent=!e}componentDidLoad(){this.addHeaderSlotListener();this.addContentSlotListener();s(this.hostElement)}disconnectedCallback(){this.removeHeaderSlotListener();this.removeContentSlotListener()}defaultChangeHandler(t){if(t.target===this.hostElement&&!this.hostElement.onchange&&!!t.detail){this.expanded=t.detail.expanded}}delegateFocus(t){if(!r(t,this.hostElement))return;this.contentContainer.focus()}async expandedObserver(t){this.clearResizeInterval();this.resizerFn=setInterval(n,5);if(t){this.expandSection()}else{this.collapseSection()}}async collapseSection(){this.contentHeight=this.contentContainerHeight;await o((()=>{this.contentHeight=this.currentHeight}))}async expandSection(){this.hideContent=false;await o((()=>{this.contentHeight=this.currentHeight}))}collapsibleObserver(){this.contentHeight=this.currentHeight}get currentHeight(){const{collapsible:t,expanded:e}=this;if(!t){return null}else if(e){return this.contentContainerHeight}else{return"0"}}get contentContainerHeight(){return`${this.contentContainer.offsetHeight||0}px`}render(){const t=this.label||this.hasYieldedHeader;const e=["content-wrapper"];const{collapsible:a,hideContent:n,contentHeight:s}=this;if(a){if(n)e.push("is-closed");else if(s)e.push("is-transitioning")}const r=!this.hasYieldedHeader&&!!this.label;return i("section",{key:"4cae0e6f0057c318e45274cdabe74878bad2a995",class:"wrapper"},i("header",{key:"bb4439e069cb85a3950cabfcc08d220415229082",class:t?"has-header":""},i("div",{key:"036bd23de5da7bd0c45a31521fdeffa240e398b0",class:"header-content",id:this.titleId,onClick:this.collapsible&&this.onHeaderClick},r&&i("h2",{key:"2742ab3ad5654864b0951637e0b5a5a5028ea34d",class:"title"},c(this.label)),i("div",{key:"b772b2028190079db060d28ebaab67723b030462",ref:t=>this.headerSlotWrapper=t,class:"header-slot-wrapper"},i("slot",{key:"986a404b7a5297af31d4122ffe4daa4697b90203",ref:t=>this.headerSlot=t,name:"q2-section-header"}))),this.collapsible&&!this.noCollapseIcon&&i("q2-btn",{key:"678f61529c25ceb257cf7d26abdd46448b0f0d96",label:c(this.label||"tecton.element.section.defaultToggleLabel"),ariaExpanded:`${!!this.expanded}`,ariaControls:this.contentId,"test-id":"toggleButton","hide-label":true,onClick:this.onHeaderClick},i("q2-icon",{key:"5494baf730dd97d54e1e50b6366dbaea3676ce16",type:"chevron-up"}))),i("div",{key:"33cdc24262ad444f8d61cd557371963e5ebf4ce0",class:e.join(" "),id:this.contentId,"aria-labelledby":this.titleId,role:"region",onTransitionEnd:this.onTransitionEnd,style:this.collapsible&&{height:this.contentHeight}},i("div",{key:"f30463473a96a1e5fe8dc4f5951c147a1847d2f4",ref:t=>this.contentContainer=t,class:"content",tabindex:"-1"},i("slot",{key:"e41200b2ed13a0e280c223020c7b7ada8d3b6056",ref:t=>this.contentSlot=t}))))}get hostElement(){return a(this)}static get watchers(){return{expanded:["expandedObserver"],collapsible:["collapsibleObserver"]}}};p.style=h;export{p as q2_section};
-//# sourceMappingURL=p-774975fa.entry.js.map
+import{r as t,c as e,h as i,g as a}from"./p-a5f18e27.js";import{r as n,o as s,i as r,n as o,l as d}from"./p-84190698.js";const c="*{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;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 3px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, 20px);font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, uppercase);letter-spacing:var(--tct-section-title-letter-spacing, 0.5px)}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";const h=c;const p=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.titleId="title";this.contentId="content";this.onHeaderClick=()=>{this.change.emit({expanded:!this.expanded})};this.onTransitionEnd=()=>{if(this.expanded){this.contentHeight=undefined}else{this.hideContent=true}setTimeout((()=>{this.clearResizeInterval()}),1e3)};this.onHeaderSlotChange=()=>{const t=!!this.hostElement.querySelector('[slot="q2-section-header"]');if(this.hasYieldedHeader!==t){this.hasYieldedHeader=!!t}};this.clearResizeInterval=()=>{this.resizerFn&&clearInterval(this.resizerFn)};this.addHeaderSlotListener=()=>{if(this.headerSlot){this.headerSlot.addEventListener("slotchange",this.onHeaderSlotChange);return}const t=new MutationObserver(this.onHeaderSlotChange);t.observe(this.headerSlotWrapper,{childList:true});this.headerSlotMutationObserver=t};this.removeHeaderSlotListener=()=>{if(this.headerSlot){this.headerSlot.removeEventListener("slotchange",this.onHeaderSlotChange);return}this.headerSlotMutationObserver.disconnect()};this.addContentSlotListener=()=>{if(this.contentSlot){this.contentSlot.addEventListener("slotchange",n);return}const t=new MutationObserver(n);t.observe(this.contentContainer,{childList:true,subtree:true});this.contentSlotMutationObserver=t};this.removeContentSlotListener=()=>{if(this.contentSlot){this.contentSlot.removeEventListener("slotchange",n);return}this.contentSlotMutationObserver.disconnect()};this.collapsible=undefined;this.expanded=undefined;this.label=undefined;this.noCollapseIcon=undefined;this.contentHeight=undefined;this.hideContent=false;this.hasYieldedHeader=false}componentWillLoad(){this.onHeaderSlotChange();const{collapsible:t,expanded:e}=this;this.contentHeight=t&&e?undefined:"0px";this.hideContent=!e}componentDidLoad(){this.addHeaderSlotListener();this.addContentSlotListener();s(this.hostElement)}disconnectedCallback(){this.removeHeaderSlotListener();this.removeContentSlotListener()}defaultChangeHandler(t){if(t.target===this.hostElement&&!this.hostElement.onchange&&!!t.detail){this.expanded=t.detail.expanded}}delegateFocus(t){if(!r(t,this.hostElement))return;this.contentContainer.focus()}async expandedObserver(t){this.clearResizeInterval();this.resizerFn=setInterval(n,5);if(t){this.expandSection()}else{this.collapseSection()}}async collapseSection(){this.contentHeight=this.contentContainerHeight;await o((()=>{this.contentHeight=this.currentHeight}))}async expandSection(){this.hideContent=false;await o((()=>{this.contentHeight=this.currentHeight}))}collapsibleObserver(){this.contentHeight=this.currentHeight}get currentHeight(){const{collapsible:t,expanded:e}=this;if(!t){return null}else if(e){return this.contentContainerHeight}else{return"0"}}get contentContainerHeight(){return`${this.contentContainer.offsetHeight||0}px`}render(){const t=this.label||this.hasYieldedHeader;const e=["content-wrapper"];const{collapsible:a,hideContent:n,contentHeight:s}=this;if(a){if(n)e.push("is-closed");else if(s)e.push("is-transitioning")}const r=!this.hasYieldedHeader&&!!this.label;return i("section",{key:"6e12bfbe36ad6c268079c32b6c39a7618ff12b1d",class:"wrapper"},i("header",{key:"91f7c8a2655170d49b7729efc60a77eb28ad1d45",class:t?"has-header":""},i("div",{key:"9edb887a2a8730794793674f46542cbd630e2a89",class:"header-content",id:this.titleId,onClick:this.collapsible&&this.onHeaderClick},r&&i("h2",{key:"a6cb6d0c520d66b5bb35ab726c0e84bd55e0d25a",class:"title"},d(this.label)),i("div",{key:"1b01d8e62560f2a0cdf0627aa512a516edd48e62",ref:t=>this.headerSlotWrapper=t,class:"header-slot-wrapper"},i("slot",{key:"fbcddb1a7282460a939785da9fdaf2c59b56668e",ref:t=>this.headerSlot=t,name:"q2-section-header"}))),this.collapsible&&!this.noCollapseIcon&&i("q2-btn",{key:"172089a013090bd461f66847e636aab0a3c477cd",label:d(this.label||"tecton.element.section.defaultToggleLabel"),ariaExpanded:`${!!this.expanded}`,ariaControls:this.contentId,"test-id":"toggleButton","hide-label":true,onClick:this.onHeaderClick},i("q2-icon",{key:"40e45aefe27e0ee9e1fe15de552b89c298b6a609",type:"chevron-up"}))),i("div",{key:"f1673a5d32dd9bb781faae906d524091a2aa04a9",class:e.join(" "),id:this.contentId,"aria-labelledby":this.titleId,role:"region",onTransitionEnd:this.onTransitionEnd,style:this.collapsible&&{height:this.contentHeight}},i("div",{key:"dbd1ceb839713c3be27407ebe6ba2f9a6a104fbb",ref:t=>this.contentContainer=t,class:"content",tabindex:"-1"},i("slot",{key:"9692d272736fb8bd861f9e13e398af42489dc403",ref:t=>this.contentSlot=t}))))}get hostElement(){return a(this)}static get watchers(){return{expanded:["expandedObserver"],collapsible:["collapsibleObserver"]}}};p.style=h;export{p as q2_section};
+//# sourceMappingURL=p-861e83de.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2SectionCss","Q2SectionStyle0","Q2Section","this","titleId","contentId","onHeaderClick","change","emit","expanded","onTransitionEnd","contentHeight","undefined","hideContent","setTimeout","clearResizeInterval","onHeaderSlotChange","hasSlotContent","hostElement","querySelector","hasYieldedHeader","resizerFn","clearInterval","addHeaderSlotListener","headerSlot","addEventListener","observer","MutationObserver","observe","headerSlotWrapper","childList","headerSlotMutationObserver","removeHeaderSlotListener","removeEventListener","disconnect","addContentSlotListener","contentSlot","resizeIframe","contentContainer","subtree","contentSlotMutationObserver","removeContentSlotListener","componentWillLoad","collapsible","componentDidLoad","overrideFocus","disconnectedCallback","defaultChangeHandler","event","target","onchange","detail","delegateFocus","isEventFromElement","focus","expandedObserver","setInterval","expandSection","collapseSection","contentContainerHeight","nextPaint","currentHeight","collapsibleObserver","offsetHeight","render","hasHeader","label","wrapperClasses","push","showDefaultHeader","h","key","class","id","onClick","loc","ref","el","name","noCollapseIcon","ariaExpanded","ariaControls","type","join","role","style","height","tabindex"],"sources":["src/components/q2-section/q2-section.scss?tag=q2-section&encapsulation=shadow","src/components/q2-section/q2-section.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions.scss';\n\n:host {\n    display: block;\n    background: var-list(\n        --tct-section-background,\n        var-prefixer(section-background-color),\n        var-prefixer(section-bg),\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(section-font-color), --t-text, #4d4d4d);\n    border-radius: var-list(var-prefixer(section-border-radius), --app-border-radius-1, 3px);\n    margin: var-list(var-prefixer(section-margin), --app-scale-3x, 15px);\n    border-width: var-list(--tct-section-border-width, 0);\n    border-style: var-list(--tct-section-border-style, solid);\n    border-color: var-list(--tct-section-border-color, none);\n\n    @media screen and (max-width: 767px) {\n        --comp-default-margin: var(--app-scale-3x, 15px) 0;\n        margin: var-list(var-prefixer(section-margin), --comp-default-margin);\n    }\n\n    @media print {\n        --comp-default-print-margin: var(--app-scale-3x, 15px) 0;\n        margin: var-list(--tct-section-print-margin, --comp-default-print-margin);\n    }\n}\n\n.wrapper {\n    --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-1, unquote('0.2s ease'))};\n    --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;\n    display: block;\n    padding: var-list(var-prefixer(section-wrapper-padding), --comp-default-wrapper-padding);\n\n    &:hover {\n        box-shadow: var-list(var-prefixer(section-wrapper-hover-box-shadow), inherit);\n    }\n\n    :host([collapsible]) & {\n        --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-2, unquote('0.4s ease'))};\n    }\n}\n\nheader {\n    --comp-default-header-padding: 0 var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(section-header-padding), --comp-default-header-padding);\n    display: flex;\n\n    @media print {\n        padding: var-list(--tct-section-header-print-padding, 0);\n    }\n\n    &.has-header {\n        min-height: var-list(var-prefixer(section-header-min-height), 44px);\n    }\n}\n\n.header-content {\n    flex: 1 1 100%;\n    min-width: 0;\n    align-self: center;\n\n    :host([collapsible]) & {\n        cursor: pointer;\n    }\n}\n\n.title {\n    margin: var-list(--tct-section-title-margin, 0);\n    font-size: var-list(--tct-section-title-font-size, 20px);\n    font-weight: var-list(--tct-section-title-font-weight, 600);\n    text-transform: var-list(--tct-section-title-text-transform, uppercase);\n    letter-spacing: var-list(--tct-section-title-letter-spacing, 0.5px);\n}\n\nq2-icon {\n    transition: transform var(--comp-tween);\n\n    :host(:not([expanded])) &,\n    :host([expanded='false']) & {\n        transform: rotate(180deg);\n    }\n}\n\n.content-wrapper {\n    height: auto;\n\n    &.is-closed {\n        display: none;\n        overflow: hidden;\n    }\n\n    &.is-transitioning {\n        overflow: hidden;\n    }\n\n    :host([collapsible]) & {\n        transition: height var(--comp-tween);\n    }\n}\n\n.content {\n    --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(section-content-padding), --comp-default-content-padding);\n\n    @media print {\n        padding: var-list(--tct-section-content-print-padding, 0);\n    }\n\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([collapsible]) :host(:not([expanded])) & {\n        visibility: hidden;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Listen,\n    State,\n    Watch,\n    h,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\n\n@Component({ tag: 'q2-section', shadow: true, styleUrl: 'q2-section.scss' })\nexport class Q2Section implements ComponentInterface {\n    /** Determines if the section is collapsible. */\n    @Prop({ reflect: true }) collapsible: boolean;\n\n    /** Indicates if the `q2-section` is in an expanded state or not. */\n    @Prop({ reflect: true, mutable: true }) expanded: boolean;\n\n    /**\n     * The text to display above the `q2-section`. Renders as an `<h2>` element.\n     *\n     * It is also used to provided an `aria-label` for the toggle button when the component is collapsible.\n     *\n     * @warning\n     * If you are providing a custom header, setting this property is still strongly encouraged for the purposes of\n     * accessibility.\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /** Determines if the collapse chevron icon should show in the `q2-section` header. */\n    @Prop({ reflect: true }) noCollapseIcon: boolean;\n\n    @Element() hostElement: HTMLElement;\n    @State() contentHeight: string;\n    @State() hideContent: boolean = false;\n    @State() hasYieldedHeader: boolean = false;\n\n    titleId: string = 'title';\n    contentId: string = 'content';\n    resizerFn: NodeJS.Timeout | undefined;\n    headerSlotMutationObserver: MutationObserver;\n    contentSlotMutationObserver: MutationObserver;\n    contentContainer: HTMLDivElement;\n    headerSlotWrapper: HTMLDivElement;\n    headerSlot: HTMLSlotElement;\n    contentSlot: HTMLSlotElement;\n\n    componentWillLoad() {\n        this.onHeaderSlotChange();\n        const { collapsible, expanded } = this;\n        this.contentHeight = collapsible && expanded ? undefined : '0px';\n        this.hideContent = !expanded;\n    }\n\n    componentDidLoad() {\n        this.addHeaderSlotListener();\n        this.addContentSlotListener();\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.removeHeaderSlotListener();\n        this.removeContentSlotListener();\n    }\n\n    /// Listeners ///\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n            this.expanded = event.detail.expanded;\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.contentContainer.focus();\n    }\n\n    /// Watchers ///\n    @Watch('expanded')\n    async expandedObserver(expanded: boolean) {\n        this.clearResizeInterval();\n        this.resizerFn = setInterval(resizeIframe, 5);\n\n        if (expanded) {\n            this.expandSection();\n        } else {\n            this.collapseSection();\n        }\n    }\n\n    async collapseSection() {\n        this.contentHeight = this.contentContainerHeight;\n        await nextPaint(() => {\n            this.contentHeight = this.currentHeight;\n        });\n    }\n\n    async expandSection() {\n        this.hideContent = false;\n        await nextPaint(() => {\n            this.contentHeight = this.currentHeight;\n        });\n    }\n\n    @Watch('collapsible')\n    collapsibleObserver() {\n        this.contentHeight = this.currentHeight;\n    }\n\n    /// Events ///\n    /**\n     * Emitted when the section is expanded or collapsed.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ expanded: boolean }>;\n\n    /// Event Handlers ///\n    onHeaderClick = () => {\n        this.change.emit({\n            expanded: !this.expanded,\n        });\n    };\n\n    onTransitionEnd = () => {\n        if (this.expanded) {\n            this.contentHeight = undefined;\n        } else {\n            this.hideContent = true;\n        }\n\n        setTimeout(() => {\n            // This gives enough time for all values to get passed over\n            // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n            // Will revisit in TCT-599\n            this.clearResizeInterval();\n        }, 1000);\n    };\n\n    onHeaderSlotChange = () => {\n        const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n        if (this.hasYieldedHeader !== hasSlotContent) {\n            this.hasYieldedHeader = !!hasSlotContent;\n        }\n    };\n\n    /// Getters ///\n    get currentHeight() {\n        const { collapsible, expanded } = this;\n        if (!collapsible) {\n            return null;\n        } else if (expanded) {\n            return this.contentContainerHeight;\n        } else {\n            return '0';\n        }\n    }\n\n    get contentContainerHeight() {\n        return `${this.contentContainer.offsetHeight || 0}px`;\n    }\n\n    /// Helpers ///\n    clearResizeInterval = () => {\n        this.resizerFn && clearInterval(this.resizerFn);\n    };\n\n    addHeaderSlotListener = () => {\n        if (this.headerSlot) {\n            this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n            return;\n        }\n\n        const observer = new MutationObserver(this.onHeaderSlotChange);\n        observer.observe(this.headerSlotWrapper, { childList: true });\n        this.headerSlotMutationObserver = observer;\n    };\n\n    removeHeaderSlotListener = () => {\n        if (this.headerSlot) {\n            this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n            return;\n        }\n\n        this.headerSlotMutationObserver.disconnect();\n    };\n\n    addContentSlotListener = () => {\n        if (this.contentSlot) {\n            this.contentSlot.addEventListener('slotchange', resizeIframe);\n            return;\n        }\n\n        const observer = new MutationObserver(resizeIframe);\n        observer.observe(this.contentContainer, { childList: true, subtree: true });\n        this.contentSlotMutationObserver = observer;\n    };\n\n    removeContentSlotListener = () => {\n        if (this.contentSlot) {\n            this.contentSlot.removeEventListener('slotchange', resizeIframe);\n            return;\n        }\n        this.contentSlotMutationObserver.disconnect();\n    };\n\n    render() {\n        const hasHeader = this.label || this.hasYieldedHeader;\n        const wrapperClasses = ['content-wrapper'];\n        const { collapsible, hideContent, contentHeight } = this;\n        if (collapsible) {\n            if (hideContent) wrapperClasses.push('is-closed');\n            else if (contentHeight) wrapperClasses.push('is-transitioning');\n        }\n\n        const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n        return (\n            <section class=\"wrapper\">\n                <header class={hasHeader ? 'has-header' : ''}>\n                    <div\n                        class=\"header-content\"\n                        id={this.titleId}\n                        onClick={this.collapsible && this.onHeaderClick}\n                    >\n                        {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n                        <div\n                            ref={el => (this.headerSlotWrapper = el)}\n                            class=\"header-slot-wrapper\"\n                        >\n                            <slot\n                                ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n                                name=\"q2-section-header\"\n                            />\n                        </div>\n                    </div>\n                    {this.collapsible && !this.noCollapseIcon && (\n                        <q2-btn\n                            label={loc(this.label || 'tecton.element.section.defaultToggleLabel')}\n                            ariaExpanded={`${!!this.expanded}`}\n                            ariaControls={this.contentId}\n                            test-id=\"toggleButton\"\n                            hide-label\n                            onClick={this.onHeaderClick}\n                        >\n                            <q2-icon type=\"chevron-up\" />\n                        </q2-btn>\n                    )}\n                </header>\n                <div\n                    class={wrapperClasses.join(' ')}\n                    id={this.contentId}\n                    aria-labelledby={this.titleId}\n                    role=\"region\"\n                    onTransitionEnd={this.onTransitionEnd}\n                    style={\n                        this.collapsible && {\n                            height: this.contentHeight,\n                        }\n                    }\n                >\n                    <div\n                        ref={el => (this.contentContainer = el)}\n                        class=\"content\"\n                        tabindex=\"-1\"\n                    >\n                        <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n                    </div>\n                </div>\n            </section>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-8a8d51f1.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,F as a,g as o}from"./p-a5f18e27.js";import{c as r,o as n,i as s,e 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{--comp-default-radio-group-margin:var(--tct-radio-group-margin-top, var(--t-radio-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-radio-group-margin-bottom, var(--t-radio-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-radio-group-margin, var(--comp-default-radio-group-margin))}fieldset{padding:0;margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";gap:var(--app-scale-1x, 5px)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px))));color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-0x, 0px)));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px))}:host([has-error]) .options-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .options-container{border-color:transparent}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content:inherit}';const p=l;const c=class{constructor(e){t(this,e);this.change=i(this,"change",7);this._id=`radio-group-${r()}`;this.onMutationObserved=()=>{this.valueUpdated(this.value);this.nameUpdated();this.disabledUpdated();this.readonlyUpdated();this.tileLayoutUpdated(this.tileLayout)};this.onInnerRadioChange=t=>{t.stopImmediatePropagation();if(this.readonly)return;this.change.emit({value:t.detail.value})};this.checkedRadioExists=()=>{const t=this.radioElements.find((t=>t.checked===true))||undefined;if(!this.value&&!!t){this.value=t.value}else if(!this.value&&!t){if(this.radioElements.length)this.radioElements[0].tabIndex=0}};this.disabled=false;this.hasError=false;this.hideLabel=undefined;this.label=undefined;this.name=undefined;this.optional=undefined;this.readonly=undefined;this.tileAlignment="center";this.tileLayout=undefined;this.value=undefined;this.tilelayout=undefined}get inputId(){return this._id}get radioElements(){return Array.from(this.hostElement.querySelectorAll("q2-radio"))}componentWillLoad(){this.checkedRadioExists();this.onMutationObserved();this.handleDeprecatedTilelayout(this.tilelayout)}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true});this.mutationObserver=t;n(this.hostElement);this.checkedRadioExists()}valueUpdated(t){this.radioElements.forEach((i=>{i.checked=t===i.value;if(!i.checked){i.removeAttribute("checked");i.tabIndex=-1}else if(i.checked){i.tabIndex=0}}))}nameUpdated(){this.radioElements.forEach((t=>{t.name=this.name||this._id}))}disabledUpdated(){this.radioElements.forEach((t=>{t.groupDisabled=this.disabled}))}readonlyUpdated(){const t=this.readonly;this.radioElements.forEach((i=>i.groupReadonly=t))}handleDeprecatedTilelayout(t){if(typeof t!=="boolean")return;this.tileLayout=t;this.tilelayout=undefined}tileLayoutUpdated(t){this.radioElements.forEach((i=>{i.groupTileLayout=t}))}setValue(t){this.radioElements.forEach((i=>{if(t!==i.value)return;i.click()}))}onHostElementChange(t){if(t.target===this.hostElement){if(!this.hostElement.onchange){this.value=t.detail.value}}}delegateFocus(t){if(!s(t,this.hostElement))return;const i=this.hostElement.querySelector("q2-radio[checked]")||this.hostElement.querySelector("q2-radio");i===null||i===void 0?void 0:i.dispatchEvent(new FocusEvent("focus"))}keydownHandler(t){const i=t.target.getAttribute("value")||this.value;let e=this.radioElements.findIndex((e=>e===t.target||e.getAttribute("value")===i));let a=0;switch(t.key){case"ArrowLeft":case"ArrowUp":a=-1;break;case"ArrowRight":case"ArrowDown":a=1;break}if(e===-1||a===0){return}e+=a;e=a<0?Math.max(0,e):Math.min(this.radioElements.length-1,e);t.preventDefault();if(!this.readonly){this.value=this.radioElements[e].value}this.radioElements[e].dispatchEvent(new FocusEvent("focus"))}render(){const t=this.label||this.optional||this.readonly;const{hasError:i}=this;const o=t||i;return e(a,{key:"5fc0ba8dc6df9631a891e6997e520e663671dbf8"},o&&e("div",{key:"d65d48917b4dfa90b498467baf1b0d546f57df1b",class:"label-row"},t&&e("div",{key:"43e5db86c270d7e0822c1683d1eca97cb64e72c2",class:"group-legend"},d(this)),i&&e("q2-icon",{key:"f57ca3a0da21160ac81d00cac3c85a069fd3d9e5",type:"error","test-id":"iconError"})),e("fieldset",{key:"e85a89714c71b43670d392ba311d436a4c73038b",onChange:this.onInnerRadioChange,"aria-invalid":`${this.hasError}`},t&&e("legend",{key:"701af7a401c2871f9cbc472ffa27edac8b3e109e",class:"sr"},d(this)),this.inputDom()))}inputDom(){if(this.tileLayout){const{tileAlignment:t}=this;const i=["left","center","right"].includes(t)?t:"center";return e("div",{class:`tile-container ${i}`},e("div",{class:"options-container"},e("slot",null)))}else{return e("div",{class:"options-container"},e("slot",null))}}get hostElement(){return o(this)}static get watchers(){return{value:["valueUpdated"],name:["nameUpdated"],disabled:["disabledUpdated"],readonly:["readonlyUpdated"],tilelayout:["handleDeprecatedTilelayout"],tileLayout:["tileLayoutUpdated"]}}};c.style=p;export{c as q2_radio_group};
+//# sourceMappingURL=p-8a8d51f1.entry.js.map