rettangoli-ui 0.1.0-rc3 → 0.1.0-rc5
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 +48 -26
- package/dist/rettangoli-iife-ui.min.js +58 -36
- package/package.json +1 -1
- package/src/components/dialog/dialog.view.yaml +12 -11
- package/src/components/dropdownMenu/dropdownMenu.handlers.js +18 -0
- package/src/components/dropdownMenu/dropdownMenu.store.js +25 -0
- package/src/components/dropdownMenu/dropdownMenu.view.yaml +54 -0
- package/src/components/popover/popover.handlers.js +3 -15
- package/src/components/popover/popover.store.js +3 -28
- package/src/components/popover/popover.view.yaml +8 -1
- package/src/components/select/select.handlers.js +35 -4
- package/src/components/select/select.store.js +45 -5
- package/src/components/select/select.view.yaml +20 -8
- package/src/components/sidebar/sidebar.store.js +19 -5
- package/src/components/sidebar/sidebar.view.yaml +5 -1
- package/src/primitives/button.js +50 -7
- package/src/primitives/view.js +2 -0
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
var rettangoli=(()=>{function
|
|
2
|
-
:host([${v}="${
|
|
1
|
+
var rettangoli=(()=>{function h(e,...t){let s="";return e.forEach((r,c)=>{s+=r+(t[c]||"")}),s}var X=["xs","sm","md","lg","xl"],I={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(I),x=e=>e.concat(X.flatMap(t=>e.map(s=>`${t}-${s}`))),V={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)"},p=(e,t={})=>{let s="";for(let[r,c]of Object.entries(V)){r!=="default"&&(s+=`${c} {`);for(let[i,n]of Object.entries(e)){let l=t[i]?` ${t[i]} `:" ";for(let[a,d]of Object.entries(n)){let u=I[i],f=d.startsWith("--")?`var(${d})`:d,v=r==="default"?i:`${r}-${i}`,T=r==="default"?`h-${i}`:`${r}-h-${i}`;if(u){let D=u.split(" ").map(J=>`${J}: ${f};`).join(" ");s+=`
|
|
2
|
+
:host([${v}="${a}"])${l}{
|
|
3
3
|
${D}
|
|
4
4
|
}
|
|
5
|
-
:host([${T}="${
|
|
5
|
+
:host([${T}="${a}"]:hover)${l}{
|
|
6
6
|
${D}
|
|
7
7
|
}
|
|
8
8
|
`}else s+=`
|
|
9
|
-
:host([${v}="${
|
|
10
|
-
${
|
|
9
|
+
:host([${v}="${a}"])${l}{
|
|
10
|
+
${d}
|
|
11
11
|
}
|
|
12
|
-
:host([${T}="${
|
|
13
|
-
${
|
|
12
|
+
:host([${T}="${a}"]:hover)${l}{
|
|
13
|
+
${d}
|
|
14
14
|
}
|
|
15
|
-
`}}r!=="default"&&(s+="}")}return s};function Y(e){if(e===null||e.includes("/"))return!1;let t=String(e);return/[0-9]$/.test(t)}var Z=e=>/%$/.test(e),g=e=>{if(e!==void 0)return Z(e)?e:Y(e)?`${e}px`:Object.keys(o).includes(e)?`var(${o[e]})`:e},o={xs:"--spacing-xs",sm:"--spacing-sm",md:"--spacing-md",lg:"--spacing-lg",xl:"--spacing-xl"};function w(e,t=":host"){let s="";for(let[r,
|
|
16
|
-
`);let i="";for(let[n,
|
|
15
|
+
`}}r!=="default"&&(s+="}")}return s};function Y(e){if(e===null||e.includes("/"))return!1;let t=String(e);return/[0-9]$/.test(t)}var Z=e=>/%$/.test(e),g=e=>{if(e!==void 0)return Z(e)?e:Y(e)?`${e}px`:Object.keys(o).includes(e)?`var(${o[e]})`:e},o={xs:"--spacing-xs",sm:"--spacing-sm",md:"--spacing-md",lg:"--spacing-lg",xl:"--spacing-xl"};function w(e,t=":host"){let s="";for(let[r,c]of Object.entries(V)){r!=="default"&&(s+=`${c} {
|
|
16
|
+
`);let i="";for(let[n,l]of Object.entries(e[r]))l!=null&&(i+=`${n}: ${l};
|
|
17
17
|
`);s+=`${t} {
|
|
18
18
|
${i.trim()}
|
|
19
19
|
}
|
|
20
20
|
`,r!=="default"&&(s+=`}
|
|
21
|
-
`)}return s}var S=
|
|
21
|
+
`)}return s}var S=h`
|
|
22
22
|
:host([flex="0"]) {
|
|
23
23
|
flex: 0;
|
|
24
24
|
}
|
|
@@ -104,7 +104,7 @@ var rettangoli=(()=>{function l(e,...t){let s="";return e.forEach((r,d)=>{s+=r+(
|
|
|
104
104
|
`,lk:`
|
|
105
105
|
background-color: transparent;
|
|
106
106
|
color: var(--foreground);
|
|
107
|
-
`}},et={mt:"button",mr:"button",mb:"button",ml:"button",m:"button",mh:"button",mv:"button",s:"button",v:"button"},L=p(tt,et);var _=
|
|
107
|
+
`}},et={mt:"button",mr:"button",mb:"button",ml:"button",m:"button",mh:"button",mv:"button",s:"button",v:"button"},L=p(tt,et);var _=h`
|
|
108
108
|
a, a:link, a:visited, a:hover, a:active {
|
|
109
109
|
color: inherit;
|
|
110
110
|
text-decoration: none;
|
|
@@ -114,7 +114,7 @@ var rettangoli=(()=>{function l(e,...t){let s="";return e.forEach((r,d)=>{s+=r+(
|
|
|
114
114
|
margin: 0;
|
|
115
115
|
font: inherit;
|
|
116
116
|
}
|
|
117
|
-
`;var $=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(
|
|
117
|
+
`;var $=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(h`
|
|
118
118
|
:host {
|
|
119
119
|
display: contents;
|
|
120
120
|
}
|
|
@@ -127,7 +127,7 @@ var rettangoli=(()=>{function l(e,...t){let s="";return e.forEach((r,d)=>{s+=r+(
|
|
|
127
127
|
flex-direction: row;
|
|
128
128
|
align-items: center;
|
|
129
129
|
justify-content: center;
|
|
130
|
-
gap: var(--spacing-
|
|
130
|
+
gap: var(--spacing-lg);
|
|
131
131
|
border-width: 0px;
|
|
132
132
|
border-style: solid;
|
|
133
133
|
border-color: var(--border);
|
|
@@ -228,6 +228,28 @@ var rettangoli=(()=>{function l(e,...t){let s="";return e.forEach((r,d)=>{s+=r+(
|
|
|
228
228
|
text-decoration: underline;
|
|
229
229
|
}
|
|
230
230
|
|
|
231
|
+
/* Square button styles */
|
|
232
|
+
:host([sq]) button {
|
|
233
|
+
width: 32px;
|
|
234
|
+
height: 32px;
|
|
235
|
+
padding: 0;
|
|
236
|
+
gap: 0;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
:host([sq][s="sm"]) button {
|
|
240
|
+
width: 24px;
|
|
241
|
+
height: 24px;
|
|
242
|
+
padding: 0;
|
|
243
|
+
gap: 0;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
:host([sq][s="lg"]) button {
|
|
247
|
+
width: 40px;
|
|
248
|
+
height: 40px;
|
|
249
|
+
padding: 0;
|
|
250
|
+
gap: 0;
|
|
251
|
+
}
|
|
252
|
+
|
|
231
253
|
${_}
|
|
232
254
|
|
|
233
255
|
a {
|
|
@@ -236,7 +258,7 @@ var rettangoli=(()=>{function l(e,...t){let s="";return e.forEach((r,d)=>{s+=r+(
|
|
|
236
258
|
|
|
237
259
|
${L}
|
|
238
260
|
${S}
|
|
239
|
-
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._containerElement=null,this._buttonElement=document.createElement("button"),this._slotElement=document.createElement("slot"),this._iconElement=null,this._buttonElement.appendChild(this._slotElement)}static get observedAttributes(){return["key","href","target","w","t","icon","disabled","v","s"]}connectedCallback(){this._updateButton()}attributeChangedCallback(t,s,r){this._updateButton()}_updateButton(){this.shadow.innerHTML="",this._updateIcon(),this._updateWidth(),this.hasAttribute("disabled")?this._buttonElement.setAttribute("disabled",""):this._buttonElement.removeAttribute("disabled");let s=this.getAttribute("href");if(s){let r=document.createElement("a");r.setAttribute("href",s);let
|
|
261
|
+
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._containerElement=null,this._buttonElement=document.createElement("button"),this._slotElement=document.createElement("slot"),this._iconElement=null,this._buttonElement.appendChild(this._slotElement)}static get observedAttributes(){return["key","href","target","w","t","icon","disabled","v","s","sq","ip"]}connectedCallback(){this._updateButton()}attributeChangedCallback(t,s,r){this._updateButton()}_updateButton(){this.shadow.innerHTML="",this._updateIcon(),this.hasAttribute("sq")||this._updateWidth(),this.hasAttribute("disabled")?this._buttonElement.setAttribute("disabled",""):this._buttonElement.removeAttribute("disabled");let s=this.getAttribute("href");if(s){let r=document.createElement("a");r.setAttribute("href",s);let c=this.getAttribute("target");c&&r.setAttribute("target",c),r.appendChild(this._buttonElement),this.shadow.appendChild(r),this._containerElement=r}else this.shadow.appendChild(this._buttonElement),this._containerElement=this._buttonElement}_updateIcon(){this._iconElement&&(this._iconElement.remove(),this._iconElement=null);let t=this.getAttribute("icon");if(t){let s={pr:"pr-fg",se:"ac-fg",de:"pr-fg",ol:"ac-fg",gh:"ac-fg",lk:"ac-fg"},r={sm:14,md:18,lg:22},c=s[this.getAttribute("v")]||"pr-fg",i=18;if(this.hasAttribute("sq")){let l={sm:14,lg:22},a=this.getAttribute("s");i=l[a]||18}else i=r[this.getAttribute("t")]||18;this._iconElement=document.createElement("rtgl-svg"),this._iconElement.setAttribute("svg",t),this._iconElement.setAttribute("c",c),this._iconElement.setAttribute("wh",i.toString()),this.getAttribute("ip")==="s"?this._buttonElement.insertBefore(this._iconElement,this._slotElement):this._buttonElement.appendChild(this._iconElement)}}_updateWidth(){let t=g(this.getAttribute("w"));t==="f"?this._buttonElement.style.width="var(--width-stretch)":t!=null?(this._buttonElement.style.width=t,this._buttonElement.style.minWidth=t,this._buttonElement.style.maxWidth=t):(this._buttonElement.style.width="",this._buttonElement.style.minWidth="",this._buttonElement.style.maxWidth="")}},B=({render:e,html:t})=>$;var H=h`
|
|
240
262
|
|
|
241
263
|
:host([d="h"]) {
|
|
242
264
|
flex-direction: row;
|
|
@@ -307,7 +329,7 @@ var rettangoli=(()=>{function l(e,...t){let s="";return e.forEach((r,d)=>{s+=r+(
|
|
|
307
329
|
justify-content: center;
|
|
308
330
|
}
|
|
309
331
|
}
|
|
310
|
-
`;var it={cur:{p:"pointer",m:"move",grab:"grab",grabbing:"grabbing"}},m=p(it);var U=
|
|
332
|
+
`;var it={cur:{p:"pointer",m:"move",grab:"grab",grabbing:"grabbing"}},m=p(it);var U=h`
|
|
311
333
|
:host([sh]:not([sv])) {
|
|
312
334
|
overflow-x: scroll;
|
|
313
335
|
flex-wrap: nowrap;
|
|
@@ -365,7 +387,7 @@ var rettangoli=(()=>{function l(e,...t){let s="";return e.forEach((r,d)=>{s+=r+(
|
|
|
365
387
|
left: 0;
|
|
366
388
|
top: 0;
|
|
367
389
|
height: 100%;
|
|
368
|
-
`},shadow:{sm:"--shadow-sm",md:"--shadow-md",lg:"--shadow-lg"},pt:o,pr:o,pb:o,pl:o,p:o,ph:o,pv:o,g:o,gv:o,gh:o,bw:E,bwt:E,bwr:E,bwb:E,bwl:E,bc:{p:"--color-primary",pc:"--color-primary-container",s:"--color-secondary",sc:"--color-secondary-container",e:"--color-error",ec:"--color-error-container",su:"--color-surface",sucl:"--color-surface-container-low",suc:"--color-surface-container",such:"--color-surface-container-high",isu:"--color-inverse-surface",o:"--color-outline",ov:"--color-outline-variant"},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"}},k=p(st);var rt={mt:o,mr:o,mb:o,ml:o,m:o,mh:o,mv:o},b=p(rt);var C=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(
|
|
390
|
+
`},shadow:{sm:"--shadow-sm",md:"--shadow-md",lg:"--shadow-lg"},pt:o,pr:o,pb:o,pl:o,p:o,ph:o,pv:o,g:o,gv:o,gh:o,bw:E,bwt:E,bwr:E,bwb:E,bwl:E,bc:{p:"--color-primary",pc:"--color-primary-container",s:"--color-secondary",sc:"--color-secondary-container",e:"--color-error",ec:"--color-error-container",su:"--color-surface",sucl:"--color-surface-container-low",suc:"--color-surface-container",such:"--color-surface-container-high",isu:"--color-inverse-surface",o:"--color-outline",ov:"--color-outline-variant"},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"}},k=p(st);var rt={mt:o,mr:o,mb:o,ml:o,m:o,mh:o,mv:o},b=p(rt);var C=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(h`
|
|
369
391
|
slot {
|
|
370
392
|
display: contents;
|
|
371
393
|
}
|
|
@@ -405,7 +427,7 @@ var rettangoli=(()=>{function l(e,...t){let s="";return e.forEach((r,d)=>{s+=r+(
|
|
|
405
427
|
bottom: 0;
|
|
406
428
|
z-index: 1;
|
|
407
429
|
}
|
|
408
|
-
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),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","target",...x([...y,"wh","w","h","hidden","sh","sv"])]}_styles={default:{},sm:{},md:{},lg:{},xl:{}};_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),s=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,s?this._linkElement.target=s:this._linkElement.removeAttribute("target")):this._linkElement&&(this.shadow.removeChild(this._linkElement),this._linkElement=null)}attributeChangedCallback(t,s,r){if(t==="href"||t==="target"){this._updateDOM();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(i=>{let n=v=>`${i==="default"?"":`${i}-`}${v}`,
|
|
430
|
+
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),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","target","op",...x([...y,"wh","w","h","hidden","sh","sv"])]}_styles={default:{},sm:{},md:{},lg:{},xl:{}};_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),s=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,s?this._linkElement.target=s:this._linkElement.removeAttribute("target")):this._linkElement&&(this.shadow.removeChild(this._linkElement),this._linkElement=null)}attributeChangedCallback(t,s,r){if(t==="href"||t==="target"){this._updateDOM();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(i=>{let n=v=>`${i==="default"?"":`${i}-`}${v}`,l=this.getAttribute(n("wh")),a=g(l===null?this.getAttribute(n("w")):l),d=g(l===null?this.getAttribute(n("h")):l),u=this.getAttribute(n("op")),f=this.getAttribute(n("z"));f!==null&&(this._styles[i]["z-index"]=f),u!==null&&(this._styles[i].opacity=u),a==="f"?this._styles[i].width="var(--width-stretch)":a!==void 0&&(this._styles[i].width=a,this._styles[i]["min-width"]=a,this._styles[i]["max-width"]=a),d==="f"?this._styles[i].height="100%":d!==void 0&&(this._styles[i].height=d,this._styles[i]["min-height"]=d,this._styles[i]["max-height"]=d),this.hasAttribute(n("hidden"))&&(this._styles[i].display="none !important"),this.hasAttribute(n("visible"))&&(this._styles[i].display="flex !important")});let c=w(this._styles);c!==this._lastStyleString&&(this._styleElement.textContent=c,this._lastStyleString=c)}},q=({render:e,html:t})=>C;var ot={ta:{s:"start",c:"center",e:"end",j:"justify"},s:{h1:`
|
|
409
431
|
font-size: var(--h1-font-size);
|
|
410
432
|
font-weight: var(--h1-font-weight);
|
|
411
433
|
line-height: var(--h1-line-height);
|
|
@@ -445,7 +467,7 @@ var rettangoli=(()=>{function l(e,...t){let s="";return e.forEach((r,d)=>{s+=r+(
|
|
|
445
467
|
font-weight: var(--xs-font-weight);
|
|
446
468
|
line-height: var(--xs-line-height);
|
|
447
469
|
letter-spacing: var(--xs-letter-spacing);
|
|
448
|
-
`}},
|
|
470
|
+
`}},N=p(ot);var nt={c:{fg:"--foreground",de:"--destructive","pr-fg":"--primary-foreground","se-fg":"--secondary-foreground","mu-fg":"--muted-foreground","ac-fg":"--accent-foreground"}},A=p(nt);var z=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(h`
|
|
449
471
|
:host {
|
|
450
472
|
display: block;
|
|
451
473
|
font-size: var(--md-font-size);
|
|
@@ -476,11 +498,11 @@ var rettangoli=(()=>{function l(e,...t){let s="";return e.forEach((r,d)=>{s+=r+(
|
|
|
476
498
|
bottom: 0;
|
|
477
499
|
z-index: 1;
|
|
478
500
|
}
|
|
479
|
-
${
|
|
501
|
+
${N}
|
|
480
502
|
${A}
|
|
481
503
|
${b}
|
|
482
504
|
${m}
|
|
483
|
-
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._slotElement=document.createElement("slot"),this._linkElement=null,this._updateDOM()}static get observedAttributes(){return["key","w","ellipsis","href","target"]}connectedCallback(){this._updateStyling(),this._updateDOM()}attributeChangedCallback(t,s,r){t==="href"||t==="target"?this._updateDOM():this._updateStyling()}_updateStyling(){let t=g(this.getAttribute("w"));this.hasAttribute("ellipsis")?(this.style.overflow="hidden",this.style.textOverflow="ellipsis",this.style.whiteSpace="nowrap"):(this.style.overflow="",this.style.textOverflow="",this.style.whiteSpace=""),t==="f"?this.style.width="var(--width-stretch)":t!==void 0?this.style.width=t:this.style.width=""}_updateDOM(){let t=this.getAttribute("href"),s=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,s?this._linkElement.target=s:this._linkElement.removeAttribute("target")):this._linkElement&&(this.shadow.removeChild(this._linkElement),this._linkElement=null)}},
|
|
505
|
+
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._slotElement=document.createElement("slot"),this._linkElement=null,this._updateDOM()}static get observedAttributes(){return["key","w","ellipsis","href","target"]}connectedCallback(){this._updateStyling(),this._updateDOM()}attributeChangedCallback(t,s,r){t==="href"||t==="target"?this._updateDOM():this._updateStyling()}_updateStyling(){let t=g(this.getAttribute("w"));this.hasAttribute("ellipsis")?(this.style.overflow="hidden",this.style.textOverflow="ellipsis",this.style.whiteSpace="nowrap"):(this.style.overflow="",this.style.textOverflow="",this.style.whiteSpace=""),t==="f"?this.style.width="var(--width-stretch)":t!==void 0?this.style.width=t:this.style.width=""}_updateDOM(){let t=this.getAttribute("href"),s=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,s?this._linkElement.target=s:this._linkElement.removeAttribute("target")):this._linkElement&&(this.shadow.removeChild(this._linkElement),this._linkElement=null)}},P=({render:e,html:t})=>z;var M=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(h`
|
|
484
506
|
:host {
|
|
485
507
|
border-style: solid;
|
|
486
508
|
box-sizing: border-box;
|
|
@@ -519,7 +541,7 @@ var rettangoli=(()=>{function l(e,...t){let s="";return e.forEach((r,d)=>{s+=r+(
|
|
|
519
541
|
${k}
|
|
520
542
|
${b}
|
|
521
543
|
${m}
|
|
522
|
-
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._styleElement=document.createElement("style"),this._imgElement=document.createElement("img"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return x([...y,"key","src","href","target","wh","w","h","hidden","height","width"])}_styles={default:{},sm:{},md:{},lg:{},xl:{}};_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),s=this.getAttribute("target");t?(this._linkElement||(this._linkElement=document.createElement("a")),this._linkElement.href=t,s?this._linkElement.target=s:this._linkElement.removeAttribute("target"),this._linkElement.appendChild(this._imgElement),this._linkElement.parentNode!==this.shadow&&this.shadow.appendChild(this._linkElement)):this._linkElement?(this._imgElement.parentNode===this._linkElement&&this.shadow.appendChild(this._imgElement),this._linkElement.parentNode===this.shadow&&this.shadow.removeChild(this._linkElement),this._linkElement=null):this._imgElement.parentNode!==this.shadow&&this.shadow.appendChild(this._imgElement)}attributeChangedCallback(t,s,r){if(t==="href"||t==="target"){this._updateDOM();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(i=>{let n=v=>`${i==="default"?"":`${i}-`}${v}`,
|
|
544
|
+
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._styleElement=document.createElement("style"),this._imgElement=document.createElement("img"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return x([...y,"key","src","href","target","wh","w","h","hidden","height","width"])}_styles={default:{},sm:{},md:{},lg:{},xl:{}};_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),s=this.getAttribute("target");t?(this._linkElement||(this._linkElement=document.createElement("a")),this._linkElement.href=t,s?this._linkElement.target=s:this._linkElement.removeAttribute("target"),this._linkElement.appendChild(this._imgElement),this._linkElement.parentNode!==this.shadow&&this.shadow.appendChild(this._linkElement)):this._linkElement?(this._imgElement.parentNode===this._linkElement&&this.shadow.appendChild(this._imgElement),this._linkElement.parentNode===this.shadow&&this.shadow.removeChild(this._linkElement),this._linkElement=null):this._imgElement.parentNode!==this.shadow&&this.shadow.appendChild(this._imgElement)}attributeChangedCallback(t,s,r){if(t==="href"||t==="target"){this._updateDOM();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(i=>{let n=v=>`${i==="default"?"":`${i}-`}${v}`,l=this.getAttribute(n("wh")),a=g(l===null?this.getAttribute(n("w")):l),d=g(l===null?this.getAttribute(n("h")):l),u=this.getAttribute(n("o")),f=this.getAttribute(n("z"));f!==null&&(this._styles[i]["z-index"]=f),u!==null&&(this._styles[i].opacity=u),a==="f"?this._styles[i].width="var(--width-stretch)":a!==void 0&&(this._styles[i].width=a,this._styles[i]["min-width"]=a,this._styles[i]["max-width"]=a),d==="f"?this._styles[i].height="100%":d!==void 0&&(this._styles[i].height=d,this._styles[i]["min-height"]=d,this._styles[i]["max-height"]=d),this.hasAttribute(n("hidden"))&&(this._styles[i].display="none !important"),this.hasAttribute(n("visible"))&&(this._styles[i].display="block !important")});let c=w(this._styles);c!==this._lastStyleString&&(this._styleElement.textContent=c,this._lastStyleString=c),this._updateImageAttributes()}_updateImageAttributes(){let t=this.getAttribute("src"),s=this.getAttribute("width"),r=this.getAttribute("height");t!==null&&this._imgElement.setAttribute("src",t),s!==null&&this._imgElement.setAttribute("width",s),r!==null&&this._imgElement.setAttribute("height",r)}connectedCallback(){this._updateImageAttributes()}},K=({render:e,html:t})=>M;var Q=h`
|
|
523
545
|
:host([pt="xs"]) svg {
|
|
524
546
|
padding-top: var(--spacing-xs);
|
|
525
547
|
}
|
|
@@ -635,15 +657,15 @@ var rettangoli=(()=>{function l(e,...t){let s="";return e.forEach((r,d)=>{s+=r+(
|
|
|
635
657
|
padding-top: var(--spacing-xl);
|
|
636
658
|
padding-bottom: var(--spacing-xl);
|
|
637
659
|
}
|
|
638
|
-
`;var j=class e extends HTMLElement{static styleSheet=null;static _icons={};static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(
|
|
660
|
+
`;var j=class e extends HTMLElement{static styleSheet=null;static _icons={};static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(h`
|
|
639
661
|
:host {
|
|
640
662
|
color: var(--foreground);
|
|
641
663
|
}
|
|
642
664
|
${A}
|
|
643
|
-
${
|
|
665
|
+
${Q}
|
|
644
666
|
${S}
|
|
645
667
|
${m}
|
|
646
|
-
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet]}static get observedAttributes(){return["key","svg","w","h","wh"]}static get icons(){return e._icons}static addIcon(t,s){e._icons[t]=s}connectedCallback(){this._updateSizing(),this._render()}attributeChangedCallback(t,s,r){this._updateSizing(),this._render()}_updateSizing(){let t=this.getAttribute("wh"),s=g(t===null?this.getAttribute("w"):t),r=g(t===null?this.getAttribute("h"):t);s&&(this.style.width=s),r&&(this.style.height=r)}_render(){try{let t=this.getAttribute("svg"),s=e._icons[t]||(window.rtglIcons||{})[t];if(s){this.shadow.innerHTML=s;return}}catch(t){console.log("error in rtgl-svg render",t)}this.shadow.innerHTML=""}},
|
|
668
|
+
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet]}static get observedAttributes(){return["key","svg","w","h","wh"]}static get icons(){return e._icons}static addIcon(t,s){e._icons[t]=s}connectedCallback(){this._updateSizing(),this._render()}attributeChangedCallback(t,s,r){this._updateSizing(),this._render()}_updateSizing(){let t=this.getAttribute("wh"),s=g(t===null?this.getAttribute("w"):t),r=g(t===null?this.getAttribute("h"):t);s&&(this.style.width=s),r&&(this.style.height=r)}_render(){try{let t=this.getAttribute("svg"),s=e._icons[t]||(window.rtglIcons||{})[t];if(s){this.shadow.innerHTML=s;return}}catch(t){console.log("error in rtgl-svg render",t)}this.shadow.innerHTML=""}},R=({render:e,html:t})=>j;var O=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(h`
|
|
647
669
|
:host {
|
|
648
670
|
display: contents;
|
|
649
671
|
}
|
|
@@ -669,7 +691,7 @@ var rettangoli=(()=>{function l(e,...t){let s="";return e.forEach((r,d)=>{s+=r+(
|
|
|
669
691
|
}
|
|
670
692
|
${b}
|
|
671
693
|
${m}
|
|
672
|
-
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.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("keydown",this._onChange)}static get observedAttributes(){return["key","type","placeholder","disabled",...x([...y,"wh","w","h","hidden","visible","op","z"])]}get value(){return this._inputElement.value}_onChange=t=>{this.dispatchEvent(new CustomEvent("input-keydown",{detail:{value:this._inputElement.value}}))};attributeChangedCallback(t,s,r){if(["type","placeholder","disabled"].includes(t)){this._updateInputAttributes();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(i=>{let n=v=>`${i==="default"?"":`${i}-`}${v}`,
|
|
694
|
+
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.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("keydown",this._onChange)}static get observedAttributes(){return["key","type","placeholder","disabled",...x([...y,"wh","w","h","hidden","visible","op","z"])]}get value(){return this._inputElement.value}_onChange=t=>{this.dispatchEvent(new CustomEvent("input-keydown",{detail:{value:this._inputElement.value}}))};attributeChangedCallback(t,s,r){if(["type","placeholder","disabled"].includes(t)){this._updateInputAttributes();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(i=>{let n=v=>`${i==="default"?"":`${i}-`}${v}`,l=this.getAttribute(n("wh")),a=g(l===null?this.getAttribute(n("w")):l),d=g(l===null?this.getAttribute(n("h")):l),u=this.getAttribute(n("op")),f=this.getAttribute(n("z"));f!==null&&(this._styles[i]["z-index"]=f),u!==null&&(this._styles[i].opacity=u),a==="f"?this._styles[i].width="var(--width-stretch)":a!==void 0&&(this._styles[i].width=a,this._styles[i]["min-width"]=a,this._styles[i]["max-width"]=a),d==="f"?this._styles[i].height="100%":d!==void 0&&(this._styles[i].height=d,this._styles[i]["min-height"]=d,this._styles[i]["max-height"]=d),this.hasAttribute(n("hidden"))&&(this._styles[i].display="none !important"),this.hasAttribute(n("visible"))&&(this._styles[i].display="block !important")});let c=w(this._styles,"input");c!==this._lastStyleString&&(this._styleElement.textContent=c,this._lastStyleString=c)}_updateInputAttributes(){let t=this.getAttribute("type")||"text",s=this.getAttribute("placeholder"),r=this.hasAttribute("disabled");this._inputElement.setAttribute("type",t),s!==null?this._inputElement.setAttribute("placeholder",s):this._inputElement.removeAttribute("placeholder"),r?this._inputElement.setAttribute("disabled",""):this._inputElement.removeAttribute("disabled")}connectedCallback(){this._updateInputAttributes()}},G=({render:e,html:t})=>O;var W=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(h`
|
|
673
695
|
:host {
|
|
674
696
|
display: contents;
|
|
675
697
|
}
|
|
@@ -694,4 +716,4 @@ var rettangoli=(()=>{function l(e,...t){let s="";return e.forEach((r,d)=>{s+=r+(
|
|
|
694
716
|
}
|
|
695
717
|
${b}
|
|
696
718
|
${m}
|
|
697
|
-
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._textareaElement=document.createElement("textarea"),this._textareaElement.setAttribute("type","text"),this.shadow.appendChild(this._textareaElement)}static get observedAttributes(){return["key","w","ellipsis","cols","rows","placeholder"]}get value(){return this._textareaElement.value}set value(t){this._textareaElement.value=t}connectedCallback(){this._updateTextareaAttributes()}attributeChangedCallback(t,s,r){this._updateTextareaAttributes()}_updateTextareaAttributes(){let t=this.getAttribute("cols"),s=this.getAttribute("rows"),r=this.getAttribute("placeholder");t!==null?this._textareaElement.setAttribute("cols",t):this._textareaElement.removeAttribute("cols"),s!==null?this._textareaElement.setAttribute("rows",s):this._textareaElement.removeAttribute("rows"),r!==null?this._textareaElement.setAttribute("placeholder",r):this._textareaElement.removeAttribute("placeholder")}},F=({render:e,html:t})=>W;customElements.define("rtgl-button",B({}));customElements.define("rtgl-view",
|
|
719
|
+
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._textareaElement=document.createElement("textarea"),this._textareaElement.setAttribute("type","text"),this.shadow.appendChild(this._textareaElement)}static get observedAttributes(){return["key","w","ellipsis","cols","rows","placeholder"]}get value(){return this._textareaElement.value}set value(t){this._textareaElement.value=t}connectedCallback(){this._updateTextareaAttributes()}attributeChangedCallback(t,s,r){this._updateTextareaAttributes()}_updateTextareaAttributes(){let t=this.getAttribute("cols"),s=this.getAttribute("rows"),r=this.getAttribute("placeholder");t!==null?this._textareaElement.setAttribute("cols",t):this._textareaElement.removeAttribute("cols"),s!==null?this._textareaElement.setAttribute("rows",s):this._textareaElement.removeAttribute("rows"),r!==null?this._textareaElement.setAttribute("placeholder",r):this._textareaElement.removeAttribute("placeholder")}},F=({render:e,html:t})=>W;customElements.define("rtgl-button",B({}));customElements.define("rtgl-view",q({}));customElements.define("rtgl-text",P({}));customElements.define("rtgl-image",K({}));customElements.define("rtgl-svg",R({}));customElements.define("rtgl-input",G({}));customElements.define("rtgl-textarea",F({}));})();
|