@rettangoli/ui 1.2.4 → 1.3.0

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

@@ -538,6 +538,8 @@ var rettangoli=(()=>{var L=`
     background-color: var(--foreground);
     `,bg:`
     background-color: var(--background);
+    `,su:`
+    background-color: var(--surface);
     `,mu:`
     background-color: var(--muted);
     `,ac:`
@@ -568,7 +570,7 @@ var rettangoli=(()=>{var L=`
         left: 0;
         top: 0;
         height: 100%;
-        `},shadow:{sm:"--shadow-sm",md:"--shadow-md",lg:"--shadow-lg"},pt:u,pr:u,pb:u,pl:u,p:u,ph:u,pv:u,g:u,gv:u,gh:u,bw:N,bwt:N,bwr:N,bwb:N,bwl:N,bc:{pr:"--primary",se:"--secondary",de:"--destructive",fg:"--foreground",bg:"--background",mu:"--muted",ac:"--accent",bo:"--border",tr:"transparent"},br:{xs:"--border-radius-xs",sm:"--border-radius-sm",md:"--border-radius-md",lg:"--border-radius-lg",xl:"--border-radius-xl",f:"--border-radius-f"}},q=v(Ee);var Ae={mt:u,mr:u,mb:u,ml:u,m:u,mh:u,mv:u},g=v(Ae);var W=d`
+        `},shadow:{sm:"--shadow-sm",md:"--shadow-md",lg:"--shadow-lg"},pt:u,pr:u,pb:u,pl:u,p:u,ph:u,pv:u,g:u,gv:u,gh:u,bw:N,bwt:N,bwr:N,bwb:N,bwl:N,bc:{pr:"--primary",se:"--secondary",de:"--destructive",fg:"--foreground",bg:"--background",su:"--surface",mu:"--muted",ac:"--accent",bo:"--border",tr:"transparent"},br:{xs:"--border-radius-xs",sm:"--border-radius-sm",md:"--border-radius-md",lg:"--border-radius-lg",xl:"--border-radius-xl",f:"--border-radius-f"}},q=v(Ee);var Ae={mt:u,mr:u,mb:u,ml:u,m:u,mh:u,mv:u},g=v(Ae);var W=d`
   a, a:link, a:visited, a:hover, a:active {
     color: inherit;
     text-decoration: none;
@@ -756,7 +758,7 @@ var rettangoli=(()=>{var L=`
         ${K}
         ${g}
         ${m}
-      `))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._slotElement=document.createElement("slot"),this._linkElement=null,this._updateDOM()}static get observedAttributes(){return["key","w","ellipsis","href","new-tab","rel","break-long-tokens"]}connectedCallback(){this._updateStyling(),this._updateDOM()}attributeChangedCallback(t,e,s){t==="href"||t==="new-tab"||t==="rel"?this._updateDOM():this._updateStyling()}_updateStyling(){let t=c(this.getAttribute("w")),e=this.hasAttribute("ellipsis"),s=this.hasAttribute("break-long-tokens");e?(this.style.overflow="hidden",this.style.textOverflow="ellipsis",this.style.whiteSpace="nowrap",this.style.overflowWrap="",this.style.wordBreak=""):(this.style.overflow="",this.style.textOverflow="",this.style.whiteSpace="",this.style.overflowWrap=s?"anywhere":"",this.style.wordBreak=s?"break-word":""),M({style:this.style,width:t,flexMinWidth:"0"})}_updateDOM(){let t=this.getAttribute("href"),e=this.hasAttribute("new-tab"),s=this.getAttribute("rel");this._linkElement=T({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:e,rel:s})}},Pt=({render:i,html:t})=>ot;var R={none:"0",xs:"--border-width-xs",sm:"--border-width-sm",md:"--border-width-md",lg:"--border-width-lg",xl:"--border-width-xl"},$e={bgc:{pr:"background-color: var(--primary);",se:"background-color: var(--secondary);",de:"background-color: var(--destructive);",fg:"background-color: var(--foreground);",bg:"background-color: var(--background);",mu:"background-color: var(--muted);",ac:"background-color: var(--accent);",bo:"background-color: var(--border);"},pos:{rel:"relative",abs:"absolute",fix:"fixed"},shadow:{sm:"--shadow-sm",md:"--shadow-md",lg:"--shadow-lg"},bw:R,bwt:R,bwr:R,bwb:R,bwl:R,bc:{pr:"--primary",se:"--secondary",de:"--destructive",fg:"--foreground",bg:"--background",mu:"--muted",ac:"--accent",bo:"--border",tr:"transparent"},br:{xs:"--border-radius-xs",sm:"--border-radius-sm",md:"--border-radius-md",lg:"--border-radius-lg",xl:"--border-radius-xl",f:"--border-radius-f"}},Dt=i=>v($e,{},i);var ze={mt:u,mr:u,mb:u,ml:u,m:u,mh:u,mv:u},Vt=i=>v(ze,{},i);var lt=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._slotElement=document.createElement("slot"),this._linkElement=null,this._updateDOM()}static get observedAttributes(){return["key","w","ellipsis","href","new-tab","rel","break-long-tokens"]}connectedCallback(){this._updateStyling(),this._updateDOM()}attributeChangedCallback(t,e,s){t==="href"||t==="new-tab"||t==="rel"?this._updateDOM():this._updateStyling()}_updateStyling(){let t=c(this.getAttribute("w")),e=this.hasAttribute("ellipsis"),s=this.hasAttribute("break-long-tokens");e?(this.style.overflow="hidden",this.style.textOverflow="ellipsis",this.style.whiteSpace="nowrap",this.style.overflowWrap="",this.style.wordBreak=""):(this.style.overflow="",this.style.textOverflow="",this.style.whiteSpace="",this.style.overflowWrap=s?"anywhere":"",this.style.wordBreak=s?"break-word":""),M({style:this.style,width:t,flexMinWidth:"0"})}_updateDOM(){let t=this.getAttribute("href"),e=this.hasAttribute("new-tab"),s=this.getAttribute("rel");this._linkElement=T({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:e,rel:s})}},Pt=({render:i,html:t})=>ot;var R={none:"0",xs:"--border-width-xs",sm:"--border-width-sm",md:"--border-width-md",lg:"--border-width-lg",xl:"--border-width-xl"},$e={bgc:{pr:"background-color: var(--primary);",se:"background-color: var(--secondary);",de:"background-color: var(--destructive);",fg:"background-color: var(--foreground);",bg:"background-color: var(--background);",su:"background-color: var(--surface);",mu:"background-color: var(--muted);",ac:"background-color: var(--accent);",bo:"background-color: var(--border);"},pos:{rel:"relative",abs:"absolute",fix:"fixed"},shadow:{sm:"--shadow-sm",md:"--shadow-md",lg:"--shadow-lg"},bw:R,bwt:R,bwr:R,bwb:R,bwl:R,bc:{pr:"--primary",se:"--secondary",de:"--destructive",fg:"--foreground",bg:"--background",su:"--surface",mu:"--muted",ac:"--accent",bo:"--border",tr:"transparent"},br:{xs:"--border-radius-xs",sm:"--border-radius-sm",md:"--border-radius-md",lg:"--border-radius-lg",xl:"--border-radius-xl",f:"--border-radius-f"}},Dt=i=>v($e,{},i);var ze={mt:u,mr:u,mb:u,ml:u,m:u,mh:u,mv:u},Vt=i=>v(ze,{},i);var lt=class i extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(d`
         :host {
           display: contents;
         }
@@ -1404,4 +1406,4 @@ var rettangoli=(()=>{var L=`
         slot[name="content"] {
           display: contents;
         }
-      `))}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._contentWrapper=null,this._isOpen=!1}_emitClose(){this.dispatchEvent(new CustomEvent("close",{detail:{},bubbles:!0}))}static get observedAttributes(){return["open","x","y","place","no-overlay","content-w","content-h","content-wh","content-g","content-sv","content-pv","content-bgc","content-style"]}connectedCallback(){this._syncContentWrapper({reposition:!1}),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()):t.startsWith("content-")&&this._syncContentWrapper()}_isIgnorableTextNode(t){return t?.nodeType===Node.TEXT_NODE&&t.textContent?.trim()===""}_ensureContentWrapper(){if(this._contentWrapper?.parentNode===this)return this._contentWrapper;let t=Array.from(this.children).find(e=>e.hasAttribute(ie));return t?this._contentWrapper=t:(this._contentWrapper=document.createElement("rtgl-view"),this._contentWrapper.setAttribute(ie,""),this._contentWrapper.setAttribute("part","content"),this._contentWrapper.setAttribute("bgc","bg"),this._contentWrapper.setAttribute("bw","xs"),this._contentWrapper.setAttribute("bc","bo"),this._contentWrapper.setAttribute("br","md"),this._contentWrapper.setAttribute("ph","sm"),this._contentWrapper.setAttribute("pv","sm"),this._contentWrapper.setAttribute("style",yt)),this._contentWrapper.parentNode!==this&&this.appendChild(this._contentWrapper),this._contentWrapper}_syncContentWrapperAttributes(){let t=this._ensureContentWrapper(),e=[["content-w","w"],["content-h","h"],["content-wh","wh"],["content-g","g"],["content-sv","sv"]];for(let[n,r]of e){let o=this.getAttribute(n);o===null?t.removeAttribute(r):t.setAttribute(r,o)}t.setAttribute("bgc",this.getAttribute("content-bgc")||"bg"),t.setAttribute("ph","sm"),t.setAttribute("pv",this.getAttribute("content-pv")||"sm");let s=this.getAttribute("content-style");t.setAttribute("style",s?`${yt} ${s}`:yt)}_syncContentWrapper({reposition:t=!0}={}){let e=this._ensureContentWrapper(),s=Array.from(this.childNodes).filter(r=>r!==e&&!this._isIgnorableTextNode(r));for(let r of s)r.nodeType===Node.ELEMENT_NODE&&r.getAttribute("slot")==="content"&&r.removeAttribute("slot"),e.appendChild(r);this._syncContentWrapperAttributes(),Array.from(e.childNodes).some(r=>!this._isIgnorableTextNode(r))?e.setAttribute("slot","content"):e.removeAttribute("slot"),t&&this._isOpen&&this._updatePosition()}_show(){this._isOpen||(this._syncContentWrapper({reposition:!1}),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(()=>{this._syncContentWrapper({reposition:!1});let n=this._popoverContainer.getBoundingClientRect(),{left:r,top:o}=this._calculatePosition(t,e,n.width,n.height,s);this._popoverContainer.style.left=`${r}px`,this._popoverContainer.style.top=`${o}px`,requestAnimationFrame(()=>{this.setAttribute("positioned","")})})}_calculatePosition(t,e,s,n,r){let l=t,a=e;switch(r){case"t":l=t-s/2,a=e-n-8;break;case"ts":l=t,a=e-n-8;break;case"te":l=t-s,a=e-n-8;break;case"r":l=t+8,a=e-n/2;break;case"rs":l=t+8,a=e;break;case"re":l=t+8,a=e-n;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-n/2;break;case"ls":l=t-s-8,a=e;break;case"le":l=t-s-8,a=e-n;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-n-h)),{left:l,top:a}}get popover(){return this._popoverContainer}get content(){return this._contentWrapper}},se=({render:i,html:t})=>wt;customElements.define("rtgl-button",zt({}));customElements.define("rtgl-carousel",Mt({}));customElements.define("rtgl-grid",Ot({}));customElements.define("rtgl-view",Rt({}));customElements.define("rtgl-text",Pt({}));customElements.define("rtgl-image",jt({}));customElements.define("rtgl-tag",Ht({}));customElements.define("rtgl-svg",Gt({}));customElements.define("rtgl-input",z({}));customElements.define("rtgl-input-date",Kt({}));customElements.define("rtgl-input-time",Xt({}));customElements.define("rtgl-input-datetime",Yt({}));customElements.define("rtgl-input-number",Qt({}));customElements.define("rtgl-textarea",Jt({}));customElements.define("rtgl-color-picker",Zt({}));customElements.define("rtgl-slider",te({}));customElements.define("rtgl-dialog",ee({}));customElements.define("rtgl-popover",se({}));})();
+      `))}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._contentWrapper=null,this._isOpen=!1}_emitClose(){this.dispatchEvent(new CustomEvent("close",{detail:{},bubbles:!0}))}static get observedAttributes(){return["open","x","y","place","no-overlay","content-w","content-h","content-wh","content-g","content-sv","content-pv","content-bgc","content-style"]}connectedCallback(){this._syncContentWrapper({reposition:!1}),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()):t.startsWith("content-")&&this._syncContentWrapper()}_isIgnorableTextNode(t){return t?.nodeType===Node.TEXT_NODE&&t.textContent?.trim()===""}_ensureContentWrapper(){if(this._contentWrapper?.parentNode===this)return this._contentWrapper;let t=Array.from(this.children).find(e=>e.hasAttribute(ie));return t?this._contentWrapper=t:(this._contentWrapper=document.createElement("rtgl-view"),this._contentWrapper.setAttribute(ie,""),this._contentWrapper.setAttribute("part","content"),this._contentWrapper.setAttribute("bgc","su"),this._contentWrapper.setAttribute("bw","xs"),this._contentWrapper.setAttribute("bc","bo"),this._contentWrapper.setAttribute("br","md"),this._contentWrapper.setAttribute("ph","sm"),this._contentWrapper.setAttribute("pv","sm"),this._contentWrapper.setAttribute("style",yt)),this._contentWrapper.parentNode!==this&&this.appendChild(this._contentWrapper),this._contentWrapper}_syncContentWrapperAttributes(){let t=this._ensureContentWrapper(),e=[["content-w","w"],["content-h","h"],["content-wh","wh"],["content-g","g"],["content-sv","sv"]];for(let[n,r]of e){let o=this.getAttribute(n);o===null?t.removeAttribute(r):t.setAttribute(r,o)}t.setAttribute("bgc",this.getAttribute("content-bgc")||"su"),t.setAttribute("ph","sm"),t.setAttribute("pv",this.getAttribute("content-pv")||"sm");let s=this.getAttribute("content-style");t.setAttribute("style",s?`${yt} ${s}`:yt)}_syncContentWrapper({reposition:t=!0}={}){let e=this._ensureContentWrapper(),s=Array.from(this.childNodes).filter(r=>r!==e&&!this._isIgnorableTextNode(r));for(let r of s)r.nodeType===Node.ELEMENT_NODE&&r.getAttribute("slot")==="content"&&r.removeAttribute("slot"),e.appendChild(r);this._syncContentWrapperAttributes(),Array.from(e.childNodes).some(r=>!this._isIgnorableTextNode(r))?e.setAttribute("slot","content"):e.removeAttribute("slot"),t&&this._isOpen&&this._updatePosition()}_show(){this._isOpen||(this._syncContentWrapper({reposition:!1}),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(()=>{this._syncContentWrapper({reposition:!1});let n=this._popoverContainer.getBoundingClientRect(),{left:r,top:o}=this._calculatePosition(t,e,n.width,n.height,s);this._popoverContainer.style.left=`${r}px`,this._popoverContainer.style.top=`${o}px`,requestAnimationFrame(()=>{this.setAttribute("positioned","")})})}_calculatePosition(t,e,s,n,r){let l=t,a=e;switch(r){case"t":l=t-s/2,a=e-n-8;break;case"ts":l=t,a=e-n-8;break;case"te":l=t-s,a=e-n-8;break;case"r":l=t+8,a=e-n/2;break;case"rs":l=t+8,a=e;break;case"re":l=t+8,a=e-n;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-n/2;break;case"ls":l=t-s-8,a=e;break;case"le":l=t-s-8,a=e-n;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-n-h)),{left:l,top:a}}get popover(){return this._popoverContainer}get content(){return this._contentWrapper}},se=({render:i,html:t})=>wt;customElements.define("rtgl-button",zt({}));customElements.define("rtgl-carousel",Mt({}));customElements.define("rtgl-grid",Ot({}));customElements.define("rtgl-view",Rt({}));customElements.define("rtgl-text",Pt({}));customElements.define("rtgl-image",jt({}));customElements.define("rtgl-tag",Ht({}));customElements.define("rtgl-svg",Gt({}));customElements.define("rtgl-input",z({}));customElements.define("rtgl-input-date",Kt({}));customElements.define("rtgl-input-time",Xt({}));customElements.define("rtgl-input-datetime",Yt({}));customElements.define("rtgl-input-number",Qt({}));customElements.define("rtgl-textarea",Jt({}));customElements.define("rtgl-color-picker",Zt({}));customElements.define("rtgl-slider",te({}));customElements.define("rtgl-dialog",ee({}));customElements.define("rtgl-popover",se({}));})();