q2-tecton-elements 1.19.1 → 1.21.0

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

@@ -1 +0,0 @@
-import{r as o,c as t,h as c,g as e}from"./p-926a3e80.js";import{c as r,h as i,o as a,i as h,l}from"./p-5e374fbd.js";const s=class{constructor(c){o(this,c),this.change=t(this,"change",7),this.id=`checkbox-${r()}`,this.onInputClick=o=>{const t=this.disabled||this.readonly;if((t||!!this.hostElement.onchange)&&o.preventDefault(),t)return;if(!(o.target instanceof HTMLInputElement))return;const{value:c,checked:e}=o.target;this.change.emit({value:c,checked:e}),this.inputElement.focus()},this.checked=!1,this.type=void 0,this.label=void 0,this.hideLabel=void 0,this.ariaLabel=void 0,this.indeterminate=void 0,this.disabled=void 0,this.readonly=void 0,this.value=void 0,this.name=void 0,this.hasError=void 0,this.groupDisabled=void 0,this.alignment=void 0,this.description=void 0}componentWillLoad(){i(this)}componentDidLoad(){a(this.hostElement),this.hostElement.click=()=>this.inputElement.click()}defaultChangeHandler(o){this.readonly||o.target!==this.hostElement||this.hostElement.onchange||!o.detail||(this.checked=o.detail.checked)}delegateFocus(o){h(o,this.hostElement)&&this.hostElement.shadowRoot.querySelector("input").focus()}ariaLabelObserver(){i(this)}render(){const o=["label-text"];return this.hideLabel&&o.push("sr"),c("div",{class:"container"},c("input",{ref:o=>this.inputElement=o,id:this.id,type:"checkbox",checked:this.indeterminate||this.checked||!1,disabled:!!this.disabled||!!this.groupDisabled,class:"sr",value:this.value,name:this.name||this.id,"aria-describedby":this.description?"description":void 0,"test-id":"q2CheckboxInnerCheckBox",onClick:this.onInputClick}),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(){return"favorite"===this.type?c("q2-icon",{type:"star",class:"checkbox-icon"}):"toggle"===this.type?this.generateToggleSVG():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(){return this.indeterminate?c("line",{class:"checkbox-fill indeterminate-fill",x1:"4",y1:"10",x2:"16",y2:"10"}):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"},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"},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 e(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};s.style='*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative;padding:var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0}.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(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));--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(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040)))))));--comp-control-width:var(--comp-checkbox-size);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-textA, rgba(77, 77, 77, 0.77))));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))))}: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}: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))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}label{cursor:pointer}:host([disabled]),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.checkbox-icon{--t-icon-stroke-primary:var(--comp-checkbox-outer-stroke-color);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);color:var(--comp-checkbox-outer-stroke-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));fill:var(--comp-checkbox-outer-fill-color);flex-shrink:0}:host([checked]) .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)))}:host(:focus-within) .checkbox-icon{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)))}: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([type=favorite]:focus-within) .checkbox-icon,:host([type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary: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(--comp-checkbox-favorite-fill-color);fill: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]:focus-within) .checkbox-icon,:host([checked][type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);--tct-icon-fill-primary: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))}.checkbox-fill{stroke: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}.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}.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(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))))}: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{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{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}';export{s as q2_checkbox}

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

@@ -1 +0,0 @@
-import{r as t,c as e,h as i,g as s}from"./p-926a3e80.js";import{r as n,o as a,i as o,n as r,l as h}from"./p-5e374fbd.js";const d=class{constructor(i){t(this,i),this.change=e(this,"change",7),this.titleId="title",this.contentId="content",this.onHeaderClick=()=>{this.change.emit({expanded:!this.expanded})},this.onTransitionEnd=()=>{this.expanded?this.contentHeight=void 0:this.hideContent=!0,setTimeout((()=>{this.clearResizeInterval()}),1e3)},this.onHeaderSlotChange=()=>{var t,e;const i=this.headerSlot?this.headerSlot.assignedNodes().length>0:null!==(e=null===(t=this.headerSlotWrapper)||void 0===t?void 0:t.children.length)&&void 0!==e&&e;this.hasYieldedHeader!==i&&(this.hasYieldedHeader=!!i)},this.clearResizeInterval=()=>{this.resizerFn&&clearInterval(this.resizerFn)},this.addHeaderSlotListener=()=>{if(this.headerSlot)return void this.headerSlot.addEventListener("slotchange",this.onHeaderSlotChange);const t=new MutationObserver(this.onHeaderSlotChange);t.observe(this.headerSlotWrapper,{childList:!0}),this.headerSlotMutationObserver=t},this.removeHeaderSlotListener=()=>{this.headerSlot?this.headerSlot.removeEventListener("slotchange",this.onHeaderSlotChange):this.headerSlotMutationObserver.disconnect()},this.addContentSlotListener=()=>{if(this.contentSlot)return void this.contentSlot.addEventListener("slotchange",n);const t=new MutationObserver(n);t.observe(this.contentContainer,{childList:!0,subtree:!0}),this.contentSlotMutationObserver=t},this.removeContentSlotListener=()=>{this.contentSlot?this.contentSlot.removeEventListener("slotchange",n):this.contentSlotMutationObserver.disconnect()},this.label=void 0,this.collapsible=void 0,this.noCollapseIcon=void 0,this.expanded=void 0,this.contentHeight=void 0,this.hideContent=!1,this.hasYieldedHeader=!1}componentWillLoad(){this.onHeaderSlotChange();const{collapsible:t,expanded:e}=this;this.contentHeight=t&&e?void 0:"0px",this.hideContent=!e}componentDidLoad(){this.addHeaderSlotListener(),this.addContentSlotListener(),a(this.hostElement)}disconnectedCallback(){this.removeHeaderSlotListener(),this.removeContentSlotListener()}defaultChangeHandler(t){t.target===this.hostElement&&!this.hostElement.onchange&&t.detail&&(this.expanded=t.detail.expanded)}delegateFocus(t){o(t,this.hostElement)&&this.contentContainer.focus()}async expandedObserver(t){this.clearResizeInterval(),this.resizerFn=setInterval(n,5),t?this.expandSection():this.collapseSection()}async collapseSection(){this.contentHeight=this.contentContainerHeight,await r((()=>{this.contentHeight=this.currentHeight}))}async expandSection(){this.hideContent=!1,await r((()=>{this.contentHeight=this.currentHeight}))}collapsibleObserver(){this.contentHeight=this.currentHeight}get currentHeight(){const{collapsible:t,expanded:e}=this;return t?e?this.contentContainerHeight:"0":null}get contentContainerHeight(){return`${this.contentContainer.offsetHeight||0}px`}render(){const t=this.label||this.hasYieldedHeader,e=["content-wrapper"],{collapsible:s,hideContent:n,contentHeight:a}=this;return s&&(n?e.push("is-closed"):a&&e.push("is-transitioning")),i("section",{class:"wrapper"},i("header",{class:t?"has-header":""},i("div",{class:"header-content",id:this.titleId,onClick:this.collapsible&&this.onHeaderClick},!this.hasYieldedHeader&&this.label?i("h2",{class:"title"},h(this.label)):"",i("div",{ref:t=>this.headerSlotWrapper=t,class:"header-slot-wrapper"},i("slot",{ref:t=>this.headerSlot=t,name:"q2-section-header"}))),this.collapsible&&!this.noCollapseIcon&&i("q2-btn",{label:this.label,ariaExpanded:`${!!this.expanded}`,ariaControls:this.contentId,"test-id":"toggleButton","hide-label":!0,onClick:this.onHeaderClick},i("q2-icon",{type:"chevron-up"}))),i("div",{class:e.join(" "),id:this.contentId,"aria-labelledby":this.titleId,role:"region",onTransitionEnd:this.onTransitionEnd,style:this.collapsible&&{height:this.contentHeight}},i("div",{ref:t=>this.contentContainer=t,class:"content",tabindex:"-1"},i("slot",{ref:t=>this.contentSlot=t}))))}get hostElement(){return s(this)}static get watchers(){return{expanded:["expandedObserver"],collapsible:["collapsibleObserver"]}}};d.style="*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;background-color:var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff)))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 3px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)))}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:0;font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";export{d as q2_section}