q2-tecton-elements 1.37.0 → 1.38.0

package/dist/q2-tecton-elements/p-470582f2.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as e,h as c,g as t}from"./p-277dc8cd.js";import{c as r,h,o as i,i as a,l}from"./p-75ad4639.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)}.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, #c30000));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]) .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]: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]: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([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][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][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][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]) .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]) .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]) .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, #c30000)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]) .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]) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:focus-within) .toggle-circle,:host(:hover) .toggle-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(:not([checked]):focus-within) .toggle-circle,:host(:not([checked]):hover) .toggle-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-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, #c30000)));stroke:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000)))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}';const k=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;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.checked=false;this.disabled=undefined;this.hasError=false;this.hideLabel=undefined;this.indeterminate=undefined;this.label=undefined;this.name=undefined;this.readonly=undefined;this.type=undefined;this.value=undefined;this.groupDisabled=undefined;this.alignment=undefined;this.description=undefined;this.ariaLabel=undefined}componentWillLoad(){h(this)}componentDidLoad(){i(this.hostElement);this.hostElement.click=()=>this.inputElement.click()}defaultChangeHandler(o){setTimeout((()=>this.handleChangeEvent(o)),0)}delegateFocus(o){if(!a(o,this.hostElement))return;this.hostElement.shadowRoot.querySelector("input").focus()}ariaLabelObserver(){h(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",{class:"container"},c("input",{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",{htmlFor:this._id,class:"label-control","test-id":"checkboxButton"},this.generateCheckboxSVG()),c("div",{class:o.join(" ")},c("label",{"test-id":"checkboxLabel",htmlFor:this._id},l(this.label),c("slot",null))),this.description&&c("div",{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-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"]}}};k.style=s;export{k as q2_checkbox};
+//# sourceMappingURL=p-470582f2.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","Q2Checkbox","this","_id","createGuid","onInputClick","event","stopPropagation","preventDefault","isNotInteractive","disabled","readonly","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","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/styles.scss?tag=q2-checkbox&encapsulation=shadow","./src/components/q2-checkbox/index.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}\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, #c30000)};\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]) & {\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]: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]: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([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: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), 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][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: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween);\n    }\n\n    :host([checked][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][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]) & {\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]) & {\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]) & {\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, #c30000);\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]) & {\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]) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n    }\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(:not([checked]):focus-within) &,\n    :host(:not([checked]):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        fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #c30000);\n        stroke: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #c30000);\n    }\n}\n\n:host([checked]) .off,\n:host(:not([checked])) .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({\n    tag: 'q2-checkbox',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Checkbox implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) hasError: boolean = false;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) indeterminate: boolean;\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop({ reflect: true }) type: 'favorite' | 'toggle';\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    @Prop({ reflect: true }) alignment: string;\n    @Prop({ reflect: true }) description: string;\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    @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;\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-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":"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"}

package/dist/q2-tecton-elements/p-53bd1be9.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as n,h as o,g as e}from"./p-277dc8cd.js";import{l as i,o as r}from"./p-75ad4639.js";const a="*{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}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";const s=class{constructor(o){t(this,o);this.viewChange=n(this,"viewChange",7);this.toggleChange=n(this,"toggleChange",7);this.scheduledAfterRender=[];this.monthGrid=[[0,1,2],[3,4,5],[6,7,8],[9,10,11]];this.months=["January","February","March","April","May","June","July","August","September","October","November","December"].map((t=>({label:i(`tecton.element.calendar.months.${t}`),abbr:i(`tecton.element.calendar.months.abbr.${t}`)})));this.onMonthSelection=t=>{var n,o;const e=t.target.closest(".month-button");if((n=e===null||e===void 0?void 0:e.dataset)===null||n===void 0?void 0:n.index){this.selectMonth(Number((o=e===null||e===void 0?void 0:e.dataset)===null||o===void 0?void 0:o.index))}};this.onMonthKeydown=t=>{if(t.key==="Escape"||t.key==="Esc"){this.toggleChange.emit({close:true});return}const n=t.target.dataset.index;if(!n)return;if(t.key==="Enter"||t.key===" "){t.preventDefault();t.stopPropagation();this.selectMonth(Number(n))}else{const o=this.moveMonth(this.monthGrid,Number(n),t);this.focusMonth(o)}};this.moveMonth=(t,n,o)=>{const e=t.length;const i=t[0].length;const r=Math.floor(n/i);const a=n%i;const s=[r,a];if(o.key==="ArrowUp"){o.stopPropagation();o.preventDefault();return t[Math.max(0,s[0]-1)][s[1]]}else if(o.key==="ArrowDown"){o.stopPropagation();o.preventDefault();return t[Math.min(e-1,s[0]+1)][s[1]]}else if(o.key==="ArrowLeft"){o.stopPropagation();o.preventDefault();return Math.max(0,n-1)}else if(o.key==="ArrowRight"){o.stopPropagation();o.preventDefault();return Math.min(this.months.length-1,n+1)}else{return t[s[0]][s[1]]}};this.focusMonth=t=>{const n=this.hostElement.shadowRoot.querySelector(`.month-button[data-index="${t}"]`);if(n){this.focusedIndex=t;n.focus()}};this.selectMonth=t=>{var n,o,e;this.selectedIndex=t;this.focusedIndex=t;const i=this.hostElement.shadowRoot.querySelector(`.month-button[data-index="${t}"]`);(n=this.hostElement.shadowRoot.querySelectorAll(`.month-button`))===null||n===void 0?void 0:n.forEach((t=>t.classList.remove("active")));i===null||i===void 0?void 0:i.classList.add("active");i===null||i===void 0?void 0:i.focus();const r={view:"day",monthIndex:t,selectedYear:this.year};(e=(o=this.hostElement).onchange)===null||e===void 0?void 0:e.call(o,new CustomEvent("click",{bubbles:true,detail:r}));this.viewChange.emit(r)};this.selectYear=t=>{this.year=Math.max(1970,t)};this.year=Number((new Date).toLocaleString("en-US",{year:"numeric"}));this.disabledMonths=undefined;this.today=undefined;this.selectedIndex=0;this.focusedIndex=0;this.showYearLayer=false}componentDidRender(){var t;(t=this.scheduledAfterRender)===null||t===void 0?void 0:t.forEach((t=>t()));this.scheduledAfterRender=[]}componentDidLoad(){r(this.hostElement)}render(){return o("div",{class:"month-container",onKeyDown:this.onMonthKeydown},o("div",{class:"navigation"},o("q2-btn",{class:"year-btn",onClick:()=>this.viewChange.emit({view:"year",selectedYear:this.year})},o("span",{class:"year"},this.year),o("q2-icon",{class:"year-icon off",type:"chevron-down"})),o("div",{class:"month-controller"},o("div",{class:"cal-year-prev-next"},o("q2-btn",{label:i("tecton.element.calendar.previousYear"),"hide-label":true,class:"cal-nav-btn prev-year","test-id":"previousYearButton",onClick:()=>this.selectYear(this.year-1)},o("q2-icon",{type:"arrow-left"})),o("q2-btn",{label:i("tecton.element.calendar.nextYear"),"hide-label":true,class:"cal-nav-btn next-year","test-id":"nextYearButton",onClick:()=>this.selectYear(this.year+1)},o("q2-icon",{type:"arrow-right"}))))),o("div",{class:"month-list",onClick:this.onMonthSelection},this.months.map(((t,n)=>o("div",{class:"month"},o("span",{role:"button",class:"month-button","data-index":n,"aria-label":t.label,tabindex:n===this.focusedIndex?0:-1},t.abbr))))),this.today&&o("div",{class:"today-label"},i("tecton.element.calendar.today"),": ",this.today))}get hostElement(){return e(this)}};s.style=a;export{s as q2_month_picker};
+//# sourceMappingURL=p-53bd1be9.entry.js.map

package/dist/q2-tecton-elements/{p-4abbd0b1.entry.js.map → p-53bd1be9.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["q2MonthPickerCss","Q2MonthPicker","this","scheduledAfterRender","monthGrid","months","map","mon","label","loc","abbr","onMonthSelection","event","targetElement","target","closest","_a","dataset","index","selectMonth","Number","_b","onMonthKeydown","key","toggleChange","emit","close","monthIndex","preventDefault","stopPropagation","nextMonthIndex","moveMonth","focusMonth","grid","rows","length","cols","row","Math","floor","col","current","max","min","nextMonth","hostElement","shadowRoot","querySelector","focusedIndex","focus","selectedIndex","querySelectorAll","forEach","el","classList","remove","add","value","view","selectedYear","year","_c","onchange","call","CustomEvent","bubbles","detail","viewChange","selectYear","Date","toLocaleString","componentDidRender","fn","componentDidLoad","overrideFocus","render","h","class","onKeyDown","onClick","type","month","role","tabindex","today"],"sources":["./src/components/q2-calendar/q2-month-picker.scss?tag=q2-month-picker&encapsulation=shadow","./src/components/q2-calendar/q2-month-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.month-container {\n    --comp-month-primary-background: #{var-list(--tct-btn-primary-background, var-prefixer(btn-primary-bg), #2e2e2e)};\n    --comp-month-primary-font-color: #{var-list(var-prefixer(btn-primary-font-color), --tct-white, --app-white, #ffffff)};\n    --comp-month-primary-background: #{var-list(\n            --tct-btn-secondary-background,\n            --tct-btn-secondary-bg,\n            --t-button-default-bg,\n            #cccccc\n        )};\n    --comp-month-secondary-font-color: #{var-list(\n            var-prefixer(btn-secondary-font-color),\n            --t-button-default-font-color,\n            #2e2e2e\n        )};\n    .navigation {\n        display: flex;\n        justify-content: space-between;\n        flex-direction: row;\n        .year-btn {\n            padding: 0 1rem;\n            display: flex;\n            align-items: center;\n            .year {\n                margin-right: 0.2rem;\n            }\n            .year-icon {\n                --t-icon-stroke-width: 2px;\n                width: 16px;\n                height: 16px;\n                transition: all 0.3s ease-in-out;\n                &.on {\n                    transform: rotate(-180deg);\n                }\n            }\n        }\n        .month-controller {\n            display: flex;\n            align-items: center;\n        }\n    }\n    .month-list {\n        display: grid;\n        grid-template-columns: auto auto auto;\n        .month {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 0.5rem 0;\n            .month-button {\n                border-radius: 50%;\n                aspect-ratio: 1;\n                width: 50px;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                &:hover {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-secondary-font-color);\n                    cursor: pointer;\n                }\n                &:active,\n                &.active {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-primary-font-color);\n                }\n            }\n        }\n    }\n\n    .today-label {\n        padding: 0.5rem 0;\n        color: var-list(\n            var-prefixer(calendar-day-selected-outline-color),\n            --tct-stoplight-info,\n            --const-stoplight-info,\n            #0079c1\n        );\n    }\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Event, EventEmitter } from '@stencil/core';\nimport { loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-month-picker',\n    shadow: true,\n    styleUrl: 'q2-month-picker.scss',\n})\nexport class Q2MonthPicker implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) year: number = Number(\n        new Date().toLocaleString('en-US', { year: 'numeric' })\n    );\n    @Prop({ reflect: true }) disabledMonths: string[];\n    @Prop() today: string;\n    @Element() hostElement: HTMLElement;\n    @Event() viewChange: EventEmitter;\n    @Event() toggleChange: EventEmitter;\n    @State() selectedIndex: number = 0;\n    @State() focusedIndex: number = 0;\n    @State() showYearLayer: boolean = false;\n    scheduledAfterRender: (() => void)[] = [];\n\n    private monthGrid = [\n        [0, 1, 2],\n        [3, 4, 5],\n        [6, 7, 8],\n        [9, 10, 11],\n    ];\n    private months = [\n        'January',\n        'February',\n        'March',\n        'April',\n        'May',\n        'June',\n        'July',\n        'August',\n        'September',\n        'October',\n        'November',\n        'December',\n    ].map(mon => ({\n        label: loc(`tecton.element.calendar.months.${mon}`),\n        abbr: loc(`tecton.element.calendar.months.abbr.${mon}`),\n    }));\n\n    componentDidRender() {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    onMonthSelection = (event: MouseEvent) => {\n        const targetElement = (event.target as HTMLButtonElement).closest('.month-button') as HTMLElement;\n        if (targetElement?.dataset?.index) {\n            this.selectMonth(Number(targetElement?.dataset?.index));\n        }\n    };\n\n    onMonthKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'Escape' || event.key === 'Esc') {\n            this.toggleChange.emit({ close: true });\n            return;\n        }\n        const monthIndex = (event.target as HTMLElement).dataset.index;\n        if (!monthIndex) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            event.stopPropagation();\n            this.selectMonth(Number(monthIndex));\n        } else {\n            const nextMonthIndex = this.moveMonth(this.monthGrid, Number(monthIndex), event);\n            this.focusMonth(nextMonthIndex);\n        }\n    };\n\n    moveMonth = (grid: number[][], index: number, event: KeyboardEvent) => {\n        const rows = grid.length;\n        const cols = grid[0].length;\n        const row = Math.floor(index / cols);\n        const col = index % cols;\n        const current = [row, col];\n        if (event.key === 'ArrowUp') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.max(0, current[0] - 1)][current[1]];\n        } else if (event.key === 'ArrowDown') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.min(rows - 1, current[0] + 1)][current[1]];\n        } else if (event.key === 'ArrowLeft') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.max(0, index - 1);\n        } else if (event.key === 'ArrowRight') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.min(this.months.length - 1, index + 1);\n        } else {\n            return grid[current[0]][current[1]];\n        }\n    };\n\n    focusMonth = (index: number) => {\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        if (nextMonth) {\n            this.focusedIndex = index;\n            nextMonth.focus();\n        }\n    };\n\n    selectMonth = (index: number) => {\n        this.selectedIndex = index;\n        this.focusedIndex = index;\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        this.hostElement.shadowRoot\n            .querySelectorAll<HTMLElement>(`.month-button`)\n            ?.forEach(el => el.classList.remove('active'));\n        nextMonth?.classList.add('active');\n        nextMonth?.focus();\n        const value = {\n            view: 'day', // change to day view\n            monthIndex: index,\n            selectedYear: this.year,\n        };\n        this.hostElement.onchange?.(\n            new CustomEvent('click', {\n                bubbles: true,\n                detail: value,\n            })\n        );\n        this.viewChange.emit(value);\n    };\n    selectYear = (year: number) => {\n        this.year = Math.max(1970, year);\n    };\n\n    render() {\n        return (\n            <div\n                class=\"month-container\"\n                onKeyDown={this.onMonthKeydown}\n            >\n                <div class=\"navigation\">\n                    <q2-btn\n                        class=\"year-btn\"\n                        onClick={() =>\n                            this.viewChange.emit({\n                                view: 'year',\n                                selectedYear: this.year,\n                            })\n                        }\n                    >\n                        <span class=\"year\">{this.year}</span>\n                        <q2-icon\n                            class=\"year-icon off\"\n                            type=\"chevron-down\"\n                        ></q2-icon>\n                    </q2-btn>\n                    <div class=\"month-controller\">\n                        <div class=\"cal-year-prev-next\">\n                            <q2-btn\n                                label={loc('tecton.element.calendar.previousYear')}\n                                hide-label\n                                class=\"cal-nav-btn prev-year\"\n                                test-id=\"previousYearButton\"\n                                onClick={() => this.selectYear(this.year - 1)}\n                            >\n                                <q2-icon type=\"arrow-left\" />\n                            </q2-btn>\n                            <q2-btn\n                                label={loc('tecton.element.calendar.nextYear')}\n                                hide-label\n                                class=\"cal-nav-btn next-year\"\n                                test-id=\"nextYearButton\"\n                                onClick={() => this.selectYear(this.year + 1)}\n                            >\n                                <q2-icon type=\"arrow-right\" />\n                            </q2-btn>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"month-list\"\n                    onClick={this.onMonthSelection}\n                >\n                    {this.months.map((month, index) => (\n                        <div class=\"month\">\n                            <span\n                                role=\"button\"\n                                class=\"month-button\"\n                                data-index={index}\n                                aria-label={month.label}\n                                tabindex={index === this.focusedIndex ? 0 : -1}\n                            >\n                                {month.abbr}\n                            </span>\n                        </div>\n                    ))}\n                </div>\n                {this.today && (\n                    <div class=\"today-label\">\n                        {loc('tecton.element.calendar.today')}: {this.today}\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2MonthPickerCss","Q2MonthPicker","this","scheduledAfterRender","monthGrid","months","map","mon","label","loc","abbr","onMonthSelection","event","targetElement","target","closest","_a","dataset","index","selectMonth","Number","_b","onMonthKeydown","key","toggleChange","emit","close","monthIndex","preventDefault","stopPropagation","nextMonthIndex","moveMonth","focusMonth","grid","rows","length","cols","row","Math","floor","col","current","max","min","nextMonth","hostElement","shadowRoot","querySelector","focusedIndex","focus","selectedIndex","querySelectorAll","forEach","el","classList","remove","add","value","view","selectedYear","year","_c","onchange","call","CustomEvent","bubbles","detail","viewChange","selectYear","Date","toLocaleString","componentDidRender","fn","componentDidLoad","overrideFocus","render","h","class","onKeyDown","onClick","type","month","role","tabindex","today"],"sources":["./src/components/q2-calendar/q2-month-picker.scss?tag=q2-month-picker&encapsulation=shadow","./src/components/q2-calendar/q2-month-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.month-container {\n    --comp-month-primary-background: #{var-list(--tct-btn-primary-background, var-prefixer(btn-primary-bg), #2e2e2e)};\n    --comp-month-primary-font-color: #{var-list(var-prefixer(btn-primary-font-color), --tct-white, --app-white, #ffffff)};\n    --comp-month-primary-background: #{var-list(\n            --tct-btn-secondary-background,\n            --tct-btn-secondary-bg,\n            --t-button-default-bg,\n            #cccccc\n        )};\n    --comp-month-secondary-font-color: #{var-list(\n            var-prefixer(btn-secondary-font-color),\n            --t-button-default-font-color,\n            #2e2e2e\n        )};\n    .navigation {\n        display: flex;\n        justify-content: space-between;\n        flex-direction: row;\n        .year-btn {\n            padding: 0 1rem;\n            display: flex;\n            align-items: center;\n            .year {\n                margin-right: 0.2rem;\n            }\n            .year-icon {\n                --t-icon-stroke-width: 2px;\n                width: 16px;\n                height: 16px;\n                transition: all 0.3s ease-in-out;\n                &.on {\n                    transform: rotate(-180deg);\n                }\n            }\n        }\n        .month-controller {\n            display: flex;\n            align-items: center;\n        }\n    }\n    .month-list {\n        display: grid;\n        grid-template-columns: auto auto auto;\n        .month {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 0.5rem 0;\n            .month-button {\n                border-radius: 50%;\n                aspect-ratio: 1;\n                width: 50px;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                &:hover {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-secondary-font-color);\n                    cursor: pointer;\n                }\n                &:active,\n                &.active {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-primary-font-color);\n                }\n            }\n        }\n    }\n\n    .today-label {\n        padding: 0.5rem 0;\n        color: var-list(\n            var-prefixer(calendar-day-selected-outline-color),\n            --tct-stoplight-info,\n            --const-stoplight-info,\n            #0079c1\n        );\n    }\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Event, EventEmitter } from '@stencil/core';\nimport { loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-month-picker',\n    shadow: true,\n    styleUrl: 'q2-month-picker.scss',\n})\nexport class Q2MonthPicker implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) year: number = Number(\n        new Date().toLocaleString('en-US', { year: 'numeric' })\n    );\n    @Prop({ reflect: true }) disabledMonths: string[];\n    @Prop() today: string;\n    @Element() hostElement: HTMLElement;\n    @Event() viewChange: EventEmitter;\n    @Event() toggleChange: EventEmitter;\n    @State() selectedIndex: number = 0;\n    @State() focusedIndex: number = 0;\n    @State() showYearLayer: boolean = false;\n    scheduledAfterRender: (() => void)[] = [];\n\n    private monthGrid = [\n        [0, 1, 2],\n        [3, 4, 5],\n        [6, 7, 8],\n        [9, 10, 11],\n    ];\n    private months = [\n        'January',\n        'February',\n        'March',\n        'April',\n        'May',\n        'June',\n        'July',\n        'August',\n        'September',\n        'October',\n        'November',\n        'December',\n    ].map(mon => ({\n        label: loc(`tecton.element.calendar.months.${mon}`),\n        abbr: loc(`tecton.element.calendar.months.abbr.${mon}`),\n    }));\n\n    componentDidRender() {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    onMonthSelection = (event: MouseEvent) => {\n        const targetElement = (event.target as HTMLButtonElement).closest('.month-button') as HTMLElement;\n        if (targetElement?.dataset?.index) {\n            this.selectMonth(Number(targetElement?.dataset?.index));\n        }\n    };\n\n    onMonthKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'Escape' || event.key === 'Esc') {\n            this.toggleChange.emit({ close: true });\n            return;\n        }\n        const monthIndex = (event.target as HTMLElement).dataset.index;\n        if (!monthIndex) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            event.stopPropagation();\n            this.selectMonth(Number(monthIndex));\n        } else {\n            const nextMonthIndex = this.moveMonth(this.monthGrid, Number(monthIndex), event);\n            this.focusMonth(nextMonthIndex);\n        }\n    };\n\n    moveMonth = (grid: number[][], index: number, event: KeyboardEvent) => {\n        const rows = grid.length;\n        const cols = grid[0].length;\n        const row = Math.floor(index / cols);\n        const col = index % cols;\n        const current = [row, col];\n        if (event.key === 'ArrowUp') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.max(0, current[0] - 1)][current[1]];\n        } else if (event.key === 'ArrowDown') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.min(rows - 1, current[0] + 1)][current[1]];\n        } else if (event.key === 'ArrowLeft') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.max(0, index - 1);\n        } else if (event.key === 'ArrowRight') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.min(this.months.length - 1, index + 1);\n        } else {\n            return grid[current[0]][current[1]];\n        }\n    };\n\n    focusMonth = (index: number) => {\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        if (nextMonth) {\n            this.focusedIndex = index;\n            nextMonth.focus();\n        }\n    };\n\n    selectMonth = (index: number) => {\n        this.selectedIndex = index;\n        this.focusedIndex = index;\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        this.hostElement.shadowRoot\n            .querySelectorAll<HTMLElement>(`.month-button`)\n            ?.forEach(el => el.classList.remove('active'));\n        nextMonth?.classList.add('active');\n        nextMonth?.focus();\n        const value = {\n            view: 'day', // change to day view\n            monthIndex: index,\n            selectedYear: this.year,\n        };\n        this.hostElement.onchange?.(\n            new CustomEvent('click', {\n                bubbles: true,\n                detail: value,\n            })\n        );\n        this.viewChange.emit(value);\n    };\n    selectYear = (year: number) => {\n        this.year = Math.max(1970, year);\n    };\n\n    render() {\n        return (\n            <div\n                class=\"month-container\"\n                onKeyDown={this.onMonthKeydown}\n            >\n                <div class=\"navigation\">\n                    <q2-btn\n                        class=\"year-btn\"\n                        onClick={() =>\n                            this.viewChange.emit({\n                                view: 'year',\n                                selectedYear: this.year,\n                            })\n                        }\n                    >\n                        <span class=\"year\">{this.year}</span>\n                        <q2-icon\n                            class=\"year-icon off\"\n                            type=\"chevron-down\"\n                        ></q2-icon>\n                    </q2-btn>\n                    <div class=\"month-controller\">\n                        <div class=\"cal-year-prev-next\">\n                            <q2-btn\n                                label={loc('tecton.element.calendar.previousYear')}\n                                hide-label\n                                class=\"cal-nav-btn prev-year\"\n                                test-id=\"previousYearButton\"\n                                onClick={() => this.selectYear(this.year - 1)}\n                            >\n                                <q2-icon type=\"arrow-left\" />\n                            </q2-btn>\n                            <q2-btn\n                                label={loc('tecton.element.calendar.nextYear')}\n                                hide-label\n                                class=\"cal-nav-btn next-year\"\n                                test-id=\"nextYearButton\"\n                                onClick={() => this.selectYear(this.year + 1)}\n                            >\n                                <q2-icon type=\"arrow-right\" />\n                            </q2-btn>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"month-list\"\n                    onClick={this.onMonthSelection}\n                >\n                    {this.months.map((month, index) => (\n                        <div class=\"month\">\n                            <span\n                                role=\"button\"\n                                class=\"month-button\"\n                                data-index={index}\n                                aria-label={month.label}\n                                tabindex={index === this.focusedIndex ? 0 : -1}\n                            >\n                                {month.abbr}\n                            </span>\n                        </div>\n                    ))}\n                </div>\n                {this.today && (\n                    <div class=\"today-label\">\n                        {loc('tecton.element.calendar.today')}: {this.today}\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-570e5e5d.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,g as o}from"./p-277dc8cd.js";import{h as r,l as n}from"./p-75ad4639.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=class{constructor(e){t(this,e);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.removable=undefined;this.separator=undefined;this.label=undefined;this.value=undefined;this.ariaLabel=undefined}componentWillLoad(){r(this)}ariaLabelObserver(){r(this)}get removeLabel(){return n("tecton.element.dropdownItem.remove",[this.label||""])}get dropdownItemBtn(){return this.hostElement.shadowRoot.querySelector(".dropdown-item")}get innerLabel(){return this.label||this.hostElement.textContent}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"]}}};d.style=i;export{d as q2_dropdown_item};
+//# sourceMappingURL=p-570e5e5d.entry.js.map

package/dist/q2-tecton-elements/{p-9c9a2550.entry.js.map → p-570e5e5d.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","Q2DropdownItem","this","onItemClick","event","stopImmediatePropagation","hostElement","dispatchEvent","CustomEvent","detail","type","value","bubbles","onItemKeydown","includes","key","focusRemoveBtn","onItemFocus","stopPropagation","onRemoveBtnClick","onRemoveBtnKeydown","focusItem","onRemoveBtnFocus","componentWillLoad","handleAriaLabel","ariaLabelObserver","removeLabel","loc","label","dropdownItemBtn","shadowRoot","querySelector","innerLabel","textContent","removeBtn","onHostElementFocus","target","FocusEvent","render","separator","separatorDOM","itemDOM","h","class","role","disabled","onClick","onKeyDown","onFocus","removable"],"sources":["./src/components/q2-dropdown-item/styles.scss?tag=q2-dropdown-item&encapsulation=shadow","./src/components/q2-dropdown-item/index.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, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({\n    tag: 'q2-dropdown-item',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2DropdownItem implements ComponentInterface {\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) removable: boolean;\n    @Prop({ reflect: true }) separator: boolean;\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /////// LIFECYCLE HOOKS //////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.label || '']);\n    }\n\n    get dropdownItemBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n    }\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent;\n    }\n\n    get removeBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\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    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                    ''\n                )}\n            </div>\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,g6E,MCSLC,EAAc,M,yBA0DvBC,KAAAC,YAAeC,IACXA,EAAMC,2BACNH,KAAKI,YAAYC,cACb,IAAIC,YAAY,QAAS,CACrBC,OAAQ,CACJC,KAAM,SACNC,MAAOT,KAAKS,OAAS,IAEzBC,QAAS,OAEhB,EAGLV,KAAAW,cAAiBT,IACb,GAAI,CAAC,aAAc,SAASU,SAASV,EAAMW,KAAM,CAC7Cb,KAAKc,gB,GAIbd,KAAAe,YAAeb,IACXA,EAAMc,iBAAiB,EAG3BhB,KAAAiB,iBAAoBf,IAChBA,EAAMC,2BAENH,KAAKI,YAAYC,cACb,IAAIC,YAAY,QAAS,CACrBC,OAAQ,CACJC,KAAM,SACNC,MAAOT,KAAKS,OAAS,IAEzBC,QAAS,OAEhB,EAGLV,KAAAkB,mBAAsBhB,IAClB,GAAI,CAAC,YAAa,QAAQU,SAASV,EAAMW,KAAM,CAC3Cb,KAAKmB,W,GAIbnB,KAAAoB,iBAAoBlB,IAChBA,EAAMc,iBAAiB,E,6IAxF3BK,oBACIC,EAAgBtB,K,CAMpBuB,oBACID,EAAgBtB,K,CAGhBwB,kBACA,OAAOC,EAAI,qCAAsC,CAACzB,KAAK0B,OAAS,I,CAGhEC,sBACA,OAAO3B,KAAKI,YAAYwB,WAAWC,cAAc,iB,CAGjDC,iBACA,OAAO9B,KAAK0B,OAAS1B,KAAKI,YAAY2B,W,CAGtCC,gBACA,OAAOhC,KAAKI,YAAYwB,WAAWC,cAAc,wB,CAKrDI,qBACI,GAAI/B,MAAMgC,SAAWlC,KAAKI,YAAa,CACnCJ,KAAKmB,W,EAKbA,YACInB,KAAK2B,gBAAgBtB,cAAc,IAAI8B,WAAW,QAAS,CAAEzB,QAAS,Q,CAG1EI,iBACId,KAAKgC,WAAahC,KAAKgC,UAAU3B,cAAc,IAAI8B,WAAW,QAAS,CAAEzB,QAAS,Q,CAkDtF0B,SACI,KAAMpC,KAAKqC,UAAW,CAClB,OAAOrC,KAAKsC,c,CAGhB,OAAOtC,KAAKuC,S,CAGhBD,eACI,OACIE,EAAA,OACIC,MAAM,qBACNC,KAAK,YAAW,UACR,yB,CAKpBH,UACI,OACIC,EAAA,OAAKC,MAAM,yBACPD,EAAA,UACIC,MAAM,gBACNf,MAAO1B,KAAK8B,WAAU,kBAEtBa,WAAY3C,KAAK2C,SACjBD,KAAK,WACLE,QAAS5C,KAAKC,YACd4C,UAAW7C,KAAKW,cAChBmC,QAAS9C,KAAKe,YAAW,UACjB,gBAERyB,EAAA,OAAKC,MAAM,yBACPD,EAAA,iBAGLxC,KAAK+C,UACJP,EAAA,UACIC,MAAM,uBACNf,MAAO1B,KAAKwB,YAAW,kBAEvBmB,WAAY3C,KAAK2C,SACjBD,KAAK,WACLE,QAAS5C,KAAKiB,iBACd4B,UAAW7C,KAAKkB,mBAChB4B,QAAS9C,KAAKoB,iBAAgB,UACtB,sBAERoB,EAAA,WAAShC,KAAK,WACT,G"}
+{"version":3,"names":["stylesCss","Q2DropdownItem","this","onItemClick","event","stopImmediatePropagation","hostElement","dispatchEvent","CustomEvent","detail","type","value","bubbles","onItemKeydown","includes","key","focusRemoveBtn","onItemFocus","stopPropagation","onRemoveBtnClick","onRemoveBtnKeydown","focusItem","onRemoveBtnFocus","componentWillLoad","handleAriaLabel","ariaLabelObserver","removeLabel","loc","label","dropdownItemBtn","shadowRoot","querySelector","innerLabel","textContent","removeBtn","onHostElementFocus","target","FocusEvent","render","separator","separatorDOM","itemDOM","h","class","role","disabled","onClick","onKeyDown","onFocus","removable"],"sources":["./src/components/q2-dropdown-item/styles.scss?tag=q2-dropdown-item&encapsulation=shadow","./src/components/q2-dropdown-item/index.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, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({\n    tag: 'q2-dropdown-item',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2DropdownItem implements ComponentInterface {\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) removable: boolean;\n    @Prop({ reflect: true }) separator: boolean;\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /////// LIFECYCLE HOOKS //////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.label || '']);\n    }\n\n    get dropdownItemBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n    }\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent;\n    }\n\n    get removeBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\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    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                    ''\n                )}\n            </div>\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,25E,MCSLC,EAAc,M,yBA0DvBC,KAAAC,YAAeC,IACXA,EAAMC,2BACNH,KAAKI,YAAYC,cACb,IAAIC,YAAY,QAAS,CACrBC,OAAQ,CACJC,KAAM,SACNC,MAAOT,KAAKS,OAAS,IAEzBC,QAAS,OAEhB,EAGLV,KAAAW,cAAiBT,IACb,GAAI,CAAC,aAAc,SAASU,SAASV,EAAMW,KAAM,CAC7Cb,KAAKc,gB,GAIbd,KAAAe,YAAeb,IACXA,EAAMc,iBAAiB,EAG3BhB,KAAAiB,iBAAoBf,IAChBA,EAAMC,2BAENH,KAAKI,YAAYC,cACb,IAAIC,YAAY,QAAS,CACrBC,OAAQ,CACJC,KAAM,SACNC,MAAOT,KAAKS,OAAS,IAEzBC,QAAS,OAEhB,EAGLV,KAAAkB,mBAAsBhB,IAClB,GAAI,CAAC,YAAa,QAAQU,SAASV,EAAMW,KAAM,CAC3Cb,KAAKmB,W,GAIbnB,KAAAoB,iBAAoBlB,IAChBA,EAAMc,iBAAiB,E,6IAxF3BK,oBACIC,EAAgBtB,K,CAMpBuB,oBACID,EAAgBtB,K,CAGhBwB,kBACA,OAAOC,EAAI,qCAAsC,CAACzB,KAAK0B,OAAS,I,CAGhEC,sBACA,OAAO3B,KAAKI,YAAYwB,WAAWC,cAAc,iB,CAGjDC,iBACA,OAAO9B,KAAK0B,OAAS1B,KAAKI,YAAY2B,W,CAGtCC,gBACA,OAAOhC,KAAKI,YAAYwB,WAAWC,cAAc,wB,CAKrDI,qBACI,GAAI/B,MAAMgC,SAAWlC,KAAKI,YAAa,CACnCJ,KAAKmB,W,EAKbA,YACInB,KAAK2B,gBAAgBtB,cAAc,IAAI8B,WAAW,QAAS,CAAEzB,QAAS,Q,CAG1EI,iBACId,KAAKgC,WAAahC,KAAKgC,UAAU3B,cAAc,IAAI8B,WAAW,QAAS,CAAEzB,QAAS,Q,CAkDtF0B,SACI,KAAMpC,KAAKqC,UAAW,CAClB,OAAOrC,KAAKsC,c,CAGhB,OAAOtC,KAAKuC,S,CAGhBD,eACI,OACIE,EAAA,OACIC,MAAM,qBACNC,KAAK,YAAW,UACR,yB,CAKpBH,UACI,OACIC,EAAA,OAAKC,MAAM,yBACPD,EAAA,UACIC,MAAM,gBACNf,MAAO1B,KAAK8B,WAAU,kBAEtBa,WAAY3C,KAAK2C,SACjBD,KAAK,WACLE,QAAS5C,KAAKC,YACd4C,UAAW7C,KAAKW,cAChBmC,QAAS9C,KAAKe,YAAW,UACjB,gBAERyB,EAAA,OAAKC,MAAM,yBACPD,EAAA,iBAGLxC,KAAK+C,UACJP,EAAA,UACIC,MAAM,uBACNf,MAAO1B,KAAKwB,YAAW,kBAEvBmB,WAAY3C,KAAK2C,SACjBD,KAAK,WACLE,QAAS5C,KAAKiB,iBACd4B,UAAW7C,KAAKkB,mBAChB4B,QAAS9C,KAAKoB,iBAAgB,UACtB,sBAERoB,EAAA,WAAShC,KAAK,WACT,G"}

package/dist/q2-tecton-elements/p-5ee3bf5f.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,g as i}from"./p-277dc8cd.js";import{o as e,i as r}from"./p-75ad4639.js";const a='*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.85)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:"";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]) .tooltip:before,:host([persistent]) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}';const n=class{constructor(o){t(this,o);this.animationEndCount=0;this.label=undefined;this.block=undefined;this.multiline=undefined;this.persistent=undefined;this.immediate=undefined;this.focusable=false;this.position="n";this.focusClass=undefined}componentDidLoad(){e(this.hostElement)}get shouldBeVisible(){if(this.persistent)return true;return this.hostElement.matches(":hover, :focus-within")}checkFocusClass(){if(!this.shouldBeVisible)return;const t=!!this.findFocusVisibleElement(document.activeElement);this.focusClass=t?"has-keyboard-focus":"has-generic-focus";if(t)return}hideTooltip(){if(this.focusClass==="has-generic-focus")this.focusClass="has-generic-focus-out";else this.focusClass=null}animationEndHandler(){this.animationEndCount=this.animationEndCount+1;const{focusClass:t,animationEndCount:o}=this;if(t==="has-generic-focus-out"||t==="has-generic-focus"&&o===4){this.focusClass=null;this.animationEndCount=0}}findFocusVisibleElement(t){if(!t)return;if(t.shadowRoot)t=this.findFocusVisibleElement(t.shadowRoot.activeElement);return(t===null||t===void 0?void 0:t.matches(":focus-visible"))?t:null}keyUpHandler(t){switch(t.key){case"Esc":case"Escape":this.hideTooltip();break}}focusCaptureHandler(){this.checkFocusClass()}focusHandler(t){if(!r(t,this.hostElement))return;if(!this.focusable)return;this.tooltipElement.focus()}focusOutHandler(){if(this.shouldBeVisible)return;if(this.focusClass==="has-generic-focus")this.focusClass="has-generic-focus-out";else this.focusClass=null}render(){const{focusClass:t}=this;const i=["tooltip"];if(t)i.push(t);return this.label?o("div",{tabindex:this.focusable?0:undefined,ref:t=>this.tooltipElement=t,class:i.join(" "),"aria-label":this.label,onAnimationEnd:()=>this.animationEndHandler(),role:"tooltip","test-id":"tooltipContainer"},o("slot",null)):o("slot",null)}get hostElement(){return i(this)}};n.style=a;export{n as q2_tooltip};
+//# sourceMappingURL=p-5ee3bf5f.entry.js.map

package/dist/q2-tecton-elements/{p-47c60d4a.entry.js.map → p-5ee3bf5f.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","Q2Tooltip","this","animationEndCount","componentDidLoad","overrideFocus","hostElement","shouldBeVisible","persistent","matches","checkFocusClass","isKeyboardFocus","findFocusVisibleElement","document","activeElement","focusClass","hideTooltip","animationEndHandler","element","shadowRoot","keyUpHandler","event","key","focusCaptureHandler","focusHandler","isEventFromElement","focusable","tooltipElement","focus","focusOutHandler","render","classes","push","label","h","tabindex","undefined","ref","el","class","join","onAnimationEnd","role"],"sources":["./src/components/q2-tooltip/styles.scss?tag=q2-tooltip&encapsulation=shadow","./src/components/q2-tooltip/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host([block]) {\n    display: block;\n}\n\n.tooltip {\n    --comp-background: #{var-list(--tct-tooltip-background, var-prefixer(tooltip-background-color), --t-top-a3, rgba(13, 13, 13, 0.85))};\n    --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);\n    --comp-offset: #{var-list(var-prefixer(tooltip-offset), --comp-offset-default)};\n    --comp-position: #{var-list(var-prefixer(tooltip-position), --app-scale-1x, 5px)};\n    --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);\n    --comp-body-offset: #{var-list(var-prefixer(tooltip-body-offset), --comp-body-offset-default)};\n    --comp-duration: #{var-list(var-prefixer(tooltip-transition-duration), --app-duration-1, 0.2s)};\n    --comp-visible-duration: #{var-list(var-prefixer(tooltip-transition-visible-duration), 2s)};\n    --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 0s)};\n\n    display: inline-block;\n    position: relative;\n\n    &:hover {\n        --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 1s)};\n    }\n\n    // Tooltip arrow\n    &:before {\n        position: absolute;\n        z-index: 2;\n        width: 0;\n        height: 0;\n        color: var(--comp-background);\n        pointer-events: none;\n        content: '';\n        border: var-list(var-prefixer(tooltip-arrow-size), --app-scale-1x, 5px) solid transparent;\n    }\n\n    // Tooltip bubble\n    &:after {\n        --comp-padding: #{var-list(--app-scale-1x, 5px)} 8px;\n\n        position: absolute;\n        z-index: 1;\n        padding: var-list(var-prefixer(tooltip-padding), --comp-padding);\n        font-weight: var-list(var-prefixer(tooltip-font-weight), 600);\n        font-size: var-list(var-prefixer(tooltip-font-size), --app-font-size-small, 12px);\n        line-height: 1.5;\n        color: var-list(var-prefixer(tooltip-color), --app-white, #ffffff);\n        text-align: center;\n        text-decoration: none;\n        text-shadow: none;\n        text-transform: none;\n        letter-spacing: normal;\n        word-wrap: break-word;\n        white-space: pre;\n        pointer-events: none;\n        content: attr(aria-label);\n        background: var(--comp-background);\n        border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 3px);\n    }\n\n    &:before,\n    &:after {\n        display: inline-block;\n        visibility: hidden;\n        opacity: 0;\n        transition: all var(--comp-duration) ease-in-out var(--comp-delay);\n    }\n\n    :host([block]) & {\n        display: block;\n    }\n\n    // When to show the tooltip\n    &:hover,\n    &.has-keyboard-focus:focus-within,\n    :host([persistent]) & {\n        &:before,\n        &:after {\n            text-decoration: none;\n            visibility: visible;\n            opacity: 1;\n        }\n    }\n\n    @keyframes tooltippedFade {\n        from {\n            opacity: 0;\n        }\n\n        to {\n            opacity: 1;\n        }\n    }\n\n    &.has-generic-focus:focus-within {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade, tooltippedFade;\n            animation-direction: normal, reverse;\n            animation-duration: var(--comp-duration);\n            animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));\n        }\n    }\n    &.has-generic-focus-out {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade;\n            animation-direction: reverse;\n            animation-duration: var(--comp-duration);\n        }\n    }\n\n    :host([multiline]) & {\n        &:after {\n            width: max-content;\n            max-width: var-list(var-prefixer(tooltip-max-width), 200px);\n            word-break: break-word;\n            word-wrap: normal;\n            white-space: pre-line;\n            border-collapse: separate;\n            text-align: left;\n        }\n\n        :host([position='s']) &,\n        :host([position='n']) & {\n            &:after {\n                right: auto;\n                left: 50%;\n                transform: translateX(-50%);\n            }\n        }\n\n        :host([position='w']) &,\n        :host([position='e']) & {\n            &:after {\n                right: 100%;\n            }\n        }\n\n        &:hover,\n        &:active,\n        &:focus {\n            &:after {\n                display: table-cell;\n            }\n        }\n\n        &:focus-within {\n            &:after {\n                display: table-cell;\n            }\n        }\n    }\n\n    // Below\n    :host([position='s']) &,\n    :host([position='se']) &,\n    :host([position='sw']) & {\n        &:after {\n            top: 100%;\n            right: 50%;\n            margin-top: var(--comp-position);\n        }\n\n        &:before {\n            top: auto;\n            right: 50%;\n            bottom: var(--comp-offset);\n            margin-right: var(--comp-offset);\n            border-bottom-color: var(--comp-background);\n        }\n    }\n\n    // Above\n    :host([position='n']) &,\n    :host([position='ne']) &,\n    :host([position='nw']) & {\n        &:after {\n            right: 50%;\n            bottom: 100%;\n            margin-bottom: var(--comp-position);\n        }\n\n        &:before {\n            top: var(--comp-offset);\n            right: 50%;\n            bottom: auto;\n            margin-right: var(--comp-offset);\n            border-top-color: var(--comp-background);\n        }\n    }\n\n    :host([position='se']) &,\n    :host([position='ne']) & {\n        &:after {\n            right: auto;\n            left: 50%;\n            margin-left: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='sw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='nw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    // Centered\n    :host([position='s']) &,\n    :host([position='n']) & {\n        &:after {\n            transform: translateX(50%);\n        }\n    }\n\n    // Left side\n    :host([position='w']) & {\n        &:after {\n            right: 100%;\n            bottom: 50%;\n            margin-right: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            bottom: 50%;\n            left: var(--comp-offset);\n            margin-top: var(--comp-offset);\n            border-left-color: var(--comp-background);\n        }\n    }\n\n    // Right side\n    :host([position='e']) & {\n        &:after {\n            bottom: 50%;\n            left: 100%;\n            margin-left: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            right: var(--comp-offset);\n            bottom: 50%;\n            margin-top: var(--comp-offset);\n            border-right-color: var(--comp-background);\n        }\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Listen, State } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-tooltip',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Tooltip implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) block: boolean;\n    @Prop({ reflect: true }) multiline: boolean;\n    @Prop({ reflect: true }) persistent: boolean;\n    @Prop({ reflect: true }) immediate: boolean;\n    @Prop({ reflect: true }) focusable: boolean = false;\n    @Prop({ reflect: true }) position: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se' = 'n';\n\n    @Element() hostElement: HTMLElement;\n    @State() focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';\n\n    tooltipElement: HTMLDivElement;\n    animationEndCount = 0;\n\n    /// LifeCycle Hooks ///\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    /// Getters ///\n    get shouldBeVisible() {\n        if (this.persistent) return true;\n        return this.hostElement.matches(':hover, :focus-within');\n    }\n\n    /// Helpers //\n    checkFocusClass() {\n        if (!this.shouldBeVisible) return;\n        const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);\n        this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';\n        if (isKeyboardFocus) return;\n    }\n\n    hideTooltip() {\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    animationEndHandler() {\n        this.animationEndCount = this.animationEndCount + 1;\n        const { focusClass, animationEndCount } = this;\n\n        // animationEnd is fired once for :before and once for :after pseudo elements\n        // there are multiple animations defined for .has-generic-focus\n        // so we need to wait for all of them to finish before we can remove the class\n        if (focusClass === 'has-generic-focus-out' || (focusClass === 'has-generic-focus' && animationEndCount === 4)) {\n            this.focusClass = null;\n            this.animationEndCount = 0;\n        }\n    }\n\n    findFocusVisibleElement(element: Element) {\n        if (!element) return;\n        if (element.shadowRoot) element = this.findFocusVisibleElement(element.shadowRoot.activeElement);\n        return element?.matches(':focus-visible') ? element : null;\n    }\n\n    /// Listeners ///\n    @Listen('keyup')\n    keyUpHandler(event: KeyboardEvent) {\n        switch (event.key) {\n            case 'Esc':\n            case 'Escape':\n                this.hideTooltip();\n                break;\n        }\n    }\n\n    @Listen('focus', { capture: true })\n    focusCaptureHandler() {\n        this.checkFocusClass();\n    }\n\n    @Listen('focus')\n    focusHandler(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.focusable) return;\n        this.tooltipElement.focus();\n    }\n\n    @Listen('focusout')\n    focusOutHandler() {\n        if (this.shouldBeVisible) return;\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    render() {\n        const { focusClass } = this;\n        const classes = ['tooltip'];\n        if (focusClass) classes.push(focusClass);\n\n        return this.label ? (\n            <div\n                tabindex={this.focusable ? 0 : undefined}\n                ref={el => (this.tooltipElement = el)}\n                class={classes.join(' ')}\n                aria-label={this.label}\n                onAnimationEnd={() => this.animationEndHandler()}\n                role=\"tooltip\"\n                test-id=\"tooltipContainer\"\n            >\n                <slot />\n            </div>\n        ) : (\n            <slot />\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,yuM,MCQLC,EAAS,M,yBAalBC,KAAAC,kBAAoB,E,qIAP0B,M,cACyC,I,0BASvFC,mBACIC,EAAcH,KAAKI,Y,CAInBC,sBACA,GAAIL,KAAKM,WAAY,OAAO,KAC5B,OAAON,KAAKI,YAAYG,QAAQ,wB,CAIpCC,kBACI,IAAKR,KAAKK,gBAAiB,OAC3B,MAAMI,IAAoBT,KAAKU,wBAAwBC,SAASC,eAChEZ,KAAKa,WAAaJ,EAAkB,qBAAuB,oBAC3D,GAAIA,EAAiB,M,CAGzBK,cACI,GAAId,KAAKa,aAAe,oBAAqBb,KAAKa,WAAa,6BAC1Db,KAAKa,WAAa,I,CAG3BE,sBACIf,KAAKC,kBAAoBD,KAAKC,kBAAoB,EAClD,MAAMY,WAAEA,EAAUZ,kBAAEA,GAAsBD,KAK1C,GAAIa,IAAe,yBAA4BA,IAAe,qBAAuBZ,IAAsB,EAAI,CAC3GD,KAAKa,WAAa,KAClBb,KAAKC,kBAAoB,C,EAIjCS,wBAAwBM,GACpB,IAAKA,EAAS,OACd,GAAIA,EAAQC,WAAYD,EAAUhB,KAAKU,wBAAwBM,EAAQC,WAAWL,eAClF,OAAOI,IAAO,MAAPA,SAAO,SAAPA,EAAST,QAAQ,mBAAoBS,EAAU,I,CAK1DE,aAAaC,GACT,OAAQA,EAAMC,KACV,IAAK,MACL,IAAK,SACDpB,KAAKc,cACL,M,CAKZO,sBACIrB,KAAKQ,iB,CAITc,aAAaH,GACT,IAAKI,EAAmBJ,EAAOnB,KAAKI,aAAc,OAClD,IAAKJ,KAAKwB,UAAW,OACrBxB,KAAKyB,eAAeC,O,CAIxBC,kBACI,GAAI3B,KAAKK,gBAAiB,OAC1B,GAAIL,KAAKa,aAAe,oBAAqBb,KAAKa,WAAa,6BAC1Db,KAAKa,WAAa,I,CAG3Be,SACI,MAAMf,WAAEA,GAAeb,KACvB,MAAM6B,EAAU,CAAC,WACjB,GAAIhB,EAAYgB,EAAQC,KAAKjB,GAE7B,OAAOb,KAAK+B,MACRC,EAAA,OACIC,SAAUjC,KAAKwB,UAAY,EAAIU,UAC/BC,IAAKC,GAAOpC,KAAKyB,eAAiBW,EAClCC,MAAOR,EAAQS,KAAK,KAAI,aACZtC,KAAK+B,MACjBQ,eAAgB,IAAMvC,KAAKe,sBAC3ByB,KAAK,UAAS,UACN,oBAERR,EAAA,cAGJA,EAAA,Y"}
+{"version":3,"names":["stylesCss","Q2Tooltip","this","animationEndCount","componentDidLoad","overrideFocus","hostElement","shouldBeVisible","persistent","matches","checkFocusClass","isKeyboardFocus","findFocusVisibleElement","document","activeElement","focusClass","hideTooltip","animationEndHandler","element","shadowRoot","keyUpHandler","event","key","focusCaptureHandler","focusHandler","isEventFromElement","focusable","tooltipElement","focus","focusOutHandler","render","classes","push","label","h","tabindex","undefined","ref","el","class","join","onAnimationEnd","role"],"sources":["./src/components/q2-tooltip/styles.scss?tag=q2-tooltip&encapsulation=shadow","./src/components/q2-tooltip/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host([block]) {\n    display: block;\n}\n\n.tooltip {\n    --comp-background: #{var-list(--tct-tooltip-background, var-prefixer(tooltip-background-color), --t-top-a3, rgba(13, 13, 13, 0.85))};\n    --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);\n    --comp-offset: #{var-list(var-prefixer(tooltip-offset), --comp-offset-default)};\n    --comp-position: #{var-list(var-prefixer(tooltip-position), --app-scale-1x, 5px)};\n    --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);\n    --comp-body-offset: #{var-list(var-prefixer(tooltip-body-offset), --comp-body-offset-default)};\n    --comp-duration: #{var-list(var-prefixer(tooltip-transition-duration), --app-duration-1, 0.2s)};\n    --comp-visible-duration: #{var-list(var-prefixer(tooltip-transition-visible-duration), 2s)};\n    --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 0s)};\n\n    display: inline-block;\n    position: relative;\n\n    &:hover {\n        --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 1s)};\n    }\n\n    // Tooltip arrow\n    &:before {\n        position: absolute;\n        z-index: 2;\n        width: 0;\n        height: 0;\n        color: var(--comp-background);\n        pointer-events: none;\n        content: '';\n        border: var-list(var-prefixer(tooltip-arrow-size), --app-scale-1x, 5px) solid transparent;\n    }\n\n    // Tooltip bubble\n    &:after {\n        --comp-padding: #{var-list(--app-scale-1x, 5px)} 8px;\n\n        position: absolute;\n        z-index: 1;\n        padding: var-list(var-prefixer(tooltip-padding), --comp-padding);\n        font-weight: var-list(var-prefixer(tooltip-font-weight), 600);\n        font-size: var-list(var-prefixer(tooltip-font-size), --app-font-size-small, 12px);\n        line-height: 1.5;\n        color: var-list(var-prefixer(tooltip-color), --app-white, #ffffff);\n        text-align: center;\n        text-decoration: none;\n        text-shadow: none;\n        text-transform: none;\n        letter-spacing: normal;\n        word-wrap: break-word;\n        white-space: pre;\n        pointer-events: none;\n        content: attr(aria-label);\n        background: var(--comp-background);\n        border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 3px);\n    }\n\n    &:before,\n    &:after {\n        display: inline-block;\n        visibility: hidden;\n        opacity: 0;\n        transition: all var(--comp-duration) ease-in-out var(--comp-delay);\n    }\n\n    :host([block]) & {\n        display: block;\n    }\n\n    // When to show the tooltip\n    &:hover,\n    &.has-keyboard-focus:focus-within,\n    :host([persistent]) & {\n        &:before,\n        &:after {\n            text-decoration: none;\n            visibility: visible;\n            opacity: 1;\n        }\n    }\n\n    @keyframes tooltippedFade {\n        from {\n            opacity: 0;\n        }\n\n        to {\n            opacity: 1;\n        }\n    }\n\n    &.has-generic-focus:focus-within {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade, tooltippedFade;\n            animation-direction: normal, reverse;\n            animation-duration: var(--comp-duration);\n            animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));\n        }\n    }\n    &.has-generic-focus-out {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade;\n            animation-direction: reverse;\n            animation-duration: var(--comp-duration);\n        }\n    }\n\n    :host([multiline]) & {\n        &:after {\n            width: max-content;\n            max-width: var-list(var-prefixer(tooltip-max-width), 200px);\n            word-break: break-word;\n            word-wrap: normal;\n            white-space: pre-line;\n            border-collapse: separate;\n            text-align: left;\n        }\n\n        :host([position='s']) &,\n        :host([position='n']) & {\n            &:after {\n                right: auto;\n                left: 50%;\n                transform: translateX(-50%);\n            }\n        }\n\n        :host([position='w']) &,\n        :host([position='e']) & {\n            &:after {\n                right: 100%;\n            }\n        }\n\n        &:hover,\n        &:active,\n        &:focus {\n            &:after {\n                display: table-cell;\n            }\n        }\n\n        &:focus-within {\n            &:after {\n                display: table-cell;\n            }\n        }\n    }\n\n    // Below\n    :host([position='s']) &,\n    :host([position='se']) &,\n    :host([position='sw']) & {\n        &:after {\n            top: 100%;\n            right: 50%;\n            margin-top: var(--comp-position);\n        }\n\n        &:before {\n            top: auto;\n            right: 50%;\n            bottom: var(--comp-offset);\n            margin-right: var(--comp-offset);\n            border-bottom-color: var(--comp-background);\n        }\n    }\n\n    // Above\n    :host([position='n']) &,\n    :host([position='ne']) &,\n    :host([position='nw']) & {\n        &:after {\n            right: 50%;\n            bottom: 100%;\n            margin-bottom: var(--comp-position);\n        }\n\n        &:before {\n            top: var(--comp-offset);\n            right: 50%;\n            bottom: auto;\n            margin-right: var(--comp-offset);\n            border-top-color: var(--comp-background);\n        }\n    }\n\n    :host([position='se']) &,\n    :host([position='ne']) & {\n        &:after {\n            right: auto;\n            left: 50%;\n            margin-left: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='sw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='nw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    // Centered\n    :host([position='s']) &,\n    :host([position='n']) & {\n        &:after {\n            transform: translateX(50%);\n        }\n    }\n\n    // Left side\n    :host([position='w']) & {\n        &:after {\n            right: 100%;\n            bottom: 50%;\n            margin-right: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            bottom: 50%;\n            left: var(--comp-offset);\n            margin-top: var(--comp-offset);\n            border-left-color: var(--comp-background);\n        }\n    }\n\n    // Right side\n    :host([position='e']) & {\n        &:after {\n            bottom: 50%;\n            left: 100%;\n            margin-left: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            right: var(--comp-offset);\n            bottom: 50%;\n            margin-top: var(--comp-offset);\n            border-right-color: var(--comp-background);\n        }\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Listen, State } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-tooltip',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Tooltip implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) block: boolean;\n    @Prop({ reflect: true }) multiline: boolean;\n    @Prop({ reflect: true }) persistent: boolean;\n    @Prop({ reflect: true }) immediate: boolean;\n    @Prop({ reflect: true }) focusable: boolean = false;\n    @Prop({ reflect: true }) position: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se' = 'n';\n\n    @Element() hostElement: HTMLElement;\n    @State() focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';\n\n    tooltipElement: HTMLDivElement;\n    animationEndCount = 0;\n\n    /// LifeCycle Hooks ///\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    /// Getters ///\n    get shouldBeVisible() {\n        if (this.persistent) return true;\n        return this.hostElement.matches(':hover, :focus-within');\n    }\n\n    /// Helpers //\n    checkFocusClass() {\n        if (!this.shouldBeVisible) return;\n        const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);\n        this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';\n        if (isKeyboardFocus) return;\n    }\n\n    hideTooltip() {\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    animationEndHandler() {\n        this.animationEndCount = this.animationEndCount + 1;\n        const { focusClass, animationEndCount } = this;\n\n        // animationEnd is fired once for :before and once for :after pseudo elements\n        // there are multiple animations defined for .has-generic-focus\n        // so we need to wait for all of them to finish before we can remove the class\n        if (focusClass === 'has-generic-focus-out' || (focusClass === 'has-generic-focus' && animationEndCount === 4)) {\n            this.focusClass = null;\n            this.animationEndCount = 0;\n        }\n    }\n\n    findFocusVisibleElement(element: Element) {\n        if (!element) return;\n        if (element.shadowRoot) element = this.findFocusVisibleElement(element.shadowRoot.activeElement);\n        return element?.matches(':focus-visible') ? element : null;\n    }\n\n    /// Listeners ///\n    @Listen('keyup')\n    keyUpHandler(event: KeyboardEvent) {\n        switch (event.key) {\n            case 'Esc':\n            case 'Escape':\n                this.hideTooltip();\n                break;\n        }\n    }\n\n    @Listen('focus', { capture: true })\n    focusCaptureHandler() {\n        this.checkFocusClass();\n    }\n\n    @Listen('focus')\n    focusHandler(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.focusable) return;\n        this.tooltipElement.focus();\n    }\n\n    @Listen('focusout')\n    focusOutHandler() {\n        if (this.shouldBeVisible) return;\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    render() {\n        const { focusClass } = this;\n        const classes = ['tooltip'];\n        if (focusClass) classes.push(focusClass);\n\n        return this.label ? (\n            <div\n                tabindex={this.focusable ? 0 : undefined}\n                ref={el => (this.tooltipElement = el)}\n                class={classes.join(' ')}\n                aria-label={this.label}\n                onAnimationEnd={() => this.animationEndHandler()}\n                role=\"tooltip\"\n                test-id=\"tooltipContainer\"\n            >\n                <slot />\n            </div>\n        ) : (\n            <slot />\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,ouM,MCQLC,EAAS,M,yBAalBC,KAAAC,kBAAoB,E,qIAP0B,M,cACyC,I,0BASvFC,mBACIC,EAAcH,KAAKI,Y,CAInBC,sBACA,GAAIL,KAAKM,WAAY,OAAO,KAC5B,OAAON,KAAKI,YAAYG,QAAQ,wB,CAIpCC,kBACI,IAAKR,KAAKK,gBAAiB,OAC3B,MAAMI,IAAoBT,KAAKU,wBAAwBC,SAASC,eAChEZ,KAAKa,WAAaJ,EAAkB,qBAAuB,oBAC3D,GAAIA,EAAiB,M,CAGzBK,cACI,GAAId,KAAKa,aAAe,oBAAqBb,KAAKa,WAAa,6BAC1Db,KAAKa,WAAa,I,CAG3BE,sBACIf,KAAKC,kBAAoBD,KAAKC,kBAAoB,EAClD,MAAMY,WAAEA,EAAUZ,kBAAEA,GAAsBD,KAK1C,GAAIa,IAAe,yBAA4BA,IAAe,qBAAuBZ,IAAsB,EAAI,CAC3GD,KAAKa,WAAa,KAClBb,KAAKC,kBAAoB,C,EAIjCS,wBAAwBM,GACpB,IAAKA,EAAS,OACd,GAAIA,EAAQC,WAAYD,EAAUhB,KAAKU,wBAAwBM,EAAQC,WAAWL,eAClF,OAAOI,IAAO,MAAPA,SAAO,SAAPA,EAAST,QAAQ,mBAAoBS,EAAU,I,CAK1DE,aAAaC,GACT,OAAQA,EAAMC,KACV,IAAK,MACL,IAAK,SACDpB,KAAKc,cACL,M,CAKZO,sBACIrB,KAAKQ,iB,CAITc,aAAaH,GACT,IAAKI,EAAmBJ,EAAOnB,KAAKI,aAAc,OAClD,IAAKJ,KAAKwB,UAAW,OACrBxB,KAAKyB,eAAeC,O,CAIxBC,kBACI,GAAI3B,KAAKK,gBAAiB,OAC1B,GAAIL,KAAKa,aAAe,oBAAqBb,KAAKa,WAAa,6BAC1Db,KAAKa,WAAa,I,CAG3Be,SACI,MAAMf,WAAEA,GAAeb,KACvB,MAAM6B,EAAU,CAAC,WACjB,GAAIhB,EAAYgB,EAAQC,KAAKjB,GAE7B,OAAOb,KAAK+B,MACRC,EAAA,OACIC,SAAUjC,KAAKwB,UAAY,EAAIU,UAC/BC,IAAKC,GAAOpC,KAAKyB,eAAiBW,EAClCC,MAAOR,EAAQS,KAAK,KAAI,aACZtC,KAAK+B,MACjBQ,eAAgB,IAAMvC,KAAKe,sBAC3ByB,KAAK,UAAS,UACN,oBAERR,EAAA,cAGJA,EAAA,Y"}

package/dist/q2-tecton-elements/p-65ab48b2.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as a,h as r,F as i,g as e}from"./p-277dc8cd.js";import{b as o,o as s,i as c}from"./p-75ad4639.js";const n="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{position:relative;width:100%;text-align:start;height:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)))}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}:host(:not([is-static])) .container{--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))))}:host(:not([is-static])) .container.clickable{cursor:pointer}@media (hover: hover){:host(:not([is-static])) .container.clickable{--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))))}:host(:not([is-static])) .container.clickable:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--const-double-focus-ring)}:host(:not([is-static])) .container.clickable:hover{box-shadow:var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:focus:hover{box-shadow:var(--const-double-focus-ring), var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}}:host(:not([is-static])) .container.is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}:host(:not([is-static])) .container.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";const d=["primary","secondary","tertiary","accent-1","accent-2","accent-3","accent-4","accent-5","accent-6","accent-7","accent-8","accent-9","accent-10","accent-11","accent-12"];const h=["info","success","warning","alert"];const l=class{constructor(r){t(this,r);this.click=a(this,"click",7);this.handleClick=t=>{if(this.url)return true;t.preventDefault();t.stopPropagation();this.click.emit()};this.title=undefined;this.description=undefined;this.avatarName=undefined;this.avatarInitials=undefined;this.avatarIcon=undefined;this.avatarSrc=undefined;this.isSmall=undefined;this.bar=undefined;this.isStatic=undefined;this.isTouch=o();this.url=undefined;this.target=undefined;this.type="clickable";this.isAutoTouch=false;this.isAutoSmall=false}componentWillLoad(){this.checkBar()}componentDidLoad(){const{hostElement:t,clickableElement:a}=this;t.click=()=>a.click();s(this.hostElement);this.resizeObserver=new ResizeObserver((()=>this.determineAutoSmall()));this.resizeObserver.observe(this.hostElement)}disconnectedCallback(){this.resizeObserver=null}onHostElementFocus(t){if(!c(t,this.hostElement))return;this.clickableElement.focus()}checkBar(){const{bar:t}=this;if(!t)return;if(d.includes(t)){this.barColor=`var(--t-${t})`}else if(h.includes(t)){this.barColor=`var(--const-stoplight-${t})`}else{this.barColor=t}}determineAutoTouch(){if(this.hostElement.hasAttribute("is-touch"))return;this.isAutoTouch=o()}determineAutoSmall(){var t,a;if(this.isStatic)return;if(this.hostElement.hasAttribute("is-small"))return;const{containerElement:r,avatarElement:i}=this;const e=(t=i===null||i===void 0?void 0:i.offsetWidth)!==null&&t!==void 0?t:0;const o=(a=r===null||r===void 0?void 0:r.offsetWidth)!==null&&a!==void 0?a:0;const s=e+o;this.isAutoSmall=s<350}generateAvatar(){const{avatarName:t,avatarInitials:a,avatarSrc:i,avatarIcon:e}=this;if(e){return r("q2-icon",{type:e,ref:t=>this.avatarElement=t,"test-id":"avatar"})}else if(t||a||i){return r("q2-avatar",{name:t,initials:a,src:i,ref:t=>this.avatarElement=t,"test-id":"avatar"})}}generateContent(){return r(i,null,this.bar&&r("div",{class:"bar","test-id":"bar",style:{"--comp-bar-color":this.barColor}}),this.generateAvatar(),r("div",{class:"content","test-id":"contentContainer",ref:t=>this.containerElement=t},this.title&&r("h3",{"test-id":"title"},this.title),this.description&&r("p",{"test-id":"description"},this.description),r("slot",null)),this.isTouch&&!this.isStatic&&r("q2-icon",{"test-id":"touchIndicator",type:"chevron-right",class:"touch-indicator"}))}generateContainerClasses(){const{isSmall:t,isAutoSmall:a,avatarName:r,avatarInitials:i,avatarSrc:e,avatarIcon:o,isTouch:s,isAutoTouch:c,isStatic:n,type:d}=this;const h=["container",d];const l=t||a;const v=s||c;const p=r||i||e||o;if(l)h.push("is-small");if(v&&!n)h.push("is-touch");if(p)h.push("has-avatar");if(n)h.push("is-static");return h.join(" ")}render(){const{url:t,isStatic:a,type:i}=this;if(a||i==="non-clickable")return r("div",{ref:t=>this.clickableElement=t,class:this.generateContainerClasses(),"test-id":"clickableElement"},this.generateContent());else if(!!t)return r("a",{ref:t=>this.clickableElement=t,href:this.url,class:this.generateContainerClasses(),target:this.target,rel:"noopener noreferrer","test-id":"clickableElement",onClick:this.handleClick},this.generateContent());else return r("button",{ref:t=>this.clickableElement=t,class:this.generateContainerClasses(),"test-id":"clickableElement",type:"button",onClick:this.handleClick},this.generateContent())}get hostElement(){return e(this)}static get watchers(){return{bar:["checkBar"]}}};l.style=n;export{l as q2_card};
+//# sourceMappingURL=p-65ab48b2.entry.js.map

package/dist/q2-tecton-elements/{p-077107c1.entry.js.map → p-65ab48b2.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","SUPPORTED_THEME_COLORS","STOPLIGHT_COLORS","Q2Card","this","handleClick","event","url","preventDefault","stopPropagation","click","emit","isTouchDevice","componentWillLoad","checkBar","componentDidLoad","hostElement","clickableElement","overrideFocus","resizeObserver","ResizeObserver","determineAutoSmall","observe","disconnectedCallback","onHostElementFocus","isEventFromElement","focus","bar","includes","barColor","determineAutoTouch","hasAttribute","isAutoTouch","isStatic","containerElement","avatarElement","avatarWidth","_a","offsetWidth","containerWidth","_b","totalWidth","isAutoSmall","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","type","ref","e","name","initials","src","generateContent","Fragment","class","style","title","description","isTouch","generateContainerClasses","isSmall","result","showSmall","showTouch","hasAvatar","push","join","render","href","target","rel","onClick"],"sources":["./src/components/q2-card/styles.scss?tag=q2-card&encapsulation=shadow","./src/components/q2-card/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    position: relative;\n    width: 100%;\n    text-align: start;\n    height: 100%;\n    display: grid;\n    gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n    margin: 0;\n    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n\n    --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n    --comp-chevron-size: 0;\n    --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n    --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n    &.is-small {\n        --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n    }\n    &.has-avatar {\n        grid-template-columns: var(--comp-avatar-size) 1fr;\n        --tct-avatar-width: var(--comp-avatar-size);\n        --tct-avatar-height: var(--comp-avatar-size);\n        --tct-icon-size: var(--comp-avatar-size);\n    }\n\n    :host([bar][is-static]) & {\n        padding-left: var(--comp-card-padding);\n    }\n\n    :host(:not([is-static])) & {\n        --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 3px)};\n        --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n        border: none;\n        background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n        padding: var(--comp-card-padding);\n        text-decoration: none;\n        border-width: var(--comp-border-width);\n        border-color: var-list(var-prefixer(card-border-color), transparent);\n        border-style: var-list(--tct-card-border-style, solid);\n        border-radius: var(--comp-border-radius);\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        box-shadow: var-list(var-prefixer(card-box-shadow), --app-shadow-2, unquote('0 3px 6px rgba(0, 0, 0, 0.3)'));\n\n        &.clickable {\n            cursor: pointer;\n            @media (hover: hover) {\n                --comp-card-hover-box-shadow: #{var-list(\n                        var-prefixer(card-hover-box-shadow),\n                        --app-shadow-3,\n                        unquote('0 4px 12px rgba(0, 0, 0, 0.3)')\n                    )};\n\n                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);\n                }\n\n                &:active {\n                    box-shadow: var-list(\n                        var-prefixer(card-active-box-shadow),\n                        --app-shadow-1,\n                        unquote('0 2px 4px rgba(0, 0, 0, 0.3)')\n                    );\n                }\n            }\n        }\n\n        &.is-touch {\n            --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n            grid-template-columns: 1fr var(--comp-chevron-size);\n        }\n\n        &.has-avatar.is-touch {\n            grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\n        }\n    }\n}\n\n.content {\n    overflow: hidden;\n    display: grid;\n    gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n    align-content: start;\n}\n\nh3,\np {\n    margin: 0;\n    padding: 0;\n    line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n    font-weight: var-list(var-prefixer(card-font-weight), 600);\n    font-size: var-list(var-prefixer(card-font-size), 17px);\n    @include line-clamp(1);\n}\n\np {\n    @include line-clamp(2);\n}\n\n.bar {\n    --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n    border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\n    position: absolute;\n    inset: 0 auto auto 0;\n    width: var(--comp-bar-width);\n    background: var(--comp-bar-color);\n    height: 100%;\n}\n\n.touch-indicator {\n    align-self: center;\n    --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Event,\n    h,\n    Fragment,\n    Listen,\n    Element,\n    EventEmitter,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst SUPPORTED_THEME_COLORS = [\n    'primary',\n    'secondary',\n    'tertiary',\n    'accent-1',\n    'accent-2',\n    'accent-3',\n    'accent-4',\n    'accent-5',\n    'accent-6',\n    'accent-7',\n    'accent-8',\n    'accent-9',\n    'accent-10',\n    'accent-11',\n    'accent-12',\n];\nconst STOPLIGHT_COLORS = ['info', 'success', 'warning', 'alert'];\n\n@Component({\n    tag: 'q2-card',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Card implements ComponentInterface {\n    @Prop({ reflect: true }) title: string;\n    @Prop({ reflect: true }) description: string;\n    @Prop({ reflect: true }) avatarName: string;\n    @Prop({ reflect: true }) avatarInitials: string;\n    @Prop({ reflect: true }) avatarIcon: string;\n    @Prop({ reflect: true }) avatarSrc: string;\n    @Prop({ reflect: true }) isSmall: boolean;\n    @Prop({ reflect: true }) bar: string;\n    @Prop({ reflect: true }) isStatic: boolean;\n    @Prop({ reflect: true }) isTouch: boolean = isTouchDevice();\n    @Prop({ reflect: true }) url: string;\n    @Prop({ reflect: true }) target: '_self' | '_blank' | '_parent' | '_top';\n    @Prop({ reflect: true }) type: 'clickable' | 'non-clickable' = 'clickable';\n\n    @State() isAutoTouch: boolean = false;\n    @State() isAutoSmall: boolean = false;\n    @Element() hostElement: HTMLElement;\n    @Event() click: EventEmitter;\n\n    clickableElement: HTMLElement;\n    containerElement: HTMLElement;\n    avatarElement: HTMLElement;\n    resizeObserver: ResizeObserver;\n    barColor: string;\n\n    componentWillLoad() {\n        this.checkBar();\n    }\n\n    componentDidLoad() {\n        const { hostElement, clickableElement } = this;\n        hostElement.click = () => clickableElement.click();\n        overrideFocus(this.hostElement);\n\n        this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n        this.resizeObserver.observe(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver = null;\n    }\n\n    handleClick = (event: MouseEvent) => {\n        if (this.url) return true;\n        event.preventDefault();\n        event.stopPropagation();\n        this.click.emit();\n    };\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.clickableElement.focus();\n    }\n\n    @Watch('bar')\n    checkBar() {\n        const { bar } = this;\n        if (!bar) return;\n\n        if (SUPPORTED_THEME_COLORS.includes(bar)) {\n            this.barColor = `var(--t-${bar})`;\n        } else if (STOPLIGHT_COLORS.includes(bar)) {\n            this.barColor = `var(--const-stoplight-${bar})`;\n        } else {\n            this.barColor = bar;\n        }\n    }\n\n    determineAutoTouch() {\n        if (this.hostElement.hasAttribute('is-touch')) return;\n        this.isAutoTouch = isTouchDevice();\n    }\n\n    determineAutoSmall() {\n        if (this.isStatic) return;\n        if (this.hostElement.hasAttribute('is-small')) return;\n        const { containerElement, avatarElement } = this;\n        const avatarWidth = avatarElement?.offsetWidth ?? 0;\n        const containerWidth = containerElement?.offsetWidth ?? 0;\n        const totalWidth = avatarWidth + containerWidth;\n        this.isAutoSmall = totalWidth < 350;\n    }\n\n    generateAvatar() {\n        const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n        if (avatarIcon) {\n            return (\n                <q2-icon\n                    type={avatarIcon}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-icon>\n            );\n        } else if (avatarName || avatarInitials || avatarSrc) {\n            return (\n                <q2-avatar\n                    name={avatarName}\n                    initials={avatarInitials}\n                    src={avatarSrc}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-avatar>\n            );\n        }\n    }\n\n    generateContent() {\n        return (\n            <Fragment>\n                {this.bar && (\n                    <div\n                        class=\"bar\"\n                        test-id=\"bar\"\n                        style={{ '--comp-bar-color': this.barColor }}\n                    ></div>\n                )}\n                {this.generateAvatar()}\n                <div\n                    class=\"content\"\n                    test-id=\"contentContainer\"\n                    ref={e => (this.containerElement = e)}\n                >\n                    {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n                    {this.description && <p test-id=\"description\">{this.description}</p>}\n                    <slot />\n                </div>\n                {this.isTouch && !this.isStatic && (\n                    <q2-icon\n                        test-id=\"touchIndicator\"\n                        type=\"chevron-right\"\n                        class=\"touch-indicator\"\n                    ></q2-icon>\n                )}\n            </Fragment>\n        );\n    }\n\n    generateContainerClasses() {\n        const {\n            isSmall,\n            isAutoSmall,\n            avatarName,\n            avatarInitials,\n            avatarSrc,\n            avatarIcon,\n            isTouch,\n            isAutoTouch,\n            isStatic,\n            type,\n        } = this;\n        const result = ['container', type];\n        const showSmall = isSmall || isAutoSmall;\n        const showTouch = isTouch || isAutoTouch;\n        const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;\n        if (showSmall) result.push('is-small');\n        if (showTouch && !isStatic) result.push('is-touch');\n        if (hasAvatar) result.push('has-avatar');\n        if (isStatic) result.push('is-static');\n\n        return result.join(' ');\n    }\n\n    render() {\n        const { url, isStatic, type } = this;\n        if (isStatic || type === 'non-clickable')\n            return (\n                <div\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                >\n                    {this.generateContent()}\n                </div>\n            );\n        else if (!!url)\n            return (\n                <a\n                    ref={e => (this.clickableElement = e)}\n                    href={this.url}\n                    class={this.generateContainerClasses()}\n                    target={this.target}\n                    rel=\"noopener noreferrer\"\n                    test-id=\"clickableElement\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </a>\n            );\n        else\n            return (\n                <button\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                    type=\"button\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </button>\n            );\n    }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stylesCss","SUPPORTED_THEME_COLORS","STOPLIGHT_COLORS","Q2Card","this","handleClick","event","url","preventDefault","stopPropagation","click","emit","isTouchDevice","componentWillLoad","checkBar","componentDidLoad","hostElement","clickableElement","overrideFocus","resizeObserver","ResizeObserver","determineAutoSmall","observe","disconnectedCallback","onHostElementFocus","isEventFromElement","focus","bar","includes","barColor","determineAutoTouch","hasAttribute","isAutoTouch","isStatic","containerElement","avatarElement","avatarWidth","_a","offsetWidth","containerWidth","_b","totalWidth","isAutoSmall","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","type","ref","e","name","initials","src","generateContent","Fragment","class","style","title","description","isTouch","generateContainerClasses","isSmall","result","showSmall","showTouch","hasAvatar","push","join","render","href","target","rel","onClick"],"sources":["./src/components/q2-card/styles.scss?tag=q2-card&encapsulation=shadow","./src/components/q2-card/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    position: relative;\n    width: 100%;\n    text-align: start;\n    height: 100%;\n    display: grid;\n    gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n    margin: 0;\n    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n\n    --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n    --comp-chevron-size: 0;\n    --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n    --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n    &.is-small {\n        --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n    }\n    &.has-avatar {\n        grid-template-columns: var(--comp-avatar-size) 1fr;\n        --tct-avatar-width: var(--comp-avatar-size);\n        --tct-avatar-height: var(--comp-avatar-size);\n        --tct-icon-size: var(--comp-avatar-size);\n    }\n\n    :host([bar][is-static]) & {\n        padding-left: var(--comp-card-padding);\n    }\n\n    :host(:not([is-static])) & {\n        --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 3px)};\n        --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n        border: none;\n        background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n        padding: var(--comp-card-padding);\n        text-decoration: none;\n        border-width: var(--comp-border-width);\n        border-color: var-list(var-prefixer(card-border-color), transparent);\n        border-style: var-list(--tct-card-border-style, solid);\n        border-radius: var(--comp-border-radius);\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        box-shadow: var-list(var-prefixer(card-box-shadow), --app-shadow-2, unquote('0 3px 6px rgba(0, 0, 0, 0.3)'));\n\n        &.clickable {\n            cursor: pointer;\n            @media (hover: hover) {\n                --comp-card-hover-box-shadow: #{var-list(\n                        var-prefixer(card-hover-box-shadow),\n                        --app-shadow-3,\n                        unquote('0 4px 12px rgba(0, 0, 0, 0.3)')\n                    )};\n\n                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);\n                }\n\n                &:active {\n                    box-shadow: var-list(\n                        var-prefixer(card-active-box-shadow),\n                        --app-shadow-1,\n                        unquote('0 2px 4px rgba(0, 0, 0, 0.3)')\n                    );\n                }\n            }\n        }\n\n        &.is-touch {\n            --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n            grid-template-columns: 1fr var(--comp-chevron-size);\n        }\n\n        &.has-avatar.is-touch {\n            grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\n        }\n    }\n}\n\n.content {\n    overflow: hidden;\n    display: grid;\n    gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n    align-content: start;\n}\n\nh3,\np {\n    margin: 0;\n    padding: 0;\n    line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n    font-weight: var-list(var-prefixer(card-font-weight), 600);\n    font-size: var-list(var-prefixer(card-font-size), 17px);\n    @include line-clamp(1);\n}\n\np {\n    @include line-clamp(2);\n}\n\n.bar {\n    --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n    border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\n    position: absolute;\n    inset: 0 auto auto 0;\n    width: var(--comp-bar-width);\n    background: var(--comp-bar-color);\n    height: 100%;\n}\n\n.touch-indicator {\n    align-self: center;\n    --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Event,\n    h,\n    Fragment,\n    Listen,\n    Element,\n    EventEmitter,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst SUPPORTED_THEME_COLORS = [\n    'primary',\n    'secondary',\n    'tertiary',\n    'accent-1',\n    'accent-2',\n    'accent-3',\n    'accent-4',\n    'accent-5',\n    'accent-6',\n    'accent-7',\n    'accent-8',\n    'accent-9',\n    'accent-10',\n    'accent-11',\n    'accent-12',\n];\nconst STOPLIGHT_COLORS = ['info', 'success', 'warning', 'alert'];\n\n@Component({\n    tag: 'q2-card',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Card implements ComponentInterface {\n    @Prop({ reflect: true }) title: string;\n    @Prop({ reflect: true }) description: string;\n    @Prop({ reflect: true }) avatarName: string;\n    @Prop({ reflect: true }) avatarInitials: string;\n    @Prop({ reflect: true }) avatarIcon: string;\n    @Prop({ reflect: true }) avatarSrc: string;\n    @Prop({ reflect: true }) isSmall: boolean;\n    @Prop({ reflect: true }) bar: string;\n    @Prop({ reflect: true }) isStatic: boolean;\n    @Prop({ reflect: true }) isTouch: boolean = isTouchDevice();\n    @Prop({ reflect: true }) url: string;\n    @Prop({ reflect: true }) target: '_self' | '_blank' | '_parent' | '_top';\n    @Prop({ reflect: true }) type: 'clickable' | 'non-clickable' = 'clickable';\n\n    @State() isAutoTouch: boolean = false;\n    @State() isAutoSmall: boolean = false;\n    @Element() hostElement: HTMLElement;\n    @Event() click: EventEmitter;\n\n    clickableElement: HTMLElement;\n    containerElement: HTMLElement;\n    avatarElement: HTMLElement;\n    resizeObserver: ResizeObserver;\n    barColor: string;\n\n    componentWillLoad() {\n        this.checkBar();\n    }\n\n    componentDidLoad() {\n        const { hostElement, clickableElement } = this;\n        hostElement.click = () => clickableElement.click();\n        overrideFocus(this.hostElement);\n\n        this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n        this.resizeObserver.observe(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver = null;\n    }\n\n    handleClick = (event: MouseEvent) => {\n        if (this.url) return true;\n        event.preventDefault();\n        event.stopPropagation();\n        this.click.emit();\n    };\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.clickableElement.focus();\n    }\n\n    @Watch('bar')\n    checkBar() {\n        const { bar } = this;\n        if (!bar) return;\n\n        if (SUPPORTED_THEME_COLORS.includes(bar)) {\n            this.barColor = `var(--t-${bar})`;\n        } else if (STOPLIGHT_COLORS.includes(bar)) {\n            this.barColor = `var(--const-stoplight-${bar})`;\n        } else {\n            this.barColor = bar;\n        }\n    }\n\n    determineAutoTouch() {\n        if (this.hostElement.hasAttribute('is-touch')) return;\n        this.isAutoTouch = isTouchDevice();\n    }\n\n    determineAutoSmall() {\n        if (this.isStatic) return;\n        if (this.hostElement.hasAttribute('is-small')) return;\n        const { containerElement, avatarElement } = this;\n        const avatarWidth = avatarElement?.offsetWidth ?? 0;\n        const containerWidth = containerElement?.offsetWidth ?? 0;\n        const totalWidth = avatarWidth + containerWidth;\n        this.isAutoSmall = totalWidth < 350;\n    }\n\n    generateAvatar() {\n        const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n        if (avatarIcon) {\n            return (\n                <q2-icon\n                    type={avatarIcon}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-icon>\n            );\n        } else if (avatarName || avatarInitials || avatarSrc) {\n            return (\n                <q2-avatar\n                    name={avatarName}\n                    initials={avatarInitials}\n                    src={avatarSrc}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-avatar>\n            );\n        }\n    }\n\n    generateContent() {\n        return (\n            <Fragment>\n                {this.bar && (\n                    <div\n                        class=\"bar\"\n                        test-id=\"bar\"\n                        style={{ '--comp-bar-color': this.barColor }}\n                    ></div>\n                )}\n                {this.generateAvatar()}\n                <div\n                    class=\"content\"\n                    test-id=\"contentContainer\"\n                    ref={e => (this.containerElement = e)}\n                >\n                    {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n                    {this.description && <p test-id=\"description\">{this.description}</p>}\n                    <slot />\n                </div>\n                {this.isTouch && !this.isStatic && (\n                    <q2-icon\n                        test-id=\"touchIndicator\"\n                        type=\"chevron-right\"\n                        class=\"touch-indicator\"\n                    ></q2-icon>\n                )}\n            </Fragment>\n        );\n    }\n\n    generateContainerClasses() {\n        const {\n            isSmall,\n            isAutoSmall,\n            avatarName,\n            avatarInitials,\n            avatarSrc,\n            avatarIcon,\n            isTouch,\n            isAutoTouch,\n            isStatic,\n            type,\n        } = this;\n        const result = ['container', type];\n        const showSmall = isSmall || isAutoSmall;\n        const showTouch = isTouch || isAutoTouch;\n        const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;\n        if (showSmall) result.push('is-small');\n        if (showTouch && !isStatic) result.push('is-touch');\n        if (hasAvatar) result.push('has-avatar');\n        if (isStatic) result.push('is-static');\n\n        return result.join(' ');\n    }\n\n    render() {\n        const { url, isStatic, type } = this;\n        if (isStatic || type === 'non-clickable')\n            return (\n                <div\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                >\n                    {this.generateContent()}\n                </div>\n            );\n        else if (!!url)\n            return (\n                <a\n                    ref={e => (this.clickableElement = e)}\n                    href={this.url}\n                    class={this.generateContainerClasses()}\n                    target={this.target}\n                    rel=\"noopener noreferrer\"\n                    test-id=\"clickableElement\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </a>\n            );\n        else\n            return (\n                <button\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                    type=\"button\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </button>\n            );\n    }\n}\n"],"mappings":"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"}