@phun-ky/speccer 11.1.2 → 11.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/speccer.esm.js +2 -2
  2. package/dist/speccer.esm.js.map +1 -1
  3. package/dist/speccer.js +2 -2
  4. package/dist/speccer.js.map +1 -1
  5. package/package.json +1 -1
package/dist/speccer.esm.js CHANGED
@@ -2,7 +2,7 @@
2
2
  * @phun-ky/speccer
3
3
  * A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements
4
4
  * @author Alexander Vassbotn Røyne-Helgesen <alexander@phun-ky.net>
5
- * @version 11.1.2
5
+ * @version 11.1.4
6
6
  * @license
7
7
  * Copyright (c) 2018 Alexander Vassbotn Røyne-Helgesen
8
8
  *
@@ -24,5 +24,5 @@
24
24
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25
25
  * SOFTWARE.
26
26
  */
27
- const t=t=>"string"==typeof t,e=e=>!t(e),n=t=>"number"==typeof t,o=t=>!n(t),i=t=>void 0===t,s=(t,e,n="noop")=>{if(!t)return;if(!e||e&&!e.length)return;const o=e.trim().split(" ").filter((t=>t!==n)).filter((t=>""!==t)).map((t=>t.trim()));t.classList.add(...o)},r=(t,n)=>t?!n&&e(t)?Object.keys(t).filter((e=>t[e])).join(" ").trim():`${t.trim()} ${n?Object.keys(n).filter((t=>n[t])).join(" "):""}`.trim():"",a=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],c="data-speccer",p="spacing",l="measure",d="typography",h="mark",u="grid",f="pin-area";var g,m,y,w,x,b,$;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(g||(g={})),function(t){t.Pin="pin",t.Parent="parent",t.Text="text",t.Enclose="enclose",t.Subtle="subtle",t.Bracket="bracket",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top",t.SVG="svg",t.Curly="curly"}(m||(m={})),function(t){t.Measure="measure",t.Slim="slim",t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(y||(y={})),function(t){t.Typography="typography",t.Syntax="syntax",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(w||(w={})),function(t){t.Spacing="spacing"}(x||(x={})),function(t){t.Mark="mark"}(b||(b={})),function(t){t.Grid="grid"}($||($={}));const E=t=>t.split(" "),A=t=>{if(null===t)return!1;return E(t).includes(m.Bracket)},k=t=>{if(null===t)return!1;return E(t).includes(m.Enclose)},C=t=>{if(null===t)return!1;return E(t).includes(m.Subtle)},S=t=>{if(null===t)return!1;return E(t).includes(m.Parent)},v=t=>{if(null===t)return!1;return E(t).includes(m.Text)},P=t=>{if(null===t)return!1;return E(t).includes(y.Height)},L=t=>{if(null===t)return!1;return E(t).includes(y.Slim)},B=t=>{if(null===t)return!1;return E(t).includes(y.Width)},R=t=>{if(null===t)return!1;const e=E(t);return(S(t)&&!k(t)&&!A(t)||v(t)||e.includes(m.SVG))&&!T(t)},T=t=>{if(null===t)return!1;const e=E(t);return e.includes(m.Curly)&&e.includes(m.Bracket)},H=t=>!!t&&t.split(" ").includes(w.Syntax),I=(t,e)=>(t=>null!==t&&t.split(" ").includes(m.Pin))(t)?"pin":((t,e)=>null!==t&&t.split(" ").includes($.Grid)&&("grid"===e.display||e.display.includes("grid")))(t,e)?"grid":(t=>null!==t&&t.split(" ").includes(b.Mark))(t)?"mark":(t=>null!==t&&t.split(" ").includes(y.Measure))(t)?"measure":(t=>null!==t&&t.split(" ").includes(x.Spacing))(t)?"spacing":(t=>null!==t&&t.split(" ").includes(w.Typography))(t)?"typography":"pin",M=t=>(t=>null!==t&&E(t).includes(m.Left))(t)?"left":(t=>null!==t&&E(t).includes(m.Right))(t)?"right":(t=>null!==t&&E(t).includes(m.Bottom))(t)?"bottom":"top",N=(t,e,n)=>{const o=I(t,e),i={slug:(s=t,s.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").trim().toLowerCase().replace(/[^a-z0-9 -]/g,"").replace(/\s+/g," ").replace(/(?:^\w|[A-Z]|\b\w)/g,((t,e)=>0===e?t.toLowerCase():t.toUpperCase())).replace(/\s+/g,"")),position:M(t),type:o};var s;if("pin"===o&&(i.pin={bracket:A(t),enclose:k(t),subtle:C(t),parent:S(t),text:v(t),useSVGLine:R(t),useCurlyBrackets:T(t)}),"measure"===o&&(i.measure={slim:L(t),height:P(t),width:B(t)}),"typography"===o&&(i.typography={useSyntaxHighlighting:H(t)}),"grid"===o){const e=(t=>t?.includes("columns")?"columns":t?.includes("rows")?"rows":"both")(t);i.grid={toggle:e,both:"both"===e,rows:"rows"===e,columns:"columns"===e}}if("spacing"===o){const e=(t=>t?.includes("margin")?"margin":t?.includes("padding")?"padding":"both")(t);i.spacing={both:"both"===e,margin:"margin"===e,padding:"padding"===e,bound:t.includes("bound")}}return{...i,...n}},q=()=>"_"+Math.random().toString(36).substring(2,11),O=t=>!t.checkVisibility({opacityProperty:!0,checkVisibilityCSS:!0}),V=()=>new Promise(requestAnimationFrame),z=async(t,e,n)=>{await V();return getComputedStyle(t)[e]===n},G=async(t,e,n)=>{if(!t.parentElement)return null;return await z(t.parentElement,e,n)?t.parentElement:await G(t.parentElement,e,n)},j=(t,e,n)=>t-e.width/2+n.width/2,W=(t,e,n)=>t-e.height/2+n.height/2,D=async t=>{await V();let e=t.getBoundingClientRect(),n=e.top+window.scrollY;const o=e.left+window.scrollX,i=await(async t=>await G(t,"position","sticky"))(t),s=await(async t=>await z(t,"position","sticky"))(t);if(s){const o=t.style.position;await V(),t.style.position="relative",await V(),e=t.getBoundingClientRect(),n=e.top,await V(),t.style.position=o}else if(i){const o=i.style.position;await V(),i.style.position="relative",await V(),e=t.getBoundingClientRect(),n=e.top,await V(),i.style.position=o}return{height:e.height,width:e.width,top:n,left:o}},F=async(t,e)=>{await V();const n=t.getBoundingClientRect(),o=await D(e),i=await(async(t,e)=>{await V();const n=t.getBoundingClientRect();await V();const o=e.getBoundingClientRect(),i=o.top+window.scrollY,s=o.left+window.scrollX;return{height:o.height,width:o.width,top:W(i,n,o),left:j(s,n,o)}})(t,e),s=o.height,r=o.width,a=n.height,c=n.width;return{absolute:()=>({top:o.top,left:o.left,height:s,width:r}),toTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:s,width:r}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top-e-n,left:t?i.left:o.left,height:s,width:r}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:n=s,modifier:c=0}={})=>({top:o.top+n-(e+c),left:t?i.left:o.left,height:s,width:r}),fromBottom:({center:t=!1,targetHeight:e=s,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:s,width:r}),toLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:s,width:r}),fromLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left-e-n,height:s,width:r}),toRight:({center:t=!1,sourceWidth:e=c,targetWidth:n=r,modifier:a=0}={})=>({top:t?i.top:o.top,left:o.left+n-(e+a),height:s,width:r}),fromRight:({center:t=!1,targetWidth:e=r,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:s,width:r})}},_=async(e,o)=>{var i;!e||!o||t(o)||n(o)||(i=o,"boolean"==typeof i)||Array.isArray(o)&&!o.length||!Object.keys(o).length&&o.constructor===Object||(await V(),Array.isArray(o)&&(o=o.reduce(((t,e)=>(t[e.key]=e.value,t)),{})),Object.assign(e.style,o))},X=async t=>(await V(),getComputedStyle(t,null)),Y=async(t,e,n)=>{await V();const{grid:o}=n;if(!o)return;const{toggle:i}=o,{height:r,width:a}=t.getBoundingClientRect(),{top:c,left:p}=await D(t),{gridTemplateColumns:l,gridTemplateRows:d,padding:h}=e,u=`speccer-${n.slug}-${t.getAttribute("id")||q()}`;if(t.setAttribute("data-speccer-element-id",u),"columns"===i||"both"===i){const t=parseInt(e.columnGap),n=document.createElement("div");document.documentElement.style.setProperty("--ph-speccer-grid-gap-original",`${t}px`),document.documentElement.style.setProperty("--ph-speccer-grid-gap",`${t<24?24:t}px`),t<24&&n.classList.add("speccer-small-grid"),n.setAttribute("data-speccer-id",u),s(n,"ph-speccer speccer speccer-grid-container"),_(n,{height:`${r+64}px`,width:`${a}px`,left:`${p}px`,top:c-32+"px",padding:h,gridTemplateColumns:l});const o=l.split(" ").length;for(let t=0;t<o;t++){const t=document.createElement("div");s(t,"ph-speccer speccer speccer-grid-item"),n.appendChild(t)}document.body.appendChild(n)}if("rows"===i||"both"===i){const t=parseInt(e.rowGap),n=document.createElement("div");document.documentElement.style.setProperty("--ph-speccer-grid-row-gap-original",`${t}px`),document.documentElement.style.setProperty("--ph-speccer-grid-row-gap",`${t<24?24:t}px`),t<24&&n.classList.add("speccer-small-grid"),n.setAttribute("data-speccer-id",u),n.classList.add("ph-speccer"),n.classList.add("speccer"),n.classList.add("speccer-grid-row-container"),s(n,"ph-speccer speccer speccer-grid-row-container"),_(n,{width:`${a+64}px`,height:`${r}px`,top:`${c}px`,left:p-32+"px",padding:h,gridTemplateRows:d});const o=d.split(" ").length;for(let t=0;t<o;t++){const t=document.createElement("div");s(t,"ph-speccer speccer speccer-grid-row-item"),n.appendChild(t)}document.body.appendChild(n)}},K=async(t,e)=>{if(!t)return;if(O(t))return;const n=t.getAttribute(c)||"",o=await X(t),i=N(n,o,e);"grid"===i.type&&i.grid&&(await V(),await Y(t,o,i))},U=(t,e="span")=>{const n=document.createElement(e);return n.setAttribute("id",t),s(n,"ph-speccer speccer mark"),n},Z=async t=>{if(!t)return;if(O(t))return;const e=t.getAttribute(c)||"";await V();const n=N(e,getComputedStyle(t));if("mark"!==n.type)return;const o=`speccer-${n.slug}-${t.getAttribute("id")||q()}`;t.setAttribute("data-speccer-element-id",o);const i=U(o);document.body.appendChild(i);const s=await F(i,t),{left:r,top:a,height:p,width:l}=s.absolute(),d={left:`${r}px`,top:`${a}px`,height:`${p}px`,width:`${l}px`};await _(i,d)},J=(t="",e,n,o="span")=>{const i=document.createElement(o);i.setAttribute("title",`${t}px`),i.setAttribute("id",n),i.setAttribute("data-measure",`${parseInt(String(t),10)}px`);const{measure:a,position:c}=e,p=r("ph-speccer speccer measure",{height:a?.height||!1,width:a?.width||!1,slim:a?.slim||!1,[c]:!0});return s(i,p),i},Q=async(t,e)=>{if(!t)return;if(O(t))return;const n=t.getAttribute("data-speccer")||"";await V();const o=N(n,getComputedStyle(t),e);if("measure"!==o.type||!o.measure)return;const{measure:i,position:s}=o;await V();const r=t.getBoundingClientRect(),a=i.slim?0:48,c=i.slim?0:96,p=`speccer-${o.slug}-${t.getAttribute("id")||q()}`;if(t.setAttribute("data-speccer-element-id",p),i.width)if(s===y.Bottom){const e=J(r.width,o,p);document.body.appendChild(e);const n=await F(e,t);if(i.slim){const{left:t,top:o,width:i}=n.fromBottom({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`})}else{const{left:t,top:o,width:i,height:s}=n.absolute({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`,height:`${s+a}px`})}}else{const e=J(r.width,o,p);document.body.appendChild(e);const n=await F(e,t);if(i.slim){const{left:t,top:o,width:i}=n.fromTop({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`})}else{const{left:t,top:o,width:i,height:s}=n.absolute({center:!1});await _(e,{left:`${t}px`,top:o-a+"px",width:`${i}px`,height:`${s+a}px`})}}else if(i.height)if(s===y.Right){const e=J(r.height,o,p);document.body.appendChild(e);const n=await F(e,t);if(i.slim){const{left:t,top:o,height:i}=n.fromRight({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`})}else{const{left:t,top:o,height:i,width:s}=n.absolute({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`,width:`${s+c}px`})}}else{const e=J(r.height,o,p);document.body.appendChild(e);const n=await F(e,t);if(i.slim){const{left:t,top:o,height:i}=n.fromLeft({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`})}else{const{left:t,top:o,height:i,width:s}=n.absolute({center:!1});await _(e,{left:t-c+"px",top:`${o}px`,height:`${i}px`,width:`${s+c}px`})}}},tt=(t="",e,n="",o="span")=>{const i=document.createElement(o),a={},{position:c,pin:p={}}=e,{useSVGLine:l,useCurlyBrackets:d,text:h,parent:u,bracket:f,enclose:g,subtle:m}=p;a.text=h,a.parent=u,a.bracket=f,a.enclose=g,a.subtle=m,a.svg=l,a.curly=d,a[c]=!0,!u||f||d||m||(a.svg=!0),!f&&!g||f&&d?i.innerHTML=t:(f||g)&&i.setAttribute("data-pin-counter",t);const y=r("ph-speccer speccer pin",a);return s(i,y),i.setAttribute("id",n),i},et=t=>t.top,nt=t=>t.left+t.width,ot=t=>t.top+t.height,it=t=>t.left,st=t=>t.left+t.width/2,rt=t=>t.top+t.height/2,at={center:t=>({x:st(t),y:rt(t)}),top:t=>({x:st(t),y:et(t)}),right:t=>({x:nt(t),y:rt(t)}),bottom:t=>({x:st(t),y:ot(t)}),left:t=>({x:it(t),y:rt(t)}),"right-top":t=>({x:nt(t),y:et(t)}),"right-bottom":t=>({x:nt(t),y:ot(t)}),"left-top":t=>({x:it(t),y:et(t)}),"left-bottom":t=>({x:it(t),y:ot(t)}),"top-left":t=>({x:it(t),y:et(t)}),"top-right":t=>({x:nt(t),y:et(t)}),"bottom-left":t=>({x:it(t),y:ot(t)}),"bottom-right":t=>({x:nt(t),y:ot(t)}),"top-center":t=>({x:st(t),y:et(t)}),"right-center":t=>({x:nt(t),y:rt(t)}),"bottom-center":t=>({x:st(t),y:ot(t)}),"left-center":t=>({x:it(t),y:rt(t)})},ct=async(t,n="center")=>{if(!n)throw Error("No position given");if(e(n))throw Error("The position given is not the required type: pos: "+typeof n);const o=["center","left","right","top","bottom","right-top","right-bottom","left-top","left-bottom","top-left","top-right","bottom-left","bottom-right","top-center","right-center","bottom-center","left-center"];if(!o.includes(n))throw Error(`The position given does not match allowed positions to use! Valid positions are: ${o.join(", ")}`);await V();const i=t.getBoundingClientRect();return at[n](i)};class pt{#t;el;circle;radius;options;constructor(t,e,n){this.#e(t,e,n)}#e(t,e,n){if(!t||!e||!n)throw new Error("Missing inputs el or radius or options");if(!document.body.contains(t))throw new Error("el is not in the DOM");if(this.el=t,this.radius=e,this.options=n,this.#t=document.getElementById("ph-speccer-svg"),!this.#t)throw new Error("Missing required SVG element to draw circles. Please see the documentation");const o=document.body,i=document.documentElement,s=Math.max(o.scrollHeight,o.offsetHeight,i.clientHeight,i.scrollHeight,i.offsetHeight);_(this.#t,{height:`${s}px`}),this.draw()}async draw(){const t=`ph_draw-circle-${q()}`;this.circle=document.createElementNS("http://www.w3.org/2000/svg","circle");const e=this.el.getAttribute("id")||q();if(this.el.setAttribute("id",e),this.circle.setAttribute("id",t),this.circle.setAttribute("data-el",e),this.circle.classList.add("ph-speccer"),this.circle.classList.add("speccer"),this.circle.classList.add("circle"),!this.#t)throw new Error("No parentNode found for circle");this.#t.appendChild(this.circle);const{x:n,y:o}=await ct(this.el,this.options.position);this.circle.setAttribute("r",this.radius+""),this.circle.setAttribute("cx",Math.round(n)+""),this.circle.setAttribute("cy",Math.round(o+document.documentElement.scrollTop)+""),this.circle.setAttribute("fill","currentColor")}}window.DrawCircle=pt;const lt=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:i,y:s}=await ct(t,n),{x:r,y:a}=await ct(e,o);return{x1:i,y1:s,x2:r,y2:a}},dt=(t,e)=>{const{x1:n,x2:o,y1:i,y2:s}=t,{direct:r=!1,firstSet:a=!1,direction:c}=e,p={x:n,y:i},l={x:o,y:s};return r?a?"west"===c?{firstPoint:p,firstControl:{x:n-32,y:i-8},lastPoint:l,lastControl:{x:o+32,y:s}}:"south"===c?{firstPoint:p,firstControl:{x:n-8,y:i+32},lastPoint:l,lastControl:{x:o,y:s-32}}:"east"===c?{firstPoint:p,firstControl:{x:n+32,y:i-8},lastPoint:l,lastControl:{x:o-32,y:s}}:{firstPoint:p,firstControl:{x:n-8,y:i-32},lastPoint:l,lastControl:{x:o,y:s+32}}:"west"===c?{firstPoint:p,firstControl:{x:n-32,y:i+8},lastPoint:l,lastControl:{x:o+32,y:s}}:"south"===c?{firstPoint:p,firstControl:{x:n+8,y:i+32},lastPoint:l,lastControl:{x:o,y:s-32}}:"east"===c?{firstPoint:p,firstControl:{x:n+32,y:i+8},lastPoint:l,lastControl:{x:o-32,y:s}}:{firstPoint:p,firstControl:{x:n+8,y:i-32},lastPoint:l,lastControl:{x:o,y:s+32}}:{firstPoint:p,firstControl:{x:n+(o-n)/2,y:i},lastPoint:l,lastControl:{x:n+(o-n)/2,y:s}}},ht=async(t,e,n)=>{const{pos1:o,pos2:i,firstSet:s=!1,direction:r}=n,{x1:a,y1:c,x2:p,y2:l}=await lt(t,e,o,i);let d=0,h=0;"north"===r?h=8:"west"===r?d=8:"east"===r?d=-8:"south"===r&&(h=-8);const{firstPoint:u,firstControl:f,lastControl:g,lastPoint:m}=dt({x1:a+0,x2:p+d,y1:c+0+document.documentElement.scrollTop,y2:l+h+document.documentElement.scrollTop},{direct:!0,firstSet:s,direction:r});return`M ${u.x} ${u.y}C ${f.x} ${f.y}, ${g.x} ${g.y}, ${m.x} ${m.y}`},ut=async({start:t,stop:e,crude:n=!1})=>{const{x1:s,y1:r,x2:a,y2:c}=await lt(t,e),p=((t,e,n,s,r=!0)=>{if(i(t)||i(e)||i(n)||i(s))throw new SyntaxError("Missing input for `angle`");if(o(t)||o(e)||o(n)||o(s))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof n} ${typeof s}`);const a=s-e,c=n-t;let p=Math.atan2(a,c);return p*=180/Math.PI,r&&p<0&&(p+=360),p})(s,r,a,c);return n?(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=45&&t<=135?"south":t>135&&t<=225?"west":t>225&&t<=315?"north":"east"})(p):(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=0&&t<=22.5?"east":t>=22.5&&t<=67.5?"south-east":t>=67.5&&t<=112.5?"south":t>=112.5&&t<=157.5?"south-west":t>=157.5&&t<=202.5?"west":t>=202.5&&t<=247.5?"north-west":t>=247.5&&t<=292.5?"north":t>=292.5&&t<=337.5?"north-east":"east"})(p)};class ft{#t;#n;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#e(t,e)}#e(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const n=document.body,o=document.documentElement,i=Math.max(n.scrollHeight,n.offsetHeight,o.clientHeight,o.scrollHeight,o.offsetHeight);_(this.#t,{height:`${i}px`}),this.connect()}connect(){this.draw(this.#n)}#o(t){if(!t)throw new Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${q()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||q();return this.startElement.setAttribute("id",o),n.setAttribute("data-start-el",o),n.setAttribute("id",e),n.classList.remove("original"),n.classList.add("speccer"),n}async draw(t){if(!t)throw new Error("No path given to draw!");const e=this.#o(t),n=this.#o(t);if(!t.parentNode)throw new Error("No parentNode found for path");this.firstPathElement=t.parentNode.insertBefore(e,t.nextSibling),this.secondPathElement=t.parentNode.insertBefore(n,t.nextSibling);const o=await ut({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:i,path1pos2:s,path2pos1:r,path2pos2:a}=(t=>{let e,n,o,i;switch(t){case"east":e="right-top",n="left-center",o="right-bottom",i="left-center";break;case"south":e="bottom-left",n="top-center",o="bottom-right",i="top-center";break;case"west":e="left-top",n="right-center",o="left-bottom",i="right-center";break;default:e="top-left",n="bottom-center",o="top-right",i="bottom-center"}return{path1pos1:e,path1pos2:n,path2pos1:o,path2pos2:i}})(o),c=await ht(this.startElement,this.stopElement,{pos1:i,pos2:s,firstSet:!0,direction:o}),p=await ht(this.startElement,this.stopElement,{pos1:r,pos2:a,direction:o});this.firstPathElement.setAttribute("data-direction",o),this.firstPathElement.setAttribute("data-pos1",i),this.firstPathElement.setAttribute("data-pos2",s),this.firstPathElement.setAttribute("d",c),this.secondPathElement.setAttribute("data-direction",o),this.secondPathElement.setAttribute("data-pos1",r),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",p)}}window.DrawSVGCurlyBracket=ft;class gt{#t;#n;startElement;stopElement;options;line;constructor(t,e,n={}){this.#e(t,e,n)}#e(t,e,n={}){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.options=n,this.#t=document.getElementById("ph-speccer-svg"),this.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const o=document.body,i=document.documentElement,s=Math.max(o.scrollHeight,o.offsetHeight,i.clientHeight,i.scrollHeight,i.offsetHeight);_(this.#t,{height:`${s}px`}),this.connect()}connect(){this.draw(this.#n)}async draw(t){if(!t)throw new Error("No path given to draw!");const e=`ph_draw_path-path-${q()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||q();this.startElement.setAttribute("id",o),n.setAttribute("id",e),n.setAttribute("data-start-el",o),n.classList.remove("original"),n.classList.add("speccer");const{pin:i}=this.options;if(i?.text&&n.classList.add("text"),!t.parentNode)throw new Error("No parentNode found for path");this.line=t.parentNode.insertBefore(n,t.nextSibling);const s=await ut({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:r,pos2:a}=(t=>{let e,n;switch(t){case"east":e="right",n="left";break;case"south":e="bottom",n="top";break;case"west":e="left",n="right";break;default:e="top",n="bottom"}return{pos1:e,pos2:n}})(s),c=await(async(t,e,n)=>{const{pos1:o,pos2:i}=n,{x1:s,y1:r,x2:a,y2:c}=await lt(t,e,o,i),{firstPoint:p,firstControl:l,lastControl:d,lastPoint:h}=dt({x1:s,x2:a,y1:r+document.documentElement.scrollTop,y2:c+document.documentElement.scrollTop},{direction:""});return`M ${p.x} ${p.y}C ${l.x} ${l.y}, ${d.x} ${d.y}, ${h.x} ${h.y}`})(this.startElement,this.stopElement,{pos1:r,pos2:a});this.line.setAttribute("data-direction",s),this.line.setAttribute("data-pos1",r),this.line.setAttribute("data-pos2",a),this.line.setAttribute("d",c)}}window.DrawSVGLine=gt;const mt=t=>parseInt(t,10),yt=t=>mt(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,wt=async(t,e,n,o)=>{await V();const{pin:i={},position:s}=o,{useCurlyBrackets:r,subtle:a,bracket:c,text:p,parent:l,enclose:d}=i,h=yt(e),u=mt(getComputedStyle(e).getPropertyValue("--ph-speccer-measure-size"))||8;const f=await F(e,t);if(d){const{left:t,top:e,height:n,width:o}=f.absolute();return{left:`${t}px`,top:`${e}px`,height:`${n}px`,width:`${o}px`}}if((l||p)&&!c&&!r&&!a){if(s===m.Right){const{top:t}=f.fromRight({center:!0});await V();const{left:e,width:o}=n.getBoundingClientRect();return{left:`${e+o+h}px`,top:`${t}px`}}if(s===m.Bottom){const{left:t}=f.toBottom({center:!0});await V();const{top:e,height:o}=n.getBoundingClientRect();return{left:`${t}px`,top:`${e+o+h}px`}}if(s===m.Left){const{top:t}=f.fromLeft({center:!0});await V();const{left:e}=n.getBoundingClientRect();return{left:e-1.5*h-(p?170:0)+"px",top:`${t}px`}}const{left:t}=f.fromTop({center:!0});await V();const{top:e}=n.getBoundingClientRect();return{left:`${t}px`,top:e-1.5*h+"px"}}if(s===m.Left){if(c&&!r){const{left:t,top:e,height:n}=f.fromLeft({sourceWidth:u});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:t,top:e}=f.fromLeft({center:!0,modifier:r?h/1.5:h});return{left:`${t}px`,top:`${e}px`}}if(s===m.Right){if(c&&!r){const{left:t,top:e,height:n}=f.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:t,top:e}=f.fromRight({center:!0,modifier:r?h/1.5:h});return{left:`${t}px`,top:`${e}px`}}if(s===m.Bottom){if(c&&!r){const{left:t,top:e,width:n}=f.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:t,top:e}=f.fromBottom({center:!0,modifier:r?h/1.5:h});return{left:`${t}px`,top:`${e}px`}}if(c&&!r){const{left:t,top:e,width:n}=f.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:g,top:y}=f.fromTop({center:!0,modifier:r?h/1.5:h});return{left:`${g}px`,top:`${y}px`}},xt=async(t,e,n,o)=>{if(!t)return;if("pin"!==o.type||!o.pin)return;const i=`speccer-${o.slug}-${t.getAttribute("id")||q()}`,s=tt(n,o,i);t.setAttribute("data-speccer-element-id",i),document.body.appendChild(s);const r=await wt(t,s,e,o);await _(s,r);const a=o.pin.text&&null!==t.getAttribute("data-speccer-title"),c=o.pin.parent&&!o.pin.enclose&&!o.pin.bracket&&!a;return o.pin.useSVGLine?(new gt(t,s,o),c&&new pt(t,5,o)):o.pin.useCurlyBrackets&&new ft(t,s),i};let bt=0;const $t=async(t,e)=>{if(!t)return;const n=t.querySelectorAll('[data-speccer^="pin"]');if(!n||0===n.length)return;const o=t.getAttribute("data-speccer-literals")||window.SPECCER_LITERALS||a;[...n].filter((async t=>!O(t))).forEach((async(n,i)=>{const s=((t,e)=>{let n=e[t];return 0===t&&(bt=0),n||(n=`${e[bt]}${e[bt].toLowerCase()}`,bt++),n})(i,o),r=n.getAttribute("data-speccer")||"";await V();const a=getComputedStyle(n),c=N(r,a,e),p=((t,e,n)=>{const{pin:o}=n;if(!o)return t;const{text:i}=o;if(!i||null===e.getAttribute("data-speccer-title"))return t;const s=e.getAttribute("data-speccer-title"),r=e.getAttribute("data-speccer-description"),a=0===e.nodeName.indexOf("H")?`<span class="ph-speccer heading">${e.nodeName}</span>`:"";return!r&&s?`${a}<span class="ph-speccer title">${s}</span>`:r&&s?`${a}<span class="ph-speccer title">${s}</span><span class="ph-speccer description">${r.replaceAll("\\n","<br/>")}</span>`:t})(s,n,c);await xt(n,t,p,c)}))},Et=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(`${t}px`);return n.appendChild(o),n.setAttribute("title",`${t}px`),s(n,"ph-speccer speccer spacing"),n},At=async(t,e)=>{if(!t)return;if(O(t))return;const n=t.getAttribute("data-speccer")||"",o=await X(t),i=N(n,o,e);if("spacing"!==i.type||!i.spacing)return;const a=((t,e)=>{const{marginTop:n,marginBottom:o,marginLeft:i,marginRight:s,paddingTop:r,paddingBottom:a,paddingLeft:c,paddingRight:p}=t;return e?.spacing?.padding?{paddingTop:r,paddingBottom:a,paddingLeft:c,paddingRight:p}:e?.spacing?.margin?{marginTop:n,marginBottom:o,marginLeft:i,marginRight:s}:{marginTop:n,marginBottom:o,marginLeft:i,marginRight:s,paddingTop:r,paddingBottom:a,paddingLeft:c,paddingRight:p}})(o,i),c=Object.keys(a).filter((t=>"0px"!==a[t]));if(!c.length)return;t.classList.add("is-specced");const p=`speccer-spacing-${t.getAttribute("id")||q()}`;t.setAttribute("data-speccer-element-id",p),c.forEach((async e=>{const n=mt(a[e]),o=Et(n);o.setAttribute("data-speccer-id",p);const c=(t=>t.includes("Top")?t.replace("Top"," top"):t.includes("Right")?t.replace("Right"," right"):t.includes("Bottom")?t.replace("Bottom"," bottom"):t.includes("Left")?t.replace("Left"," left"):"")(e);s(o,r(c,{bound:!!i?.spacing?.bound})),document.body.appendChild(o);const l=await(async(t,e,n,o)=>{await V();const i=n.getBoundingClientRect(),s=await D(n),r=o?.spacing?.bound?0:96,a=o?.spacing?.bound?0:48;return"marginTop"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top-e+"px"}:"marginRight"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left+parseInt(i.width+"",10)+"px",top:s.top+"px"}:"marginBottom"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top+parseInt(i.height+"",10)+"px"}:"marginLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left-e+"px",top:s.top+"px"}:"paddingTop"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top+"px"}:"paddingBottom"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top+(parseInt(i.height+"",10)-e)+"px"}:"paddingRight"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left+(parseInt(i.width+"",10)-e)+"px",top:s.top+"px"}:"paddingLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left+"px",top:s.top+"px"}:void 0})(e,n,t,i);await _(o,l)}))},kt=(t,e=3)=>parseFloat(String(t)).toFixed(e),Ct=(t,e,n)=>{const o=document.createElement("div"),{typography:i,position:a}=e,c=r("ph-speccer speccer typography",{syntax:i?.useSyntaxHighlighting||!1,[a]:!0});return o.setAttribute("id",n),o.innerHTML=t,s(o,c),o},St=async(t,e)=>{if(!t)return;if(O(t))return;const n=t.getAttribute("data-speccer")||"";await V();const o=N(n,getComputedStyle(t),e);if("typography"!==o.type||!o.typography)return;t.classList.add("is-specced");const i=await(async(t,e=!1)=>{const n=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:s,fontVariationSettings:r,fontWeight:a}=t;return{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:s,fontVariationSettings:r,fontWeight:a}})(await X(t));if(e){const t=n.fontFamily.split(",").map((t=>t.includes("'")?`<span class="token string">${t}</span>`:t)).join('<span class="token punctuation">, </span>'),e=`<span class="token number">${parseInt(n.fontSize,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.fontSize,10)/16}</span><span class="token unit">rem</span>`,o=n.letterSpacing.includes("px")?`<span class="token number">${parseInt(n.letterSpacing,10)}</span><span class="token unit">px</span>`:n.letterSpacing,i="normal"!==n.lineHeight?`<span class="token number">${parseInt(n.lineHeight,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.lineHeight,10)/16}</span><span class="token unit">rem</span>`:"normal";return`\n<pre class="language-css" tabindex="-1"><code class="language-css"><span class="token selector"><span class="token class">.typography</span></span> <span class="token punctuation">{</span>\n <span class="token property">font-family</span><span class="token punctuation">:</span> ${t}<span class="token punctuation">;</span>\n <span class="token property">font-size</span><span class="token punctuation">:</span> ${e}<span class="token punctuation">;</span>\n <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">${n.fontWeight}</span><span class="token punctuation">;</span>\n <span class="token property">font-variation-settings</span><span class="token punctuation">:</span> ${n.fontVariationSettings}<span class="token punctuation">;</span>\n <span class="token property">line-height</span><span class="token punctuation">:</span> ${i}<span class="token punctuation">;</span>\n <span class="token property">letter-spacing</span><span class="token punctuation">:</span> ${o}<span class="token punctuation">;</span>\n <span class="token property">font-style</span><span class="token punctuation">:</span> ${n.fontStyle}<span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>`}return`\ntypography: {<ul class="speccer-styles"> <li><span class="property">font-family:</span> ${n.fontFamily};</li> <li><span class="property">font-size:</span> ${n.fontSize} / ${parseInt(n.fontSize,10)/16}rem;</li> <li><span class="property">font-weight:</span> ${n.fontWeight};</li> <li><span class="property">font-variation-settings:</span> ${n.fontVariationSettings};</li> <li><span class="property">line-height:</span> ${"normal"!==n.lineHeight?`${parseInt(n.lineHeight,10)}px / ${parseInt(n.lineHeight,10)/16}rem`:"normal"};</li> <li><span class="property">letter-spacing:</span> ${n.letterSpacing};</li> <li><span class="property">font-style:</span> ${n.fontStyle};</li></ul>}`})(t,o.typography.useSyntaxHighlighting),s=`speccer-${o.slug}-${t.getAttribute("id")||q()}`;t.setAttribute("data-speccer-element-id",s);const r=Ct(i,o,s);document.body.appendChild(r);const a=await(async(t,e,n)=>{const o=e.getBoundingClientRect(),i=yt(n),s=n.getBoundingClientRect(),r=await D(e),{typography:a,position:c}=t;if(a&&c===w.Right)return{left:r.left+o.width+i+"px",top:kt(W(r.top,s,o))+"px"};if(a&&c===w.Top)return{left:kt(j(r.left,s,o))+"px",top:r.top-s.height-i+"px"};if(a&&c===w.Bottom)return{left:kt(j(r.left,s,o))+"px",top:r.top+o.height+i+"px"};return{left:r.left-s.width-i+"px",top:kt(W(r.top,s,o))+"px"}})(o,t,r);_(r,a)},vt=t=>{const e=()=>((t,e,n=!1)=>{let o;return function(i,...s){const r=n&&!o;o&&clearTimeout(o),o=setTimeout((function(){o=null,n||t.apply(i,s)}),e),r&&t.apply(i,s)}})((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},Pt=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},Lt=()=>{const t=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(At(n.target),e.unobserve(n.target))}));for(const e of document.querySelectorAll(`[${c}^="${p}"],[${c}^="${p}"] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)`))t.observe(e);const e=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(Q(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${c}^="${l}"]`))e.observe(t);const n=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(Z(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${c}^="${h}"]`))n.observe(t);const o=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(St(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${c}^="${d}"]`))o.observe(t);const i=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(K(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${c}^="${u}"]`))i.observe(t);const s=new IntersectionObserver((async(t,e)=>{for(const n of t)n.intersectionRatio>0&&(await $t(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${c}="${f}"]`))s.observe(t)},Bt=t=>{window.speccer=t},Rt=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?Bt(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?Pt(t):e.hasAttribute("data-lazy")?Lt():Pt(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||vt(t))}},Tt=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],Ht=["escape","esc","enter","return","⏎","␛"],It=async(t,e,n)=>{await V();const o=yt(n),i=await F(n,e);if("tabstops"===t){let{left:t,top:e}=i.fromTop();return t-=32,e+=32,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("landmark"===t){let{left:t,top:e}=i.fromTop();return t-=16,e-=16,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("region"===t){const{left:t,top:e,height:n,width:o}=i.fromTop();return{height:`${n}px`,width:`${o}px`,left:`${t}px`,top:`${e}px`}}if("shortcut"===t){const{left:t,top:e}=i.fromBottom();return{left:`${t}px`,top:`${e}px`}}const{left:s,top:r}=i.fromTop({center:!0,modifier:o});return{left:s-32+"px",top:r-32+"px"}},Mt=async(t,e,n)=>{if(!t||!t.checkVisibility())return;const o=((t="tabstops",e,n="span")=>{const o=document.createElement(n),i=r("ph-speccer speccer a11y",{tabstops:"tabstops"===t,landmark:"landmark"===t,region:"region"===t});if("landmark"===t&&e){const t=document.createTextNode(String(e));o.appendChild(t)}return s(o,i),o})(n,e);if("landmark"===n){o.setAttribute("data-speccer-nodename",t.nodeName);const e=t.role||`semantic role: ${t.nodeName.toLowerCase()}`,n=t.getAttribute("aria-label")||"unnamed";o.setAttribute("title",`${n}: ${e}`)}document.body.appendChild(o);const i=await It(n,t,o);await _(o,i)},Nt=async(t,e)=>{const n=e.split(/\s\+\s/).map((t=>t.trim())),o=document.createElement("div"),i=r("ph-speccer speccer a11y shortcut-holder");s(o,i);for(const t of n){const e=document.createElement("kbd"),n=document.createTextNode(t),i=r("ph-speccer speccer a11y shortcut",{modifier:Tt.includes(t.toLowerCase()),physical:Ht.includes(t.toLowerCase())});s(e,i),e.appendChild(n),o.appendChild(e)}document.body.appendChild(o);const a=await It("shortcut",t,o);await _(o,a)},qt=t=>{const e=t.getAttribute("data-speccer-element-id");if(!e)return;const n=document.getElementById(e)||document.querySelectorAll(`[data-speccer-id="${e}"]`);if(n)if(Object.prototype.isPrototypeOf.call(NodeList.prototype,n))[...n].forEach((t=>{t.remove(),t.classList.remove("is-specced")}));else if(n.classList.contains("curly")||n.classList.contains("svg")){const e=t.getAttribute("id");document.querySelectorAll(`#ph-speccer-svg path[data-start-el="${e}"]`).forEach((t=>t.remove()))}},Ot={create:Y,element:K},Vt={create:Et,element:At},zt={createPinElement:tt,pinElement:xt,pinElements:$t},Gt={create:J,element:Q},jt={create:U,element:Z},Wt={create:Ct,element:St},Dt={dom:Pt,lazy:Lt,manual:Bt,activate:Rt},Ft=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".ph-speccer.speccer");const t=document.querySelectorAll(`[${c}^="${p}"],[${c}^="${p}"] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)`),e=document.querySelectorAll(`[${c}^="${l}"]`),n=document.querySelectorAll(`[${c}^="${d}"]`),o=document.querySelectorAll(`[${c}="${f}"]`),i=document.querySelectorAll(`[${c}^="${h}"]`),s=document.querySelectorAll(`[${c}^="${u}"]`);for(const t of i)Z(t);for(const t of s)K(t);for(const e of t)At(e);for(const t of e)Q(t);for(const t of n)St(t);for(const t of o)$t(t);(()=>{const t=document.querySelectorAll('[data-speccer*="a11y tabstops"]'),e=document.querySelectorAll('[data-speccer*="a11y landmark"]'),n=document.querySelectorAll('[data-speccer*="a11y shortcut"]');if(n.length)for(const t of n){const e=t.getAttribute("data-speccer-a11y-shortcut");e&&""!==e&&!O(t)&&Nt(t,e)}if(t.length)for(const e of t){const t=e.querySelectorAll("\n a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n textarea:not([disabled]):not([tabindex='-1']),\n iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]\n");for(const e of t)O(e)||Mt(e,null,"tabstops")}if(e.length)for(const t of e){const e=t.querySelectorAll('\nheader, footer, section, form, main, nav, aside, [role="section"], [role="banner"],\n[role="complementary"], [role="contentinfo"], [role="form"], [role="main"],\n[role="navigation"], [role="region"], [role="search"]\n');for(const[t,n]of e.entries())O(n)||(Mt(n,t+1,"landmark"),Mt(n,null,"region"))}})()};Rt(Ft);export{Ft as default,Ot as grid,jt as mark,Gt as measure,Dt as modes,zt as pin,qt as removeSpeccerElement,Vt as spacing,Wt as typography};
27
+ const t=t=>"string"==typeof t,e=e=>!t(e),n=t=>"number"==typeof t,o=t=>!n(t),i=t=>void 0===t,s=(t,e,n="noop")=>{if(!t)return;if(!e||e&&!e.length)return;const o=e.trim().split(" ").filter((t=>t!==n)).filter((t=>""!==t)).map((t=>t.trim()));t.classList.add(...o)},r=(t,n)=>t?!n&&e(t)?Object.keys(t).filter((e=>t[e])).join(" ").trim():`${t.trim()} ${n?Object.keys(n).filter((t=>n[t])).join(" "):""}`.trim():"",a=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],c="data-speccer",p="spacing",l="measure",d="typography",h="mark",u="grid",f="pin-area";var g,m,y,w,x,b,$;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(g||(g={})),function(t){t.Pin="pin",t.Parent="parent",t.Text="text",t.Enclose="enclose",t.Subtle="subtle",t.Bracket="bracket",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top",t.SVG="svg",t.Curly="curly"}(m||(m={})),function(t){t.Measure="measure",t.Slim="slim",t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(y||(y={})),function(t){t.Typography="typography",t.Syntax="syntax",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(w||(w={})),function(t){t.Spacing="spacing"}(x||(x={})),function(t){t.Mark="mark"}(b||(b={})),function(t){t.Grid="grid"}($||($={}));const E=t=>t.split(" "),A=t=>{if(null===t)return!1;return E(t).includes(m.Bracket)},C=t=>{if(null===t)return!1;return E(t).includes(m.Enclose)},S=t=>{if(null===t)return!1;return E(t).includes(m.Subtle)},k=t=>{if(null===t)return!1;return E(t).includes(m.Parent)},v=t=>{if(null===t)return!1;return E(t).includes(m.Text)},P=t=>{if(null===t)return!1;return E(t).includes(y.Height)},L=t=>{if(null===t)return!1;return E(t).includes(y.Slim)},B=t=>{if(null===t)return!1;return E(t).includes(y.Width)},R=t=>{if(null===t)return!1;const e=E(t);return(k(t)&&!C(t)&&!A(t)||v(t)||e.includes(m.SVG))&&!T(t)},T=t=>{if(null===t)return!1;const e=E(t);return e.includes(m.Curly)&&e.includes(m.Bracket)},H=t=>!!t&&t.split(" ").includes(w.Syntax),I=(t,e)=>(t=>null!==t&&t.split(" ").includes(m.Pin))(t)?"pin":((t,e)=>null!==t&&t.split(" ").includes($.Grid)&&("grid"===e.display||e.display.includes("grid")))(t,e)?"grid":(t=>null!==t&&t.split(" ").includes(b.Mark))(t)?"mark":(t=>null!==t&&t.split(" ").includes(y.Measure))(t)?"measure":(t=>null!==t&&t.split(" ").includes(x.Spacing))(t)?"spacing":(t=>null!==t&&t.split(" ").includes(w.Typography))(t)?"typography":"pin",M=t=>(t=>null!==t&&E(t).includes(m.Left))(t)?"left":(t=>null!==t&&E(t).includes(m.Right))(t)?"right":(t=>null!==t&&E(t).includes(m.Bottom))(t)?"bottom":"top",N=(t,e,n)=>{const o=I(t,e),i={slug:(s=t,s.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").trim().toLowerCase().replace(/[^a-z0-9 -]/g,"").replace(/\s+/g," ").replace(/(?:^\w|[A-Z]|\b\w)/g,((t,e)=>0===e?t.toLowerCase():t.toUpperCase())).replace(/\s+/g,"")),position:M(t),type:o};var s;if("pin"===o&&(i.pin={bracket:A(t),enclose:C(t),subtle:S(t),parent:k(t),text:v(t),useSVGLine:R(t),useCurlyBrackets:T(t)}),"measure"===o&&(i.measure={slim:L(t),height:P(t),width:B(t)}),"typography"===o&&(i.typography={useSyntaxHighlighting:H(t)}),"grid"===o){const e=(t=>t?.includes("columns")?"columns":t?.includes("rows")?"rows":"both")(t);i.grid={toggle:e,both:"both"===e,rows:"rows"===e,columns:"columns"===e}}if("spacing"===o){const e=(t=>t?.includes("margin")?"margin":t?.includes("padding")?"padding":"both")(t);i.spacing={both:"both"===e,margin:"margin"===e,padding:"padding"===e,bound:t.includes("bound")}}return{...i,...n}},q=()=>"_"+Math.random().toString(36).substring(2,11),O=t=>!t.checkVisibility({opacityProperty:!0,checkVisibilityCSS:!0}),V=()=>new Promise(requestAnimationFrame),z=async(t,e,n)=>{await V();return getComputedStyle(t)[e]===n},G=async(t,e,n)=>{if(!t.parentElement)return null;return await z(t.parentElement,e,n)?t.parentElement:await G(t.parentElement,e,n)},j=(t,e,n)=>t-e.width/2+n.width/2,W=(t,e,n)=>t-e.height/2+n.height/2,D=async t=>{await V();let e=t.getBoundingClientRect(),n=e.top+window.scrollY;const o=e.left+window.scrollX,i=await(async t=>await G(t,"position","sticky"))(t),s=await(async t=>await z(t,"position","sticky"))(t);if(s){const o=t.style.position;await V(),t.style.position="relative",await V(),e=t.getBoundingClientRect(),n=e.top,await V(),t.style.position=o}else if(i){const o=i.style.position;await V(),i.style.position="relative",await V(),e=t.getBoundingClientRect(),n=e.top,await V(),i.style.position=o}return{height:e.height,width:e.width,top:n,left:o}},F=async(t,e)=>{await V();const n=t.getBoundingClientRect(),o=await D(e),i=await(async(t,e)=>{await V();const n=t.getBoundingClientRect();await V();const o=e.getBoundingClientRect(),i=o.top+window.scrollY,s=o.left+window.scrollX;return{height:o.height,width:o.width,top:W(i,n,o),left:j(s,n,o)}})(t,e),s=o.height,r=o.width,a=n.height,c=n.width;return{absolute:()=>({top:o.top,left:o.left,height:s,width:r}),toTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:s,width:r}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:n=0}={})=>({top:o.top-e-n,left:t?i.left:o.left,height:s,width:r}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:n=s,modifier:c=0}={})=>({top:o.top+n-(e+c),left:t?i.left:o.left,height:s,width:r}),fromBottom:({center:t=!1,targetHeight:e=s,modifier:n=0}={})=>({top:o.top+e+n,left:t?i.left:o.left,height:s,width:r}),toLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:s,width:r}),fromLeft:({center:t=!1,sourceWidth:e=c,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left-e-n,height:s,width:r}),toRight:({center:t=!1,sourceWidth:e=c,targetWidth:n=r,modifier:a=0}={})=>({top:t?i.top:o.top,left:o.left+n-(e+a),height:s,width:r}),fromRight:({center:t=!1,targetWidth:e=r,modifier:n=0}={})=>({top:t?i.top:o.top,left:o.left+e+n,height:s,width:r})}},_=async(e,o)=>{var i;!e||!o||t(o)||n(o)||(i=o,"boolean"==typeof i)||Array.isArray(o)&&!o.length||!Object.keys(o).length&&o.constructor===Object||(await V(),Array.isArray(o)&&(o=o.reduce(((t,e)=>(t[e.key]=e.value,t)),{})),Object.assign(e.style,o))},X=async t=>(await V(),getComputedStyle(t,null)),Y=async(t,e,n)=>{await V();const{grid:o}=n;if(!o)return;const{toggle:i}=o,{height:r,width:a}=t.getBoundingClientRect(),{top:c,left:p}=await D(t),{gridTemplateColumns:l,gridTemplateRows:d,padding:h}=e,u=`speccer-${n.slug}-${t.getAttribute("id")||q()}`;if(t.setAttribute("data-speccer-element-id",u),"columns"===i||"both"===i){const t=parseInt(e.columnGap),n=document.createElement("div");document.documentElement.style.setProperty("--ph-speccer-grid-gap-original",`${t}px`),document.documentElement.style.setProperty("--ph-speccer-grid-gap",`${t<24?24:t}px`),t<24&&n.classList.add("speccer-small-grid"),n.setAttribute("data-speccer-id",u),s(n,"ph-speccer speccer speccer-grid-container"),_(n,{height:`${r+64}px`,width:`${a}px`,left:`${p}px`,top:c-32+"px",padding:h,gridTemplateColumns:l});const o=l.split(" ").length;for(let t=0;t<o;t++){const t=document.createElement("div");s(t,"ph-speccer speccer speccer-grid-item"),n.appendChild(t)}document.body.appendChild(n)}if("rows"===i||"both"===i){const t=parseInt(e.rowGap),n=document.createElement("div");document.documentElement.style.setProperty("--ph-speccer-grid-row-gap-original",`${t}px`),document.documentElement.style.setProperty("--ph-speccer-grid-row-gap",`${t<24?24:t}px`),t<24&&n.classList.add("speccer-small-grid"),n.setAttribute("data-speccer-id",u),n.classList.add("ph-speccer"),n.classList.add("speccer"),n.classList.add("speccer-grid-row-container"),s(n,"ph-speccer speccer speccer-grid-row-container"),_(n,{width:`${a+64}px`,height:`${r}px`,top:`${c}px`,left:p-32+"px",padding:h,gridTemplateRows:d});const o=d.split(" ").length;for(let t=0;t<o;t++){const t=document.createElement("div");s(t,"ph-speccer speccer speccer-grid-row-item"),n.appendChild(t)}document.body.appendChild(n)}},K=async(t,e)=>{if(!t)return;if(O(t))return;const n=t.getAttribute(c)||"",o=await X(t),i=N(n,o,e);"grid"===i.type&&i.grid&&(await V(),await Y(t,o,i))},U=(t,e="span")=>{const n=document.createElement(e);return n.setAttribute("id",t),s(n,"ph-speccer speccer mark"),n},Z=async t=>{if(!t)return;if(O(t))return;const e=t.getAttribute(c)||"";await V();const n=N(e,getComputedStyle(t));if("mark"!==n.type)return;const o=`speccer-${n.slug}-${t.getAttribute("id")||q()}`;t.setAttribute("data-speccer-element-id",o);const i=U(o);document.body.appendChild(i);const s=await F(i,t),{left:r,top:a,height:p,width:l}=s.absolute(),d={left:`${r}px`,top:`${a}px`,height:`${p}px`,width:`${l}px`};await _(i,d)},J=(t="",e,n,o="span")=>{const i=document.createElement(o);i.setAttribute("title",`${t}px`),i.setAttribute("id",n),i.setAttribute("data-measure",`${parseInt(String(t),10)}px`);const{measure:a,position:c}=e,p=r("ph-speccer speccer measure",{height:a?.height||!1,width:a?.width||!1,slim:a?.slim||!1,[c]:!0});return s(i,p),i},Q=async(t,e)=>{if(!t)return;if(O(t))return;const n=t.getAttribute("data-speccer")||"";await V();const o=N(n,getComputedStyle(t),e);if("measure"!==o.type||!o.measure)return;const{measure:i,position:s}=o;await V();const r=t.getBoundingClientRect(),a=i.slim?0:48,c=i.slim?0:96,p=`speccer-${o.slug}-${t.getAttribute("id")||q()}`;if(t.setAttribute("data-speccer-element-id",p),i.width)if(s===y.Bottom){const e=J(r.width,o,p);document.body.appendChild(e);const n=await F(e,t);if(i.slim){const{left:t,top:o,width:i}=n.fromBottom({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`})}else{const{left:t,top:o,width:i,height:s}=n.absolute({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`,height:`${s+a}px`})}}else{const e=J(r.width,o,p);document.body.appendChild(e);const n=await F(e,t);if(i.slim){const{left:t,top:o,width:i}=n.fromTop({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,width:`${i}px`})}else{const{left:t,top:o,width:i,height:s}=n.absolute({center:!1});await _(e,{left:`${t}px`,top:o-a+"px",width:`${i}px`,height:`${s+a}px`})}}else if(i.height)if(s===y.Right){const e=J(r.height,o,p);document.body.appendChild(e);const n=await F(e,t);if(i.slim){const{left:t,top:o,height:i}=n.fromRight({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`})}else{const{left:t,top:o,height:i,width:s}=n.absolute({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`,width:`${s+c}px`})}}else{const e=J(r.height,o,p);document.body.appendChild(e);const n=await F(e,t);if(i.slim){const{left:t,top:o,height:i}=n.fromLeft({center:!1});await _(e,{left:`${t}px`,top:`${o}px`,height:`${i}px`})}else{const{left:t,top:o,height:i,width:s}=n.absolute({center:!1});await _(e,{left:t-c+"px",top:`${o}px`,height:`${i}px`,width:`${s+c}px`})}}},tt=(t="",e,n="",o="span")=>{const i=document.createElement(o),a={},{position:c,pin:p={}}=e,{useSVGLine:l,useCurlyBrackets:d,text:h,parent:u,bracket:f,enclose:g,subtle:m}=p;a.text=h,a.parent=u,a.bracket=f,a.enclose=g,a.subtle=m,a.svg=l,a.curly=d,a[c]=!0,!u||f||d||m||(a.svg=!0),!f&&!g||f&&d?i.innerHTML=t:(f||g)&&i.setAttribute("data-pin-counter",t);const y=r("ph-speccer speccer pin",a);return s(i,y),i.setAttribute("id",n),i},et=t=>t.top,nt=t=>t.left+t.width,ot=t=>t.top+t.height,it=t=>t.left,st=t=>t.left+t.width/2,rt=t=>t.top+t.height/2,at={center:t=>({x:st(t),y:rt(t)}),top:t=>({x:st(t),y:et(t)}),right:t=>({x:nt(t),y:rt(t)}),bottom:t=>({x:st(t),y:ot(t)}),left:t=>({x:it(t),y:rt(t)}),"right-top":t=>({x:nt(t),y:et(t)}),"right-bottom":t=>({x:nt(t),y:ot(t)}),"left-top":t=>({x:it(t),y:et(t)}),"left-bottom":t=>({x:it(t),y:ot(t)}),"top-left":t=>({x:it(t),y:et(t)}),"top-right":t=>({x:nt(t),y:et(t)}),"bottom-left":t=>({x:it(t),y:ot(t)}),"bottom-right":t=>({x:nt(t),y:ot(t)}),"top-center":t=>({x:st(t),y:et(t)}),"right-center":t=>({x:nt(t),y:rt(t)}),"bottom-center":t=>({x:st(t),y:ot(t)}),"left-center":t=>({x:it(t),y:rt(t)})},ct=async(t,n="center")=>{if(!n)throw Error("No position given");if(e(n))throw Error("The position given is not the required type: pos: "+typeof n);const o=["center","left","right","top","bottom","right-top","right-bottom","left-top","left-bottom","top-left","top-right","bottom-left","bottom-right","top-center","right-center","bottom-center","left-center"];if(!o.includes(n))throw Error(`The position given does not match allowed positions to use! Valid positions are: ${o.join(", ")}`);await V();const i=t.getBoundingClientRect();return at[n](i)};class pt{#t;el;circle;radius;options;constructor(t,e,n){this.#e(t,e,n)}#e(t,e,n){if(!t||!e||!n)throw new Error("Missing inputs el or radius or options");if(!document.body.contains(t))throw new Error("el is not in the DOM");if(this.el=t,this.radius=e,this.options=n,this.#t=document.getElementById("ph-speccer-svg"),!this.#t)throw new Error("Missing required SVG element to draw circles. Please see the documentation");const o=document.body,i=document.documentElement,s=Math.max(o.scrollHeight,o.offsetHeight,i.clientHeight,i.scrollHeight,i.offsetHeight);_(this.#t,{height:`${s}px`}),this.draw()}async draw(){const t=`ph_draw-circle-${q()}`;this.circle=document.createElementNS("http://www.w3.org/2000/svg","circle");const e=this.el.getAttribute("id")||q();if(this.el.setAttribute("id",e),this.circle.setAttribute("id",t),this.circle.setAttribute("data-el",e),this.circle.classList.add("ph-speccer"),this.circle.classList.add("speccer"),this.circle.classList.add("circle"),!this.#t)throw new Error("No parentNode found for circle");this.#t.appendChild(this.circle);const{x:n,y:o}=await ct(this.el,this.options.position);this.circle.setAttribute("r",this.radius+""),this.circle.setAttribute("cx",Math.round(n)+""),this.circle.setAttribute("cy",Math.round(o+document.documentElement.scrollTop)+""),this.circle.setAttribute("fill","currentColor")}}window.DrawCircle=pt;const lt=async(t,e,n="center",o="center")=>{if(!t||!e)throw Error("No element given");const{x:i,y:s}=await ct(t,n),{x:r,y:a}=await ct(e,o);return{x1:i,y1:s,x2:r,y2:a}},dt=(t,e)=>{const{x1:n,x2:o,y1:i,y2:s}=t,{direct:r=!1,firstSet:a=!1,direction:c}=e,p={x:n,y:i},l={x:o,y:s};return r?a?"west"===c?{firstPoint:p,firstControl:{x:n-32,y:i-8},lastPoint:l,lastControl:{x:o+32,y:s}}:"south"===c?{firstPoint:p,firstControl:{x:n-8,y:i+32},lastPoint:l,lastControl:{x:o,y:s-32}}:"east"===c?{firstPoint:p,firstControl:{x:n+32,y:i-8},lastPoint:l,lastControl:{x:o-32,y:s}}:{firstPoint:p,firstControl:{x:n-8,y:i-32},lastPoint:l,lastControl:{x:o,y:s+32}}:"west"===c?{firstPoint:p,firstControl:{x:n-32,y:i+8},lastPoint:l,lastControl:{x:o+32,y:s}}:"south"===c?{firstPoint:p,firstControl:{x:n+8,y:i+32},lastPoint:l,lastControl:{x:o,y:s-32}}:"east"===c?{firstPoint:p,firstControl:{x:n+32,y:i+8},lastPoint:l,lastControl:{x:o-32,y:s}}:{firstPoint:p,firstControl:{x:n+8,y:i-32},lastPoint:l,lastControl:{x:o,y:s+32}}:{firstPoint:p,firstControl:{x:n+(o-n)/2,y:i},lastPoint:l,lastControl:{x:n+(o-n)/2,y:s}}},ht=async(t,e,n)=>{const{pos1:o,pos2:i,firstSet:s=!1,direction:r}=n,{x1:a,y1:c,x2:p,y2:l}=await lt(t,e,o,i);let d=0,h=0;"north"===r?h=8:"west"===r?d=8:"east"===r?d=-8:"south"===r&&(h=-8);const{firstPoint:u,firstControl:f,lastControl:g,lastPoint:m}=dt({x1:a+0,x2:p+d,y1:c+0+document.documentElement.scrollTop,y2:l+h+document.documentElement.scrollTop},{direct:!0,firstSet:s,direction:r});return`M ${u.x} ${u.y}C ${f.x} ${f.y}, ${g.x} ${g.y}, ${m.x} ${m.y}`},ut=async({start:t,stop:e,crude:n=!1})=>{const{x1:s,y1:r,x2:a,y2:c}=await lt(t,e),p=((t,e,n,s,r=!0)=>{if(i(t)||i(e)||i(n)||i(s))throw new SyntaxError("Missing input for `angle`");if(o(t)||o(e)||o(n)||o(s))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof n} ${typeof s}`);const a=s-e,c=n-t;let p=Math.atan2(a,c);return p*=180/Math.PI,r&&p<0&&(p+=360),p})(s,r,a,c);return n?(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=45&&t<=135?"south":t>135&&t<=225?"west":t>225&&t<=315?"north":"east"})(p):(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=0&&t<=22.5?"east":t>=22.5&&t<=67.5?"south-east":t>=67.5&&t<=112.5?"south":t>=112.5&&t<=157.5?"south-west":t>=157.5&&t<=202.5?"west":t>=202.5&&t<=247.5?"north-west":t>=247.5&&t<=292.5?"north":t>=292.5&&t<=337.5?"north-east":"east"})(p)};class ft{#t;#n;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#e(t,e)}#e(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const n=document.body,o=document.documentElement,i=Math.max(n.scrollHeight,n.offsetHeight,o.clientHeight,o.scrollHeight,o.offsetHeight);_(this.#t,{height:`${i}px`}),this.connect()}connect(){this.draw(this.#n)}#o(t){if(!t)throw new Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${q()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||q();return this.startElement.setAttribute("id",o),n.setAttribute("data-start-el",o),n.setAttribute("id",e),n.classList.remove("original"),n.classList.add("speccer"),n}async draw(t){if(!t)throw new Error("No path given to draw!");const e=this.#o(t),n=this.#o(t);if(!t.parentNode)throw new Error("No parentNode found for path");this.firstPathElement=t.parentNode.insertBefore(e,t.nextSibling),this.secondPathElement=t.parentNode.insertBefore(n,t.nextSibling);const o=await ut({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:i,path1pos2:s,path2pos1:r,path2pos2:a}=(t=>{let e,n,o,i;switch(t){case"east":e="right-top",n="left-center",o="right-bottom",i="left-center";break;case"south":e="bottom-left",n="top-center",o="bottom-right",i="top-center";break;case"west":e="left-top",n="right-center",o="left-bottom",i="right-center";break;default:e="top-left",n="bottom-center",o="top-right",i="bottom-center"}return{path1pos1:e,path1pos2:n,path2pos1:o,path2pos2:i}})(o),c=await ht(this.startElement,this.stopElement,{pos1:i,pos2:s,firstSet:!0,direction:o}),p=await ht(this.startElement,this.stopElement,{pos1:r,pos2:a,direction:o});this.firstPathElement.setAttribute("data-direction",o),this.firstPathElement.setAttribute("data-pos1",i),this.firstPathElement.setAttribute("data-pos2",s),this.firstPathElement.setAttribute("d",c),this.secondPathElement.setAttribute("data-direction",o),this.secondPathElement.setAttribute("data-pos1",r),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",p)}}window.DrawSVGCurlyBracket=ft;class gt{#t;#n;startElement;stopElement;options;line;constructor(t,e,n={}){this.#e(t,e,n)}#e(t,e,n={}){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.options=n,this.#t=document.getElementById("ph-speccer-svg"),this.#n=document.getElementById("ph-speccer-path"),!this.#n||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");const o=document.body,i=document.documentElement,s=Math.max(o.scrollHeight,o.offsetHeight,i.clientHeight,i.scrollHeight,i.offsetHeight);_(this.#t,{height:`${s}px`}),this.connect()}connect(){this.draw(this.#n)}async draw(t){if(!t)throw new Error("No path given to draw!");const e=`ph_draw_path-path-${q()}`,n=t.cloneNode(!1),o=this.startElement.getAttribute("id")||q();this.startElement.setAttribute("id",o),n.setAttribute("id",e),n.setAttribute("data-start-el",o),n.classList.remove("original"),n.classList.add("speccer");const{pin:i}=this.options;if(i?.text&&n.classList.add("text"),!t.parentNode)throw new Error("No parentNode found for path");this.line=t.parentNode.insertBefore(n,t.nextSibling);const s=await ut({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:r,pos2:a}=(t=>{let e,n;switch(t){case"east":e="right",n="left";break;case"south":e="bottom",n="top";break;case"west":e="left",n="right";break;default:e="top",n="bottom"}return{pos1:e,pos2:n}})(s),c=await(async(t,e,n)=>{const{pos1:o,pos2:i}=n,{x1:s,y1:r,x2:a,y2:c}=await lt(t,e,o,i),{firstPoint:p,firstControl:l,lastControl:d,lastPoint:h}=dt({x1:s,x2:a,y1:r+document.documentElement.scrollTop,y2:c+document.documentElement.scrollTop},{direction:""});return`M ${p.x} ${p.y}C ${l.x} ${l.y}, ${d.x} ${d.y}, ${h.x} ${h.y}`})(this.startElement,this.stopElement,{pos1:r,pos2:a});this.line.setAttribute("data-direction",s),this.line.setAttribute("data-pos1",r),this.line.setAttribute("data-pos2",a),this.line.setAttribute("d",c)}}window.DrawSVGLine=gt;const mt=t=>parseInt(t,10),yt=t=>mt(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,wt=async(t,e,n,o)=>{await V();const{pin:i={},position:s}=o,{useCurlyBrackets:r,subtle:a,bracket:c,text:p,parent:l,enclose:d}=i,h=yt(e),u=mt(getComputedStyle(e).getPropertyValue("--ph-speccer-measure-size"))||8;const f=await F(e,t);if(d){const{left:t,top:e,height:n,width:o}=f.absolute();return{left:`${t}px`,top:`${e}px`,height:`${n}px`,width:`${o}px`}}if((l||p)&&!c&&!r&&!a){if(s===m.Right){const{top:t}=f.fromRight({center:!0});await V();const{left:e,width:o}=n.getBoundingClientRect();return{left:`${e+o+h}px`,top:`${t}px`}}if(s===m.Bottom){const{left:t}=f.toBottom({center:!0});await V();const{top:e,height:o}=n.getBoundingClientRect();return{left:`${t}px`,top:`${e+o+h}px`}}if(s===m.Left){const{top:t}=f.fromLeft({center:!0});await V();const{left:e}=n.getBoundingClientRect();return{left:e-1.5*h-(p?170:0)+"px",top:`${t}px`}}const{left:t}=f.fromTop({center:!0});await V();const{top:e}=n.getBoundingClientRect();return{left:`${t}px`,top:e-1.5*h+"px"}}if(s===m.Left){if(c&&!r){const{left:t,top:e,height:n}=f.fromLeft({sourceWidth:u});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:t,top:e}=f.fromLeft({center:!0,modifier:r?h/1.5:h});return{left:`${t}px`,top:`${e}px`}}if(s===m.Right){if(c&&!r){const{left:t,top:e,height:n}=f.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${n}px`}}const{left:t,top:e}=f.fromRight({center:!0,modifier:r?h/1.5:h});return{left:`${t}px`,top:`${e}px`}}if(s===m.Bottom){if(c&&!r){const{left:t,top:e,width:n}=f.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:t,top:e}=f.fromBottom({center:!0,modifier:r?h/1.5:h});return{left:`${t}px`,top:`${e}px`}}if(c&&!r){const{left:t,top:e,width:n}=f.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${n}px`}}const{left:g,top:y}=f.fromTop({center:!0,modifier:r?h/1.5:h});return{left:`${g}px`,top:`${y}px`}},xt=async(t,e,n,o)=>{if(!t)return;if("pin"!==o.type||!o.pin)return;const i=`speccer-${o.slug}-${t.getAttribute("id")||q()}`,s=tt(n,o,i);t.setAttribute("data-speccer-element-id",i),document.body.appendChild(s);const r=await wt(t,s,e,o);await _(s,r);const a=o.pin.text&&null!==t.getAttribute("data-speccer-title"),c=o.pin.parent&&!o.pin.enclose&&!o.pin.bracket&&!a;return o.pin.useSVGLine?(new gt(t,s,o),c&&new pt(t,5,o)):o.pin.useCurlyBrackets&&new ft(t,s),i};let bt=0;const $t=async(t,e)=>{if(!t)return;const n=t.querySelectorAll('[data-speccer^="pin"]');if(!n||0===n.length)return;const o=t.getAttribute("data-speccer-literals")||window.SPECCER_LITERALS||a;[...n].filter((async t=>!O(t))).forEach((async(n,i)=>{const s=((t,e)=>{let n=e[t];return 0===t&&(bt=0),n||(n=`${e[bt]}${e[bt].toLowerCase()}`,bt++),n})(i,o),r=n.getAttribute("data-speccer")||"";await V();const a=getComputedStyle(n),c=N(r,a,e),p=((t,e,n)=>{const{pin:o}=n;if(!o)return t;const{text:i}=o;if(!i||null===e.getAttribute("data-speccer-title"))return t;const s=e.getAttribute("data-speccer-title"),r=e.getAttribute("data-speccer-description"),a=0===e.nodeName.indexOf("H")?`<span class="ph-speccer heading">${e.nodeName}</span>`:"";return!r&&s?`${a}<span class="ph-speccer title">${s}</span>`:r&&s?`${a}<span class="ph-speccer title">${s}</span><span class="ph-speccer description">${r.replaceAll("\\n","<br/>")}</span>`:t})(s,n,c);await xt(n,t,p,c)}))},Et=(t="",e="span")=>{const n=document.createElement(e),o=document.createTextNode(`${t}px`);return n.appendChild(o),n.setAttribute("title",`${t}px`),s(n,"ph-speccer speccer spacing"),n},At=async(t,e)=>{if(!t)return;if(O(t))return;const n=t.getAttribute("data-speccer")||"",o=await X(t),i=N(n,o,e);if("spacing"!==i.type||!i.spacing)return;const a=((t,e)=>{const{marginTop:n,marginBottom:o,marginLeft:i,marginRight:s,paddingTop:r,paddingBottom:a,paddingLeft:c,paddingRight:p}=t;return e?.spacing?.padding?{paddingTop:r,paddingBottom:a,paddingLeft:c,paddingRight:p}:e?.spacing?.margin?{marginTop:n,marginBottom:o,marginLeft:i,marginRight:s}:{marginTop:n,marginBottom:o,marginLeft:i,marginRight:s,paddingTop:r,paddingBottom:a,paddingLeft:c,paddingRight:p}})(o,i),c=Object.keys(a).filter((t=>"0px"!==a[t]));if(!c.length)return;t.classList.add("is-specced");const p=`speccer-spacing-${t.getAttribute("id")||q()}`;t.setAttribute("data-speccer-element-id",p),c.forEach((async e=>{const n=mt(a[e]),o=Et(n);o.setAttribute("data-speccer-id",p);const c=(t=>t.includes("Top")?t.replace("Top"," top"):t.includes("Right")?t.replace("Right"," right"):t.includes("Bottom")?t.replace("Bottom"," bottom"):t.includes("Left")?t.replace("Left"," left"):"")(e);s(o,r(c,{bound:!!i?.spacing?.bound})),document.body.appendChild(o);const l=await(async(t,e,n,o)=>{await V();const i=n.getBoundingClientRect(),s=await D(n),r=o?.spacing?.bound?0:96,a=o?.spacing?.bound?0:48;return"marginTop"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top-e+"px"}:"marginRight"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left+parseInt(i.width+"",10)+"px",top:s.top+"px"}:"marginBottom"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top+parseInt(i.height+"",10)+"px"}:"marginLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left-e+"px",top:s.top+"px"}:"paddingTop"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top+"px"}:"paddingBottom"===t?{height:`${e}px`,width:i.width+r+"px",left:s.left-r+"px",top:s.top+(parseInt(i.height+"",10)-e)+"px"}:"paddingRight"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left+(parseInt(i.width+"",10)-e)+"px",top:s.top+"px"}:"paddingLeft"===t?{height:i.height+a+"px",width:`${e}px`,left:s.left+"px",top:s.top+"px"}:void 0})(e,n,t,i);await _(o,l)}))},Ct=(t,e=3)=>parseFloat(String(t)).toFixed(e),St=(t,e,n)=>{const o=document.createElement("div"),{typography:i,position:a}=e,c=r("ph-speccer speccer typography",{syntax:i?.useSyntaxHighlighting||!1,[a]:!0});return o.setAttribute("id",n),o.innerHTML=t,s(o,c),o},kt=async(t,e)=>{if(!t)return;if(O(t))return;const n=t.getAttribute("data-speccer")||"";await V();const o=N(n,getComputedStyle(t),e);if("typography"!==o.type||!o.typography)return;t.classList.add("is-specced");const i=await(async(t,e=!1)=>{const n=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:s,fontVariationSettings:r,fontWeight:a}=t;return{lineHeight:e,letterSpacing:n,fontFamily:o,fontSize:i,fontStyle:s,fontVariationSettings:r,fontWeight:a}})(await X(t));if(e){const t=n.fontFamily.split(",").map((t=>t.includes("'")?`<span class="token string">${t}</span>`:t)).join('<span class="token punctuation">, </span>'),e=`<span class="token number">${parseInt(n.fontSize,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.fontSize,10)/16}</span><span class="token unit">rem</span>`,o=n.letterSpacing.includes("px")?`<span class="token number">${parseInt(n.letterSpacing,10)}</span><span class="token unit">px</span>`:n.letterSpacing,i="normal"!==n.lineHeight?`<span class="token number">${parseInt(n.lineHeight,10)}</span><span class="token unit">px</span> <span class="token operator">/</span> <span class="token number">${parseInt(n.lineHeight,10)/16}</span><span class="token unit">rem</span>`:"normal";return`\n<pre class="language-css" tabindex="-1"><code class="language-css"><span class="token selector"><span class="token class">.typography</span></span> <span class="token punctuation">{</span>\n <span class="token property">font-family</span><span class="token punctuation">:</span> ${t}<span class="token punctuation">;</span>\n <span class="token property">font-size</span><span class="token punctuation">:</span> ${e}<span class="token punctuation">;</span>\n <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">${n.fontWeight}</span><span class="token punctuation">;</span>\n <span class="token property">font-variation-settings</span><span class="token punctuation">:</span> ${n.fontVariationSettings}<span class="token punctuation">;</span>\n <span class="token property">line-height</span><span class="token punctuation">:</span> ${i}<span class="token punctuation">;</span>\n <span class="token property">letter-spacing</span><span class="token punctuation">:</span> ${o}<span class="token punctuation">;</span>\n <span class="token property">font-style</span><span class="token punctuation">:</span> ${n.fontStyle}<span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>`}return`\ntypography: {<ul class="speccer-styles"> <li><span class="property">font-family:</span> ${n.fontFamily};</li> <li><span class="property">font-size:</span> ${n.fontSize} / ${parseInt(n.fontSize,10)/16}rem;</li> <li><span class="property">font-weight:</span> ${n.fontWeight};</li> <li><span class="property">font-variation-settings:</span> ${n.fontVariationSettings};</li> <li><span class="property">line-height:</span> ${"normal"!==n.lineHeight?`${parseInt(n.lineHeight,10)}px / ${parseInt(n.lineHeight,10)/16}rem`:"normal"};</li> <li><span class="property">letter-spacing:</span> ${n.letterSpacing};</li> <li><span class="property">font-style:</span> ${n.fontStyle};</li></ul>}`})(t,o.typography.useSyntaxHighlighting),s=`speccer-${o.slug}-${t.getAttribute("id")||q()}`;t.setAttribute("data-speccer-element-id",s);const r=St(i,o,s);document.body.appendChild(r);const a=await(async(t,e,n)=>{const o=e.getBoundingClientRect(),i=yt(n),s=n.getBoundingClientRect(),r=await D(e),{typography:a,position:c}=t;if(a&&c===w.Right)return{left:r.left+o.width+i+"px",top:Ct(W(r.top,s,o))+"px"};if(a&&c===w.Top)return{left:Ct(j(r.left,s,o))+"px",top:r.top-s.height-i+"px"};if(a&&c===w.Bottom)return{left:Ct(j(r.left,s,o))+"px",top:r.top+o.height+i+"px"};return{left:r.left-s.width-i+"px",top:Ct(W(r.top,s,o))+"px"}})(o,t,r);_(r,a)},vt=t=>{const e=()=>((t,e,n=!1)=>{let o;return function(i,...s){const r=n&&!o;o&&clearTimeout(o),o=setTimeout((function(){o=null,n||t.apply(i,s)}),e),r&&t.apply(i,s)}})((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},Pt=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},Lt=()=>{const t=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(At(n.target),e.unobserve(n.target))}));for(const e of document.querySelectorAll(`[${c}^="${p}"],[${c}^="${p}"] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)`))t.observe(e);const e=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(Q(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${c}^="${l}"]`))e.observe(t);const n=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(Z(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${c}^="${h}"]`))n.observe(t);const o=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(kt(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${c}^="${d}"]`))o.observe(t);const i=new IntersectionObserver(((t,e)=>{for(const n of t)n.intersectionRatio>0&&(K(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${c}^="${u}"]`))i.observe(t);const s=new IntersectionObserver((async(t,e)=>{for(const n of t)n.intersectionRatio>0&&(await $t(n.target),e.unobserve(n.target))}));for(const t of document.querySelectorAll(`[${c}="${f}"]`))s.observe(t)},Bt=t=>{window.speccer=t},Rt=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");n?.includes("speccer.js")&&(e.hasAttribute("data-manual")?Bt(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?Pt(t):e.hasAttribute("data-lazy")?Lt():Pt(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||vt(t))}},Tt=["alt","altgraph","capslock","control","fn","fnlock","hyper","meta","numlock","os","scrolllock","shift","super","symbol","command","ctrl","altgr","symbollock"],Ht=["escape","esc","enter","return","⏎","␛"],It=async(t,e,n)=>{await V();const o=yt(n),i=await F(n,e);if("tabstops"===t){let{left:t,top:e}=i.fromTop();return t-=32,e+=32,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("landmark"===t){let{left:t,top:e}=i.fromTop();return t-=16,e-=16,t<=0&&(t=32),e<=0&&(e=32),{left:`${t}px`,top:`${e}px`}}if("region"===t){const{left:t,top:e,height:n,width:o}=i.fromTop();return{height:`${n}px`,width:`${o}px`,left:`${t}px`,top:`${e}px`}}if("shortcut"===t){const{left:t,top:e}=i.fromBottom();return{left:`${t}px`,top:`${e}px`}}const{left:s,top:r}=i.fromTop({center:!0,modifier:o});return{left:s-32+"px",top:r-32+"px"}},Mt=async(t,e,n)=>{if(!t||!t.checkVisibility())return;const o=((t="tabstops",e,n="span")=>{const o=document.createElement(n),i=r("ph-speccer speccer a11y",{tabstops:"tabstops"===t,landmark:"landmark"===t,region:"region"===t});if("landmark"===t&&e){const t=document.createTextNode(String(e));o.appendChild(t)}return s(o,i),o})(n,e);if("landmark"===n){o.setAttribute("data-speccer-nodename",t.nodeName);const e=t.role||`semantic role: ${t.nodeName.toLowerCase()}`,n=t.getAttribute("aria-label")||"unnamed";o.setAttribute("title",`${n}: ${e}`)}document.body.appendChild(o);const i=await It(n,t,o);await _(o,i)},Nt=async(t,e)=>{const n=e.split(/\s\+\s/).map((t=>t.trim())),o=document.createElement("div"),i=r("ph-speccer speccer a11y shortcut-holder");s(o,i);for(const t of n){const e=document.createElement("kbd"),n=document.createTextNode(t),i=r("ph-speccer speccer a11y shortcut",{modifier:Tt.includes(t.toLowerCase()),physical:Ht.includes(t.toLowerCase())});s(e,i),e.appendChild(n),o.appendChild(e)}document.body.appendChild(o);const a=await It("shortcut",t,o);await _(o,a)},qt=t=>{const e=t.getAttribute("data-speccer-element-id");if(!e)return;const n=document.getElementById(e)||document.querySelectorAll(`[data-speccer-id="${e}"]`);if(n)if(Object.prototype.isPrototypeOf.call(NodeList.prototype,n))[...n].forEach((t=>{t.remove(),t.classList.remove("is-specced")}));else if(n.classList.contains("curly")||n.classList.contains("svg")){const e=t.getAttribute("id");document.querySelectorAll(`#ph-speccer-svg path[data-start-el="${e}"]`).forEach((t=>t.remove()))}},Ot={create:Y,element:K},Vt={create:Et,element:At},zt={createPinElement:tt,pinElement:xt,pinElements:$t},Gt={create:J,element:Q},jt={create:U,element:Z},Wt={create:St,element:kt},Dt={dom:Pt,lazy:Lt,manual:Bt,activate:Rt},Ft=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".ph-speccer.speccer");const t=document.querySelectorAll(`[${c}^="${p}"]`),e=document.querySelectorAll(`[${c}^="${l}"]`),n=document.querySelectorAll(`[${c}^="${d}"]`),o=document.querySelectorAll(`[${c}="${f}"]`),i=document.querySelectorAll(`[${c}^="${h}"]`),s=document.querySelectorAll(`[${c}^="${u}"]`);for(const t of i)Z(t);for(const t of s)K(t);for(const e of t)if(At(e),e.hasChildNodes()){const t=e.querySelectorAll("*:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody):not([data-speccer])"),n=e.getAttribute("data-speccer")||"";if(t&&t.length)for(const e of t)e.setAttribute("data-speccer",n),At(e)}for(const t of e)Q(t);for(const t of n)kt(t);for(const t of o)$t(t);(()=>{const t=document.querySelectorAll('[data-speccer*="a11y tabstops"]'),e=document.querySelectorAll('[data-speccer*="a11y landmark"]'),n=document.querySelectorAll('[data-speccer*="a11y shortcut"]');if(n.length)for(const t of n){const e=t.getAttribute("data-speccer-a11y-shortcut");e&&""!==e&&!O(t)&&Nt(t,e)}if(t.length)for(const e of t){const t=e.querySelectorAll("\n a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n textarea:not([disabled]):not([tabindex='-1']),\n iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]\n");for(const e of t)O(e)||Mt(e,null,"tabstops")}if(e.length)for(const t of e){const e=t.querySelectorAll('\nheader, footer, section, form, main, nav, aside, [role="section"], [role="banner"],\n[role="complementary"], [role="contentinfo"], [role="form"], [role="main"],\n[role="navigation"], [role="region"], [role="search"]\n');for(const[t,n]of e.entries())O(n)||(Mt(n,t+1,"landmark"),Mt(n,null,"region"))}})()};Rt(Ft);export{Ft as default,Ot as grid,jt as mark,Gt as measure,Dt as modes,zt as pin,qt as removeSpeccerElement,Vt as spacing,Wt as typography};
28
28
  //# sourceMappingURL=speccer.esm.js.map