@rettangoli/ui 1.0.18 → 1.0.19

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

@@ -688,7 +688,7 @@ var rettangoli=(()=>{var B=`
         ${q}
         ${T}
         ${B}
-      `))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),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","new-tab","rel",...y([...k,"op","wh","w","h","ar","bgi","bgs","bgp","bgr","hsb","hide","show","sh","sv","z","d","ah","av","wrap","no-wrap","overflow"])]}_styles=f();_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),e=this.hasAttribute("new-tab"),s=this.getAttribute("rel");this._linkElement=L({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:e,rel:s})}connectedCallback(){this.updateStyles()}updateStyles(){this._styles=f(),S.forEach(e=>{let s=St=>`${e==="default"?"":`${e}-`}${St}`,r=this.getAttribute(s("wh")),n=c(r===null?this.getAttribute(s("w")):r),o=c(r===null?this.getAttribute(s("h")):r),l=this.getAttribute(s("op")),a=this.getAttribute(s("z")),h=W(this.getAttribute(s("ar"))),p=G(this.getAttribute(s("bgi"))),_=G(this.getAttribute(s("bgs"))),x=G(this.getAttribute(s("bgp"))),C=G(this.getAttribute(s("bgr")));a!==null&&(this._styles[e]["z-index"]=a),l!==null&&(this._styles[e].opacity=l),h!==void 0&&(this._styles[e]["aspect-ratio"]=h),p!==null&&(this._styles[e]["background-image"]=p),_!==null&&(this._styles[e]["background-size"]=_),x!==null&&(this._styles[e]["background-position"]=x),C!==null&&(this._styles[e]["background-repeat"]=C),b({styleBucket:this._styles[e],axis:"width",dimension:n,fillValue:"var(--width-stretch)",allowFlexGrow:!0}),b({styleBucket:this._styles[e],axis:"height",dimension:o,fillValue:"100%",allowFlexGrow:!0}),this.hasAttribute(s("hide"))&&(this._styles[e].display="none"),this.hasAttribute(s("show"))&&(this._styles[e].display="flex");let $=this.getAttribute(s("d")),A=this.getAttribute(s("ah")),E=this.getAttribute(s("av")),I=Q({element:this,size:e,attr:"d"});$==="h"?this._styles[e]["flex-direction"]="row":$==="v"?this._styles[e]["flex-direction"]="column":e==="default"&&!$&&["sm","md","lg","xl"].some(oe=>this.hasAttribute(`${oe}-d`))&&(this._styles[e]["flex-direction"]="column");let D=I==="h",X=I==="v"||!I;D&&(A==="c"?this._styles[e]["justify-content"]="center":A==="e"?this._styles[e]["justify-content"]="flex-end":A==="s"&&(this._styles[e]["justify-content"]="flex-start"),E==="c"?(this._styles[e]["align-items"]="center",this._styles[e]["align-content"]="center"):E==="e"?(this._styles[e]["align-items"]="flex-end",this._styles[e]["align-content"]="flex-end"):E==="s"&&(this._styles[e]["align-items"]="flex-start")),X&&(A!==null||E!==null)&&(A==="c"?this._styles[e]["align-items"]="center":A==="e"?this._styles[e]["align-items"]="flex-end":A==="s"&&(this._styles[e]["align-items"]="flex-start"),E==="c"?this._styles[e]["justify-content"]="center":E==="e"?this._styles[e]["justify-content"]="flex-end":E==="s"&&(this._styles[e]["justify-content"]="flex-start"));let ie=this.hasAttribute(s("wrap")),se=this.hasAttribute(s("no-wrap"));ie&&(this._styles[e]["flex-wrap"]="wrap"),se&&(this._styles[e]["flex-wrap"]="nowrap");let wt=this.hasAttribute(s("sh")),xt=this.hasAttribute(s("sv")),re=this.hasAttribute(s("hsb")),ne=this.getAttribute(s("overflow"));wt&&xt?(this._styles[e].overflow="auto",this._styles[e]["scrollbar-gutter"]="stable",this._styles[e]["flex-wrap"]="nowrap"):wt?(this._styles[e]["overflow-x"]="auto",this._styles[e]["scrollbar-gutter"]="stable",this._styles[e]["flex-wrap"]="nowrap"):xt&&(this._styles[e]["overflow-y"]="auto",this._styles[e]["scrollbar-gutter"]="stable",this._styles[e]["flex-wrap"]="nowrap"),ne==="hidden"&&(this._styles[e].overflow="hidden",this._styles[e]["flex-wrap"]="nowrap"),re&&(this._styles[e]["-ms-overflow-style"]="none",this._styles[e]["scrollbar-gutter"]="auto",this._styles[e]["scrollbar-width"]="none")});let t=w(this._styles);t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}attributeChangedCallback(t,e,s){if(t==="href"||t==="new-tab"||t==="rel"){this._updateDOM();return}e!==s&&this.updateStyles()}},Ft=({render:i,html:t})=>nt;var Ae={ta:{s:"text-align: start;",c:"text-align: center;",e:"text-align: end;",j:"text-align: justify;"},s:{h1:`
+      `))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),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","new-tab","rel",...y([...k,"op","wh","w","h","ar","bgi","bgs","bgp","bgr","hsb","hide","show","sh","sv","z","d","ah","av","wrap","no-wrap","overflow","stretch"])]}_styles=f();_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),e=this.hasAttribute("new-tab"),s=this.getAttribute("rel");this._linkElement=L({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:e,rel:s})}connectedCallback(){this.updateStyles()}updateStyles(){this._styles=f(),S.forEach(e=>{let s=St=>`${e==="default"?"":`${e}-`}${St}`,r=this.getAttribute(s("wh")),n=c(r===null?this.getAttribute(s("w")):r),o=c(r===null?this.getAttribute(s("h")):r),l=this.getAttribute(s("op")),a=this.getAttribute(s("z")),h=W(this.getAttribute(s("ar"))),p=G(this.getAttribute(s("bgi"))),_=G(this.getAttribute(s("bgs"))),x=G(this.getAttribute(s("bgp"))),C=G(this.getAttribute(s("bgr")));a!==null&&(this._styles[e]["z-index"]=a),l!==null&&(this._styles[e].opacity=l),h!==void 0&&(this._styles[e]["aspect-ratio"]=h),p!==null&&(this._styles[e]["background-image"]=p),_!==null&&(this._styles[e]["background-size"]=_),x!==null&&(this._styles[e]["background-position"]=x),C!==null&&(this._styles[e]["background-repeat"]=C),b({styleBucket:this._styles[e],axis:"width",dimension:n,fillValue:"var(--width-stretch)",allowFlexGrow:!0}),b({styleBucket:this._styles[e],axis:"height",dimension:o,fillValue:"100%",allowFlexGrow:!0}),this.hasAttribute(s("hide"))&&(this._styles[e].display="none"),this.hasAttribute(s("show"))&&(this._styles[e].display="flex");let $=this.getAttribute(s("d")),A=this.getAttribute(s("ah")),E=this.getAttribute(s("av")),I=Q({element:this,size:e,attr:"d"});$==="h"?this._styles[e]["flex-direction"]="row":$==="v"?this._styles[e]["flex-direction"]="column":e==="default"&&!$&&["sm","md","lg","xl"].some(oe=>this.hasAttribute(`${oe}-d`))&&(this._styles[e]["flex-direction"]="column");let D=I==="h",X=I==="v"||!I;D&&(A==="c"?this._styles[e]["justify-content"]="center":A==="e"?this._styles[e]["justify-content"]="flex-end":A==="s"&&(this._styles[e]["justify-content"]="flex-start"),E==="c"?(this._styles[e]["align-items"]="center",this._styles[e]["align-content"]="center"):E==="e"?(this._styles[e]["align-items"]="flex-end",this._styles[e]["align-content"]="flex-end"):E==="s"&&(this._styles[e]["align-items"]="flex-start")),X&&(A!==null||E!==null)&&(A==="c"?this._styles[e]["align-items"]="center":A==="e"?this._styles[e]["align-items"]="flex-end":A==="s"&&(this._styles[e]["align-items"]="flex-start"),E==="c"?this._styles[e]["justify-content"]="center":E==="e"?this._styles[e]["justify-content"]="flex-end":E==="s"&&(this._styles[e]["justify-content"]="flex-start"));let ie=this.hasAttribute(s("wrap")),se=this.hasAttribute(s("no-wrap"));ie&&(this._styles[e]["flex-wrap"]="wrap"),se&&(this._styles[e]["flex-wrap"]="nowrap"),this.hasAttribute(s("stretch"))&&(this._styles[e]["align-self"]="stretch");let wt=this.hasAttribute(s("sh")),xt=this.hasAttribute(s("sv")),re=this.hasAttribute(s("hsb")),ne=this.getAttribute(s("overflow"));wt&&xt?(this._styles[e].overflow="auto",this._styles[e]["scrollbar-gutter"]="stable",this._styles[e]["flex-wrap"]="nowrap"):wt?(this._styles[e]["overflow-x"]="auto",this._styles[e]["scrollbar-gutter"]="stable",this._styles[e]["flex-wrap"]="nowrap"):xt&&(this._styles[e]["overflow-y"]="auto",this._styles[e]["scrollbar-gutter"]="stable",this._styles[e]["flex-wrap"]="nowrap"),ne==="hidden"&&(this._styles[e].overflow="hidden",this._styles[e]["flex-wrap"]="nowrap"),re&&(this._styles[e]["-ms-overflow-style"]="none",this._styles[e]["scrollbar-gutter"]="auto",this._styles[e]["scrollbar-width"]="none")});let t=w(this._styles);t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}attributeChangedCallback(t,e,s){if(t==="href"||t==="new-tab"||t==="rel"){this._updateDOM();return}e!==s&&this.updateStyles()}},Ft=({render:i,html:t})=>nt;var Ae={ta:{s:"text-align: start;",c:"text-align: center;",e:"text-align: end;",j:"text-align: justify;"},s:{h1:`
       font-size: var(--h1-font-size);
       font-weight: var(--h1-font-weight);
       line-height: var(--h1-line-height);

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

@@ -688,7 +688,7 @@ var rettangoli=(()=>{var ve=`
         ${nt}
         ${Ie}
         ${ve}
-      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[e.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","new-tab","rel",...q([...oe,"op","wh","w","h","ar","bgi","bgs","bgp","bgr","hsb","hide","show","sh","sv","z","d","ah","av","wrap","no-wrap","overflow"])]}_styles=W();_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),r=this.hasAttribute("new-tab"),i=this.getAttribute("rel");this._linkElement=we({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:r,rel:i})}connectedCallback(){this.updateStyles()}updateStyles(){this._styles=W(),te.forEach(r=>{let i=z=>`${r==="default"?"":`${r}-`}${z}`,s=this.getAttribute(i("wh")),n=C(s===null?this.getAttribute(i("w")):s),a=C(s===null?this.getAttribute(i("h")):s),p=this.getAttribute(i("op")),l=this.getAttribute(i("z")),o=ze(this.getAttribute(i("ar"))),c=at(this.getAttribute(i("bgi"))),d=at(this.getAttribute(i("bgs"))),u=at(this.getAttribute(i("bgp"))),f=at(this.getAttribute(i("bgr")));l!==null&&(this._styles[r]["z-index"]=l),p!==null&&(this._styles[r].opacity=p),o!==void 0&&(this._styles[r]["aspect-ratio"]=o),c!==null&&(this._styles[r]["background-image"]=c),d!==null&&(this._styles[r]["background-size"]=d),u!==null&&(this._styles[r]["background-position"]=u),f!==null&&(this._styles[r]["background-repeat"]=f),M({styleBucket:this._styles[r],axis:"width",dimension:n,fillValue:"var(--width-stretch)",allowFlexGrow:!0}),M({styleBucket:this._styles[r],axis:"height",dimension:a,fillValue:"100%",allowFlexGrow:!0}),this.hasAttribute(i("hide"))&&(this._styles[r].display="none"),this.hasAttribute(i("show"))&&(this._styles[r].display="flex");let h=this.getAttribute(i("d")),m=this.getAttribute(i("ah")),y=this.getAttribute(i("av")),b=Ct({element:this,size:r,attr:"d"});h==="h"?this._styles[r]["flex-direction"]="row":h==="v"?this._styles[r]["flex-direction"]="column":r==="default"&&!h&&["sm","md","lg","xl"].some(D=>this.hasAttribute(`${D}-d`))&&(this._styles[r]["flex-direction"]="column");let g=b==="h",_=b==="v"||!b;g&&(m==="c"?this._styles[r]["justify-content"]="center":m==="e"?this._styles[r]["justify-content"]="flex-end":m==="s"&&(this._styles[r]["justify-content"]="flex-start"),y==="c"?(this._styles[r]["align-items"]="center",this._styles[r]["align-content"]="center"):y==="e"?(this._styles[r]["align-items"]="flex-end",this._styles[r]["align-content"]="flex-end"):y==="s"&&(this._styles[r]["align-items"]="flex-start")),_&&(m!==null||y!==null)&&(m==="c"?this._styles[r]["align-items"]="center":m==="e"?this._styles[r]["align-items"]="flex-end":m==="s"&&(this._styles[r]["align-items"]="flex-start"),y==="c"?this._styles[r]["justify-content"]="center":y==="e"?this._styles[r]["justify-content"]="flex-end":y==="s"&&(this._styles[r]["justify-content"]="flex-start"));let S=this.hasAttribute(i("wrap")),A=this.hasAttribute(i("no-wrap"));S&&(this._styles[r]["flex-wrap"]="wrap"),A&&(this._styles[r]["flex-wrap"]="nowrap");let E=this.hasAttribute(i("sh")),O=this.hasAttribute(i("sv")),T=this.hasAttribute(i("hsb")),V=this.getAttribute(i("overflow"));E&&O?(this._styles[r].overflow="auto",this._styles[r]["scrollbar-gutter"]="stable",this._styles[r]["flex-wrap"]="nowrap"):E?(this._styles[r]["overflow-x"]="auto",this._styles[r]["scrollbar-gutter"]="stable",this._styles[r]["flex-wrap"]="nowrap"):O&&(this._styles[r]["overflow-y"]="auto",this._styles[r]["scrollbar-gutter"]="stable",this._styles[r]["flex-wrap"]="nowrap"),V==="hidden"&&(this._styles[r].overflow="hidden",this._styles[r]["flex-wrap"]="nowrap"),T&&(this._styles[r]["-ms-overflow-style"]="none",this._styles[r]["scrollbar-gutter"]="auto",this._styles[r]["scrollbar-width"]="none")});let t=J(this._styles);t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}attributeChangedCallback(t,r,i){if(t==="href"||t==="new-tab"||t==="rel"){this._updateDOM();return}r!==i&&this.updateStyles()}},Ur=({render:e,html:t})=>jt;var sn={ta:{s:"text-align: start;",c:"text-align: center;",e:"text-align: end;",j:"text-align: justify;"},s:{h1:`
+      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[e.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","new-tab","rel",...q([...oe,"op","wh","w","h","ar","bgi","bgs","bgp","bgr","hsb","hide","show","sh","sv","z","d","ah","av","wrap","no-wrap","overflow","stretch"])]}_styles=W();_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),r=this.hasAttribute("new-tab"),i=this.getAttribute("rel");this._linkElement=we({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:r,rel:i})}connectedCallback(){this.updateStyles()}updateStyles(){this._styles=W(),te.forEach(r=>{let i=z=>`${r==="default"?"":`${r}-`}${z}`,s=this.getAttribute(i("wh")),n=C(s===null?this.getAttribute(i("w")):s),a=C(s===null?this.getAttribute(i("h")):s),p=this.getAttribute(i("op")),l=this.getAttribute(i("z")),o=ze(this.getAttribute(i("ar"))),c=at(this.getAttribute(i("bgi"))),d=at(this.getAttribute(i("bgs"))),u=at(this.getAttribute(i("bgp"))),f=at(this.getAttribute(i("bgr")));l!==null&&(this._styles[r]["z-index"]=l),p!==null&&(this._styles[r].opacity=p),o!==void 0&&(this._styles[r]["aspect-ratio"]=o),c!==null&&(this._styles[r]["background-image"]=c),d!==null&&(this._styles[r]["background-size"]=d),u!==null&&(this._styles[r]["background-position"]=u),f!==null&&(this._styles[r]["background-repeat"]=f),M({styleBucket:this._styles[r],axis:"width",dimension:n,fillValue:"var(--width-stretch)",allowFlexGrow:!0}),M({styleBucket:this._styles[r],axis:"height",dimension:a,fillValue:"100%",allowFlexGrow:!0}),this.hasAttribute(i("hide"))&&(this._styles[r].display="none"),this.hasAttribute(i("show"))&&(this._styles[r].display="flex");let h=this.getAttribute(i("d")),m=this.getAttribute(i("ah")),y=this.getAttribute(i("av")),b=Ct({element:this,size:r,attr:"d"});h==="h"?this._styles[r]["flex-direction"]="row":h==="v"?this._styles[r]["flex-direction"]="column":r==="default"&&!h&&["sm","md","lg","xl"].some(D=>this.hasAttribute(`${D}-d`))&&(this._styles[r]["flex-direction"]="column");let g=b==="h",_=b==="v"||!b;g&&(m==="c"?this._styles[r]["justify-content"]="center":m==="e"?this._styles[r]["justify-content"]="flex-end":m==="s"&&(this._styles[r]["justify-content"]="flex-start"),y==="c"?(this._styles[r]["align-items"]="center",this._styles[r]["align-content"]="center"):y==="e"?(this._styles[r]["align-items"]="flex-end",this._styles[r]["align-content"]="flex-end"):y==="s"&&(this._styles[r]["align-items"]="flex-start")),_&&(m!==null||y!==null)&&(m==="c"?this._styles[r]["align-items"]="center":m==="e"?this._styles[r]["align-items"]="flex-end":m==="s"&&(this._styles[r]["align-items"]="flex-start"),y==="c"?this._styles[r]["justify-content"]="center":y==="e"?this._styles[r]["justify-content"]="flex-end":y==="s"&&(this._styles[r]["justify-content"]="flex-start"));let S=this.hasAttribute(i("wrap")),A=this.hasAttribute(i("no-wrap"));S&&(this._styles[r]["flex-wrap"]="wrap"),A&&(this._styles[r]["flex-wrap"]="nowrap"),this.hasAttribute(i("stretch"))&&(this._styles[r]["align-self"]="stretch");let E=this.hasAttribute(i("sh")),O=this.hasAttribute(i("sv")),T=this.hasAttribute(i("hsb")),V=this.getAttribute(i("overflow"));E&&O?(this._styles[r].overflow="auto",this._styles[r]["scrollbar-gutter"]="stable",this._styles[r]["flex-wrap"]="nowrap"):E?(this._styles[r]["overflow-x"]="auto",this._styles[r]["scrollbar-gutter"]="stable",this._styles[r]["flex-wrap"]="nowrap"):O&&(this._styles[r]["overflow-y"]="auto",this._styles[r]["scrollbar-gutter"]="stable",this._styles[r]["flex-wrap"]="nowrap"),V==="hidden"&&(this._styles[r].overflow="hidden",this._styles[r]["flex-wrap"]="nowrap"),T&&(this._styles[r]["-ms-overflow-style"]="none",this._styles[r]["scrollbar-gutter"]="auto",this._styles[r]["scrollbar-width"]="none")});let t=J(this._styles);t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}attributeChangedCallback(t,r,i){if(t==="href"||t==="new-tab"||t==="rel"){this._updateDOM();return}r!==i&&this.updateStyles()}},Ur=({render:e,html:t})=>jt;var sn={ta:{s:"text-align: start;",c:"text-align: center;",e:"text-align: end;",j:"text-align: justify;"},s:{h1:`
       font-size: var(--h1-font-size);
       font-weight: var(--h1-font-weight);
       line-height: var(--h1-line-height);

package/package.json

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

package/src/primitives/view.js

@@ -104,7 +104,8 @@ class RettangoliViewElement extends HTMLElement {
         "av",
         "wrap",
         "no-wrap",
-        "overflow"
+        "overflow",
+        "stretch"
       ]),
     ];
   }
@@ -300,6 +301,11 @@ class RettangoliViewElement extends HTMLElement {
         this._styles[size]["flex-wrap"] = "nowrap";
       }
 
+      // Handle stretch
+      if (this.hasAttribute(addSizePrefix("stretch"))) {
+        this._styles[size]["align-self"] = "stretch";
+      }
+
       // Handle scroll properties
       const scrollHorizontal = this.hasAttribute(addSizePrefix("sh"));
       const scrollVertical = this.hasAttribute(addSizePrefix("sv"));