@rogieking/figui3 11.4.2 → 11.5.0

package/dist/fig-property.css

@@ -0,0 +1 @@
+fig-property{--fig-property-gap:var(--spacer-2);--fig-property-left-padding:var(--spacer-3);--fig-property-right-padding:var(--spacer-3);--fig-property-top-padding:var(--spacer-1);--fig-property-bottom-padding:var(--spacer-1);--fig-property-label-ratio:1fr;--fig-property-input-ratio:2fr;--fig-property-trailing-gap:0;--fig-property-trailing-size:0;grid-template-columns:var(--fig-property-left-padding) var(--fig-property-label-track,minmax(0, var(--fig-property-label-ratio))) minmax(0, var(--fig-property-input-ratio)) var(--fig-property-trailing-gap) var(--fig-property-trailing-size) var(--fig-property-right-padding);width:100%;min-width:0;padding:var(--fig-property-top-padding) 0 var(--fig-property-bottom-padding);grid-template-areas:"leading label input.trailing pad";align-items:start;margin:0;display:grid;&[show-trailing]:not([show-trailing=hover]):has(>fig-button[slot=trailing][variant=ghost]),&[show-trailing]:not([show-trailing=hover]):has(>[slot=trailing] fig-button[variant=ghost]){--fig-property-right-padding:var(--spacer-2)}&>:is(label,[slot=label]){min-width:0;height:min(100%, var(--spacer-4));margin-right:var(--fig-property-gap);font:inherit;text-overflow:ellipsis;white-space:nowrap;user-select:none;grid-area:label;align-content:center;padding:0;line-height:1rem;display:block;overflow:hidden}&>[slot=leading]{visibility:hidden;height:100%;color:var(--figma-color-text-secondary);grid-area:leading}&:has(>[slot=trailing]){--fig-property-label-track:minmax(0, calc(( 100% - var(--fig-property-left-padding) - var(--fig-property-right-padding) ) / 3))}&>[slot=input]{grid-area:input;width:100%;min-width:0}&>[slot=trailing]{visibility:hidden;grid-area:trailing;min-width:0;overflow:hidden}&:hover>[slot=leading],&:hover>[slot=trailing],&[show-leading]:not([show-leading=hover]):not([show-leading=false])>[slot=leading],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{visibility:visible}&:hover:has(>[slot=trailing]):not([show-trailing=false]),&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false]){--fig-property-trailing-gap:var(--fig-property-gap);--fig-property-trailing-size:max-content}&:hover>[slot=trailing],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{overflow:visible}&[show-leading=false]>[slot=leading],&[show-trailing=false]>[slot=trailing]{display:none}&:not(:has(>:is(label,[slot=label])))>[slot=input]{grid-column:label-start/input-end}}

package/dist/fig-property.js

@@ -0,0 +1 @@
+import"./fig.js";var n=0;function l(t,e){if(!customElements.get(t))customElements.define(t,e)}function a(t){let e=document.createElement("fig-icon");return e.setAttribute("name",t),e.setAttribute("size","small"),e.setAttribute("aria-hidden","true"),e}class o extends HTMLElement{static observedAttributes=["label","leading","trailing","show-leading","show-trailing"];#e=null;#i=null;#t=null;#r=!1;connectedCallback(){this.#o(),this.#e=new MutationObserver(()=>this.#s()),this.#e.observe(this,{childList:!0,attributes:!0,attributeFilter:["slot"]})}disconnectedCallback(){this.#e?.disconnect(),this.#e=null,this.#l()}attributeChangedCallback(){if(this.isConnected)this.#s()}get input(){return this.querySelector(':scope > [slot="input"]')}#s(){if(this.#r)return;this.#r=!0,queueMicrotask(()=>{if(this.#r=!1,this.isConnected)this.#o()})}#n(t){return this.querySelector(`:scope > [slot="${t}"]:not([data-fig-property-generated])`)}#a(t){return this.querySelector(`:scope > [slot="${t}"][data-fig-property-generated]`)}#o(){this.#d(),this.#b(),this.#h()}#d(){let t=this.getAttribute("label"),e=this.querySelector(':scope > [slot="label"]:not([data-fig-property-generated])')||this.querySelector(":scope > label:not([data-fig-property-generated])"),i=this.querySelector(":scope > label[data-fig-property-generated]");if(t===null||e)i?.remove(),i=null;else{if(!i)i=document.createElement("label"),i.setAttribute("slot","label"),i.setAttribute("data-fig-property-generated",""),this.insertBefore(i,this.input);i.textContent=t}let r=e||i;this.#c(r,this.input)}#c(t,e){if(this.#l(),!(t instanceof HTMLElement)||!(e instanceof HTMLElement))return;if(!t.id)n+=1,t.id=`fig-property-label-${n}`,t.setAttribute("data-fig-property-generated-id","");if(!e.hasAttribute("aria-label")&&!e.hasAttribute("aria-labelledby"))e.setAttribute("aria-labelledby",t.id),e.setAttribute("data-fig-property-labelledby","");t.addEventListener("click",this.#u),this.#i=t,this.#t=e}#l(){if(this.#i?.removeEventListener("click",this.#u),this.#t?.hasAttribute("data-fig-property-labelledby"))this.#t.removeAttribute("aria-labelledby"),this.#t.removeAttribute("data-fig-property-labelledby");this.#i=null,this.#t=null}#u=()=>{let t=this.input;if(!(t instanceof HTMLElement))return;if(t.focus(),document.activeElement!==t)t.querySelector("input, select, textarea, button")?.focus()};#b(){let t=this.#n("leading"),e=this.#a("leading"),i=(this.getAttribute("leading")||"").trim().toLowerCase();if(t||!["drag","chevron"].includes(i)){e?.remove();return}let r=i==="drag"?"drag-handle":"chevron";if(e?.getAttribute("name")===r)return;e?.remove();let s=a(r);s.setAttribute("slot","leading"),s.setAttribute("data-fig-property-generated",""),this.prepend(s)}#h(){let t=this.#n("trailing"),e=this.#a("trailing"),i=(this.getAttribute("trailing")||"").trim().toLowerCase();if(t||!["remove","add","bind"].includes(i)){e?.remove();return}if(e?.getAttribute("data-fig-property-action")===i)return;e?.remove();let r=document.createElement("fig-button");if(r.setAttribute("slot","trailing"),r.setAttribute("variant","ghost"),r.setAttribute("size","small"),r.setAttribute("data-fig-property-generated",""),r.setAttribute("data-fig-property-action",i),r.setAttribute("aria-label",`${i[0].toUpperCase()}${i.slice(1)}`),i==="bind")r.textContent="Bind";else r.setAttribute("icon",""),r.append(a(i==="add"?"add":"minus"));r.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent(i,{bubbles:!0,composed:!0,detail:{input:this.input}}))}),this.append(r)}}l("fig-property",o);export{o as FigProperty};