@rogieking/figui3 7.0.0 → 8.0.0
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/README.md +2 -2
- package/components.css +3 -267
- package/dist/components.css +1 -1
- package/dist/fig-editor.css +1 -1
- package/dist/fig-editor.js +129 -38
- package/dist/fig-lab.js +15 -13
- package/dist/fig.css +1 -1
- package/dist/fig.js +20 -111
- package/fig-editor.css +265 -0
- package/fig-editor.js +1320 -0
- package/fig-lab.js +85 -178
- package/fig.js +36 -1172
- package/package.json +1 -1
package/dist/fig-editor.js
CHANGED
|
@@ -1,9 +1,100 @@
|
|
|
1
|
-
import"./fig.js";import"./fig-lab.js";function
|
|
2
|
-
|
|
1
|
+
import"./fig.js";import"./fig-lab.js";function B(j,J){if(!customElements.get(j))customElements.define(j,J)}function R(j){return String(j??"").replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(/</g,"<").replace(/>/g,">")}function G(j,J){return j.hasAttribute(J)&&j.getAttribute(J)!=="false"}function w(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function v(j,J={}){let K=document.createElement("fig-icon");if(j)K.setAttribute("name",j);if(J.size)K.setAttribute("size",J.size);if(J.className)K.className=J.className;return K}function u({owner:j,onStart:J,onEnd:K,startClass:Q="",endClass:U="",chevronClass:X="",startLabel:Z="Scroll back",endLabel:W="Scroll forward"}={}){let z=(O,L)=>{let Y=document.createElement("button");if(Y.type="button",Y.className=["fig-overflow",`fig-overflow-${O}`,O==="start"?Q:U].filter(Boolean).join(" "),Y.dataset.figOverflow=O,j)Y.setAttribute(`data-fig-${j}-nav`,O);return Y.setAttribute("tabindex","-1"),Y.setAttribute("aria-label",O==="start"?Z:W),Y.appendChild(v("chevron",{size:"small",className:["fig-overflow-chevron",X].filter(Boolean).join(" ")})),Y.addEventListener("click",($)=>{$.preventDefault(),$.stopPropagation(),L?.($)}),Y};return{start:z("start",J),end:z("end",K)}}function E(j,J,K="x",Q=2){if(!j||!J)return!1;let U=K==="x",X=U?J.scrollWidth:J.scrollHeight,Z=U?J.clientWidth:J.clientHeight,W=U?J.scrollLeft:J.scrollTop,z=X-Z>Q,O=!z||W<=Q,L=!z||W+Z>=X-Q;return j.classList.toggle("overflow-start",!O),j.classList.toggle("overflow-end",!L),z}function A(j,J="x",K=1){if(!j)return;let Q=J==="x",X=(Q?j.clientWidth:j.clientHeight)*0.8*K;j.scrollBy({[Q?"left":"top"]:X,behavior:"smooth"})}function g(j,J,K="y",Q="auto"){if(!j||!J||!j.contains(J))return;requestAnimationFrame(()=>{if(!j.isConnected||!J.isConnected)return;let U=K==="x",X=U?j.scrollWidth:j.scrollHeight,Z=U?j.clientWidth:j.clientHeight;if(X<=Z+1){E(j,j,K);return}let W=J.getBoundingClientRect(),z=j.getBoundingClientRect(),O=U?j.scrollLeft:j.scrollTop,L=(U?W.left-z.left:W.top-z.top)+O,Y=U?W.width:W.height,$=X-Z,f=Math.max(0,Math.min(L+Y/2-Z/2,$));j.scrollTo({[U?"left":"top"]:f,behavior:Q}),E(j,j,K)})}function b(j){let J=j||"";if(J.startsWith("["))try{let Q=JSON.parse(J);return Array.isArray(Q)?Q:[]}catch{}let K=J.includes(`
|
|
2
|
+
`)?`
|
|
3
|
+
`:",";return J.split(K).map((Q)=>Q.trim()).filter(Boolean)}function h(j){if(j&&typeof j==="object")return String(j.value??j.label??"");return String(j??"")}function m(j){if(j&&typeof j==="object")return String(j.label??j.value??"");return String(j??"")}class y extends HTMLElement{static get observedAttributes(){return["value","disabled","selected","label"]}get value(){let j=this.getAttribute("value");if(j!==null)return j;return(this.textContent||"").trim()}set value(j){if(j===null||j===void 0)this.removeAttribute("value");else this.setAttribute("value",String(j))}get disabled(){return G(this,"disabled")}set disabled(j){if(j)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return G(this,"selected")}set selected(j){if(j)this.setAttribute("selected","");else this.removeAttribute("selected")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","option");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");this.#J()}attributeChangedCallback(j,J,K){if(J===K)return;if(j==="disabled")this.#J()}#J(){if(this.disabled)this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else if(this.removeAttribute("aria-disabled"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1")}}B("fig-select-option",y);class P extends HTMLElement{#J=null;#K=null;#j=null;#R=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#V(),this.#Z(),this.#_(),this.addEventListener("scroll",this.#R,{passive:!0}),this.#j?.disconnect(),this.#j=new ResizeObserver(()=>this.syncOverflow()),this.#j.observe(this),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#R),this.#j?.disconnect(),this.#j=null,this.#Q()}syncOverflow(){return this.#Z(),E(this,this,"y")}scrollToOption(j,J="auto"){g(this,j,"y",J)}#V(){let j=this.querySelector(":scope > fig-chooser");if(!j)return;while(j.firstChild)this.insertBefore(j.firstChild,j);j.remove()}#Z(){let j=Array.from(this.children).find((J)=>!J.hasAttribute("data-fig-select-nav"));if(j?.tagName==="FIG-SEPARATOR")j.setAttribute("borderless","")}#_(){if(this.#J&&this.#K&&this.contains(this.#J)&&this.contains(this.#K))return;this.#Q();let j=u({owner:"select",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>A(this,"y",-1),onEnd:()=>A(this,"y",1)});this.#J=j.start,this.#K=j.end,this.prepend(this.#J),this.append(this.#K)}#Q(){this.#J?.remove(),this.#K?.remove(),this.#J=null,this.#K=null,this.classList.remove("overflow-start","overflow-end")}}B("fig-select-options",P);class I extends HTMLElement{#J=null;#K=null;#j=null;#R=null;#V=null;#Z=null;#_=!1;#Q=-1;#F=!1;#U=!1;#X=null;#$=!1;#W=null;#k=null;#g=!1;#z=this.#Hj.bind(this);#L=this.#I.bind(this);#q=this.#N.bind(this);#O=this.#jj.bind(this);#C=this.#Jj.bind(this);#T=this.#Yj.bind(this);static get observedAttributes(){return["value","disabled","label","options","position","offset","closedby","open"]}get value(){return this.getAttribute("value")??""}set value(j){if(j===null||j===void 0)this.removeAttribute("value");else this.setAttribute("value",String(j))}get open(){return G(this,"open")}set open(j){if(j)this.setAttribute("open","");else this.removeAttribute("open")}connectedCallback(){if(!this.#_)this.#l();if(this.#A(),this.#b(),this.#$j(),this.#s(),this.#P(),this.#kj(),this.#f(),this.open)this.#w()}disconnectedCallback(){this.#Gj(),document.removeEventListener("keydown",this.#O,!0),this.#Z?.disconnect(),this.#Z=null}attributeChangedCallback(j,J,K){if(J===K||!this.#_)return;if(j==="options"){this.#b(),this.#P();return}if(j==="value"||j==="label"){this.#P();return}if(j==="disabled"){this.#$j();return}if(j==="open"){if(K===null||K==="false")this.#Tj();else this.#w();return}if(j==="position"||j==="offset"||j==="closedby")this.#s()}focus(j){this.#J?.focus(j)}blur(){this.#J?.blur()}#M(j){return j?.nodeType===1&&(j.tagName==="FIG-SELECT-OPTION"||j.tagName==="FIG-SEPARATOR"||j.tagName==="FIG-SELECT-OPTIONS")}#A(){for(let j of this.querySelectorAll(":scope > fig-select-options"))if(!j.hasAttribute("slot"))j.setAttribute("slot","panel")}#H(){let J=(this.#V?.assignedElements({flatten:!0})??[]).find((K)=>K.tagName==="FIG-SELECT-OPTIONS");if(J)return J;return this.querySelector(":scope > fig-select-options")}#S(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#e(){let j=this.#H();if(j){if(!j.hasAttribute("slot"))j.setAttribute("slot","panel");return j}return j=document.createElement("fig-select-options"),j.setAttribute("slot","panel"),j.setAttribute("data-fig-generated",""),this.appendChild(j),j}#b(){if(this.#S())return;let j=this.hasAttribute("options"),J=j?this.#e():this.#H();if(!J)return;this.#g=!0;try{for(let U of J.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))U.remove();if(!j)return;let K=b(this.getAttribute("options")),Q=J.querySelector(":scope > .fig-overflow-end");for(let U of K){let X=document.createElement("fig-select-option");if(X.setAttribute("data-fig-generated",""),X.setAttribute("value",h(U)),X.textContent=m(U),Q)J.insertBefore(X,Q);else J.appendChild(X)}}finally{this.#g=!1}}#l(){this.#_=!0;let j=this.attachShadow({mode:"open"});j.innerHTML=`
|
|
4
|
+
<style>
|
|
5
|
+
:host {
|
|
6
|
+
display: inline-flex;
|
|
7
|
+
position: relative;
|
|
8
|
+
align-items: center;
|
|
9
|
+
min-width: 0;
|
|
10
|
+
}
|
|
11
|
+
:host([full]:not([full="false"])) {
|
|
12
|
+
display: flex;
|
|
13
|
+
width: 100%;
|
|
14
|
+
}
|
|
15
|
+
.fig-select-trigger {
|
|
16
|
+
display: flex;
|
|
17
|
+
align-items: center;
|
|
18
|
+
justify-content: flex-start;
|
|
19
|
+
flex: 1;
|
|
20
|
+
min-width: 0;
|
|
21
|
+
width: var(--fig-select-trigger-width, 100%);
|
|
22
|
+
height: 100%;
|
|
23
|
+
margin: 0;
|
|
24
|
+
padding: 0 var(--spacer-4, 1rem) 0 var(--spacer-2, 0.5rem);
|
|
25
|
+
border: 0;
|
|
26
|
+
border-radius: inherit;
|
|
27
|
+
background: transparent;
|
|
28
|
+
box-shadow: none;
|
|
29
|
+
color: inherit;
|
|
30
|
+
font: inherit;
|
|
31
|
+
font-weight: inherit;
|
|
32
|
+
text-align: left;
|
|
33
|
+
white-space: nowrap;
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
text-overflow: ellipsis;
|
|
36
|
+
cursor: default;
|
|
37
|
+
}
|
|
38
|
+
.fig-select-trigger:has(.fig-select-prepend:not(:empty)) {
|
|
39
|
+
padding-left: 0;
|
|
40
|
+
}
|
|
41
|
+
.fig-select-trigger:hover,
|
|
42
|
+
.fig-select-trigger:active,
|
|
43
|
+
.fig-select-trigger:active:hover {
|
|
44
|
+
background: transparent;
|
|
45
|
+
box-shadow: none;
|
|
46
|
+
color: inherit;
|
|
47
|
+
}
|
|
48
|
+
.fig-select-trigger:focus-visible,
|
|
49
|
+
.fig-select-trigger[data-focus-visible] {
|
|
50
|
+
outline: var(--figma-focus-outline);
|
|
51
|
+
outline-offset: var(--figma-focus-outline-offset);
|
|
52
|
+
}
|
|
53
|
+
:host([disabled]:not([disabled="false"])) .fig-select-trigger,
|
|
54
|
+
:host([disabled]:not([disabled="false"])) .fig-select-label {
|
|
55
|
+
color: var(--figma-color-text-tertiary);
|
|
56
|
+
}
|
|
57
|
+
.fig-select-label {
|
|
58
|
+
display: block;
|
|
59
|
+
width: 100%;
|
|
60
|
+
min-width: 0;
|
|
61
|
+
overflow: hidden;
|
|
62
|
+
text-overflow: ellipsis;
|
|
63
|
+
white-space: nowrap;
|
|
64
|
+
text-align: left;
|
|
65
|
+
}
|
|
66
|
+
.fig-select-prepend {
|
|
67
|
+
display: inline-flex;
|
|
68
|
+
flex: 0 0 auto;
|
|
69
|
+
align-items: center;
|
|
70
|
+
margin-right: var(--spacer-1, 0.25rem);
|
|
71
|
+
pointer-events: none;
|
|
72
|
+
}
|
|
73
|
+
.fig-select-prepend:empty {
|
|
74
|
+
display: none;
|
|
75
|
+
}
|
|
76
|
+
/* Listbox chrome from document fig-select::part(listbox).
|
|
77
|
+
Overflow UI lives on slotted fig-select-options.
|
|
78
|
+
Never set display except when open — closed <dialog> must stay display:none. */
|
|
79
|
+
dialog[is="fig-popup"] {
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
overflow: hidden;
|
|
82
|
+
}
|
|
83
|
+
dialog[is="fig-popup"][open] {
|
|
84
|
+
display: flex;
|
|
85
|
+
}
|
|
86
|
+
::slotted(fig-select-options) {
|
|
87
|
+
flex: 1 1 auto;
|
|
88
|
+
min-height: 0;
|
|
89
|
+
max-height: inherit;
|
|
90
|
+
}
|
|
91
|
+
</style>
|
|
92
|
+
`;let J=document.createElement("fig-button");J.className="fig-select-trigger",J.setAttribute("part","trigger"),J.setAttribute("variant","ghost"),J.setAttribute("aria-haspopup","listbox"),J.setAttribute("aria-expanded","false");let K=document.createElement("span");K.className="fig-select-prepend",K.setAttribute("part","prepend"),K.setAttribute("aria-hidden","true");let Q=document.createElement("span");Q.className="fig-select-label",Q.setAttribute("part","label"),J.append(K,Q);let U=document.createElement("dialog",{is:"fig-popup"});if(U.setAttribute("is","fig-popup"),U.setAttribute("part","listbox"),U.setAttribute("theme","menu"),U.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)U.setAttribute("popover","manual");U.id=w(),J.setAttribute("aria-controls",U.id);let X=document.createElement("slot");if(X.setAttribute("name","panel"),U.appendChild(X),j.append(J,U),this.#J=J,this.#j=K,this.#R=Q,this.#K=U,this.#V=X,U.anchor=J,this.#A(),this.#d(),!this.hasAttribute("value")){let Z=this.#y().find((W)=>G(W,"selected"));if(Z)this.setAttribute("value",Z.value)}}#d(){if(!this.#K||this.#U)return;if(typeof this.#K.positionPopup!=="function")return;this.#X=this.#K.positionPopup.bind(this.#K),this.#K.positionPopup=()=>{if(!this.open){this.#X?.();return}this.#B()},this.#U=!0}#c(j){if(!j)return null;let J=document.createRange();J.selectNodeContents(j);let K=[...J.getClientRects()].filter((Q)=>Q.width>0&&Q.height>0);if(K.length)return K[0];return j.getBoundingClientRect()}#r(){if(typeof this.#K?.parseViewportMargins==="function")return this.#K.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#E(){let j=this.#R?.getBoundingClientRect();if(!j)return null;return{x:j.x,y:j.y,width:j.width,height:j.height}}#D(){let j=window.visualViewport;return{width:j?.width??window.innerWidth,height:j?.height??window.innerHeight,offsetLeft:j?.offsetLeft??0,offsetTop:j?.offsetTop??0}}#zj(j,J,K=0.25){if(!j&&!J)return!1;if(!j||!J)return!0;return Math.abs(j.x-J.x)>K||Math.abs(j.y-J.y)>K||Math.abs(j.width-J.width)>K||Math.abs(j.height-J.height)>K}#Lj(j,J,K=0.25){if(!j&&!J)return!1;if(!j||!J)return!0;return Math.abs(j.width-J.width)>K||Math.abs(j.height-J.height)>K||Math.abs(j.offsetLeft-J.offsetLeft)>K||Math.abs(j.offsetTop-J.offsetTop)>K}#fj(){if(!this.#$)return!1;let j=this.#zj(this.#W,this.#E()),J=this.#Lj(this.#k,this.#D());return!j&&!J}#p(){this.#W=this.#E(),this.#k=this.#D()}#B(){if(this.#fj())return;let j=this.#K,J=this.#R;if(!j||!J){this.#X?.();return}let K=this.#y(),Q=K.find((k)=>this.#G(k)===this.value)||K[0];if(!Q){this.#X?.();return}this.#X?.();let U=j.getBoundingClientRect(),X=J.getBoundingClientRect(),Z=this.#c(Q);if(!U.width||!U.height||!X.width||!Z)return;let W=Z.left-U.left,z=Z.top-U.top,L=G(this,"full")?this.getBoundingClientRect().left:X.left-W,Y=X.top-z,$=this.#r();if(typeof j.clampToViewport==="function")({left:L,top:Y}=j.clampToViewport({left:L,top:Y},U,$));else{let{left:k,top:V}=$,N=window.innerWidth-U.width-$.right,_=window.innerHeight-U.height-$.bottom;L=Math.min(Math.max(L,k),Math.max(k,N)),Y=Math.min(Math.max(Y,V),Math.max(V,_))}j.style.setProperty("right","auto","important"),j.style.setProperty("bottom","auto","important"),j.style.setProperty("left",`${Math.round(L)}px`,"important"),j.style.setProperty("top",`${Math.round(Y)}px`,"important");let f=this.#H(),D=this.#c(Q);if(D&&f&&f.scrollHeight>f.clientHeight+1){let k=D.top-X.top;if(Math.abs(k)>0.5)f.scrollTop+=k;f.syncOverflow?.()}if(this.#$||this.open)this.#p()}#kj(){this.#J?.addEventListener("click",this.#z),this.#J?.addEventListener("keydown",this.#O),this.addEventListener("click",this.#L),this.addEventListener("pointerover",this.#q),this.#K?.addEventListener("keydown",this.#O),this.#K?.addEventListener("close",this.#C),this.#V?.addEventListener("slotchange",this.#T)}#Gj(){this.#J?.removeEventListener("click",this.#z),this.#J?.removeEventListener("keydown",this.#O),this.removeEventListener("click",this.#L),this.removeEventListener("pointerover",this.#q),this.#K?.removeEventListener("keydown",this.#O),this.#K?.removeEventListener("close",this.#C),this.#V?.removeEventListener("slotchange",this.#T)}#Yj(){this.#A(),this.#P()}#f(){if(this.#Z)return;this.#Z=new MutationObserver((j)=>{if(this.#F||this.#g)return;let J=!1;for(let K of j){if(K.type==="childList"){if([...K.addedNodes].some((Q)=>this.#M(Q))||[...K.removedNodes].some((Q)=>this.#M(Q))||K.target?.closest?.("fig-select-option"))J=!0}if(K.type==="attributes"&&K.target?.tagName==="FIG-SELECT-OPTION"){if(K.attributeName==="value"||K.attributeName==="disabled"||K.attributeName==="label")J=!0;else if(K.attributeName==="selected"){if(G(K.target,"selected")){let Q=this.#G(K.target);if((this.getAttribute("value")??"")!==Q)this.setAttribute("value",Q),J=!0}else if(this.#G(K.target)===(this.getAttribute("value")??""))J=!0}}if(K.type==="characterData"&&K.target?.parentElement?.tagName==="FIG-SELECT-OPTION")J=!0}if(J)this.#P()}),this.#Z.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#y({enabledOnly:j=!1}={}){let J=this.#H(),K=J?Array.from(J.querySelectorAll(":scope > fig-select-option")):[];if(!j)return K;return K.filter((Q)=>!G(Q,"disabled"))}#G(j){if(!j)return"";if(typeof j.value==="string")return j.value;let J=j.getAttribute?.("value");if(J!=null)return J;return(j.textContent||"").trim()}#Rj(j){if(!j)return"";let J=j.getAttribute?.("label");if(J!=null&&J!=="")return J.trim();let K=[];for(let Q of j.childNodes){if(Q.nodeType===Node.TEXT_NODE){let Z=Q.textContent?.trim();if(Z)K.push(Z);continue}if(!(Q instanceof Element))continue;let U=Q.getAttribute("slot");if(U==="prepend"||U==="append")continue;let X=Q.textContent?.trim();if(X)K.push(X)}if(K.length)return K.join(" ").trim();return(j.textContent||"").trim()}#Zj(j){if(!this.#j)return;let J=j?.querySelector?.(':scope > [slot="prepend"]');this.#j.replaceChildren(...Array.from(J?.childNodes??[],(K)=>K.cloneNode(!0)))}#s(){if(!this.#K)return;this.#K.setAttribute("position",this.getAttribute("position")||"bottom left");let j=this.getAttribute("offset");if(j)this.#K.setAttribute("offset",j);else this.#K.removeAttribute("offset");let J=this.getAttribute("closedby");if(J)this.#K.setAttribute("closedby",J);else this.#K.removeAttribute("closedby")}#$j(){let j=G(this,"disabled");if(this.#J)if(j)this.#J.setAttribute("disabled","");else this.#J.removeAttribute("disabled");if(j&&this.open)this.open=!1}#o(j){if(!j.length)return null;let J=j.find((K)=>G(K,"selected"));if(J&&!G(J,"disabled"))return J;return j.find((K)=>!G(K,"disabled"))||j[0]||null}#Wj(j){this.dispatchEvent(new CustomEvent("input",{detail:j,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:j,bubbles:!0,composed:!0}))}#P(){if(this.#F)return;this.#F=!0;try{let j=this.#y(),J=this.hasAttribute("value"),K=J?this.getAttribute("value"):null,Q=J?j.find((W)=>this.#G(W)===K):null,U=!1;if(!Q){if(J){if(!j.length){if(this.#R)this.#R.textContent=K||this.getAttribute("label")||"";return}if(Q=this.#o(j),Q){let W=this.#G(Q);if(K!==W)this.setAttribute("value",W),U=!0}else this.removeAttribute("value"),U=!0}else if(Q=j.find((W)=>G(W,"selected")),Q)this.setAttribute("value",this.#G(Q)),U=!0}for(let W of j){let z=W===Q;if(W.setAttribute("aria-selected",z?"true":"false"),z)W.setAttribute("selected","");else W.removeAttribute("selected")}let X=Q&&this.#Rj(Q)||this.getAttribute("label")||"";if(this.#R)this.#R.textContent=X;this.#Zj(Q);let Z=this.getAttribute("label")||"Select";if(this.#J?.setAttribute("aria-label",Z),this.#H()?.syncOverflow?.(),U)this.#Wj(this.getAttribute("value")??"")}finally{this.#F=!1}}#Hj(j){if(G(this,"disabled"))return;j.preventDefault(),j.stopPropagation();let J=!this.open;if(J&&this.#K&&this.#J)this.#K.anchor=this.#J;this.open=J}#I(j){let K=(typeof j.composedPath==="function"?j.composedPath():[]).find((Q)=>Q?.tagName==="FIG-SELECT-OPTION");if(!K||!this.contains(K))return;if(G(K,"disabled"))return;this.#Kj(K)}#N(j){let K=(typeof j.composedPath==="function"?j.composedPath():[]).find((Q)=>Q?.tagName==="FIG-SELECT-OPTION");if(!K||!this.contains(K))return;if(G(K,"disabled"))return;if(j.relatedTarget instanceof Node&&K.contains(j.relatedTarget))return;this.dispatchEvent(new CustomEvent("optionhover",{detail:this.#G(K),bubbles:!0,composed:!0}))}#jj(j){if(j.currentTarget===document&&j.key!=="Escape")return;if(!(this.open&&(this.#K?.matches?.(":open")??!1))){if(this.#J?.contains(j.target)&&(j.key==="ArrowDown"||j.key==="Enter"||j.key===" ")){if(j.preventDefault(),this.#K&&this.#J)this.#K.anchor=this.#J;this.open=!0,requestAnimationFrame(()=>{let U=this.#y({enabledOnly:!0}).findIndex((X)=>this.#G(X)===this.value);this.#x(U>=0?U:0)})}return}let K=this.#y({enabledOnly:!0});if(!K.length)return;switch(j.key){case"ArrowDown":j.preventDefault(),this.#Qj(),this.#x(this.#Q+1);break;case"ArrowUp":j.preventDefault(),this.#Qj(),this.#x(this.#Q-1);break;case"Home":j.preventDefault(),this.#x(0);break;case"End":j.preventDefault(),this.#x(K.length-1);break;case"Escape":j.preventDefault(),this.open=!1,this.#J?.focus();break;case"Enter":case" ":{this.#Qj();let Q=K[this.#Q];if(!Q)return;j.preventDefault(),this.#Kj(Q);break}}}#Jj(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#J?.setAttribute("aria-expanded","false"),this.#J?.focus(),this.#Q=-1}#Kj(j){let J=this.#G(j);this.setAttribute("value",J),this.#P(),this.#Wj(J),this.open=!1}#n(){return this.#y({enabledOnly:!0})}#Qj(){let j=this.#n();if(!j.length){this.#Q=-1;return}let J=j.find((Q)=>Q===document.activeElement),K=J?j.indexOf(J):-1;this.#Q=K>=0?K:this.#Q}#x(j){let J=this.#n();if(!J.length)return;let K=(j%J.length+J.length)%J.length;this.#Q=K,J[K]?.focus()}#Oj(){if(!this.#K||!this.#J)return;let j=Math.ceil(this.getBoundingClientRect().width),J=Math.ceil(this.#J.getBoundingClientRect().width),K=Math.max(j,J,96);this.#K.style.setProperty("width","max-content","important"),this.#K.style.setProperty("min-width",`${K}px`,"important"),this.#K.style.setProperty("max-width","min(20rem, calc(100vw - 1rem))","important")}#w(){if(!this.#K||G(this,"disabled"))return;if(this.#J)this.#K.anchor=this.#J;this.#d(),this.#$=!1,this.#W=null,this.#k=null,this.#P(),this.#Oj(),this.#K.open=!0,document.addEventListener("keydown",this.#O,!0),this.#J?.setAttribute("aria-expanded","true"),this.#Q=-1,requestAnimationFrame(()=>{this.#Oj(),this.#B();let j=this.#H(),K=this.#n().findIndex((Q)=>this.#G(Q)===this.value);if(K>=0)this.#x(K);else if(this.#J?.hasAttribute("data-focus-visible")||this.#J?.matches?.(":focus-visible"))this.#x(0);j?.syncOverflow?.(),this.#$=!0,this.#p()})}#Tj(){if(!this.#K)return;this.#$=!1,this.#W=null,this.#k=null,document.removeEventListener("keydown",this.#O,!0),this.#K.open=!1,this.#J?.setAttribute("aria-expanded","false")}}B("fig-select",I);var d=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],c=["shorter","longer","increasing","decreasing"],F=new Set(["oklch","hsl"]);function T(j){let J={...j??{}},K=String(J.interpolationSpace??"srgb").toLowerCase();if(!d.includes(K))K="srgb";J.interpolationSpace=K;let Q=String(J.hueInterpolation??"shorter").toLowerCase();return J.hueInterpolation=c.includes(Q)?Q:"shorter",J}function q(j){let J=T(j),K={...J,interpolationSpace:J.interpolationSpace};if(F.has(J.interpolationSpace))K.hueInterpolation=J.hueInterpolation;else delete K.hueInterpolation;return K}function p(j){let J=T(j);if(J.interpolationSpace==="srgb")return"";if(F.has(J.interpolationSpace))return`in ${J.interpolationSpace} ${J.hueInterpolation} hue`;return`in ${J.interpolationSpace}`}function S(j){let J=T(j);if(F.has(J.interpolationSpace))return`${J.interpolationSpace}-${J.hueInterpolation||"shorter"}`;return J.interpolationSpace}function M(j){let J=String(j??"");for(let K of F){let Q=`${K}-`;if(J.startsWith(Q))return{interpolationSpace:K,hueInterpolation:J.slice(Q.length)||"shorter"}}return{interpolationSpace:J||"srgb",hueInterpolation:"shorter"}}var s=0;class H extends HTMLElement{#J=null;#K=null;#j=null;#R=`fig-fill-picker-dialog-${++s}`;#V="solid";anchorElement=null;#Z="solid";#_="srgb";#Q={h:0,s:0,v:85,a:1};#F="hex";#U={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#X={url:null,scaleMode:"fill",scale:50};#$={url:null,scaleMode:"fill",scale:50};#W={stream:null,snapshot:null};#k={};#g={};#z=null;#L=null;#q=null;#O=null;#C=!1;#T=!1;#M=null;#A=null;#H=null;#S=null;#e=null;#b=0;#l=null;#d=null;#c=new Set;#r=new Set;constructor(){super();this.#l=this.#kj.bind(this),this.#d=this.#Gj.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",this.#D(()=>{this.#fj(),this.#Yj(),this.#f()})}disconnectedCallback(){if(this.#Zj(),this.#zj(),this.#Lj(),this.#K)this.#K.removeAttribute("selected");if(this.#J)this.#J.removeEventListener("click",this.#l),this.#J.removeEventListener("keydown",this.#d);this.#J=null,this.#K=null}#E(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#D(j){let J=requestAnimationFrame(()=>{if(this.#c.delete(J),this.isConnected)j()});return this.#c.add(J),J}#zj(){this.#c.forEach((j)=>cancelAnimationFrame(j)),this.#c.clear()}#Lj(){if(this.#r.forEach((j)=>URL.revokeObjectURL(j)),this.#r.clear(),this.#W.snapshot?.startsWith("blob:")){if(this.#X.url===this.#W.snapshot)this.#X.url=null;this.#W.snapshot=null}}#fj(){let j=Array.from(this.children).find((J)=>!J.getAttribute("slot")?.startsWith("mode-"));if(!j)this.#K=document.createElement("fig-swatch"),this.#K.setAttribute("background","#D9D9D9"),this.appendChild(this.#K),this.#J=this.#K;else if(j.matches("fig-swatch, fig-chit"))this.#K=j,this.#J=j;else this.#J=j,this.#K=null;if(this.#B(),this.#J.removeEventListener("click",this.#l),this.#J.addEventListener("click",this.#l),this.#J.removeEventListener("keydown",this.#d),this.#J.addEventListener("keydown",this.#d),this.#K)this.#D(()=>{let J=this.#K.querySelector('input[type="color"]');if(J)J.remove();this.#B()})}#p(){return this.getAttribute("aria-label")||"Fill picker"}#B(){if(!this.#J)return;let j=this.#E(),J=this.getAttribute("aria-labelledby");if(!this.#J.hasAttribute("role"))this.#J.setAttribute("role","button");if(this.#J.setAttribute("tabindex",j?"-1":"0"),this.#J.setAttribute("aria-disabled",j?"true":"false"),this.#J.setAttribute("aria-haspopup","dialog"),this.#J.setAttribute("aria-expanded",this.#j?.open?"true":"false"),this.#J.setAttribute("aria-controls",this.#R),this.#J.removeAttribute("aria-hidden"),J)this.#J.setAttribute("aria-labelledby",J),this.#J.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#J.setAttribute("aria-label",`Open ${this.#p()}`),this.#J.removeAttribute("aria-labelledby");else if(this.#J.removeAttribute("aria-labelledby"),!this.#J.hasAttribute("aria-label"))this.#J.setAttribute("aria-label",`Open ${this.#p()}`);let K=this.getAttribute("aria-describedby");if(K)this.#J.setAttribute("aria-describedby",K);else this.#J.removeAttribute("aria-describedby")}#kj(j){if(this.#E())return;j.stopPropagation(),j.preventDefault(),this.#G()}#Gj(j){if(j.key!=="Enter"&&j.key!==" ")return;if(this.#E())return;j.preventDefault(),j.stopPropagation(),this.#G()}#Yj(){let j=this.getAttribute("value");if(!j)return;let J=["solid","gradient","image","video","webcam"];try{let K=JSON.parse(j);if(K.type)this.#Z=K.type;if(K.color){if(typeof K.color==="string")this.#Q=this.#t(K.color);else if(typeof K.color==="object"&&K.color.h!==void 0)this.#Q=K.color}let Q=K.alpha!==void 0?Number(K.alpha):K.opacity!==void 0?Number(K.opacity)/100:void 0;if(Number.isFinite(Q))this.#Q.a=Math.max(0,Math.min(1,Q));if(this.#_="srgb",K.gradient)this.#U=T({...this.#U,...K.gradient});if(K.image)this.#X={...this.#X,...K.image};if(K.video)this.#$={...this.#$,...K.video};if(K.type&&!J.includes(K.type)){let{type:U,...X}=K;this.#g[K.type]=X}}catch(K){if(j.startsWith("#"))this.#Z="solid",this.#Q=this.#t(j)}}#f(){if(!this.#K)return;let j,J="cover",K="center";switch(this.#Z){case"solid":j=this.#m(this.#Q);break;case"gradient":j=this.#Mj();break;case"image":if(this.#X.url){j=`url(${this.#X.url})`;let U=this.#y(this.#X.scaleMode,this.#X.scale);J=U.size,K=U.position}else j="";break;case"video":if(this.#$.url){j=`url(${this.#$.url})`;let U=this.#y(this.#$.scaleMode,this.#$.scale);J=U.size,K=U.position}else j="";break;default:j=this.#k[this.#Z]?.element?.getAttribute("swatch-background")||"#D9D9D9"}if(this.#K.setAttribute("background",j),this.#K.style.setProperty("--swatch-bg-size",J),this.#K.style.setProperty("--swatch-bg-position",K),this.#Z==="solid")this.#K.setAttribute("alpha",this.#Q.a);else this.#K.removeAttribute("alpha")}#y(j,J){switch(j){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:`${J}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#G(){if(this.#E())return;if(!this.#j)this.#$j();if(this.#H=JSON.stringify(this.value),this.#S=this.#H,this.#o(this.#Z,{emit:!1}),this.#K)this.#K.setAttribute("selected","true");this.#j.open=!0,this.#B(),this.#D(()=>{this.#j?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#D(()=>{this.#I(),this.#N()})})}open(){this.#G()}close(){if(this.#j)this.#j.open=!1,this.#B()}#Rj(){if(!this.#j)return;for(let[j,{element:J}]of Object.entries(this.#k)){let K=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((Q)=>Q.dataset.tab===j);if(!K)continue;while(K.firstChild)J.appendChild(K.firstChild)}}#Zj(){if(this.#M)this.#M(),this.#M=null;if(this.#A?.disconnect(),this.#A=null,this.#s(),!this.#j)return;this.#Rj(),this.#j.remove(),this.#j=null,this.#e=null,this.#H=null,this.#S=null,this.#z=null,this.#L=null,this.#q=null,this.#O=null,this.#T=!1,this.#B()}#s(){if(this.#b+=1,this.#W.stream)this.#W.stream.getTracks().forEach((J)=>J.stop()),this.#W.stream=null;let j=this.#j?.querySelector(".fig-fill-picker-webcam-video");if(j)j.srcObject=null}#$j(){this.#k={},this.querySelectorAll('[slot^="mode-"]').forEach((Y)=>{let $=Y.getAttribute("slot").slice(5);this.#k[$]={element:Y,label:Y.getAttribute("label")||$.charAt(0).toUpperCase()+$.slice(1)}}),this.#j=document.createElement("dialog",{is:"fig-popup"}),this.#j.setAttribute("is","fig-popup"),this.#j.id=this.#R,this.#j.setAttribute("aria-label",this.#p()),this.#j.setAttribute("drag","true"),this.#j.setAttribute("handle","fig-header"),this.#j.setAttribute("autoresize","false"),this.#j.classList.add("fig-fill-picker-dialog"),this.#j.anchor=this.anchorElement||this.#J;let j=this.getAttribute("dialog-position")||"left";this.#j.setAttribute("position",j),this.#j.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let J=["solid","gradient","image","video","webcam"],K={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},Q=this.getAttribute("mode"),U;if(Q){if(U=Q.split(",").map(($)=>$.trim().toLowerCase()).filter(($)=>J.includes($)||this.#k[$]),U.length===0)U=[...J]}else U=[...J];let X={...K};for(let[Y,{label:$}]of Object.entries(this.#k))X[Y]=$;if(!U.includes(this.#Z))this.#Z=U[0],this.#V=U[0];let Z;if(U.length===1)Z=`<h3 class="fig-fill-picker-type-label">${R(X[U[0]])}</h3>`;else{let Y=U.map(($)=>`<fig-select-option value="${R($)}">${R(X[$])}</fig-select-option>`).join(`
|
|
93
|
+
`);Z=`<fig-select class="fig-fill-picker-type" label="Fill type" value="${R(this.#Z)}">
|
|
3
94
|
<fig-select-options>
|
|
4
95
|
${Y}
|
|
5
96
|
</fig-select-options>
|
|
6
|
-
</fig-select>`}let
|
|
97
|
+
</fig-select>`}let W=U.map((Y)=>`<div class="fig-fill-picker-tab" data-tab="${R(Y)}"></div>`).join(`
|
|
7
98
|
`);this.#j.innerHTML=`
|
|
8
99
|
<fig-header>
|
|
9
100
|
${Z}
|
|
@@ -12,9 +103,9 @@ import"./fig.js";import"./fig-lab.js";function E(j,J){if(!customElements.get(j))
|
|
|
12
103
|
</fig-button>
|
|
13
104
|
</fig-header>
|
|
14
105
|
<fig-content>
|
|
15
|
-
${
|
|
106
|
+
${W}
|
|
16
107
|
</fig-content>
|
|
17
|
-
`,document.body.appendChild(this.#j);for(let[Y,{element:$}]of Object.entries(this.#k)){let f=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((
|
|
108
|
+
`,document.body.appendChild(this.#j);for(let[Y,{element:$}]of Object.entries(this.#k)){let f=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((D)=>D.dataset.tab===Y);if(!f)continue;while($.firstChild)f.appendChild($.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:Y,container:f}}))}let z=this.#j.querySelector(".fig-fill-picker-type");if(z)z.addEventListener("change",(Y)=>{let $=typeof Y.detail==="string"?Y.detail:Y.target?.value;if($)this.#o($)});this.#j.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#j.open=!1});let O=()=>{if(this.#K)this.#K.removeAttribute("selected");this.#s();let Y=JSON.stringify(this.value);if(this.#S!==null&&this.#S!==Y)this.#u();this.#H=null,this.#S=null,this.#B();let $=this.#J;this.#D(()=>{if($?.isConnected)HTMLElement.prototype.focus.call($)}),this.dispatchEvent(new CustomEvent("close"))};this.#j.addEventListener("close",O);let L={solid:()=>this.#P(),gradient:()=>this.#Tj(),image:()=>this.#gj(),video:()=>this.#hj(),webcam:()=>this.#dj()};for(let[Y,$]of Object.entries(L))if(!this.#k[Y]&&U.includes(Y))$();for(let Y of Object.keys(this.#k)){if(J.includes(Y))continue;let $=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((f)=>f.dataset.tab===Y);if(!$)continue;$.addEventListener("input",(f)=>{if(f.target===this)return;if(f.stopPropagation(),f.detail)this.#g[Y]=f.detail;this.#Y()}),$.addEventListener("change",(f)=>{if(f.target===this)return;if(f.stopPropagation(),f.detail)this.#g[Y]=f.detail;this.#u()})}}#o(j,{emit:J=!0}={}){let K=Array.from(this.#j?.querySelectorAll(".fig-fill-picker-tab")??[]).find((W)=>W.dataset.tab===j);if(!K)return;let Q=this.#V;if(this.#V=j,this.#Z=j,Q==="webcam"&&j!=="webcam")this.#s();let U=this.#j.querySelector(".fig-fill-picker-type");if(U&&U.value!==j)U.value=j;this.#j.querySelectorAll(".fig-fill-picker-tab").forEach((W)=>{if(W.dataset.tab===j)W.style.display="block";else W.style.display="none"});let Z=this.#j.querySelector("fig-content");if(Z)Z.style.padding=this.#k[j]?"0":"";if(j==="gradient")this.#D(()=>{this.#v();let W=K.querySelector(".fig-fill-picker-gradient-bar-input");W?.refreshLayout?.(),this.#D(()=>{W?.refreshLayout?.()})});if(j==="webcam")this.#e?.();if(this.#f(),J)this.#Y()}#Wj(){if(!this.#j?.open)return;if(this.#o(this.#Z,{emit:!1}),this.#I(),this.#N(),this.#w(),this.#q)this.#q.setAttribute("value",this.#Q.h);if(this.#O)this.#O.setAttribute("value",this.#Q.a*100),this.#O.setAttribute("color",this.#m(this.#Q));this.#v();let j=this.#j.querySelector('[data-tab="image"]'),J=j?.querySelector(".fig-fill-picker-scale-mode"),K=j?.querySelector(".fig-fill-picker-scale"),Q=j?.querySelector(".fig-fill-picker-image-preview");if(J)J.value=this.#X.scaleMode;if(K)K.setAttribute("value",this.#X.scale),K.style.display=this.#X.scaleMode==="tile"?"block":"none";if(Q)this.#i(Q);let U=this.#j.querySelector('[data-tab="video"]'),X=U?.querySelector(".fig-fill-picker-scale-mode"),Z=U?.querySelector(".fig-fill-picker-video-preview");if(X)X.value=this.#$.scaleMode;if(Z)this.#Xj(Z)}#P(){let j=this.#j.querySelector('[data-tab="solid"]'),J=this.getAttribute("alpha")!=="false";if(j.innerHTML=`
|
|
18
109
|
<fig-preview class="fig-fill-picker-color-area">
|
|
19
110
|
<canvas width="200" height="200"></canvas>
|
|
20
111
|
<fig-handle
|
|
@@ -23,7 +114,7 @@ import"./fig.js";import"./fig-lab.js";function E(j,J){if(!customElements.get(j))
|
|
|
23
114
|
aria-valuemin="0"
|
|
24
115
|
aria-valuemax="100"
|
|
25
116
|
type="color"
|
|
26
|
-
color="${this.#
|
|
117
|
+
color="${this.#m({...this.#Q,a:1})}"
|
|
27
118
|
data-no-color-picker
|
|
28
119
|
drag
|
|
29
120
|
drag-surface=".fig-fill-picker-color-area"
|
|
@@ -33,11 +124,11 @@ import"./fig.js";import"./fig-lab.js";function E(j,J){if(!customElements.get(j))
|
|
|
33
124
|
</fig-preview>
|
|
34
125
|
<div class="fig-fill-picker-sliders${J?"":" is-hue-only"}">
|
|
35
126
|
<fig-tooltip text="Sample color"><fig-button icon variant="ghost" class="fig-fill-picker-eyedropper" aria-label="Sample color"><fig-icon name="eyedropper"></fig-icon></fig-button></fig-tooltip>
|
|
36
|
-
<fig-slider type="hue" variant="classic" text="false" min="0" max="360" aria-label="Hue" value="${this.#
|
|
37
|
-
${J?`<fig-slider type="opacity" variant="classic" text="false" min="0" max="100" aria-label="Opacity" value="${this.#
|
|
127
|
+
<fig-slider type="hue" variant="classic" text="false" min="0" max="360" aria-label="Hue" value="${this.#Q.h}"></fig-slider>
|
|
128
|
+
${J?`<fig-slider type="opacity" variant="classic" text="false" min="0" max="100" aria-label="Opacity" value="${this.#Q.a*100}" color="${this.#m(this.#Q)}"></fig-slider>`:""}
|
|
38
129
|
</div>
|
|
39
130
|
<fig-field class="fig-fill-picker-inputs">
|
|
40
|
-
<fig-select class="fig-fill-picker-input-mode" label="Color value format" value="${
|
|
131
|
+
<fig-select class="fig-fill-picker-input-mode" label="Color value format" value="${R(this.#F)}">
|
|
41
132
|
<fig-select-options>
|
|
42
133
|
<fig-select-option value="hex">Hex</fig-select-option>
|
|
43
134
|
<fig-select-option value="rgb">RGB</fig-select-option>
|
|
@@ -50,37 +141,37 @@ import"./fig.js";import"./fig-lab.js";function E(j,J){if(!customElements.get(j))
|
|
|
50
141
|
</fig-select>
|
|
51
142
|
<span class="fig-fill-picker-input-fields"></span>
|
|
52
143
|
</fig-field>
|
|
53
|
-
`,this.#
|
|
144
|
+
`,this.#z=j.querySelector("canvas"),this.#L=j.querySelector("fig-handle"),this.#jj(),this.#I(),this.#N(),this.#Kj(),this.#q=j.querySelector('fig-slider[type="hue"]'),this.#q.addEventListener("input",(U)=>{this.#Q.h=parseFloat(U.target.value),this.#I(),this.#N(),this.#w(),this.#Y()}),this.#q.addEventListener("change",()=>{this.#u()}),J)this.#O=j.querySelector('fig-slider[type="opacity"]'),this.#O.addEventListener("input",(U)=>{this.#Q.a=parseFloat(U.target.value)/100,this.#w(),this.#Y()}),this.#O.addEventListener("change",()=>{this.#u()});j.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(U)=>{let X=typeof U.detail==="string"?U.detail:U.target?.value;if(!X)return;this.#F=X,this.#n()}),this.#n();let Q=j.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)Q.addEventListener("click",async()=>{try{let X=await new EyeDropper().open();this.#Q={...this.#t(X.sRGBHex),a:this.#Q.a},this.#I(),this.#N(),this.#w(),this.#Y()}catch(U){}});else Q.setAttribute("disabled",""),Q.title="EyeDropper not supported in this browser"}#Hj(){let j=this.#j?.querySelector('[data-tab="solid"]');if(j){let J=j.querySelector("canvas");if(J){let K=document.createElement("canvas");K.width=J.width,K.height=J.height,J.replaceWith(K),this.#z=K,this.#Kj()}this.#I(),this.#N()}this.#h(),this.#Y()}#I(){if(!this.#z&&this.#j)this.#z=this.#j.querySelector('[data-tab="solid"] canvas');if(!this.#z)return;let j=this.#_==="display-p3"?"display-p3":"srgb",J=this.#z.getContext("2d",{colorSpace:j});if(!J)return;let K=this.#z.width,Q=this.#z.height;J.clearRect(0,0,K,Q);let U=this.#Q.h,X=this.#_==="display-p3",Z=J.createLinearGradient(0,0,K,0);if(X){Z.addColorStop(0,"color(display-p3 1 1 1)");let[z,O,L]=hslToP3(U,100,50);Z.addColorStop(1,`color(display-p3 ${z} ${O} ${L})`)}else Z.addColorStop(0,"#FFFFFF"),Z.addColorStop(1,`hsl(${U}, 100%, 50%)`);J.fillStyle=Z,J.fillRect(0,0,K,Q);let W=J.createLinearGradient(0,0,0,Q);W.addColorStop(0,"rgba(0,0,0,0)"),W.addColorStop(1,"rgba(0,0,0,1)"),J.fillStyle=W,J.fillRect(0,0,K,Q)}#N(j=0){if(!this.#L||!this.#z)return;this.#jj();let J=this.#z.getBoundingClientRect();if((J.width===0||J.height===0)&&j<5){this.#D(()=>this.#N(j+1));return}let K=Math.max(0,Math.min(100,this.#Q.s)),Q=Math.max(0,Math.min(100,100-this.#Q.v));this.#L.setAttribute("value",`${K}% ${Q}%`),this.#L.setAttribute("color",this.#m({...this.#Q,a:1}))}#jj(){if(!this.#L)return;this.#L.setAttribute("aria-valuenow",String(Math.round(this.#Q.v))),this.#L.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#Q.s)}%, brightness ${Math.round(this.#Q.v)}%`),this.#L.removeAttribute("aria-pressed")}#Jj(j,J,K={}){let{updateHandle:Q=!0,emitInput:U=!0,emitChange:X=!1}=K;if(this.#Q.s=Math.max(0,Math.min(100,j*100)),this.#Q.v=Math.max(0,Math.min(100,(1-J)*100)),this.#L)this.#L.setAttribute("color",this.#m({...this.#Q,a:1})),this.#jj();if(Q)this.#N();if(this.#w(),U)this.#Y();if(X)this.#u()}#Kj(){if(this.#M)this.#M(),this.#M=null;if(!this.#z||!this.#L)return;let j=this.#z.parentElement||this.#z,J=this.#L,K=!1,Q=(O,L={})=>{let Y=j.getBoundingClientRect();if(Y.width===0||Y.height===0)return;let $=Math.max(0,Math.min(O.clientX-Y.left,Y.width)),f=Math.max(0,Math.min(O.clientY-Y.top,Y.height));this.#Jj($/Y.width,f/Y.height,L)},U=(O)=>{if(O.button!==0)return;if(O.target===J||J.contains(O.target))return;K=!0,this.#C=!0,j.setPointerCapture(O.pointerId),Q(O,{updateHandle:!0,emitInput:!0})},X=(O)=>{if(!K)return;if(O.buttons===0){Z();return}Q(O,{updateHandle:!0,emitInput:!0})},Z=()=>{if(!K)return;K=!1,this.#C=!1,this.#u()},W=(O)=>{this.#C=!0;let L=O.detail?.px,Y=O.detail?.py;if(!Number.isFinite(L)||!Number.isFinite(Y))return;J.setAttribute("value",`${L*100}% ${Y*100}%`),this.#Jj(L,Y,{updateHandle:!1,emitInput:!0})},z=(O)=>{let L=O.detail?.px,Y=O.detail?.py;if(Number.isFinite(L)&&Number.isFinite(Y))J.setAttribute("value",`${L*100}% ${Y*100}%`),this.#Jj(L,Y,{updateHandle:!1,emitInput:!1});this.#C=!1,this.#u()};j.addEventListener("pointerdown",U),j.addEventListener("pointermove",X),j.addEventListener("pointerup",Z),j.addEventListener("pointercancel",Z),j.addEventListener("lostpointercapture",Z),J.addEventListener("input",W),J.addEventListener("change",z),this.#M=()=>{j.removeEventListener("pointerdown",U),j.removeEventListener("pointermove",X),j.removeEventListener("pointerup",Z),j.removeEventListener("pointercancel",Z),j.removeEventListener("lostpointercapture",Z),J.removeEventListener("input",W),J.removeEventListener("change",z),this.#C=!1}}#n(){let j=this.#j?.querySelector(".fig-fill-picker-input-fields");if(!j)return;let J=(Z,W)=>`<fig-tooltip text="${Z}">${W}</fig-tooltip>`,K=(Z,W,z,O,L,Y)=>`<fig-input-number class="${Z}" aria-label="${W}" min="${z}" max="${O}"${L!=null?` step="${L}"`:""}${Y?` units="${Y}"`:""}></fig-input-number>`,Q=this.getAttribute("alpha")!=="false",U=()=>Q?J("Alpha",K("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):"",X;switch(this.#F){case"rgb":X=`<div class="input-combo">
|
|
54
145
|
${J("Red",K("fig-fill-picker-ci-r","Red",0,255))}
|
|
55
146
|
${J("Green",K("fig-fill-picker-ci-g","Green",0,255))}
|
|
56
147
|
${J("Blue",K("fig-fill-picker-ci-b","Blue",0,255))}
|
|
57
|
-
${
|
|
148
|
+
${U()}
|
|
58
149
|
</div>`;break;case"hsl":X=`<div class="input-combo">
|
|
59
150
|
${J("Hue",K("fig-fill-picker-ci-h","Hue",0,360))}
|
|
60
151
|
${J("Saturation",K("fig-fill-picker-ci-s","Saturation",0,100))}
|
|
61
152
|
${J("Lightness",K("fig-fill-picker-ci-l","Lightness",0,100))}
|
|
62
|
-
${
|
|
153
|
+
${U()}
|
|
63
154
|
</div>`;break;case"hsb":X=`<div class="input-combo">
|
|
64
155
|
${J("Hue",K("fig-fill-picker-ci-h","Hue",0,360))}
|
|
65
156
|
${J("Saturation",K("fig-fill-picker-ci-s","Saturation",0,100))}
|
|
66
157
|
${J("Brightness",K("fig-fill-picker-ci-v","Brightness",0,100))}
|
|
67
|
-
${
|
|
158
|
+
${U()}
|
|
68
159
|
</div>`;break;case"lab":X=`<div class="input-combo">
|
|
69
160
|
${J("Lightness",K("fig-fill-picker-ci-okl","Lightness",0,100))}
|
|
70
161
|
${J("Green-Red axis",K("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001))}
|
|
71
162
|
${J("Blue-Yellow axis",K("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001))}
|
|
72
|
-
${
|
|
163
|
+
${U()}
|
|
73
164
|
</div>`;break;case"lch":X=`<div class="input-combo">
|
|
74
165
|
${J("Lightness",K("fig-fill-picker-ci-okl","Lightness",0,100))}
|
|
75
166
|
${J("Chroma",K("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001))}
|
|
76
167
|
${J("Hue",K("fig-fill-picker-ci-okh","Hue",0,360))}
|
|
77
|
-
${
|
|
78
|
-
</div>`;break;case"css":X='<fig-input-text class="fig-fill-picker-ci-css" aria-label="CSS color" placeholder="rgba(0, 0, 0, 1)"></fig-input-text>';break;default:X=
|
|
168
|
+
${U()}
|
|
169
|
+
</div>`;break;case"css":X='<fig-input-text class="fig-fill-picker-ci-css" aria-label="CSS color" placeholder="rgba(0, 0, 0, 1)"></fig-input-text>';break;default:X=Q?`<div class="input-combo fig-fill-picker-ci-hex-row">
|
|
79
170
|
<fig-input-text class="fig-fill-picker-ci-hex" aria-label="Hex color" placeholder="FFFFFF"></fig-input-text>
|
|
80
|
-
${
|
|
81
|
-
</div>`:'<fig-input-text class="fig-fill-picker-ci-hex" aria-label="Hex color" placeholder="FFFFFF"></fig-input-text>';break}j.innerHTML=X,this.#
|
|
171
|
+
${U()}
|
|
172
|
+
</div>`:'<fig-input-text class="fig-fill-picker-ci-hex" aria-label="Hex color" placeholder="FFFFFF"></fig-input-text>';break}j.innerHTML=X,this.#Qj(),this.#D(()=>this.#w())}#Qj(){let j=this.#j?.querySelector(".fig-fill-picker-input-fields");if(!j)return;let J=()=>{if(this.#C)return;let U=this.#Oj();if(!U)return;let X=Number.isFinite(U.a)?U.a:this.#Q.a;if(this.#Q={...U,a:X},this.#I(),this.#N(),this.#q)this.#q.setAttribute("value",this.#Q.h);if(this.#O&&Number.isFinite(U.a))this.#O.setAttribute("value",this.#Q.a*100);this.#Y()},K=()=>this.#u();j.querySelectorAll("fig-input-number, fig-input-text").forEach((U)=>{U.addEventListener("input",J),U.addEventListener("change",K)})}#x(){let j=this.#j?.querySelector(".fig-fill-picker-ci-a");if(!j)return;let J=parseFloat(j.value);if(!Number.isFinite(J))return;return Math.max(0,Math.min(1,J/100))}#Oj(){let j=(Q)=>this.#j?.querySelector(`.${Q}`),J=(Q)=>parseFloat(j(Q)?.value??0),K=(Q)=>{if(!Q)return null;let U=this.#x();return{...Q,a:U??Q.a??this.#Q.a}};switch(this.#F){case"rgb":return K(this.#a({r:J("fig-fill-picker-ci-r"),g:J("fig-fill-picker-ci-g"),b:J("fig-fill-picker-ci-b")}));case"hsl":{let Q=this.#nj({h:J("fig-fill-picker-ci-h"),s:J("fig-fill-picker-ci-s"),l:J("fig-fill-picker-ci-l")});return K(this.#a(Q))}case"hsb":return K({h:J("fig-fill-picker-ci-h"),s:J("fig-fill-picker-ci-s"),v:J("fig-fill-picker-ci-v")});case"lab":{let Q=this.#Aj({l:J("fig-fill-picker-ci-okl")/100,a:J("fig-fill-picker-ci-oka"),b:J("fig-fill-picker-ci-okb")});return K(this.#a(Q))}case"lch":{let Q=this.#tj({l:J("fig-fill-picker-ci-okl")/100,c:J("fig-fill-picker-ci-okc"),h:J("fig-fill-picker-ci-okh")});return K(this.#a(Q))}case"css":{let Q=j("fig-fill-picker-ci-css");if(!Q)return null;return this.#lj(Q.value)}default:{let Q=j("fig-fill-picker-ci-hex");if(!Q)return null;let U=Q.value.replace(/^#/,"");if(U.length===3)U=U[0]+U[0]+U[1]+U[1]+U[2]+U[2];if(U.length===8){let X=parseInt(U.slice(6,8),16)/255;if(U=U.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(U))return null;return{...this.#t(`#${U}`),a:X}}if(U.length!==6||!/^[0-9a-fA-F]{6}$/.test(U))return null;return K(this.#t(`#${U}`))}}}#w(){if(!this.#j)return;let j=this.#m(this.#Q),J=this.#qj(this.#Q),K=(U)=>this.#j.querySelector(`.${U}`),Q=(U,X)=>{let Z=K(U);if(Z)Z.setAttribute("value",X)};switch(this.#F){case"rgb":Q("fig-fill-picker-ci-r",J.r),Q("fig-fill-picker-ci-g",J.g),Q("fig-fill-picker-ci-b",J.b);break;case"hsl":{let U=this.#oj(J);Q("fig-fill-picker-ci-h",Math.round(U.h)),Q("fig-fill-picker-ci-s",Math.round(U.s)),Q("fig-fill-picker-ci-l",Math.round(U.l));break}case"hsb":Q("fig-fill-picker-ci-h",Math.round(this.#Q.h)),Q("fig-fill-picker-ci-s",Math.round(this.#Q.s)),Q("fig-fill-picker-ci-v",Math.round(this.#Q.v));break;case"lab":{let U=this.#Ej(J);Q("fig-fill-picker-ci-okl",Math.round(U.l*100)),Q("fig-fill-picker-ci-oka",+U.a.toFixed(3)),Q("fig-fill-picker-ci-okb",+U.b.toFixed(3));break}case"lch":{let U=this.#aj(J);Q("fig-fill-picker-ci-okl",Math.round(U.l*100)),Q("fig-fill-picker-ci-okc",+U.c.toFixed(3)),Q("fig-fill-picker-ci-okh",Math.round(U.h));break}case"css":Q("fig-fill-picker-ci-css",this.#ij(this.#Q));break;default:Q("fig-fill-picker-ci-hex",j.replace(/^#/,"").toUpperCase());break}if(this.#F!=="css"){let U=Math.round(this.#Q.a*1000)/10;Q("fig-fill-picker-ci-a",Number.isInteger(U)?U:+U.toFixed(1))}if(this.#O)this.#O.setAttribute("color",j);this.#f()}#Tj(){let j=this.#j.querySelector('[data-tab="gradient"]'),J=S(this.#U);j.innerHTML=`
|
|
82
173
|
<fig-field class="fig-fill-picker-gradient-header">
|
|
83
|
-
<fig-select class="fig-fill-picker-gradient-type" label="Gradient type" value="${
|
|
174
|
+
<fig-select class="fig-fill-picker-gradient-type" label="Gradient type" value="${R(this.#U.type)}">
|
|
84
175
|
<fig-select-options>
|
|
85
176
|
<fig-select-option value="linear">Linear</fig-select-option>
|
|
86
177
|
<fig-select-option value="radial">Radial</fig-select-option>
|
|
@@ -88,11 +179,11 @@ import"./fig.js";import"./fig-lab.js";function E(j,J){if(!customElements.get(j))
|
|
|
88
179
|
</fig-select-options>
|
|
89
180
|
</fig-select>
|
|
90
181
|
<fig-tooltip text="Gradient angle">
|
|
91
|
-
<fig-input-number class="fig-fill-picker-gradient-angle" aria-label="Gradient angle" value="${(this.#
|
|
182
|
+
<fig-input-number class="fig-fill-picker-gradient-angle" aria-label="Gradient angle" value="${(this.#U.angle-90+360)%360}" min="0" max="360" units="°" wrap></fig-input-number>
|
|
92
183
|
</fig-tooltip>
|
|
93
184
|
<div class="fig-fill-picker-gradient-center input-combo" style="display: none;">
|
|
94
|
-
<fig-input-number min="0" max="100" aria-label="Gradient center X" value="${this.#
|
|
95
|
-
<fig-input-number min="0" max="100" aria-label="Gradient center Y" value="${this.#
|
|
185
|
+
<fig-input-number min="0" max="100" aria-label="Gradient center X" value="${this.#U.centerX}" units="%" class="fig-fill-picker-gradient-cx"></fig-input-number>
|
|
186
|
+
<fig-input-number min="0" max="100" aria-label="Gradient center Y" value="${this.#U.centerY}" units="%" class="fig-fill-picker-gradient-cy"></fig-input-number>
|
|
96
187
|
</div>
|
|
97
188
|
<div class="fig-fill-picker-gradient-actions">
|
|
98
189
|
<fig-tooltip text="Flip gradient">
|
|
@@ -108,7 +199,7 @@ import"./fig.js";import"./fig-lab.js";function E(j,J){if(!customElements.get(j))
|
|
|
108
199
|
</div>
|
|
109
200
|
</fig-field>
|
|
110
201
|
<fig-preview class="fig-fill-picker-gradient-preview">
|
|
111
|
-
<fig-input-gradient class="fig-fill-picker-gradient-bar-input" aria-label="Gradient stops" edit="true" mode="tip" size="large" value='${JSON.stringify({type:"gradient",gradient:
|
|
202
|
+
<fig-input-gradient class="fig-fill-picker-gradient-bar-input" aria-label="Gradient stops" edit="true" mode="tip" size="large" value='${JSON.stringify({type:"gradient",gradient:q(this.#U)})}'></fig-input-gradient>
|
|
112
203
|
</fig-preview>
|
|
113
204
|
<div class="fig-fill-picker-gradient-stops">
|
|
114
205
|
<fig-header class="fig-fill-picker-gradient-stops-header" borderless>
|
|
@@ -126,28 +217,28 @@ import"./fig.js";import"./fig-lab.js";function E(j,J){if(!customElements.get(j))
|
|
|
126
217
|
<span>Color interpolation</span>
|
|
127
218
|
</fig-header>
|
|
128
219
|
<fig-field class="fig-fill-picker-gradient-interpolation-field">
|
|
129
|
-
<fig-select class="fig-fill-picker-gradient-space" label="Color interpolation" full value="${
|
|
220
|
+
<fig-select class="fig-fill-picker-gradient-space" label="Color interpolation" full value="${R(J)}">
|
|
130
221
|
<fig-select-options>
|
|
131
|
-
${this.#
|
|
222
|
+
${this.#Sj()}
|
|
132
223
|
</fig-select-options>
|
|
133
224
|
</fig-select>
|
|
134
225
|
</fig-field>
|
|
135
226
|
</div>
|
|
136
|
-
`,this.#
|
|
227
|
+
`,this.#v(),this.#yj(j)}#Sj(){let j=["shorter","longer","increasing","decreasing"];return[{label:"Linear",options:[{value:"srgb",label:"sRGB"}]},{label:"",options:[{value:"oklab",label:"OKLAB"}]},{label:"Polar",options:j.map((K)=>({value:`oklch-${K}`,label:`OKLCH ${K.charAt(0).toUpperCase()}${K.slice(1)}`}))},{label:"",separator:!0,options:j.map((K)=>({value:`hsl-${K}`,label:`HSL ${K.charAt(0).toUpperCase()}${K.slice(1)}`}))}].map((K)=>{let Q=K.options.map((X)=>{let Z=X.method?X.method.charAt(0).toUpperCase()+X.method.slice(1):"",W=X.append||Z;return`<fig-select-option value="${R(X.value)}" label="${R(X.label)}">
|
|
137
228
|
<fig-interpolation-swatch slot="prepend" size="large" aria-hidden="true"></fig-interpolation-swatch>
|
|
138
|
-
${
|
|
139
|
-
${
|
|
140
|
-
</fig-select-option>`}).join("");return`${K.label||K.separator?`<fig-separator${K.label?` label="${
|
|
141
|
-
<fig-field class="fig-fill-picker-gradient-stop-row" data-index="${
|
|
229
|
+
${R(X.label)}
|
|
230
|
+
${W?`<span slot="append">${R(W)}</span>`:""}
|
|
231
|
+
</fig-select-option>`}).join("");return`${K.label||K.separator?`<fig-separator${K.label?` label="${R(K.label)}"`:""}></fig-separator>`:""}${Q}`}).join("")}#yj(j){let J=(Y)=>typeof Y.detail==="string"?Y.detail:Y.target?.value,K=j.querySelector(".fig-fill-picker-gradient-bar-input"),Q=(Y)=>{if(!K)return;this.#T=!0;try{K.setAttribute("value",JSON.stringify({type:"gradient",gradient:q(Y)}))}finally{this.#T=!1}},U=()=>{Q(this.#U)};j.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(Y)=>{let $=J(Y);if(!$)return;this.#U.type=$,this.#v(),this.#Y()});let Z=j.querySelector(".fig-fill-picker-gradient-space");if(Z?.querySelectorAll("fig-select-option").forEach((Y)=>{let $=()=>{let f=M(Y.getAttribute("value")||"srgb");Q(T({...this.#U,...f}))};Y.addEventListener("pointerenter",$),Y.addEventListener("pointerleave",()=>{if(document.activeElement!==Y)U()}),Y.addEventListener("focus",$),Y.addEventListener("blur",()=>{if(!Y.matches(":hover"))U()})}),this.#A?.disconnect(),Z)this.#A=new MutationObserver(()=>{if(!Z.hasAttribute("open"))U()}),this.#A.observe(Z,{attributes:!0,attributeFilter:["open"]});Z?.addEventListener("change",(Y)=>{let $=J(Y);if(!$)return;let f=M($);this.#U=T({...this.#U,...f}),this.#v(),this.#Y()}),j.querySelector(".fig-fill-picker-gradient-angle").addEventListener("input",(Y)=>{let $=parseFloat(Y.target.value)||0;this.#U.angle=($+90)%360,this.#h(),this.#Y()});let z=j.querySelector(".fig-fill-picker-gradient-cx"),O=j.querySelector(".fig-fill-picker-gradient-cy");if(z?.addEventListener("input",(Y)=>{let $=Number.parseFloat(Y.target.value);this.#U.centerX=Number.isFinite($)?$:50,this.#h(),this.#Y()}),O?.addEventListener("input",(Y)=>{let $=Number.parseFloat(Y.target.value);this.#U.centerY=Number.isFinite($)?$:50,this.#h(),this.#Y()}),j.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#U.angle=(Number(this.#U.angle)+90)%360,this.#v(),this.#Y()}),j.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#U.stops.forEach((Y)=>{Y.position=100-Y.position}),this.#U.stops.sort((Y,$)=>Y.position-$.position),this.#v(),this.#Y()}),j.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#U.stops.push({position:50,color:"#888888",opacity:100}),this.#U.stops.sort(($,f)=>$.position-f.position),this.#v(),this.#Y()}),K){let Y=($)=>{if($.stopPropagation(),this.#T)return;let f=$.detail;if(!f?.gradient)return;this.#U=T({...this.#U,...f.gradient}),this.#f(),this.#Uj(),this.#Bj()};K.addEventListener("input",($)=>{Y($),this.#Y()}),K.addEventListener("change",($)=>{Y($),this.#u()})}j.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(Y)=>{this.#wj(Y)})}#Dj(j){let J=String(j.color||"#888888").replace(/^#/,"").slice(0,6),K=j.opacity??100;if(K>=100)return`#${J}`;let Q=Math.round(K/100*255).toString(16).padStart(2,"0");return`#${J}${Q}`}#Pj(j){if(!(j instanceof HTMLElement))return"#888888";if(j.hexOpaque)return this.#Vj(j.hexOpaque);let J=j.value;if(typeof J==="string"&&J.startsWith("#"))return this.#Vj(J.length>7?J.slice(0,7):J);let K=j.querySelector('fig-input-text:not([type="number"])'),Q=String(K?.value??K?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test(Q))return`#${Q.toUpperCase()}`;let U=j.getAttribute("value");if(typeof U==="string"&&U.startsWith("#"))return this.#Vj(U.length>7?U.slice(0,7):U);return"#888888"}#Vj(j){let J=String(j||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(J))return"#888888";return`#${J.toUpperCase()}`}#Ij(j){let J=j.querySelector(".fig-fill-picker-stop-position"),K=j.querySelector(".fig-fill-picker-stop-color"),Q=parseFloat(J?.value??J?.getAttribute("value")??"0")||0,U=this.#Pj(K),X=100;if(K instanceof HTMLElement&&K.rgba?.a!==void 0)X=Math.round(K.rgba.a*100);else{let Z=parseInt(j.dataset.index,10);if(!isNaN(Z)&&this.#U.stops[Z])X=this.#U.stops[Z].opacity??100}return{position:Q,color:U,opacity:X}}#_j(j){let J=parseInt(j.dataset.index,10);if(isNaN(J)||J<0||J>=this.#U.stops.length)return;let K={...this.#U.stops[J],...this.#Ij(j)};this.#U.stops[J]=K,this.#xj(j,K)}#xj(j,J){let K=j.querySelector(".fig-fill-picker-stop-position");if(K)K.setAttribute("value",String(J.position));let Q=j.querySelector(".fig-fill-picker-stop-color");if(Q)Q.setAttribute("value",this.#Dj(J))}#wj(j){let{oldIndex:J,newIndex:K}=j.detail??{};if(J==null||K==null||J===K||J<0||K<0||J>=this.#U.stops.length||K>=this.#U.stops.length)return;let U=j.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");U.forEach((Z)=>this.#_j(Z));let[X]=this.#U.stops.splice(J,1);this.#U.stops.splice(K,0,X),U.forEach((Z,W)=>{Z.dataset.index=String(W)}),this.#T=!0;try{this.#Uj(),this.#h(),this.#Y()}finally{this.#T=!1}}#v(){if(!this.#j)return;let j=this.#j.querySelector('[data-tab="gradient"]');if(!j)return;this.#U=T(this.#U);let J=j.querySelector(".fig-fill-picker-gradient-angle"),K=j.querySelector(".fig-fill-picker-gradient-rotate"),Q=j.querySelector(".fig-fill-picker-gradient-center");if(this.#U.type==="radial"){if(J.style.display="none",K)K.style.display="none";Q.style.display="flex"}else{J.style.removeProperty("display"),K?.style.removeProperty("display"),Q.style.display="none";let X=(this.#U.angle-90+360)%360;J.setAttribute("value",X)}let U=j.querySelector(".fig-fill-picker-gradient-space");if(U)U.value=S(this.#U);this.#Uj(),this.#h(),this.#Bj()}#vj(){let j=Array.isArray(this.#U.stops)?[...this.#U.stops].sort((J,K)=>(J.position??0)-(K.position??0)):[];if(j.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return j.map((J)=>({color:String(J.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:J.position??0}))}#Uj(){if(!this.#j)return;let j=this.#vj();this.#j.querySelectorAll("fig-interpolation-swatch").forEach((J)=>{let K=J.closest("fig-select-option")?.getAttribute("value")||"srgb",Q=M(K),U={type:"linear",stops:j,interpolationSpace:Q.interpolationSpace};if(F.has(Q.interpolationSpace))U.hueInterpolation=Q.hueInterpolation;J.value={type:"gradient",gradient:U}})}#h(){if(!this.#j)return;let j=this.#j.querySelector(".fig-fill-picker-gradient-bar-input");if(j)this.#T=!0,j.setAttribute("value",JSON.stringify({type:"gradient",gradient:q(this.#U)})),this.#T=!1;this.#f()}#Bj(){if(!this.#j)return;let j=this.#j.querySelector(".fig-fill-picker-gradient-stops-list"),J=j?.querySelector("fig-reorder");if(!j||!J)return;let K=J.querySelectorAll(".fig-fill-picker-gradient-stop-row");if(K.length===this.#U.stops.length){this.#U.stops.forEach((Q,U)=>{let X=K[U];X.dataset.index=U;let Z=X.querySelector(".fig-fill-picker-stop-position");if(Z)Z.setAttribute("value",Q.position);let W=X.querySelector(".fig-fill-picker-stop-color");if(W)W.setAttribute("value",this.#Dj(Q));let z=X.querySelector(".fig-fill-picker-stop-remove");if(z)if(this.#U.stops.length<=2)z.setAttribute("disabled","");else z.removeAttribute("disabled")});return}this.#uj(j)}#uj(j){let J=j.querySelector("fig-reorder");if(!J)return;J.innerHTML=this.#U.stops.map((K,Q)=>`
|
|
232
|
+
<fig-field class="fig-fill-picker-gradient-stop-row" data-index="${Q}">
|
|
142
233
|
<fig-input-number class="fig-fill-picker-stop-position" aria-label="Gradient stop position" min="0" max="100" value="${K.position}" units="%"></fig-input-number>
|
|
143
|
-
<fig-input-color class="fig-fill-picker-stop-color" aria-label="Gradient stop color" text="true" alpha="true" picker="figma" picker-dialog-position="right" value="${this.#
|
|
144
|
-
<fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${this.#
|
|
234
|
+
<fig-input-color class="fig-fill-picker-stop-color" aria-label="Gradient stop color" text="true" alpha="true" picker="figma" picker-dialog-position="right" value="${this.#Dj(K)}"></fig-input-color>
|
|
235
|
+
<fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${this.#U.stops.length<=2?"disabled":""} aria-label="Remove gradient stop">
|
|
145
236
|
<fig-icon name="minus"></fig-icon>
|
|
146
237
|
</fig-button>
|
|
147
238
|
</fig-field>
|
|
148
|
-
`).join(""),J.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((K)=>{K.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#
|
|
239
|
+
`).join(""),J.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((K)=>{K.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#_j(K),this.#Uj(),this.#h(),this.#Y()});let Q=K.querySelector(".fig-fill-picker-stop-color"),U=Q.querySelector("fig-fill-picker");if(U)U.anchorElement=this.#j;else this.#D(()=>{let Z=Q.querySelector("fig-fill-picker");if(Z)Z.anchorElement=this.#j});let X=()=>{this.#_j(K),this.#T=!0;try{this.#Uj(),this.#h(),this.#Y()}finally{this.#T=!1}};Q.addEventListener("input",X),Q.addEventListener("change",X),K.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{let Z=parseInt(K.dataset.index,10);if(this.#U.stops.length>2)this.#U.stops.splice(Z,1),this.#v(),this.#Y()})})}#Fj(j,J=!0){let K=T({...this.#U,interpolationSpace:j??this.#U.interpolationSpace}),Q=this.#_==="display-p3",U=K.stops.map((W)=>{let z=(W.opacity??100)/100;return`${Q?this.#rj(W.color,z):this.#pj(W.color,z)} ${W.position}%`}).join(", "),X=p(K),Z=J&&X?` ${X}`:"";switch(K.type){case"linear":return`linear-gradient(${K.angle}deg${Z}, ${U})`;case"radial":return`radial-gradient(circle at ${K.centerX}% ${K.centerY}%${Z}, ${U})`;case"angular":return`conic-gradient(from ${K.angle}deg${Z}, ${U})`;default:return`linear-gradient(${K.angle}deg${Z}, ${U})`}}static#Nj=new Map;#Cj(j){let J=H.#Nj.get(j);if(J!==void 0)return J;let K=document.createElement("div");K.style.background=j;let Q=!!K.style.background;return H.#Nj.set(j,Q),Q}#Mj(){let j=this.#Fj(void 0,!0);if(this.#Cj(j))return j;let J=this.#Fj("oklab",!0);if(this.#Cj(J))return J;return this.#Fj("oklab",!1)}#gj(){let j=this.#j.querySelector('[data-tab="image"]');j.innerHTML=`
|
|
149
240
|
<fig-field class="fig-fill-picker-media-header">
|
|
150
|
-
<fig-select class="fig-fill-picker-scale-mode" label="Image scale mode" value="${
|
|
241
|
+
<fig-select class="fig-fill-picker-scale-mode" label="Image scale mode" value="${R(this.#X.scaleMode)}">
|
|
151
242
|
<fig-select-options>
|
|
152
243
|
<fig-select-option value="fill">Fill</fig-select-option>
|
|
153
244
|
<fig-select-option value="fit">Fit</fig-select-option>
|
|
@@ -158,9 +249,9 @@ import"./fig.js";import"./fig-lab.js";function E(j,J){if(!customElements.get(j))
|
|
|
158
249
|
<fig-input-number class="fig-fill-picker-scale" aria-label="Image tile scale" min="1" max="200" value="${this.#X.scale}" units="%" ${this.#X.scaleMode==="tile"?"":'style="display: none;"'}></fig-input-number>
|
|
159
250
|
</fig-field>
|
|
160
251
|
<fig-image class="fig-fill-picker-media-preview fig-fill-picker-image-preview" upload="true" label="Upload from computer" alt="Image fill preview" size="auto" aspect-ratio="1/1" fit="cover" checkerboard="true"></fig-image>
|
|
161
|
-
`,this.#
|
|
252
|
+
`,this.#bj(j)}#bj(j){let J=j.querySelector(".fig-fill-picker-scale-mode"),K=j.querySelector(".fig-fill-picker-scale"),Q=j.querySelector(".fig-fill-picker-image-preview");J.addEventListener("change",(U)=>{let X=typeof U.detail==="string"?U.detail:U.target?.value;if(!X)return;this.#X.scaleMode=X,K.style.display=X==="tile"?"block":"none",this.#i(Q),this.#f(),this.#Y()}),K.addEventListener("input",(U)=>{this.#X.scale=parseFloat(U.target.value)||100,this.#i(Q),this.#f(),this.#Y()}),Q.addEventListener("loaded",(U)=>{let X=U.detail?.src||Q.src;if(!X)return;this.#X.url=X,this.#i(Q),this.#f(),this.#Y()}),Q.addEventListener("change",()=>{if(Q.src)return;this.#X.url=null,this.#i(Q),this.#f(),this.#Y()}),this.#i(Q)}#i(j){if(!this.#X.url){j.removeAttribute("src"),j.classList.remove("has-media","is-tiled"),j.style.backgroundImage="",j.style.backgroundPosition="",j.style.backgroundRepeat="",j.style.backgroundSize="";return}j.setAttribute("src",this.#X.url),j.classList.add("has-media"),j.style.backgroundImage="",j.style.backgroundPosition="",j.style.backgroundRepeat="",j.style.backgroundSize="",j.mediaEl?.style.removeProperty("opacity");let J=j.querySelector("fig-input-file[data-generated]");if(J)J.setAttribute("label","Replace"),J.removeAttribute("url");switch(this.#X.scaleMode){case"fill":j.classList.remove("is-tiled"),j.setAttribute("fit","cover");break;case"crop":j.classList.remove("is-tiled"),j.setAttribute("fit","cover");break;case"fit":j.classList.remove("is-tiled"),j.setAttribute("fit","contain");break;case"tile":if(j.classList.add("is-tiled"),j.setAttribute("fit","none"),j.style.backgroundImage=`url(${this.#X.url})`,j.style.backgroundPosition="top left",j.style.backgroundSize=`${this.#X.scale}%`,j.style.backgroundRepeat="repeat",j.mediaEl)j.mediaEl.style.opacity="0";break}}#Xj(j){if(j.tagName==="FIG-MEDIA"){if(!this.#$.url){j.removeAttribute("src"),j.classList.remove("has-media");return}j.setAttribute("src",this.#$.url),j.classList.add("has-media");let J=j.querySelector("fig-input-file[data-generated]");if(J)J.setAttribute("label","Replace"),J.removeAttribute("url");switch(this.#$.scaleMode){case"fill":case"crop":j.setAttribute("fit","cover");break;case"fit":j.setAttribute("fit","contain");break}return}switch(j.style.objectPosition="center",j.style.width="100%",j.style.height="100%",this.#$.scaleMode){case"fill":case"crop":j.style.objectFit="cover";break;case"fit":j.style.objectFit="contain";break}}#hj(){let j=this.#j.querySelector('[data-tab="video"]');j.innerHTML=`
|
|
162
253
|
<fig-field class="fig-fill-picker-media-header">
|
|
163
|
-
<fig-select class="fig-fill-picker-scale-mode" label="Video scale mode" value="${
|
|
254
|
+
<fig-select class="fig-fill-picker-scale-mode" label="Video scale mode" value="${R(this.#$.scaleMode)}">
|
|
164
255
|
<fig-select-options>
|
|
165
256
|
<fig-select-option value="fill">Fill</fig-select-option>
|
|
166
257
|
<fig-select-option value="fit">Fit</fig-select-option>
|
|
@@ -169,7 +260,7 @@ import"./fig.js";import"./fig-lab.js";function E(j,J){if(!customElements.get(j))
|
|
|
169
260
|
</fig-select>
|
|
170
261
|
</fig-field>
|
|
171
262
|
<fig-media class="fig-fill-picker-media-preview fig-fill-picker-video-preview" type="video" upload="true" label="Upload from computer" aria-label="Video fill preview" size="auto" aspect-ratio="1/1" fit="cover" checkerboard="true" autoplay="true" controls muted="true" loop="true"></fig-media>
|
|
172
|
-
`,this.#
|
|
263
|
+
`,this.#mj(j)}#mj(j){let J=j.querySelector(".fig-fill-picker-scale-mode"),K=j.querySelector(".fig-fill-picker-video-preview");J.addEventListener("change",(Q)=>{let U=typeof Q.detail==="string"?Q.detail:Q.target?.value;if(!U)return;this.#$.scaleMode=U,this.#Xj(K),this.#f(),this.#Y()}),K.addEventListener("loaded",(Q)=>{let U=Q.detail?.src||K.src;if(!U)return;this.#$.url=U,this.#Xj(K),K.play?.(),this.#f(),this.#Y()}),K.addEventListener("change",()=>{if(K.src)return;this.#$.url=null,this.#Xj(K),this.#f(),this.#Y()}),this.#Xj(K)}#dj(){let j=this.#j.querySelector('[data-tab="webcam"]');j.innerHTML=`
|
|
173
264
|
<fig-field class="fig-fill-picker-webcam-camera" style="display: none;">
|
|
174
265
|
<fig-select class="fig-fill-picker-camera-select" label="Camera" full>
|
|
175
266
|
<fig-select-options></fig-select-options>
|
|
@@ -186,4 +277,4 @@ import"./fig.js";import"./fig-lab.js";function E(j,J){if(!customElements.get(j))
|
|
|
186
277
|
Capture
|
|
187
278
|
</fig-button>
|
|
188
279
|
</div>
|
|
189
|
-
`,this.#
|
|
280
|
+
`,this.#cj(j)}#cj(j){let J=j.querySelector(".fig-fill-picker-webcam-video"),K=j.querySelector(".fig-fill-picker-webcam-status"),Q=j.querySelector(".fig-fill-picker-webcam-capture"),U=j.querySelector(".fig-fill-picker-webcam-camera"),X=j.querySelector(".fig-fill-picker-camera-select"),Z=(O)=>{if(O)Q.removeAttribute("disabled");else Q.setAttribute("disabled","")},W=()=>{let O=!!this.#W.stream&&J.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&J.videoWidth>0&&J.videoHeight>0;if(Z(O),O)K.querySelector("span").textContent="Camera ready",K.style.display="none"};J.addEventListener("loadedmetadata",W),J.addEventListener("canplay",W);let z=async(O=null)=>{this.#s();let L=this.#b;Z(!1),K.querySelector("span").textContent="Starting camera",K.style.display="flex";try{let Y={video:O?{deviceId:{exact:O}}:!0},$=await navigator.mediaDevices.getUserMedia(Y);if(L!==this.#b||!this.isConnected||this.#V!=="webcam"){$.getTracks().forEach((k)=>k.stop());return}this.#W.stream=$,J.srcObject=$,J.style.display="block",W();let f=await navigator.mediaDevices.enumerateDevices();if(L!==this.#b)return;let D=f.filter((k)=>k.kind==="videoinput");if(D.length>1){U.style.display="";let k=X.querySelector(":scope > fig-select-options");if(!k)k=document.createElement("fig-select-options"),X.append(k);if(k.replaceChildren(),D.forEach((V,N)=>{let _=document.createElement("fig-select-option");_.value=V.deviceId;let x=V.label||(D.length>1?`Camera ${N+1}`:"Camera");_.textContent=x.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(i,C)=>{return` ${/^\d+$/.test(C)?Number.parseInt(C,10).toString():C.replace(/^0+/,"")||"0"}`}),k.append(_)}),O)X.value=O}else U.style.display="none",X.querySelector(":scope > fig-select-options")?.replaceChildren()}catch(Y){if(L!==this.#b)return;console.error("Webcam error:",Y.name,Y.message);let $="Camera access denied";if(Y.name==="NotAllowedError")$="Camera permission denied";else if(Y.name==="NotFoundError")$="No camera found";else if(Y.name==="NotReadableError")$="Camera in use by another app";else if(Y.name==="OverconstrainedError")$="Camera constraints not supported";else if(!window.isSecureContext)$="Camera requires secure context";K.replaceChildren();let f=document.createElement("span");f.textContent=$,K.appendChild(f),K.style.display="flex",J.style.display="none",Z(!1)}};this.#e=z,X.addEventListener("change",(O)=>{let L=typeof O.detail==="string"?O.detail:O.target?.value;if(L)z(L)}),Q.addEventListener("click",async()=>{if(!this.#W.stream)return;if(!J.videoWidth||!J.videoHeight)return;let O=document.createElement("canvas");O.width=J.videoWidth,O.height=J.videoHeight,O.getContext("2d").drawImage(J,0,0,O.width,O.height);let L=await new Promise(($)=>O.toBlob($,"image/png"));if(!L)return;if(this.#W.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#W.snapshot),this.#r.delete(this.#W.snapshot);this.#W.snapshot=URL.createObjectURL(L),this.#r.add(this.#W.snapshot),this.#X.url=this.#W.snapshot;let Y=this.#j.querySelector(".fig-fill-picker-image-preview");if(Y)this.#i(Y);this.#o("image")})}#qj(j){let J=j.h/360,K=j.s/100,Q=j.v/100,U,X,Z,W=Math.floor(J*6),z=J*6-W,O=Q*(1-K),L=Q*(1-z*K),Y=Q*(1-(1-z)*K);switch(W%6){case 0:U=Q,X=Y,Z=O;break;case 1:U=L,X=Q,Z=O;break;case 2:U=O,X=Q,Z=Y;break;case 3:U=O,X=L,Z=Q;break;case 4:U=Y,X=O,Z=Q;break;case 5:U=Q,X=O,Z=L;break}return{r:Math.round(U*255),g:Math.round(X*255),b:Math.round(Z*255)}}#a(j){let J=j.r/255,K=j.g/255,Q=j.b/255,U=Math.max(J,K,Q),X=Math.min(J,K,Q),Z=U-X,W=0,z=U===0?0:Z/U,O=U;if(U!==X){switch(U){case J:W=(K-Q)/Z+(K<Q?6:0);break;case K:W=(Q-J)/Z+2;break;case Q:W=(J-K)/Z+4;break}W/=6}return{h:W*360,s:z*100,v:O*100,a:1}}#m(j){if(!j||typeof j.h!=="number"||typeof j.s!=="number"||typeof j.v!=="number")return"#D9D9D9";let J=this.#qj(j),K=(Q)=>{return(isNaN(Q)?217:Math.max(0,Math.min(255,Math.round(Q)))).toString(16).padStart(2,"0")};return`#${K(J.r)}${K(J.g)}${K(J.b)}`}#t(j){let J=parseInt(j.slice(1,3),16),K=parseInt(j.slice(3,5),16),Q=parseInt(j.slice(5,7),16);return this.#a({r:J,g:K,b:Q})}#pj(j,J=1){let K=parseInt(j.slice(1,3),16),Q=parseInt(j.slice(3,5),16),U=parseInt(j.slice(5,7),16);return`rgba(${K}, ${Q}, ${U}, ${J})`}#sj(j){let J=Math.max(0,Math.min(1,Number(j)||0)),K=Math.round(J*1000)/1000;return String(K)}#ij(j=this.#Q){let J=this.#qj(j);return`rgba(${J.r}, ${J.g}, ${J.b}, ${this.#sj(j.a)})`}#lj(j){let J=String(j??"").trim();if(!J)return null;let K=J.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(K){let U=K[1];if(U.length===3)U=U[0]+U[0]+U[1]+U[1]+U[2]+U[2];let X=1;if(U.length===8)X=parseInt(U.slice(6,8),16)/255,U=U.slice(0,6);return{...this.#t(`#${U}`),a:X}}let Q=J.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if(Q){let U=Math.max(0,Math.min(255,Math.round(parseFloat(Q[1])))),X=Math.max(0,Math.min(255,Math.round(parseFloat(Q[2])))),Z=Math.max(0,Math.min(255,Math.round(parseFloat(Q[3])))),W=Q[4]!==void 0?Math.max(0,Math.min(1,parseFloat(Q[4]))):1;if(![U,X,Z,W].every(Number.isFinite))return null;return{...this.#a({r:U,g:X,b:Z}),a:W}}return null}#rj(j,J=1){let K=+(parseInt(j.slice(1,3),16)/255).toFixed(4),Q=+(parseInt(j.slice(3,5),16)/255).toFixed(4),U=+(parseInt(j.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${K} ${Q} ${U} / ${J})`}#oj(j){let J=j.r/255,K=j.g/255,Q=j.b/255,U=Math.max(J,K,Q),X=Math.min(J,K,Q),Z,W,z=(U+X)/2;if(U===X)Z=W=0;else{let O=U-X;switch(W=z>0.5?O/(2-U-X):O/(U+X),U){case J:Z=((K-Q)/O+(K<Q?6:0))/6;break;case K:Z=((Q-J)/O+2)/6;break;case Q:Z=((J-K)/O+4)/6;break}}return{h:Z*360,s:W*100,l:z*100}}#nj(j){let J=j.h/360,K=j.s/100,Q=j.l/100,U,X,Z;if(K===0)U=X=Z=Q;else{let W=(L,Y,$)=>{if($<0)$+=1;if($>1)$-=1;if($<0.16666666666666666)return L+(Y-L)*6*$;if($<0.5)return Y;if($<0.6666666666666666)return L+(Y-L)*(0.6666666666666666-$)*6;return L},z=Q<0.5?Q*(1+K):Q+K-Q*K,O=2*Q-z;U=W(O,z,J+0.3333333333333333),X=W(O,z,J),Z=W(O,z,J-0.3333333333333333)}return{r:Math.round(U*255),g:Math.round(X*255),b:Math.round(Z*255)}}#Ej(j){let J=(Y)=>{return Y=Y/255,Y<=0.04045?Y/12.92:Math.pow((Y+0.055)/1.055,2.4)},K=J(j.r),Q=J(j.g),U=J(j.b),X=0.4122214708*K+0.5363325363*Q+0.0514459929*U,Z=0.2119034982*K+0.6806995451*Q+0.1073969566*U,W=0.0883024619*K+0.2817188376*Q+0.6299787005*U,z=Math.cbrt(X),O=Math.cbrt(Z),L=Math.cbrt(W);return{l:0.2104542553*z+0.793617785*O-0.0040720468*L,a:1.9779984951*z-2.428592205*O+0.4505937099*L,b:0.0259040371*z+0.7827717662*O-0.808675766*L}}#aj(j){let J=this.#Ej(j);return{l:J.l,c:Math.sqrt(J.a*J.a+J.b*J.b),h:(Math.atan2(J.b,J.a)*180/Math.PI+360)%360}}#Aj(j){let J=j.l+0.3963377774*j.a+0.2158037573*j.b,K=j.l-0.1055613458*j.a-0.0638541728*j.b,Q=j.l-0.0894841775*j.a-1.291485548*j.b,U=J*J*J,X=K*K*K,Z=Q*Q*Q,W=(z)=>{let O=z<=0.0031308?12.92*z:1.055*Math.pow(z,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,O))*255)};return{r:W(4.0767416621*U-3.3077115913*X+0.2309699292*Z),g:W(-1.2684380046*U+2.6097574011*X-0.3413193965*Z),b:W(-0.0041960863*U-0.7034186147*X+1.707614701*Z)}}#tj(j){let J=j.h*Math.PI/180;return this.#Aj({l:j.l,a:j.c*Math.cos(J),b:j.c*Math.sin(J)})}#Y(){if(this.#E())return;this.#f(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#u(){if(this.#E())return;this.#S=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let j={type:this.#Z,colorSpace:this.#_};switch(this.#Z){case"solid":return{...j,color:this.#m(this.#Q),alpha:this.#Q.a,hsv:{...this.#Q}};case"gradient":return{...j,gradient:q(this.#U),css:this.#Mj()};case"image":return{...j,image:{...this.#X}};case"video":return{...j,video:{...this.#$}};case"webcam":return{...j,image:{url:this.#W.snapshot,scaleMode:"fill",scale:50}};default:return{...j,...this.#g[this.#Z]}}}set value(j){if(typeof j==="string")this.setAttribute("value",j);else this.setAttribute("value",JSON.stringify(j))}attributeChangedCallback(j,J,K){if(J===K)return;switch(j){case"value":if(this.#Yj(),this.#f(),this.#j?.open&&!this.#C)this.#Wj(),this.#S=JSON.stringify(this.value);break;case"disabled":if(this.#B(),this.#E()&&this.#j?.open)this.close();break;case"alpha":case"mode":{if(!this.#j)break;let Q=this.#j.open;if(this.#Zj(),Q&&this.isConnected)this.#G();break}case"aria-label":if(this.#j)this.#j.setAttribute("aria-label",this.#p());case"aria-labelledby":case"aria-describedby":this.#B();break}}}B("fig-fill-picker",H);
|