@rettangoli/ui 1.0.23 → 1.0.24

package/dist/rettangoli-iife-layout.min.js

@@ -1351,7 +1351,7 @@ var rettangoli=(()=>{var B=`
             animation: none;
           }
         }
-      `))}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._adaptiveFrameId=null,this._layoutRetryCount=0,this._observedContentElement=null,this._resizeObserver=typeof ResizeObserver<"u"?new ResizeObserver(()=>{this._scheduleAdaptiveCentering()}):null,this._onSlotChange=()=>{this._observeAssignedContent(),this._scheduleAdaptiveCentering({resetRetries:!0})},this._onWindowResize=()=>{this._scheduleAdaptiveCentering({resetRetries:!0})},this._mouseDownInContent=!1,this._dialogElement.addEventListener("mousedown",t=>{this._mouseDownInContent=t.target!==this._dialogElement}),this._dialogElement.addEventListener("click",t=>{t.target===this._dialogElement&&!this._mouseDownInContent&&this._attemptClose(),this._mouseDownInContent=!1}),this._dialogElement.addEventListener("contextmenu",t=>{t.target===this._dialogElement&&!this._mouseDownInContent&&(t.preventDefault(),this._attemptClose()),this._mouseDownInContent=!1}),this._dialogElement.addEventListener("cancel",t=>{t.preventDefault(),this._attemptClose()})}_attemptClose(){this.dispatchEvent(new CustomEvent("close",{detail:{},bubbles:!0}))}static get observedAttributes(){return["open","w","s"]}connectedCallback(){this._updateDialog(),this._isConnected=!0,this.hasAttribute("open")&&this._showModal()}disconnectedCallback(){this._isConnected=!1,this._stopAdaptiveObservers(),this._slotElement&&this._slotElement.removeEventListener("slotchange",this._onSlotChange),this._dialogElement.open&&this._dialogElement.close()}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._slotElement.addEventListener("slotchange",this._onSlotChange),this._dialogElement.appendChild(this._slotElement)),this._dialogElement.showModal(),this._dialogElement.scrollTop=0,window.addEventListener("resize",this._onWindowResize),this._observeAssignedContent(),this._scheduleAdaptiveCentering({resetRetries:!0}))}_hideModal(){this._dialogElement.open&&(this._stopAdaptiveObservers(),this._dialogElement.close(),this._slotElement&&(this._slotElement.removeEventListener("slotchange",this._onSlotChange),this._slotElement.style.marginTop="",this._slotElement.style.marginBottom="",this._dialogElement.removeChild(this._slotElement),this._slotElement=null),this._dialogElement.style.height="")}_stopAdaptiveObservers(){this._adaptiveFrameId!==null&&(cancelAnimationFrame(this._adaptiveFrameId),this._adaptiveFrameId=null),this._layoutRetryCount=0,window.removeEventListener("resize",this._onWindowResize),this._resizeObserver&&this._observedContentElement&&this._resizeObserver.unobserve(this._observedContentElement),this._observedContentElement=null}_getAssignedContentElement(){if(!this._slotElement)return null;let t=this._slotElement.assignedElements({flatten:!0});return t.length>0?t[0]:null}_observeAssignedContent(){if(!this._resizeObserver)return;let t=this._getAssignedContentElement();this._observedContentElement!==t&&(this._observedContentElement&&this._resizeObserver.unobserve(this._observedContentElement),this._observedContentElement=t,this._observedContentElement&&this._resizeObserver.observe(this._observedContentElement))}_scheduleAdaptiveCentering({resetRetries:t=!1}={}){!this._slotElement||!this._dialogElement.open||(t&&(this._layoutRetryCount=0),this._adaptiveFrameId!==null&&cancelAnimationFrame(this._adaptiveFrameId),this._adaptiveFrameId=requestAnimationFrame(()=>{this._adaptiveFrameId=requestAnimationFrame(()=>{this._adaptiveFrameId=null,this._applyAdaptiveCentering()})}))}_applyAdaptiveCentering(){if(!this._slotElement||!this._dialogElement.open)return;this._observeAssignedContent();let t=this._getAssignedContentElement(),e=t?Math.round(t.getBoundingClientRect().height):0;if(e<=0){this._layoutRetryCount<Fe&&(this._layoutRetryCount+=1,this._scheduleAdaptiveCentering());return}this._layoutRetryCount=0;let s=window.innerHeight;if(e>=s-2*vt){this._slotElement.style.marginTop=`${vt}px`,this._slotElement.style.marginBottom=`${vt}px`,this._dialogElement.style.height="100vh";return}let r=s-e,n=Math.floor(r/2);this._slotElement.style.marginTop=`${n}px`,this._slotElement.style.marginBottom=`${n}px`,this._dialogElement.style.height="auto"}get dialog(){return this._dialogElement}},te=({render:i,html:t})=>_t;var yt=class i extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(d`
+      `))}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._adaptiveFrameId=null,this._layoutRetryCount=0,this._observedContentElement=null,this._resizeObserver=typeof ResizeObserver<"u"?new ResizeObserver(()=>{this._scheduleAdaptiveCentering()}):null,this._onSlotChange=()=>{this._observeAssignedContent(),this._scheduleAdaptiveCentering({resetRetries:!0})},this._onWindowResize=()=>{this._scheduleAdaptiveCentering({resetRetries:!0})},this._mouseDownInContent=!1,this._dialogElement.addEventListener("mousedown",t=>{this._mouseDownInContent=t.target!==this._dialogElement}),this._dialogElement.addEventListener("click",t=>{t.target===this._dialogElement&&!this._mouseDownInContent&&this._attemptClose(),this._mouseDownInContent=!1}),this._dialogElement.addEventListener("contextmenu",t=>{t.target===this._dialogElement&&!this._mouseDownInContent&&(t.preventDefault(),this._attemptClose()),this._mouseDownInContent=!1}),this._dialogElement.addEventListener("cancel",t=>{t.preventDefault(),this._attemptClose()})}_attemptClose(){this.dispatchEvent(new CustomEvent("close",{detail:{},bubbles:!0}))}static get observedAttributes(){return["open","w","s"]}connectedCallback(){this._updateDialog(),this._isConnected=!0,this.hasAttribute("open")&&this._showModal()}disconnectedCallback(){this._isConnected=!1,this._stopAdaptiveObservers(),this._slotElement&&this._slotElement.removeEventListener("slotchange",this._onSlotChange),this._dialogElement.open&&this._dialogElement.close()}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._slotElement.addEventListener("slotchange",this._onSlotChange),this._dialogElement.appendChild(this._slotElement)),this._dialogElement.showModal(),this._dialogElement.scrollTop=0,window.addEventListener("resize",this._onWindowResize),this._observeAssignedContent(),this._layoutRetryCount=0,this._applyAdaptiveCentering())}_hideModal(){this._dialogElement.open&&(this._stopAdaptiveObservers(),this._dialogElement.close(),this._slotElement&&(this._slotElement.removeEventListener("slotchange",this._onSlotChange),this._slotElement.style.marginTop="",this._slotElement.style.marginBottom="",this._dialogElement.removeChild(this._slotElement),this._slotElement=null),this._dialogElement.style.height="")}_stopAdaptiveObservers(){this._adaptiveFrameId!==null&&(cancelAnimationFrame(this._adaptiveFrameId),this._adaptiveFrameId=null),this._layoutRetryCount=0,window.removeEventListener("resize",this._onWindowResize),this._resizeObserver&&this._observedContentElement&&this._resizeObserver.unobserve(this._observedContentElement),this._observedContentElement=null}_getAssignedContentElement(){if(!this._slotElement)return null;let t=this._slotElement.assignedElements({flatten:!0});return t.length>0?t[0]:null}_observeAssignedContent(){if(!this._resizeObserver)return;let t=this._getAssignedContentElement();this._observedContentElement!==t&&(this._observedContentElement&&this._resizeObserver.unobserve(this._observedContentElement),this._observedContentElement=t,this._observedContentElement&&this._resizeObserver.observe(this._observedContentElement))}_scheduleAdaptiveCentering({resetRetries:t=!1}={}){!this._slotElement||!this._dialogElement.open||(t&&(this._layoutRetryCount=0),this._adaptiveFrameId!==null&&cancelAnimationFrame(this._adaptiveFrameId),this._adaptiveFrameId=requestAnimationFrame(()=>{this._adaptiveFrameId=requestAnimationFrame(()=>{this._adaptiveFrameId=null,this._applyAdaptiveCentering()})}))}_applyAdaptiveCentering(){if(!this._slotElement||!this._dialogElement.open)return;this._observeAssignedContent();let t=this._getAssignedContentElement(),e=t?Math.round(t.getBoundingClientRect().height):0;if(e<=0){this._layoutRetryCount<Fe&&(this._layoutRetryCount+=1,this._scheduleAdaptiveCentering());return}this._layoutRetryCount=0;let s=window.innerHeight;if(e>=s-2*vt){this._slotElement.style.marginTop=`${vt}px`,this._slotElement.style.marginBottom=`${vt}px`,this._dialogElement.style.height="100vh";return}let r=s-e,n=Math.floor(r/2);this._slotElement.style.marginTop=`${n}px`,this._slotElement.style.marginBottom=`${n}px`,this._dialogElement.style.height="auto"}get dialog(){return this._dialogElement}},te=({render:i,html:t})=>_t;var yt=class i extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(d`
         :host {
           display: contents;
         }

package/dist/rettangoli-iife-ui.min.js

@@ -1420,7 +1420,7 @@ var rettangoli=(()=>{var ve=`
             animation: none;
           }
         }
-      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._dialogElement=document.createElement("dialog"),this.shadow.appendChild(this._dialogElement),this._slotElement=null,this._isConnected=!1,this._adaptiveFrameId=null,this._layoutRetryCount=0,this._observedContentElement=null,this._resizeObserver=typeof ResizeObserver<"u"?new ResizeObserver(()=>{this._scheduleAdaptiveCentering()}):null,this._onSlotChange=()=>{this._observeAssignedContent(),this._scheduleAdaptiveCentering({resetRetries:!0})},this._onWindowResize=()=>{this._scheduleAdaptiveCentering({resetRetries:!0})},this._mouseDownInContent=!1,this._dialogElement.addEventListener("mousedown",t=>{this._mouseDownInContent=t.target!==this._dialogElement}),this._dialogElement.addEventListener("click",t=>{t.target===this._dialogElement&&!this._mouseDownInContent&&this._attemptClose(),this._mouseDownInContent=!1}),this._dialogElement.addEventListener("contextmenu",t=>{t.target===this._dialogElement&&!this._mouseDownInContent&&(t.preventDefault(),this._attemptClose()),this._mouseDownInContent=!1}),this._dialogElement.addEventListener("cancel",t=>{t.preventDefault(),this._attemptClose()})}_attemptClose(){this.dispatchEvent(new CustomEvent("close",{detail:{},bubbles:!0}))}static get observedAttributes(){return["open","w","s"]}connectedCallback(){this._updateDialog(),this._isConnected=!0,this.hasAttribute("open")&&this._showModal()}disconnectedCallback(){this._isConnected=!1,this._stopAdaptiveObservers(),this._slotElement&&this._slotElement.removeEventListener("slotchange",this._onSlotChange),this._dialogElement.open&&this._dialogElement.close()}attributeChangedCallback(t,r,i){t==="open"?i!==null&&!this._dialogElement.open&&this._isConnected?this._showModal():i===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._slotElement.addEventListener("slotchange",this._onSlotChange),this._dialogElement.appendChild(this._slotElement)),this._dialogElement.showModal(),this._dialogElement.scrollTop=0,window.addEventListener("resize",this._onWindowResize),this._observeAssignedContent(),this._scheduleAdaptiveCentering({resetRetries:!0}))}_hideModal(){this._dialogElement.open&&(this._stopAdaptiveObservers(),this._dialogElement.close(),this._slotElement&&(this._slotElement.removeEventListener("slotchange",this._onSlotChange),this._slotElement.style.marginTop="",this._slotElement.style.marginBottom="",this._dialogElement.removeChild(this._slotElement),this._slotElement=null),this._dialogElement.style.height="")}_stopAdaptiveObservers(){this._adaptiveFrameId!==null&&(cancelAnimationFrame(this._adaptiveFrameId),this._adaptiveFrameId=null),this._layoutRetryCount=0,window.removeEventListener("resize",this._onWindowResize),this._resizeObserver&&this._observedContentElement&&this._resizeObserver.unobserve(this._observedContentElement),this._observedContentElement=null}_getAssignedContentElement(){if(!this._slotElement)return null;let t=this._slotElement.assignedElements({flatten:!0});return t.length>0?t[0]:null}_observeAssignedContent(){if(!this._resizeObserver)return;let t=this._getAssignedContentElement();this._observedContentElement!==t&&(this._observedContentElement&&this._resizeObserver.unobserve(this._observedContentElement),this._observedContentElement=t,this._observedContentElement&&this._resizeObserver.observe(this._observedContentElement))}_scheduleAdaptiveCentering({resetRetries:t=!1}={}){!this._slotElement||!this._dialogElement.open||(t&&(this._layoutRetryCount=0),this._adaptiveFrameId!==null&&cancelAnimationFrame(this._adaptiveFrameId),this._adaptiveFrameId=requestAnimationFrame(()=>{this._adaptiveFrameId=requestAnimationFrame(()=>{this._adaptiveFrameId=null,this._applyAdaptiveCentering()})}))}_applyAdaptiveCentering(){if(!this._slotElement||!this._dialogElement.open)return;this._observeAssignedContent();let t=this._getAssignedContentElement(),r=t?Math.round(t.getBoundingClientRect().height):0;if(r<=0){this._layoutRetryCount<kn&&(this._layoutRetryCount+=1,this._scheduleAdaptiveCentering());return}this._layoutRetryCount=0;let i=window.innerHeight;if(r>=i-2*Zt){this._slotElement.style.marginTop=`${Zt}px`,this._slotElement.style.marginBottom=`${Zt}px`,this._dialogElement.style.height="100vh";return}let s=i-r,n=Math.floor(s/2);this._slotElement.style.marginTop=`${n}px`,this._slotElement.style.marginBottom=`${n}px`,this._dialogElement.style.height="auto"}get dialog(){return this._dialogElement}},fi=({render:e,html:t})=>Qt;var er=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(T`
+      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._dialogElement=document.createElement("dialog"),this.shadow.appendChild(this._dialogElement),this._slotElement=null,this._isConnected=!1,this._adaptiveFrameId=null,this._layoutRetryCount=0,this._observedContentElement=null,this._resizeObserver=typeof ResizeObserver<"u"?new ResizeObserver(()=>{this._scheduleAdaptiveCentering()}):null,this._onSlotChange=()=>{this._observeAssignedContent(),this._scheduleAdaptiveCentering({resetRetries:!0})},this._onWindowResize=()=>{this._scheduleAdaptiveCentering({resetRetries:!0})},this._mouseDownInContent=!1,this._dialogElement.addEventListener("mousedown",t=>{this._mouseDownInContent=t.target!==this._dialogElement}),this._dialogElement.addEventListener("click",t=>{t.target===this._dialogElement&&!this._mouseDownInContent&&this._attemptClose(),this._mouseDownInContent=!1}),this._dialogElement.addEventListener("contextmenu",t=>{t.target===this._dialogElement&&!this._mouseDownInContent&&(t.preventDefault(),this._attemptClose()),this._mouseDownInContent=!1}),this._dialogElement.addEventListener("cancel",t=>{t.preventDefault(),this._attemptClose()})}_attemptClose(){this.dispatchEvent(new CustomEvent("close",{detail:{},bubbles:!0}))}static get observedAttributes(){return["open","w","s"]}connectedCallback(){this._updateDialog(),this._isConnected=!0,this.hasAttribute("open")&&this._showModal()}disconnectedCallback(){this._isConnected=!1,this._stopAdaptiveObservers(),this._slotElement&&this._slotElement.removeEventListener("slotchange",this._onSlotChange),this._dialogElement.open&&this._dialogElement.close()}attributeChangedCallback(t,r,i){t==="open"?i!==null&&!this._dialogElement.open&&this._isConnected?this._showModal():i===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._slotElement.addEventListener("slotchange",this._onSlotChange),this._dialogElement.appendChild(this._slotElement)),this._dialogElement.showModal(),this._dialogElement.scrollTop=0,window.addEventListener("resize",this._onWindowResize),this._observeAssignedContent(),this._layoutRetryCount=0,this._applyAdaptiveCentering())}_hideModal(){this._dialogElement.open&&(this._stopAdaptiveObservers(),this._dialogElement.close(),this._slotElement&&(this._slotElement.removeEventListener("slotchange",this._onSlotChange),this._slotElement.style.marginTop="",this._slotElement.style.marginBottom="",this._dialogElement.removeChild(this._slotElement),this._slotElement=null),this._dialogElement.style.height="")}_stopAdaptiveObservers(){this._adaptiveFrameId!==null&&(cancelAnimationFrame(this._adaptiveFrameId),this._adaptiveFrameId=null),this._layoutRetryCount=0,window.removeEventListener("resize",this._onWindowResize),this._resizeObserver&&this._observedContentElement&&this._resizeObserver.unobserve(this._observedContentElement),this._observedContentElement=null}_getAssignedContentElement(){if(!this._slotElement)return null;let t=this._slotElement.assignedElements({flatten:!0});return t.length>0?t[0]:null}_observeAssignedContent(){if(!this._resizeObserver)return;let t=this._getAssignedContentElement();this._observedContentElement!==t&&(this._observedContentElement&&this._resizeObserver.unobserve(this._observedContentElement),this._observedContentElement=t,this._observedContentElement&&this._resizeObserver.observe(this._observedContentElement))}_scheduleAdaptiveCentering({resetRetries:t=!1}={}){!this._slotElement||!this._dialogElement.open||(t&&(this._layoutRetryCount=0),this._adaptiveFrameId!==null&&cancelAnimationFrame(this._adaptiveFrameId),this._adaptiveFrameId=requestAnimationFrame(()=>{this._adaptiveFrameId=requestAnimationFrame(()=>{this._adaptiveFrameId=null,this._applyAdaptiveCentering()})}))}_applyAdaptiveCentering(){if(!this._slotElement||!this._dialogElement.open)return;this._observeAssignedContent();let t=this._getAssignedContentElement(),r=t?Math.round(t.getBoundingClientRect().height):0;if(r<=0){this._layoutRetryCount<kn&&(this._layoutRetryCount+=1,this._scheduleAdaptiveCentering());return}this._layoutRetryCount=0;let i=window.innerHeight;if(r>=i-2*Zt){this._slotElement.style.marginTop=`${Zt}px`,this._slotElement.style.marginBottom=`${Zt}px`,this._dialogElement.style.height="100vh";return}let s=i-r,n=Math.floor(s/2);this._slotElement.style.marginTop=`${n}px`,this._slotElement.style.marginBottom=`${n}px`,this._dialogElement.style.height="auto"}get dialog(){return this._dialogElement}},fi=({render:e,html:t})=>Qt;var er=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(T`
         :host {
           display: contents;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",

package/src/primitives/dialog.js

@@ -229,7 +229,10 @@ class RettangoliDialogElement extends HTMLElement {
 
       window.addEventListener("resize", this._onWindowResize);
       this._observeAssignedContent();
-      this._scheduleAdaptiveCentering({ resetRetries: true });
+      this._layoutRetryCount = 0;
+      // Apply the first centering pass before paint so the enter animation
+      // starts from the final position instead of jumping after mount.
+      this._applyAdaptiveCentering();
     }
   }