@rettangoli/ui 1.0.24 → 1.1.0

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

@@ -214,6 +214,10 @@ var rettangoli=(()=>{var B=`
           background-color: var(--accent);
         }
 
+        :host([v="ol"]) .surface:active {
+          background-color: var(--accent);
+        }
+
         :host([v="gh"]) .surface:hover {
           background-color: var(--accent);
         }
@@ -1398,12 +1402,17 @@ var rettangoli=(()=>{var B=`
         }
 
         slot[name="content"] {
+          display: contents;
+        }
+
+        ::slotted([slot="content"]) {
           display: block;
-          background-color: var(--muted);
+          box-sizing: border-box;
+          background-color: var(--background);
           border: 1px solid var(--border);
-          border-radius: var(--rtgl-popover-content-border-radius, var(--border-radius-md));
-          padding: var(--rtgl-popover-content-padding, var(--spacing-md));
-          min-width: var(--rtgl-popover-content-min-width, 200px);
-          max-width: var(--rtgl-popover-content-max-width, 400px);
+          border-radius: var(--border-radius-md);
+          padding: var(--spacing-md);
+          min-width: 200px;
+          max-width: 400px;
         }
       `))}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._dialogElement.addEventListener("click",t=>{t.stopPropagation();let e=t.composedPath();(e[0]===this._dialogElement||e[0].nodeName==="DIALOG"&&e[0]===this._dialogElement)&&this._emitClose()}),this._dialogElement.addEventListener("contextmenu",t=>{let e=t.composedPath();(e[0]===this._dialogElement||e[0].nodeName==="DIALOG"&&e[0]===this._dialogElement)&&(t.preventDefault(),this._emitClose())}),this._dialogElement.addEventListener("cancel",t=>{t.preventDefault(),this._emitClose()}),this._popoverContainer=document.createElement("div"),this._popoverContainer.className="popover-container",this._dialogElement.appendChild(this._popoverContainer),this._slotElement=null,this._isOpen=!1}_emitClose(){this.dispatchEvent(new CustomEvent("close",{detail:{},bubbles:!0}))}static get observedAttributes(){return["open","x","y","place","no-overlay"]}connectedCallback(){this.hasAttribute("open")&&this._show()}disconnectedCallback(){this._isOpen&&this._dialogElement.open&&this._dialogElement.close()}attributeChangedCallback(t,e,s){t==="open"?s!==null&&!this._isOpen?this.isConnected&&this._show():s===null&&this._isOpen&&this._hide():(t==="x"||t==="y"||t==="place")&&this._isOpen?this._updatePosition():t==="no-overlay"&&e!==s&&this._isOpen&&(this._hide(),this._show())}_show(){this._isOpen||(this._slotElement||(this._slotElement=document.createElement("slot"),this._slotElement.setAttribute("name","content"),this._popoverContainer.appendChild(this._slotElement)),this._isOpen=!0,this._dialogElement.open||setTimeout(()=>{this._dialogElement&&!this._dialogElement.open&&(this.hasAttribute("no-overlay")?this._dialogElement.show():this._dialogElement.showModal())},0),requestAnimationFrame(()=>{this._updatePosition()}))}_hide(){this._isOpen&&(this._isOpen=!1,this._dialogElement.open&&this._dialogElement.close(),this._slotElement&&(this._popoverContainer.removeChild(this._slotElement),this._slotElement=null))}_updatePosition(){let t=parseFloat(this.getAttribute("x")||"0"),e=parseFloat(this.getAttribute("y")||"0"),s=this.getAttribute("place")||"bs";this.removeAttribute("positioned"),requestAnimationFrame(()=>{let r=this._popoverContainer.getBoundingClientRect(),{left:n,top:o}=this._calculatePosition(t,e,r.width,r.height,s);this._popoverContainer.style.left=`${n}px`,this._popoverContainer.style.top=`${o}px`,requestAnimationFrame(()=>{this.setAttribute("positioned","")})})}_calculatePosition(t,e,s,r,n){let l=t,a=e;switch(n){case"t":l=t-s/2,a=e-r-8;break;case"ts":l=t,a=e-r-8;break;case"te":l=t-s,a=e-r-8;break;case"r":l=t+8,a=e-r/2;break;case"rs":l=t+8,a=e;break;case"re":l=t+8,a=e-r;break;case"b":l=t-s/2,a=e+8;break;case"bs":l=t,a=e+8;break;case"be":l=t-s,a=e+8;break;case"l":l=t-s-8,a=e-r/2;break;case"ls":l=t-s-8,a=e;break;case"le":l=t-s-8,a=e-r;break;default:l=t,a=e+8;break}let h=8;return l=Math.max(h,Math.min(l,window.innerWidth-s-h)),a=Math.max(h,Math.min(a,window.innerHeight-r-h)),{left:l,top:a}}get popover(){return this._popoverContainer}},ee=({render:i,html:t})=>yt;customElements.define("rtgl-button",$t({}));customElements.define("rtgl-carousel",Mt({}));customElements.define("rtgl-grid",Ot({}));customElements.define("rtgl-view",Ft({}));customElements.define("rtgl-text",Pt({}));customElements.define("rtgl-image",Dt({}));customElements.define("rtgl-tag",Ut({}));customElements.define("rtgl-svg",qt({}));customElements.define("rtgl-input",z({}));customElements.define("rtgl-input-date",Gt({}));customElements.define("rtgl-input-time",Kt({}));customElements.define("rtgl-input-datetime",Xt({}));customElements.define("rtgl-input-number",Yt({}));customElements.define("rtgl-textarea",Qt({}));customElements.define("rtgl-color-picker",Jt({}));customElements.define("rtgl-slider",Zt({}));customElements.define("rtgl-dialog",te({}));customElements.define("rtgl-popover",ee({}));})();