@pure-ds/core 0.6.11 → 0.7.2

package/public/assets/pds/core/pds-enhancers.js

@@ -0,0 +1 @@
+var F=[{selector:".accordion"},{selector:"nav[data-dropdown]"},{selector:"label[data-toggle]"},{selector:"label[data-color]"},{selector:'input[type="range"]'},{selector:"form[data-required]"},{selector:"fieldset[role=group][data-open]"},{selector:"[data-clip]"},{selector:"button, a[class*='btn-']"}];function W(t){t.dataset.enhancedAccordion||(t.dataset.enhancedAccordion="true",t.addEventListener("toggle",e=>{e.target.open&&e.target.parentElement===t&&t.querySelectorAll(":scope > details[open]").forEach(n=>{n!==e.target&&(n.open=!1)})},!0))}function H(t){if(t.dataset.enhancedDropdown)return;t.dataset.enhancedDropdown="true";let e=t.lastElementChild;if(!e)return;let n=t.querySelector("[data-dropdown-toggle]")||t.querySelector("button");n&&!n.hasAttribute("type")&&n.setAttribute("type","button"),e.id||(e.id=`dropdown-${Math.random().toString(36).slice(2,9)}`);let o=e.tagName?.toLowerCase()==="menu",a=8;o&&!e.hasAttribute("role")&&e.setAttribute("role","menu"),e.hasAttribute("aria-hidden")||e.setAttribute("aria-hidden","true"),n&&(n.setAttribute("aria-haspopup","true"),n.setAttribute("aria-controls",e.id),n.setAttribute("aria-expanded","false"));let c=()=>{let s=e.getAttribute("style");e.style.visibility="hidden",e.style.display="inline-block",e.style.pointerEvents="none";let h=e.getBoundingClientRect(),f=Math.max(e.offsetWidth||0,e.scrollWidth||0,h.width||0,1),d=Math.max(e.offsetHeight||0,e.scrollHeight||0,h.height||0,1);return s===null?e.removeAttribute("style"):e.setAttribute("style",s),{width:f,height:d}},i=()=>{let s=(t.getAttribute("data-direction")||t.getAttribute("data-dropdown-direction")||t.getAttribute("data-mode")||"auto").toLowerCase();if(s==="up"||s==="down")return s;let h=(n||t).getBoundingClientRect(),{height:f}=c(),d=Math.max(0,window.innerHeight-h.bottom),b=Math.max(0,h.top),v=d>=f,y=b>=f;return v&&!y?"down":y&&!v?"up":v&&y?"down":b>d?"up":"down"},r=()=>{let s=(t.getAttribute("data-align")||t.getAttribute("data-dropdown-align")||"auto").toLowerCase();if(s==="left"||s==="right"||s==="start"||s==="end")return s==="start"?"left":s==="end"?"right":s;let h=(n||t).getBoundingClientRect(),{width:f}=c(),d=Math.max(0,window.innerWidth-h.left),b=Math.max(0,h.right),v=d>=f,y=b>=f;return v&&!y?"left":y&&!v?"right":v&&y?"left":b>d?"right":"left"},p=(s,h=8)=>{let f=getComputedStyle(t).getPropertyValue(s).trim();if(!f)return h;let d=document.createElement("span");d.style.position="fixed",d.style.visibility="hidden",d.style.pointerEvents="none",d.style.height=f,document.body.appendChild(d);let b=Number.parseFloat(getComputedStyle(d).height);return d.remove(),Number.isFinite(b)?b:h},u=()=>{e.style.removeProperty("position"),e.style.removeProperty("left"),e.style.removeProperty("top"),e.style.removeProperty("right"),e.style.removeProperty("bottom"),e.style.removeProperty("margin-top"),e.style.removeProperty("margin-bottom"),e.style.removeProperty("max-width"),e.style.removeProperty("max-inline-size"),e.style.removeProperty("max-height"),e.style.removeProperty("overflow")},l=()=>{e.getAttribute("aria-hidden")==="false"&&(u(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{w()})}))},w=()=>{if(e.getAttribute("aria-hidden")!=="false")return;let s=(n||t).getBoundingClientRect(),h=window.visualViewport,f=h?.width||document.documentElement?.clientWidth||window.innerWidth,d=h?.height||document.documentElement?.clientHeight||window.innerHeight,b=h?.offsetLeft||0,v=h?.offsetTop||0,y=Math.max(1,f-a*2),T=Math.max(1,d-a*2);e.style.maxWidth=`${Math.round(y)}px`,e.style.maxInlineSize=`${Math.round(y)}px`,e.style.maxHeight=`${Math.round(T)}px`,e.style.overflow="auto";let{width:k,height:M}=c(),q=p("--spacing-2",8),P=i(),R=r();t.dataset.dropdownDirection=P,t.dataset.dropdownAlign=R;let C=R==="right"?s.right-k:s.left;k>=y-1?C=b+a:C=Math.max(b+a,Math.min(C,b+f-k-a));let S=P==="up"?s.top-q-M:s.bottom+q;S=Math.max(v+a,Math.min(S,v+d-M-a)),e.style.position="fixed",e.style.left=`${Math.round(C)}px`,e.style.top=`${Math.round(S)}px`,e.style.right="auto",e.style.bottom="auto",e.style.marginTop="0",e.style.marginBottom="0"},g=null,E=()=>{g||(g=()=>w(),window.addEventListener("resize",g),window.addEventListener("scroll",g,!0))},L=()=>{g&&(window.removeEventListener("resize",g),window.removeEventListener("scroll",g,!0),g=null)},m=null,O=()=>{m||typeof document>"u"||(m=()=>{e.getAttribute("aria-hidden")==="false"&&(t.dataset.dropdownDirection=i(),t.dataset.dropdownAlign=r(),l(),setTimeout(()=>{e.getAttribute("aria-hidden")==="false"&&l()},50),setTimeout(()=>{e.getAttribute("aria-hidden")==="false"&&l()},150))},document.addEventListener("pds:config-changed",m))},D=()=>{!m||typeof document>"u"||(document.removeEventListener("pds:config-changed",m),m=null)},A=null,I=()=>{t.dataset.dropdownDirection=i(),t.dataset.dropdownAlign=r(),e.setAttribute("aria-hidden","false"),n?.setAttribute("aria-expanded","true"),E(),O(),l(),A||(A=s=>{(s.composedPath?s.composedPath():[s.target]).some(d=>d===t)||x()},setTimeout(()=>{document.addEventListener("click",A)},0))},x=()=>{e.setAttribute("aria-hidden","true"),n?.setAttribute("aria-expanded","false"),L(),D(),u(),A&&(document.removeEventListener("click",A),A=null)},B=()=>{e.getAttribute("aria-hidden")==="false"?x():I()};n?.addEventListener("click",s=>{s.preventDefault(),s.stopPropagation(),B()}),t.addEventListener("keydown",s=>{s.key==="Escape"&&(x(),n?.focus())}),t.addEventListener("focusout",s=>{s.relatedTarget&&((s.composedPath?s.composedPath():[s.relatedTarget]).some(d=>d===t)||x())})}function N(t){if(t.dataset.enhancedToggle)return;t.dataset.enhancedToggle="true";let e=t.querySelector('input[type="checkbox"]');if(!e)return;t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.setAttribute("role","switch"),t.setAttribute("aria-checked",e.checked?"true":"false");let n=document.createElement("span");n.className="toggle-switch",n.setAttribute("role","presentation"),n.setAttribute("aria-hidden","true");let o=document.createElement("span");o.className="toggle-knob",n.appendChild(o),t.insertBefore(n,e.nextSibling);let a=()=>{t.setAttribute("aria-checked",e.checked?"true":"false")},c=()=>{e.disabled||(e.checked=!e.checked,a(),e.dispatchEvent(new Event("change",{bubbles:!0})))};t.addEventListener("click",i=>{i.preventDefault(),c()}),t.addEventListener("keydown",i=>{(i.key===" "||i.key==="Enter")&&(i.preventDefault(),c())}),e.addEventListener("change",a)}function $(t){if(t.dataset.enhancedColorInput)return;let e=t.querySelector('input[type="color"]');if(!e)return;t.dataset.enhancedColorInput="true";let n=t.querySelector(":scope > .color-control"),o=t.querySelector(":scope > .color-control > .color-swatch"),a=t.querySelector(":scope > .color-control > output");n||(n=document.createElement("span"),n.className="color-control",e.before(n)),o||(o=document.createElement("span"),o.className="color-swatch",n.appendChild(o)),e.parentElement!==o&&o.appendChild(e),a||(a=document.createElement("output"),n.appendChild(a));let c=()=>{if(e.dataset.colorUnset==="1"){a.value="",a.textContent="not set",n.dataset.value="",n.dataset.unset="1",o.dataset.unset="1";return}a.value=e.value,a.textContent=e.value,n.dataset.value=e.value,delete n.dataset.unset,delete o.dataset.unset};c();let i=()=>{e.dataset.colorUnset==="1"&&(e.dataset.colorUnset="0"),c()};e.addEventListener("input",i,{passive:!0}),e.addEventListener("change",i,{passive:!0})}function U(t){if(t.dataset.enhancedRange)return;let e=i=>{if(t.dataset.enhancedRangeProgrammatic)return;t.dataset.enhancedRangeProgrammatic="1";let r=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(t),"value")||Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value");r?.get&&r?.set&&Object.defineProperty(t,"value",{configurable:!0,enumerable:r.enumerable,get(){return r.get.call(this)},set(u){r.set.call(this,u),i()}}),new MutationObserver(u=>{u.some(w=>{let g=w.attributeName;return g==="value"||g==="min"||g==="max"})&&i()}).observe(t,{attributes:!0,attributeFilter:["value","min","max"]})},n=t.closest("label"),o=n?.classList.contains("range-output"),a=t.id||`range-${Math.random().toString(36).substring(2,11)}`,c=`${a}-output`;if(t.id=a,o){let i=n.querySelector("span");if(i&&!i.classList.contains("range-output-wrapper")){let r=document.createElement("span");r.className="range-output-wrapper",r.style.display="flex",r.style.justifyContent="space-between",r.style.alignItems="center";let p=document.createElement("span");p.textContent=i.textContent,r.appendChild(p);let u=document.createElement("output");u.id=c,u.setAttribute("for",a),u.style.color="var(--surface-text-secondary, var(--color-text-secondary))",u.style.fontSize="0.875rem",u.textContent=t.value,r.appendChild(u),i.textContent="",i.appendChild(r);let l=()=>{u.textContent=t.value};t.addEventListener("input",l),t.addEventListener("change",l),e(l),l()}}else{let i=t.closest(".range-container");i||(i=document.createElement("div"),i.className="range-container",t.parentNode?.insertBefore(i,t),i.appendChild(t)),i.style.position="relative";let r=document.createElement("output");r.id=c,r.setAttribute("for",a),r.className="range-bubble",r.setAttribute("aria-live","polite"),i.appendChild(r);let p=()=>{let w=parseFloat(t.min)||0,g=parseFloat(t.max)||100,E=parseFloat(t.value),L=(E-w)/(g-w);r.style.left=`calc(${L*100}% )`,r.textContent=String(E)},u=()=>r.classList.add("visible"),l=()=>r.classList.remove("visible");t.addEventListener("input",p),t.addEventListener("pointerdown",u),t.addEventListener("pointerup",l),t.addEventListener("pointerleave",l),t.addEventListener("focus",u),t.addEventListener("blur",l),t.addEventListener("change",p),e(p),p()}t.dataset.enhancedRange="1"}function z(t){if(t.dataset.enhancedRequired)return;t.dataset.enhancedRequired="true";let e=n=>{let o;if(n.closest("[role$=group]")?o=n.closest("[role$=group]").querySelector("legend"):o=n.closest("label"),!o||o.querySelector(".required-asterisk"))return;let a=document.createElement("span");a.classList.add("required-asterisk"),a.textContent="*",a.style.marginLeft="4px";let c=o.querySelector("span, [data-label]");if(c)c.appendChild(a);else{let r=o.querySelector("input, select, textarea");r?o.insertBefore(a,r):o.appendChild(a)}let i=n.closest("form");if(i&&!i.querySelector(".required-legend")){let r=document.createElement("small");r.classList.add("required-legend"),r.textContent="* Required fields",i.insertBefore(r,i.querySelector(".form-actions")||i.lastElementChild)}};t.querySelectorAll("[required]").forEach(n=>{e(n)})}function j(t){if(t.dataset.enhancedOpenGroup)return;t.dataset.enhancedOpenGroup="true",t.classList.add("flex","flex-wrap","buttons");let e=document.createElement("input");e.type="text",e.placeholder="Add item...",e.classList.add("input-text","input-sm"),e.style.width="auto";let n=()=>t.querySelector('input[type="radio"], input[type="checkbox"]');t.appendChild(e),e.addEventListener("keydown",o=>{if(o.key==="Enter"||o.key==="Tab"){let a=e.value.trim();if(a){o.preventDefault();let c=n(),i=c?.type==="radio"?"radio":"checkbox",r=`open-group-${Math.random().toString(36).substring(2,11)}`,p=document.createElement("label"),u=document.createElement("span");u.setAttribute("data-label",""),u.textContent=a;let l=document.createElement("input");l.type=i,l.name=c?.name||t.getAttribute("data-name")||"open-group",l.value=a,l.id=r,p.appendChild(u),p.appendChild(l),t.insertBefore(p,e),e.value=""}}else if(o.key==="Backspace"&&e.value===""){o.preventDefault();let a=t.querySelectorAll("label");a.length>0&&a[a.length-1].remove()}})}function V(t){if(t.dataset.enhancedClip)return;t.dataset.enhancedClip="true",t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.hasAttribute("role")||t.setAttribute("role","button");let e=()=>{let o=t.getAttribute("data-clip-open")==="true";t.setAttribute("aria-expanded",o?"true":"false")},n=()=>{let o=t.getAttribute("data-clip-open")==="true";t.setAttribute("data-clip-open",o?"false":"true"),e()};t.addEventListener("click",o=>{o.defaultPrevented||n()}),t.addEventListener("keydown",o=>{(o.key===" "||o.key==="Enter")&&(o.preventDefault(),n())}),e()}function G(t){if(t.dataset.enhancedBtnWorking)return;t.dataset.enhancedBtnWorking="true";let e=null,n=!1;new MutationObserver(a=>{a.forEach(c=>{if(c.attributeName==="class"){let i=t.classList.contains("btn-working"),r=t.querySelector("pds-icon");if(i)if(r)e||(e=r.getAttribute("icon")),r.setAttribute("icon","circle-notch");else{let p=document.createElement("pds-icon");p.setAttribute("icon","circle-notch"),p.setAttribute("size","sm"),t.insertBefore(p,t.firstChild),n=!0}else c.oldValue?.includes("btn-working")&&r&&(n?(r.remove(),n=!1):e&&(r.setAttribute("icon",e),e=null))}})}).observe(t,{attributes:!0,attributeFilter:["class"],attributeOldValue:!0})}var _=new Map([[".accordion",W],["nav[data-dropdown]",H],["label[data-toggle]",N],["label[data-color]",$],['input[type="range"]',U],["form[data-required]",z],["fieldset[role=group][data-open]",j],["[data-clip]",V],["button, a[class*='btn-']",G]]),J=F.map(t=>({...t,run:_.get(t.selector)||(()=>{})}));export{J as defaultPDSEnhancers};