@rogieking/figui3 2.38.1 → 2.38.2
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.
- package/dist/fig.js +32 -32
- package/fig.js +62 -1
- package/package.json +1 -1
package/dist/fig.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function
|
|
1
|
+
function S(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function P(){let Q=1000;const $=document.querySelectorAll("*");for(let Z of $){const J=parseInt(getComputedStyle(Z).zIndex,10);if(!isNaN(J)&&J>Q)Q=J}return Q}class I extends HTMLElement{type;#Q;constructor(){super();this.attachShadow({mode:"open",delegatesFocus:!0})}connectedCallback(){this.type=this.getAttribute("type")||"button",this.shadowRoot.innerHTML=`
|
|
2
2
|
<style>
|
|
3
3
|
button, button:hover, button:active {
|
|
4
4
|
padding: 0 var(--spacer-2);
|
|
@@ -32,7 +32,7 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
32
32
|
<button type="${this.type}">
|
|
33
33
|
<slot></slot>
|
|
34
34
|
</button>
|
|
35
|
-
`,this.#Q=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false",requestAnimationFrame(()=>{this.button=this.shadowRoot.querySelector("button"),this.button.addEventListener("click",this.#$.bind(this)),this.button.addEventListener("focus",()=>{if(this.button.matches(":focus-visible"))this.setAttribute("data-focus-visible","")}),this.button.addEventListener("blur",()=>{this.removeAttribute("data-focus-visible")})})}get type(){return this.getAttribute("type")||"button"}set type(Q){this.setAttribute("type",Q)}get selected(){return this.#Q}set selected(Q){this.setAttribute("selected",Q)}#$(){if(this.type==="toggle")this.toggleAttribute("selected",!this.hasAttribute("selected"));if(this.type==="submit"){let Q=this.closest("form");if(Q)Q.submit()}if(this.type==="link"){const Q=this.getAttribute("href"),$=this.getAttribute("target");if(Q)if($)window.open(Q,$);else window.location.href=Q}}static get observedAttributes(){return["disabled","selected"]}attributeChangedCallback(Q,$,Z){if(this.button)switch(this.button[Q]=Z,Q){case"disabled":this.disabled=this.button.disabled=Z!==null&&Z!=="false";break;case"type":this.type=Z,this.button.type=this.type,this.button.setAttribute("type",this.type);break;case"selected":this.#Q=Z==="true";break}}}customElements.define("fig-button",I);class y extends HTMLElement{#Q="Menu";#$=null;#Z;#j;#K=!1;#J=null;get label(){return this.#Q}set label(Q){this.#Q=Q}constructor(){super();this.select=document.createElement("select"),this.optionsSlot=document.createElement("slot"),this.attachShadow({mode:"open"}),this.#Z=this.#Y.bind(this),this.#j=this.#N.bind(this)}#_(){if(typeof CSS==="undefined"||typeof CSS.supports!=="function")return!1;try{return CSS.supports("appearance: base-select")&&CSS.supports("selector(::picker(select))")}catch{return!1}}#X(){if(!(this.getAttribute("experimental")||"").split(/\s+/).filter(Boolean).includes("modern")||!this.#_()){this.#K=!1;return}const Z=document.createElement("button");Z.setAttribute("type","button"),Z.setAttribute("aria-hidden","true");const J=document.createElement("selectedcontent");Z.appendChild(J),this.select.appendChild(Z),this.#K=!0,this.#J=J}#q(){if(!this.#J)return;const Q=this.select.selectedOptions?.[0];if(!Q){this.#J.textContent="";return}this.#J.innerHTML=Q.innerHTML}#G(){this.select.addEventListener("input",this.#Z),this.select.addEventListener("change",this.#j)}#W(Q){if(!Q||!(Q instanceof Element))return!1;return!!Q.querySelector('fig-checkbox, fig-switch, input[type="checkbox"]')}#B(){if(typeof this.select.showPicker==="function")requestAnimationFrame(()=>{try{this.select.showPicker()}catch{}})}connectedCallback(){this.type=this.getAttribute("type")||"select",this.#Q=this.getAttribute("label")||this.#Q,this.select.setAttribute("aria-label",this.#Q),this.appendChild(this.select),this.shadowRoot.appendChild(this.optionsSlot),this.optionsSlot.addEventListener("slotchange",this.slotChange.bind(this)),this.#G()}slotChange(){while(this.select.firstChild)this.select.firstChild.remove();if(this.#X(),this.type==="dropdown"){const Q=document.createElement("option");Q.setAttribute("hidden","true"),Q.setAttribute("selected","true"),Q.selected=!0,this.select.appendChild(Q)}if(this.optionsSlot.assignedNodes().forEach((Q)=>{if(Q.nodeName==="OPTION"||Q.nodeName==="OPTGROUP")this.select.appendChild(Q.cloneNode(!0))}),this.#O(this.value),this.#q(),this.type==="dropdown")this.select.selectedIndex=-1}#Y(Q){const $=Q.target.selectedOptions?.[0];if(this.#W($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#B();return}const Z=Q.target.value;if(this.type==="dropdown")this.#$=Z;this.setAttribute("value",Z),this.#q(),this.dispatchEvent(new CustomEvent("input",{detail:Z,bubbles:!0,composed:!0}))}#N(Q){const $=Q.target.selectedOptions?.[0];if(this.#W($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#B();return}const Z=this.type==="dropdown"?this.#$:this.select.value;if(this.type==="dropdown")this.select.selectedIndex=-1;this.#q(),this.dispatchEvent(new CustomEvent("change",{detail:Z,bubbles:!0,composed:!0}))}focus(){this.select.focus()}blur(){this.select.blur()}get value(){if(this.type==="dropdown")return this.#$;return this.select?.value}set value(Q){if(this.type==="dropdown")this.#$=Q;this.setAttribute("value",Q)}static get observedAttributes(){return["value","type","experimental"]}#O(Q){if(this.type==="dropdown")return;if(this.select)this.select.querySelectorAll("option").forEach(($,Z)=>{if($.value===this.getAttribute("value"))this.select.selectedIndex=Z});this.#q()}attributeChangedCallback(Q,$,Z){if(Q==="value")this.#O(Z);if(Q==="type")this.type=Z;if(Q==="experimental")this.slotChange();if(Q==="label")this.#Q=Z,this.select.setAttribute("aria-label",this.#Q)}}customElements.define("fig-dropdown",y);class D extends HTMLElement{static#Q=0;static#$=500;#Z;#j;#K;#J=!1;#_=null;#X=null;constructor(){super();this.action=this.getAttribute("action")||"hover";let Q=parseInt(this.getAttribute("delay"));this.delay=!isNaN(Q)?Q:500,this.#Z=this.#U.bind(this),this.#j=this.hidePopupOutsideClick.bind(this)}connectedCallback(){this.setup(),this.setupEventListeners()}disconnectedCallback(){if(this.destroy(),document.removeEventListener("mousedown",this.#Z,!0),this.#W(),this.action==="click")document.body.removeEventListener("click",this.#j);if(clearTimeout(this.#K),this.action==="hover")this.removeEventListener("touchstart",this.#Y),this.removeEventListener("touchmove",this.#N),this.removeEventListener("touchend",this.#O),this.removeEventListener("touchcancel",this.#L);else if(this.action==="click")this.removeEventListener("touchstart",this.showDelayedPopup)}setup(){this.style.display="contents"}render(){this.destroy();let Q=document.createElement("span");this.popup=document.createElement("span"),this.popup.setAttribute("class","fig-tooltip"),this.popup.setAttribute("role","tooltip");const $=H();if(this.popup.setAttribute("id",$),this.popup.style.position="fixed",this.popup.style.visibility="hidden",this.popup.style.display="inline-flex",this.popup.style.pointerEvents="none",this.popup.append(Q),Q.innerText=this.getAttribute("text"),this.firstElementChild)this.firstElementChild.setAttribute("aria-describedby",$);const Z=this.closest("dialog");if(Z&&Z.open)Z.append(this.popup);else document.body.append(this.popup);const J=Q.childNodes[0];if(J){const j=document.createRange();j.setStartBefore(J),j.setEndAfter(J);const _=j.getBoundingClientRect();Q.style.width=`${_.width}px`}}destroy(){if(this.#W(),this.popup)this.popup.remove();if(this.action==="click")document.body.removeEventListener("click",this.#j)}isTouchDevice(){return"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0}setupEventListeners(){if(this.action==="hover"){if(!this.isTouchDevice())this.addEventListener("pointerenter",this.showDelayedPopup.bind(this)),this.addEventListener("pointerleave",this.#B.bind(this));this.addEventListener("touchstart",this.#Y.bind(this),{passive:!0}),this.addEventListener("touchmove",this.#N.bind(this),{passive:!0}),this.addEventListener("touchend",this.#O.bind(this),{passive:!0}),this.addEventListener("touchcancel",this.#L.bind(this),{passive:!0})}else if(this.action==="click")this.addEventListener("click",this.showDelayedPopup.bind(this)),document.body.addEventListener("click",this.#j),this.addEventListener("touchstart",this.showDelayedPopup.bind(this),{passive:!0});document.addEventListener("mousedown",this.#Z,!0)}getOffset(){const Q={left:8,top:4,right:8,bottom:4},$=this.getAttribute("offset");if(!$)return Q;const[Z,J,j,_]=$.split(",").map(Number);return{left:isNaN(Z)?Q.left:Z,top:isNaN(J)?Q.top:J,right:isNaN(j)?Q.right:j,bottom:isNaN(_)?Q.bottom:_}}showDelayedPopup(){this.render(),clearTimeout(this.timeout);const $=Date.now()-D.#Q<D.#$?0:this.delay;this.timeout=setTimeout(this.showPopup.bind(this),$)}showPopup(){this.#q(),this.popup.style.opacity="1",this.popup.style.visibility="visible",this.popup.style.display="block",this.popup.style.pointerEvents="all",this.popup.style.zIndex=P()+1,this.isOpen=!0,D.#Q=Date.now(),this.#G()}#q(){if(!this.popup||!this.firstElementChild)return;const Q=this.firstElementChild.getBoundingClientRect(),$=this.popup.getBoundingClientRect(),Z=this.getOffset();let J=Q.top-$.height-Z.top,j=Q.left+(Q.width-$.width)/2;if(this.popup.setAttribute("position","top"),J<0)this.popup.setAttribute("position","bottom"),J=Q.bottom+Z.bottom;if(j<Z.left)j=Z.left;else if(j+$.width>window.innerWidth-Z.right)j=window.innerWidth-$.width-Z.right;const X=Q.left+Q.width/2-j;this.popup.style.setProperty("--beak-offset",`${X}px`),this.popup.style.top=`${J}px`,this.popup.style.left=`${j}px`}hidePopup(){if(clearTimeout(this.timeout),clearTimeout(this.#K),this.#W(),this.popup)this.popup.style.opacity="0",this.popup.style.display="block",this.popup.style.pointerEvents="none",this.destroy();this.isOpen=!1,D.#Q=Date.now()}#G(){this.#W();const Q=this.firstElementChild;if(!Q)return;this.#_=new MutationObserver(()=>{if(this.#X)cancelAnimationFrame(this.#X);this.#X=requestAnimationFrame(()=>{this.#q()})}),this.#_.observe(Q,{attributes:!0,attributeFilter:["style","class","transform"]})}#W(){if(this.#X)cancelAnimationFrame(this.#X),this.#X=null;if(this.#_)this.#_.disconnect(),this.#_=null}hidePopupOutsideClick(Q){if(this.isOpen&&!this.popup.contains(Q.target))this.hidePopup()}#B(Q){if(!this.#J)this.hidePopup()}#Y(Q){if(this.action==="hover")this.#J=!0,clearTimeout(this.#K),this.showDelayedPopup()}#N(Q){if(this.action==="hover"&&this.#J)clearTimeout(this.#K),this.#K=setTimeout(()=>{this.#J=!1,this.hidePopup()},150)}#O(Q){if(this.action==="hover"&&this.#J)clearTimeout(this.#K),this.#K=setTimeout(()=>{this.#J=!1,this.hidePopup()},300)}#L(Q){if(this.action==="hover"&&this.#J)this.#J=!1,clearTimeout(this.#K),this.hidePopup()}static get observedAttributes(){return["action","delay","open"]}get open(){return this.hasAttribute("open")&&this.getAttribute("open")==="true"}set open(Q){this.setAttribute("open",Q)}attributeChangedCallback(Q,$,Z){if(Q==="action")this.action=Z;if(Q==="delay"){let J=parseInt(Z);this.delay=!isNaN(J)?J:500}if(Q==="open")if(Z==="true")requestAnimationFrame(()=>{this.showDelayedPopup()});else requestAnimationFrame(()=>{this.hidePopup()})}#U(Q){if(!this.isOpen)return;const $=Q.target;if(this.popup&&this.popup.contains($))return;if($.tagName==="SELECT"||$.hasAttribute("popover")||$.closest("dialog"))this.hidePopup()}}customElements.define("fig-tooltip",D);class x extends HTMLDialogElement{#Q=!1;#$=!1;#Z={x:0,y:0};#j={x:0,y:0};#K;#J;#_;#X=16;#q=!1;#G=3;constructor(){super();this.#K=this.#L.bind(this),this.#J=this.#U.bind(this),this.#_=this.#E.bind(this)}connectedCallback(){this.modal=this.hasAttribute("modal")&&this.getAttribute("modal")!=="false",this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",requestAnimationFrame(()=>{this.#W(),this.#Y(),this.#B()})}disconnectedCallback(){this.#N()}#W(){this.querySelectorAll("fig-button[close-dialog]").forEach((Q)=>{Q.removeEventListener("click",this.close),Q.addEventListener("click",this.close.bind(this))})}#B(){const Q=this.getAttribute("position")||"";this.style.position="fixed",this.style.transform="none",this.style.top="auto",this.style.bottom="auto",this.style.left="auto",this.style.right="auto",this.style.margin="0";const $=Q.includes("top"),Z=Q.includes("bottom"),J=Q.includes("left"),j=Q.includes("right"),_=Q.includes("center")&&!$&&!Z,K=Q.includes("center")&&!J&&!j;if($)this.style.top=`${this.#X}px`;else if(Z)this.style.bottom=`${this.#X}px`;else if(_)this.style.top="0",this.style.bottom="0";if(J)this.style.left=`${this.#X}px`;else if(j)this.style.right=`${this.#X}px`;else if(K)this.style.left="0",this.style.right="0";if(_&&K)this.style.margin="auto";else if(_)this.style.marginTop="auto",this.style.marginBottom="auto";else if(K)this.style.marginLeft="auto",this.style.marginRight="auto";this.#q=!0}#Y(){if(this.drag){this.addEventListener("pointerdown",this.#K);const Q=this.getAttribute("handle"),$=Q?this.querySelector(Q):this.querySelector("fig-header, header");if($)$.style.cursor="grab"}}#N(){this.removeEventListener("pointerdown",this.#K),document.removeEventListener("pointermove",this.#J),document.removeEventListener("pointerup",this.#_)}#O(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],Z=["FIG-HEADER","FIG-DIALOG","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],J=(_)=>$.some((K)=>_.matches?.(K))||_.tagName?.startsWith("FIG-")&&!Z.includes(_.tagName);if(J(Q))return!0;let j=Q.parentElement;while(j&&j!==this){if(J(j))return!0;j=j.parentElement}return!1}#L(Q){if(!this.drag)return;if(this.#O(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const J=this.querySelector($);if(!J||!J.contains(Q.target))return}this.#$=!0,this.#Z.x=Q.clientX,this.#Z.y=Q.clientY;const Z=this.getBoundingClientRect();this.#j.x=Q.clientX-Z.left,this.#j.y=Q.clientY-Z.top,document.addEventListener("pointermove",this.#J),document.addEventListener("pointerup",this.#_)}#U(Q){if(this.#$&&!this.#Q){const $=Math.abs(Q.clientX-this.#Z.x),Z=Math.abs(Q.clientY-this.#Z.y);if($>this.#G||Z>this.#G){this.#Q=!0,this.#$=!1,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const J=this.getBoundingClientRect();this.style.top=`${J.top}px`,this.style.left=`${J.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this.#Q)return;this.style.left=`${Q.clientX-this.#j.x}px`,this.style.top=`${Q.clientY-this.#j.y}px`,Q.preventDefault()}#E(Q){if(this.#Q)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this.#Q=!1,this.#$=!1,document.removeEventListener("pointermove",this.#J),document.removeEventListener("pointerup",this.#_),Q.preventDefault()}static get observedAttributes(){return["modal","drag","position","handle"]}attributeChangedCallback(Q,$,Z){if(Q==="drag")if(this.drag=Z!==null&&Z!=="false",this.drag)this.#Y();else{this.#N();const J=this.querySelector("fig-header, header");if(J)J.style.cursor=""}if(Q==="position"&&this.#q)this.#B()}}customElements.define("fig-dialog",x,{extends:"dialog"});class f extends HTMLDialogElement{#Q=null;#$=null;#Z=null;#j=!1;#K;#J;#_;#X=null;#q=null;#G=!1;#W=!1;#B={x:0,y:0};#Y={x:0,y:0};#N=3;#O;#L;#U;#E=!1;constructor(){super();this.#K=this.#C.bind(this),this.#J=(Q)=>{if(this.open&&!this.contains(Q.target)&&this.#x())this.#r()},this.#_=this.#k.bind(this),this.#O=this.#w.bind(this),this.#L=this.#P.bind(this),this.#U=this.#m.bind(this)}static get observedAttributes(){return["open","anchor","position","offset","variant","theme","drag","handle","autoresize","viewport-margin"]}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(Q){if(Q===!1||Q==="false"||Q===null){if(!this.open)return;this.removeAttribute("open");return}if(this.open)return;this.setAttribute("open","true")}get anchor(){return this.#q??this.getAttribute("anchor")}set anchor(Q){if(Q instanceof Element)this.#q=Q;else if(typeof Q==="string")this.#q=null,this.setAttribute("anchor",Q);else this.#q=null;if(this.open)this.#C()}connectedCallback(){if(!this.hasAttribute("position"))this.setAttribute("position","top center");if(!this.hasAttribute("role"))this.setAttribute("role","dialog");if(!this.hasAttribute("closedby"))this.setAttribute("closedby","any");if(this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",this.addEventListener("close",()=>{if(this.#H(),this.hasAttribute("open"))this.removeAttribute("open")}),requestAnimationFrame(()=>{this.#T()}),this.open)this.#F();else this.#M()}disconnectedCallback(){if(this.#H(),this.#R(),document.removeEventListener("pointerdown",this.#_,!0),this.#X!==null)cancelAnimationFrame(this.#X),this.#X=null}attributeChangedCallback(Q,$,Z){if($===Z)return;if(Q==="open"){if(Z===null||Z==="false"){this.#M();return}this.#F();return}if(Q==="drag"){if(this.drag=Z!==null&&Z!=="false",this.drag)this.#T();else this.#R();return}if(this.open)this.#C(),this.#z()}#F(){if(this.#j){this.#C();return}if(this.style.position="fixed",this.style.inset="auto",this.style.margin="0",this.style.zIndex=String(P()+1),!super.open)try{this.show()}catch($){}this.#z(),document.addEventListener("pointerdown",this.#_,!0),this.#E=!1,this.#C(),this.#j=!0;const Q=this.#I();if(Q)Q.classList.add("has-popup-open")}#M(){const Q=this.#I();if(Q)Q.classList.remove("has-popup-open");if(this.#j=!1,this.#E=!1,this.#H(),document.removeEventListener("pointerdown",this.#_,!0),super.open)try{this.close()}catch($){}}get autoresize(){const Q=this.getAttribute("autoresize");return Q===null||Q!=="false"}#z(){this.#H();const Q=this.#I();if(Q&&"ResizeObserver"in window)this.#Q=new ResizeObserver(this.#K),this.#Q.observe(Q);if(this.autoresize){if("ResizeObserver"in window)this.#$=new ResizeObserver(this.#K),this.#$.observe(this);this.#Z=new MutationObserver(this.#K),this.#Z.observe(this,{childList:!0,subtree:!0,characterData:!0})}window.addEventListener("resize",this.#K),window.addEventListener("scroll",this.#J,{capture:!0,passive:!0})}#H(){if(this.#Q)this.#Q.disconnect(),this.#Q=null;if(this.#$)this.#$.disconnect(),this.#$=null;if(this.#Z)this.#Z.disconnect(),this.#Z=null;window.removeEventListener("resize",this.#K),window.removeEventListener("scroll",this.#J,{capture:!0,passive:!0})}#k(Q){if(!this.open||!super.open)return;const $=this.getAttribute("closedby");if($==="none"||$==="closerequest")return;const Z=Q.target;if(!(Z instanceof Node))return;if(this.contains(Z))return;const J=this.#I();if(J&&J.contains(Z))return;if(this.#S(Z))return;this.open=!1}#S(Q){const $=Q.closest?.('dialog[is="fig-popup"]');if(!$||$===this)return!1;let Z=$;const J=new Set;while(Z&&!J.has(Z)){J.add(Z);const j=Z.anchor;if(!(j instanceof Element))break;if(this.contains(j))return!0;Z=j.closest?.('dialog[is="fig-popup"]')}return!1}#T(){if(this.drag)this.addEventListener("pointerdown",this.#O)}#R(){this.removeEventListener("pointerdown",this.#O),document.removeEventListener("pointermove",this.#L),document.removeEventListener("pointerup",this.#U)}#A(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],Z=["FIG-HEADER","FIG-DIALOG","FIG-POPUP","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],J=(_)=>$.some((K)=>_.matches?.(K))||_.tagName?.startsWith("FIG-")&&!Z.includes(_.tagName);if(J(Q))return!0;let j=Q.parentElement;while(j&&j!==this){if(J(j))return!0;j=j.parentElement}return!1}#w(Q){if(!this.drag)return;if(this.#A(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const J=this.querySelector($);if(!J||!J.contains(Q.target))return}this.#W=!0,this.#B.x=Q.clientX,this.#B.y=Q.clientY;const Z=this.getBoundingClientRect();this.#Y.x=Q.clientX-Z.left,this.#Y.y=Q.clientY-Z.top,document.addEventListener("pointermove",this.#L),document.addEventListener("pointerup",this.#U)}#P(Q){if(this.#W&&!this.#G){const $=Math.abs(Q.clientX-this.#B.x),Z=Math.abs(Q.clientY-this.#B.y);if($>this.#N||Z>this.#N){this.#G=!0,this.#W=!1,this.#E=!0,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const J=this.getBoundingClientRect();this.style.top=`${J.top}px`,this.style.left=`${J.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this.#G)return;this.style.left=`${Q.clientX-this.#Y.x}px`,this.style.top=`${Q.clientY-this.#Y.y}px`,Q.preventDefault()}#m(Q){if(this.#G)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this.#G=!1,this.#W=!1,document.removeEventListener("pointermove",this.#L),document.removeEventListener("pointerup",this.#U),Q.preventDefault()}#I(){if(this.#q)return this.#q;const Q=this.getAttribute("anchor");if(!Q)return null;const $=this.parentElement;if($?.querySelector){const Z=$.querySelector(Q);if(Z&&!this.contains(Z))return Z}return document.querySelector(Q)}#f(){const $=(this.getAttribute("position")||"top center").trim().toLowerCase().split(/\s+/).filter(Boolean),Z=new Set(["top","center","bottom"]),J=new Set(["left","center","right"]);let j="top",_="center",K=null;if($.length>=2){if(Z.has($[0]))j=$[0];if(J.has($[1]))_=$[1];return{vertical:j,horizontal:_,shorthand:K}}if($.length===1){const X=$[0];if(X==="top"||X==="bottom")j=X,K=X;else if(X==="left"||X==="right")_=X,K=X;else if(X==="center")j="center",_="center"}return{vertical:j,horizontal:_,shorthand:K}}#y(Q,$="0px"){if(!Q)return $;const Z=Q.trim();if(!Z)return $;if(/^-?\d+(\.\d+)?$/.test(Z))return`${Z}px`;return Z}#h(Q,$="x"){if(!Q)return 0;const Z=this.#y(Q,"0px");if(Z.endsWith("px")){const _=parseFloat(Z);return Number.isFinite(_)?_:0}const J=document.createElement("div");if(J.style.position="fixed",J.style.visibility="hidden",J.style.pointerEvents="none",J.style.left="0",J.style.top="0",J.style.margin="0",J.style.padding="0",J.style.border="0",$==="x")J.style.width=Z,J.style.height="0";else J.style.height=Z,J.style.width="0";document.body.appendChild(J);const j=J.getBoundingClientRect();return J.remove(),$==="x"?j.width:j.height}#v(){const $=(this.getAttribute("offset")||"0 0").trim().split(/\s+/).filter(Boolean),Z=this.#y($[0],"0px"),J=this.#y($[1],"0px");return{xToken:Z,yToken:J,xPx:this.#h(Z,"x"),yPx:this.#h(J,"y")}}#c(){const $=(this.getAttribute("viewport-margin")||"8").trim().split(/\s+/).map(Number).filter((J)=>!Number.isNaN(J));if($.length===0)return{top:8,right:8,bottom:8,left:8};if($.length===1)return{top:$[0],right:$[0],bottom:$[0],left:$[0]};if($.length===2)return{top:$[0],right:$[1],bottom:$[0],left:$[1]};if($.length===3)return{top:$[0],right:$[1],bottom:$[2],left:$[1]};return{top:$[0],right:$[1],bottom:$[2],left:$[3]}}#u(Q,$,Z){const J={top:"bottom",bottom:"top",left:"right",right:"left",center:"center"};if(Z){const _=Z==="left"||Z==="right"?["top","bottom"]:["left","right"];return[{v:Q,h:$,s:Z},{v:Q,h:$,s:J[Z]},{v:Q,h:$,s:_[0]},{v:Q,h:$,s:_[1]}]}if(Q==="center")return[{v:"center",h:$,s:null},{v:"center",h:J[$],s:null},{v:"top",h:$,s:null},{v:"bottom",h:$,s:null},{v:"top",h:J[$],s:null},{v:"bottom",h:J[$],s:null}];if($==="center")return[{v:Q,h:"center",s:null},{v:J[Q],h:"center",s:null},{v:Q,h:"left",s:null},{v:Q,h:"right",s:null},{v:J[Q],h:"left",s:null},{v:J[Q],h:"right",s:null}];return[{v:Q,h:$,s:null},{v:J[Q],h:$,s:null},{v:Q,h:J[$],s:null},{v:J[Q],h:J[$],s:null}]}#V(Q,$,Z,J,j,_){let K,X;if(_==="left"||_==="right")return X=_==="left"?Q.left-$.width-j.xPx:Q.right+j.xPx,K=Q.top,{top:K,left:X};if(_==="top"||_==="bottom")return K=_==="top"?Q.top-$.height-j.yPx:Q.bottom+j.yPx,X=Q.left,{top:K,left:X};if(Z==="top")K=Q.top-$.height-j.yPx;else if(Z==="bottom")K=Q.bottom+j.yPx;else K=Q.top+(Q.height-$.height)/2;if(Z==="center")if(J==="left")X=Q.left-$.width-j.xPx;else if(J==="right")X=Q.right+j.xPx;else X=Q.left+(Q.width-$.width)/2;else if(J==="left")X=Q.left+j.xPx;else if(J==="right")X=Q.right-$.width-j.xPx;else X=Q.left+(Q.width-$.width)/2;return{top:K,left:X}}#s(Q){return{top:"bottom",bottom:"top",left:"right",right:"left"}[Q]||"bottom"}#l(Q,$,Z){if(Z==="top")return"top";if(Z==="bottom")return"bottom";if(Z==="left")return"left";if(Z==="right")return"right";if(Q!=="center")return Q;if($!=="center")return $;return"top"}#p(Q,$,Z,J,j){if(this.getAttribute("variant")!=="popover"||!Q){this.style.removeProperty("--beak-offset"),this.removeAttribute("data-beak-side");return}const _=this.#s(j);this.setAttribute("data-beak-side",_);const K=Q.left+Q.width/2,X=Q.top+Q.height/2,q=this.getBoundingClientRect(),Y=q.width>0&&q.height>0?q:$,B=Y.left,L=Y.top,W=10;let U;if(_==="top"||_==="bottom"){U=K-B;const G=W,F=Math.max(G,Y.width-W);U=Math.min(F,Math.max(G,U))}else{U=X-L;const G=W,F=Math.max(G,Y.height-W);U=Math.min(F,Math.max(G,U))}this.style.setProperty("--beak-offset",`${U}px`)}#g(Q,$,Z){const{innerWidth:J,innerHeight:j}=window,_=Q.left+$.width,K=Q.top+$.height,X=Math.max(0,Z.left-Q.left),q=Math.max(0,Z.top-Q.top),Y=Math.max(0,_-(J-Z.right)),B=Math.max(0,K-(j-Z.bottom));return X+q+Y+B}#d(Q,$,Z){return this.#g(Q,$,Z)===0}#i(Q,$,Z){const{left:J,top:j}=Z,_=Math.max(Z.left,window.innerWidth-$.width-Z.right),K=Math.max(Z.top,window.innerHeight-$.height-Z.bottom);return{left:Math.min(_,Math.max(J,Q.left)),top:Math.min(K,Math.max(j,Q.top))}}#r(){if(!this.open||!super.open)return;const Q=this.getBoundingClientRect(),$=this.#v(),{vertical:Z,horizontal:J,shorthand:j}=this.#f(),_=this.#I(),K=this.#c();if(!_){this.#p(null,Q,0,0,"top");const U={left:K.left+(window.innerWidth-K.right-K.left-Q.width)/2,top:K.top+(window.innerHeight-K.bottom-K.top-Q.height)/2},G=this.#i(U,Q,K);this.style.left=`${G.left}px`,this.style.top=`${G.top}px`;return}const X=_.getBoundingClientRect(),q=this.#u(Z,J,j);let Y=null,B="top",L=Number.POSITIVE_INFINITY;for(let{v:U,h:G,s:F}of q){const M=this.#V(X,Q,U,G,$,F),A=this.#l(U,G,F);if(F){const O=this.#i(M,Q,K);if(F==="left"||F==="right"?M.left>=K.left&&M.left+Q.width<=window.innerWidth-K.right:M.top>=K.top&&M.top+Q.height<=window.innerHeight-K.bottom){this.style.left=`${O.left}px`,this.style.top=`${O.top}px`,this.#p(X,Q,O.left,O.top,A);return}const E=this.#g(M,Q,K);if(E<L)L=E,Y=O,B=A}else{if(this.#d(M,Q,K)){this.style.left=`${M.left}px`,this.style.top=`${M.top}px`,this.#p(X,Q,M.left,M.top,A);return}const O=this.#g(M,Q,K);if(O<L)L=O,Y=M,B=A}}const W=this.#i(Y||{left:0,top:0},Q,K);this.style.left=`${W.left}px`,this.style.top=`${W.top}px`,this.#p(X,Q,W.left,W.top,B)}#C(){if(!this.open||!this.#x())return;if(this.#X!==null)return;this.#X=requestAnimationFrame(()=>{this.#X=null,this.#r()})}#x(){if(!(this.drag&&this.#E))return!0;return!this.#I()}}customElements.define("fig-popup",f,{extends:"dialog"});class V extends HTMLElement{#Q;constructor(){super();this.content=null,this.#Q=!1}connectedCallback(){this.setAttribute("label",this.innerText),this.setAttribute("role","tab"),this.setAttribute("tabindex","0"),this.addEventListener("click",this.handleClick.bind(this)),requestAnimationFrame(()=>{if(typeof this.getAttribute("content")==="string"){if(this.content=document.querySelector(this.getAttribute("content")),this.content)if(this.content.setAttribute("role","tabpanel"),this.#Q)this.content.style.display="block",this.setAttribute("aria-selected","true");else this.content.style.display="none",this.setAttribute("aria-selected","false")}})}get selected(){return this.#Q}set selected(Q){this.setAttribute("selected",Q?"true":"false")}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}handleClick(){if(this.selected=!0,this.content)this.content.style.display="block"}static get observedAttributes(){return["selected"]}attributeChangedCallback(Q,$,Z){if(Q==="selected"){if(this.#Q=Z!==null&&Z!=="false",this.setAttribute("aria-selected",this.#Q?"true":"false"),this?.content)this.content.style.display=this.#Q?"block":"none"}}}customElements.define("fig-tab",V);class w extends HTMLElement{constructor(){super()}static get observedAttributes(){return["value","name","disabled"]}connectedCallback(){this.name=this.getAttribute("name")||"tabs",this.setAttribute("role","tablist"),this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.#$.bind(this));const Q=this.getAttribute("value");if(Q)this.#Z(Q);if(this.hasAttribute("disabled"))this.#Q(!0)}#Q(Q){this.querySelectorAll("fig-tab").forEach((Z)=>{if(Q)Z.setAttribute("disabled",""),Z.setAttribute("aria-disabled","true"),Z.setAttribute("tabindex","-1");else Z.removeAttribute("disabled"),Z.removeAttribute("aria-disabled"),Z.setAttribute("tabindex","0")})}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.#$)}#$(Q){const $=Array.from(this.querySelectorAll("fig-tab")),Z=$.findIndex((j)=>j.hasAttribute("selected"));let J=Z;switch(Q.key){case"ArrowLeft":case"ArrowUp":Q.preventDefault(),J=Z>0?Z-1:$.length-1;break;case"ArrowRight":case"ArrowDown":Q.preventDefault(),J=Z<$.length-1?Z+1:0;break;case"Home":Q.preventDefault(),J=0;break;case"End":Q.preventDefault(),J=$.length-1;break;default:return}if(J!==Z&&$[J])$.forEach((j)=>j.removeAttribute("selected")),this.selectedTab=$[J],this.setAttribute("value",$[J].getAttribute("value")||""),$[J].focus()}get value(){return this.selectedTab?.getAttribute("value")||""}set value(Q){this.setAttribute("value",Q)}#Z(Q){const $=this.querySelectorAll("fig-tab");for(let Z of $)if(Z.getAttribute("value")===Q)this.selectedTab=Z;else Z.removeAttribute("selected")}attributeChangedCallback(Q,$,Z){switch(Q){case"value":if(Z!==$)this.#Z(Z);break;case"disabled":this.#Q(Z!==null&&Z!=="false");break}}handleClick(Q){if(this.hasAttribute("disabled"))return;const $=Q.target;if($.nodeName.toLowerCase()==="fig-tab"){const Z=this.querySelectorAll("fig-tab");for(let J of Z)if(J===$)this.selectedTab=J,this.setAttribute("value",J.getAttribute("value")||"");else J.removeAttribute("selected")}}}customElements.define("fig-tabs",w);class b extends HTMLElement{#Q;#$;constructor(){super()}connectedCallback(){this.addEventListener("click",this.handleClick.bind(this))}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}handleClick(){const Q=this.closest("fig-segmented-control");if(Q&&Q.hasAttribute("disabled")&&Q.getAttribute("disabled")!=="false")return;this.setAttribute("selected","true")}get value(){return this.#Q}set value(Q){this.#Q=Q,this.setAttribute("value",Q)}get selected(){return this.#$}set selected(Q){this.#$=Q,this.setAttribute("selected",Q)}static get observedAttributes(){return["selected","value"]}attributeChangedCallback(Q,$,Z){switch(Q){case"value":this.#Q=Z;break;case"selected":this.#$=Z;break}}}customElements.define("fig-segment",b);class v extends HTMLElement{#Q=null;constructor(){super()}static get observedAttributes(){return["disabled"]}connectedCallback(){this.name=this.getAttribute("name")||"segmented-control",this.addEventListener("click",this.handleClick.bind(this)),this.#$(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"),requestAnimationFrame(()=>{const Q=this.querySelectorAll("fig-segment");if(!Array.from(Q).some((Z)=>Z.hasAttribute("selected"))&&Q.length>0)this.selectedSegment=Q[0]})}get selectedSegment(){return this.#Q}set selectedSegment(Q){if(this.#Q)this.#Q.removeAttribute("selected");if(this.#Q=Q,Q)Q.setAttribute("selected","true")}handleClick(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=Q.target.closest("fig-segment");if($){const Z=this.querySelectorAll("fig-segment");for(let J of Z)if(J===$)this.selectedSegment=J;else J.removeAttribute("selected")}}#$(Q){this.setAttribute("aria-disabled",Q?"true":"false"),this.querySelectorAll("fig-segment").forEach(($)=>{if(Q)$.setAttribute("disabled",""),$.setAttribute("aria-disabled","true");else $.removeAttribute("disabled"),$.removeAttribute("aria-disabled")})}attributeChangedCallback(Q,$,Z){if(Q==="disabled"&&$!==Z)this.#$(Z!==null&&Z!=="false")}}customElements.define("fig-segmented-control",v);class h extends HTMLElement{#Q=!1;#$=!1;#Z={range:{min:0,max:100,step:1},hue:{min:0,max:255,step:1},delta:{min:-100,max:100,step:1},stepper:{min:0,max:100,step:25},opacity:{min:0,max:100,step:0.1,color:"#FF0000"}};#j;#K;#J;#_;constructor(){super();this.initialInnerHTML=this.innerHTML,this.#j=(Q)=>{Q.stopPropagation(),this.#E()},this.#K=(Q)=>{Q.stopPropagation(),this.#F()},this.#J=(Q)=>{Q.stopPropagation(),this.#q()},this.#_=(Q)=>{Q.stopPropagation(),this.#M()}}#X(){const Q=this.getAttribute("value");this.type=this.getAttribute("type")||"range",this.variant=this.getAttribute("variant")||"default",this.text=this.hasAttribute("text")&&this.getAttribute("text")!=="false",this.units=this.getAttribute("units")||"",this.transform=Number(this.getAttribute("transform")||1),this.disabled=this.getAttribute("disabled")?!0:!1,this.precision=this.hasAttribute("precision")?Number(this.getAttribute("precision")):null,this.placeholder=this.getAttribute("placeholder")!==null?this.getAttribute("placeholder"):"##";const $=this.#Z[this.type];if(this.min=Number(this.getAttribute("min")||$.min),this.max=Number(this.getAttribute("max")||$.max),this.step=Number(this.getAttribute("step")||$.step),this.color=this.getAttribute("color")||$?.color,this.default=this.hasAttribute("default")?this.getAttribute("default"):this.type==="delta"?0:this.min,this.#$=Q===null||typeof Q==="string"&&Q.trim()==="",this.value=this.#O(Q),this.color)this.style.setProperty("--color",this.color);let Z="",J=`<div class="fig-slider-input-container" role="group">
|
|
35
|
+
`,this.#Q=this.hasAttribute("selected")&&this.getAttribute("selected")!=="false",requestAnimationFrame(()=>{this.button=this.shadowRoot.querySelector("button"),this.button.addEventListener("click",this.#$.bind(this)),this.button.addEventListener("focus",()=>{if(this.button.matches(":focus-visible"))this.setAttribute("data-focus-visible","")}),this.button.addEventListener("blur",()=>{this.removeAttribute("data-focus-visible")})})}get type(){return this.getAttribute("type")||"button"}set type(Q){this.setAttribute("type",Q)}get selected(){return this.#Q}set selected(Q){this.setAttribute("selected",Q)}#$(){if(this.type==="toggle")this.toggleAttribute("selected",!this.hasAttribute("selected"));if(this.type==="submit"){let Q=this.closest("form");if(Q)Q.submit()}if(this.type==="link"){const Q=this.getAttribute("href"),$=this.getAttribute("target");if(Q)if($)window.open(Q,$);else window.location.href=Q}}static get observedAttributes(){return["disabled","selected"]}attributeChangedCallback(Q,$,Z){if(this.button)switch(this.button[Q]=Z,Q){case"disabled":this.disabled=this.button.disabled=Z!==null&&Z!=="false";break;case"type":this.type=Z,this.button.type=this.type,this.button.setAttribute("type",this.type);break;case"selected":this.#Q=Z==="true";break}}}customElements.define("fig-button",I);class y extends HTMLElement{#Q="Menu";#$=null;#Z;#j;#K=!1;#J=null;get label(){return this.#Q}set label(Q){this.#Q=Q}constructor(){super();this.select=document.createElement("select"),this.optionsSlot=document.createElement("slot"),this.attachShadow({mode:"open"}),this.#Z=this.#q.bind(this),this.#j=this.#N.bind(this)}#_(){if(typeof CSS==="undefined"||typeof CSS.supports!=="function")return!1;try{return CSS.supports("appearance: base-select")&&CSS.supports("selector(::picker(select))")}catch{return!1}}#X(){if(!(this.getAttribute("experimental")||"").split(/\s+/).filter(Boolean).includes("modern")||!this.#_()){this.#K=!1;return}const Z=document.createElement("button");Z.setAttribute("type","button"),Z.setAttribute("aria-hidden","true");const J=document.createElement("selectedcontent");Z.appendChild(J),this.select.appendChild(Z),this.#K=!0,this.#J=J}#Y(){if(!this.#J)return;const Q=this.select.selectedOptions?.[0];if(!Q){this.#J.textContent="";return}this.#J.innerHTML=Q.innerHTML}#G(){this.select.addEventListener("input",this.#Z),this.select.addEventListener("change",this.#j)}#W(Q){if(!Q||!(Q instanceof Element))return!1;return!!Q.querySelector('fig-checkbox, fig-switch, input[type="checkbox"]')}#B(){if(typeof this.select.showPicker==="function")requestAnimationFrame(()=>{try{this.select.showPicker()}catch{}})}connectedCallback(){this.type=this.getAttribute("type")||"select",this.#Q=this.getAttribute("label")||this.#Q,this.select.setAttribute("aria-label",this.#Q),this.appendChild(this.select),this.shadowRoot.appendChild(this.optionsSlot),this.optionsSlot.addEventListener("slotchange",this.slotChange.bind(this)),this.#G()}slotChange(){while(this.select.firstChild)this.select.firstChild.remove();if(this.#X(),this.type==="dropdown"){const Q=document.createElement("option");Q.setAttribute("hidden","true"),Q.setAttribute("selected","true"),Q.selected=!0,this.select.appendChild(Q)}if(this.optionsSlot.assignedNodes().forEach((Q)=>{if(Q.nodeName==="OPTION"||Q.nodeName==="OPTGROUP")this.select.appendChild(Q.cloneNode(!0))}),this.#O(this.value),this.#Y(),this.type==="dropdown")this.select.selectedIndex=-1}#q(Q){const $=Q.target.selectedOptions?.[0];if(this.#W($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#B();return}const Z=Q.target.value;if(this.type==="dropdown")this.#$=Z;this.setAttribute("value",Z),this.#Y(),this.dispatchEvent(new CustomEvent("input",{detail:Z,bubbles:!0,composed:!0}))}#N(Q){const $=Q.target.selectedOptions?.[0];if(this.#W($)){if(this.type==="dropdown")this.select.selectedIndex=-1;this.#B();return}const Z=this.type==="dropdown"?this.#$:this.select.value;if(this.type==="dropdown")this.select.selectedIndex=-1;this.#Y(),this.dispatchEvent(new CustomEvent("change",{detail:Z,bubbles:!0,composed:!0}))}focus(){this.select.focus()}blur(){this.select.blur()}get value(){if(this.type==="dropdown")return this.#$;return this.select?.value}set value(Q){if(this.type==="dropdown")this.#$=Q;this.setAttribute("value",Q)}static get observedAttributes(){return["value","type","experimental"]}#O(Q){if(this.type==="dropdown")return;if(this.select)this.select.querySelectorAll("option").forEach(($,Z)=>{if($.value===this.getAttribute("value"))this.select.selectedIndex=Z});this.#Y()}attributeChangedCallback(Q,$,Z){if(Q==="value")this.#O(Z);if(Q==="type")this.type=Z;if(Q==="experimental")this.slotChange();if(Q==="label")this.#Q=Z,this.select.setAttribute("aria-label",this.#Q)}}customElements.define("fig-dropdown",y);class H extends HTMLElement{static#Q=0;static#$=500;#Z;#j;#K;#J=!1;#_=null;#X=null;constructor(){super();this.action=this.getAttribute("action")||"hover";let Q=parseInt(this.getAttribute("delay"));this.delay=!isNaN(Q)?Q:500,this.#Z=this.#U.bind(this),this.#j=this.hidePopupOutsideClick.bind(this)}connectedCallback(){this.setup(),this.setupEventListeners()}disconnectedCallback(){if(this.destroy(),document.removeEventListener("mousedown",this.#Z,!0),this.#W(),this.action==="click")document.body.removeEventListener("click",this.#j);if(clearTimeout(this.#K),this.action==="hover")this.removeEventListener("touchstart",this.#q),this.removeEventListener("touchmove",this.#N),this.removeEventListener("touchend",this.#O),this.removeEventListener("touchcancel",this.#L);else if(this.action==="click")this.removeEventListener("touchstart",this.showDelayedPopup)}setup(){this.style.display="contents"}render(){this.destroy();let Q=document.createElement("span");this.popup=document.createElement("span"),this.popup.setAttribute("class","fig-tooltip"),this.popup.setAttribute("role","tooltip");const $=S();if(this.popup.setAttribute("id",$),this.popup.style.position="fixed",this.popup.style.visibility="hidden",this.popup.style.display="inline-flex",this.popup.style.pointerEvents="none",this.popup.append(Q),Q.innerText=this.getAttribute("text"),this.firstElementChild)this.firstElementChild.setAttribute("aria-describedby",$);const Z=this.closest("dialog");if(Z&&Z.open)Z.append(this.popup);else document.body.append(this.popup);const J=Q.childNodes[0];if(J){const j=document.createRange();j.setStartBefore(J),j.setEndAfter(J);const _=j.getBoundingClientRect();Q.style.width=`${_.width}px`}}destroy(){if(this.#W(),this.popup)this.popup.remove();if(this.action==="click")document.body.removeEventListener("click",this.#j)}isTouchDevice(){return"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0}setupEventListeners(){if(this.action==="hover"){if(!this.isTouchDevice())this.addEventListener("pointerenter",this.showDelayedPopup.bind(this)),this.addEventListener("pointerleave",this.#B.bind(this));this.addEventListener("touchstart",this.#q.bind(this),{passive:!0}),this.addEventListener("touchmove",this.#N.bind(this),{passive:!0}),this.addEventListener("touchend",this.#O.bind(this),{passive:!0}),this.addEventListener("touchcancel",this.#L.bind(this),{passive:!0})}else if(this.action==="click")this.addEventListener("click",this.showDelayedPopup.bind(this)),document.body.addEventListener("click",this.#j),this.addEventListener("touchstart",this.showDelayedPopup.bind(this),{passive:!0});document.addEventListener("mousedown",this.#Z,!0)}getOffset(){const Q={left:8,top:4,right:8,bottom:4},$=this.getAttribute("offset");if(!$)return Q;const[Z,J,j,_]=$.split(",").map(Number);return{left:isNaN(Z)?Q.left:Z,top:isNaN(J)?Q.top:J,right:isNaN(j)?Q.right:j,bottom:isNaN(_)?Q.bottom:_}}showDelayedPopup(){this.render(),clearTimeout(this.timeout);const $=Date.now()-H.#Q<H.#$?0:this.delay;this.timeout=setTimeout(this.showPopup.bind(this),$)}showPopup(){this.#Y(),this.popup.style.opacity="1",this.popup.style.visibility="visible",this.popup.style.display="block",this.popup.style.pointerEvents="all",this.popup.style.zIndex=P()+1,this.isOpen=!0,H.#Q=Date.now(),this.#G()}#Y(){if(!this.popup||!this.firstElementChild)return;const Q=this.firstElementChild.getBoundingClientRect(),$=this.popup.getBoundingClientRect(),Z=this.getOffset();let J=Q.top-$.height-Z.top,j=Q.left+(Q.width-$.width)/2;if(this.popup.setAttribute("position","top"),J<0)this.popup.setAttribute("position","bottom"),J=Q.bottom+Z.bottom;if(j<Z.left)j=Z.left;else if(j+$.width>window.innerWidth-Z.right)j=window.innerWidth-$.width-Z.right;const X=Q.left+Q.width/2-j;this.popup.style.setProperty("--beak-offset",`${X}px`),this.popup.style.top=`${J}px`,this.popup.style.left=`${j}px`}hidePopup(){if(clearTimeout(this.timeout),clearTimeout(this.#K),this.#W(),this.popup)this.popup.style.opacity="0",this.popup.style.display="block",this.popup.style.pointerEvents="none",this.destroy();this.isOpen=!1,H.#Q=Date.now()}#G(){this.#W();const Q=this.firstElementChild;if(!Q)return;this.#_=new MutationObserver(()=>{if(this.#X)cancelAnimationFrame(this.#X);this.#X=requestAnimationFrame(()=>{this.#Y()})}),this.#_.observe(Q,{attributes:!0,attributeFilter:["style","class","transform"]})}#W(){if(this.#X)cancelAnimationFrame(this.#X),this.#X=null;if(this.#_)this.#_.disconnect(),this.#_=null}hidePopupOutsideClick(Q){if(this.isOpen&&!this.popup.contains(Q.target))this.hidePopup()}#B(Q){if(!this.#J)this.hidePopup()}#q(Q){if(this.action==="hover")this.#J=!0,clearTimeout(this.#K),this.showDelayedPopup()}#N(Q){if(this.action==="hover"&&this.#J)clearTimeout(this.#K),this.#K=setTimeout(()=>{this.#J=!1,this.hidePopup()},150)}#O(Q){if(this.action==="hover"&&this.#J)clearTimeout(this.#K),this.#K=setTimeout(()=>{this.#J=!1,this.hidePopup()},300)}#L(Q){if(this.action==="hover"&&this.#J)this.#J=!1,clearTimeout(this.#K),this.hidePopup()}static get observedAttributes(){return["action","delay","open"]}get open(){return this.hasAttribute("open")&&this.getAttribute("open")==="true"}set open(Q){this.setAttribute("open",Q)}attributeChangedCallback(Q,$,Z){if(Q==="action")this.action=Z;if(Q==="delay"){let J=parseInt(Z);this.delay=!isNaN(J)?J:500}if(Q==="open")if(Z==="true")requestAnimationFrame(()=>{this.showDelayedPopup()});else requestAnimationFrame(()=>{this.hidePopup()})}#U(Q){if(!this.isOpen)return;const $=Q.target;if(this.popup&&this.popup.contains($))return;if($.tagName==="SELECT"||$.hasAttribute("popover")||$.closest("dialog"))this.hidePopup()}}customElements.define("fig-tooltip",H);class x extends HTMLDialogElement{#Q=!1;#$=!1;#Z={x:0,y:0};#j={x:0,y:0};#K;#J;#_;#X=16;#Y=!1;#G=3;constructor(){super();this.#K=this.#L.bind(this),this.#J=this.#U.bind(this),this.#_=this.#z.bind(this)}connectedCallback(){this.modal=this.hasAttribute("modal")&&this.getAttribute("modal")!=="false",this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",requestAnimationFrame(()=>{this.#W(),this.#q(),this.#B()})}disconnectedCallback(){this.#N()}#W(){this.querySelectorAll("fig-button[close-dialog]").forEach((Q)=>{Q.removeEventListener("click",this.close),Q.addEventListener("click",this.close.bind(this))})}#B(){const Q=this.getAttribute("position")||"";this.style.position="fixed",this.style.transform="none",this.style.top="auto",this.style.bottom="auto",this.style.left="auto",this.style.right="auto",this.style.margin="0";const $=Q.includes("top"),Z=Q.includes("bottom"),J=Q.includes("left"),j=Q.includes("right"),_=Q.includes("center")&&!$&&!Z,K=Q.includes("center")&&!J&&!j;if($)this.style.top=`${this.#X}px`;else if(Z)this.style.bottom=`${this.#X}px`;else if(_)this.style.top="0",this.style.bottom="0";if(J)this.style.left=`${this.#X}px`;else if(j)this.style.right=`${this.#X}px`;else if(K)this.style.left="0",this.style.right="0";if(_&&K)this.style.margin="auto";else if(_)this.style.marginTop="auto",this.style.marginBottom="auto";else if(K)this.style.marginLeft="auto",this.style.marginRight="auto";this.#Y=!0}#q(){if(this.drag){this.addEventListener("pointerdown",this.#K);const Q=this.getAttribute("handle"),$=Q?this.querySelector(Q):this.querySelector("fig-header, header");if($)$.style.cursor="grab"}}#N(){this.removeEventListener("pointerdown",this.#K),document.removeEventListener("pointermove",this.#J),document.removeEventListener("pointerup",this.#_)}#O(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],Z=["FIG-HEADER","FIG-DIALOG","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],J=(_)=>$.some((K)=>_.matches?.(K))||_.tagName?.startsWith("FIG-")&&!Z.includes(_.tagName);if(J(Q))return!0;let j=Q.parentElement;while(j&&j!==this){if(J(j))return!0;j=j.parentElement}return!1}#L(Q){if(!this.drag)return;if(this.#O(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const J=this.querySelector($);if(!J||!J.contains(Q.target))return}this.#$=!0,this.#Z.x=Q.clientX,this.#Z.y=Q.clientY;const Z=this.getBoundingClientRect();this.#j.x=Q.clientX-Z.left,this.#j.y=Q.clientY-Z.top,document.addEventListener("pointermove",this.#J),document.addEventListener("pointerup",this.#_)}#U(Q){if(this.#$&&!this.#Q){const $=Math.abs(Q.clientX-this.#Z.x),Z=Math.abs(Q.clientY-this.#Z.y);if($>this.#G||Z>this.#G){this.#Q=!0,this.#$=!1,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const J=this.getBoundingClientRect();this.style.top=`${J.top}px`,this.style.left=`${J.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this.#Q)return;this.style.left=`${Q.clientX-this.#j.x}px`,this.style.top=`${Q.clientY-this.#j.y}px`,Q.preventDefault()}#z(Q){if(this.#Q)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this.#Q=!1,this.#$=!1,document.removeEventListener("pointermove",this.#J),document.removeEventListener("pointerup",this.#_),Q.preventDefault()}static get observedAttributes(){return["modal","drag","position","handle"]}attributeChangedCallback(Q,$,Z){if(Q==="drag")if(this.drag=Z!==null&&Z!=="false",this.drag)this.#q();else{this.#N();const J=this.querySelector("fig-header, header");if(J)J.style.cursor=""}if(Q==="position"&&this.#Y)this.#B()}}customElements.define("fig-dialog",x,{extends:"dialog"});class f extends HTMLDialogElement{#Q=null;#$=null;#Z=null;#j=null;#K=null;#J=!1;#_;#X;#Y;#G=null;#W=null;#B=!1;#q=!1;#N={x:0,y:0};#O={x:0,y:0};#L=3;#U;#z;#F;#M=!1;constructor(){super();this.#_=this.#v.bind(this),this.#X=(Q)=>{if(this.open&&!this.contains(Q.target)&&this.#k())this.#v()},this.#Y=this.#P.bind(this),this.#U=this.#c.bind(this),this.#z=this.#g.bind(this),this.#F=this.#d.bind(this)}static get observedAttributes(){return["open","anchor","position","offset","variant","theme","drag","handle","autoresize","viewport-margin"]}get open(){return this.hasAttribute("open")&&this.getAttribute("open")!=="false"}set open(Q){if(Q===!1||Q==="false"||Q===null){if(!this.open)return;this.removeAttribute("open");return}if(this.open)return;this.setAttribute("open","true")}get anchor(){return this.#W??this.getAttribute("anchor")}set anchor(Q){if(Q instanceof Element)this.#W=Q;else if(typeof Q==="string")this.#W=null,this.setAttribute("anchor",Q);else this.#W=null;if(this.open)this.#v()}connectedCallback(){if(!this.hasAttribute("position"))this.setAttribute("position","top center");if(!this.hasAttribute("role"))this.setAttribute("role","dialog");if(!this.hasAttribute("closedby"))this.setAttribute("closedby","any");if(this.drag=this.hasAttribute("drag")&&this.getAttribute("drag")!=="false",this.addEventListener("close",()=>{if(this.#H(),this.hasAttribute("open"))this.removeAttribute("open")}),requestAnimationFrame(()=>{this.#b()}),this.open)this.#D();else this.#T()}disconnectedCallback(){if(this.#H(),this.#y(),document.removeEventListener("pointerdown",this.#Y,!0),this.#G!==null)cancelAnimationFrame(this.#G),this.#G=null}attributeChangedCallback(Q,$,Z){if($===Z)return;if(Q==="open"){if(Z===null||Z==="false"){this.#T();return}this.#D();return}if(Q==="drag"){if(this.drag=Z!==null&&Z!=="false",this.drag)this.#b();else this.#y();return}if(this.open)this.#v(),this.#E()}#D(){if(this.#J){this.#v();return}if(this.style.position="fixed",this.style.inset="auto",this.style.margin="0",this.style.zIndex=String(P()+1),!super.open)try{this.show()}catch($){}this.#E(),document.addEventListener("pointerdown",this.#Y,!0),this.#M=!1,this.#v(),this.#J=!0;const Q=this.#w();if(Q)Q.classList.add("has-popup-open")}#T(){const Q=this.#w();if(Q)Q.classList.remove("has-popup-open");if(this.#J=!1,this.#M=!1,this.#H(),document.removeEventListener("pointerdown",this.#Y,!0),super.open)try{this.close()}catch($){}}get autoresize(){const Q=this.getAttribute("autoresize");return Q===null||Q!=="false"}#E(){this.#H();const Q=this.#w();if(Q&&"ResizeObserver"in window)this.#Q=new ResizeObserver(this.#_),this.#Q.observe(Q);if(this.autoresize){if("ResizeObserver"in window)this.#$=new ResizeObserver(this.#_),this.#$.observe(this);this.#Z=new MutationObserver(this.#_),this.#Z.observe(this,{childList:!0,subtree:!0,characterData:!0})}window.addEventListener("resize",this.#_),window.addEventListener("scroll",this.#X,{capture:!0,passive:!0}),this.#A()}#H(){if(this.#Q)this.#Q.disconnect(),this.#Q=null;if(this.#$)this.#$.disconnect(),this.#$=null;if(this.#Z)this.#Z.disconnect(),this.#Z=null;window.removeEventListener("resize",this.#_),window.removeEventListener("scroll",this.#X,{capture:!0,passive:!0}),this.#f()}#R(Q){if(!Q)return null;const $=Q.getBoundingClientRect();return{x:$.x,y:$.y,width:$.width,height:$.height}}#S(Q,$,Z=0.25){if(!Q&&!$)return!1;if(!Q||!$)return!0;return Math.abs(Q.x-$.x)>Z||Math.abs(Q.y-$.y)>Z||Math.abs(Q.width-$.width)>Z||Math.abs(Q.height-$.height)>Z}#A(){if(this.#f(),!this.open)return;const Q=()=>{if(!this.open){this.#j=null;return}const $=this.#w(),Z=this.#R($),J=this.#k();if(J&&this.#S(this.#K,Z))this.#K=Z,this.#v();else if(!J)this.#K=Z;this.#j=requestAnimationFrame(Q)};this.#K=this.#R(this.#w()),this.#j=requestAnimationFrame(Q)}#f(){if(this.#j!==null)cancelAnimationFrame(this.#j),this.#j=null;this.#K=null}#P(Q){if(!this.open||!super.open)return;const $=this.getAttribute("closedby");if($==="none"||$==="closerequest")return;const Z=Q.target;if(!(Z instanceof Node))return;if(this.contains(Z))return;const J=this.#w();if(J&&J.contains(Z))return;if(this.#m(Z))return;this.open=!1}#m(Q){const $=Q.closest?.('dialog[is="fig-popup"]');if(!$||$===this)return!1;let Z=$;const J=new Set;while(Z&&!J.has(Z)){J.add(Z);const j=Z.anchor;if(!(j instanceof Element))break;if(this.contains(j))return!0;Z=j.closest?.('dialog[is="fig-popup"]')}return!1}#b(){if(this.drag)this.addEventListener("pointerdown",this.#U)}#y(){this.removeEventListener("pointerdown",this.#U),document.removeEventListener("pointermove",this.#z),document.removeEventListener("pointerup",this.#F)}#V(Q){const $=["input","button","select","textarea","a","label","details","summary",'[contenteditable="true"]',"[tabindex]"],Z=["FIG-HEADER","FIG-DIALOG","FIG-POPUP","FIG-FIELD","FIG-TOOLTIP","FIG-CONTENT","FIG-TABS","FIG-TAB","FIG-POPOVER","FIG-SHIMMER","FIG-LAYER","FIG-FILL-PICKER"],J=(_)=>$.some((K)=>_.matches?.(K))||_.tagName?.startsWith("FIG-")&&!Z.includes(_.tagName);if(J(Q))return!0;let j=Q.parentElement;while(j&&j!==this){if(J(j))return!0;j=j.parentElement}return!1}#c(Q){if(!this.drag)return;if(this.#V(Q.target))return;const $=this.getAttribute("handle");if($&&$.trim()){const J=this.querySelector($);if(!J||!J.contains(Q.target))return}this.#q=!0,this.#N.x=Q.clientX,this.#N.y=Q.clientY;const Z=this.getBoundingClientRect();this.#O.x=Q.clientX-Z.left,this.#O.y=Q.clientY-Z.top,document.addEventListener("pointermove",this.#z),document.addEventListener("pointerup",this.#F)}#g(Q){if(this.#q&&!this.#B){const $=Math.abs(Q.clientX-this.#N.x),Z=Math.abs(Q.clientY-this.#N.y);if($>this.#L||Z>this.#L){this.#B=!0,this.#q=!1,this.#M=!0,this.setPointerCapture(Q.pointerId),this.style.cursor="grabbing";const J=this.getBoundingClientRect();this.style.top=`${J.top}px`,this.style.left=`${J.left}px`,this.style.bottom="auto",this.style.right="auto",this.style.margin="0"}}if(!this.#B)return;this.style.left=`${Q.clientX-this.#O.x}px`,this.style.top=`${Q.clientY-this.#O.y}px`,Q.preventDefault()}#d(Q){if(this.#B)this.releasePointerCapture(Q.pointerId),this.style.cursor="";this.#B=!1,this.#q=!1,document.removeEventListener("pointermove",this.#z),document.removeEventListener("pointerup",this.#F),Q.preventDefault()}#w(){if(this.#W)return this.#W;const Q=this.getAttribute("anchor");if(!Q)return null;const $=this.parentElement;if($?.querySelector){const Z=$.querySelector(Q);if(Z&&!this.contains(Z))return Z}return document.querySelector(Q)}#x(){const $=(this.getAttribute("position")||"top center").trim().toLowerCase().split(/\s+/).filter(Boolean),Z=new Set(["top","center","bottom"]),J=new Set(["left","center","right"]);let j="top",_="center",K=null;if($.length>=2){if(Z.has($[0]))j=$[0];if(J.has($[1]))_=$[1];return{vertical:j,horizontal:_,shorthand:K}}if($.length===1){const X=$[0];if(X==="top"||X==="bottom")j=X,K=X;else if(X==="left"||X==="right")_=X,K=X;else if(X==="center")j="center",_="center"}return{vertical:j,horizontal:_,shorthand:K}}#p(Q,$="0px"){if(!Q)return $;const Z=Q.trim();if(!Z)return $;if(/^-?\d+(\.\d+)?$/.test(Z))return`${Z}px`;return Z}#l(Q,$="x"){if(!Q)return 0;const Z=this.#p(Q,"0px");if(Z.endsWith("px")){const _=parseFloat(Z);return Number.isFinite(_)?_:0}const J=document.createElement("div");if(J.style.position="fixed",J.style.visibility="hidden",J.style.pointerEvents="none",J.style.left="0",J.style.top="0",J.style.margin="0",J.style.padding="0",J.style.border="0",$==="x")J.style.width=Z,J.style.height="0";else J.style.height=Z,J.style.width="0";document.body.appendChild(J);const j=J.getBoundingClientRect();return J.remove(),$==="x"?j.width:j.height}#n(){const $=(this.getAttribute("offset")||"0 0").trim().split(/\s+/).filter(Boolean),Z=this.#p($[0],"0px"),J=this.#p($[1],"0px");return{xToken:Z,yToken:J,xPx:this.#l(Z,"x"),yPx:this.#l(J,"y")}}#u(){const $=(this.getAttribute("viewport-margin")||"8").trim().split(/\s+/).map(Number).filter((J)=>!Number.isNaN(J));if($.length===0)return{top:8,right:8,bottom:8,left:8};if($.length===1)return{top:$[0],right:$[0],bottom:$[0],left:$[0]};if($.length===2)return{top:$[0],right:$[1],bottom:$[0],left:$[1]};if($.length===3)return{top:$[0],right:$[1],bottom:$[2],left:$[1]};return{top:$[0],right:$[1],bottom:$[2],left:$[3]}}#s(Q,$,Z){const J={top:"bottom",bottom:"top",left:"right",right:"left",center:"center"};if(Z){const _=Z==="left"||Z==="right"?["top","bottom"]:["left","right"];return[{v:Q,h:$,s:Z},{v:Q,h:$,s:J[Z]},{v:Q,h:$,s:_[0]},{v:Q,h:$,s:_[1]}]}if(Q==="center")return[{v:"center",h:$,s:null},{v:"center",h:J[$],s:null},{v:"top",h:$,s:null},{v:"bottom",h:$,s:null},{v:"top",h:J[$],s:null},{v:"bottom",h:J[$],s:null}];if($==="center")return[{v:Q,h:"center",s:null},{v:J[Q],h:"center",s:null},{v:Q,h:"left",s:null},{v:Q,h:"right",s:null},{v:J[Q],h:"left",s:null},{v:J[Q],h:"right",s:null}];return[{v:Q,h:$,s:null},{v:J[Q],h:$,s:null},{v:Q,h:J[$],s:null},{v:J[Q],h:J[$],s:null}]}#a(Q,$,Z,J,j,_){let K,X;if(_==="left"||_==="right")return X=_==="left"?Q.left-$.width-j.xPx:Q.right+j.xPx,K=Q.top,{top:K,left:X};if(_==="top"||_==="bottom")return K=_==="top"?Q.top-$.height-j.yPx:Q.bottom+j.yPx,X=Q.left,{top:K,left:X};if(Z==="top")K=Q.top-$.height-j.yPx;else if(Z==="bottom")K=Q.bottom+j.yPx;else K=Q.top+(Q.height-$.height)/2;if(Z==="center")if(J==="left")X=Q.left-$.width-j.xPx;else if(J==="right")X=Q.right+j.xPx;else X=Q.left+(Q.width-$.width)/2;else if(J==="left")X=Q.left+j.xPx;else if(J==="right")X=Q.right-$.width-j.xPx;else X=Q.left+(Q.width-$.width)/2;return{top:K,left:X}}#o(Q){return{top:"bottom",bottom:"top",left:"right",right:"left"}[Q]||"bottom"}#I(Q,$,Z){if(Z==="top")return"top";if(Z==="bottom")return"bottom";if(Z==="left")return"left";if(Z==="right")return"right";if(Q!=="center")return Q;if($!=="center")return $;return"top"}#C(Q,$,Z,J,j){if(this.getAttribute("variant")!=="popover"||!Q){this.style.removeProperty("--beak-offset"),this.removeAttribute("data-beak-side");return}const _=this.#o(j);this.setAttribute("data-beak-side",_);const K=Q.left+Q.width/2,X=Q.top+Q.height/2,q=this.getBoundingClientRect(),Y=q.width>0&&q.height>0?q:$,B=Y.left,L=Y.top,W=10;let U;if(_==="top"||_==="bottom"){U=K-B;const G=W,F=Math.max(G,Y.width-W);U=Math.min(F,Math.max(G,U))}else{U=X-L;const G=W,F=Math.max(G,Y.height-W);U=Math.min(F,Math.max(G,U))}this.style.setProperty("--beak-offset",`${U}px`)}#i(Q,$,Z){const{innerWidth:J,innerHeight:j}=window,_=Q.left+$.width,K=Q.top+$.height,X=Math.max(0,Z.left-Q.left),q=Math.max(0,Z.top-Q.top),Y=Math.max(0,_-(J-Z.right)),B=Math.max(0,K-(j-Z.bottom));return X+q+Y+B}#e(Q,$,Z){return this.#i(Q,$,Z)===0}#t(Q,$,Z){const{left:J,top:j}=Z,_=Math.max(Z.left,window.innerWidth-$.width-Z.right),K=Math.max(Z.top,window.innerHeight-$.height-Z.bottom);return{left:Math.min(_,Math.max(J,Q.left)),top:Math.min(K,Math.max(j,Q.top))}}#r(){if(!this.open||!super.open)return;const Q=this.getBoundingClientRect(),$=this.#n(),{vertical:Z,horizontal:J,shorthand:j}=this.#x(),_=this.#w(),K=this.#u();if(!_){this.#C(null,Q,0,0,"top");const U={left:K.left+(window.innerWidth-K.right-K.left-Q.width)/2,top:K.top+(window.innerHeight-K.bottom-K.top-Q.height)/2},G=this.#t(U,Q,K);this.style.left=`${G.left}px`,this.style.top=`${G.top}px`;return}const X=_.getBoundingClientRect(),q=this.#s(Z,J,j);let Y=null,B="top",L=Number.POSITIVE_INFINITY;for(let{v:U,h:G,s:F}of q){const M=this.#a(X,Q,U,G,$,F),k=this.#I(U,G,F);if(F){const O=this.#t(M,Q,K);if(F==="left"||F==="right"?M.left>=K.left&&M.left+Q.width<=window.innerWidth-K.right:M.top>=K.top&&M.top+Q.height<=window.innerHeight-K.bottom){this.style.left=`${O.left}px`,this.style.top=`${O.top}px`,this.#C(X,Q,O.left,O.top,k);return}const E=this.#i(M,Q,K);if(E<L)L=E,Y=O,B=k}else{if(this.#e(M,Q,K)){this.style.left=`${M.left}px`,this.style.top=`${M.top}px`,this.#C(X,Q,M.left,M.top,k);return}const O=this.#i(M,Q,K);if(O<L)L=O,Y=M,B=k}}const W=this.#t(Y||{left:0,top:0},Q,K);this.style.left=`${W.left}px`,this.style.top=`${W.top}px`,this.#C(X,Q,W.left,W.top,B)}#v(){if(!this.open||!this.#k())return;if(this.#G!==null)return;this.#G=requestAnimationFrame(()=>{this.#G=null,this.#r()})}#k(){if(!(this.drag&&this.#M))return!0;return!this.#w()}}customElements.define("fig-popup",f,{extends:"dialog"});class V extends HTMLElement{#Q;constructor(){super();this.content=null,this.#Q=!1}connectedCallback(){this.setAttribute("label",this.innerText),this.setAttribute("role","tab"),this.setAttribute("tabindex","0"),this.addEventListener("click",this.handleClick.bind(this)),requestAnimationFrame(()=>{if(typeof this.getAttribute("content")==="string"){if(this.content=document.querySelector(this.getAttribute("content")),this.content)if(this.content.setAttribute("role","tabpanel"),this.#Q)this.content.style.display="block",this.setAttribute("aria-selected","true");else this.content.style.display="none",this.setAttribute("aria-selected","false")}})}get selected(){return this.#Q}set selected(Q){this.setAttribute("selected",Q?"true":"false")}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}handleClick(){if(this.selected=!0,this.content)this.content.style.display="block"}static get observedAttributes(){return["selected"]}attributeChangedCallback(Q,$,Z){if(Q==="selected"){if(this.#Q=Z!==null&&Z!=="false",this.setAttribute("aria-selected",this.#Q?"true":"false"),this?.content)this.content.style.display=this.#Q?"block":"none"}}}customElements.define("fig-tab",V);class w extends HTMLElement{constructor(){super()}static get observedAttributes(){return["value","name","disabled"]}connectedCallback(){this.name=this.getAttribute("name")||"tabs",this.setAttribute("role","tablist"),this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.#$.bind(this));const Q=this.getAttribute("value");if(Q)this.#Z(Q);if(this.hasAttribute("disabled"))this.#Q(!0)}#Q(Q){this.querySelectorAll("fig-tab").forEach((Z)=>{if(Q)Z.setAttribute("disabled",""),Z.setAttribute("aria-disabled","true"),Z.setAttribute("tabindex","-1");else Z.removeAttribute("disabled"),Z.removeAttribute("aria-disabled"),Z.setAttribute("tabindex","0")})}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.#$)}#$(Q){const $=Array.from(this.querySelectorAll("fig-tab")),Z=$.findIndex((j)=>j.hasAttribute("selected"));let J=Z;switch(Q.key){case"ArrowLeft":case"ArrowUp":Q.preventDefault(),J=Z>0?Z-1:$.length-1;break;case"ArrowRight":case"ArrowDown":Q.preventDefault(),J=Z<$.length-1?Z+1:0;break;case"Home":Q.preventDefault(),J=0;break;case"End":Q.preventDefault(),J=$.length-1;break;default:return}if(J!==Z&&$[J])$.forEach((j)=>j.removeAttribute("selected")),this.selectedTab=$[J],this.setAttribute("value",$[J].getAttribute("value")||""),$[J].focus()}get value(){return this.selectedTab?.getAttribute("value")||""}set value(Q){this.setAttribute("value",Q)}#Z(Q){const $=this.querySelectorAll("fig-tab");for(let Z of $)if(Z.getAttribute("value")===Q)this.selectedTab=Z;else Z.removeAttribute("selected")}attributeChangedCallback(Q,$,Z){switch(Q){case"value":if(Z!==$)this.#Z(Z);break;case"disabled":this.#Q(Z!==null&&Z!=="false");break}}handleClick(Q){if(this.hasAttribute("disabled"))return;const $=Q.target;if($.nodeName.toLowerCase()==="fig-tab"){const Z=this.querySelectorAll("fig-tab");for(let J of Z)if(J===$)this.selectedTab=J,this.setAttribute("value",J.getAttribute("value")||"");else J.removeAttribute("selected")}}}customElements.define("fig-tabs",w);class b extends HTMLElement{#Q;#$;constructor(){super()}connectedCallback(){this.addEventListener("click",this.handleClick.bind(this))}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}handleClick(){const Q=this.closest("fig-segmented-control");if(Q&&Q.hasAttribute("disabled")&&Q.getAttribute("disabled")!=="false")return;this.setAttribute("selected","true")}get value(){return this.#Q}set value(Q){this.#Q=Q,this.setAttribute("value",Q)}get selected(){return this.#$}set selected(Q){this.#$=Q,this.setAttribute("selected",Q)}static get observedAttributes(){return["selected","value"]}attributeChangedCallback(Q,$,Z){switch(Q){case"value":this.#Q=Z;break;case"selected":this.#$=Z;break}}}customElements.define("fig-segment",b);class v extends HTMLElement{#Q=null;constructor(){super()}static get observedAttributes(){return["disabled"]}connectedCallback(){this.name=this.getAttribute("name")||"segmented-control",this.addEventListener("click",this.handleClick.bind(this)),this.#$(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"),requestAnimationFrame(()=>{const Q=this.querySelectorAll("fig-segment");if(!Array.from(Q).some((Z)=>Z.hasAttribute("selected"))&&Q.length>0)this.selectedSegment=Q[0]})}get selectedSegment(){return this.#Q}set selectedSegment(Q){if(this.#Q)this.#Q.removeAttribute("selected");if(this.#Q=Q,Q)Q.setAttribute("selected","true")}handleClick(Q){if(this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false")return;const $=Q.target.closest("fig-segment");if($){const Z=this.querySelectorAll("fig-segment");for(let J of Z)if(J===$)this.selectedSegment=J;else J.removeAttribute("selected")}}#$(Q){this.setAttribute("aria-disabled",Q?"true":"false"),this.querySelectorAll("fig-segment").forEach(($)=>{if(Q)$.setAttribute("disabled",""),$.setAttribute("aria-disabled","true");else $.removeAttribute("disabled"),$.removeAttribute("aria-disabled")})}attributeChangedCallback(Q,$,Z){if(Q==="disabled"&&$!==Z)this.#$(Z!==null&&Z!=="false")}}customElements.define("fig-segmented-control",v);class h extends HTMLElement{#Q=!1;#$=!1;#Z={range:{min:0,max:100,step:1},hue:{min:0,max:255,step:1},delta:{min:-100,max:100,step:1},stepper:{min:0,max:100,step:25},opacity:{min:0,max:100,step:0.1,color:"#FF0000"}};#j;#K;#J;#_;constructor(){super();this.initialInnerHTML=this.innerHTML,this.#j=(Q)=>{Q.stopPropagation(),this.#z()},this.#K=(Q)=>{Q.stopPropagation(),this.#F()},this.#J=(Q)=>{Q.stopPropagation(),this.#Y()},this.#_=(Q)=>{Q.stopPropagation(),this.#M()}}#X(){const Q=this.getAttribute("value");this.type=this.getAttribute("type")||"range",this.variant=this.getAttribute("variant")||"default",this.text=this.hasAttribute("text")&&this.getAttribute("text")!=="false",this.units=this.getAttribute("units")||"",this.transform=Number(this.getAttribute("transform")||1),this.disabled=this.getAttribute("disabled")?!0:!1,this.precision=this.hasAttribute("precision")?Number(this.getAttribute("precision")):null,this.placeholder=this.getAttribute("placeholder")!==null?this.getAttribute("placeholder"):"##";const $=this.#Z[this.type];if(this.min=Number(this.getAttribute("min")||$.min),this.max=Number(this.getAttribute("max")||$.max),this.step=Number(this.getAttribute("step")||$.step),this.color=this.getAttribute("color")||$?.color,this.default=this.hasAttribute("default")?this.getAttribute("default"):this.type==="delta"?0:this.min,this.#$=Q===null||typeof Q==="string"&&Q.trim()==="",this.value=this.#O(Q),this.color)this.style.setProperty("--color",this.color);let Z="",J=`<div class="fig-slider-input-container" role="group">
|
|
36
36
|
<input
|
|
37
37
|
type="range"
|
|
38
38
|
${this.text?'tabindex="-1"':""}
|
|
@@ -56,17 +56,17 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
56
56
|
value="${this.#$?"":this.value}"
|
|
57
57
|
${this.units?`units="${this.units}"`:""}
|
|
58
58
|
${this.precision!==null?`precision="${this.precision}"`:""}>
|
|
59
|
-
</fig-input-number>`;else Z=J;this.innerHTML=Z,requestAnimationFrame(()=>{if(this.input=this.querySelector("[type=range]"),this.inputContainer=this.querySelector(".fig-slider-input-container"),this.input.removeEventListener("input",this.#j),this.input.addEventListener("input",this.#j),this.input.removeEventListener("change",this.#K),this.input.addEventListener("change",this.#K),this.input.addEventListener("pointerdown",()=>{this.#Q=!0}),this.input.addEventListener("pointerup",()=>{this.#Q=!1}),this.default)this.style.setProperty("--default",this.#G(this.default));if(this.datalist=this.querySelector("datalist"),this.figInputNumber=this.querySelector("fig-input-number"),this.datalist)this.inputContainer.append(this.datalist),this.datalist.setAttribute("id",this.datalist.getAttribute("id")||
|
|
59
|
+
</fig-input-number>`;else Z=J;this.innerHTML=Z,requestAnimationFrame(()=>{if(this.input=this.querySelector("[type=range]"),this.inputContainer=this.querySelector(".fig-slider-input-container"),this.input.removeEventListener("input",this.#j),this.input.addEventListener("input",this.#j),this.input.removeEventListener("change",this.#K),this.input.addEventListener("change",this.#K),this.input.addEventListener("pointerdown",()=>{this.#Q=!0}),this.input.addEventListener("pointerup",()=>{this.#Q=!1}),this.default)this.style.setProperty("--default",this.#G(this.default));if(this.datalist=this.querySelector("datalist"),this.figInputNumber=this.querySelector("fig-input-number"),this.datalist)this.inputContainer.append(this.datalist),this.datalist.setAttribute("id",this.datalist.getAttribute("id")||S()),this.input.setAttribute("list",this.datalist.getAttribute("id"));else if(this.type==="stepper"){this.datalist=document.createElement("datalist"),this.datalist.setAttribute("id",S());let j=(this.max-this.min)/this.step+1;for(let _=0;_<j;_++){let K=document.createElement("option");K.setAttribute("value",this.min+_*this.step),this.datalist.append(K)}this.inputContainer.append(this.datalist),this.input.setAttribute("list",this.datalist.getAttribute("id"))}else if(this.type==="delta"){this.datalist=document.createElement("datalist"),this.datalist.setAttribute("id",S());let j=document.createElement("option");j.setAttribute("value",this.default),this.datalist.append(j),this.inputContainer.append(this.datalist),this.input.setAttribute("list",this.datalist.getAttribute("id"))}if(this.datalist){let j=this.datalist.querySelector(`option[value='${this.default}']`);if(j)j.setAttribute("default","true")}if(this.figInputNumber)this.figInputNumber.removeEventListener("input",this.#J),this.figInputNumber.addEventListener("input",this.#J),this.figInputNumber.removeEventListener("change",this.#_),this.figInputNumber.addEventListener("change",this.#_);this.#U()})}connectedCallback(){this.#X()}disconnectedCallback(){if(this.input)this.input.removeEventListener("input",this.#j),this.input.removeEventListener("change",this.#K);if(this.figInputNumber)this.figInputNumber.removeEventListener("input",this.#J),this.figInputNumber.removeEventListener("change",this.#_)}#Y(){if(this.figInputNumber){const Q=this.figInputNumber.value;this.#$=Q===null||Q===void 0||typeof Q==="string"&&Q.trim()==="";const $=this.#O(Q);this.value=$,this.input.value=String($),this.#U(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}}#G(Q){const{min:$,max:Z}=this.#B(),J=Z-$;if(J===0)return 0;return(Number(Q)-$)/J}#W(Q){if(Q===null||Q===void 0)return null;if(typeof Q==="string"&&Q.trim()==="")return null;const $=Number(Q);return Number.isFinite($)?$:null}#B(){let Q=this.#W(this.min),$=this.#W(this.max);if(Q===null)Q=0;if($===null)$=Q;if(Q>$)[Q,$]=[$,Q];return{min:Q,max:$}}#q(Q){const{min:$,max:Z}=this.#B();return Math.min(Z,Math.max($,Q))}#N(){if(this.type==="delta"){const $=this.#W(this.default);if($!==null)return this.#q($);return this.#q(0)}const{min:Q}=this.#B();return Q}#O(Q){const $=this.#W(Q);if($===null)return this.#N();return this.#q($)}#L(){let Q=this.#G(this.value);this.style.setProperty("--slider-complete",Q);let $=this.#G(this.default);this.style.setProperty("--default",$),this.style.setProperty("--unchanged",Q===$?1:0)}#U(){let Q=this.input.value;if(this.value=Q,this.#L(),this.input.setAttribute("aria-valuenow",Q),this.figInputNumber)this.figInputNumber.setAttribute("value",this.#$?"":Q)}#z(){this.#$=!1,this.#U(),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#F(){this.#Q=!1,this.#$=!1,this.#U(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#M(){if(this.figInputNumber){const Q=this.figInputNumber.value;this.#$=Q===null||Q===void 0||typeof Q==="string"&&Q.trim()==="";const $=this.#O(Q);this.value=$,this.input.value=String($),this.#U(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}}static get observedAttributes(){return["value","step","min","max","type","variant","disabled","color","units","transform","text","placeholder","default","precision"]}focus(){this.input.focus()}attributeChangedCallback(Q,$,Z){if(this.input)switch(Q){case"color":this.color=Z,this.style.setProperty("--color",this.color);break;case"disabled":if(this.disabled=this.input.disabled=Z!==null&&Z!=="false",this.figInputNumber)this.figInputNumber.disabled=this.disabled,this.figInputNumber.setAttribute("disabled",this.disabled);break;case"value":if(this.#Q)break;if(this.#$=Z===null||typeof Z==="string"&&Z.trim()==="",this.value=this.#O(Z),this.input.value=String(this.value),this.#U(),this.figInputNumber)this.figInputNumber.setAttribute("value",this.#$?"":this.value);break;case"transform":if(this.transform=Number(Z)||1,this.figInputNumber)this.figInputNumber.setAttribute("transform",this.transform);break;case"precision":if(this.precision=Z!==null?Number(Z):null,this.figInputNumber)if(this.precision!==null)this.figInputNumber.setAttribute("precision",this.precision);else this.figInputNumber.removeAttribute("precision");break;case"placeholder":if(this.placeholder=Z!==null?Z:"##",this.figInputNumber)this.figInputNumber.setAttribute("placeholder",this.placeholder);break;case"default":this.default=Z!==null?Z:this.type==="delta"?0:this.min,this.#L();break;case"min":case"max":case"step":case"type":case"variant":case"units":this[Q]=Z,this.#X();break;case"text":this.text=Z!==null&&Z!=="false",this.#X();break;default:this[Q]=this.input[Q]=Z,this.#U();break}}}customElements.define("fig-slider",h);class g extends HTMLElement{#Q=!1;#$;#Z;#j;#K;#J;constructor(){super();this.#$=this.#Y.bind(this),this.#Z=this.#W.bind(this),this.#j=this.#W.bind(this),this.#K=this.#G.bind(this),this.#J=(Q)=>{Q.stopPropagation(),this.#X(Q)}}connectedCallback(){if(this.multiline=this.hasAttribute("multiline")||!1,this.value=this.getAttribute("value")||"",this.type=this.getAttribute("type")||"text",this.placeholder=this.getAttribute("placeholder")||"",this.name=this.getAttribute("name")||null,this.readonly=this.hasAttribute("readonly")&&this.getAttribute("readonly")!=="false",this.type==="number"){if(this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.getAttribute("min"))this.input.setAttribute("min",String(this.min));if(this.getAttribute("max"))this.input.setAttribute("max",String(this.max));if(this.getAttribute("step"))this.input.setAttribute("step",String(this.step));if(this.getAttribute("min"))this.min=Number(this.getAttribute("min"));if(this.getAttribute("max"))this.max=Number(this.getAttribute("max"));if(this.transform=Number(this.getAttribute("transform")||1),this.getAttribute("value"))this.value=Number(this.value)}let Q=`<input
|
|
60
60
|
type="${this.type}"
|
|
61
61
|
${this.name?`name="${this.name}"`:""}
|
|
62
62
|
placeholder="${this.placeholder}"
|
|
63
63
|
value="${this.type==="number"?this.#_(this.value):this.value}" />`;if(this.multiline)Q=`<textarea
|
|
64
|
-
placeholder="${this.placeholder}">${this.value}</textarea>`;requestAnimationFrame(()=>{let $=this.querySelector("[slot=append]"),Z=this.querySelector("[slot=prepend]");if(this.innerHTML=Q,Z)Z.addEventListener("click",this.focus.bind(this)),this.prepend(Z);if($)$.addEventListener("click",this.focus.bind(this)),this.append($);if(this.input=this.querySelector("input,textarea"),this.input.readOnly=this.readonly,this.type==="number"){if(this.getAttribute("min"))this.input.setAttribute("min",this.#_(this.min));if(this.getAttribute("max"))this.input.setAttribute("max",this.#_(this.max));if(this.getAttribute("step"))this.input.setAttribute("step",this.#_(this.step));this.addEventListener("pointerdown",this.#K)}this.input.removeEventListener("change",this.#J),this.input.addEventListener("change",this.#J)})}disconnectedCallback(){if(this.input)this.input.removeEventListener("change",this.#J);this.removeEventListener("pointerdown",this.#K),window.removeEventListener("pointermove",this.#$),window.removeEventListener("pointerup",this.#Z),window.removeEventListener("blur",this.#j)}focus(){this.input.focus()}#_(Q){if(Q==="")return"";let $=Number(Q)*(this.transform||1);return $=this.#
|
|
64
|
+
placeholder="${this.placeholder}">${this.value}</textarea>`;requestAnimationFrame(()=>{let $=this.querySelector("[slot=append]"),Z=this.querySelector("[slot=prepend]");if(this.innerHTML=Q,Z)Z.addEventListener("click",this.focus.bind(this)),this.prepend(Z);if($)$.addEventListener("click",this.focus.bind(this)),this.append($);if(this.input=this.querySelector("input,textarea"),this.input.readOnly=this.readonly,this.type==="number"){if(this.getAttribute("min"))this.input.setAttribute("min",this.#_(this.min));if(this.getAttribute("max"))this.input.setAttribute("max",this.#_(this.max));if(this.getAttribute("step"))this.input.setAttribute("step",this.#_(this.step));this.addEventListener("pointerdown",this.#K)}this.input.removeEventListener("change",this.#J),this.input.addEventListener("change",this.#J)})}disconnectedCallback(){if(this.input)this.input.removeEventListener("change",this.#J);this.removeEventListener("pointerdown",this.#K),window.removeEventListener("pointermove",this.#$),window.removeEventListener("pointerup",this.#Z),window.removeEventListener("blur",this.#j)}focus(){this.input.focus()}#_(Q){if(Q==="")return"";let $=Number(Q)*(this.transform||1);return $=this.#q($),$}#X(Q){Q.stopPropagation();let $=Q.target.value,Z=$;if(this.type==="number")$=$/(this.transform||1),$=this.#B($,!1),Z=$*(this.transform||1);this.value=$,this.input.value=Z,this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#Y(Q){if(this.type!=="number")return;if(Q.buttons===0){this.#W();return}let $=(this.step||1)*Q.movementX,Z=Number(this.input.value);Z=Z/(this.transform||1)+$,Z=this.#B(Z,!1);let J=Z*(this.transform||1);Z=this.#q(Z),J=this.#q(J),this.value=Z,this.input.value=J,this.dispatchEvent(new CustomEvent("input",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}#G(Q){if(this.type!=="number")return;if(Q.altKey||Q.target.closest("[slot]"))this.#Q=!0,this.input.style.cursor=this.style.cursor=document.body.style.cursor="ew-resize",this.style.userSelect="none",window.addEventListener("pointermove",this.#$),window.addEventListener("pointerup",this.#Z),window.addEventListener("blur",this.#j)}#W(Q){if(this.type!=="number")return;this.#Q=!1,this.input.style.cursor=this.style.cursor=document.body.style.cursor="",this.style.userSelect="all",window.removeEventListener("pointermove",this.#$),window.removeEventListener("pointerup",this.#Z),window.removeEventListener("blur",this.#j)}#B(Q,$=!0){let Z=Q;if(this.type==="number"){if(Z=Number(Z),typeof this.min==="number")Z=Math.max($?this.#_(this.min):this.min,Z);if(typeof this.max==="number")Z=Math.min($?this.#_(this.max):this.max,Z);Z=this.#q(Z)}return Z}#q(Q,$=2){const Z=Math.round(Q*100)/100;return Number.isInteger(Z)?Z:Z.toFixed($)}static get observedAttributes(){return["value","placeholder","label","disabled","readonly","type","step","min","max","transform","name"]}attributeChangedCallback(Q,$,Z){if(this.input)switch(Q){case"disabled":this.disabled=this.input.disabled=Z!==null&&Z!=="false";break;case"readonly":this.readonly=Z!==null&&Z!=="false",this.input.readOnly=this.readonly;break;case"transform":if(this.type==="number")this.transform=Number(Z)||1,this.input.value=this.#_(this.value);break;case"value":if(this.#Q)break;let J=Z;if(this.type==="number")J=this.#B(J,!1),this.value=J,this.input.value=this.#_(J);else this.value=J,this.input.value=J;break;case"min":case"max":case"step":if(this[Q]=this.input[Q]=Number(Z),this.input)this.input.setAttribute(Q,Z);break;case"name":this[Q]=this.input[Q]=Z,this.input.setAttribute("name",Z);break;default:this[Q]=this.input[Q]=Z;break}}}customElements.define("fig-input-text",g);class m extends HTMLElement{#Q;#$;#Z;#j;#K;#J;#_;#X;#Y;#G;#W;#B;#q=!1;#N(){if(!this.input||this.input.type!=="number")return;["min","max","step"].forEach((Q)=>{const $=this.getAttribute(Q);if($===null||$===""){this.input.removeAttribute(Q),this.input[Q]="";return}this.input.setAttribute(Q,$),this.input[Q]=$})}constructor(){super();this.#Q=this.#E.bind(this),this.#$=this.#R.bind(this),this.#Z=this.#R.bind(this),this.#j=this.#H.bind(this),this.#K=(Q)=>{Q.stopPropagation(),this.#T(Q)},this.#J=(Q)=>{Q.stopPropagation(),this.#D(Q)},this.#_=(Q)=>{this.#z(Q)},this.#X=(Q)=>{this.#F(Q)},this.#Y=(Q)=>{this.#M(Q)}}connectedCallback(){const Q=this.getAttribute("value");if(this.value=Q!==null&&Q!==""?Number(Q):"",this.placeholder=this.getAttribute("placeholder")||"",this.name=this.getAttribute("name")||null,this.#G=this.getAttribute("units")||"",this.#W=this.getAttribute("unit-position")||"suffix",this.#B=this.hasAttribute("precision")?Number(this.getAttribute("precision")):2,this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.getAttribute("min"))this.min=Number(this.getAttribute("min"));if(this.getAttribute("max"))this.max=Number(this.getAttribute("max"));this.transform=Number(this.getAttribute("transform")||1);const $=this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false",Z=$?"number":"text",J=$?"":'inputmode="decimal"',j=$?this.#U(this.value):this.#L(this.value);let _=`<input
|
|
65
65
|
type="${Z}"
|
|
66
66
|
${J}
|
|
67
67
|
${this.name?`name="${this.name}"`:""}
|
|
68
68
|
placeholder="${this.placeholder}"
|
|
69
|
-
value="${j}" />`;requestAnimationFrame(()=>{let K=this.querySelector("[slot=append]"),X=this.querySelector("[slot=prepend]");if(this.innerHTML=_,X)X.addEventListener("click",this.focus.bind(this)),this.prepend(X);if(K)K.addEventListener("click",this.focus.bind(this)),this.append(K);if(this.input=this.querySelector("input"),this.getAttribute("min"))this.min=Number(this.getAttribute("min"));if(this.getAttribute("max"))this.max=Number(this.getAttribute("max"));if(this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.#N(),this.hasAttribute("disabled")){const q=this.getAttribute("disabled");this.disabled=this.input.disabled=q!=="false"}this.addEventListener("pointerdown",this.#j),this.input.removeEventListener("change",this.#K),this.input.addEventListener("change",this.#K),this.input.removeEventListener("input",this.#J),this.input.addEventListener("input",this.#J),this.input.removeEventListener("focus",this.#_),this.input.addEventListener("focus",this.#_),this.input.removeEventListener("blur",this.#X),this.input.addEventListener("blur",this.#X),this.input.removeEventListener("keydown",this.#
|
|
69
|
+
value="${j}" />`;requestAnimationFrame(()=>{let K=this.querySelector("[slot=append]"),X=this.querySelector("[slot=prepend]");if(this.innerHTML=_,X)X.addEventListener("click",this.focus.bind(this)),this.prepend(X);if(K)K.addEventListener("click",this.focus.bind(this)),this.append(K);if(this.input=this.querySelector("input"),this.getAttribute("min"))this.min=Number(this.getAttribute("min"));if(this.getAttribute("max"))this.max=Number(this.getAttribute("max"));if(this.getAttribute("step"))this.step=Number(this.getAttribute("step"));if(this.#N(),this.hasAttribute("disabled")){const q=this.getAttribute("disabled");this.disabled=this.input.disabled=q!=="false"}this.addEventListener("pointerdown",this.#j),this.input.removeEventListener("change",this.#K),this.input.addEventListener("change",this.#K),this.input.removeEventListener("input",this.#J),this.input.addEventListener("input",this.#J),this.input.removeEventListener("focus",this.#_),this.input.addEventListener("focus",this.#_),this.input.removeEventListener("blur",this.#X),this.input.addEventListener("blur",this.#X),this.input.removeEventListener("keydown",this.#Y),this.input.addEventListener("keydown",this.#Y)})}disconnectedCallback(){if(this.input)this.input.removeEventListener("change",this.#K),this.input.removeEventListener("input",this.#J),this.input.removeEventListener("focus",this.#_),this.input.removeEventListener("blur",this.#X),this.input.removeEventListener("keydown",this.#Y);this.removeEventListener("pointerdown",this.#j),window.removeEventListener("pointermove",this.#Q),window.removeEventListener("pointerup",this.#$),window.removeEventListener("blur",this.#Z)}focus(){this.input.focus()}#O(Q){if(!Q)return"";if(!this.#G){let J=Q.replace(/[^\d.-]/g,"");const j=J.split(".");if(j.length>2)J=j[0]+"."+j.slice(1).join("");return J}let $=Q.replace(this.#G,"").trim();$=$.replace(/[^\d.-]/g,"");const Z=$.split(".");if(Z.length>2)$=Z[0]+"."+Z.slice(1).join("");return $}#L(Q){if(Q===""||Q===null||Q===void 0)return"";let $=Number(Q)*(this.transform||1);if(isNaN($))return"";if($=this.#A($),!this.#G)return $.toString();if(this.#W==="prefix")return this.#G+$;else return $+this.#G}#U(Q){if(Q===""||Q===null||Q===void 0)return"";let $=Number(Q)*(this.transform||1);return $=this.#A($),$.toString()}#z(Q){this.#q=!0,setTimeout(()=>{const $=Q.target.value;if($&&this.#G)if(this.#W==="prefix")Q.target.setSelectionRange(this.#G.length,$.length);else{const Z=$.indexOf(this.#G);if(Z>-1)Q.target.setSelectionRange(0,Z)}},0)}#F(Q){this.#q=!1;let $=this.#O(Q.target.value);if($!==""){let Z=Number($)/(this.transform||1);Z=this.#S(Z,!1),this.value=Z,Q.target.value=this.#L(this.value)}else this.value="",Q.target.value="";this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#M(Q){if(this.disabled)return;if(Q.key!=="ArrowUp"&&Q.key!=="ArrowDown")return;Q.preventDefault();const $=this.step||1,Z=Q.shiftKey?10:1,J=$*Z*(Q.key==="ArrowUp"?1:-1);let j=this.#O(this.input.value),_=(j!==""?Number(j)/(this.transform||1):0)+J;_=this.#S(_,!1),this.value=_,this.input.value=this.#L(this.value),this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#D(Q){let $=this.#O(Q.target.value);if($!=="")this.value=Number($)/(this.transform||1);else this.value="";this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0}))}#T(Q){Q.stopPropagation();let $=this.#O(Q.target.value);if($!==""){let Z=Number($)/(this.transform||1);Z=this.#S(Z,!1),this.value=Z,Q.target.value=this.#L(this.value)}else this.value="",Q.target.value="";this.dispatchEvent(new CustomEvent("input",{detail:this.value,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0}))}#E(Q){if(this.disabled)return;if(Q.buttons===0){this.#R();return}let $=(this.step||1)*Q.movementX,Z=this.#O(this.input.value),J=Number(Z)/(this.transform||1)+$;J=this.#S(J,!1),this.value=J,this.input.value=this.#L(this.value),this.dispatchEvent(new CustomEvent("input",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}#H(Q){if(this.disabled)return;if(Q.altKey||Q.target.closest("[slot]"))this.#q=!0,this.input.style.cursor=this.style.cursor=document.body.style.cursor="ew-resize",this.style.userSelect="none",window.addEventListener("pointermove",this.#Q),window.addEventListener("pointerup",this.#$),window.addEventListener("blur",this.#Z)}#R(Q){this.#q=!1,this.input.style.cursor=this.style.cursor=document.body.style.cursor="",this.style.userSelect="all",window.removeEventListener("pointermove",this.#Q),window.removeEventListener("pointerup",this.#$),window.removeEventListener("blur",this.#Z)}#S(Q,$=!0){let Z=Number(Q);if(isNaN(Z))return"";if(typeof this.min==="number")Z=Math.max(this.min,Z);if(typeof this.max==="number")Z=Math.min(this.max,Z);return Z=this.#A(Z),Z}#A(Q){const $=this.#B??2,Z=Math.pow(10,$),J=Math.round(Q*Z)/Z;return Number.isInteger(J)?J:parseFloat(J.toFixed($))}static get observedAttributes(){return["value","placeholder","disabled","step","min","max","transform","name","units","unit-position","steppers","precision"]}attributeChangedCallback(Q,$,Z){if(this.input)switch(Q){case"disabled":this.disabled=this.input.disabled=Z!==null&&Z!=="false";break;case"units":this.#G=Z||"",this.input.value=this.input.type==="number"?this.#U(this.value):this.#L(this.value);break;case"unit-position":this.#W=Z||"suffix",this.input.value=this.input.type==="number"?this.#U(this.value):this.#L(this.value);break;case"transform":this.transform=Number(Z)||1,this.input.value=this.input.type==="number"?this.#U(this.value):this.#L(this.value);break;case"value":if(this.#q)break;let J=Z!==null&&Z!==""?Number(Z):"";if(J!=="")J=this.#S(J,!1);this.value=J,this.input.value=this.input.type==="number"?this.#U(this.value):this.#L(this.value);break;case"min":case"max":case"step":if(Z===null||Z===""){this[Q]=void 0,this.#N();break}this[Q]=Number(Z),this.#N();break;case"steppers":{const j=Z!==null&&Z!=="false";if(this.input.type=j?"number":"text",j)this.input.removeAttribute("inputmode"),this.#N(),this.input.value=this.#U(this.value);else this.input.setAttribute("inputmode","decimal"),this.input.value=this.#L(this.value);break}case"precision":this.#B=Z!==null?Number(Z):2,this.input.value=this.input.type==="number"?this.#U(this.value):this.#L(this.value);break;case"name":this[Q]=this.input[Q]=Z,this.input.setAttribute("name",Z);break;default:this[Q]=this.input[Q]=Z;break}}}customElements.define("fig-input-number",m);class c extends HTMLElement{constructor(){super()}connectedCallback(){this.src=this.getAttribute("src"),this.name=this.getAttribute("name"),this.initials=this.getInitials(this.name),this.setAttribute("initials",this.initials),this.setSrc(this.src),requestAnimationFrame(()=>{this.img=this.querySelector("img")})}setSrc(Q){if(this.src=Q,Q)this.innerHTML=`<img src="${this.src}" ${this.name?`alt="${this.name}"`:""} />`}getInitials(Q){return Q?Q.split(" ").map(($)=>$[0]).join(""):""}static get observedAttributes(){return["src","href","name"]}attributeChangedCallback(Q,$,Z){if(this[Q]=Z,Q==="name")this.img?.setAttribute("alt",Z),this.name=Z,this.initials=this.getInitials(this.name),this.setAttribute("initials",this.initials);else if(Q==="src")this.src=Z,this.setSrc(this.src)}}customElements.define("fig-avatar",c);class p extends HTMLElement{constructor(){super()}static get observedAttributes(){return["label"]}connectedCallback(){requestAnimationFrame(()=>{if(this.label=this.querySelector(":scope>label"),this.input=Array.from(this.childNodes).find((Q)=>Q.nodeName.toLowerCase().startsWith("fig-")),this.input&&this.label){this.label.addEventListener("click",this.focus.bind(this));let Q=this.input.getAttribute("id")||S();this.input.setAttribute("id",Q),this.label.setAttribute("for",Q)}})}attributeChangedCallback(Q,$,Z){switch(Q){case"label":if(this.label)this.label.textContent=Z;break}}focus(){this.input.focus()}}customElements.define("fig-field",p);class d extends HTMLElement{rgba;hex;alpha=100;#Q;#$;#Z;#j;constructor(){super()}get picker(){return this.getAttribute("picker")||"native"}#K(){const Q={},$=this.getAttribute("experimental");if($)Q.experimental=$;for(let{name:Z,value:J}of this.attributes)if(Z.startsWith("picker-")&&Z!=="picker-anchor")Q[Z.slice(7)]=J;if(!Q["dialog-position"])Q["dialog-position"]="left";return Object.entries(Q).map(([Z,J])=>`${Z}="${J}"`).join(" ")}connectedCallback(){this.#J(this.getAttribute("value"));const Q=this.picker==="figma",$=this.picker==="false",Z=this.getAttribute("alpha")==="true",J=this.#K();let j="";if(this.getAttribute("text")){let _=`<fig-input-text
|
|
70
70
|
type="text"
|
|
71
71
|
placeholder="000000"
|
|
72
72
|
value="${this.hexOpaque.slice(1).toUpperCase()}">
|
|
@@ -81,7 +81,7 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
81
81
|
</fig-tooltip>`;let K="";if(!$)K=Q?`<fig-fill-picker mode="solid" ${J} ${Z?"":'alpha="false"'} value='{"type":"solid","color":"${this.hexOpaque}","opacity":${this.alpha}}'></fig-fill-picker>`:`<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"></fig-chit>`;j=`<div class="input-combo">
|
|
82
82
|
${K}
|
|
83
83
|
${_}
|
|
84
|
-
</div>`}else if($)j="";else j=Q?`<fig-fill-picker mode="solid" ${J} ${Z?"":'alpha="false"'} value='{"type":"solid","color":"${this.hexOpaque}","opacity":${this.alpha}}'></fig-fill-picker>`:`<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"></fig-chit>`;this.innerHTML=j,requestAnimationFrame(()=>{if(this.#Q=this.querySelector("fig-chit"),this.#$=this.querySelector("fig-fill-picker"),this.#Z=this.querySelector("fig-input-text:not([type=number])"),this.#j=this.querySelector("fig-input-number"),this.#Q)this.#Q.disabled=this.hasAttribute("disabled"),this.#Q.addEventListener("input",this.#G.bind(this));if(this.#$){const _=this.getAttribute("picker-anchor");if(_==="self")this.#$.anchorElement=this;else if(_){const K=document.querySelector(_);if(K)this.#$.anchorElement=K}if(this.hasAttribute("disabled"))this.#$.setAttribute("disabled","");this.#$.addEventListener("input",this.#W.bind(this)),this.#$.addEventListener("change",this.#
|
|
84
|
+
</div>`}else if($)j="";else j=Q?`<fig-fill-picker mode="solid" ${J} ${Z?"":'alpha="false"'} value='{"type":"solid","color":"${this.hexOpaque}","opacity":${this.alpha}}'></fig-fill-picker>`:`<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"></fig-chit>`;this.innerHTML=j,requestAnimationFrame(()=>{if(this.#Q=this.querySelector("fig-chit"),this.#$=this.querySelector("fig-fill-picker"),this.#Z=this.querySelector("fig-input-text:not([type=number])"),this.#j=this.querySelector("fig-input-number"),this.#Q)this.#Q.disabled=this.hasAttribute("disabled"),this.#Q.addEventListener("input",this.#G.bind(this));if(this.#$){const _=this.getAttribute("picker-anchor");if(_==="self")this.#$.anchorElement=this;else if(_){const K=document.querySelector(_);if(K)this.#$.anchorElement=K}if(this.hasAttribute("disabled"))this.#$.setAttribute("disabled","");this.#$.addEventListener("input",this.#W.bind(this)),this.#$.addEventListener("change",this.#Y.bind(this))}if(this.#Z){const _=this.rgbAlphaToHex(this.rgba,1);if(this.#Z.value=_.slice(1).toUpperCase(),this.#Q)this.#Q.background=_;this.#Z.addEventListener("input",this.#_.bind(this)),this.#Z.addEventListener("change",this.#Y.bind(this))}if(this.#j)this.#j.addEventListener("input",this.#X.bind(this)),this.#j.addEventListener("change",this.#Y.bind(this))})}#J(Q){if(this.rgba=this.convertToRGBA(Q),this.value=this.rgbAlphaToHex({r:isNaN(this.rgba.r)?0:this.rgba.r,g:isNaN(this.rgba.g)?0:this.rgba.g,b:isNaN(this.rgba.b)?0:this.rgba.b},this.rgba.a),this.hexWithAlpha=this.value.toUpperCase(),this.hexOpaque=this.hexWithAlpha.slice(0,7),Q.length>7)this.alpha=(this.rgba.a*100).toFixed(0);this.style.setProperty("--alpha",this.rgba.a)}#_(Q){Q.stopPropagation();let $=Q.target.value.replace("#","");if(this.#J("#"+$),this.#j)this.#j.setAttribute("value",this.alpha);if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque);this.#B()}#X(Q){Q.stopPropagation();const $=Number(Q.target.value)||0,J=Math.round($/100*255).toString(16).padStart(2,"0");if(this.#J(this.hexOpaque+J),this.#Q)this.#Q.setAttribute("alpha",this.rgba.a);if(this.#$)this.#$.setAttribute("value",JSON.stringify({type:"solid",color:this.hexOpaque,opacity:this.alpha}));this.#B()}#Y(Q){Q.stopPropagation(),this.#q()}focus(){this.#Q.focus()}#G(Q){if(Q.stopPropagation(),this.#J(Q.target.value),this.#Z)this.#Z.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());this.#B()}#W(Q){Q.stopPropagation();const $=Q.detail;if($&&$.color){let Z=$.color;if($.alpha!==void 0){const J=Math.round($.alpha*255).toString(16).padStart(2,"0");Z=$.color+J}if(this.#J(Z),this.#Z)this.#Z.setAttribute("value",this.hexOpaque.slice(1).toUpperCase());if(this.#j&&$.alpha!==void 0)this.#j.setAttribute("value",Math.round($.alpha*100));if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque),this.#Q.setAttribute("alpha",this.rgba.a);this.#B()}}#B(){const Q=new CustomEvent("input",{bubbles:!0,cancelable:!0});this.dispatchEvent(Q)}#q(){const Q=new CustomEvent("change",{bubbles:!0,cancelable:!0});this.dispatchEvent(Q)}static get observedAttributes(){return["value","style","mode","picker","experimental"]}get mode(){return this.getAttribute("mode")}attributeChangedCallback(Q,$,Z){if($===Z)return;switch(Q){case"value":if(this.#J(Z),this.#Z)this.#Z.setAttribute("value",this.value);if(this.#Q)this.#Q.setAttribute("background",this.hexOpaque),this.#Q.setAttribute("alpha",this.rgba.a);if(this.#$)this.#$.setAttribute("value",JSON.stringify({type:"solid",color:this.hexOpaque,opacity:this.alpha}));if(this.#j)this.#j.setAttribute("value",this.alpha);break;case"mode":if(this.#$&&Z)this.#$.setAttribute("mode",Z);break;case"picker":break}}rgbAlphaToHex({r:Q,g:$,b:Z},J=1){Q=Math.max(0,Math.min(255,Math.round(Q))),$=Math.max(0,Math.min(255,Math.round($))),Z=Math.max(0,Math.min(255,Math.round(Z))),J=Math.max(0,Math.min(1,J));const j=Q.toString(16).padStart(2,"0"),_=$.toString(16).padStart(2,"0"),K=Z.toString(16).padStart(2,"0");if(J===1)return`#${j}${_}${K}`.toUpperCase();const q=Math.round(J*255).toString(16).padStart(2,"0");return`#${j}${_}${K}${q}`.toUpperCase()}convertToRGBA(Q){let $,Z,J,j=1;if(Q.startsWith("#")){let _=Q.slice(1);if(_.length===8)j=parseInt(_.slice(6),16)/255,_=_.slice(0,6);$=parseInt(_.slice(0,2),16),Z=parseInt(_.slice(2,4),16),J=parseInt(_.slice(4,6),16)}else if(Q.startsWith("rgba")||Q.startsWith("rgb")){let _=Q.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/);if(_)$=parseInt(_[1]),Z=parseInt(_[2]),J=parseInt(_[3]),j=_[4]?parseFloat(_[4]):1}else if(Q.startsWith("hsla")||Q.startsWith("hsl")){let _=Q.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*(\d+(?:\.\d+)?))?\)/);if(_){let K=parseInt(_[1])/360,X=parseInt(_[2])/100,q=parseInt(_[3])/100;if(j=_[4]?parseFloat(_[4]):1,X===0)$=Z=J=q;else{let Y=(W,U,G)=>{if(G<0)G+=1;if(G>1)G-=1;if(G<0.16666666666666666)return W+(U-W)*6*G;if(G<0.5)return U;if(G<0.6666666666666666)return W+(U-W)*(0.6666666666666666-G)*6;return W},B=q<0.5?q*(1+X):q+X-q*X,L=2*q-B;$=Y(L,B,K+0.3333333333333333),Z=Y(L,B,K),J=Y(L,B,K-0.3333333333333333)}$=Math.round($*255),Z=Math.round(Z*255),J=Math.round(J*255)}}else return null;return{r:$,g:Z,b:J,a:j}}}customElements.define("fig-input-color",d);class u extends HTMLElement{#Q="solid";#$;#Z;#j;#K={color:"#D9D9D9",alpha:1};#J={type:"linear",angle:180,stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#_={url:null,scaleMode:"fill",scale:50,opacity:1};#X={url:null,scaleMode:"fill",opacity:1};#Y={snapshot:null,opacity:1};constructor(){super()}static get observedAttributes(){return["value","disabled","mode","experimental","alpha"]}connectedCallback(){this.#G(),this.#B()}#G(){const Q=this.getAttribute("value");if(!Q)return;try{const $=JSON.parse(Q);if($.type)this.#Q=$.type;switch(this.#Q){case"solid":if($.color)this.#K.color=$.color;if($.alpha!==void 0)this.#K.alpha=$.alpha;if($.opacity!==void 0)this.#K.alpha=$.opacity/100;break;case"gradient":if($.gradient)this.#J={...this.#J,...$.gradient};break;case"image":if($.image)this.#_={...this.#_,...$.image};break;case"video":if($.video)this.#X={...this.#X,...$.video};break;case"webcam":if($.webcam)this.#Y={...this.#Y,...$.webcam};if($.opacity!==void 0)this.#Y.opacity=$.opacity;break}}catch($){if(Q.startsWith("#")){if(this.#Q="solid",this.#K.color=Q.slice(0,7),Q.length>7){const Z=Q.slice(7,9);this.#K.alpha=parseInt(Z,16)/255}}}}#W(){const Q={},$=this.getAttribute("mode");if($)Q.mode=$;const Z=this.getAttribute("experimental");if(Z)Q.experimental=Z;const J=this.getAttribute("alpha");if(J)Q.alpha=J;for(let{name:j,value:_}of this.attributes)if(j.startsWith("picker-")&&j!=="picker-anchor")Q[j.slice(7)]=_;if(!Q["dialog-position"])Q["dialog-position"]="left";return Object.entries(Q).map(([j,_])=>`${j}="${_}"`).join(" ")}#B(){const Q=this.hasAttribute("disabled"),$=JSON.stringify(this.value),Z=this.getAttribute("alpha")!=="false",J=(K)=>Z?`<fig-tooltip text="Opacity">
|
|
85
85
|
<fig-input-number
|
|
86
86
|
class="fig-input-fill-opacity"
|
|
87
87
|
placeholder="##"
|
|
@@ -107,11 +107,11 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
107
107
|
<label class="fig-input-fill-label">Video</label>
|
|
108
108
|
${J(Math.round((this.#X.opacity??1)*100))}`;break;case"webcam":j=`
|
|
109
109
|
<label class="fig-input-fill-label">Webcam</label>
|
|
110
|
-
${J(Math.round((this.#
|
|
110
|
+
${J(Math.round((this.#Y.opacity??1)*100))}`;break}const _=this.#W();this.innerHTML=`
|
|
111
111
|
<div class="input-combo">
|
|
112
112
|
<fig-fill-picker ${_} value='${$}' ${Q?"disabled":""}></fig-fill-picker>
|
|
113
113
|
${j}
|
|
114
|
-
</div>`,this.#
|
|
114
|
+
</div>`,this.#q()}#q(){requestAnimationFrame(()=>{this.#$=this.querySelector("fig-fill-picker"),this.#Z=this.querySelector(".fig-input-fill-opacity"),this.#j=this.querySelector(".fig-input-fill-hex");const Q=this.querySelector(".fig-input-fill-label");if(Q&&this.#$)Q.addEventListener("click",()=>{const $=this.#$.querySelector("fig-chit");if($)$.click()});if(this.#$){const $=this.getAttribute("picker-anchor");if(!$||$==="self")this.#$.anchorElement=this;else{const Z=document.querySelector($);if(Z)this.#$.anchorElement=Z}this.#$.addEventListener("input",(Z)=>{Z.stopPropagation();const J=Z.detail;if(!J)return;const j=J.type,_=j!==this.#Q;switch(this.#Q=j,j){case"solid":this.#K.color=J.color,this.#K.alpha=J.alpha;break;case"gradient":if(J.gradient)this.#J=J.gradient;break;case"image":if(J.image)this.#_=J.image;break;case"video":if(J.video)this.#X=J.video;break}if(_)this.#O();else this.#N();this.#z()}),this.#$.addEventListener("change",(Z)=>{Z.stopPropagation(),this.#F()})}if(this.#j)this.#j.addEventListener("input",($)=>{$.stopPropagation();const Z="#"+$.target.value.replace("#","");this.#K.color=Z,this.#L(),this.#z()}),this.#j.addEventListener("change",($)=>{$.stopPropagation(),this.#F()});if(this.#Z)this.#Z.addEventListener("input",($)=>{$.stopPropagation();const Z=parseFloat($.target.value),J=isNaN(Z)?100:Z,j=J/100;switch(this.#Q){case"solid":this.#K.alpha=j;break;case"gradient":this.#J.stops.forEach((_)=>{_.opacity=J});break;case"image":this.#_.opacity=j;break;case"video":this.#X.opacity=j;break;case"webcam":this.#Y.opacity=j;break}this.#L(),this.#U(j),this.#z()}),this.#Z.addEventListener("change",($)=>{$.stopPropagation(),this.#F()})})}#N(){switch(this.#Q){case"solid":if(this.#j)this.#j.setAttribute("value",this.#K.color.slice(1).toUpperCase());if(this.#Z)this.#Z.setAttribute("value",Math.round(this.#K.alpha*100));break;case"gradient":{if(this.#Z)this.#Z.setAttribute("value",this.#J.stops[0]?.opacity??100);const Q=this.querySelector(".fig-input-fill-label");if(Q){const $=this.#J.type.charAt(0).toUpperCase()+this.#J.type.slice(1);Q.textContent=$}break}case"image":if(this.#Z)this.#Z.setAttribute("value",Math.round((this.#_.opacity??1)*100));break;case"video":if(this.#Z)this.#Z.setAttribute("value",Math.round((this.#X.opacity??1)*100));break;case"webcam":if(this.#Z)this.#Z.setAttribute("value",Math.round((this.#Y.opacity??1)*100));break}}#O(){const Q=this.hasAttribute("disabled"),$=this.querySelector(".input-combo");if(!$)return;const Z=$.querySelector(".fig-input-fill-label"),J=$.querySelector(".fig-input-fill-hex"),j=$.querySelector(".fig-input-fill-opacity"),_=$.querySelectorAll("fig-tooltip");Z?.remove(),J?.remove(),_.forEach((X)=>X.remove());let K="";switch(this.#Q){case"solid":K=`
|
|
115
115
|
<fig-input-text
|
|
116
116
|
type="text"
|
|
117
117
|
class="fig-input-fill-hex"
|
|
@@ -173,11 +173,11 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
173
173
|
placeholder="##"
|
|
174
174
|
min="0"
|
|
175
175
|
max="100"
|
|
176
|
-
value="${Math.round((this.#
|
|
176
|
+
value="${Math.round((this.#Y.opacity??1)*100)}"
|
|
177
177
|
units="%"
|
|
178
178
|
${Q?"disabled":""}>
|
|
179
179
|
</fig-input-number>
|
|
180
|
-
</fig-tooltip>`;break}$.insertAdjacentHTML("beforeend",K),requestAnimationFrame(()=>{this.#Z=this.querySelector(".fig-input-fill-opacity"),this.#j=this.querySelector(".fig-input-fill-hex");const X=this.querySelector(".fig-input-fill-label");if(X&&this.#$)X.addEventListener("click",()=>{const q=this.#$.querySelector("fig-chit");if(q)q.click()});if(this.#j)this.#j.addEventListener("input",(q)=>{q.stopPropagation();const Y="#"+q.target.value.replace("#","");this.#K.color=Y,this.#L(),this.#
|
|
180
|
+
</fig-tooltip>`;break}$.insertAdjacentHTML("beforeend",K),requestAnimationFrame(()=>{this.#Z=this.querySelector(".fig-input-fill-opacity"),this.#j=this.querySelector(".fig-input-fill-hex");const X=this.querySelector(".fig-input-fill-label");if(X&&this.#$)X.addEventListener("click",()=>{const q=this.#$.querySelector("fig-chit");if(q)q.click()});if(this.#j)this.#j.addEventListener("input",(q)=>{q.stopPropagation();const Y="#"+q.target.value.replace("#","");this.#K.color=Y,this.#L(),this.#z()}),this.#j.addEventListener("change",(q)=>{q.stopPropagation(),this.#F()});if(this.#Z)this.#Z.addEventListener("input",(q)=>{q.stopPropagation();const Y=parseFloat(q.target.value),B=isNaN(Y)?100:Y,L=B/100;switch(this.#Q){case"solid":this.#K.alpha=L;break;case"gradient":this.#J.stops.forEach((W)=>{W.opacity=B});break;case"image":this.#_.opacity=L;break;case"video":this.#X.opacity=L;break;case"webcam":this.#Y.opacity=L;break}this.#L(),this.#U(L),this.#z()}),this.#Z.addEventListener("change",(q)=>{q.stopPropagation(),this.#F()})})}#L(){if(this.#$)this.#$.setAttribute("value",JSON.stringify(this.value))}#U(Q){if(this.#$){const $=this.#$.querySelector("fig-chit");if($)$.setAttribute("alpha",Q)}}#z(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#F(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){switch(this.#Q){case"solid":return{type:"solid",color:this.#K.color,alpha:this.#K.alpha,opacity:Math.round(this.#K.alpha*100)};case"gradient":return{type:"gradient",gradient:{...this.#J}};case"image":return{type:"image",image:{...this.#_}};case"video":return{type:"video",video:{...this.#X}};case"webcam":return{type:"webcam",webcam:{...this.#Y}};default:return{type:this.#Q}}}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}attributeChangedCallback(Q,$,Z){if($===Z)return;switch(Q){case"value":const J=this.#Q;if(this.#G(),this.#$)if(this.#Q!==J)this.#B();else this.#L(),this.#N();break;case"disabled":if(this.#$)this.#B();break;case"mode":case"experimental":if(this.#$)if(Z)this.#$.setAttribute(Q,Z);else this.#$.removeAttribute(Q);break}}}customElements.define("fig-input-fill",u);class R extends HTMLElement{#Q=null;#$;constructor(){super();this.input=document.createElement("input"),this.name=this.getAttribute("name")||"checkbox",this.input.value=this.getAttribute("value")||"",this.input.setAttribute("id",S()),this.input.setAttribute("name",this.name),this.input.setAttribute("type","checkbox"),this.input.setAttribute("role","checkbox"),this.#$=this.handleInput.bind(this)}connectedCallback(){const Q=this.querySelector(":scope > input");if(Q)this.input=Q;else if(!this.input.parentNode)this.append(this.input);if(this.input.checked=this.hasAttribute("checked")&&this.getAttribute("checked")!=="false",this.input.removeEventListener("change",this.#$),this.input.addEventListener("change",this.#$),this.hasAttribute("disabled"))this.input.disabled=!0;if(this.hasAttribute("indeterminate"))this.input.indeterminate=!0,this.input.setAttribute("indeterminate","true");const $=this.querySelector(":scope > label");if($)this.#Q=$,this.#Q.setAttribute("for",this.input.id);if(this.hasAttribute("label"))this.#Z(),this.#Q.innerText=this.getAttribute("label");this.render()}static get observedAttributes(){return["disabled","label","checked","name","value","indeterminate"]}#Z(){if(!this.#Q)this.#Q=document.createElement("label"),this.#Q.setAttribute("for",this.input.id);if(this.#Q&&!this.#Q.parentNode&&this.input.parentNode)this.input.after(this.#Q)}render(){}focus(){this.input.focus()}get value(){return this.input.value}set value(Q){this.input.value=Q,this.setAttribute("value",Q)}get checked(){return this.input.checked}set checked(Q){if(this.input.checked=Q,Q)this.setAttribute("checked","");else this.removeAttribute("checked")}disconnectedCallback(){this.input.removeEventListener("change",this.#$),this.input.remove()}attributeChangedCallback(Q,$,Z){switch(Q){case"label":if(Z)this.#Z(),this.#Q.innerText=Z;else if(this.#Q)this.#Q.remove(),this.#Q=null;break;case"checked":if(this.input.checked=this.hasAttribute("checked")&&this.getAttribute("checked")!=="false",this.input.checked&&this.hasAttribute("indeterminate"))this.removeAttribute("indeterminate");if(this.input.indeterminate=this.hasAttribute("indeterminate")&&this.getAttribute("indeterminate")!=="false"&&!this.input.checked,this.input.indeterminate)this.input.setAttribute("indeterminate","true");else this.input.removeAttribute("indeterminate");break;case"indeterminate":if(this.input.indeterminate=this.hasAttribute("indeterminate")&&this.getAttribute("indeterminate")!=="false"&&!this.input.checked,this.input.indeterminate)this.input.setAttribute("indeterminate","true");else this.input.removeAttribute("indeterminate");break;case"value":this.input.value=Z;break;default:this.input[Q]=Z,this.input.setAttribute(Q,Z);break}}handleInput(Q){if(Q.stopPropagation(),this.input.indeterminate=!1,this.input.removeAttribute("indeterminate"),this.input.setAttribute("aria-checked",this.input.checked),this.input.checked)this.setAttribute("checked","");else this.removeAttribute("checked");this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{checked:this.input.checked,value:this.input.value}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.input.checked,value:this.input.value}}))}}customElements.define("fig-checkbox",R);class s extends R{constructor(){super();this.input.setAttribute("type","radio"),this.input.setAttribute("name",this.getAttribute("name")||"radio")}}customElements.define("fig-radio",s);class i extends R{render(){this.input.setAttribute("class","switch"),this.input.setAttribute("role","switch")}}customElements.define("fig-switch",i);class r extends HTMLDialogElement{#Q=16;#$=null;constructor(){super()}get#Z(){return parseInt(this.getAttribute("offset")??this.#Q)}connectedCallback(){if(!this.hasAttribute("theme"))this.setAttribute("theme","dark");const Q=this.getAttribute("open")==="true"||this.getAttribute("open")==="";if(this.hasAttribute("open")&&!Q)this.removeAttribute("open");if(!Q)this.close();requestAnimationFrame(()=>{if(this.#j(),this.#J(),Q)this.showToast()})}disconnectedCallback(){this.#X()}#j(){this.querySelectorAll("[close-toast]").forEach((Q)=>{Q.removeEventListener("click",this.#K),Q.addEventListener("click",this.#K.bind(this))})}#K(){this.hideToast()}#J(){this.style.position="fixed",this.style.margin="0",this.style.top="auto",this.style.bottom=`${this.#Z}px`,this.style.left="50%",this.style.right="auto",this.style.transform="translateX(-50%)"}#_(){this.#X();const Q=parseInt(this.getAttribute("duration")??"5000");if(Q>0)this.#$=setTimeout(()=>{this.hideToast()},Q)}#X(){if(this.#$)clearTimeout(this.#$),this.#$=null}showToast(){this.show(),this.#J(),this.#_(),this.dispatchEvent(new CustomEvent("toast-show",{bubbles:!0}))}hideToast(){this.#X(),this.close(),this.dispatchEvent(new CustomEvent("toast-hide",{bubbles:!0}))}static get observedAttributes(){return["duration","offset","open","theme"]}attributeChangedCallback(Q,$,Z){if(Q==="offset")this.#J();if(Q==="open")if(Z!==null&&Z!=="false")this.showToast();else this.hideToast()}}customElements.define("fig-toast",r,{extends:"dialog"});class l extends HTMLElement{#Q=!1;#$=null;constructor(){super();this.#$=this.handleSelectInput.bind(this)}getOptionsFromAttribute(){return(this.getAttribute("options")||"").split(",")}connectedCallback(){const Q=Array.from(this.children).find((j)=>j.tagName==="FIG-DROPDOWN")||null;if(this.#Q=Q!==null,Q)Q.remove();this.options=this.getOptionsFromAttribute(),this.placeholder=this.getAttribute("placeholder")||"",this.value=this.getAttribute("value")||"";const $=this.getAttribute("experimental"),Z=$?`experimental="${$}"`:"",J=this.#Q?"":`<fig-dropdown type="dropdown" ${Z}>
|
|
181
181
|
${this.options.map((j)=>`<option>${j}</option>`).join("")}
|
|
182
182
|
</fig-dropdown>`;this.innerHTML=`<div class="input-combo">
|
|
183
183
|
<fig-input-text placeholder="${this.placeholder}">
|
|
@@ -194,24 +194,24 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
194
194
|
</fig-button>`:""} ${this.download?`<fig-button variant="overlay" icon="true" type="download">
|
|
195
195
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
196
196
|
<path d="M17.5 13C17.7761 13 18 13.2239 18 13.5V16.5C18 17.3284 17.3284 18 16.5 18H7.5C6.67157 18 6 17.3284 6 16.5V13.5C6 13.2239 6.22386 13 6.5 13C6.77614 13 7 13.2239 7 13.5V16.5C7 16.7761 7.22386 17 7.5 17H16.5C16.7761 17 17 16.7761 17 16.5V13.5C17 13.2239 17.2239 13 17.5 13ZM12 6C12.2761 6 12.5 6.22386 12.5 6.5V12.293L14.6465 10.1465C14.8417 9.95122 15.1583 9.95122 15.3535 10.1465C15.5488 10.3417 15.5488 10.6583 15.3535 10.8535L12.3535 13.8535C12.2597 13.9473 12.1326 14 12 14C11.9006 14 11.8042 13.9704 11.7227 13.916L11.6465 13.8535L8.64648 10.8535C8.45122 10.6583 8.45122 10.3417 8.64648 10.1465C8.84175 9.95122 9.15825 9.95122 9.35352 10.1465L11.5 12.293V6.5C11.5 6.22386 11.7239 6 12 6Z" fill="black"/>
|
|
197
|
-
</svg></fig-button>`:""}</div>`}connectedCallback(){this.#Q=this.getAttribute("src")||"",this.upload=this.hasAttribute("upload")&&this.getAttribute("upload")!=="false",this.download=this.hasAttribute("download")&&this.getAttribute("download")!=="false",this.label=this.getAttribute("label")||"Upload",this.size=this.getAttribute("size")||"small",this.innerHTML=this.#j(),this.#K();const Q=this.getAttribute("aspect-ratio");if(Q&&Q!=="auto")this.style.setProperty("--aspect-ratio",Q);const $=this.getAttribute("fit");if($)this.style.setProperty("--fit",$)}disconnectedCallback(){this.fileInput?.removeEventListener("change",this.#$),this.downloadButton?.removeEventListener("click",this.#Z)}#K(){requestAnimationFrame(()=>{if(this.chit=this.querySelector("fig-chit"),this.upload)this.uploadButton=this.querySelector("fig-button[type='upload']"),this.fileInput=this.uploadButton?.querySelector("input"),this.fileInput?.removeEventListener("change",this.#$),this.fileInput?.addEventListener("change",this.#$);if(this.download)this.downloadButton=this.querySelector("fig-button[type='download']"),this.downloadButton?.removeEventListener("click",this.#Z),this.downloadButton?.addEventListener("click",this.#Z)})}#J(){const Q=document.createElement("a");Q.href=this.blob,Q.download="image.png",Q.click()}async#_(Q){await new Promise(($)=>{this.image=new Image,this.image.crossOrigin="Anonymous",this.image.onload=async()=>{this.aspectRatio=this.image.width/this.image.height;const Z=this.getAttribute("aspect-ratio");if(!Z||Z==="auto")this.style.setProperty("--aspect-ratio",`${this.image.width}/${this.image.height}`);this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,cancelable:!0,detail:{blob:this.blob,base64:this.base64}})),$();const J=document.createElement("canvas"),j=J.getContext("2d");J.width=this.image.width,J.height=this.image.height,j.drawImage(this.image,0,0),this.base64=J.toDataURL(),J.toBlob((_)=>{if(this.blob)URL.revokeObjectURL(this.blob);if(_)this.blob=URL.createObjectURL(_)})},this.image.src=Q})}async#X(Q){if(this.blob)URL.revokeObjectURL(this.blob);this.blob=URL.createObjectURL(Q.target.files[0]);const $=new FileReader;$.readAsDataURL(Q.target.files[0]),await new Promise((Z)=>{$.onload=(J)=>{this.base64=J.target.result,Z()}}),this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,cancelable:!0,detail:{blob:this.blob,base64:this.base64}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0})),this.setAttribute("src",this.blob)}static get observedAttributes(){return["src","upload","download","aspect-ratio","fit"]}get src(){return this.#Q}set src(Q){this.#Q=Q,this.setAttribute("src",Q)}attributeChangedCallback(Q,$,Z){if(Q==="src"){if(this.#Q=Z,this.chit)this.chit.setAttribute("background",this.#Q?`url(${this.#Q})`:"");if(this.#Q)this.#_(this.#Q)}if(Q==="upload")this.upload=Z!==null&&Z!=="false",this.innerHTML=this.#j(),this.#K();if(Q==="download")this.download=Z!==null&&Z!=="false",this.innerHTML=this.#j(),this.#K();if(Q==="size")this.size=Z;if(Q==="aspect-ratio"){if(Z&&Z!=="auto")this.style.setProperty("--aspect-ratio",Z);else if(!Z)this.style.removeProperty("--aspect-ratio")}if(Q==="fit")if(Z)this.style.setProperty("--fit",Z);else this.style.removeProperty("--fit")}}customElements.define("fig-image",t);class
|
|
197
|
+
</svg></fig-button>`:""}</div>`}connectedCallback(){this.#Q=this.getAttribute("src")||"",this.upload=this.hasAttribute("upload")&&this.getAttribute("upload")!=="false",this.download=this.hasAttribute("download")&&this.getAttribute("download")!=="false",this.label=this.getAttribute("label")||"Upload",this.size=this.getAttribute("size")||"small",this.innerHTML=this.#j(),this.#K();const Q=this.getAttribute("aspect-ratio");if(Q&&Q!=="auto")this.style.setProperty("--aspect-ratio",Q);const $=this.getAttribute("fit");if($)this.style.setProperty("--fit",$)}disconnectedCallback(){this.fileInput?.removeEventListener("change",this.#$),this.downloadButton?.removeEventListener("click",this.#Z)}#K(){requestAnimationFrame(()=>{if(this.chit=this.querySelector("fig-chit"),this.upload)this.uploadButton=this.querySelector("fig-button[type='upload']"),this.fileInput=this.uploadButton?.querySelector("input"),this.fileInput?.removeEventListener("change",this.#$),this.fileInput?.addEventListener("change",this.#$);if(this.download)this.downloadButton=this.querySelector("fig-button[type='download']"),this.downloadButton?.removeEventListener("click",this.#Z),this.downloadButton?.addEventListener("click",this.#Z)})}#J(){const Q=document.createElement("a");Q.href=this.blob,Q.download="image.png",Q.click()}async#_(Q){await new Promise(($)=>{this.image=new Image,this.image.crossOrigin="Anonymous",this.image.onload=async()=>{this.aspectRatio=this.image.width/this.image.height;const Z=this.getAttribute("aspect-ratio");if(!Z||Z==="auto")this.style.setProperty("--aspect-ratio",`${this.image.width}/${this.image.height}`);this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,cancelable:!0,detail:{blob:this.blob,base64:this.base64}})),$();const J=document.createElement("canvas"),j=J.getContext("2d");J.width=this.image.width,J.height=this.image.height,j.drawImage(this.image,0,0),this.base64=J.toDataURL(),J.toBlob((_)=>{if(this.blob)URL.revokeObjectURL(this.blob);if(_)this.blob=URL.createObjectURL(_)})},this.image.src=Q})}async#X(Q){if(this.blob)URL.revokeObjectURL(this.blob);this.blob=URL.createObjectURL(Q.target.files[0]);const $=new FileReader;$.readAsDataURL(Q.target.files[0]),await new Promise((Z)=>{$.onload=(J)=>{this.base64=J.target.result,Z()}}),this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,cancelable:!0,detail:{blob:this.blob,base64:this.base64}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0})),this.setAttribute("src",this.blob)}static get observedAttributes(){return["src","upload","download","aspect-ratio","fit"]}get src(){return this.#Q}set src(Q){this.#Q=Q,this.setAttribute("src",Q)}attributeChangedCallback(Q,$,Z){if(Q==="src"){if(this.#Q=Z,this.chit)this.chit.setAttribute("background",this.#Q?`url(${this.#Q})`:"");if(this.#Q)this.#_(this.#Q)}if(Q==="upload")this.upload=Z!==null&&Z!=="false",this.innerHTML=this.#j(),this.#K();if(Q==="download")this.download=Z!==null&&Z!=="false",this.innerHTML=this.#j(),this.#K();if(Q==="size")this.size=Z;if(Q==="aspect-ratio"){if(Z&&Z!=="auto")this.style.setProperty("--aspect-ratio",Z);else if(!Z)this.style.removeProperty("--aspect-ratio")}if(Q==="fit")if(Z)this.style.setProperty("--fit",Z);else this.style.removeProperty("--fit")}}customElements.define("fig-image",t);class z extends HTMLElement{#Q={x:0.42,y:0};#$={x:0.58,y:1};#Z={stiffness:200,damping:15,mass:1};#j="bezier";#K=2;#J=null;#_=null;#X=null;#Y=null;#G=null;#W=null;#B=null;#q=null;#N=null;#O=null;#L=null;#U=null;#z=0.8;#F=200;#M=200;#D=null;#T=null;#E=null;#H=3.625;#R=2;#S=3.625;#A=6;#f=16;#P=3;static PRESETS=[{group:null,name:"Linear",type:"bezier",value:[0,0,1,1]},{group:"Bezier",name:"Ease in",type:"bezier",value:[0.42,0,1,1]},{group:"Bezier",name:"Ease out",type:"bezier",value:[0,0,0.58,1]},{group:"Bezier",name:"Ease in and out",type:"bezier",value:[0.42,0,0.58,1]},{group:"Bezier",name:"Ease in back",type:"bezier",value:[0.6,-0.28,0.735,0.045]},{group:"Bezier",name:"Ease out back",type:"bezier",value:[0.175,0.885,0.32,1.275]},{group:"Bezier",name:"Ease in and out back",type:"bezier",value:[0.68,-0.55,0.265,1.55]},{group:"Bezier",name:"Custom bezier",type:"bezier",value:null},{group:"Spring",name:"Gentle",type:"spring",spring:{stiffness:120,damping:14,mass:1}},{group:"Spring",name:"Quick",type:"spring",spring:{stiffness:380,damping:20,mass:1}},{group:"Spring",name:"Bouncy",type:"spring",spring:{stiffness:250,damping:8,mass:1}},{group:"Spring",name:"Slow",type:"spring",spring:{stiffness:60,damping:11,mass:1}},{group:"Spring",name:"Custom spring",type:"spring",spring:null}];static get observedAttributes(){return["value","precision","aspect-ratio"]}connectedCallback(){this.#K=parseInt(this.getAttribute("precision")||"2"),this.#m(this.getAttribute("aspect-ratio"));const Q=this.getAttribute("value");if(Q)this.#b(Q);this.#L=this.#y(),this.#g(),this.#n()}disconnectedCallback(){if(this.#J=null,this.#E)this.#E.disconnect(),this.#E=null}#m(Q){if(Q&&Q.trim())this.style.setProperty("--aspect-ratio",Q.trim());else this.style.removeProperty("--aspect-ratio")}attributeChangedCallback(Q,$,Z){if(Q==="aspect-ratio"){if(this.#m(Z),this.#_)this.#u(),this.#C();return}if(!this.#_)return;if(Q==="value"&&Z){const J=this.#j;if(this.#b(Z),this.#L=this.#y(),J!==this.#j)this.#g();else this.#C(),this.#r()}if(Q==="precision")this.#K=parseInt(Z||"2")}get value(){if(this.#j==="spring"){const{stiffness:$,damping:Z,mass:J}=this.#Z;return`spring(${$}, ${Z}, ${J})`}const Q=this.#K;return`${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)}, ${this.#$.x.toFixed(Q)}, ${this.#$.y.toFixed(Q)}`}get cssValue(){if(this.#j==="spring"){const $=this.#V(),J=Math.max(1,Math.floor($.length/20)),j=[];for(let _=0;_<$.length;_+=J)j.push($[_].value.toFixed(3));if($.length>0)j.push($[$.length-1].value.toFixed(3));return`linear(${j.join(", ")})`}const Q=this.#K;return`cubic-bezier(${this.#Q.x.toFixed(Q)}, ${this.#Q.y.toFixed(Q)}, ${this.#$.x.toFixed(Q)}, ${this.#$.y.toFixed(Q)})`}get preset(){return this.#L}set value(Q){this.setAttribute("value",Q)}#b(Q){const $=Q.match(/^spring\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);if($){this.#j="spring",this.#Z.stiffness=parseFloat($[1]),this.#Z.damping=parseFloat($[2]),this.#Z.mass=parseFloat($[3]);return}const Z=Q.split(",").map((J)=>parseFloat(J.trim()));if(Z.length>=4&&Z.every((J)=>!isNaN(J)))this.#j="bezier",this.#Q.x=Z[0],this.#Q.y=Z[1],this.#$.x=Z[2],this.#$.y=Z[3]}#y(){if(this.#j==="bezier"){for(let $ of z.PRESETS){if($.type!=="bezier"||!$.value)continue;if(Math.abs(this.#Q.x-$.value[0])<0.001&&Math.abs(this.#Q.y-$.value[1])<0.001&&Math.abs(this.#$.x-$.value[2])<0.001&&Math.abs(this.#$.y-$.value[3])<0.001)return $.name}return"Custom bezier"}for(let $ of z.PRESETS){if($.type!=="spring"||!$.spring)continue;if(Math.abs(this.#Z.stiffness-$.spring.stiffness)<0.001&&Math.abs(this.#Z.damping-$.spring.damping)<0.001&&Math.abs(this.#Z.mass-$.spring.mass)<0.001)return $.name}return"Custom spring"}#V(){const{stiffness:Q,damping:$,mass:Z}=this.#Z,_=[];let K=0,X=0;for(let q=0;q<=5;q+=0.004){const Y=-Q*(K-1)-$*X;if(X+=Y/Z*0.004,K+=X*0.004,_.push({t:q,value:K}),q>0.1&&Math.abs(K-1)<0.0005&&Math.abs(X)<0.0005)break}return _}static#c(Q,$=24){const{stiffness:Z,damping:J,mass:j}=Q,X=[];let q=0,Y=0;for(let O=0;O<=5;O+=0.004){const N=-Z*(q-1)-J*Y;if(Y+=N/j*0.004,q+=Y*0.004,X.push({t:O,value:q}),O>0.1&&Math.abs(q-1)<0.001&&Math.abs(Y)<0.001)break}const B=X[X.length-1].t||1;let L=1;for(let O of X)if(O.value>L)L=O.value;let W=0;for(let O of X)if(O.value<W)W=O.value;const U=Math.max(L-W,1),G=6,F=$-G*2,M=Math.max(1,Math.floor(X.length/30));let k="";for(let O=0;O<X.length;O+=M){const N=G+X[O].t/B*F,E=G+(1-(X[O].value-W)/U)*F;k+=(O===0?"M":"L")+N.toFixed(1)+","+E.toFixed(1)}return`<svg width="${$}" height="${$}" viewBox="0 0 ${$} ${$}" fill="none"><path d="${k}" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none"/></svg>`}static curveIcon(Q,$,Z,J,j=24){const K=(j-12)/2,q=[],Y=(N,E,T,JQ,A)=>{const D=1-A;return D*D*D*N+3*D*D*A*E+3*D*A*A*T+A*A*A*JQ};for(let N=0;N<=48;N++){const E=N/48;q.push({x:Y(0,Q,Z,1,E),y:Y(0,$,J,1,E)})}let B=1/0,L=-1/0,W=1/0,U=-1/0;for(let N of q){if(N.x<B)B=N.x;if(N.x>L)L=N.x;if(N.y<W)W=N.y;if(N.y>U)U=N.y}const G=Math.max(L-B,0.000001),F=Math.max(U-W,0.000001),M=(N)=>K+(N-B)/G*12,k=(N)=>K+(1-(N-W)/F)*12;let O="";for(let N=0;N<q.length;N++){const E=M(q[N].x),T=k(q[N].y);O+=`${N===0?"M":"L"}${E.toFixed(1)},${T.toFixed(1)}`}return`<svg width="${j}" height="${j}" viewBox="0 0 ${j} ${j}" fill="none"><path d="${O}" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>`}#g(){this.classList.toggle("spring-mode",this.#j==="spring"),this.classList.toggle("bezier-mode",this.#j!=="spring"),this.#p(),this.innerHTML=this.#w(),this.#l(),this.#u(),this.#C(),this.#JQ()}#d(){if(this.getAttribute("dropdown")!=="true")return"";let Q="",$=void 0;for(let Z of z.PRESETS){if(Z.group!==$){if($!==void 0)Q+="</optgroup>";if(Z.group)Q+=`<optgroup label="${Z.group}">`;$=Z.group}let J;if(Z.type==="spring"){const _=Z.spring||this.#Z;J=z.#c(_)}else{const _=Z.value||[this.#Q.x,this.#Q.y,this.#$.x,this.#$.y];J=z.curveIcon(..._)}const j=Z.name===this.#L?" selected":"";Q+=`<option value="${Z.name}"${j}>${J} ${Z.name}</option>`}if($)Q+="</optgroup>";return`<fig-dropdown class="fig-easing-curve-dropdown" full experimental="modern">${Q}</fig-dropdown>`}#w(){const $=this.#d();if(this.#j==="spring")return`${$}<div class="fig-easing-curve-svg-container"><svg viewBox="0 0 200 200" class="fig-easing-curve-svg">
|
|
198
198
|
<rect class="fig-easing-curve-bounds" x="0" y="0" width="200" height="200"/>
|
|
199
199
|
<line class="fig-easing-curve-target" x1="0" y1="40" x2="200" y2="40"/>
|
|
200
200
|
<line class="fig-easing-curve-diagonal" x1="0" y1="180" x2="0" y2="180"/>
|
|
201
201
|
<path class="fig-easing-curve-path"/>
|
|
202
|
-
<circle class="fig-easing-curve-handle" data-handle="bounce" r="${this.#
|
|
203
|
-
<rect class="fig-easing-curve-duration-bar" data-handle="duration" width="${this.#A}" height="${this.#
|
|
202
|
+
<circle class="fig-easing-curve-handle" data-handle="bounce" r="${this.#S}"/>
|
|
203
|
+
<rect class="fig-easing-curve-duration-bar" data-handle="duration" width="${this.#A}" height="${this.#f}" rx="${this.#P}" ry="${this.#P}"/>
|
|
204
204
|
</svg></div>`;return`${$}<div class="fig-easing-curve-svg-container"><svg viewBox="0 0 200 200" class="fig-easing-curve-svg">
|
|
205
205
|
<rect class="fig-easing-curve-bounds" x="0" y="0" width="200" height="200"/>
|
|
206
206
|
<line class="fig-easing-curve-diagonal" x1="0" y1="200" x2="200" y2="0"/>
|
|
207
207
|
<line class="fig-easing-curve-arm" data-arm="1"/>
|
|
208
208
|
<line class="fig-easing-curve-arm" data-arm="2"/>
|
|
209
209
|
<path class="fig-easing-curve-path"/>
|
|
210
|
-
<circle class="fig-easing-curve-endpoint" data-endpoint="start" r="${this.#
|
|
211
|
-
<circle class="fig-easing-curve-endpoint" data-endpoint="end" r="${this.#
|
|
212
|
-
<circle class="fig-easing-curve-handle" data-handle="1" r="${this.#
|
|
213
|
-
<circle class="fig-easing-curve-handle" data-handle="2" r="${this.#
|
|
214
|
-
</svg></div>`}#V(Q,$){const Z=getComputedStyle(this).getPropertyValue(Q).trim();if(!Z)return $;const J=Number.parseFloat(Z);return Number.isFinite(J)?J:$}#s(){this.#S=this.#V("--easing-bezier-handle-radius",this.#S),this.#T=this.#V("--easing-bezier-endpoint-radius",this.#T),this.#R=this.#V("--easing-spring-handle-radius",this.#R),this.#A=this.#V("--easing-duration-bar-width",this.#A),this.#w=this.#V("--easing-duration-bar-height",this.#w),this.#P=this.#V("--easing-duration-bar-radius",this.#P)}#l(){this.#_=this.querySelector(".fig-easing-curve-svg"),this.#X=this.querySelector(".fig-easing-curve-path"),this.#q=this.querySelector('[data-arm="1"]'),this.#G=this.querySelector('[data-arm="2"]'),this.#W=this.querySelector('[data-handle="1"]')||this.querySelector('[data-handle="bounce"]'),this.#B=this.querySelector('[data-handle="2"]')||this.querySelector('[data-handle="duration"]'),this.#Y=this.querySelector('[data-endpoint="start"]'),this.#N=this.querySelector('[data-endpoint="end"]'),this.#O=this.querySelector(".fig-easing-curve-dropdown"),this.#U=this.querySelector(".fig-easing-curve-target"),this.#z=this.querySelector(".fig-easing-curve-bounds"),this.#H=this.querySelector(".fig-easing-curve-diagonal")}#p(){if(this.#k||!window.ResizeObserver)return;this.#k=new ResizeObserver(()=>{if(this.#g())this.#x()}),this.#k.observe(this)}#g(){if(!this.#_)return!1;const Q=this.#_.getBoundingClientRect(),$=Math.max(1,Math.round(Q.width||200)),Z=Math.max(1,Math.round(Q.height||200)),J=$!==this.#F||Z!==this.#M;return this.#F=$,this.#M=Z,this.#_.setAttribute("viewBox",`0 0 ${$} ${Z}`),J}#d(Q,$){return{x:Q*this.#F,y:(1-$)*this.#M}}#i(Q,$){return{x:Q/this.#F,y:1-$/this.#M}}#r={minVal:0,maxVal:1.2,totalTime:1};#C(Q,$){const J=this.#M-40,{minVal:j,maxVal:_}=this.#r,K=_-j||1;return{x:Q*this.#F,y:20+(1-($-j)/K)*J}}#x(){if(this.#g(),this.#j==="spring")this.#QQ();else this.#n()}#n(){if(this.#z)this.#z.setAttribute("x","0"),this.#z.setAttribute("y","0"),this.#z.setAttribute("width",this.#F),this.#z.setAttribute("height",this.#M);if(this.#H)this.#H.setAttribute("x1","0"),this.#H.setAttribute("y1",this.#M),this.#H.setAttribute("x2",this.#F),this.#H.setAttribute("y2","0");const Q=this.#d(0,0),$=this.#d(this.#Q.x,this.#Q.y),Z=this.#d(this.#$.x,this.#$.y),J=this.#d(1,1);if(this.#X.setAttribute("d",`M${Q.x},${Q.y} C${$.x},${$.y} ${Z.x},${Z.y} ${J.x},${J.y}`),this.#q.setAttribute("x1",Q.x),this.#q.setAttribute("y1",Q.y),this.#q.setAttribute("x2",$.x),this.#q.setAttribute("y2",$.y),this.#G.setAttribute("x1",J.x),this.#G.setAttribute("y1",J.y),this.#G.setAttribute("x2",Z.x),this.#G.setAttribute("y2",Z.y),this.#W.setAttribute("cx",$.x),this.#W.setAttribute("cy",$.y),this.#B.setAttribute("cx",Z.x),this.#B.setAttribute("cy",Z.y),this.#Y)this.#Y.setAttribute("cx",Q.x),this.#Y.setAttribute("cy",Q.y);if(this.#N)this.#N.setAttribute("cx",J.x),this.#N.setAttribute("cy",J.y)}#QQ(){if(this.#z)this.#z.setAttribute("x","0"),this.#z.setAttribute("y","0"),this.#z.setAttribute("width",this.#F),this.#z.setAttribute("height",this.#M);const Q=this.#y();if(!Q.length)return;const $=Q[Q.length-1].t||1;let Z=0,J=1;for(let G of Q){if(G.value<Z)Z=G.value;if(G.value>J)J=G.value}const j=Math.max(Math.abs(Z-1),Math.abs(J-1),0.01),_=0;this.#r={minVal:1-j-_,maxVal:1+j+_,totalTime:$};const K=Math.max(0.05,Math.min(0.95,this.#E));let X="";for(let G=0;G<Q.length;G++){const F=Q[G].t/$*K,M=this.#C(F,Q[G].value);X+=(G===0?"M":"L")+M.x.toFixed(1)+","+M.y.toFixed(1)}const q=this.#C(K,1),Y=this.#C(1,1);if(X+=`L${q.x.toFixed(1)},${q.y.toFixed(1)} L${Y.x.toFixed(1)},${Y.y.toFixed(1)}`,this.#X.setAttribute("d",X),this.#U){const G=this.#C(0,1),F=this.#C(1,1);this.#U.setAttribute("x1",G.x),this.#U.setAttribute("y1",G.y),this.#U.setAttribute("x2",F.x),this.#U.setAttribute("y2",F.y)}const B=this.#$Q(Q),L=B.t/$*K,W=this.#C(L,B.value);this.#W.setAttribute("cx",W.x),this.#W.setAttribute("cy",W.y);const U=this.#C(K,1);this.#B.setAttribute("x",U.x-this.#A/2),this.#B.setAttribute("y",U.y-this.#w/2)}#$Q(Q){let $={t:0,value:1},Z=!1;for(let J of Q){if(J.value>=0.99)Z=!0;if(Z&&J.value>$.value)$={t:J.t,value:J.value}}return $}#o(){if(!this.#O)return;this.#O.value=this.#L,this.#D()}#t(Q,$,Z){if(!Q)return;for(let J of Q.querySelectorAll("option"))if(J.value===$)J.innerHTML=`${Z} ${$}`}#D(){if(!this.#O)return;const Q=k.curveIcon(this.#Q.x,this.#Q.y,this.#$.x,this.#$.y),$=k.#h(this.#Z);this.#t(this.#O,"Custom bezier",Q),this.#t(this.#O,"Custom spring",$),this.#t(this.#O.select,"Custom bezier",Q),this.#t(this.#O.select,"Custom spring",$)}#b(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{mode:this.#j,value:this.value,cssValue:this.cssValue,preset:this.#L}}))}#JQ(){if(this.#j==="bezier"){this.#W.addEventListener("pointerdown",($)=>this.#a($,1)),this.#B.addEventListener("pointerdown",($)=>this.#a($,2));const Q=this.querySelector(".fig-easing-curve-svg-container");if(Q)Q.addEventListener("pointerdown",($)=>{if($.target?.closest?.(".fig-easing-curve-handle"))return;this.#a($,this.#jQ($))})}else{this.#W.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#e($,"bounce")}),this.#B.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#e($,"duration")});const Q=this.querySelector(".fig-easing-curve-svg-container");if(Q)Q.addEventListener("pointerdown",($)=>{if($.target?.closest?.(".fig-easing-curve-handle"))return;this.#e($,"duration")})}if(this.#O)this.#O.addEventListener("change",(Q)=>{const $=Q.detail,Z=k.PRESETS.find((J)=>J.name===$);if(!Z)return;if(Z.type==="bezier"){if(Z.value)this.#Q.x=Z.value[0],this.#Q.y=Z.value[1],this.#$.x=Z.value[2],this.#$.y=Z.value[3];if(this.#L=$,this.#j!=="bezier")this.#j="bezier",this.#v();else this.#x()}else if(Z.type==="spring"){if(Z.spring)this.#Z={...Z.spring};if(this.#L=$,this.#j!=="spring")this.#j="spring",this.#v();else this.#x()}this.#b("input"),this.#b("change")})}#ZQ(Q){const $=this.#_.getScreenCTM();if(!$)return{x:0,y:0};const Z=$.inverse();return{x:Z.a*Q.clientX+Z.c*Q.clientY+Z.e,y:Z.b*Q.clientX+Z.d*Q.clientY+Z.f}}#jQ(Q){return this.#ZQ(Q).x<=this.#F/2?1:2}#a(Q,$){Q.preventDefault(),this.#J=$;const Z=(j)=>{if(!this.#J)return;const _=this.#ZQ(j),K=this.#i(_.x,_.y);if(K.x=Math.round(K.x*100)/100,K.y=Math.round(K.y*100)/100,K.x=Math.max(0,Math.min(1,K.x)),this.#J===1)this.#Q.x=K.x,this.#Q.y=K.y;else this.#$.x=K.x,this.#$.y=K.y;this.#x(),this.#L=this.#f(),this.#o(),this.#b("input")},J=()=>{this.#J=null,document.removeEventListener("pointermove",Z),document.removeEventListener("pointerup",J),this.#b("change")};document.addEventListener("pointermove",Z),document.addEventListener("pointerup",J)}#e(Q,$){Q.preventDefault(),this.#J=$;const Z=this.#Z.damping,J=this.#Z.stiffness,j=this.#E,_=Q.clientY,K=Q.clientX,X=(Y)=>{if(!this.#J)return;if($==="bounce"){const B=Y.clientY-_;this.#Z.damping=Math.max(1,Math.round(Z+B*0.15))}else{const B=Y.clientX-K;this.#E=Math.max(0.05,Math.min(0.95,j+B/200)),this.#Z.stiffness=Math.max(10,Math.round(J-B*1.5))}this.#x(),this.#L=this.#f(),this.#o(),this.#b("input")},q=()=>{this.#J=null,document.removeEventListener("pointermove",X),document.removeEventListener("pointerup",q),this.#b("change")};document.addEventListener("pointermove",X),document.addEventListener("pointerup",q)}}customElements.define("fig-easing-curve",k);class n extends HTMLElement{#Q=0;#$=0;#Z=0;#j=1;#K=!1;#J=!1;#_=null;#X=null;#q=null;#G=null;#W=[];#B={};static get observedAttributes(){return["value","precision","aspect-ratio","fields","perspective","perspective-origin","transform-origin","selected","drag"]}connectedCallback(){this.#j=parseInt(this.getAttribute("precision")||"1"),this.#Y(this.getAttribute("aspect-ratio")),this.#N(this.getAttribute("perspective")),this.#O("--perspective-origin",this.getAttribute("perspective-origin")),this.#L(this.getAttribute("transform-origin")),this.#F(this.getAttribute("fields"));const Q=this.getAttribute("value");if(Q)this.#M(Q);this.#z(),this.#E(this.getAttribute("selected")),this.#U()}disconnectedCallback(){if(this.#K=!1,this.#q)window.removeEventListener("keydown",this.#q),window.removeEventListener("keyup",this.#G)}#Y(Q){if(Q&&Q.trim())this.style.setProperty("--aspect-ratio",Q.trim());else this.style.removeProperty("--aspect-ratio")}#N(Q){if(Q&&Q.trim())this.style.setProperty("--perspective",Q.trim());else this.style.removeProperty("--perspective")}#O(Q,$){if($&&$.trim())this.style.setProperty(Q,$.trim());else this.style.removeProperty(Q)}#L(Q){if(!Q||!Q.trim()){this.style.removeProperty("--transform-origin");return}const $=Q.trim().split(/\s+/);if($.length===2)this.style.setProperty("--transform-origin",`${$[0]} ${$[1]} -50cqi`);else this.style.setProperty("--transform-origin",Q.trim())}#U(){if(!this.#X)return;this.#X.style.cursor=this.#A?"":"default"}#E(Q){if(!this.#_)return;const $=this.#_.querySelectorAll(".fig-3d-rotate-face"),Z=Q?Q.trim().toLowerCase():"";for(let J of $)J.classList.toggle("selected",Z!==""&&J.classList.contains(Z))}#F(Q){if(!Q||!Q.trim()){this.#W=[];return}const $=["rotateX","rotateY","rotateZ"];this.#W=Q.split(",").map((Z)=>Z.trim()).filter((Z)=>$.includes(Z))}attributeChangedCallback(Q,$,Z){if(Q==="aspect-ratio"){this.#Y(Z);return}if(Q==="perspective"){this.#N(Z);return}if(Q==="perspective-origin"){this.#O("--perspective-origin",Z);return}if(Q==="transform-origin"){this.#L(Z);return}if(Q==="selected"){this.#E(Z);return}if(Q==="drag"){this.#U();return}if(Q==="fields"){if(this.#F(Z),this.#_)this.#z();return}if(!this.#_)return;if(Q==="value"&&Z){if(this.#K)return;this.#M(Z),this.#k(),this.#H()}if(Q==="precision")this.#j=parseInt(Z||"1")}get value(){const Q=this.#j;return`rotateX(${this.#Q.toFixed(Q)}deg) rotateY(${this.#$.toFixed(Q)}deg) rotateZ(${this.#Z.toFixed(Q)}deg)`}set value(Q){this.setAttribute("value",Q)}get rotateX(){return this.#Q}get rotateY(){return this.#$}get rotateZ(){return this.#Z}#M(Q){const $=Q.match(/rotateX\(\s*(-?[\d.]+)\s*deg\s*\)/),Z=Q.match(/rotateY\(\s*(-?[\d.]+)\s*deg\s*\)/),J=Q.match(/rotateZ\(\s*(-?[\d.]+)\s*deg\s*\)/);if($)this.#Q=parseFloat($[1]);if(Z)this.#$=parseFloat(Z[1]);if(J)this.#Z=parseFloat(J[1])}#z(){const Q={rotateX:"X",rotateY:"Y",rotateZ:"Z"},$={rotateX:this.#Q,rotateY:this.#$,rotateZ:this.#Z},Z=this.#W.map((J)=>`<fig-input-number
|
|
210
|
+
<circle class="fig-easing-curve-endpoint" data-endpoint="start" r="${this.#R}"/>
|
|
211
|
+
<circle class="fig-easing-curve-endpoint" data-endpoint="end" r="${this.#R}"/>
|
|
212
|
+
<circle class="fig-easing-curve-handle" data-handle="1" r="${this.#H}"/>
|
|
213
|
+
<circle class="fig-easing-curve-handle" data-handle="2" r="${this.#H}"/>
|
|
214
|
+
</svg></div>`}#x(Q,$){const Z=getComputedStyle(this).getPropertyValue(Q).trim();if(!Z)return $;const J=Number.parseFloat(Z);return Number.isFinite(J)?J:$}#p(){this.#H=this.#x("--easing-bezier-handle-radius",this.#H),this.#R=this.#x("--easing-bezier-endpoint-radius",this.#R),this.#S=this.#x("--easing-spring-handle-radius",this.#S),this.#A=this.#x("--easing-duration-bar-width",this.#A),this.#f=this.#x("--easing-duration-bar-height",this.#f),this.#P=this.#x("--easing-duration-bar-radius",this.#P)}#l(){this.#_=this.querySelector(".fig-easing-curve-svg"),this.#X=this.querySelector(".fig-easing-curve-path"),this.#Y=this.querySelector('[data-arm="1"]'),this.#G=this.querySelector('[data-arm="2"]'),this.#W=this.querySelector('[data-handle="1"]')||this.querySelector('[data-handle="bounce"]'),this.#B=this.querySelector('[data-handle="2"]')||this.querySelector('[data-handle="duration"]'),this.#q=this.querySelector('[data-endpoint="start"]'),this.#N=this.querySelector('[data-endpoint="end"]'),this.#O=this.querySelector(".fig-easing-curve-dropdown"),this.#U=this.querySelector(".fig-easing-curve-target"),this.#D=this.querySelector(".fig-easing-curve-bounds"),this.#T=this.querySelector(".fig-easing-curve-diagonal")}#n(){if(this.#E||!window.ResizeObserver)return;this.#E=new ResizeObserver(()=>{if(this.#u())this.#C()}),this.#E.observe(this)}#u(){if(!this.#_)return!1;const Q=this.#_.getBoundingClientRect(),$=Math.max(1,Math.round(Q.width||200)),Z=Math.max(1,Math.round(Q.height||200)),J=$!==this.#F||Z!==this.#M;return this.#F=$,this.#M=Z,this.#_.setAttribute("viewBox",`0 0 ${$} ${Z}`),J}#s(Q,$){return{x:Q*this.#F,y:(1-$)*this.#M}}#a(Q,$){return{x:Q/this.#F,y:1-$/this.#M}}#o={minVal:0,maxVal:1.2,totalTime:1};#I(Q,$){const J=this.#M-40,{minVal:j,maxVal:_}=this.#o,K=_-j||1;return{x:Q*this.#F,y:20+(1-($-j)/K)*J}}#C(){if(this.#u(),this.#j==="spring")this.#e();else this.#i()}#i(){if(this.#D)this.#D.setAttribute("x","0"),this.#D.setAttribute("y","0"),this.#D.setAttribute("width",this.#F),this.#D.setAttribute("height",this.#M);if(this.#T)this.#T.setAttribute("x1","0"),this.#T.setAttribute("y1",this.#M),this.#T.setAttribute("x2",this.#F),this.#T.setAttribute("y2","0");const Q=this.#s(0,0),$=this.#s(this.#Q.x,this.#Q.y),Z=this.#s(this.#$.x,this.#$.y),J=this.#s(1,1);if(this.#X.setAttribute("d",`M${Q.x},${Q.y} C${$.x},${$.y} ${Z.x},${Z.y} ${J.x},${J.y}`),this.#Y.setAttribute("x1",Q.x),this.#Y.setAttribute("y1",Q.y),this.#Y.setAttribute("x2",$.x),this.#Y.setAttribute("y2",$.y),this.#G.setAttribute("x1",J.x),this.#G.setAttribute("y1",J.y),this.#G.setAttribute("x2",Z.x),this.#G.setAttribute("y2",Z.y),this.#W.setAttribute("cx",$.x),this.#W.setAttribute("cy",$.y),this.#B.setAttribute("cx",Z.x),this.#B.setAttribute("cy",Z.y),this.#q)this.#q.setAttribute("cx",Q.x),this.#q.setAttribute("cy",Q.y);if(this.#N)this.#N.setAttribute("cx",J.x),this.#N.setAttribute("cy",J.y)}#e(){if(this.#D)this.#D.setAttribute("x","0"),this.#D.setAttribute("y","0"),this.#D.setAttribute("width",this.#F),this.#D.setAttribute("height",this.#M);const Q=this.#V();if(!Q.length)return;const $=Q[Q.length-1].t||1;let Z=0,J=1;for(let G of Q){if(G.value<Z)Z=G.value;if(G.value>J)J=G.value}const j=Math.max(Math.abs(Z-1),Math.abs(J-1),0.01),_=0;this.#o={minVal:1-j-_,maxVal:1+j+_,totalTime:$};const K=Math.max(0.05,Math.min(0.95,this.#z));let X="";for(let G=0;G<Q.length;G++){const F=Q[G].t/$*K,M=this.#I(F,Q[G].value);X+=(G===0?"M":"L")+M.x.toFixed(1)+","+M.y.toFixed(1)}const q=this.#I(K,1),Y=this.#I(1,1);if(X+=`L${q.x.toFixed(1)},${q.y.toFixed(1)} L${Y.x.toFixed(1)},${Y.y.toFixed(1)}`,this.#X.setAttribute("d",X),this.#U){const G=this.#I(0,1),F=this.#I(1,1);this.#U.setAttribute("x1",G.x),this.#U.setAttribute("y1",G.y),this.#U.setAttribute("x2",F.x),this.#U.setAttribute("y2",F.y)}const B=this.#t(Q),L=B.t/$*K,W=this.#I(L,B.value);this.#W.setAttribute("cx",W.x),this.#W.setAttribute("cy",W.y);const U=this.#I(K,1);this.#B.setAttribute("x",U.x-this.#A/2),this.#B.setAttribute("y",U.y-this.#f/2)}#t(Q){let $={t:0,value:1},Z=!1;for(let J of Q){if(J.value>=0.99)Z=!0;if(Z&&J.value>$.value)$={t:J.t,value:J.value}}return $}#r(){if(!this.#O)return;this.#O.value=this.#L,this.#k()}#v(Q,$,Z){if(!Q)return;for(let J of Q.querySelectorAll("option"))if(J.value===$)J.innerHTML=`${Z} ${$}`}#k(){if(!this.#O)return;const Q=z.curveIcon(this.#Q.x,this.#Q.y,this.#$.x,this.#$.y),$=z.#c(this.#Z);this.#v(this.#O,"Custom bezier",Q),this.#v(this.#O,"Custom spring",$),this.#v(this.#O.select,"Custom bezier",Q),this.#v(this.#O.select,"Custom spring",$)}#h(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{mode:this.#j,value:this.value,cssValue:this.cssValue,preset:this.#L}}))}#JQ(){if(this.#j==="bezier"){this.#W.addEventListener("pointerdown",($)=>this.#QQ($,1)),this.#B.addEventListener("pointerdown",($)=>this.#QQ($,2));const Q=this.querySelector(".fig-easing-curve-svg-container");if(Q)Q.addEventListener("pointerdown",($)=>{if($.target?.closest?.(".fig-easing-curve-handle"))return;this.#QQ($,this.#jQ($))})}else{this.#W.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#$Q($,"bounce")}),this.#B.addEventListener("pointerdown",($)=>{$.stopPropagation(),this.#$Q($,"duration")});const Q=this.querySelector(".fig-easing-curve-svg-container");if(Q)Q.addEventListener("pointerdown",($)=>{if($.target?.closest?.(".fig-easing-curve-handle"))return;this.#$Q($,"duration")})}if(this.#O)this.#O.addEventListener("change",(Q)=>{const $=Q.detail,Z=z.PRESETS.find((J)=>J.name===$);if(!Z)return;if(Z.type==="bezier"){if(Z.value)this.#Q.x=Z.value[0],this.#Q.y=Z.value[1],this.#$.x=Z.value[2],this.#$.y=Z.value[3];if(this.#L=$,this.#j!=="bezier")this.#j="bezier",this.#g();else this.#C()}else if(Z.type==="spring"){if(Z.spring)this.#Z={...Z.spring};if(this.#L=$,this.#j!=="spring")this.#j="spring",this.#g();else this.#C()}this.#h("input"),this.#h("change")})}#ZQ(Q){const $=this.#_.getScreenCTM();if(!$)return{x:0,y:0};const Z=$.inverse();return{x:Z.a*Q.clientX+Z.c*Q.clientY+Z.e,y:Z.b*Q.clientX+Z.d*Q.clientY+Z.f}}#jQ(Q){return this.#ZQ(Q).x<=this.#F/2?1:2}#QQ(Q,$){Q.preventDefault(),this.#J=$;const Z=(j)=>{if(!this.#J)return;const _=this.#ZQ(j),K=this.#a(_.x,_.y);if(K.x=Math.round(K.x*100)/100,K.y=Math.round(K.y*100)/100,K.x=Math.max(0,Math.min(1,K.x)),this.#J===1)this.#Q.x=K.x,this.#Q.y=K.y;else this.#$.x=K.x,this.#$.y=K.y;this.#C(),this.#L=this.#y(),this.#r(),this.#h("input")},J=()=>{this.#J=null,document.removeEventListener("pointermove",Z),document.removeEventListener("pointerup",J),this.#h("change")};document.addEventListener("pointermove",Z),document.addEventListener("pointerup",J)}#$Q(Q,$){Q.preventDefault(),this.#J=$;const Z=this.#Z.damping,J=this.#Z.stiffness,j=this.#z,_=Q.clientY,K=Q.clientX,X=(Y)=>{if(!this.#J)return;if($==="bounce"){const B=Y.clientY-_;this.#Z.damping=Math.max(1,Math.round(Z+B*0.15))}else{const B=Y.clientX-K;this.#z=Math.max(0.05,Math.min(0.95,j+B/200)),this.#Z.stiffness=Math.max(10,Math.round(J-B*1.5))}this.#C(),this.#L=this.#y(),this.#r(),this.#h("input")},q=()=>{this.#J=null,document.removeEventListener("pointermove",X),document.removeEventListener("pointerup",q),this.#h("change")};document.addEventListener("pointermove",X),document.addEventListener("pointerup",q)}}customElements.define("fig-easing-curve",z);class n extends HTMLElement{#Q=0;#$=0;#Z=0;#j=1;#K=!1;#J=!1;#_=null;#X=null;#Y=null;#G=null;#W=[];#B={};static get observedAttributes(){return["value","precision","aspect-ratio","fields","perspective","perspective-origin","transform-origin","selected","drag"]}connectedCallback(){this.#j=parseInt(this.getAttribute("precision")||"1"),this.#q(this.getAttribute("aspect-ratio")),this.#N(this.getAttribute("perspective")),this.#O("--perspective-origin",this.getAttribute("perspective-origin")),this.#L(this.getAttribute("transform-origin")),this.#F(this.getAttribute("fields"));const Q=this.getAttribute("value");if(Q)this.#M(Q);this.#D(),this.#z(this.getAttribute("selected")),this.#U()}disconnectedCallback(){if(this.#K=!1,this.#Y)window.removeEventListener("keydown",this.#Y),window.removeEventListener("keyup",this.#G)}#q(Q){if(Q&&Q.trim())this.style.setProperty("--aspect-ratio",Q.trim());else this.style.removeProperty("--aspect-ratio")}#N(Q){if(Q&&Q.trim())this.style.setProperty("--perspective",Q.trim());else this.style.removeProperty("--perspective")}#O(Q,$){if($&&$.trim())this.style.setProperty(Q,$.trim());else this.style.removeProperty(Q)}#L(Q){if(!Q||!Q.trim()){this.style.removeProperty("--transform-origin");return}const $=Q.trim().split(/\s+/);if($.length===2)this.style.setProperty("--transform-origin",`${$[0]} ${$[1]} -50cqi`);else this.style.setProperty("--transform-origin",Q.trim())}#U(){if(!this.#X)return;this.#X.style.cursor=this.#A?"":"default"}#z(Q){if(!this.#_)return;const $=this.#_.querySelectorAll(".fig-3d-rotate-face"),Z=Q?Q.trim().toLowerCase():"";for(let J of $)J.classList.toggle("selected",Z!==""&&J.classList.contains(Z))}#F(Q){if(!Q||!Q.trim()){this.#W=[];return}const $=["rotateX","rotateY","rotateZ"];this.#W=Q.split(",").map((Z)=>Z.trim()).filter((Z)=>$.includes(Z))}attributeChangedCallback(Q,$,Z){if(Q==="aspect-ratio"){this.#q(Z);return}if(Q==="perspective"){this.#N(Z);return}if(Q==="perspective-origin"){this.#O("--perspective-origin",Z);return}if(Q==="transform-origin"){this.#L(Z);return}if(Q==="selected"){this.#z(Z);return}if(Q==="drag"){this.#U();return}if(Q==="fields"){if(this.#F(Z),this.#_)this.#D();return}if(!this.#_)return;if(Q==="value"&&Z){if(this.#K)return;this.#M(Z),this.#E(),this.#T()}if(Q==="precision")this.#j=parseInt(Z||"1")}get value(){const Q=this.#j;return`rotateX(${this.#Q.toFixed(Q)}deg) rotateY(${this.#$.toFixed(Q)}deg) rotateZ(${this.#Z.toFixed(Q)}deg)`}set value(Q){this.setAttribute("value",Q)}get rotateX(){return this.#Q}get rotateY(){return this.#$}get rotateZ(){return this.#Z}#M(Q){const $=Q.match(/rotateX\(\s*(-?[\d.]+)\s*deg\s*\)/),Z=Q.match(/rotateY\(\s*(-?[\d.]+)\s*deg\s*\)/),J=Q.match(/rotateZ\(\s*(-?[\d.]+)\s*deg\s*\)/);if($)this.#Q=parseFloat($[1]);if(Z)this.#$=parseFloat(Z[1]);if(J)this.#Z=parseFloat(J[1])}#D(){const Q={rotateX:"X",rotateY:"Y",rotateZ:"Z"},$={rotateX:this.#Q,rotateY:this.#$,rotateZ:this.#Z},Z=this.#W.map((J)=>`<fig-input-number
|
|
215
215
|
name="${J}"
|
|
216
216
|
step="1"
|
|
217
217
|
precision="1"
|
|
@@ -229,7 +229,7 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
229
229
|
<div class="fig-3d-rotate-face bottom"></div>
|
|
230
230
|
</div>
|
|
231
231
|
</div>
|
|
232
|
-
</div>${Z}`,this.#X=this.querySelector(".fig-3d-rotate-container"),this.#_=this.querySelector(".fig-3d-rotate-cube"),this.#B={};for(let J of this.#W){const j=this.querySelector(`fig-input-number[name="${J}"]`);if(j){this.#B[J]=j;const _=(K)=>{K.stopPropagation();const X=parseFloat(K.target.value);if(isNaN(X))return;if(J==="rotateX")this.#Q=X;else if(J==="rotateY")this.#$=X;else if(J==="rotateZ")this.#Z=X;this.#
|
|
232
|
+
</div>${Z}`,this.#X=this.querySelector(".fig-3d-rotate-container"),this.#_=this.querySelector(".fig-3d-rotate-cube"),this.#B={};for(let J of this.#W){const j=this.querySelector(`fig-input-number[name="${J}"]`);if(j){this.#B[J]=j;const _=(K)=>{K.stopPropagation();const X=parseFloat(K.target.value);if(isNaN(X))return;if(J==="rotateX")this.#Q=X;else if(J==="rotateY")this.#$=X;else if(J==="rotateZ")this.#Z=X;this.#E(),this.#H(K.type)};j.addEventListener("input",_),j.addEventListener("change",_)}}this.#E(),this.#S()}#T(){const Q={rotateX:this.#Q,rotateY:this.#$,rotateZ:this.#Z};for(let $ of this.#W){const Z=this.#B[$];if(Z)Z.setAttribute("value",Q[$].toFixed(this.#j))}}#E(){if(!this.#_)return;this.#_.style.transform=`rotateX(${this.#Q}deg) rotateY(${this.#$}deg) rotateZ(${this.#Z}deg)`}#H(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{value:this.value,rotateX:this.#Q,rotateY:this.#$,rotateZ:this.#Z}}))}#R(Q){if(!this.#J)return Q;return Math.round(Q/15)*15}#S(){this.#X.addEventListener("pointerdown",(Q)=>this.#f(Q)),this.#Y=(Q)=>{if(Q.key==="Shift")this.#J=!0},this.#G=(Q)=>{if(Q.key==="Shift")this.#J=!1},window.addEventListener("keydown",this.#Y),window.addEventListener("keyup",this.#G)}get#A(){const Q=this.getAttribute("drag");return Q===null||Q.toLowerCase()!=="false"}#f(Q){if(!this.#A)return;Q.preventDefault(),this.#K=!0,this.#X.classList.add("dragging"),this.#X.setPointerCapture(Q.pointerId);const{clientX:$,clientY:Z}=Q,J=this.#Q,j=this.#$,_=(X)=>{if(!this.#K)return;if(X.buttons===0){K();return}const q=X.clientX-$,Y=X.clientY-Z;this.#$=this.#R(j+q*0.5),this.#Q=this.#R(J-Y*0.5),this.#E(),this.#T(),this.setAttribute("value",this.value),this.#H("input")},K=()=>{if(!this.#K)return;this.setAttribute("value",this.value),this.#K=!1,this.#X.classList.remove("dragging"),this.#X.removeEventListener("pointermove",_),this.#X.removeEventListener("pointerup",K),this.#X.removeEventListener("pointercancel",K),this.#X.removeEventListener("lostpointercapture",K),this.#H("change")};this.#X.addEventListener("pointermove",_),this.#X.addEventListener("pointerup",K),this.#X.addEventListener("pointercancel",K),this.#X.addEventListener("lostpointercapture",K)}}customElements.define("fig-3d-rotate",n);class C extends HTMLElement{#Q=50;#$=50;#Z=0;#j=null;#K=[];#J=null;#_=null;#X=null;#Y=!1;#G=!1;#W=null;#B=null;#q=null;static SNAP_POINTS=[0,16.6667,33.3333,50,66.6667,83.3333,100];static get observedAttributes(){return["value","precision","aspect-ratio","drag","fields"]}connectedCallback(){this.#Z=parseInt(this.getAttribute("precision")||"0"),this.#L(this.getAttribute("aspect-ratio")),this.#D(this.getAttribute("value")),this.#T(),this.#U(),this.#H()}disconnectedCallback(){this.#Y=!1,this.#d()}get value(){const Q=this.#Z;return`${this.#Q.toFixed(Q)}% ${this.#$.toFixed(Q)}%`}set value(Q){this.setAttribute("value",Q)}attributeChangedCallback(Q,$,Z){if(Q==="aspect-ratio"){this.#L(Z);return}if(Q==="drag"){this.#U();return}if(Q==="fields"){this.#T(),this.#U(),this.#H();return}if(Q==="precision"){this.#Z=parseInt(Z||"0"),this.#E(),this.#H();return}if(Q==="value"){if(this.#G||this.#Y)return;this.#D(Z),this.#S(),this.#A(),this.#E()}}get#N(){const Q=this.getAttribute("drag");return Q===null||Q.toLowerCase()!=="false"}get#O(){const Q=this.getAttribute("fields");if(Q===null)return!1;return Q.toLowerCase()!=="false"}#L(Q){if(Q&&Q.trim())this.style.setProperty("--aspect-ratio",Q.trim());else this.style.removeProperty("--aspect-ratio")}#U(){if(!this.#j)return;this.#j.classList.toggle("drag-disabled",!this.#N)}#z(Q){return Math.max(0,Math.min(100,Q))}#F(Q,$){const Z=(Q||"").trim().toLowerCase();if(!Z)return $==="x"?this.#Q:this.#$;const J=$==="x"?{left:0,center:50,right:100}:{top:0,center:50,bottom:100};if(Z in J)return J[Z];const j=Number.parseFloat(Z.replace("%",""));if(Number.isFinite(j))return j;return $==="x"?this.#Q:this.#$}#M(Q){const $=Q.trim().replace(/,/g," ").split(/\s+/).filter(Boolean);if($.length<1)return;if($.length===1){const Z=this.#F($[0],"x");this.#Q=Z,this.#$=Z;return}this.#Q=this.#F($[0],"x"),this.#$=this.#F($[1],"y")}#D(Q){const $=typeof Q==="string"?Q.trim():"";if(!$){this.#Q=50,this.#$=50;return}this.#M($)}#T(){const Q=Array.from({length:9},(j,_)=>{const K=_%3,X=Math.floor(_/3);return`<span class="origin-grid-cell" data-col="${K}" data-row="${X}">
|
|
233
233
|
<span class="origin-grid-dot"></span>
|
|
234
234
|
</span>`}).join(""),$=this.#Q.toFixed(this.#Z),Z=this.#$.toFixed(this.#Z),J=this.#O?`<div class="origin-values">
|
|
235
235
|
<fig-input-number name="x" value="${$}" step="1" units="%"><span slot="prepend">X</span></fig-input-number>
|
|
@@ -240,7 +240,7 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
240
240
|
<span class="origin-grid-handle"></span>
|
|
241
241
|
</div>
|
|
242
242
|
</div>
|
|
243
|
-
${J}`,this.#j=this.querySelector(".origin-grid"),this.#K=Array.from(this.querySelectorAll(".origin-grid-cell")),this.#J=this.querySelector(".origin-grid-handle"),this.#_=this.querySelector('fig-input-number[name="x"]'),this.#X=this.querySelector('fig-input-number[name="y"]'),this.#
|
|
243
|
+
${J}`,this.#j=this.querySelector(".origin-grid"),this.#K=Array.from(this.querySelectorAll(".origin-grid-cell")),this.#J=this.querySelector(".origin-grid-handle"),this.#_=this.querySelector('fig-input-number[name="x"]'),this.#X=this.querySelector('fig-input-number[name="y"]'),this.#S(),this.#A(),this.#E(),this.#x()}#E(){const Q=this.#Q.toFixed(this.#Z),$=this.#$.toFixed(this.#Z);if(this.#_)this.#_.setAttribute("value",Q);if(this.#X)this.#X.setAttribute("value",$)}#H(){const Q=this.value;if(this.getAttribute("value")===Q)return;this.#G=!0,this.setAttribute("value",Q),this.#G=!1}#R(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{value:this.value,x:this.#Q,y:this.#$}}))}#S(){if(!this.#J)return;const Q=($)=>16.6667+this.#z($)/100*66.6667;this.#J.style.left=`${Q(this.#Q)}%`,this.#J.style.top=`${Q(this.#$)}%`}#A(){if(!this.#J)return;const Q=this.#Q<0||this.#Q>100,$=this.#$<0||this.#$>100,Z=this.#Q<0,J=this.#Q>100,j=this.#$<0,_=this.#$>100;this.#J.classList.toggle("beyond-bounds-x",Q),this.#J.classList.toggle("beyond-bounds-y",$),this.#J.classList.toggle("overflow-left",Z),this.#J.classList.toggle("overflow-right",J),this.#J.classList.toggle("overflow-up",j),this.#J.classList.toggle("overflow-down",_)}#f(Q,$){if(!this.#j)return null;const Z=this.#j.getBoundingClientRect(),J=(Q-Z.left)/Math.max(Z.width,1),j=($-Z.top)/Math.max(Z.height,1);if(J<0||J>1||j<0||j>1)return null;const _=Math.max(0,Math.min(2,Math.floor(J*3))),K=Math.max(0,Math.min(2,Math.floor(j*3)));return this.#K.find((X)=>Number(X.getAttribute("data-col"))===_&&Number(X.getAttribute("data-row"))===K)}#P(){for(let Q of this.#K)Q.classList.remove("is-hovered")}#m(Q){if(this.#P(),Q)Q.classList.add("is-hovered")}#b(Q,$,Z){const J=Number(Q),j=Number($);if(!Number.isFinite(J)||!Number.isFinite(j))return;if(J===this.#Q&&j===this.#$&&Z==="input")return;this.#Q=J,this.#$=j,this.#S(),this.#A(),this.#E(),this.#H(),this.#R(Z)}#y(Q,$){if(!this.#j)return{x:this.#Q,y:this.#$};const Z=this.#j.getBoundingClientRect(),J=Z.width/6,j=Z.height/6,_=Math.max(1,Z.width-J*2),K=Math.max(1,Z.height-j*2),X=(Q-(Z.left+J))/_,q=($-(Z.top+j))/K;return{x:X*100,y:q*100}}#V(Q,$){if(!this.#j)return{x:50,y:50};const Z=this.#j.getBoundingClientRect(),J=(Q-Z.left)/Math.max(Z.width,1)*3,j=($-Z.top)/Math.max(Z.height,1)*3,_=Math.max(0,Math.min(2,Math.floor(J))),K=Math.max(0,Math.min(2,Math.floor(j)));return{x:_*50,y:K*50}}#c(Q){let Z=Q,J=1/0;for(let j of C.SNAP_POINTS){const _=Math.abs(Q-j);if(_<J)J=_,Z=j}return J<=2.5?Z:Q}#g(Q,$){if(!$)return Q;return{x:this.#c(Q.x),y:this.#c(Q.y)}}#d(){if(!this.#j||!this.#B||!this.#q)return;this.#j.removeEventListener("pointermove",this.#B),this.#j.removeEventListener("pointerup",this.#q),this.#j.removeEventListener("pointercancel",this.#q),this.#j.removeEventListener("lostpointercapture",this.#q),this.#B=null,this.#q=null}#w(Q){if(!this.#j||!this.#N)return;Q.preventDefault(),this.#Y=!0,this.#W=Q.pointerId;const{clientX:$,clientY:Z}=Q,J=3;let j=!1;this.#j.setPointerCapture(Q.pointerId),this.#B=(_)=>{if(!this.#Y||_.pointerId!==this.#W)return;const K=_.clientX-$,X=_.clientY-Z,q=Math.hypot(K,X);if(!j&&q<J)return;if(!j)j=!0,this.#j.classList.add("is-dragging"),this.#P();const Y=this.#g(this.#y(_.clientX,_.clientY),_.shiftKey);this.#b(Y.x,Y.y,"input")},this.#q=(_)=>{if(!this.#Y||_.pointerId!==this.#W)return;if(this.#Y=!1,this.#W=null,this.#j.classList.remove("is-dragging"),this.#P(),this.#d(),!j){const K=this.#V($,Z);this.#b(K.x,K.y,"input")}this.#R("change")},this.#j.addEventListener("pointermove",this.#B),this.#j.addEventListener("pointerup",this.#q),this.#j.addEventListener("pointercancel",this.#q),this.#j.addEventListener("lostpointercapture",this.#q)}#x(){if(!this.#j||!this.#J)return;this.#j.addEventListener("pointerdown",($)=>{const Z=this.#f($.clientX,$.clientY);if(this.#m(Z),this.#N){this.#w($);return}const J=this.#V($.clientX,$.clientY);this.#b(J.x,J.y,"input"),this.#R("change")}),this.#j.addEventListener("pointermove",($)=>{if(this.#Y)return;const Z=this.#f($.clientX,$.clientY);this.#m(Z)}),this.#j.addEventListener("pointerleave",()=>{this.#P()});const Q=($,Z)=>{if(!$)return;const J=(j)=>{const _=Number.parseFloat(j.target.value);if(!Number.isFinite(_))return;if(Z==="x")this.#b(_,this.#$,"input");else this.#b(this.#Q,_,"input")};$.addEventListener("input",J),$.addEventListener("change",J),$.addEventListener("focusout",()=>{this.#R("change")})};Q(this.#_,"x"),Q(this.#X,"y")}}customElements.define("fig-origin-grid",C);class a extends HTMLElement{constructor(){super();this.position={x:0.5,y:0.5},this.isDragging=!1,this.isShiftHeld=!1,this.plane=null,this.cursor=null,this.xInput=null,this.yInput=null,this.coordinates="screen",this.#Q=!1}#Q=!1;connectedCallback(){requestAnimationFrame(()=>{this.precision=this.getAttribute("precision")||3,this.precision=parseInt(this.precision),this.transform=this.getAttribute("transform")||1,this.transform=Number(this.transform),this.text=this.getAttribute("text")==="true",this.coordinates=this.getAttribute("coordinates")||"screen",this.#Z(),this.#K(),this.#N(),this.#Q=!0})}#$(Q){return this.coordinates==="math"?1-Q:Q}disconnectedCallback(){this.#J()}#Z(){this.innerHTML=this.#j()}#j(){return`
|
|
244
244
|
<div class="fig-input-joystick-plane-container" tabindex="0">
|
|
245
245
|
<div class="fig-input-joystick-plane">
|
|
246
246
|
<div class="fig-input-joystick-guides"></div>
|
|
@@ -265,7 +265,7 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
265
265
|
units="%">
|
|
266
266
|
<span slot="prepend">Y</span>
|
|
267
267
|
</fig-input-number>`:""}
|
|
268
|
-
`}#K(){if(this.plane=this.querySelector(".fig-input-joystick-plane"),this.cursor=this.querySelector(".fig-input-joystick-handle"),this.xInput=this.querySelector("fig-input-number[name='x']"),this.yInput=this.querySelector("fig-input-number[name='y']"),this.plane.addEventListener("mousedown",this.#O.bind(this)),this.plane.addEventListener("touchstart",this.#L.bind(this)),window.addEventListener("keydown",this.#U.bind(this)),window.addEventListener("keyup",this.#
|
|
268
|
+
`}#K(){if(this.plane=this.querySelector(".fig-input-joystick-plane"),this.cursor=this.querySelector(".fig-input-joystick-handle"),this.xInput=this.querySelector("fig-input-number[name='x']"),this.yInput=this.querySelector("fig-input-number[name='y']"),this.plane.addEventListener("mousedown",this.#O.bind(this)),this.plane.addEventListener("touchstart",this.#L.bind(this)),window.addEventListener("keydown",this.#U.bind(this)),window.addEventListener("keyup",this.#z.bind(this)),this.text&&this.xInput&&this.yInput)this.xInput.addEventListener("input",this.#_.bind(this)),this.yInput.addEventListener("input",this.#X.bind(this))}#J(){if(this.plane)this.plane.removeEventListener("mousedown",this.#O),this.plane.removeEventListener("touchstart",this.#L);if(window.removeEventListener("keydown",this.#U),window.removeEventListener("keyup",this.#z),this.text&&this.xInput&&this.yInput)this.xInput.removeEventListener("input",this.#_),this.yInput.removeEventListener("input",this.#X)}#_(Q){Q.stopPropagation(),this.position.x=Number(Q.target.value)/100,this.#N(),this.#B(),this.#q()}#X(Q){Q.stopPropagation(),this.position.y=Number(Q.target.value)/100,this.#N(),this.#B(),this.#q()}#Y(Q){if(!this.isShiftHeld)return Q;if(Q<0.1)return 0;if(Q>0.9)return 1;if(Q>0.4&&Q<0.6)return 0.5;return Q}#G(Q,$){if(!this.isShiftHeld)return{x:Q,y:$};if(Math.abs(Q-$)<0.1)return{x:(Q+$)/2,y:(Q+$)/2};if(Math.abs(1-Q-$)<0.1)return{x:Q,y:1-Q};return{x:Q,y:$}}#W(Q){const $=this.plane.getBoundingClientRect();let Z=Math.max(0,Math.min(1,(Q.clientX-$.left)/$.width)),J=Math.max(0,Math.min(1,(Q.clientY-$.top)/$.height)),j=this.coordinates==="math"?1-J:J;Z=this.#Y(Z),j=this.#Y(j);const _=this.#G(Z,j);this.position=_;const K=this.#$(_.y);if(this.cursor.style.left=`${_.x*100}%`,this.cursor.style.top=`${K*100}%`,this.text&&this.xInput&&this.yInput)this.xInput.setAttribute("value",Math.round(_.x*100)),this.yInput.setAttribute("value",Math.round(_.y*100));this.#B()}#B(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0}))}#q(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}))}#N(){const Q=this.#$(this.position.y);if(this.cursor)this.cursor.style.left=`${this.position.x*100}%`,this.cursor.style.top=`${Q*100}%`;if(this.text&&this.xInput&&this.yInput)this.xInput.setAttribute("value",Math.round(this.position.x*100)),this.yInput.setAttribute("value",Math.round(this.position.y*100))}#O(Q){this.isDragging=!0,this.#W(Q),this.plane.style.cursor="grabbing";const $=(J)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#W(J)},Z=()=>{this.isDragging=!1,this.plane.classList.remove("dragging"),this.plane.style.cursor="",window.removeEventListener("mousemove",$),window.removeEventListener("mouseup",Z),this.#q()};window.addEventListener("mousemove",$),window.addEventListener("mouseup",Z)}#L(Q){Q.preventDefault(),this.isDragging=!0,this.#W(Q.touches[0]);const $=(J)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#W(J.touches[0])},Z=()=>{this.isDragging=!1,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",$),window.removeEventListener("touchend",Z),this.#q()};window.addEventListener("touchmove",$),window.addEventListener("touchend",Z)}#U(Q){if(Q.key==="Shift")this.isShiftHeld=!0}#z(Q){if(Q.key==="Shift")this.isShiftHeld=!1}focus(){this.querySelector(".fig-input-joystick-plane-container")?.focus()}static get observedAttributes(){return["value","precision","transform","text","coordinates"]}get value(){return[Math.round(this.position.x*100),Math.round(this.position.y*100)]}set value(Q){const $=Q.toString().split(",").map((Z)=>{const J=parseFloat(Z.replace(/%/g,"").trim());return isNaN(J)?0.5:J/100});if(this.position={x:$[0]??0.5,y:$[1]??0.5},this.#Q)this.#N()}attributeChangedCallback(Q,$,Z){if(Q==="value"){if(this.isDragging)return;this.value=Z}if(Q==="precision")this.precision=parseInt(Z);if(Q==="transform")this.transform=Number(Z);if(Q==="text"&&Z!==$)this.text=Z.toLowerCase()==="true",this.#Z();if(Q==="coordinates")this.coordinates=Z||"screen",this.#N()}}customElements.define("fig-input-joystick",a);class e extends HTMLElement{#Q;#$;#Z=null;#j;constructor(){super();this.angle=0,this.#Q=1,this.#$=0,this.isDragging=!1,this.isShiftHeld=!1,this.handle=null,this.angleInput=null,this.plane=null,this.units="\xB0",this.min=null,this.max=null,this.showRotations=!1,this.rotationSpan=null,this.#j=this.#O.bind(this)}connectedCallback(){requestAnimationFrame(()=>{this.precision=this.getAttribute("precision")||1,this.precision=parseInt(this.precision),this.text=this.getAttribute("text")==="true";let Q=this.getAttribute("units")||"\xB0";if(Q==="deg")Q="\xB0";if(this.units=Q,this.min=this.hasAttribute("min")?Number(this.getAttribute("min")):null,this.max=this.hasAttribute("max")?Number(this.getAttribute("max")):null,this.showRotations=this.getAttribute("show-rotations")==="true",this.#K(),this.#q(),this.#E(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#N()}#K(){this.innerHTML=this.#J()}#J(){const Q=this.#Y(),$=this.min!==null?`min="${this.min}"`:"",Z=this.max!==null?`max="${this.max}"`:"";return`
|
|
269
269
|
<div class="fig-input-angle-plane" tabindex="0">
|
|
270
270
|
<div class="fig-input-angle-handle"></div>
|
|
271
271
|
</div>
|
|
@@ -278,7 +278,7 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
278
278
|
units="${this.units}">
|
|
279
279
|
${this.showRotations?'<span slot="append" class="fig-input-angle-rotations"></span>':""}
|
|
280
280
|
</fig-input-number>`:""}
|
|
281
|
-
`}#_(){const Q=Math.abs(this.#G(this.angle));return Math.floor(Q/360)}#X(){if(!this.rotationSpan)return;const Q=this.#_();if(Q>1)this.rotationSpan.textContent=`\xD7${Q}`,this.rotationSpan.style.display="";else this.rotationSpan.textContent="",this.rotationSpan.style.display="none"}#q(){switch(this.units){case"rad":return 0.01;case"turn":return 0.001;default:return 0.1}}#G(Q){switch(this.units){case"rad":return Q*180/Math.PI;case"turn":return Q*360;default:return Q}}#W(Q){switch(this.units){case"rad":return Q*Math.PI/180;case"turn":return Q/360;default:return Q}}#B(Q,$,Z){let J;switch($){case"rad":J=Q*180/Math.PI;break;case"turn":J=Q*360;break;default:J=Q}switch(Z){case"rad":return J*Math.PI/180;case"turn":return J/360;default:return J}}#Y(){if(this.handle=this.querySelector(".fig-input-angle-handle"),this.plane=this.querySelector(".fig-input-angle-plane"),this.angleInput=this.querySelector("fig-input-number[name='angle']"),this.rotationSpan=this.querySelector(".fig-input-angle-rotations"),this.#X(),this.plane.addEventListener("mousedown",this.#S.bind(this)),this.plane.addEventListener("touchstart",this.#T.bind(this)),window.addEventListener("keydown",this.#R.bind(this)),window.addEventListener("keyup",this.#A.bind(this)),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#L.bind(this));this.addEventListener("change",this.#j,!0)}#N(){if(this.plane?.removeEventListener("mousedown",this.#S),this.plane?.removeEventListener("touchstart",this.#T),window.removeEventListener("keydown",this.#R),window.removeEventListener("keyup",this.#A),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#L);this.removeEventListener("change",this.#j,!0)}#O(Q){if(!Q.target?.matches?.("input"))return;const Z=Q.target.value.match(/^(-?\d*\.?\d+)\s*(turn|rad|deg|°)$/i);if(Z){const J=parseFloat(Z[1]);let j=Z[2].toLowerCase();if(j==="deg")j="\xB0";if(j!==this.units){const _=this.#B(J,j,this.units);Q.target.value=String(_)}}}#L(Q){Q.stopPropagation(),this.angle=Number(Q.target.value),this.#U(),this.#k(),this.#X(),this.#z(),this.#H()}#U(){const $=this.#G(this.angle)*Math.PI/180;this.#Q=Math.cos($),this.#$=Math.sin($)}#E(Q){if(!this.isShiftHeld)return Q;const $=45;return Math.round(Q/$)*$}#F(Q){const $=this.plane.getBoundingClientRect(),Z=$.left+$.width/2,J=$.top+$.height/2,j=Q.clientX-Z,_=Q.clientY-J;return Math.atan2(_,j)*180/Math.PI}#M(Q){let Z=(this.#F(Q)%360+360)%360;if(Z=this.#E(Z),this.min!==null||this.max!==null)this.angle=this.#W(Z);else if(this.#Z===null){this.#Z=Z;const _=(this.#G(this.angle)%360+360)%360;let K=Z-_;if(K>180)K-=360;if(K<-180)K+=360;this.angle+=this.#W(K)}else{let j=Z-this.#Z;if(j>180)j-=360;if(j<-180)j+=360;this.angle+=this.#W(j),this.#Z=Z}if(this.#U(),this.#k(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#X(),this.#z()}#z(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0}))}#H(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}))}#k(){if(this.handle){const $=this.#G(this.angle)*Math.PI/180,Z=this.plane.offsetWidth/2-this.handle.offsetWidth/2,J=Math.cos($)*Z,j=Math.sin($)*Z;this.handle.style.transform=`translate(${J}px, ${j}px)`}}#S(Q){this.isDragging=!0,this.#Z=null,this.#M(Q);const $=(J)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#M(J)},Z=()=>{this.isDragging=!1,this.#Z=null,this.plane.classList.remove("dragging"),window.removeEventListener("mousemove",$),window.removeEventListener("mouseup",Z),this.#H()};window.addEventListener("mousemove",$),window.addEventListener("mouseup",Z)}#T(Q){Q.preventDefault(),this.isDragging=!0,this.#Z=null,this.#M(Q.touches[0]);const $=(J)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#M(J.touches[0])},Z=()=>{this.isDragging=!1,this.#Z=null,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",$),window.removeEventListener("touchend",Z),this.#H()};window.addEventListener("touchmove",$),window.addEventListener("touchend",Z)}#R(Q){if(Q.key==="Shift")this.isShiftHeld=!0}#A(Q){if(Q.key==="Shift")this.isShiftHeld=!1}focus(){this.plane?.focus()}static get observedAttributes(){return["value","precision","text","min","max","units","show-rotations"]}get value(){return this.angle}get adjacent(){return this.#Q}get opposite(){return this.#$}set value(Q){if(isNaN(Q)){console.error("Invalid value: must be a number.");return}if(this.angle=Q,this.#U(),this.#k(),this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#X()}attributeChangedCallback(Q,$,Z){switch(Q){case"value":if(this.isDragging)break;this.value=Number(Z);break;case"precision":this.precision=parseInt(Z);break;case"text":if(Z!==$){if(this.text=Z?.toLowerCase()==="true",this.plane)this.#K(),this.#Y(),this.#k()}break;case"units":{let J=Z||"\xB0";if(J==="deg")J="\xB0";if(this.units=J,this.plane)this.#K(),this.#Y(),this.#k();break}case"min":if(this.min=Z!==null?Number(Z):null,this.plane)this.#K(),this.#Y(),this.#k();break;case"max":if(this.max=Z!==null?Number(Z):null,this.plane)this.#K(),this.#Y(),this.#k();break;case"show-rotations":if(this.showRotations=Z==="true",this.plane)this.#K(),this.#Y(),this.#k();break}}}customElements.define("fig-input-angle",e);class QQ extends HTMLElement{connectedCallback(){const Q=this.getAttribute("duration");if(Q)this.style.setProperty("--shimmer-duration",Q)}static get observedAttributes(){return["duration","playing"]}get playing(){return this.getAttribute("playing")!=="false"}set playing(Q){if(Q)this.removeAttribute("playing");else this.setAttribute("playing","false")}attributeChangedCallback(Q,$,Z){if(Q==="duration")this.style.setProperty("--shimmer-duration",Z||"1.5s")}}customElements.define("fig-shimmer",QQ);class $Q extends HTMLElement{static get observedAttributes(){return["open","visible"]}#Q=null;#$=null;connectedCallback(){requestAnimationFrame(()=>{this.#Z()})}disconnectedCallback(){if(this.#Q&&this.#$)this.#Q.removeEventListener("click",this.#$)}#Z(){const Q=this.querySelector(":scope > .fig-layer-row");if(!Q)return;if(Q.querySelector(".fig-layer-chevron"))return;this.#Q=document.createElement("span"),this.#Q.className="fig-layer-chevron",Q.prepend(this.#Q),this.#$=this.#j.bind(this),this.#Q.addEventListener("click",this.#$)}#j(Q){Q.stopPropagation(),this.open=!this.open}get open(){const Q=this.getAttribute("open");return Q!==null&&Q!=="false"}set open(Q){const $=this.open;if(Q)this.setAttribute("open","true");else this.setAttribute("open","false");if($!==Q)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:Q},bubbles:!0}))}get visible(){return this.getAttribute("visible")!=="false"}set visible(Q){const $=this.visible;if(Q)this.setAttribute("visible","true");else this.setAttribute("visible","false");if($!==Q)this.dispatchEvent(new CustomEvent("visibilitychange",{detail:{visible:Q},bubbles:!0}))}attributeChangedCallback(Q,$,Z){if($===Z)return;if(Q==="open"){const J=Z!==null&&Z!=="false";this.dispatchEvent(new CustomEvent("openchange",{detail:{open:J},bubbles:!0}))}if(Q==="visible"){const J=Z!=="false";this.dispatchEvent(new CustomEvent("visibilitychange",{detail:{visible:J},bubbles:!0}))}}}customElements.define("fig-layer",$Q);class ZQ extends HTMLElement{#Q=null;#$=null;#Z=null;#j="solid";anchorElement=null;#K="solid";#J={h:0,s:0,v:85,a:1};#_={type:"linear",angle:0,centerX:50,centerY:50,stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#X={url:null,scaleMode:"fill",scale:50};#q={url:null,scaleMode:"fill",scale:50};#G={stream:null,snapshot:null};#W={};#B={};#Y=null;#N=null;#O=null;#L=null;#U=!1;constructor(){super()}static get observedAttributes(){return["value","disabled","alpha","mode","experimental"]}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.#E(),this.#F(),this.#M()})}disconnectedCallback(){if(this.#Z)this.#Z.close(),this.#Z.remove()}#E(){const Q=Array.from(this.children).find(($)=>!$.getAttribute("slot")?.startsWith("mode-"));if(!Q)this.#$=document.createElement("fig-chit"),this.#$.setAttribute("background","#D9D9D9"),this.appendChild(this.#$),this.#Q=this.#$;else if(Q.tagName==="FIG-CHIT")this.#$=Q,this.#Q=Q;else this.#Q=Q,this.#$=null;if(this.#Q.addEventListener("click",($)=>{if(this.hasAttribute("disabled"))return;$.stopPropagation(),$.preventDefault(),this.#H()}),this.#$)requestAnimationFrame(()=>{const $=this.#$.querySelector('input[type="color"]');if($)$.style.pointerEvents="none"})}#F(){const Q=this.getAttribute("value");if(!Q)return;const $=["solid","gradient","image","video","webcam"];try{const Z=JSON.parse(Q);if(Z.type)this.#K=Z.type;if(Z.color){if(typeof Z.color==="string")this.#J=this.#x(Z.color);else if(typeof Z.color==="object"&&Z.color.h!==void 0)this.#J=Z.color}if(Z.opacity!==void 0)this.#J.a=Z.opacity/100;if(Z.gradient)this.#_={...this.#_,...Z.gradient};if(Z.image)this.#X={...this.#X,...Z.image};if(Z.video)this.#q={...this.#q,...Z.video};if(Z.type&&!$.includes(Z.type)){const{type:J,...j}=Z;this.#B[Z.type]=j}}catch(Z){if(Q.startsWith("#"))this.#K="solid",this.#J=this.#x(Q)}}#M(){if(!this.#$)return;let Q,$="cover",Z="center";switch(this.#K){case"solid":Q=this.#C(this.#J);break;case"gradient":Q=this.#v();break;case"image":if(this.#X.url){Q=`url(${this.#X.url})`;const j=this.#z(this.#X.scaleMode,this.#X.scale);$=j.size,Z=j.position}else Q="";break;case"video":if(this.#q.url){Q=`url(${this.#q.url})`;const j=this.#z(this.#q.scaleMode,this.#q.scale);$=j.size,Z=j.position}else Q="";break;default:Q=this.#W[this.#K]?.element?.getAttribute("chit-background")||"#D9D9D9"}if(this.#$.setAttribute("background",Q),this.#$.style.setProperty("--chit-bg-size",$),this.#$.style.setProperty("--chit-bg-position",Z),this.#K==="solid")this.#$.setAttribute("alpha",this.#J.a);else this.#$.removeAttribute("alpha")}#z(Q,$){switch(Q){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${$}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#H(){if(!this.#Z)this.#k();this.#S(this.#K),this.#Z.open=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#R(),this.#A()})})}#k(){this.#W={},this.querySelectorAll('[slot^="mode-"]').forEach((W)=>{const U=W.getAttribute("slot").slice(5);this.#W[U]={element:W,label:W.getAttribute("label")||U.charAt(0).toUpperCase()+U.slice(1)}}),this.#Z=document.createElement("dialog",{is:"fig-popup"}),this.#Z.setAttribute("is","fig-popup"),this.#Z.setAttribute("drag","true"),this.#Z.setAttribute("handle","fig-header"),this.#Z.setAttribute("autoresize","false"),this.#Z.classList.add("fig-fill-picker-dialog"),this.#Z.anchor=this.anchorElement||this.#Q;const Q=this.getAttribute("dialog-position")||"left";this.#Z.setAttribute("position",Q);const $=["solid","gradient","image","video","webcam"],Z={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},J=this.getAttribute("mode");let j;if(J){if(j=J.split(",").map((U)=>U.trim().toLowerCase()).filter((U)=>$.includes(U)||this.#W[U]),j.length===0)j=[...$]}else j=[...$];const _={...Z};for(let[W,{label:U}]of Object.entries(this.#W))_[W]=U;if(!j.includes(this.#K))this.#K=j[0],this.#j=j[0];const K=this.getAttribute("experimental"),X=K?`experimental="${K}"`:"";let q;if(j.length===1)q=`<h3 class="fig-fill-picker-type-label">${_[j[0]]}</h3>`;else{const W=j.map((U)=>`<option value="${U}">${_[U]}</option>`).join("\n ");q=`<fig-dropdown class="fig-fill-picker-type" ${X} value="${this.#K}">
|
|
281
|
+
`}#_(){const Q=Math.abs(this.#G(this.angle));return Math.floor(Q/360)}#X(){if(!this.rotationSpan)return;const Q=this.#_();if(Q>1)this.rotationSpan.textContent=`\xD7${Q}`,this.rotationSpan.style.display="";else this.rotationSpan.textContent="",this.rotationSpan.style.display="none"}#Y(){switch(this.units){case"rad":return 0.01;case"turn":return 0.001;default:return 0.1}}#G(Q){switch(this.units){case"rad":return Q*180/Math.PI;case"turn":return Q*360;default:return Q}}#W(Q){switch(this.units){case"rad":return Q*Math.PI/180;case"turn":return Q/360;default:return Q}}#B(Q,$,Z){let J;switch($){case"rad":J=Q*180/Math.PI;break;case"turn":J=Q*360;break;default:J=Q}switch(Z){case"rad":return J*Math.PI/180;case"turn":return J/360;default:return J}}#q(){if(this.handle=this.querySelector(".fig-input-angle-handle"),this.plane=this.querySelector(".fig-input-angle-plane"),this.angleInput=this.querySelector("fig-input-number[name='angle']"),this.rotationSpan=this.querySelector(".fig-input-angle-rotations"),this.#X(),this.plane.addEventListener("mousedown",this.#H.bind(this)),this.plane.addEventListener("touchstart",this.#R.bind(this)),window.addEventListener("keydown",this.#S.bind(this)),window.addEventListener("keyup",this.#A.bind(this)),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#L.bind(this));this.addEventListener("change",this.#j,!0)}#N(){if(this.plane?.removeEventListener("mousedown",this.#H),this.plane?.removeEventListener("touchstart",this.#R),window.removeEventListener("keydown",this.#S),window.removeEventListener("keyup",this.#A),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#L);this.removeEventListener("change",this.#j,!0)}#O(Q){if(!Q.target?.matches?.("input"))return;const Z=Q.target.value.match(/^(-?\d*\.?\d+)\s*(turn|rad|deg|°)$/i);if(Z){const J=parseFloat(Z[1]);let j=Z[2].toLowerCase();if(j==="deg")j="\xB0";if(j!==this.units){const _=this.#B(J,j,this.units);Q.target.value=String(_)}}}#L(Q){Q.stopPropagation(),this.angle=Number(Q.target.value),this.#U(),this.#E(),this.#X(),this.#D(),this.#T()}#U(){const $=this.#G(this.angle)*Math.PI/180;this.#Q=Math.cos($),this.#$=Math.sin($)}#z(Q){if(!this.isShiftHeld)return Q;const $=45;return Math.round(Q/$)*$}#F(Q){const $=this.plane.getBoundingClientRect(),Z=$.left+$.width/2,J=$.top+$.height/2,j=Q.clientX-Z,_=Q.clientY-J;return Math.atan2(_,j)*180/Math.PI}#M(Q){let Z=(this.#F(Q)%360+360)%360;if(Z=this.#z(Z),this.min!==null||this.max!==null)this.angle=this.#W(Z);else if(this.#Z===null){this.#Z=Z;const _=(this.#G(this.angle)%360+360)%360;let K=Z-_;if(K>180)K-=360;if(K<-180)K+=360;this.angle+=this.#W(K)}else{let j=Z-this.#Z;if(j>180)j-=360;if(j<-180)j+=360;this.angle+=this.#W(j),this.#Z=Z}if(this.#U(),this.#E(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#X(),this.#D()}#D(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0}))}#T(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0}))}#E(){if(this.handle){const $=this.#G(this.angle)*Math.PI/180,Z=this.plane.offsetWidth/2-this.handle.offsetWidth/2,J=Math.cos($)*Z,j=Math.sin($)*Z;this.handle.style.transform=`translate(${J}px, ${j}px)`}}#H(Q){this.isDragging=!0,this.#Z=null,this.#M(Q);const $=(J)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#M(J)},Z=()=>{this.isDragging=!1,this.#Z=null,this.plane.classList.remove("dragging"),window.removeEventListener("mousemove",$),window.removeEventListener("mouseup",Z),this.#T()};window.addEventListener("mousemove",$),window.addEventListener("mouseup",Z)}#R(Q){Q.preventDefault(),this.isDragging=!0,this.#Z=null,this.#M(Q.touches[0]);const $=(J)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#M(J.touches[0])},Z=()=>{this.isDragging=!1,this.#Z=null,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",$),window.removeEventListener("touchend",Z),this.#T()};window.addEventListener("touchmove",$),window.addEventListener("touchend",Z)}#S(Q){if(Q.key==="Shift")this.isShiftHeld=!0}#A(Q){if(Q.key==="Shift")this.isShiftHeld=!1}focus(){this.plane?.focus()}static get observedAttributes(){return["value","precision","text","min","max","units","show-rotations"]}get value(){return this.angle}get adjacent(){return this.#Q}get opposite(){return this.#$}set value(Q){if(isNaN(Q)){console.error("Invalid value: must be a number.");return}if(this.angle=Q,this.#U(),this.#E(),this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#X()}attributeChangedCallback(Q,$,Z){switch(Q){case"value":if(this.isDragging)break;this.value=Number(Z);break;case"precision":this.precision=parseInt(Z);break;case"text":if(Z!==$){if(this.text=Z?.toLowerCase()==="true",this.plane)this.#K(),this.#q(),this.#E()}break;case"units":{let J=Z||"\xB0";if(J==="deg")J="\xB0";if(this.units=J,this.plane)this.#K(),this.#q(),this.#E();break}case"min":if(this.min=Z!==null?Number(Z):null,this.plane)this.#K(),this.#q(),this.#E();break;case"max":if(this.max=Z!==null?Number(Z):null,this.plane)this.#K(),this.#q(),this.#E();break;case"show-rotations":if(this.showRotations=Z==="true",this.plane)this.#K(),this.#q(),this.#E();break}}}customElements.define("fig-input-angle",e);class QQ extends HTMLElement{connectedCallback(){const Q=this.getAttribute("duration");if(Q)this.style.setProperty("--shimmer-duration",Q)}static get observedAttributes(){return["duration","playing"]}get playing(){return this.getAttribute("playing")!=="false"}set playing(Q){if(Q)this.removeAttribute("playing");else this.setAttribute("playing","false")}attributeChangedCallback(Q,$,Z){if(Q==="duration")this.style.setProperty("--shimmer-duration",Z||"1.5s")}}customElements.define("fig-shimmer",QQ);class $Q extends HTMLElement{static get observedAttributes(){return["open","visible"]}#Q=null;#$=null;connectedCallback(){requestAnimationFrame(()=>{this.#Z()})}disconnectedCallback(){if(this.#Q&&this.#$)this.#Q.removeEventListener("click",this.#$)}#Z(){const Q=this.querySelector(":scope > .fig-layer-row");if(!Q)return;if(Q.querySelector(".fig-layer-chevron"))return;this.#Q=document.createElement("span"),this.#Q.className="fig-layer-chevron",Q.prepend(this.#Q),this.#$=this.#j.bind(this),this.#Q.addEventListener("click",this.#$)}#j(Q){Q.stopPropagation(),this.open=!this.open}get open(){const Q=this.getAttribute("open");return Q!==null&&Q!=="false"}set open(Q){const $=this.open;if(Q)this.setAttribute("open","true");else this.setAttribute("open","false");if($!==Q)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:Q},bubbles:!0}))}get visible(){return this.getAttribute("visible")!=="false"}set visible(Q){const $=this.visible;if(Q)this.setAttribute("visible","true");else this.setAttribute("visible","false");if($!==Q)this.dispatchEvent(new CustomEvent("visibilitychange",{detail:{visible:Q},bubbles:!0}))}attributeChangedCallback(Q,$,Z){if($===Z)return;if(Q==="open"){const J=Z!==null&&Z!=="false";this.dispatchEvent(new CustomEvent("openchange",{detail:{open:J},bubbles:!0}))}if(Q==="visible"){const J=Z!=="false";this.dispatchEvent(new CustomEvent("visibilitychange",{detail:{visible:J},bubbles:!0}))}}}customElements.define("fig-layer",$Q);class ZQ extends HTMLElement{#Q=null;#$=null;#Z=null;#j="solid";anchorElement=null;#K="solid";#J={h:0,s:0,v:85,a:1};#_={type:"linear",angle:0,centerX:50,centerY:50,stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#X={url:null,scaleMode:"fill",scale:50};#Y={url:null,scaleMode:"fill",scale:50};#G={stream:null,snapshot:null};#W={};#B={};#q=null;#N=null;#O=null;#L=null;#U=!1;constructor(){super()}static get observedAttributes(){return["value","disabled","alpha","mode","experimental"]}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.#z(),this.#F(),this.#M()})}disconnectedCallback(){if(this.#Z)this.#Z.close(),this.#Z.remove()}#z(){const Q=Array.from(this.children).find(($)=>!$.getAttribute("slot")?.startsWith("mode-"));if(!Q)this.#$=document.createElement("fig-chit"),this.#$.setAttribute("background","#D9D9D9"),this.appendChild(this.#$),this.#Q=this.#$;else if(Q.tagName==="FIG-CHIT")this.#$=Q,this.#Q=Q;else this.#Q=Q,this.#$=null;if(this.#Q.addEventListener("click",($)=>{if(this.hasAttribute("disabled"))return;$.stopPropagation(),$.preventDefault(),this.#T()}),this.#$)requestAnimationFrame(()=>{const $=this.#$.querySelector('input[type="color"]');if($)$.style.pointerEvents="none"})}#F(){const Q=this.getAttribute("value");if(!Q)return;const $=["solid","gradient","image","video","webcam"];try{const Z=JSON.parse(Q);if(Z.type)this.#K=Z.type;if(Z.color){if(typeof Z.color==="string")this.#J=this.#C(Z.color);else if(typeof Z.color==="object"&&Z.color.h!==void 0)this.#J=Z.color}if(Z.opacity!==void 0)this.#J.a=Z.opacity/100;if(Z.gradient)this.#_={...this.#_,...Z.gradient};if(Z.image)this.#X={...this.#X,...Z.image};if(Z.video)this.#Y={...this.#Y,...Z.video};if(Z.type&&!$.includes(Z.type)){const{type:J,...j}=Z;this.#B[Z.type]=j}}catch(Z){if(Q.startsWith("#"))this.#K="solid",this.#J=this.#C(Q)}}#M(){if(!this.#$)return;let Q,$="cover",Z="center";switch(this.#K){case"solid":Q=this.#I(this.#J);break;case"gradient":Q=this.#g();break;case"image":if(this.#X.url){Q=`url(${this.#X.url})`;const j=this.#D(this.#X.scaleMode,this.#X.scale);$=j.size,Z=j.position}else Q="";break;case"video":if(this.#Y.url){Q=`url(${this.#Y.url})`;const j=this.#D(this.#Y.scaleMode,this.#Y.scale);$=j.size,Z=j.position}else Q="";break;default:Q=this.#W[this.#K]?.element?.getAttribute("chit-background")||"#D9D9D9"}if(this.#$.setAttribute("background",Q),this.#$.style.setProperty("--chit-bg-size",$),this.#$.style.setProperty("--chit-bg-position",Z),this.#K==="solid")this.#$.setAttribute("alpha",this.#J.a);else this.#$.removeAttribute("alpha")}#D(Q,$){switch(Q){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${$}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#T(){if(!this.#Z)this.#E();this.#H(this.#K),this.#Z.open=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#S(),this.#A()})})}#E(){this.#W={},this.querySelectorAll('[slot^="mode-"]').forEach((W)=>{const U=W.getAttribute("slot").slice(5);this.#W[U]={element:W,label:W.getAttribute("label")||U.charAt(0).toUpperCase()+U.slice(1)}}),this.#Z=document.createElement("dialog",{is:"fig-popup"}),this.#Z.setAttribute("is","fig-popup"),this.#Z.setAttribute("drag","true"),this.#Z.setAttribute("handle","fig-header"),this.#Z.setAttribute("autoresize","false"),this.#Z.classList.add("fig-fill-picker-dialog"),this.#Z.anchor=this.anchorElement||this.#Q;const Q=this.getAttribute("dialog-position")||"left";this.#Z.setAttribute("position",Q);const $=["solid","gradient","image","video","webcam"],Z={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},J=this.getAttribute("mode");let j;if(J){if(j=J.split(",").map((U)=>U.trim().toLowerCase()).filter((U)=>$.includes(U)||this.#W[U]),j.length===0)j=[...$]}else j=[...$];const _={...Z};for(let[W,{label:U}]of Object.entries(this.#W))_[W]=U;if(!j.includes(this.#K))this.#K=j[0],this.#j=j[0];const K=this.getAttribute("experimental"),X=K?`experimental="${K}"`:"";let q;if(j.length===1)q=`<h3 class="fig-fill-picker-type-label">${_[j[0]]}</h3>`;else{const W=j.map((U)=>`<option value="${U}">${_[U]}</option>`).join("\n ");q=`<fig-dropdown class="fig-fill-picker-type" ${X} value="${this.#K}">
|
|
282
282
|
${W}
|
|
283
283
|
</fig-dropdown>`}const Y=j.map((W)=>`<div class="fig-fill-picker-tab" data-tab="${W}"></div>`).join("\n ");this.#Z.innerHTML=`
|
|
284
284
|
<fig-header>
|
|
@@ -290,20 +290,20 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
290
290
|
<div class="fig-fill-picker-content">
|
|
291
291
|
${Y}
|
|
292
292
|
</div>
|
|
293
|
-
`,document.body.appendChild(this.#Z);for(let[W,{element:U}]of Object.entries(this.#W)){const G=this.#Z.querySelector(`[data-tab="${W}"]`);if(!G)continue;while(U.firstChild)G.appendChild(U.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:W,container:G}}))}const B=this.#Z.querySelector(".fig-fill-picker-type");if(B)B.addEventListener("change",(W)=>{this.#
|
|
293
|
+
`,document.body.appendChild(this.#Z);for(let[W,{element:U}]of Object.entries(this.#W)){const G=this.#Z.querySelector(`[data-tab="${W}"]`);if(!G)continue;while(U.firstChild)G.appendChild(U.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:W,container:G}}))}const B=this.#Z.querySelector(".fig-fill-picker-type");if(B)B.addEventListener("change",(W)=>{this.#H(W.target.value)});this.#Z.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#Z.open=!1}),this.#Z.addEventListener("close",()=>{this.#h()});const L={solid:()=>this.#R(),gradient:()=>this.#m(),image:()=>this.#d(),video:()=>this.#l(),webcam:()=>this.#u()};for(let[W,U]of Object.entries(L))if(!this.#W[W]&&j.includes(W))U();for(let W of Object.keys(this.#W)){if($.includes(W))continue;const U=this.#Z.querySelector(`[data-tab="${W}"]`);if(!U)continue;U.addEventListener("input",(G)=>{if(G.target===this)return;if(G.stopPropagation(),G.detail)this.#B[W]=G.detail;this.#k()}),U.addEventListener("change",(G)=>{if(G.target===this)return;if(G.stopPropagation(),G.detail)this.#B[W]=G.detail;this.#h()})}}#H(Q){if(!this.#Z?.querySelector(`.fig-fill-picker-tab[data-tab="${Q}"]`))return;this.#j=Q,this.#K=Q;const Z=this.#Z.querySelector(".fig-fill-picker-type");if(Z&&Z.value!==Q)Z.value=Q;this.#Z.querySelectorAll(".fig-fill-picker-tab").forEach((_)=>{if(_.dataset.tab===Q)_.style.display="block";else _.style.display="none"});const j=this.#Z.querySelector(".fig-fill-picker-content");if(j)j.style.padding=this.#W[Q]?"0":"";if(Q==="gradient")requestAnimationFrame(()=>{this.#y()});this.#M(),this.#k()}#R(){const Q=this.#Z.querySelector('[data-tab="solid"]'),$=this.getAttribute("alpha")!=="false";if(Q.innerHTML=`
|
|
294
294
|
<div class="fig-fill-picker-color-area">
|
|
295
295
|
<canvas width="200" height="200"></canvas>
|
|
296
296
|
<div class="fig-fill-picker-handle"></div>
|
|
297
297
|
</div>
|
|
298
298
|
<div class="fig-fill-picker-sliders">
|
|
299
299
|
<fig-slider type="hue" variant="neue" min="0" max="360" value="${this.#J.h}"></fig-slider>
|
|
300
|
-
${$?`<fig-slider type="opacity" variant="neue" text="true" units="%" min="0" max="100" value="${this.#J.a*100}" color="${this.#
|
|
300
|
+
${$?`<fig-slider type="opacity" variant="neue" text="true" units="%" min="0" max="100" value="${this.#J.a*100}" color="${this.#I(this.#J)}"></fig-slider>`:""}
|
|
301
301
|
</div>
|
|
302
302
|
<div class="fig-fill-picker-inputs">
|
|
303
303
|
<fig-button icon variant="ghost" class="fig-fill-picker-eyedropper" title="Pick color from screen"><span class="fig-mask-icon" style="--icon: var(--icon-eyedropper)"></span></fig-button>
|
|
304
|
-
<fig-input-color class="fig-fill-picker-color-input" text="true" picker="false" value="${this.#
|
|
304
|
+
<fig-input-color class="fig-fill-picker-color-input" text="true" picker="false" value="${this.#I(this.#J)}"></fig-input-color>
|
|
305
305
|
</div>
|
|
306
|
-
`,this.#
|
|
306
|
+
`,this.#q=Q.querySelector("canvas"),this.#N=Q.querySelector(".fig-fill-picker-handle"),this.#S(),this.#A(),this.#f(),this.#O=Q.querySelector('fig-slider[type="hue"]'),this.#O.addEventListener("input",(j)=>{this.#J.h=parseFloat(j.target.value),this.#S(),this.#A(),this.#P(),this.#k()}),this.#O.addEventListener("change",()=>{this.#h()}),$)this.#L=Q.querySelector('fig-slider[type="opacity"]'),this.#L.addEventListener("input",(j)=>{this.#J.a=parseFloat(j.target.value)/100,this.#P(),this.#k()}),this.#L.addEventListener("change",()=>{this.#h()});const Z=Q.querySelector(".fig-fill-picker-color-input");Z.addEventListener("input",(j)=>{if(this.#U)return;const _=j.target.value;if(this.#J={...this.#C(_),a:this.#J.a},this.#S(),this.#A(),this.#O)this.#O.setAttribute("value",this.#J.h);this.#k()}),Z.addEventListener("change",()=>{this.#h()});const J=Q.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)J.addEventListener("click",async()=>{try{const _=await new EyeDropper().open();this.#J={...this.#C(_.sRGBHex),a:this.#J.a},this.#S(),this.#A(),this.#P(),this.#k()}catch(j){}});else J.setAttribute("disabled",""),J.title="EyeDropper not supported in this browser"}#S(){if(!this.#q&&this.#Z)this.#q=this.#Z.querySelector('[data-tab="solid"] canvas');if(!this.#q)return;const Q=this.#q.getContext("2d");if(!Q)return;const $=this.#q.width,Z=this.#q.height;Q.clearRect(0,0,$,Z);const J=this.#J.h,j=Q.createLinearGradient(0,0,$,0);j.addColorStop(0,"#FFFFFF"),j.addColorStop(1,`hsl(${J}, 100%, 50%)`),Q.fillStyle=j,Q.fillRect(0,0,$,Z);const _=Q.createLinearGradient(0,0,0,Z);_.addColorStop(0,"rgba(0,0,0,0)"),_.addColorStop(1,"rgba(0,0,0,1)"),Q.fillStyle=_,Q.fillRect(0,0,$,Z)}#A(Q=0){if(!this.#N||!this.#q)return;const $=this.#q.getBoundingClientRect();if(($.width===0||$.height===0)&&Q<5){requestAnimationFrame(()=>this.#A(Q+1));return}const Z=this.#J.s/100*$.width,J=(100-this.#J.v)/100*$.height;this.#N.style.left=`${Z}px`,this.#N.style.top=`${J}px`,this.#N.style.setProperty("--picker-color",this.#I({...this.#J,a:1}))}#f(){if(!this.#q||!this.#N)return;const Q=()=>{if(!this.#U)return;this.#U=!1,this.#h()},$=(Z)=>{const J=this.#q.getBoundingClientRect(),j=Math.max(0,Math.min(Z.clientX-J.left,J.width)),_=Math.max(0,Math.min(Z.clientY-J.top,J.height));this.#J.s=j/J.width*100,this.#J.v=100-_/J.height*100,this.#A(),this.#P(),this.#k()};this.#q.addEventListener("pointerdown",(Z)=>{this.#U=!0,this.#q.setPointerCapture(Z.pointerId),$(Z)}),this.#q.addEventListener("pointermove",(Z)=>{if(!this.#U)return;if(Z.buttons===0){Q();return}$(Z)}),this.#q.addEventListener("pointerup",Q),this.#q.addEventListener("pointercancel",Q),this.#q.addEventListener("lostpointercapture",Q),this.#N.addEventListener("pointerdown",(Z)=>{Z.stopPropagation(),this.#U=!0,this.#N.setPointerCapture(Z.pointerId)}),this.#N.addEventListener("pointermove",(Z)=>{if(!this.#U)return;if(Z.buttons===0){Q();return}$(Z)}),this.#N.addEventListener("pointerup",Q),this.#N.addEventListener("pointercancel",Q),this.#N.addEventListener("lostpointercapture",Q)}#P(){if(!this.#Z)return;const Q=this.#I(this.#J),$=this.#Z.querySelector(".fig-fill-picker-color-input");if($)$.setAttribute("value",Q);if(this.#L)this.#L.setAttribute("color",Q);this.#M()}#m(){const Q=this.#Z.querySelector('[data-tab="gradient"]'),$=this.getAttribute("experimental"),Z=$?`experimental="${$}"`:"";Q.innerHTML=`
|
|
307
307
|
<div class="fig-fill-picker-gradient-header">
|
|
308
308
|
<fig-dropdown class="fig-fill-picker-gradient-type" ${Z} value="${this.#_.type}">
|
|
309
309
|
<option value="linear" selected>Linear</option>
|
|
@@ -336,7 +336,7 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
336
336
|
</div>
|
|
337
337
|
<div class="fig-fill-picker-gradient-stops-list"></div>
|
|
338
338
|
</div>
|
|
339
|
-
`,this.#
|
|
339
|
+
`,this.#y(),this.#b(Q)}#b(Q){Q.querySelector(".fig-fill-picker-gradient-type").addEventListener("change",(_)=>{this.#_.type=_.target.value,this.#y(),this.#k()}),Q.querySelector(".fig-fill-picker-gradient-angle").addEventListener("input",(_)=>{const K=parseFloat(_.target.value)||0;this.#_.angle=(K+90)%360,this.#V(),this.#k()});const J=Q.querySelector(".fig-fill-picker-gradient-cx"),j=Q.querySelector(".fig-fill-picker-gradient-cy");J?.addEventListener("input",(_)=>{this.#_.centerX=parseFloat(_.target.value)||50,this.#V(),this.#k()}),j?.addEventListener("input",(_)=>{this.#_.centerY=parseFloat(_.target.value)||50,this.#V(),this.#k()}),Q.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#_.stops.forEach((_)=>{_.position=100-_.position}),this.#_.stops.sort((_,K)=>_.position-K.position),this.#y(),this.#k()}),Q.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#_.stops.push({position:50,color:"#888888",opacity:100}),this.#_.stops.sort((K,X)=>K.position-X.position),this.#y(),this.#k()})}#y(){if(!this.#Z)return;const Q=this.#Z.querySelector('[data-tab="gradient"]');if(!Q)return;const $=Q.querySelector(".fig-fill-picker-gradient-angle"),Z=Q.querySelector(".fig-fill-picker-gradient-center");if(this.#_.type==="radial")$.style.display="none",Z.style.display="flex";else{$.style.display="block",Z.style.display="none";const J=(this.#_.angle-90+360)%360;$.setAttribute("value",J)}this.#V(),this.#c()}#V(){if(!this.#Z)return;const Q=this.#Z.querySelector(".fig-fill-picker-gradient-bar");if(Q)Q.style.background=this.#g();this.#M()}#c(){if(!this.#Z)return;const Q=this.#Z.querySelector(".fig-fill-picker-gradient-stops-list");if(!Q)return;Q.innerHTML=this.#_.stops.map(($,Z)=>`
|
|
340
340
|
<div class="fig-fill-picker-gradient-stop-row" data-index="${Z}">
|
|
341
341
|
<fig-input-number class="fig-fill-picker-stop-position" min="0" max="100" value="${$.position}" units="%"></fig-input-number>
|
|
342
342
|
<fig-input-color class="fig-fill-picker-stop-color" text="true" alpha="true" picker="figma" picker-dialog-position="right" value="${$.color}"></fig-input-color>
|
|
@@ -344,7 +344,7 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
344
344
|
<span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>
|
|
345
345
|
</fig-button>
|
|
346
346
|
</div>
|
|
347
|
-
`).join(""),Q.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach(($)=>{const Z=parseInt($.dataset.index);$.querySelector(".fig-fill-picker-stop-position").addEventListener("input",(_)=>{this.#_.stops[Z].position=parseFloat(_.target.value)||0,this.#
|
|
347
|
+
`).join(""),Q.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach(($)=>{const Z=parseInt($.dataset.index);$.querySelector(".fig-fill-picker-stop-position").addEventListener("input",(_)=>{this.#_.stops[Z].position=parseFloat(_.target.value)||0,this.#V(),this.#k()});const J=$.querySelector(".fig-fill-picker-stop-color"),j=J.querySelector("fig-fill-picker");if(j)j.anchorElement=this.#Z;else requestAnimationFrame(()=>{const _=J.querySelector("fig-fill-picker");if(_)_.anchorElement=this.#Z});J.addEventListener("input",(_)=>{this.#_.stops[Z].color=_.target.hexOpaque||_.target.value;const K=parseFloat(_.target.alpha);this.#_.stops[Z].opacity=isNaN(K)?100:K,this.#V(),this.#k()}),$.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{if(this.#_.stops.length>2)this.#_.stops.splice(Z,1),this.#y(),this.#k()})})}#g(){const Q=this.#_.stops.map(($)=>{return`${this.#i($.color,$.opacity/100)} ${$.position}%`}).join(", ");switch(this.#_.type){case"linear":return`linear-gradient(${this.#_.angle}deg, ${Q})`;case"radial":return`radial-gradient(circle at ${this.#_.centerX}% ${this.#_.centerY}%, ${Q})`;case"angular":return`conic-gradient(from ${this.#_.angle}deg, ${Q})`;default:return`linear-gradient(${this.#_.angle}deg, ${Q})`}}#d(){const Q=this.#Z.querySelector('[data-tab="image"]'),$=this.getAttribute("experimental"),Z=$?`experimental="${$}"`:"";Q.innerHTML=`
|
|
348
348
|
<div class="fig-fill-picker-media-header">
|
|
349
349
|
<fig-dropdown class="fig-fill-picker-scale-mode" ${Z} value="${this.#X.scaleMode}">
|
|
350
350
|
<option value="fill" selected>Fill</option>
|
|
@@ -362,9 +362,9 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
362
362
|
<input type="file" accept="image/*" style="display: none;" />
|
|
363
363
|
</fig-button>
|
|
364
364
|
</div>
|
|
365
|
-
`,this.#
|
|
365
|
+
`,this.#w(Q)}#w(Q){const $=Q.querySelector(".fig-fill-picker-scale-mode"),Z=Q.querySelector(".fig-fill-picker-scale"),J=Q.querySelector(".fig-fill-picker-upload"),j=Q.querySelector('input[type="file"]'),_=Q.querySelector(".fig-fill-picker-image-preview");$.addEventListener("change",(X)=>{this.#X.scaleMode=X.target.value,Z.style.display=X.target.value==="tile"?"block":"none",this.#x(_),this.#M(),this.#k()}),Z.addEventListener("input",(X)=>{this.#X.scale=parseFloat(X.target.value)||100,this.#x(_),this.#M(),this.#k()}),J.addEventListener("click",()=>{j.click()}),j.addEventListener("change",(X)=>{const q=X.target.files[0];if(q){const Y=new FileReader;Y.onload=(B)=>{this.#X.url=B.target.result,this.#x(_),this.#M(),this.#k()},Y.readAsDataURL(q)}});const K=Q.querySelector(".fig-fill-picker-media-preview");K.addEventListener("dragover",(X)=>{X.preventDefault(),K.classList.add("dragover")}),K.addEventListener("dragleave",()=>{K.classList.remove("dragover")}),K.addEventListener("drop",(X)=>{X.preventDefault(),K.classList.remove("dragover");const q=X.dataTransfer.files[0];if(q&&q.type.startsWith("image/")){const Y=new FileReader;Y.onload=(B)=>{this.#X.url=B.target.result,this.#x(_),this.#M(),this.#k()},Y.readAsDataURL(q)}})}#x(Q){const $=Q.closest(".fig-fill-picker-media-preview");if(!this.#X.url){Q.style.display="none",$?.classList.remove("has-media");return}switch(Q.style.display="block",$?.classList.add("has-media"),Q.style.backgroundImage=`url(${this.#X.url})`,Q.style.backgroundPosition="center",this.#X.scaleMode){case"fill":Q.style.backgroundSize="cover",Q.style.backgroundRepeat="no-repeat";break;case"fit":Q.style.backgroundSize="contain",Q.style.backgroundRepeat="no-repeat";break;case"crop":Q.style.backgroundSize="cover",Q.style.backgroundRepeat="no-repeat";break;case"tile":Q.style.backgroundSize=`${this.#X.scale}%`,Q.style.backgroundRepeat="repeat",Q.style.backgroundPosition="top left";break}}#p(Q){switch(Q.style.objectPosition="center",Q.style.width="100%",Q.style.height="100%",this.#Y.scaleMode){case"fill":case"crop":Q.style.objectFit="cover";break;case"fit":Q.style.objectFit="contain";break}}#l(){const Q=this.#Z.querySelector('[data-tab="video"]'),$=this.getAttribute("experimental"),Z=$?`experimental="${$}"`:"";Q.innerHTML=`
|
|
366
366
|
<div class="fig-fill-picker-media-header">
|
|
367
|
-
<fig-dropdown class="fig-fill-picker-scale-mode" ${Z} value="${this.#
|
|
367
|
+
<fig-dropdown class="fig-fill-picker-scale-mode" ${Z} value="${this.#Y.scaleMode}">
|
|
368
368
|
<option value="fill" selected>Fill</option>
|
|
369
369
|
<option value="fit">Fit</option>
|
|
370
370
|
<option value="crop">Crop</option>
|
|
@@ -378,7 +378,7 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
378
378
|
<input type="file" accept="video/*" style="display: none;" />
|
|
379
379
|
</fig-button>
|
|
380
380
|
</div>
|
|
381
|
-
`,this.#
|
|
381
|
+
`,this.#n(Q)}#n(Q){const $=Q.querySelector(".fig-fill-picker-scale-mode"),Z=Q.querySelector(".fig-fill-picker-upload"),J=Q.querySelector('input[type="file"]'),j=Q.querySelector(".fig-fill-picker-video-preview");$.addEventListener("change",(K)=>{this.#Y.scaleMode=K.target.value,this.#p(j),this.#M(),this.#k()}),Z.addEventListener("click",()=>{J.click()});const _=Q.querySelector(".fig-fill-picker-media-preview");J.addEventListener("change",(K)=>{const X=K.target.files[0];if(X)this.#Y.url=URL.createObjectURL(X),j.src=this.#Y.url,j.style.display="block",j.play(),_.classList.add("has-media"),this.#p(j),this.#M(),this.#k()}),_.addEventListener("dragover",(K)=>{K.preventDefault(),_.classList.add("dragover")}),_.addEventListener("dragleave",()=>{_.classList.remove("dragover")}),_.addEventListener("drop",(K)=>{K.preventDefault(),_.classList.remove("dragover");const X=K.dataTransfer.files[0];if(X&&X.type.startsWith("video/"))this.#Y.url=URL.createObjectURL(X),j.src=this.#Y.url,j.style.display="block",j.play(),_.classList.add("has-media"),this.#p(j),this.#M(),this.#k()})}#u(){const Q=this.#Z.querySelector('[data-tab="webcam"]'),$=this.getAttribute("experimental"),Z=$?`experimental="${$}"`:"";Q.innerHTML=`
|
|
382
382
|
<div class="fig-fill-picker-webcam-preview">
|
|
383
383
|
<div class="fig-fill-picker-checkerboard"></div>
|
|
384
384
|
<video class="fig-fill-picker-webcam-video" autoplay muted playsinline></video>
|
|
@@ -393,4 +393,4 @@ function H(){return Date.now().toString(36)+Math.random().toString(36).substring
|
|
|
393
393
|
Capture
|
|
394
394
|
</fig-button>
|
|
395
395
|
</div>
|
|
396
|
-
`,this.#
|
|
396
|
+
`,this.#s(Q)}#s(Q){const $=Q.querySelector(".fig-fill-picker-webcam-video"),Z=Q.querySelector(".fig-fill-picker-webcam-status"),J=Q.querySelector(".fig-fill-picker-webcam-capture"),j=Q.querySelector(".fig-fill-picker-camera-select"),_=async(X=null)=>{try{const q={video:X?{deviceId:{exact:X}}:!0};if(this.#G.stream)this.#G.stream.getTracks().forEach((L)=>L.stop());this.#G.stream=await navigator.mediaDevices.getUserMedia(q),$.srcObject=this.#G.stream,$.style.display="block",Z.style.display="none";const B=(await navigator.mediaDevices.enumerateDevices()).filter((L)=>L.kind==="videoinput");if(B.length>1)j.style.display="block",j.innerHTML=B.map((L,W)=>`<option value="${L.deviceId}">${L.label||`Camera ${W+1}`}</option>`).join("")}catch(q){console.error("Webcam error:",q.name,q.message);let Y="Camera access denied";if(q.name==="NotAllowedError")Y="Camera permission denied";else if(q.name==="NotFoundError")Y="No camera found";else if(q.name==="NotReadableError")Y="Camera in use by another app";else if(q.name==="OverconstrainedError")Y="Camera constraints not supported";else if(!window.isSecureContext)Y="Camera requires secure context";Z.innerHTML=`<span>${Y}</span>`,Z.style.display="flex",$.style.display="none"}};new MutationObserver(()=>{if(Q.style.display!=="none"&&!this.#G.stream)_()}).observe(Q,{attributes:!0,attributeFilter:["style"]}),j.addEventListener("change",(X)=>{_(X.target.value)}),J.addEventListener("click",()=>{if(!this.#G.stream)return;const X=document.createElement("canvas");X.width=$.videoWidth,X.height=$.videoHeight,X.getContext("2d").drawImage($,0,0),this.#G.snapshot=X.toDataURL("image/png"),this.#X.url=this.#G.snapshot,this.#K="image",this.#M(),this.#k(),this.#H("image");const q=this.#Z.querySelector("fig-tabs");q.value="image"})}#a(Q){const $=Q.h/360,Z=Q.s/100,J=Q.v/100;let j,_,K;const X=Math.floor($*6),q=$*6-X,Y=J*(1-Z),B=J*(1-q*Z),L=J*(1-(1-q)*Z);switch(X%6){case 0:j=J,_=L,K=Y;break;case 1:j=B,_=J,K=Y;break;case 2:j=Y,_=J,K=L;break;case 3:j=Y,_=B,K=J;break;case 4:j=L,_=Y,K=J;break;case 5:j=J,_=Y,K=B;break}return{r:Math.round(j*255),g:Math.round(_*255),b:Math.round(K*255)}}#o(Q){const $=Q.r/255,Z=Q.g/255,J=Q.b/255,j=Math.max($,Z,J),_=Math.min($,Z,J),K=j-_;let X=0;const q=j===0?0:K/j,Y=j;if(j!==_){switch(j){case $:X=(Z-J)/K+(Z<J?6:0);break;case Z:X=(J-$)/K+2;break;case J:X=($-Z)/K+4;break}X/=6}return{h:X*360,s:q*100,v:Y*100,a:1}}#I(Q){if(!Q||typeof Q.h!=="number"||typeof Q.s!=="number"||typeof Q.v!=="number")return"#D9D9D9";const $=this.#a(Q),Z=(J)=>{return(isNaN(J)?217:Math.max(0,Math.min(255,Math.round(J)))).toString(16).padStart(2,"0")};return`#${Z($.r)}${Z($.g)}${Z($.b)}`}#C(Q){const $=parseInt(Q.slice(1,3),16),Z=parseInt(Q.slice(3,5),16),J=parseInt(Q.slice(5,7),16);return this.#o({r:$,g:Z,b:J})}#i(Q,$=1){const Z=parseInt(Q.slice(1,3),16),J=parseInt(Q.slice(3,5),16),j=parseInt(Q.slice(5,7),16);return`rgba(${Z}, ${J}, ${j}, ${$})`}#e(Q){const $=Q.r/255,Z=Q.g/255,J=Q.b/255,j=Math.max($,Z,J),_=Math.min($,Z,J);let K,X;const q=(j+_)/2;if(j===_)K=X=0;else{const Y=j-_;switch(X=q>0.5?Y/(2-j-_):Y/(j+_),j){case $:K=((Z-J)/Y+(Z<J?6:0))/6;break;case Z:K=((J-$)/Y+2)/6;break;case J:K=(($-Z)/Y+4)/6;break}}return{h:K*360,s:X*100,l:q*100}}#t(Q){const $=Q.h/360,Z=Q.s/100,J=Q.l/100;let j,_,K;if(Z===0)j=_=K=J;else{const X=(B,L,W)=>{if(W<0)W+=1;if(W>1)W-=1;if(W<0.16666666666666666)return B+(L-B)*6*W;if(W<0.5)return L;if(W<0.6666666666666666)return B+(L-B)*(0.6666666666666666-W)*6;return B},q=J<0.5?J*(1+Z):J+Z-J*Z,Y=2*J-q;j=X(Y,q,$+0.3333333333333333),_=X(Y,q,$),K=X(Y,q,$-0.3333333333333333)}return{r:Math.round(j*255),g:Math.round(_*255),b:Math.round(K*255)}}#r(Q){const $=(L)=>{return L=L/255,L<=0.04045?L/12.92:Math.pow((L+0.055)/1.055,2.4)},Z=$(Q.r),J=$(Q.g),j=$(Q.b),_=0.4122214708*Z+0.5363325363*J+0.0514459929*j,K=0.2119034982*Z+0.6806995451*J+0.1073969566*j,X=0.0883024619*Z+0.2817188376*J+0.6299787005*j,q=Math.cbrt(_),Y=Math.cbrt(K),B=Math.cbrt(X);return{l:0.2104542553*q+0.793617785*Y-0.0040720468*B,a:1.9779984951*q-2.428592205*Y+0.4505937099*B,b:0.0259040371*q+0.7827717662*Y-0.808675766*B}}#v(Q){const $=this.#r(Q);return{l:$.l,c:Math.sqrt($.a*$.a+$.b*$.b),h:(Math.atan2($.b,$.a)*180/Math.PI+360)%360}}#k(){this.#M(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#h(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){const Q={type:this.#K};switch(this.#K){case"solid":return{...Q,color:this.#I(this.#J),alpha:this.#J.a,hsv:{...this.#J}};case"gradient":return{...Q,gradient:{...this.#_},css:this.#g()};case"image":return{...Q,image:{...this.#X}};case"video":return{...Q,video:{...this.#Y}};case"webcam":return{...Q,image:{url:this.#G.snapshot,scaleMode:"fill",scale:50}};default:return{...Q,...this.#B[this.#K]}}}set value(Q){if(typeof Q==="string")this.setAttribute("value",Q);else this.setAttribute("value",JSON.stringify(Q))}attributeChangedCallback(Q,$,Z){if($===Z)return;switch(Q){case"value":if(this.#F(),this.#M(),this.#Z){if(!this.#U){if(this.#A(),this.#P(),this.#O)this.#O.setAttribute("value",this.#J.h);if(this.#L)this.#L.setAttribute("value",this.#J.a*100),this.#L.setAttribute("color",this.#I(this.#J))}}break;case"disabled":break}}}customElements.define("fig-fill-picker",ZQ);
|
package/fig.js
CHANGED
|
@@ -1100,6 +1100,8 @@ class FigPopup extends HTMLDialogElement {
|
|
|
1100
1100
|
#anchorObserver = null;
|
|
1101
1101
|
#contentObserver = null;
|
|
1102
1102
|
#mutationObserver = null;
|
|
1103
|
+
#anchorTrackRAF = null;
|
|
1104
|
+
#lastAnchorRect = null;
|
|
1103
1105
|
#isPopupActive = false;
|
|
1104
1106
|
#boundReposition;
|
|
1105
1107
|
#boundScroll;
|
|
@@ -1126,7 +1128,7 @@ class FigPopup extends HTMLDialogElement {
|
|
|
1126
1128
|
!this.contains(e.target) &&
|
|
1127
1129
|
this.#shouldAutoReposition()
|
|
1128
1130
|
) {
|
|
1129
|
-
this.#
|
|
1131
|
+
this.#queueReposition();
|
|
1130
1132
|
}
|
|
1131
1133
|
};
|
|
1132
1134
|
this.#boundOutsidePointerDown = this.#handleOutsidePointerDown.bind(this);
|
|
@@ -1342,6 +1344,7 @@ class FigPopup extends HTMLDialogElement {
|
|
|
1342
1344
|
capture: true,
|
|
1343
1345
|
passive: true,
|
|
1344
1346
|
});
|
|
1347
|
+
this.#startAnchorTracking();
|
|
1345
1348
|
}
|
|
1346
1349
|
|
|
1347
1350
|
#teardownObservers() {
|
|
@@ -1362,6 +1365,64 @@ class FigPopup extends HTMLDialogElement {
|
|
|
1362
1365
|
capture: true,
|
|
1363
1366
|
passive: true,
|
|
1364
1367
|
});
|
|
1368
|
+
this.#stopAnchorTracking();
|
|
1369
|
+
}
|
|
1370
|
+
|
|
1371
|
+
#readRectSnapshot(element) {
|
|
1372
|
+
if (!element) return null;
|
|
1373
|
+
const rect = element.getBoundingClientRect();
|
|
1374
|
+
return {
|
|
1375
|
+
x: rect.x,
|
|
1376
|
+
y: rect.y,
|
|
1377
|
+
width: rect.width,
|
|
1378
|
+
height: rect.height,
|
|
1379
|
+
};
|
|
1380
|
+
}
|
|
1381
|
+
|
|
1382
|
+
#hasRectChanged(prev, next, epsilon = 0.25) {
|
|
1383
|
+
if (!prev && !next) return false;
|
|
1384
|
+
if (!prev || !next) return true;
|
|
1385
|
+
return (
|
|
1386
|
+
Math.abs(prev.x - next.x) > epsilon ||
|
|
1387
|
+
Math.abs(prev.y - next.y) > epsilon ||
|
|
1388
|
+
Math.abs(prev.width - next.width) > epsilon ||
|
|
1389
|
+
Math.abs(prev.height - next.height) > epsilon
|
|
1390
|
+
);
|
|
1391
|
+
}
|
|
1392
|
+
|
|
1393
|
+
#startAnchorTracking() {
|
|
1394
|
+
this.#stopAnchorTracking();
|
|
1395
|
+
if (!this.open) return;
|
|
1396
|
+
|
|
1397
|
+
const tick = () => {
|
|
1398
|
+
if (!this.open) {
|
|
1399
|
+
this.#anchorTrackRAF = null;
|
|
1400
|
+
return;
|
|
1401
|
+
}
|
|
1402
|
+
|
|
1403
|
+
const anchor = this.#resolveAnchor();
|
|
1404
|
+
const nextRect = this.#readRectSnapshot(anchor);
|
|
1405
|
+
const canAutoReposition = this.#shouldAutoReposition();
|
|
1406
|
+
if (canAutoReposition && this.#hasRectChanged(this.#lastAnchorRect, nextRect)) {
|
|
1407
|
+
this.#lastAnchorRect = nextRect;
|
|
1408
|
+
this.#queueReposition();
|
|
1409
|
+
} else if (!canAutoReposition) {
|
|
1410
|
+
// Keep anchor geometry fresh without forcing reposition when user has dragged away.
|
|
1411
|
+
this.#lastAnchorRect = nextRect;
|
|
1412
|
+
}
|
|
1413
|
+
this.#anchorTrackRAF = requestAnimationFrame(tick);
|
|
1414
|
+
};
|
|
1415
|
+
|
|
1416
|
+
this.#lastAnchorRect = this.#readRectSnapshot(this.#resolveAnchor());
|
|
1417
|
+
this.#anchorTrackRAF = requestAnimationFrame(tick);
|
|
1418
|
+
}
|
|
1419
|
+
|
|
1420
|
+
#stopAnchorTracking() {
|
|
1421
|
+
if (this.#anchorTrackRAF !== null) {
|
|
1422
|
+
cancelAnimationFrame(this.#anchorTrackRAF);
|
|
1423
|
+
this.#anchorTrackRAF = null;
|
|
1424
|
+
}
|
|
1425
|
+
this.#lastAnchorRect = null;
|
|
1365
1426
|
}
|
|
1366
1427
|
|
|
1367
1428
|
#handleOutsidePointerDown(event) {
|
package/package.json
CHANGED