@rettangoli/ui 0.1.12 → 0.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/rettangoli-iife-layout.min.js +8 -8
- package/dist/rettangoli-iife-ui.min.js +24 -24
- package/package.json +1 -1
- package/src/components/form/form.handlers.js +60 -5
- package/src/components/form/form.store.js +7 -14
- package/src/components/form/form.view.yaml +11 -19
- package/src/components/globalUi/globalUi.handlers.js +30 -8
- package/src/components/globalUi/globalUi.store.js +1 -1
- package/src/components/popoverInput/popoverInput.handlers.js +8 -7
- package/src/components/popoverInput/popoverInput.store.js +3 -5
- package/src/components/popoverInput/popoverInput.view.yaml +6 -16
- package/src/components/select/select.handlers.js +11 -4
- package/src/components/select/select.store.js +9 -8
- package/src/components/select/select.view.yaml +6 -2
- package/src/components/sliderInput/sliderInput.handlers.js +5 -11
- package/src/components/sliderInput/sliderInput.view.yaml +10 -9
- package/src/deps/createGlobalUI.js +18 -1
- package/src/primitives/input.js +15 -16
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
var rettangoli=(()=>{function a(i,...t){let e="";return i.forEach((s,o)=>{e+=s+(t[o]||"")}),e}var nt=["xs","sm","md","lg","xl"],V={mt:"margin-top",mr:"margin-right",mb:"margin-bottom",ml:"margin-left",m:"margin",mh:"margin-left margin-right",mv:"margin-top margin-bottom",pt:"padding-top",pr:"padding-right",pb:"padding-bottom",pl:"padding-left",p:"padding",ph:"padding-left padding-right",pv:"padding-top padding-bottom",g:"gap",gv:"row-gap",gh:"column-gap",bw:"border-width",bwt:"border-top-width",bwr:"border-right-width",bwb:"border-bottom-width",bwl:"border-left-width",bc:"border-color",br:"border-radius",pos:"position",shadow:"box-shadow",ta:"text-align",c:"color",cur:"cursor"},y=Object.keys(V),w=i=>i.concat(nt.flatMap(t=>i.map(e=>`${t}-${e}`))),U={default:void 0,xl:"@media only screen and (max-width: 1280px)",lg:"@media only screen and (max-width: 1024px)",md:"@media only screen and (max-width: 768px)",sm:"@media only screen and (max-width: 640px)"},u=(i,t={})=>{let e="";for(let[s,o]of Object.entries(U)){s!=="default"&&(e+=`${o} {`);for(let[n,l]of Object.entries(i)){let c=t[n]?` ${t[n]} `:" ";for(let[h,d]of Object.entries(l)){let g=V[n],m=d.startsWith("--")?`var(${d})`:d,b=s==="default"?n:`${s}-${n}`,
|
|
1
|
+
var rettangoli=(()=>{function a(i,...t){let e="";return i.forEach((s,o)=>{e+=s+(t[o]||"")}),e}var nt=["xs","sm","md","lg","xl"],V={mt:"margin-top",mr:"margin-right",mb:"margin-bottom",ml:"margin-left",m:"margin",mh:"margin-left margin-right",mv:"margin-top margin-bottom",pt:"padding-top",pr:"padding-right",pb:"padding-bottom",pl:"padding-left",p:"padding",ph:"padding-left padding-right",pv:"padding-top padding-bottom",g:"gap",gv:"row-gap",gh:"column-gap",bw:"border-width",bwt:"border-top-width",bwr:"border-right-width",bwb:"border-bottom-width",bwl:"border-left-width",bc:"border-color",br:"border-radius",pos:"position",shadow:"box-shadow",ta:"text-align",c:"color",cur:"cursor"},y=Object.keys(V),w=i=>i.concat(nt.flatMap(t=>i.map(e=>`${t}-${e}`))),U={default:void 0,xl:"@media only screen and (max-width: 1280px)",lg:"@media only screen and (max-width: 1024px)",md:"@media only screen and (max-width: 768px)",sm:"@media only screen and (max-width: 640px)"},u=(i,t={})=>{let e="";for(let[s,o]of Object.entries(U)){s!=="default"&&(e+=`${o} {`);for(let[n,l]of Object.entries(i)){let c=t[n]?` ${t[n]} `:" ";for(let[h,d]of Object.entries(l)){let g=V[n],m=d.startsWith("--")?`var(${d})`:d,b=s==="default"?n:`${s}-${n}`,A=s==="default"?`h-${n}`:`${s}-h-${n}`;if(g){let M=g.split(" ").map(k=>`${k}: ${m};`).join(" ");e+=`
|
|
2
2
|
:host([${b}="${h}"])${c}{
|
|
3
3
|
${M}
|
|
4
4
|
}
|
|
5
|
-
:host([${
|
|
5
|
+
:host([${A}="${h}"]:hover)${c}{
|
|
6
6
|
${M}
|
|
7
7
|
}
|
|
8
8
|
`}else e+=`
|
|
9
9
|
:host([${b}="${h}"])${c}{
|
|
10
10
|
${d}
|
|
11
11
|
}
|
|
12
|
-
:host([${
|
|
12
|
+
:host([${A}="${h}"]:hover)${c}{
|
|
13
13
|
${d}
|
|
14
14
|
}
|
|
15
15
|
`}}s!=="default"&&(e+="}")}return e};function ot(i){if(i===null||i.includes("/"))return!1;let t=String(i);return/[0-9]$/.test(t)}var rt=i=>/%$/.test(i),p=i=>{if(i!==void 0)return rt(i)?i:ot(i)?`${i}px`:Object.keys(r).includes(i)?`var(${r[i]})`:i},r={xs:"--spacing-xs",sm:"--spacing-sm",md:"--spacing-md",lg:"--spacing-lg",xl:"--spacing-xl"};function x(i,t=":host"){let e="",s=["default","xl","lg","md","sm"];for(let o of s){let n=U[o];if(!i[o]||Object.keys(i[o]).length===0)continue;o!=="default"&&(e+=`${n} {
|
|
@@ -329,7 +329,7 @@ var rettangoli=(()=>{function a(i,...t){let e="";return i.forEach((s,o)=>{e+=s+(
|
|
|
329
329
|
justify-content: center;
|
|
330
330
|
}
|
|
331
331
|
}
|
|
332
|
-
`;var ht={cur:{alias:"alias","all-scroll":"all-scroll",auto:"auto",cell:"cell","col-resize":"col-resize","context-menu":"context-menu",copy:"copy",crosshair:"crosshair",default:"default","e-resize":"e-resize","ew-resize":"ew-resize",grab:"grab",grabbing:"grabbing",help:"help",move:"move","n-resize":"n-resize","ne-resize":"ne-resize","nesw-resize":"nesw-resize","ns-resize":"ns-resize","nw-resize":"nw-resize","nwse-resize":"nwse-resize","no-drop":"no-drop",none:"none","not-allowed":"not-allowed",pointer:"pointer",progress:"progress","row-resize":"row-resize","s-resize":"s-resize","se-resize":"se-resize","sw-resize":"sw-resize",text:"text",url:"url","w-resize":"w-resize",wait:"wait","zoom-in":"zoom-in","zoom-out":"zoom-out",p:"pointer",m:"move"}},f=u(ht);var
|
|
332
|
+
`;var ht={cur:{alias:"alias","all-scroll":"all-scroll",auto:"auto",cell:"cell","col-resize":"col-resize","context-menu":"context-menu",copy:"copy",crosshair:"crosshair",default:"default","e-resize":"e-resize","ew-resize":"ew-resize",grab:"grab",grabbing:"grabbing",help:"help",move:"move","n-resize":"n-resize","ne-resize":"ne-resize","nesw-resize":"nesw-resize","ns-resize":"ns-resize","nw-resize":"nw-resize","nwse-resize":"nwse-resize","no-drop":"no-drop",none:"none","not-allowed":"not-allowed",pointer:"pointer",progress:"progress","row-resize":"row-resize","s-resize":"s-resize","se-resize":"se-resize","sw-resize":"sw-resize",text:"text",url:"url","w-resize":"w-resize",wait:"wait","zoom-in":"zoom-in","zoom-out":"zoom-out",p:"pointer",m:"move"}},f=u(ht);var F=a`
|
|
333
333
|
:host([sh]:not([sv])) {
|
|
334
334
|
overflow-x: scroll;
|
|
335
335
|
flex-wrap: nowrap;
|
|
@@ -411,7 +411,7 @@ var rettangoli=(()=>{function a(i,...t){let e="";return i.forEach((s,o)=>{e+=s+(
|
|
|
411
411
|
}
|
|
412
412
|
|
|
413
413
|
${_}
|
|
414
|
-
${
|
|
414
|
+
${F}
|
|
415
415
|
${R}
|
|
416
416
|
${v}
|
|
417
417
|
${f}
|
|
@@ -431,7 +431,7 @@ var rettangoli=(()=>{function a(i,...t){let e="";return i.forEach((s,o)=>{e+=s+(
|
|
|
431
431
|
bottom: 0;
|
|
432
432
|
z-index: 1;
|
|
433
433
|
}
|
|
434
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styleElement=document.createElement("style"),this._slotElement=document.createElement("slot"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return["href","target","op",...w([...y,"wh","w","h","hide","show","sh","sv","z","d","ah","av","flex","fw","overflow"])]}_styles={default:{},sm:{},md:{},lg:{},xl:{}};_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),e=this.getAttribute("target");this._slotElement.parentNode!==this.shadow&&this.shadow.appendChild(this._slotElement),t?(this._linkElement||(this._linkElement=document.createElement("a"),this.shadow.appendChild(this._linkElement)),this._linkElement.href=t,e?this._linkElement.target=e:this._linkElement.removeAttribute("target")):this._linkElement&&(this.shadow.removeChild(this._linkElement),this._linkElement=null)}connectedCallback(){this.updateStyles()}updateStyles(){this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(e=>{let s=q=>`${e==="default"?"":`${e}-`}${q}`,o=this.getAttribute(s("wh")),n=p(o===null?this.getAttribute(s("w")):o),l=p(o===null?this.getAttribute(s("h")):o),c=this.getAttribute(s("op")),h=this.getAttribute(s("z"));h!==null&&(this._styles[e]["z-index"]=h),c!==null&&(this._styles[e].opacity=c),n==="f"?this._styles[e].width="var(--width-stretch)":n!==void 0&&(this._styles[e].width=n,this._styles[e]["min-width"]=n,this._styles[e]["max-width"]=n),l==="f"?this._styles[e].height="100%":l!==void 0&&(this._styles[e].height=l,this._styles[e]["min-height"]=l,this._styles[e]["max-height"]=l),this.hasAttribute(s("hide"))&&(this._styles[e].display="none"),this.hasAttribute(s("show"))&&(this._styles[e].display="flex");let d=this.getAttribute(s("d")),g=this.getAttribute(s("ah")),m=this.getAttribute(s("av"));d==="h"?this._styles[e]["flex-direction"]="row":d==="v"?this._styles[e]["flex-direction"]="column":e==="default"&&!d&&["sm","md","lg","xl"].some(st=>this.hasAttribute(`${st}-d`))&&(this._styles[e]["flex-direction"]="column");let b=d==="h",
|
|
434
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styleElement=document.createElement("style"),this._slotElement=document.createElement("slot"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return["href","target","op",...w([...y,"wh","w","h","hide","show","sh","sv","z","d","ah","av","flex","fw","overflow"])]}_styles={default:{},sm:{},md:{},lg:{},xl:{}};_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),e=this.getAttribute("target");this._slotElement.parentNode!==this.shadow&&this.shadow.appendChild(this._slotElement),t?(this._linkElement||(this._linkElement=document.createElement("a"),this.shadow.appendChild(this._linkElement)),this._linkElement.href=t,e?this._linkElement.target=e:this._linkElement.removeAttribute("target")):this._linkElement&&(this.shadow.removeChild(this._linkElement),this._linkElement=null)}connectedCallback(){this.updateStyles()}updateStyles(){this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(e=>{let s=q=>`${e==="default"?"":`${e}-`}${q}`,o=this.getAttribute(s("wh")),n=p(o===null?this.getAttribute(s("w")):o),l=p(o===null?this.getAttribute(s("h")):o),c=this.getAttribute(s("op")),h=this.getAttribute(s("z"));h!==null&&(this._styles[e]["z-index"]=h),c!==null&&(this._styles[e].opacity=c),n==="f"?this._styles[e].width="var(--width-stretch)":n!==void 0&&(this._styles[e].width=n,this._styles[e]["min-width"]=n,this._styles[e]["max-width"]=n),l==="f"?this._styles[e].height="100%":l!==void 0&&(this._styles[e].height=l,this._styles[e]["min-height"]=l,this._styles[e]["max-height"]=l),this.hasAttribute(s("hide"))&&(this._styles[e].display="none"),this.hasAttribute(s("show"))&&(this._styles[e].display="flex");let d=this.getAttribute(s("d")),g=this.getAttribute(s("ah")),m=this.getAttribute(s("av"));d==="h"?this._styles[e]["flex-direction"]="row":d==="v"?this._styles[e]["flex-direction"]="column":e==="default"&&!d&&["sm","md","lg","xl"].some(st=>this.hasAttribute(`${st}-d`))&&(this._styles[e]["flex-direction"]="column");let b=d==="h",A=d==="v"||!d;b&&(g==="c"?this._styles[e]["justify-content"]="center":g==="e"?this._styles[e]["justify-content"]="flex-end":g==="s"&&(this._styles[e]["justify-content"]="flex-start"),m==="c"?(this._styles[e]["align-items"]="center",this._styles[e]["align-content"]="center"):m==="e"?(this._styles[e]["align-items"]="flex-end",this._styles[e]["align-content"]="flex-end"):m==="s"&&(this._styles[e]["align-items"]="flex-start")),A&&(g!==null||m!==null)&&(g==="c"?this._styles[e]["align-items"]="center":g==="e"?this._styles[e]["align-items"]="flex-end":g==="s"&&(this._styles[e]["align-items"]="flex-start"),m==="c"?this._styles[e]["justify-content"]="center":m==="e"?this._styles[e]["justify-content"]="flex-end":m==="s"&&(this._styles[e]["justify-content"]="flex-start"));let z=this.getAttribute(s("flex"));z!==null&&(this._styles[e].flex=z),this.getAttribute(s("fw"))==="w"&&(this._styles[e]["flex-wrap"]="wrap");let k=this.hasAttribute(s("sh")),I=this.hasAttribute(s("sv")),it=this.getAttribute(s("overflow"));k&&I?(this._styles[e].overflow="scroll",this._styles[e]["flex-wrap"]="nowrap"):k?(this._styles[e]["overflow-x"]="scroll",this._styles[e]["flex-wrap"]="nowrap"):I&&(this._styles[e]["overflow-y"]="scroll",this._styles[e]["flex-wrap"]="nowrap"),it==="hidden"&&(this._styles[e].overflow="hidden",this._styles[e]["flex-wrap"]="nowrap")});let t=x(this._styles);t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}attributeChangedCallback(t,e,s){if(t==="href"||t==="target"){this._updateDOM();return}e!==s&&this.updateStyles()}},K=({render:i,html:t})=>W;var gt={ta:{s:"start",c:"center",e:"end",j:"justify"},s:{h1:`
|
|
435
435
|
font-size: var(--h1-font-size);
|
|
436
436
|
font-weight: var(--h1-font-weight);
|
|
437
437
|
line-height: var(--h1-line-height);
|
|
@@ -705,7 +705,7 @@ var rettangoli=(()=>{function a(i,...t){let e="";return i.forEach((s,o)=>{e+=s+(
|
|
|
705
705
|
}
|
|
706
706
|
${v}
|
|
707
707
|
${f}
|
|
708
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styles={default:{},sm:{},md:{},lg:{},xl:{}},this._lastStyleString="",this._inputElement=document.createElement("input"),this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._inputElement),this._inputElement.addEventListener("input",this._onChange)}static get observedAttributes(){return["key","type","placeholder","disabled","value","s",...w([...y,"wh","w","h","hide","show","op","z"])]}get value(){return this._inputElement.value}set value(t){this._inputElement.value=t}focus(){this._inputElement.focus()}_onChange=t=>{this.dispatchEvent(new CustomEvent("input-change",{detail:{value:this._inputElement.value}}))};attributeChangedCallback(t,e,s){if(t==="
|
|
708
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styles={default:{},sm:{},md:{},lg:{},xl:{}},this._lastStyleString="",this._inputElement=document.createElement("input"),this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._inputElement),this._inputElement.addEventListener("input",this._onChange)}static get observedAttributes(){return["key","type","placeholder","disabled","value","s",...w([...y,"wh","w","h","hide","show","op","z"])]}get value(){return this._inputElement.value}set value(t){this._inputElement.value=t}focus(){this._inputElement.focus()}_onChange=t=>{this.dispatchEvent(new CustomEvent("input-change",{detail:{value:this._inputElement.value}}))};attributeChangedCallback(t,e,s){if(t==="value"&&requestAnimationFrame(()=>{let n=this.getAttribute("value");this._inputElement.value=n??""}),t==="placeholder"&&requestAnimationFrame(()=>{let n=this.getAttribute("placeholder");n===void 0||n==="null"?this._inputElement.removeAttribute("placeholder"):this._inputElement.setAttribute("placeholder",n??"")}),["type","disabled","step","s"].includes(t)){this._updateInputAttributes();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(n=>{let l=b=>`${n==="default"?"":`${n}-`}${b}`,c=this.getAttribute(l("wh")),h=p(c===null?this.getAttribute(l("w")):c),d=p(c===null?this.getAttribute(l("h")):c),g=this.getAttribute(l("op")),m=this.getAttribute(l("z"));m!==null&&(this._styles[n]["z-index"]=m),g!==null&&(this._styles[n].opacity=g),h==="f"?this._styles[n].width="var(--width-stretch)":h!==void 0&&(this._styles[n].width=h,this._styles[n]["min-width"]=h,this._styles[n]["max-width"]=h),d==="f"?this._styles[n].height="100%":d!==void 0&&(this._styles[n].height=d,this._styles[n]["min-height"]=d,this._styles[n]["max-height"]=d),this.hasAttribute(l("hide"))&&(this._styles[n].display="none !important"),this.hasAttribute(l("show"))&&(this._styles[n].display="block !important")});let o=x(this._styles,"input");o!==this._lastStyleString&&(this._styleElement.textContent=o,this._lastStyleString=o)}_updateInputAttributes(){let t=this.getAttribute("type")||"text",e=this.getAttribute("step"),s=this.hasAttribute("disabled");this._inputElement.setAttribute("type",t),e!==null?this._inputElement.setAttribute("step",e):this._inputElement.removeAttribute("step"),s?this._inputElement.setAttribute("disabled",""):this._inputElement.removeAttribute("disabled")}connectedCallback(){this._updateInputAttributes()}},Z=({render:i,html:t})=>H;var B=class i extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(a`
|
|
709
709
|
:host {
|
|
710
710
|
display: contents;
|
|
711
711
|
}
|
|
@@ -801,4 +801,4 @@ var rettangoli=(()=>{function a(i,...t){let e="";return i.forEach((s,o)=>{e+=s+(
|
|
|
801
801
|
dialog[open] slot[name="content"] {
|
|
802
802
|
animation: dialog-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
803
803
|
}
|
|
804
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._dialogElement=document.createElement("dialog"),this.shadow.appendChild(this._dialogElement),this._slotElement=null,this._isConnected=!1,this._dialogElement.addEventListener("click",t=>{t.target===this._dialogElement&&this.dispatchEvent(new CustomEvent("close",{detail:{}}))}),this._dialogElement.addEventListener("contextmenu",t=>{t.target===this._dialogElement&&(t.preventDefault(),this.dispatchEvent(new CustomEvent("close",{detail:{}})))}),this._dialogElement.addEventListener("cancel",t=>{t.preventDefault(),this.dispatchEvent(new CustomEvent("close",{detail:{}}))})}static get observedAttributes(){return["open","w","s"]}connectedCallback(){this._updateDialog(),this._isConnected=!0,this.hasAttribute("open")&&this._showModal()}attributeChangedCallback(t,e,s){t==="open"?s!==null&&!this._dialogElement.open&&this._isConnected?this._showModal():s===null&&this._dialogElement.open&&this._hideModal():t==="w"&&this._updateWidth()}_updateDialog(){this._updateWidth()}_updateWidth(){let t=this.getAttribute("w");t?this._dialogElement.style.width=t:this._dialogElement.style.width=""}_showModal(){this._dialogElement.open||(this._slotElement||(this._slotElement=document.createElement("slot"),this._slotElement.setAttribute("name","content"),this._dialogElement.appendChild(this._slotElement)),this._dialogElement.showModal(),this._dialogElement.scrollTop=0,this._applyAdaptiveCentering())}_hideModal(){this._dialogElement.open&&(this._dialogElement.close(),this._slotElement&&(this._slotElement.style.marginTop="",this._slotElement.style.marginBottom="",this._dialogElement.removeChild(this._slotElement),this._slotElement=null),this._dialogElement.style.height="")}_applyAdaptiveCentering(){this._slotElement&&requestAnimationFrame(()=>{if(!this._slotElement)return;let t=this._slotElement.offsetHeight,e=window.innerHeight,s=40;if(t>=e-2*s)this._slotElement.style.marginTop=`${s}px`,this._slotElement.style.marginBottom=`${s}px`,this._dialogElement.style.height="100vh";else{let o=e-t,n=Math.floor(o/2);this._slotElement.style.marginTop=`${n}px`,this._slotElement.style.marginBottom=`${n}px`,this._dialogElement.style.height="auto"}})}get dialog(){return this._dialogElement}},et=({render:i,html:t})=>L;customElements.define("rtgl-button",P({}));customElements.define("rtgl-view",
|
|
804
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._dialogElement=document.createElement("dialog"),this.shadow.appendChild(this._dialogElement),this._slotElement=null,this._isConnected=!1,this._dialogElement.addEventListener("click",t=>{t.target===this._dialogElement&&this.dispatchEvent(new CustomEvent("close",{detail:{}}))}),this._dialogElement.addEventListener("contextmenu",t=>{t.target===this._dialogElement&&(t.preventDefault(),this.dispatchEvent(new CustomEvent("close",{detail:{}})))}),this._dialogElement.addEventListener("cancel",t=>{t.preventDefault(),this.dispatchEvent(new CustomEvent("close",{detail:{}}))})}static get observedAttributes(){return["open","w","s"]}connectedCallback(){this._updateDialog(),this._isConnected=!0,this.hasAttribute("open")&&this._showModal()}attributeChangedCallback(t,e,s){t==="open"?s!==null&&!this._dialogElement.open&&this._isConnected?this._showModal():s===null&&this._dialogElement.open&&this._hideModal():t==="w"&&this._updateWidth()}_updateDialog(){this._updateWidth()}_updateWidth(){let t=this.getAttribute("w");t?this._dialogElement.style.width=t:this._dialogElement.style.width=""}_showModal(){this._dialogElement.open||(this._slotElement||(this._slotElement=document.createElement("slot"),this._slotElement.setAttribute("name","content"),this._dialogElement.appendChild(this._slotElement)),this._dialogElement.showModal(),this._dialogElement.scrollTop=0,this._applyAdaptiveCentering())}_hideModal(){this._dialogElement.open&&(this._dialogElement.close(),this._slotElement&&(this._slotElement.style.marginTop="",this._slotElement.style.marginBottom="",this._dialogElement.removeChild(this._slotElement),this._slotElement=null),this._dialogElement.style.height="")}_applyAdaptiveCentering(){this._slotElement&&requestAnimationFrame(()=>{if(!this._slotElement)return;let t=this._slotElement.offsetHeight,e=window.innerHeight,s=40;if(t>=e-2*s)this._slotElement.style.marginTop=`${s}px`,this._slotElement.style.marginBottom=`${s}px`,this._dialogElement.style.height="100vh";else{let o=e-t,n=Math.floor(o/2);this._slotElement.style.marginTop=`${n}px`,this._slotElement.style.marginBottom=`${n}px`,this._dialogElement.style.height="auto"}})}get dialog(){return this._dialogElement}},et=({render:i,html:t})=>L;customElements.define("rtgl-button",P({}));customElements.define("rtgl-view",K({}));customElements.define("rtgl-text",G({}));customElements.define("rtgl-image",J({}));customElements.define("rtgl-svg",Y({}));customElements.define("rtgl-input",Z({}));customElements.define("rtgl-textarea",tt({}));customElements.define("rtgl-dialog",et({}));})();
|