q2-tecton-elements 1.51.0 → 1.52.0

package/dist/q2-tecton-elements/p-188eb162.entry.js

@@ -1,3 +0,0 @@
-import{r as t,c as e,h as n,F as i,g as o}from"./p-a5f18e27.js";import{l as r,w as a}from"./p-15ac45d6.js";var s=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};var l={exports:{}};
-/*! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE */(function(t,e){(function(e,n){t.exports=n()})(s,(function(){const{entries:t,setPrototypeOf:e,isFrozen:n,getPrototypeOf:i,getOwnPropertyDescriptor:o}=Object;let{freeze:r,seal:a,create:s}=Object;let{apply:l,construct:c}=typeof Reflect!=="undefined"&&Reflect;if(!r){r=function t(e){return e}}if(!a){a=function t(e){return e}}if(!l){l=function t(e,n,i){return e.apply(n,i)}}if(!c){c=function t(e,n){return new e(...n)}}const f=E(Array.prototype.forEach);const u=E(Array.prototype.lastIndexOf);const d=E(Array.prototype.pop);const p=E(Array.prototype.push);const h=E(Array.prototype.splice);const m=E(String.prototype.toLowerCase);const g=E(String.prototype.toString);const b=E(String.prototype.match);const y=E(String.prototype.replace);const v=E(String.prototype.indexOf);const x=E(String.prototype.trim);const w=E(Object.prototype.hasOwnProperty);const k=E(RegExp.prototype.test);const T=A(TypeError);function E(t){return function(e){for(var n=arguments.length,i=new Array(n>1?n-1:0),o=1;o<n;o++){i[o-1]=arguments[o]}return l(t,e,i)}}function A(t){return function(){for(var e=arguments.length,n=new Array(e),i=0;i<e;i++){n[i]=arguments[i]}return c(t,n)}}function S(t,i){let o=arguments.length>2&&arguments[2]!==undefined?arguments[2]:m;if(e){e(t,null)}let r=i.length;while(r--){let e=i[r];if(typeof e==="string"){const t=o(e);if(t!==e){if(!n(i)){i[r]=t}e=t}}t[e]=true}return t}function _(t){for(let e=0;e<t.length;e++){const n=w(t,e);if(!n){t[e]=null}}return t}function R(e){const n=s(null);for(const[i,o]of t(e)){const t=w(e,i);if(t){if(Array.isArray(o)){n[i]=_(o)}else if(o&&typeof o==="object"&&o.constructor===Object){n[i]=R(o)}else{n[i]=o}}}return n}function z(t,e){while(t!==null){const n=o(t,e);if(n){if(n.get){return E(n.get)}if(typeof n.value==="function"){return E(n.value)}}t=i(t)}function n(){return null}return n}const O=r(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","section","select","shadow","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]);const L=r(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","filter","font","g","glyph","glyphref","hkern","image","line","lineargradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]);const M=r(["feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"]);const D=r(["animate","color-profile","cursor","discard","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignobject","hatch","hatchpath","mesh","meshgradient","meshpatch","meshrow","missing-glyph","script","set","solidcolor","unknown","use"]);const I=r(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover","mprescripts"]);const C=r(["maction","maligngroup","malignmark","mlongdiv","mscarries","mscarry","msgroup","mstack","msline","msrow","semantics","annotation","annotation-xml","mprescripts","none"]);const P=r(["#text"]);const F=r(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","face","for","headers","height","hidden","high","href","hreflang","id","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","nonce","noshade","novalidate","nowrap","open","optimum","pattern","placeholder","playsinline","popover","popovertarget","popovertargetaction","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","wrap","xmlns","slot"]);const N=r(["accent-height","accumulate","additive","alignment-baseline","amplitude","ascent","attributename","attributetype","azimuth","basefrequency","baseline-shift","begin","bias","by","class","clip","clippathunits","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","cx","cy","d","dx","dy","diffuseconstant","direction","display","divisor","dur","edgemode","elevation","end","exponent","fill","fill-opacity","fill-rule","filter","filterunits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","fx","fy","g1","g2","glyph-name","glyphref","gradientunits","gradienttransform","height","href","id","image-rendering","in","in2","intercept","k","k1","k2","k3","k4","kerning","keypoints","keysplines","keytimes","lang","lengthadjust","letter-spacing","kernelmatrix","kernelunitlength","lighting-color","local","marker-end","marker-mid","marker-start","markerheight","markerunits","markerwidth","maskcontentunits","maskunits","max","mask","media","method","mode","min","name","numoctaves","offset","operator","opacity","order","orient","orientation","origin","overflow","paint-order","path","pathlength","patterncontentunits","patterntransform","patternunits","points","preservealpha","preserveaspectratio","primitiveunits","r","rx","ry","radius","refx","refy","repeatcount","repeatdur","restart","result","rotate","scale","seed","shape-rendering","slope","specularconstant","specularexponent","spreadmethod","startoffset","stddeviation","stitchtiles","stop-color","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke","stroke-width","style","surfacescale","systemlanguage","tabindex","tablevalues","targetx","targety","transform","transform-origin","text-anchor","text-decoration","text-rendering","textlength","type","u1","u2","unicode","values","viewbox","visibility","version","vert-adv-y","vert-origin-x","vert-origin-y","width","word-spacing","wrap","writing-mode","xchannelselector","ychannelselector","x","x1","x2","xmlns","y","y1","y2","z","zoomandpan"]);const j=r(["accent","accentunder","align","bevelled","close","columnsalign","columnlines","columnspan","denomalign","depth","dir","display","displaystyle","encoding","fence","frame","height","href","id","largeop","length","linethickness","lspace","lquote","mathbackground","mathcolor","mathsize","mathvariant","maxsize","minsize","movablelimits","notation","numalign","open","rowalign","rowlines","rowspacing","rowspan","rspace","rquote","scriptlevel","scriptminsize","scriptsizemultiplier","selection","separator","separators","stretchy","subscriptshift","supscriptshift","symmetric","voffset","width","xmlns"]);const B=r(["xlink:href","xml:id","xlink:title","xml:space","xmlns:xlink"]);const q=a(/\{\{[\w\W]*|[\w\W]*\}\}/gm);const H=a(/<%[\w\W]*|[\w\W]*%>/gm);const U=a(/\$\{[\w\W]*/gm);const W=a(/^data-[\-\w.\u00B7-\uFFFF]+$/);const Y=a(/^aria-[\-\w]+$/);const $=a(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i);const G=a(/^(?:\w+script|data):/i);const X=a(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g);const K=a(/^html$/i);const V=a(/^[a-z][.\w]*(-[.\w]+)+$/i);var J=Object.freeze({__proto__:null,ARIA_ATTR:Y,ATTR_WHITESPACE:X,CUSTOM_ELEMENT:V,DATA_ATTR:W,DOCTYPE_NAME:K,ERB_EXPR:H,IS_ALLOWED_URI:$,IS_SCRIPT_OR_DATA:G,MUSTACHE_EXPR:q,TMPLIT_EXPR:U});const Q={element:1,attribute:2,text:3,cdataSection:4,entityReference:5,entityNode:6,progressingInstruction:7,comment:8,document:9,documentType:10,documentFragment:11,notation:12};const Z=function t(){return typeof window==="undefined"?null:window};const tt=function t(e,n){if(typeof e!=="object"||typeof e.createPolicy!=="function"){return null}let i=null;const o="data-tt-policy-suffix";if(n&&n.hasAttribute(o)){i=n.getAttribute(o)}const r="dompurify"+(i?"#"+i:"");try{return e.createPolicy(r,{createHTML(t){return t},createScriptURL(t){return t}})}catch(t){console.warn("TrustedTypes policy "+r+" could not be created.");return null}};const et=function t(){return{afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]}};function nt(){let e=arguments.length>0&&arguments[0]!==undefined?arguments[0]:Z();const n=t=>nt(t);n.version="3.2.4";n.removed=[];if(!e||!e.document||e.document.nodeType!==Q.document||!e.Element){n.isSupported=false;return n}let{document:i}=e;const o=i;const a=o.currentScript;const{DocumentFragment:l,HTMLTemplateElement:c,Node:E,Element:A,NodeFilter:_,NamedNodeMap:q=e.NamedNodeMap||e.MozNamedAttrMap,HTMLFormElement:H,DOMParser:U,trustedTypes:W}=e;const Y=A.prototype;const G=z(Y,"cloneNode");const X=z(Y,"remove");const V=z(Y,"nextSibling");const it=z(Y,"childNodes");const ot=z(Y,"parentNode");if(typeof c==="function"){const t=i.createElement("template");if(t.content&&t.content.ownerDocument){i=t.content.ownerDocument}}let rt;let at="";const{implementation:st,createNodeIterator:lt,createDocumentFragment:ct,getElementsByTagName:ft}=i;const{importNode:ut}=o;let dt=et();n.isSupported=typeof t==="function"&&typeof ot==="function"&&st&&st.createHTMLDocument!==undefined;const{MUSTACHE_EXPR:pt,ERB_EXPR:ht,TMPLIT_EXPR:mt,DATA_ATTR:gt,ARIA_ATTR:bt,IS_SCRIPT_OR_DATA:yt,ATTR_WHITESPACE:vt,CUSTOM_ELEMENT:xt}=J;let{IS_ALLOWED_URI:wt}=J;let kt=null;const Tt=S({},[...O,...L,...M,...I,...P]);let Et=null;const At=S({},[...F,...N,...j,...B]);let St=Object.seal(s(null,{tagNameCheck:{writable:true,configurable:false,enumerable:true,value:null},attributeNameCheck:{writable:true,configurable:false,enumerable:true,value:null},allowCustomizedBuiltInElements:{writable:true,configurable:false,enumerable:true,value:false}}));let _t=null;let Rt=null;let zt=true;let Ot=true;let Lt=false;let Mt=true;let Dt=false;let It=true;let Ct=false;let Pt=false;let Ft=false;let Nt=false;let jt=false;let Bt=false;let qt=true;let Ht=false;const Ut="user-content-";let Wt=true;let Yt=false;let $t={};let Gt=null;const Xt=S({},["annotation-xml","audio","colgroup","desc","foreignobject","head","iframe","math","mi","mn","mo","ms","mtext","noembed","noframes","noscript","plaintext","script","style","svg","template","thead","title","video","xmp"]);let Kt=null;const Vt=S({},["audio","video","img","source","image","track"]);let Jt=null;const Qt=S({},["alt","class","for","id","label","name","pattern","placeholder","role","summary","title","value","style","xmlns"]);const Zt="http://www.w3.org/1998/Math/MathML";const te="http://www.w3.org/2000/svg";const ee="http://www.w3.org/1999/xhtml";let ne=ee;let ie=false;let oe=null;const re=S({},[Zt,te,ee],g);let ae=S({},["mi","mo","mn","ms","mtext"]);let se=S({},["annotation-xml"]);const le=S({},["title","style","font","a","script"]);let ce=null;const fe=["application/xhtml+xml","text/html"];const ue="text/html";let de=null;let pe=null;const he=i.createElement("form");const me=function t(e){return e instanceof RegExp||e instanceof Function};const ge=function t(){let e=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};if(pe&&pe===e){return}if(!e||typeof e!=="object"){e={}}e=R(e);ce=fe.indexOf(e.PARSER_MEDIA_TYPE)===-1?ue:e.PARSER_MEDIA_TYPE;de=ce==="application/xhtml+xml"?g:m;kt=w(e,"ALLOWED_TAGS")?S({},e.ALLOWED_TAGS,de):Tt;Et=w(e,"ALLOWED_ATTR")?S({},e.ALLOWED_ATTR,de):At;oe=w(e,"ALLOWED_NAMESPACES")?S({},e.ALLOWED_NAMESPACES,g):re;Jt=w(e,"ADD_URI_SAFE_ATTR")?S(R(Qt),e.ADD_URI_SAFE_ATTR,de):Qt;Kt=w(e,"ADD_DATA_URI_TAGS")?S(R(Vt),e.ADD_DATA_URI_TAGS,de):Vt;Gt=w(e,"FORBID_CONTENTS")?S({},e.FORBID_CONTENTS,de):Xt;_t=w(e,"FORBID_TAGS")?S({},e.FORBID_TAGS,de):{};Rt=w(e,"FORBID_ATTR")?S({},e.FORBID_ATTR,de):{};$t=w(e,"USE_PROFILES")?e.USE_PROFILES:false;zt=e.ALLOW_ARIA_ATTR!==false;Ot=e.ALLOW_DATA_ATTR!==false;Lt=e.ALLOW_UNKNOWN_PROTOCOLS||false;Mt=e.ALLOW_SELF_CLOSE_IN_ATTR!==false;Dt=e.SAFE_FOR_TEMPLATES||false;It=e.SAFE_FOR_XML!==false;Ct=e.WHOLE_DOCUMENT||false;Nt=e.RETURN_DOM||false;jt=e.RETURN_DOM_FRAGMENT||false;Bt=e.RETURN_TRUSTED_TYPE||false;Ft=e.FORCE_BODY||false;qt=e.SANITIZE_DOM!==false;Ht=e.SANITIZE_NAMED_PROPS||false;Wt=e.KEEP_CONTENT!==false;Yt=e.IN_PLACE||false;wt=e.ALLOWED_URI_REGEXP||$;ne=e.NAMESPACE||ee;ae=e.MATHML_TEXT_INTEGRATION_POINTS||ae;se=e.HTML_INTEGRATION_POINTS||se;St=e.CUSTOM_ELEMENT_HANDLING||{};if(e.CUSTOM_ELEMENT_HANDLING&&me(e.CUSTOM_ELEMENT_HANDLING.tagNameCheck)){St.tagNameCheck=e.CUSTOM_ELEMENT_HANDLING.tagNameCheck}if(e.CUSTOM_ELEMENT_HANDLING&&me(e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)){St.attributeNameCheck=e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck}if(e.CUSTOM_ELEMENT_HANDLING&&typeof e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements==="boolean"){St.allowCustomizedBuiltInElements=e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements}if(Dt){Ot=false}if(jt){Nt=true}if($t){kt=S({},P);Et=[];if($t.html===true){S(kt,O);S(Et,F)}if($t.svg===true){S(kt,L);S(Et,N);S(Et,B)}if($t.svgFilters===true){S(kt,M);S(Et,N);S(Et,B)}if($t.mathMl===true){S(kt,I);S(Et,j);S(Et,B)}}if(e.ADD_TAGS){if(kt===Tt){kt=R(kt)}S(kt,e.ADD_TAGS,de)}if(e.ADD_ATTR){if(Et===At){Et=R(Et)}S(Et,e.ADD_ATTR,de)}if(e.ADD_URI_SAFE_ATTR){S(Jt,e.ADD_URI_SAFE_ATTR,de)}if(e.FORBID_CONTENTS){if(Gt===Xt){Gt=R(Gt)}S(Gt,e.FORBID_CONTENTS,de)}if(Wt){kt["#text"]=true}if(Ct){S(kt,["html","head","body"])}if(kt.table){S(kt,["tbody"]);delete _t.tbody}if(e.TRUSTED_TYPES_POLICY){if(typeof e.TRUSTED_TYPES_POLICY.createHTML!=="function"){throw T('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.')}if(typeof e.TRUSTED_TYPES_POLICY.createScriptURL!=="function"){throw T('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.')}rt=e.TRUSTED_TYPES_POLICY;at=rt.createHTML("")}else{if(rt===undefined){rt=tt(W,a)}if(rt!==null&&typeof at==="string"){at=rt.createHTML("")}}if(r){r(e)}pe=e};const be=S({},[...L,...M,...D]);const ye=S({},[...I,...C]);const ve=function t(e){let n=ot(e);if(!n||!n.tagName){n={namespaceURI:ne,tagName:"template"}}const i=m(e.tagName);const o=m(n.tagName);if(!oe[e.namespaceURI]){return false}if(e.namespaceURI===te){if(n.namespaceURI===ee){return i==="svg"}if(n.namespaceURI===Zt){return i==="svg"&&(o==="annotation-xml"||ae[o])}return Boolean(be[i])}if(e.namespaceURI===Zt){if(n.namespaceURI===ee){return i==="math"}if(n.namespaceURI===te){return i==="math"&&se[o]}return Boolean(ye[i])}if(e.namespaceURI===ee){if(n.namespaceURI===te&&!se[o]){return false}if(n.namespaceURI===Zt&&!ae[o]){return false}return!ye[i]&&(le[i]||!be[i])}if(ce==="application/xhtml+xml"&&oe[e.namespaceURI]){return true}return false};const xe=function t(e){p(n.removed,{element:e});try{ot(e).removeChild(e)}catch(t){X(e)}};const we=function t(e,i){try{p(n.removed,{attribute:i.getAttributeNode(e),from:i})}catch(t){p(n.removed,{attribute:null,from:i})}i.removeAttribute(e);if(e==="is"){if(Nt||jt){try{xe(i)}catch(t){}}else{try{i.setAttribute(e,"")}catch(t){}}}};const ke=function t(e){let n=null;let o=null;if(Ft){e="<remove></remove>"+e}else{const t=b(e,/^[\r\n\t ]+/);o=t&&t[0]}if(ce==="application/xhtml+xml"&&ne===ee){e='<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>'+e+"</body></html>"}const r=rt?rt.createHTML(e):e;if(ne===ee){try{n=(new U).parseFromString(r,ce)}catch(t){}}if(!n||!n.documentElement){n=st.createDocument(ne,"template",null);try{n.documentElement.innerHTML=ie?at:r}catch(t){}}const a=n.body||n.documentElement;if(e&&o){a.insertBefore(i.createTextNode(o),a.childNodes[0]||null)}if(ne===ee){return ft.call(n,Ct?"html":"body")[0]}return Ct?n.documentElement:a};const Te=function t(e){return lt.call(e.ownerDocument||e,e,_.SHOW_ELEMENT|_.SHOW_COMMENT|_.SHOW_TEXT|_.SHOW_PROCESSING_INSTRUCTION|_.SHOW_CDATA_SECTION,null)};const Ee=function t(e){return e instanceof H&&(typeof e.nodeName!=="string"||typeof e.textContent!=="string"||typeof e.removeChild!=="function"||!(e.attributes instanceof q)||typeof e.removeAttribute!=="function"||typeof e.setAttribute!=="function"||typeof e.namespaceURI!=="string"||typeof e.insertBefore!=="function"||typeof e.hasChildNodes!=="function")};const Ae=function t(e){return typeof E==="function"&&e instanceof E};function Se(t,e,i){f(t,(t=>{t.call(n,e,i,pe)}))}const _e=function t(e){let i=null;Se(dt.beforeSanitizeElements,e,null);if(Ee(e)){xe(e);return true}const o=de(e.nodeName);Se(dt.uponSanitizeElement,e,{tagName:o,allowedTags:kt});if(e.hasChildNodes()&&!Ae(e.firstElementChild)&&k(/<[/\w]/g,e.innerHTML)&&k(/<[/\w]/g,e.textContent)){xe(e);return true}if(e.nodeType===Q.progressingInstruction){xe(e);return true}if(It&&e.nodeType===Q.comment&&k(/<[/\w]/g,e.data)){xe(e);return true}if(!kt[o]||_t[o]){if(!_t[o]&&ze(o)){if(St.tagNameCheck instanceof RegExp&&k(St.tagNameCheck,o)){return false}if(St.tagNameCheck instanceof Function&&St.tagNameCheck(o)){return false}}if(Wt&&!Gt[o]){const t=ot(e)||e.parentNode;const n=it(e)||e.childNodes;if(n&&t){const i=n.length;for(let o=i-1;o>=0;--o){const i=G(n[o],true);i.__removalCount=(e.__removalCount||0)+1;t.insertBefore(i,V(e))}}}xe(e);return true}if(e instanceof A&&!ve(e)){xe(e);return true}if((o==="noscript"||o==="noembed"||o==="noframes")&&k(/<\/no(script|embed|frames)/i,e.innerHTML)){xe(e);return true}if(Dt&&e.nodeType===Q.text){i=e.textContent;f([pt,ht,mt],(t=>{i=y(i,t," ")}));if(e.textContent!==i){p(n.removed,{element:e.cloneNode()});e.textContent=i}}Se(dt.afterSanitizeElements,e,null);return false};const Re=function t(e,n,o){if(qt&&(n==="id"||n==="name")&&(o in i||o in he)){return false}if(Ot&&!Rt[n]&&k(gt,n));else if(zt&&k(bt,n));else if(!Et[n]||Rt[n]){if(ze(e)&&(St.tagNameCheck instanceof RegExp&&k(St.tagNameCheck,e)||St.tagNameCheck instanceof Function&&St.tagNameCheck(e))&&(St.attributeNameCheck instanceof RegExp&&k(St.attributeNameCheck,n)||St.attributeNameCheck instanceof Function&&St.attributeNameCheck(n))||n==="is"&&St.allowCustomizedBuiltInElements&&(St.tagNameCheck instanceof RegExp&&k(St.tagNameCheck,o)||St.tagNameCheck instanceof Function&&St.tagNameCheck(o)));else{return false}}else if(Jt[n]);else if(k(wt,y(o,vt,"")));else if((n==="src"||n==="xlink:href"||n==="href")&&e!=="script"&&v(o,"data:")===0&&Kt[e]);else if(Lt&&!k(yt,y(o,vt,"")));else if(o){return false}else;return true};const ze=function t(e){return e!=="annotation-xml"&&b(e,xt)};const Oe=function t(e){Se(dt.beforeSanitizeAttributes,e,null);const{attributes:i}=e;if(!i||Ee(e)){return}const o={attrName:"",attrValue:"",keepAttr:true,allowedAttributes:Et,forceKeepAttr:undefined};let r=i.length;while(r--){const t=i[r];const{name:a,namespaceURI:s,value:l}=t;const c=de(a);let u=a==="value"?l:x(l);o.attrName=c;o.attrValue=u;o.keepAttr=true;o.forceKeepAttr=undefined;Se(dt.uponSanitizeAttribute,e,o);u=o.attrValue;if(Ht&&(c==="id"||c==="name")){we(a,e);u=Ut+u}if(It&&k(/((--!?|])>)|<\/(style|title)/i,u)){we(a,e);continue}if(o.forceKeepAttr){continue}we(a,e);if(!o.keepAttr){continue}if(!Mt&&k(/\/>/i,u)){we(a,e);continue}if(Dt){f([pt,ht,mt],(t=>{u=y(u,t," ")}))}const p=de(e.nodeName);if(!Re(p,c,u)){continue}if(rt&&typeof W==="object"&&typeof W.getAttributeType==="function"){if(s);else{switch(W.getAttributeType(p,c)){case"TrustedHTML":{u=rt.createHTML(u);break}case"TrustedScriptURL":{u=rt.createScriptURL(u);break}}}}try{if(s){e.setAttributeNS(s,a,u)}else{e.setAttribute(a,u)}if(Ee(e)){xe(e)}else{d(n.removed)}}catch(t){}}Se(dt.afterSanitizeAttributes,e,null)};const Le=function t(e){let n=null;const i=Te(e);Se(dt.beforeSanitizeShadowDOM,e,null);while(n=i.nextNode()){Se(dt.uponSanitizeShadowNode,n,null);_e(n);Oe(n);if(n.content instanceof l){t(n.content)}}Se(dt.afterSanitizeShadowDOM,e,null)};n.sanitize=function(t){let e=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};let i=null;let r=null;let a=null;let s=null;ie=!t;if(ie){t="\x3c!--\x3e"}if(typeof t!=="string"&&!Ae(t)){if(typeof t.toString==="function"){t=t.toString();if(typeof t!=="string"){throw T("dirty is not a string, aborting")}}else{throw T("toString is not a function")}}if(!n.isSupported){return t}if(!Pt){ge(e)}n.removed=[];if(typeof t==="string"){Yt=false}if(Yt){if(t.nodeName){const e=de(t.nodeName);if(!kt[e]||_t[e]){throw T("root node is forbidden and cannot be sanitized in-place")}}}else if(t instanceof E){i=ke("\x3c!----\x3e");r=i.ownerDocument.importNode(t,true);if(r.nodeType===Q.element&&r.nodeName==="BODY"){i=r}else if(r.nodeName==="HTML"){i=r}else{i.appendChild(r)}}else{if(!Nt&&!Dt&&!Ct&&t.indexOf("<")===-1){return rt&&Bt?rt.createHTML(t):t}i=ke(t);if(!i){return Nt?null:Bt?at:""}}if(i&&Ft){xe(i.firstChild)}const c=Te(Yt?t:i);while(a=c.nextNode()){_e(a);Oe(a);if(a.content instanceof l){Le(a.content)}}if(Yt){return t}if(Nt){if(jt){s=ct.call(i.ownerDocument);while(i.firstChild){s.appendChild(i.firstChild)}}else{s=i}if(Et.shadowroot||Et.shadowrootmode){s=ut.call(o,s,true)}return s}let u=Ct?i.outerHTML:i.innerHTML;if(Ct&&kt["!doctype"]&&i.ownerDocument&&i.ownerDocument.doctype&&i.ownerDocument.doctype.name&&k(K,i.ownerDocument.doctype.name)){u="<!DOCTYPE "+i.ownerDocument.doctype.name+">\n"+u}if(Dt){f([pt,ht,mt],(t=>{u=y(u,t," ")}))}return rt&&Bt?rt.createHTML(u):u};n.setConfig=function(){let t=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};ge(t);Pt=true};n.clearConfig=function(){pe=null;Pt=false};n.isValidAttribute=function(t,e,n){if(!pe){ge({})}const i=de(t);const o=de(e);return Re(i,o,n)};n.addHook=function(t,e){if(typeof e!=="function"){return}p(dt[t],e)};n.removeHook=function(t,e){if(e!==undefined){const n=u(dt[t],e);return n===-1?undefined:h(dt[t],n,1)[0]}return d(dt[t])};n.removeHooks=function(t){dt[t]=[]};n.removeAllHooks=function(){dt=et()};return n}var it=nt();return it}))})(l);const c=l.exports;function f(t){return c(window).sanitize(t,{FORBID_TAGS:["style"],CUSTOM_ELEMENT_HANDLING:{tagNameCheck:/^q2-/}})}const u='*{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}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;--comp-border-radius:var(--tct-action-sheet-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-action-sheet-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-action-sheet-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-action-sheet-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-action-sheet-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-action-sheet-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-action-sheet-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-action-sheet-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-action-sheet-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-action-sheet-max-width, 400px);--comp-dialog-max-height:var(--tct-action-sheet-max-height, var(--comp-action-sheet-computed-max-height, 75vh));--comp-dialog-min-height:var(--tct-action-sheet-min-height, var(--comp-action-sheet-computed-min-height, 20vh));--comp-dialog-box-shadow:var(--tct-action-sheet-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden;min-height:var(--comp-dialog-min-height);max-height:var(--comp-dialog-max-height)}dialog::backdrop{opacity:0;background:var(--tct-action-sheet-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open].is-opening,dialog[open].is-open{transform:translateY(-100%)}@media screen and (min-width: 1200px){dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}@media screen and (min-width: 1200px){dialog{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:0}}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.interior{display:grid;grid-template-rows:44px 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}header{display:grid;grid-template-columns:var(--comp-close-button-size) 1fr var(--comp-close-button-size);grid-template-areas:". title close";gap:var(--comp-dialog-gap)}header .title{grid-area:title;text-align:center;line-height:var(--comp-header-height)}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}footer{display:flex;justify-content:end}';const d=u;var p=undefined&&undefined.__rest||function(t,e){var n={};for(var i in t)if(Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0)n[i]=t[i];if(t!=null&&typeof Object.getOwnPropertySymbols==="function")for(var o=0,i=Object.getOwnPropertySymbols(t);o<i.length;o++){if(e.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(t,i[o]))n[i[o]]=t[i[o]]}return n};const h=class{constructor(o){t(this,o);this.close=e(this,"close",7);this.ready=e(this,"ready",3);this.initialSelectedOptions=[];this.maxHeight=.75;this.minHeight=.2;this.selectedOptions={values:[],value:""};this.generateOptgroup=t=>{const e=document.createElement("q2-optgroup");if(t.label)e.setAttribute("label",t.label);if(t.disabled)e.setAttribute("disabled","");if(!!t.options.length)t.options.forEach((t=>e.appendChild(this.generateOption(t))));return e};this.generateOption=t=>{const e=document.createElement("q2-option");const{innerHTML:n}=t,i=p(t,["innerHTML"]);if(n)e.innerHTML=f(n);Object.entries(i).forEach((([t,n])=>{if(n===undefined)return;if(typeof n==="boolean"){if(n)e.setAttribute(t,"")}else{e.setAttribute(t,n)}}));return e};this.onCancel=t=>{var e,n;t.preventDefault();const{initialSelectedOptions:i}=this;this.hide({value:(n=(e=i===null||i===void 0?void 0:i[0])===null||e===void 0?void 0:e.value)!==null&&n!==void 0?n:"",values:i,type:"cancel"})};this.onClick=t=>{const e=t.target;if(!(e instanceof HTMLElement))return;const n=!!e.closest(".interior, q2-action-sheet");if(n)return;this.onCancel(t)};this.onListChange=t=>{this.selectedOptions=t.detail};this.onListDone=()=>{this.hide(Object.assign(Object.assign({},this.selectedOptions),{type:"confirm"}))};this.onListPopoverStateChange=t=>{if(t.detail.open)return;if(t.detail.action==="close"){this.onCancel(t)}else{this.onListDone()}};this.renderList=({data:t})=>{const{listProps:e}=t;return n(i,null,n("div",{class:"content",ref:t=>this.contentElement=t},n("q2-option-list",{ref:t=>this.optionListElement=t,multiple:e.multiple,noSelect:e.noSelect,onChange:this.onListChange,onPopoverState:this.onListPopoverStateChange,selectedOptions:e.selectedOptions},n("slot",null))),n("footer",null,e.multiple&&n("q2-btn",{"test-id":"btnDone",intent:"workflow-primary",onClick:this.onListDone},r("tecton.element.actionSheet.done"))))};this.renderMessage=({data:t})=>n("q2-message",{type:t.type},t.title&&n("h2",null,t.title),t.description&&n("p",null,t.description));this.renderSlot=()=>n("div",{class:"content",ref:t=>this.contentElement=t},n("slot",null));this.isScrollable=false;this.renderStatus="is-closing";this.data=undefined;this.hideClose=undefined;this.title=undefined}disconnectedCallback(){this.dialogElement.removeEventListener("cancel",this.onCancel)}componentDidLoad(){this.dialogElement.addEventListener("cancel",this.onCancel);this.ready.emit()}async hide(t={value:"",values:[],type:"confirm"}){this.close.emit(t);this.renderStatus="is-closing";this.dialogElement.addEventListener("transitionend",(()=>{if(this.renderStatus!=="is-closing")return;this.dialogElement.close();this.renderStatus=null;this.data=undefined;this.initialSelectedOptions=[];this.selectedOptions={values:[],value:""};this.hidePostHook()}),{once:true})}async show(){this.showPreHook();await a();this.updateDialogMinMaxHeight();this.storeInitialValues();if(this.dialogElement.open)return;this.dialogElement.showModal();this.renderStatus="is-opening";this.dialogElement.addEventListener("transitionend",(()=>{if(this.renderStatus!=="is-opening")return;this.renderStatus="is-open";this.focusContent()}),{once:true})}focusContent(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){const{event:e}=t;if(e instanceof KeyboardEvent){this.optionListElement.handleExternalKeydown(e)}else{this.optionListElement.focus()}}}hidePostHook(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){this.hostElement.innerHTML=null}}showPreHook(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){this.hostElement.innerHTML=null;t.options.forEach((t=>{this.hostElement.appendChild("options"in t?this.generateOptgroup(t):this.generateOption(t))}))}}storeInitialValues(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){this.initialSelectedOptions=t.listProps.selectedOptions}}updateDialogMinMaxHeight(){const t=window.innerHeight;this.dialogElement.style.setProperty("--comp-action-sheet-computed-min-height",`${Math.floor(t*this.minHeight)}px`);this.dialogElement.style.setProperty("--comp-action-sheet-computed-max-height",`${Math.floor(t*this.maxHeight)}px`)}render(){var t;const{data:e}=this;const i=(e===null||e===void 0?void 0:e.title)||this.title||!this.hideClose;const o=this.renderStatus||"";let r=null;switch(e===null||e===void 0?void 0:e.appearance){case"message":r=this.renderMessage;break;case"list":r=this.renderList;break;default:r=this.renderSlot;break}const a=(e===null||e===void 0?void 0:e.appearance)||"slot";const s=`interior is-${a}`;return n("dialog",{key:"180f1e7bfe1230ae340fdd883fb6d9860992c034",ref:t=>this.dialogElement=t,class:o,onClick:this.onClick},n("div",{key:"a0e4825c839ab21c8e61747e96b2323711fd74f9",class:s},i&&n("header",{key:"48b6b57131e5141a17eb64ce8201490690932fa0"},n("div",{key:"780791a3a29360f68313e9f27bae3fb4ac2a500d",class:"title"},(e===null||e===void 0?void 0:e.title)||this.title),!this.hideClose&&n("q2-btn",{key:"31fcbeb189b43175a665786cc2e484787e4eb189",class:"btn-close","test-id":"btnClose",onClick:this.onCancel,label:"tecton.element.actionSheet.close","hide-label":true},n("q2-icon",{key:"e964e15fdf8f96ca0712455fd611318896d035cc",type:"close"}))),((t=this.data)===null||t===void 0?void 0:t.description)&&n("p",{key:"869ef0bdb2118fe24ae920905fa24e708927ac53"},e.description),r&&n(r,{key:"b0ae13c7b3114f62c4caf820bc2f9780eb1cdfbd",data:this.data})))}get hostElement(){return o(this)}};h.style=d;export{h as q2_action_sheet};
-//# sourceMappingURL=p-188eb162.entry.js.map

package/dist/q2-tecton-elements/p-1c760a89.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as a,h as r,F as c,g as o}from"./p-a5f18e27.js";import{k as e,o as i,i as s}from"./p-15ac45d6.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, 4px)));--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, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14))))}: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, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14))))}: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, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}}: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%}.bar.color-primary{--comp-bar-color:var(--tct-card-bar-color-primary, var(--t-primary, #5446a4))}.bar.color-secondary{--comp-bar-color:var(--tct-card-bar-color-secondary, var(--t-secondary, #b6b3cc))}.bar.color-tertiary{--comp-bar-color:var(--tct-card-bar-color-tertiary, var(--t-tertiary, #ebe8fc))}.bar.color-info{--comp-bar-color:var(--tct-card-bar-color-info, var(--const-stoplight-info, #0079c1))}.bar.color-success{--comp-bar-color:var(--tct-card-bar-color-success, var(--const-stoplight-success, #0e8a00))}.bar.color-warning{--comp-bar-color:var(--tct-card-bar-color-warning, var(--const-stoplight-warning, #c35500))}.bar.color-alert{--comp-bar-color:var(--tct-card-bar-color-alert, var(--const-stoplight-alert, #c35500))}.bar.color-accent-1{--comp-bar-color:var(--tct-card-bar-color-accent-1, var(--t-accent-1, #e05252))}.bar.color-accent-2{--comp-bar-color:var(--tct-card-bar-color-accent-2, var(--t-accent-2, #e09952))}.bar.color-accent-3{--comp-bar-color:var(--tct-card-bar-color-accent-3, var(--t-accent-3, #e0e052))}.bar.color-accent-4{--comp-bar-color:var(--tct-card-bar-color-accent-4, var(--t-accent-4, #99e052))}.bar.color-accent-5{--comp-bar-color:var(--tct-card-bar-color-accent-5, var(--t-accent-5, #52e052))}.bar.color-accent-6{--comp-bar-color:var(--tct-card-bar-color-accent-6, var(--t-accent-6, #52e099))}.bar.color-accent-7{--comp-bar-color:var(--tct-card-bar-color-accent-7, var(--t-accent-7, #52e0e0))}.bar.color-accent-8{--comp-bar-color:var(--tct-card-bar-color-accent-8, var(--t-accent-8, #5299e0))}.bar.color-accent-9{--comp-bar-color:var(--tct-card-bar-color-accent-9, var(--t-accent-9, #5252e0))}.bar.color-accent-10{--comp-bar-color:var(--tct-card-bar-color-accent-10, var(--t-accent-10, #9952e0))}.bar.color-accent-11{--comp-bar-color:var(--tct-card-bar-color-accent-11, var(--t-accent-11, #e052e0))}.bar.color-accent-12{--comp-bar-color:var(--tct-card-bar-color-accent-12, var(--t-accent-12, #e05299))}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";const d=n;const l=["primary","secondary","tertiary","info","success","warning","alert","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=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.isAutoSmall=false;this.isAutoTouch=false;this.avatarIcon=undefined;this.avatarInitials=undefined;this.avatarName=undefined;this.avatarSrc=undefined;this.bar=undefined;this.description=undefined;this.isSmall=undefined;this.isStatic=undefined;this.isTouch=e();this.target=undefined;this.title=undefined;this.type="clickable";this.url=undefined}disconnectedCallback(){this.resizeObserver=null}componentDidLoad(){const{hostElement:t,clickableElement:a}=this;t.click=()=>a.click();i(this.hostElement);this.resizeObserver=new ResizeObserver((()=>this.determineAutoSmall()));this.resizeObserver.observe(this.hostElement)}onHostElementFocus(t){if(!s(t,this.hostElement))return;this.clickableElement.focus()}determineAutoSmall(){var t,a;if(this.isStatic)return;if(this.hostElement.hasAttribute("is-small"))return;const{containerElement:r,avatarElement:c}=this;const o=(t=c===null||c===void 0?void 0:c.offsetWidth)!==null&&t!==void 0?t:0;const e=(a=r===null||r===void 0?void 0:r.offsetWidth)!==null&&a!==void 0?a:0;const i=o+e;this.isAutoSmall=i<350}determineAutoTouch(){if(this.hostElement.hasAttribute("is-touch"))return;this.isAutoTouch=e()}generateAvatar(){const{avatarName:t,avatarInitials:a,avatarSrc:c,avatarIcon:o}=this;if(o){return r("q2-icon",{type:o,ref:t=>this.avatarElement=t,"test-id":"avatar"})}else if(t||a||c){return r("q2-avatar",{name:t,initials:a,src:c,ref:t=>this.avatarElement=t,"test-id":"avatar"})}}generateContainerClasses(){const{isSmall:t,isAutoSmall:a,avatarName:r,avatarInitials:c,avatarSrc:o,avatarIcon:e,isTouch:i,isAutoTouch:s,isStatic:n,type:d}=this;const l=["container",d];const h=t||a;const v=i||s;const p=r||c||o||e;if(h)l.push("is-small");if(v&&!n)l.push("is-touch");if(p)l.push("has-avatar");if(n)l.push("is-static");return l.join(" ")}generateContent(){return r(c,null,this.bar&&r("div",{class:this.getBarClasses(),"test-id":"bar",style:this.getBarStyles()}),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"}))}getBarClasses(){const{bar:t}=this;return{bar:true,[`color-${t}`]:this.isBarColorPredefined()}}getBarStyles(){const{bar:t}=this;return this.isBarColorPredefined()?{}:{"--comp-bar-color":t}}isBarColorPredefined(){return l.includes(this.bar)}render(){const{url:t,isStatic:a,type:c}=this;if(a||c==="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 o(this)}};h.style=d;export{h as q2_card};
-//# sourceMappingURL=p-1c760a89.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2CardCss","Q2CardStyle0","PREDEFINED_COLORS","Q2Card","this","handleClick","event","url","preventDefault","stopPropagation","click","emit","isTouchDevice","disconnectedCallback","resizeObserver","componentDidLoad","hostElement","clickableElement","overrideFocus","ResizeObserver","determineAutoSmall","observe","onHostElementFocus","isEventFromElement","focus","isStatic","hasAttribute","containerElement","avatarElement","avatarWidth","_a","offsetWidth","containerWidth","_b","totalWidth","isAutoSmall","determineAutoTouch","isAutoTouch","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","type","ref","e","name","initials","src","generateContainerClasses","isSmall","isTouch","result","showSmall","showTouch","hasAvatar","push","join","generateContent","Fragment","bar","class","getBarClasses","style","getBarStyles","title","description","isBarColorPredefined","includes","render","href","target","rel","onClick"],"sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.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, 4px)};\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(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\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(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)\")\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(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)\")\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    &.color-primary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n    }\n\n    &.color-secondary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n    }\n\n    &.color-tertiary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n    }\n\n    &.color-info {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n    }\n\n    &.color-success {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n    }\n\n    &.color-warning {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n    }\n\n    &.color-alert {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n    }\n\n    &.color-accent-1 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n    }\n\n    &.color-accent-2 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n    }\n\n    &.color-accent-3 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n    }\n\n    &.color-accent-4 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n    }\n\n    &.color-accent-5 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n    }\n\n    &.color-accent-6 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n    }\n\n    &.color-accent-7 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n    }\n\n    &.color-accent-8 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n    }\n\n    &.color-accent-9 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n    }\n\n    &.color-accent-10 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n    }\n\n    &.color-accent-11 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n    }\n\n    &.color-accent-12 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n    }\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} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n    'primary',\n    'secondary',\n    'tertiary',\n    'info',\n    'success',\n    'warning',\n    'alert',\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];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n    // #region Own Properties\n\n    avatarElement: HTMLElement;\n    clickableElement: HTMLElement;\n    containerElement: HTMLElement;\n    resizeObserver: ResizeObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isAutoSmall: boolean = false;\n\n    @State()\n    isAutoTouch: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location. */\n    @Prop({ reflect: true })\n    avatarIcon: string;\n\n    /** The initials to be placed in the avatar of the card. */\n    @Prop({ reflect: true })\n    avatarInitials: string;\n\n    /** The name to be used for the avatar of the card which will be converted to initials. */\n    @Prop({ reflect: true })\n    avatarName: string;\n\n    /** The source of the image to be displayed in the avatar location. */\n    @Prop({ reflect: true })\n    avatarSrc: string;\n\n    /**\n     * Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n     *\n     * - primary\n     * - secondary\n     * - tertiary\n     * - info\n     * - success\n     * - warning\n     * - alert\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     *\n     * Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n     */\n    @Prop({ reflect: true })\n    bar: string;\n\n    /** The description of the card (truncated after two lines). */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Display the card with a view optimized for smaller displays.\n     *\n     * @info\n     * This will be determined automatically if the attribute is not manually provided.\n     */\n    @Prop({ reflect: true })\n    isSmall: boolean;\n\n    /** Display the card with no borders, padding, drop-shadows, or clickable behavior. */\n    @Prop({ reflect: true })\n    isStatic: boolean;\n\n    /**\n     * Display the card with a view optimized for touch displays.\n     *\n     * @info\n     * This will be determined automatically if the attribute is not manually provided.\n     */\n    @Prop({ reflect: true })\n    isTouch: boolean = isTouchDevice();\n\n    /** Target to be applied to the link when a URL is provided. */\n    @Prop({ reflect: true })\n    target: '_self' | '_blank' | '_parent' | '_top';\n\n    /** The title of the card. */\n    @Prop({ reflect: true })\n    title: string;\n\n    /** Alters the interactive behavior of the card while maintaining visual appearance. */\n    @Prop({ reflect: true })\n    type: 'clickable' | 'non-clickable' = 'clickable';\n\n    /** URL to navigate the user to when the card is clicked. */\n    @Prop({ reflect: true })\n    url: string;\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the card is clicked and the `url` property is not provided. */\n    @Event()\n    click: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver = null;\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    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.clickableElement.focus();\n    }\n\n    // #endregion\n    // #region Local Methods\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    determineAutoTouch() {\n        if (this.hostElement.hasAttribute('is-touch')) return;\n        this.isAutoTouch = isTouchDevice();\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    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    generateContent() {\n        return (\n            <Fragment>\n                {this.bar && (\n                    <div\n                        class={this.getBarClasses()}\n                        test-id=\"bar\"\n                        style={this.getBarStyles()}\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    getBarClasses() {\n        const { bar } = this;\n\n        return {\n            bar: true,\n            [`color-${bar}`]: this.isBarColorPredefined(),\n        };\n    }\n\n    getBarStyles() {\n        const { bar } = this;\n\n        return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\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    isBarColorPredefined() {\n        return PREDEFINED_COLORS.includes(this.bar);\n    }\n\n    // #endregion\n    // #region Render Methods\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    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-1c88d057.entry.js

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

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

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

package/dist/q2-tecton-elements/p-20a3d6ed.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as a,F as e,H as o,g as r}from"./p-a5f18e27.js";import{o as s,i as n,w as c,l as h}from"./p-15ac45d6.js";import{a as p,s as d}from"./p-b7554a79.js";const l="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x, 30px)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 4px)));position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary, #0079c1));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary, #b3c2cc));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #141414))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414))}.tag{display:flex;width:max-content;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";const g=l;const v=class{constructor(a){t(this,a);this.click=i(this,"click",7);var e;this.determineOptionCount=()=>{const t=this.hostElement.querySelectorAll("q2-option").length;this.optionCount=t};this.handleButtonFocusout=async t=>{const i=t.relatedTarget;if((i===null||i===void 0?void 0:i.tagName)==="Q2-OPTION")return;this.open=false};this.handleChange=t=>{t.stopPropagation();if(!this.optionCount)return;const{value:i}=t.detail;this.click.emit({value:i})};this.handleClick=async t=>{t.stopPropagation();this.popoverElement.controlElement=this.dropdownBtn;if(p(this)){const{value:i}=await d(this,t);this.click.emit({value:i})}else{await this.popoverElement.toggle()}};this.handleKeydown=async t=>{const i=t.metaKey||t.ctrlKey||t.key==="Tab";if(i)return;t.preventDefault();this.popoverElement.controlElement=this.dropdownBtn;if(p(this,t)){const{value:i}=await d(this,t);this.click.emit({value:i})}else{this.optionList.handleExternalKeydown(t)}};this.handleWrapperClick=()=>{this.dropdownBtn.focus();this.dropdownBtn.click()};this.onClickElsewhere=t=>{const i=t.target;if(i.localName==="click-elsewhere"){t.stopPropagation();const{popoverElement:i}=this;if(!i)return;i.open=false}};this.optionCount=undefined;this.hoist=!!((e=window.Tecton)===null||e===void 0?void 0:e.useActionSheets);this.label=undefined;this.open=undefined;this.optionListLabel="options";this.popoverAlignment="right";this.popoverDirection=undefined;this.popoverMaxHeight=undefined;this.popoverMinHeight=150;this.theme=undefined}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}componentWillLoad(){const t=new MutationObserver(this.determineOptionCount);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t}componentDidLoad(){s(this.hostElement)}delegateFocus(t){if(!n(t,this.hostElement))return;if(!this.optionCount)return;this.dropdownBtn.focus()}popoverStateHandler({detail:{open:t}}){if(this.open!==t)this.open=t;if(t)return;this.optionList.setActiveElement(null)}async closePopover(){if(!this.optionCount||!this.open)return;this._togglePopover()}async openPopover(){if(!this.optionCount||this.open)return;this._togglePopover()}async selectOption(t){if(!this.optionCount)return;await this.openPopover();await c();const i=await this.optionList.getOptions();const a=i.find((i=>i.value===t));a===null||a===void 0?void 0:a.click()}_togglePopover(){const{dropdownBtn:t}=this;t===null||t===void 0?void 0:t.click();t===null||t===void 0?void 0:t.focus();t.dispatchEvent(new FocusEvent("focus"))}renderHiddenElement(){return a("div",{id:"option-description",class:"sr","aria-hidden":"true"},h("tecton.element.optionList.optionCount",[this.optionCount]))}render(){const{optionCount:t,open:i}=this;const r=["tag"];if(t)r.push("has-options");return a(o,{key:"e3db4189c64feb619ea9c7f377b6f9ea52a48927",role:this.optionCount>0?"list":undefined},a("click-elsewhere",{key:"4e8c4a8acca059010017761cc8b1fa7457eb3862",onChange:this.onClickElsewhere},this.optionCount?a(e,null,a("div",{class:"btn-wrapper",onClick:this.handleWrapperClick},a("button",{class:"tag-wrapper",ref:t=>this.dropdownBtn=t,"test-id":"btn-control",type:"button",role:"combobox",onClick:this.handleClick,onKeyDown:this.handleKeydown,onFocusout:this.handleButtonFocusout,"aria-controls":"option-list","aria-expanded":i?"true":"false","aria-describedby":"option-description"},a("div",{class:r.join(" ")},this.label),a("q2-icon",{type:"options"}))),this.renderHiddenElement()):a("div",{class:"tag-wrapper",onClick:t=>t.stopPropagation()},a("div",{class:r.join(" ")},this.label)),this.optionCount>0&&a("q2-popover",{key:"fd1665df7aa579bd92b691bd90ac87f330dedd70",ref:t=>this.popoverElement=t,controlElement:this.dropdownBtn,open:this.open,maxHeight:this.popoverMaxHeight,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:this.popoverAlignment},a("q2-option-list",{key:"fe431b250446c2bd7da6cd0b27b24731e142ceca",id:"option-list",ref:t=>this.optionList=t,onChange:this.handleChange,type:"menu",align:"right",label:h("tecton.element.optionList.label",[this.optionListLabel]),"no-select":true},a("slot",{key:"4836b67e24c40a941dd659c72f7cc99e7568f9eb"})))))}get hostElement(){return r(this)}};v.style=g;export{v as q2_tag};
-//# sourceMappingURL=p-20a3d6ed.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2TagCss","Q2TagStyle0","Q2Tag","this","determineOptionCount","numberOfOptions","hostElement","querySelectorAll","length","optionCount","handleButtonFocusout","async","event","relatedTarget","tagName","open","handleChange","stopPropagation","value","detail","click","emit","handleClick","popoverElement","controlElement","dropdownBtn","shouldShowActionSheet","showActionSheetList","toggle","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","optionList","handleExternalKeydown","handleWrapperClick","focus","onClickElsewhere","target","localName","_a","window","Tecton","useActionSheets","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","observer","MutationObserver","observe","childList","attributes","componentDidLoad","overrideFocus","delegateFocus","isEventFromElement","popoverStateHandler","setActiveElement","closePopover","_togglePopover","openPopover","selectOption","waitForNextPaint","allOptions","getOptions","desiredOption","find","option","dispatchEvent","FocusEvent","renderHiddenElement","h","id","class","loc","render","wrapperClassNames","push","Host","role","undefined","onChange","Fragment","onClick","ref","el","type","onKeyDown","onFocusout","join","label","e","maxHeight","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","optionListLabel"],"sources":["src/components/q2-tag/q2-tag.scss?tag=q2-tag&encapsulation=shadow","src/components/q2-tag/q2-tag.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n    --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x, 30px)};\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n    background: var(--comp-tag-background);\n    color: var(--comp-tag-color);\n    border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 4px);\n    position: relative;\n\n    :host([theme='primary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-primary-background, --t-primary, #0079c1)};\n        --comp-tag-color: #{var-list(--tct-tag-primary-font-color, --t-primary-text, #ffffff)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-tag-color: #{var-list(--tct-tag-secondary-font-color, --t-secondary-text, #141414)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-tag-color: #{var-list(--tct-tag-tertiary-font-color, --t-tertiary-text, #141414)};\n    }\n}\n\n.tag {\n    display: flex;\n    width: max-content;\n    height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n}\n\n.tag.has-options {\n    padding-right: 6px;\n}\n\n.btn-wrapper {\n    --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n    --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    height: var(--comp-tag-clickable-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    right: var(--comp-tag-btn-offset);\n    top: var(--comp-tag-btn-offset);\n    cursor: pointer;\n}\n\nbutton {\n    height: var(--comp-tag-btn-size);\n    stroke: var(--comp-tag-color);\n    --tct-icon-stroke-primary: var(--comp-tag-color);\n    cursor: pointer;\n    border: 0;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    padding-right: 6px;\n    --tct-icon-size: 18px;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Method,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({ tag: 'q2-tag', shadow: true, styleUrl: 'q2-tag.scss' })\nexport class Q2Tag implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownBtn: HTMLButtonElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    optionCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Determine whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string = 'options';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number = 150;\n\n    /** The color of the element. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     */\n    @Event()\n    click: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.determineOptionCount);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closePopover() {\n        if (!this.optionCount || !this.open) return;\n        this._togglePopover();\n    }\n\n    @Method()\n    async openPopover() {\n        if (!this.optionCount || this.open) return;\n        this._togglePopover();\n    }\n\n    @Method()\n    async selectOption(value) {\n        if (!this.optionCount) return;\n        await this.openPopover();\n        await waitForNextPaint();\n        const allOptions = await this.optionList.getOptions();\n        const desiredOption = allOptions.find(option => option.value === value);\n        desiredOption?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    _togglePopover() {\n        const { dropdownBtn } = this;\n        dropdownBtn?.click();\n        dropdownBtn?.focus();\n        dropdownBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION') return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        this.click.emit({ value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.click.emit({ value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.click.emit({ value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { optionCount, open } = this;\n        const wrapperClassNames = ['tag'];\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <Host role={this.optionCount > 0 ? 'list' : undefined}>\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {this.optionCount ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.renderHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n                        </div>\n                    )}\n\n                    {this.optionCount > 0 && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            maxHeight={this.popoverMaxHeight}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-2733583e.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,H as o,g as s}from"./p-a5f18e27.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{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:"icon content";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:"content"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus){box-shadow:var(--tct-option-focus-box-shadow, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))) !important}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}';const a=n;const c=class{constructor(e){t(this,e);this.displayChanged=i(this,"displayChanged",7);this.mutationHandler=t=>{var i;const e=(this.display||"").trim();const o=(((i=this.hostElement)===null||i===void 0?void 0:i.textContent)||"").trim();if(e===o||this.multiline)return;for(const i of t){if(i.type==="childList"||i.type==="characterData"){this.display=o}else if(i.type==="attributes"&&i.attributeName==="display"){this.hostElement.textContent=e}}if(this.hostElement.ariaSelected)this.displayChanged.emit({display:this.display,value:this.value})};this._multiSelectHidden=false;this.active=undefined;this.disabled=undefined;this.disabledGroup=undefined;this.display=undefined;this.multiline=undefined;this.role="option";this.selected=undefined;this.value=undefined}componentWillLoad(){this.initDisplay()}componentDidLoad(){const t=new MutationObserver(this.mutationHandler);t.observe(this.hostElement,{childList:true,subtree:true,attributes:true,characterData:true});this.mutationObserver=t}initDisplay(){var t,i;if(this.multiline)return;if(this.display&&!((i=(t=this.hostElement)===null||t===void 0?void 0:t.textContent)===null||i===void 0?void 0:i.trim())){this.hostElement.textContent=this.display}else if(!this.display&&this.hostElement.textContent.trim()){this.display=this.hostElement.textContent.trim()}}render(){const{disabled:t,disabledGroup:i,selected:s,_multiSelectHidden:n}=this;const a=t||i;return e(o,{key:"31957c36e0836d1f4936d8af97beb51335b4c6b9",tabindex:"-1","aria-disabled":a?"true":undefined,"aria-selected":`${!!s}`,"aria-hidden":n?"true":undefined,display:this.display},this.selected&&e("q2-icon",{key:"c5e9eac9b66bb975b303c1184b06fd71718096f7",type:"checkmark"}),e("div",{key:"c0ea2c0acd37626d90ad07908f7697fe7c1edc1e",class:"content"},e("slot",{key:"7b19d2f5977b67cace150e51956121011e28c138"})))}get hostElement(){return s(this)}};c.style=a;export{c as q2_option};
-//# sourceMappingURL=p-2733583e.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2OptionCss","Q2OptionStyle0","Q2Option","this","mutationHandler","mutations","display","trim","textContent","_a","hostElement","multiline","mut","type","attributeName","ariaSelected","displayChanged","emit","value","componentWillLoad","initDisplay","componentDidLoad","observer","MutationObserver","observe","childList","subtree","attributes","characterData","mutationObserver","_b","render","disabled","disabledGroup","selected","_multiSelectHidden","isDisabled","h","Host","key","tabindex","undefined","class"],"sources":["src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    align-items: center;\n    grid-template-areas: 'icon content';\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(\n            var-prefixer(option-selected-multiline-icon-size),\n            var-prefixer(option-selected-icon-size),\n            26px\n        )};\n}\n\n:host([_no-select]) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host(:not([aria-disabled]):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n    display: block;\n    grid-area: content;\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /** The text that is presented in the field when selected. If not set, the text inside the element will be used. */\n    @Prop({ mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem')}\n     * @private\n     */\n    @Prop({ reflect: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initDisplay() {\n        if (this.multiline) return;\n        if (this.display && !this.hostElement?.textContent?.trim()) {\n            this.hostElement.textContent = this.display;\n        } else if (!this.display && this.hostElement.textContent.trim()) {\n            this.display = this.hostElement.textContent.trim();\n        }\n    }\n\n    mutationHandler = (mutations: MutationRecord[]) => {\n        const display = (this.display || '').trim();\n        const textContent = (this.hostElement?.textContent || '').trim();\n        if (display === textContent || this.multiline) return;\n        for (const mut of mutations) {\n            if (mut.type === 'childList' || mut.type === 'characterData') {\n                this.display = textContent;\n            } else if (mut.type === 'attributes' && mut.attributeName === 'display') {\n                this.hostElement.textContent = display;\n            }\n        }\n        if (this.hostElement.ariaSelected) this.displayChanged.emit({ display: this.display, value: this.value });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={this.display}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"gEAAA,MAAMA,EAAc,43EACpB,MAAAC,EAAeD,E,MCEFE,EAAQ,M,wEAoGjBC,KAAAC,gBAAmBC,I,MACf,MAAMC,GAAWH,KAAKG,SAAW,IAAIC,OACrC,MAAMC,KAAeC,EAAAN,KAAKO,eAAW,MAAAD,SAAA,SAAAA,EAAED,cAAe,IAAID,OAC1D,GAAID,IAAYE,GAAeL,KAAKQ,UAAW,OAC/C,IAAK,MAAMC,KAAOP,EAAW,CACzB,GAAIO,EAAIC,OAAS,aAAeD,EAAIC,OAAS,gBAAiB,CAC1DV,KAAKG,QAAUE,C,MACZ,GAAII,EAAIC,OAAS,cAAgBD,EAAIE,gBAAkB,UAAW,CACrEX,KAAKO,YAAYF,YAAcF,C,EAGvC,GAAIH,KAAKO,YAAYK,aAAcZ,KAAKa,eAAeC,KAAK,CAAEX,QAASH,KAAKG,QAASY,MAAOf,KAAKe,OAAQ,E,wBAhG/E,M,qIAqCf,S,6CA0Bf,iBAAAC,GACIhB,KAAKiB,a,CAGT,gBAAAC,GACI,MAAMC,EAAW,IAAIC,iBAAiBpB,KAAKC,iBAC3CkB,EAASE,QAAQrB,KAAKO,YAAa,CAAEe,UAAW,KAAMC,QAAS,KAAMC,WAAY,KAAMC,cAAe,OACtGzB,KAAK0B,iBAAmBP,C,CAM5B,WAAAF,G,QACI,GAAIjB,KAAKQ,UAAW,OACpB,GAAIR,KAAKG,YAAYwB,GAAArB,EAAAN,KAAKO,eAAW,MAAAD,SAAA,SAAAA,EAAED,eAAW,MAAAsB,SAAA,SAAAA,EAAEvB,QAAQ,CACxDJ,KAAKO,YAAYF,YAAcL,KAAKG,O,MACjC,IAAKH,KAAKG,SAAWH,KAAKO,YAAYF,YAAYD,OAAQ,CAC7DJ,KAAKG,QAAUH,KAAKO,YAAYF,YAAYD,M,EAqBpD,MAAAwB,GACI,MAAMC,SAAEA,EAAQC,cAAEA,EAAaC,SAAEA,EAAQC,mBAAEA,GAAuBhC,KAClE,MAAMiC,EAAaJ,GAAYC,EAE/B,OACII,EAACC,EAAI,CAAAC,IAAA,2CACDC,SAAS,KAAI,gBACEJ,EAAa,OAASK,UAAS,gBAC/B,KAAKP,IAAU,cACjBC,EAAqB,OAASM,UAC3CnC,QAASH,KAAKG,SAEbH,KAAK+B,UAAYG,EAAA,WAAAE,IAAA,2CAAS1B,KAAK,cAChCwB,EAAA,OAAAE,IAAA,2CAAKG,MAAM,WACPL,EAAA,QAAAE,IAAA,8C"}