@rettangoli/ui 0.1.22 → 0.1.23
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 +178 -47
- package/package.json +1 -1
- package/src/entry-iife-layout.js +6 -0
- package/src/index.js +4 -0
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
var rettangoli=(()=>{function
|
|
2
|
-
:host([${b}="${
|
|
3
|
-
${
|
|
1
|
+
var rettangoli=(()=>{function d(s,...t){let i="";return s.forEach((n,o)=>{i+=n+(t[o]||"")}),i}var pt=["xs","sm","md","lg","xl"],U={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"},v=Object.keys(U),y=s=>s.concat(pt.flatMap(t=>s.map(i=>`${t}-${i}`))),K={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)"},w=(s,t={})=>{let i="";for(let[n,o]of Object.entries(K)){n!=="default"&&(i+=`${o} {`);for(let[e,l]of Object.entries(s)){let a=t[e]?` ${t[e]} `:" ";for(let[r,h]of Object.entries(l)){let p=U[e],m=h.startsWith("--")?`var(${h})`:h,b=n==="default"?e:`${n}-${e}`,A=n==="default"?`h-${e}`:`${n}-h-${e}`;if(p){let O=p.split(" ").map(k=>`${k}: ${m};`).join(" ");i+=`
|
|
2
|
+
:host([${b}="${r}"])${a}{
|
|
3
|
+
${O}
|
|
4
4
|
}
|
|
5
|
-
:host([${A}="${
|
|
6
|
-
${
|
|
5
|
+
:host([${A}="${r}"]:hover)${a}{
|
|
6
|
+
${O}
|
|
7
7
|
}
|
|
8
|
-
`}else
|
|
9
|
-
:host([${b}="${
|
|
10
|
-
${
|
|
8
|
+
`}else i+=`
|
|
9
|
+
:host([${b}="${r}"])${a}{
|
|
10
|
+
${h}
|
|
11
11
|
}
|
|
12
|
-
:host([${A}="${
|
|
13
|
-
${
|
|
12
|
+
:host([${A}="${r}"]:hover)${a}{
|
|
13
|
+
${h}
|
|
14
14
|
}
|
|
15
|
-
`}}n!=="default"&&(
|
|
16
|
-
`);let l="";for(let[
|
|
17
|
-
`);
|
|
15
|
+
`}}n!=="default"&&(i+="}")}return i};function ut(s){if(s===null||s.includes("/"))return!1;let t=String(s);return/[0-9]$/.test(t)}var mt=s=>/%$/.test(s),u=s=>{if(s!==void 0)return mt(s)?s:ut(s)?`${s}px`:Object.keys(c).includes(s)?`var(${c[s]})`:s},c={xs:"--spacing-xs",sm:"--spacing-sm",md:"--spacing-md",lg:"--spacing-lg",xl:"--spacing-xl"};function _(s,t=":host"){let i="",n=["default","xl","lg","md","sm"];for(let o of n){let e=K[o];if(!s[o]||Object.keys(s[o]).length===0)continue;o!=="default"&&(i+=`${e} {
|
|
16
|
+
`);let l="";for(let[a,r]of Object.entries(s[o]))r!=null&&(l+=`${a}: ${r} !important;
|
|
17
|
+
`);i+=`${t} {
|
|
18
18
|
${l.trim()}
|
|
19
19
|
}
|
|
20
|
-
`,
|
|
21
|
-
`)}return
|
|
20
|
+
`,o!=="default"&&(i+=`}
|
|
21
|
+
`)}return i}var x=d`
|
|
22
22
|
:host([flex="0"]) {
|
|
23
23
|
flex: 0;
|
|
24
24
|
}
|
|
@@ -58,7 +58,7 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
58
58
|
:host([flex="12"]) {
|
|
59
59
|
flex: 12;
|
|
60
60
|
}
|
|
61
|
-
`;var
|
|
61
|
+
`;var gt={mt:c,mr:c,mb:c,ml:c,m:c,mh:c,mv:c,s:{sm:`
|
|
62
62
|
height: 28px;
|
|
63
63
|
padding-left: 12px;
|
|
64
64
|
padding-right: 12px;
|
|
@@ -107,7 +107,7 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
107
107
|
`,lk:`
|
|
108
108
|
background-color: transparent;
|
|
109
109
|
color: var(--foreground);
|
|
110
|
-
`}},
|
|
110
|
+
`}},ft={mt:"button",mr:"button",mb:"button",ml:"button",m:"button",mh:"button",mv:"button",s:"button",v:"button"},R=w(gt,ft);var S=d`
|
|
111
111
|
a, a:link, a:visited, a:hover, a:active {
|
|
112
112
|
color: inherit;
|
|
113
113
|
text-decoration: none;
|
|
@@ -117,7 +117,7 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
117
117
|
margin: 0;
|
|
118
118
|
font: inherit;
|
|
119
119
|
}
|
|
120
|
-
`;var
|
|
120
|
+
`;var D=class s extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){s.styleSheet||(s.styleSheet=new CSSStyleSheet,s.styleSheet.replaceSync(d`
|
|
121
121
|
:host {
|
|
122
122
|
display: contents;
|
|
123
123
|
}
|
|
@@ -259,9 +259,9 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
259
259
|
display: contents;
|
|
260
260
|
}
|
|
261
261
|
|
|
262
|
-
${
|
|
263
|
-
${
|
|
264
|
-
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.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","icon","disabled","v","s","sq","ip"]}connectedCallback(){this._updateButton()}attributeChangedCallback(t,
|
|
262
|
+
${R}
|
|
263
|
+
${x}
|
|
264
|
+
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.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","icon","disabled","v","s","sq","ip"]}connectedCallback(){this._updateButton()}attributeChangedCallback(t,i,n){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 i=this.getAttribute("href");if(i){let n=document.createElement("a");n.setAttribute("href",i);let o=this.getAttribute("target");o&&n.setAttribute("target",o),n.appendChild(this._buttonElement),this.shadow.appendChild(n),this._containerElement=n}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 i={pr:"pr-fg",se:"ac-fg",de:"pr-fg",ol:"ac-fg",gh:"ac-fg",lk:"ac-fg"},n={sm:14,md:18,lg:22},o=i[this.getAttribute("v")]||"pr-fg",e=18;if(this.hasAttribute("sq")){let a={sm:14,lg:22},r=this.getAttribute("s");e=a[r]||18}else e=n[this.getAttribute("s")]||18;this._iconElement=document.createElement("rtgl-svg"),this._iconElement.setAttribute("svg",t),this._iconElement.setAttribute("c",o),this._iconElement.setAttribute("wh",e.toString()),this.getAttribute("ip")==="s"?this._buttonElement.insertBefore(this._iconElement,this._slotElement):this._buttonElement.appendChild(this._iconElement)}}_updateWidth(){let t=u(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="")}getBoundingClientRect(){return this._buttonElement?this._buttonElement.getBoundingClientRect():super.getBoundingClientRect()}},G=({render:s,html:t})=>D;var Q=d`
|
|
265
265
|
|
|
266
266
|
:host([d="h"]) {
|
|
267
267
|
flex-direction: row;
|
|
@@ -332,7 +332,7 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
332
332
|
justify-content: center;
|
|
333
333
|
}
|
|
334
334
|
}
|
|
335
|
-
`;var
|
|
335
|
+
`;var bt={cur:{alias:"alias","all-scroll":"all-scroll",auto:"auto",cell:"cell","col-resize":"col-resize","context-menu":"context-menu",copy:"copy",crosshair:"crosshair",default:"default","e-resize":"e-resize","ew-resize":"ew-resize",grab:"grab",grabbing:"grabbing",help:"help",move:"move","n-resize":"n-resize","ne-resize":"ne-resize","nesw-resize":"nesw-resize","ns-resize":"ns-resize","nw-resize":"nw-resize","nwse-resize":"nwse-resize","no-drop":"no-drop",none:"none","not-allowed":"not-allowed",pointer:"pointer",progress:"progress","row-resize":"row-resize","s-resize":"s-resize","se-resize":"se-resize","sw-resize":"sw-resize",text:"text",url:"url","w-resize":"w-resize",wait:"wait","zoom-in":"zoom-in","zoom-out":"zoom-out",p:"pointer",m:"move"}},g=w(bt);var J=d`
|
|
336
336
|
:host([sh]:not([sv])) {
|
|
337
337
|
overflow-x: scroll;
|
|
338
338
|
flex-wrap: nowrap;
|
|
@@ -354,7 +354,7 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
354
354
|
flex-wrap: nowrap;
|
|
355
355
|
}
|
|
356
356
|
|
|
357
|
-
`;var E={xs:"--border-width-xs",sm:"--border-width-sm",md:"--border-width-md",lg:"--border-width-lg",xl:"--border-width-xl"},
|
|
357
|
+
`;var E={xs:"--border-width-xs",sm:"--border-width-sm",md:"--border-width-md",lg:"--border-width-lg",xl:"--border-width-xl"},vt={bgc:{pr:`
|
|
358
358
|
background-color: var(--primary);
|
|
359
359
|
`,se:`
|
|
360
360
|
background-color: var(--secondary);
|
|
@@ -394,7 +394,7 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
394
394
|
left: 0;
|
|
395
395
|
top: 0;
|
|
396
396
|
height: 100%;
|
|
397
|
-
`},shadow:{sm:"--shadow-sm",md:"--shadow-md",lg:"--shadow-lg"},pt:
|
|
397
|
+
`},shadow:{sm:"--shadow-sm",md:"--shadow-md",lg:"--shadow-lg"},pt:c,pr:c,pb:c,pl:c,p:c,ph:c,pv:c,g:c,gv:c,gh:c,bw:E,bwt:E,bwr:E,bwb:E,bwl:E,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"}},C=w(vt);var yt={mt:c,mr:c,mb:c,ml:c,m:c,mh:c,mv:c},f=w(yt);var I=class s extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){s.styleSheet||(s.styleSheet=new CSSStyleSheet,s.styleSheet.replaceSync(d`
|
|
398
398
|
slot {
|
|
399
399
|
display: contents;
|
|
400
400
|
}
|
|
@@ -413,11 +413,11 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
413
413
|
flex-wrap: wrap;
|
|
414
414
|
}
|
|
415
415
|
|
|
416
|
-
${
|
|
417
|
-
${
|
|
418
|
-
${
|
|
416
|
+
${x}
|
|
417
|
+
${J}
|
|
418
|
+
${Q}
|
|
419
419
|
${f}
|
|
420
|
-
${
|
|
420
|
+
${g}
|
|
421
421
|
${C}
|
|
422
422
|
${S}
|
|
423
423
|
|
|
@@ -434,7 +434,7 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
434
434
|
bottom: 0;
|
|
435
435
|
z-index: 1;
|
|
436
436
|
}
|
|
437
|
-
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.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",...
|
|
437
|
+
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.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",...y([...v,"wh","w","h","hide","show","sh","sv","z","d","ah","av","flex","fw","overflow"])]}_styles={default:{},sm:{},md:{},lg:{},xl:{}};_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),i=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,i?this._linkElement.target=i:this._linkElement.removeAttribute("target")):this._linkElement&&(this.shadow.removeChild(this._linkElement),this._linkElement=null)}connectedCallback(){this.updateStyles()}updateStyles(){this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(i=>{let n=F=>`${i==="default"?"":`${i}-`}${F}`,o=this.getAttribute(n("wh")),e=u(o===null?this.getAttribute(n("w")):o),l=u(o===null?this.getAttribute(n("h")):o),a=this.getAttribute(n("op")),r=this.getAttribute(n("z"));r!==null&&(this._styles[i]["z-index"]=r),a!==null&&(this._styles[i].opacity=a),e==="f"?this._styles[i].width="var(--width-stretch)":e!==void 0&&(this._styles[i].width=e,this._styles[i]["min-width"]=e,this._styles[i]["max-width"]=e),l==="f"?this._styles[i].height="100%":l!==void 0&&(this._styles[i].height=l,this._styles[i]["min-height"]=l,this._styles[i]["max-height"]=l),this.hasAttribute(n("hide"))&&(this._styles[i].display="none"),this.hasAttribute(n("show"))&&(this._styles[i].display="flex");let h=this.getAttribute(n("d")),p=this.getAttribute(n("ah")),m=this.getAttribute(n("av"));h==="h"?this._styles[i]["flex-direction"]="row":h==="v"?this._styles[i]["flex-direction"]="column":i==="default"&&!h&&["sm","md","lg","xl"].some(ct=>this.hasAttribute(`${ct}-d`))&&(this._styles[i]["flex-direction"]="column");let b=h==="h",A=h==="v"||!h;b&&(p==="c"?this._styles[i]["justify-content"]="center":p==="e"?this._styles[i]["justify-content"]="flex-end":p==="s"&&(this._styles[i]["justify-content"]="flex-start"),m==="c"?(this._styles[i]["align-items"]="center",this._styles[i]["align-content"]="center"):m==="e"?(this._styles[i]["align-items"]="flex-end",this._styles[i]["align-content"]="flex-end"):m==="s"&&(this._styles[i]["align-items"]="flex-start")),A&&(p!==null||m!==null)&&(p==="c"?this._styles[i]["align-items"]="center":p==="e"?this._styles[i]["align-items"]="flex-end":p==="s"&&(this._styles[i]["align-items"]="flex-start"),m==="c"?this._styles[i]["justify-content"]="center":m==="e"?this._styles[i]["justify-content"]="flex-end":m==="s"&&(this._styles[i]["justify-content"]="flex-start"));let M=this.getAttribute(n("flex"));M!==null&&(this._styles[i].flex=M),this.getAttribute(n("fw"))==="w"&&(this._styles[i]["flex-wrap"]="wrap");let k=this.hasAttribute(n("sh")),N=this.hasAttribute(n("sv")),dt=this.getAttribute(n("overflow"));k&&N?(this._styles[i].overflow="scroll",this._styles[i]["flex-wrap"]="nowrap"):k?(this._styles[i]["overflow-x"]="scroll",this._styles[i]["flex-wrap"]="nowrap"):N&&(this._styles[i]["overflow-y"]="scroll",this._styles[i]["flex-wrap"]="nowrap"),dt==="hidden"&&(this._styles[i].overflow="hidden",this._styles[i]["flex-wrap"]="nowrap")});let t=_(this._styles);t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}attributeChangedCallback(t,i,n){if(t==="href"||t==="target"){this._updateDOM();return}i!==n&&this.updateStyles()}},X=({render:s,html:t})=>I;var _t={ta:{s:"start",c:"center",e:"end",j:"justify"},s:{h1:`
|
|
438
438
|
font-size: var(--h1-font-size);
|
|
439
439
|
font-weight: var(--h1-font-weight);
|
|
440
440
|
line-height: var(--h1-line-height);
|
|
@@ -474,7 +474,7 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
474
474
|
font-weight: var(--xs-font-weight);
|
|
475
475
|
line-height: var(--xs-line-height);
|
|
476
476
|
letter-spacing: var(--xs-letter-spacing);
|
|
477
|
-
`}},
|
|
477
|
+
`}},Y=w(_t);var wt={c:{fg:"--foreground",de:"--destructive","pr-fg":"--primary-foreground","se-fg":"--secondary-foreground","mu-fg":"--muted-foreground","ac-fg":"--accent-foreground"}},$=w(wt);var j=class s extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){s.styleSheet||(s.styleSheet=new CSSStyleSheet,s.styleSheet.replaceSync(d`
|
|
478
478
|
:host {
|
|
479
479
|
display: block;
|
|
480
480
|
font-size: var(--md-font-size);
|
|
@@ -505,11 +505,11 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
505
505
|
bottom: 0;
|
|
506
506
|
z-index: 1;
|
|
507
507
|
}
|
|
508
|
-
${
|
|
508
|
+
${Y}
|
|
509
509
|
${$}
|
|
510
510
|
${f}
|
|
511
|
-
${
|
|
512
|
-
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.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,
|
|
511
|
+
${g}
|
|
512
|
+
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.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,i,n){t==="href"||t==="target"?this._updateDOM():this._updateStyling()}_updateStyling(){let t=u(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"),i=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,i?this._linkElement.target=i:this._linkElement.removeAttribute("target")):this._linkElement&&(this.shadow.removeChild(this._linkElement),this._linkElement=null)}},Z=({render:s,html:t})=>j;var z=class s extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){s.styleSheet||(s.styleSheet=new CSSStyleSheet,s.styleSheet.replaceSync(d`
|
|
513
513
|
:host {
|
|
514
514
|
border-style: solid;
|
|
515
515
|
box-sizing: border-box;
|
|
@@ -547,8 +547,8 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
547
547
|
|
|
548
548
|
${C}
|
|
549
549
|
${f}
|
|
550
|
-
${
|
|
551
|
-
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.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
|
|
550
|
+
${g}
|
|
551
|
+
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.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 y([...v,"key","src","href","target","wh","w","h","hide","show","height","width","z"])}_styles={default:{},sm:{},md:{},lg:{},xl:{}};_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),i=this.getAttribute("target");t?(this._linkElement||(this._linkElement=document.createElement("a")),this._linkElement.href=t,i?this._linkElement.target=i: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,i,n){if(t==="href"||t==="target"){this._updateDOM();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(e=>{let l=b=>`${e==="default"?"":`${e}-`}${b}`,a=this.getAttribute(l("wh")),r=u(a===null?this.getAttribute(l("w")):a),h=u(a===null?this.getAttribute(l("h")):a),p=this.getAttribute(l("o")),m=this.getAttribute(l("z"));m!==null&&(this._styles[e]["z-index"]=m),p!==null&&(this._styles[e].opacity=p),r==="f"?this._styles[e].width="var(--width-stretch)":r!==void 0&&(this._styles[e].width=r,this._styles[e]["min-width"]=r,this._styles[e]["max-width"]=r),h==="f"?this._styles[e].height="100%":h!==void 0&&(this._styles[e].height=h,this._styles[e]["min-height"]=h,this._styles[e]["max-height"]=h),this.hasAttribute(l("hide"))&&(this._styles[e].display="none !important"),this.hasAttribute(l("show"))&&(this._styles[e].display="block !important")});let o=_(this._styles);o!==this._lastStyleString&&(this._styleElement.textContent=o,this._lastStyleString=o),this._updateImageAttributes()}_updateImageAttributes(){let t=this.getAttribute("src"),i=this.getAttribute("width"),n=this.getAttribute("height");t!==null&&this._imgElement.setAttribute("src",t),i!==null&&this._imgElement.setAttribute("width",i),n!==null&&this._imgElement.setAttribute("height",n)}connectedCallback(){this._updateImageAttributes()}},tt=({render:s,html:t})=>z;var et=d`
|
|
552
552
|
:host([pt="xs"]) svg {
|
|
553
553
|
padding-top: var(--spacing-xs);
|
|
554
554
|
}
|
|
@@ -664,16 +664,16 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
664
664
|
padding-top: var(--spacing-xl);
|
|
665
665
|
padding-bottom: var(--spacing-xl);
|
|
666
666
|
}
|
|
667
|
-
`;var
|
|
667
|
+
`;var L=class s extends HTMLElement{static styleSheet=null;static _icons={};static initializeStyleSheet(){s.styleSheet||(s.styleSheet=new CSSStyleSheet,s.styleSheet.replaceSync(d`
|
|
668
668
|
:host {
|
|
669
669
|
color: var(--foreground);
|
|
670
670
|
}
|
|
671
671
|
${$}
|
|
672
|
-
${
|
|
672
|
+
${et}
|
|
673
673
|
${f}
|
|
674
|
-
${
|
|
675
|
-
${
|
|
676
|
-
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.styleSheet]}static get observedAttributes(){return["key","svg","w","h","wh"]}static get icons(){return s._icons}static addIcon(t,
|
|
674
|
+
${x}
|
|
675
|
+
${g}
|
|
676
|
+
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.styleSheet]}static get observedAttributes(){return["key","svg","w","h","wh"]}static get icons(){return s._icons}static addIcon(t,i){s._icons[t]=i}connectedCallback(){this._updateSizing(),this._render()}attributeChangedCallback(t,i,n){this._updateSizing(),this._render()}_updateSizing(){let t=this.getAttribute("wh"),i=u(t===null?this.getAttribute("w"):t),n=u(t===null?this.getAttribute("h"):t);i&&(this.style.width=i),n&&(this.style.height=n)}_render(){try{let t=this.getAttribute("svg"),i=s._icons[t]||(window.rtglIcons||{})[t];if(i){this.shadow.innerHTML=i;return}}catch(t){console.log("error in rtgl-svg render",t)}this.shadow.innerHTML=""}},it=({render:s,html:t})=>L;var T=class s extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){s.styleSheet||(s.styleSheet=new CSSStyleSheet,s.styleSheet.replaceSync(d`
|
|
677
677
|
:host {
|
|
678
678
|
display: contents;
|
|
679
679
|
}
|
|
@@ -707,8 +707,8 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
707
707
|
cursor: not-allowed;
|
|
708
708
|
}
|
|
709
709
|
${f}
|
|
710
|
-
${
|
|
711
|
-
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.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("input",this._onChange)}static get observedAttributes(){return["key","type","placeholder","disabled","value","s",...
|
|
710
|
+
${g}
|
|
711
|
+
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.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("input",this._onChange)}static get observedAttributes(){return["key","type","placeholder","disabled","value","s",...y([...v,"wh","w","h","hide","show","op","z"])]}get value(){return this._inputElement.value}set value(t){this._inputElement.value=t}focus(){this._inputElement.focus()}_onChange=t=>{this.dispatchEvent(new CustomEvent("input-change",{detail:{value:this._inputElement.value}}))};attributeChangedCallback(t,i,n){if(t==="value"&&requestAnimationFrame(()=>{let e=this.getAttribute("value");this._inputElement.value=e??""}),t==="placeholder"&&requestAnimationFrame(()=>{let e=this.getAttribute("placeholder");e===void 0||e==="null"?this._inputElement.removeAttribute("placeholder"):this._inputElement.setAttribute("placeholder",e??"")}),["type","disabled","step","s"].includes(t)){this._updateInputAttributes();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(e=>{let l=b=>`${e==="default"?"":`${e}-`}${b}`,a=this.getAttribute(l("wh")),r=u(a===null?this.getAttribute(l("w")):a),h=u(a===null?this.getAttribute(l("h")):a),p=this.getAttribute(l("op")),m=this.getAttribute(l("z"));m!==null&&(this._styles[e]["z-index"]=m),p!==null&&(this._styles[e].opacity=p),r==="f"?this._styles[e].width="var(--width-stretch)":r!==void 0&&(this._styles[e].width=r,this._styles[e]["min-width"]=r,this._styles[e]["max-width"]=r),h==="f"?this._styles[e].height="100%":h!==void 0&&(this._styles[e].height=h,this._styles[e]["min-height"]=h,this._styles[e]["max-height"]=h),this.hasAttribute(l("hide"))&&(this._styles[e].display="none !important"),this.hasAttribute(l("show"))&&(this._styles[e].display="block !important")});let o=_(this._styles,"input");o!==this._lastStyleString&&(this._styleElement.textContent=o,this._lastStyleString=o)}_updateInputAttributes(){let t=this.getAttribute("type")||"text",i=this.getAttribute("step"),n=this.hasAttribute("disabled");this._inputElement.setAttribute("type",t),i!==null?this._inputElement.setAttribute("step",i):this._inputElement.removeAttribute("step"),n?this._inputElement.setAttribute("disabled",""):this._inputElement.removeAttribute("disabled")}connectedCallback(){this._updateInputAttributes()}},st=({render:s,html:t})=>T;var W=class s extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){s.styleSheet||(s.styleSheet=new CSSStyleSheet,s.styleSheet.replaceSync(d`
|
|
712
712
|
:host {
|
|
713
713
|
display: contents;
|
|
714
714
|
}
|
|
@@ -742,8 +742,8 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
742
742
|
cursor: not-allowed;
|
|
743
743
|
}
|
|
744
744
|
${f}
|
|
745
|
-
${
|
|
746
|
-
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.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("input",this._onChange)}static get observedAttributes(){return["key","type","placeholder","disabled","value","step","min","max","s",...
|
|
745
|
+
${g}
|
|
746
|
+
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.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("input",this._onChange)}static get observedAttributes(){return["key","type","placeholder","disabled","value","step","min","max","s",...y([...v,"wh","w","h","hide","show","op","z"])]}get value(){return this._inputElement.value}set value(t){this._inputElement.value=t}focus(){this._inputElement.focus()}_onChange=t=>{let i=this._inputElement.value,n=parseFloat(i);if(!isNaN(n)){let o=this.getAttribute("min");if(o!==null){let l=parseFloat(o);!isNaN(l)&&n<l&&(n=l,this._inputElement.value=l.toString())}let e=this.getAttribute("max");if(e!==null){let l=parseFloat(e);!isNaN(l)&&n>l&&(n=l,this._inputElement.value=l.toString())}this.dispatchEvent(new CustomEvent("input-change",{detail:{value:n}}))}};attributeChangedCallback(t,i,n){if(t==="value"&&requestAnimationFrame(()=>{let e=this.getAttribute("value");this._inputElement.value=e??""}),t==="placeholder"&&requestAnimationFrame(()=>{let e=this.getAttribute("placeholder");e===void 0||e==="null"?this._inputElement.removeAttribute("placeholder"):this._inputElement.setAttribute("placeholder",e??"")}),["type","disabled","step","min","max","s"].includes(t)){this._updateInputAttributes();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(e=>{let l=b=>`${e==="default"?"":`${e}-`}${b}`,a=this.getAttribute(l("wh")),r=u(a===null?this.getAttribute(l("w")):a),h=u(a===null?this.getAttribute(l("h")):a),p=this.getAttribute(l("op")),m=this.getAttribute(l("z"));m!==null&&(this._styles[e]["z-index"]=m),p!==null&&(this._styles[e].opacity=p),r==="f"?this._styles[e].width="var(--width-stretch)":r!==void 0&&(this._styles[e].width=r,this._styles[e]["min-width"]=r,this._styles[e]["max-width"]=r),h==="f"?this._styles[e].height="100%":h!==void 0&&(this._styles[e].height=h,this._styles[e]["min-height"]=h,this._styles[e]["max-height"]=h),this.hasAttribute(l("hide"))&&(this._styles[e].display="none !important"),this.hasAttribute(l("show"))&&(this._styles[e].display="block !important")});let o=_(this._styles,"input");o!==this._lastStyleString&&(this._styleElement.textContent=o,this._lastStyleString=o)}_updateInputAttributes(){let t=this.getAttribute("type")||"number",i=this.getAttribute("step"),n=this.getAttribute("min"),o=this.getAttribute("max"),e=this.hasAttribute("disabled");this._inputElement.setAttribute("type",t),i!==null?this._inputElement.setAttribute("step",i):this._inputElement.removeAttribute("step"),n!==null?this._inputElement.setAttribute("min",n):this._inputElement.removeAttribute("min"),o!==null?this._inputElement.setAttribute("max",o):this._inputElement.removeAttribute("max"),e?this._inputElement.setAttribute("disabled",""):this._inputElement.removeAttribute("disabled")}connectedCallback(){this._updateInputAttributes()}},nt=({render:s,html:t})=>W;var B=class s extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){s.styleSheet||(s.styleSheet=new CSSStyleSheet,s.styleSheet.replaceSync(d`
|
|
747
747
|
:host {
|
|
748
748
|
display: contents;
|
|
749
749
|
}
|
|
@@ -767,8 +767,85 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
767
767
|
border-color: var(--foreground);
|
|
768
768
|
}
|
|
769
769
|
${f}
|
|
770
|
-
${
|
|
771
|
-
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.styleSheet],this._styles={default:{},sm:{},md:{},lg:{},xl:{}},this._lastStyleString="",this._textareaElement=document.createElement("textarea"),this._textareaElement.setAttribute("type","text"),this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._textareaElement),this._textareaElement.addEventListener("input",this._onChange)}_onChange=t=>{this.dispatchEvent(new CustomEvent("textarea-change",{detail:{value:this._textareaElement.value}}))};static get observedAttributes(){return["key","type","placeholder","disabled","value","cols","rows","ellipsis",...
|
|
770
|
+
${g}
|
|
771
|
+
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.styleSheet],this._styles={default:{},sm:{},md:{},lg:{},xl:{}},this._lastStyleString="",this._textareaElement=document.createElement("textarea"),this._textareaElement.setAttribute("type","text"),this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._textareaElement),this._textareaElement.addEventListener("input",this._onChange)}_onChange=t=>{this.dispatchEvent(new CustomEvent("textarea-change",{detail:{value:this._textareaElement.value}}))};static get observedAttributes(){return["key","type","placeholder","disabled","value","cols","rows","ellipsis",...y([...v,"wh","w","h","hide","show","op","z"])]}get value(){return this._textareaElement.value}set value(t){this._textareaElement.value=t}connectedCallback(){this._updateTextareaAttributes()}attributeChangedCallback(t,i,n){if(t==="value"&&requestAnimationFrame(()=>{let e=this.getAttribute("value");this._textareaElement.value=e??""}),t==="placeholder"&&requestAnimationFrame(()=>{let e=this.getAttribute("placeholder");e===void 0||e==="null"?this._textareaElement.removeAttribute("placeholder"):this._textareaElement.setAttribute("placeholder",e??"")}),["cols","rows","disabled"].includes(t)){this._updateTextareaAttributes();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(e=>{let l=b=>`${e==="default"?"":`${e}-`}${b}`,a=this.getAttribute(l("wh")),r=u(a===null?this.getAttribute(l("w")):a),h=u(a===null?this.getAttribute(l("h")):a),p=this.getAttribute(l("op")),m=this.getAttribute(l("z"));m!==null&&(this._styles[e]["z-index"]=m),p!==null&&(this._styles[e].opacity=p),r==="f"?this._styles[e].width="var(--width-stretch)":r!==void 0&&(this._styles[e].width=r,this._styles[e]["min-width"]=r,this._styles[e]["max-width"]=r),h==="f"?this._styles[e].height="100%":h!==void 0&&(this._styles[e].height=h,this._styles[e]["min-height"]=h,this._styles[e]["max-height"]=h),this.hasAttribute(l("hide"))&&(this._styles[e].display="none !important"),this.hasAttribute(l("show"))&&(this._styles[e].display="block !important")});let o=_(this._styles,"textarea");o!==this._lastStyleString&&(this._styleElement.textContent=o,this._lastStyleString=o)}_updateTextareaAttributes(){let t=this.getAttribute("cols"),i=this.getAttribute("rows"),n=this.hasAttribute("disabled");t!==null?this._textareaElement.setAttribute("cols",t):this._textareaElement.removeAttribute("cols"),i!==null?this._textareaElement.setAttribute("rows",i):this._textareaElement.removeAttribute("rows"),n?this._textareaElement.setAttribute("disabled",""):this._textareaElement.removeAttribute("disabled")}},lt=({render:s,html:t})=>B;var H=class s extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){s.styleSheet||(s.styleSheet=new CSSStyleSheet,s.styleSheet.replaceSync(d`
|
|
772
|
+
:host {
|
|
773
|
+
display: contents;
|
|
774
|
+
}
|
|
775
|
+
input[type="color"] {
|
|
776
|
+
background-color: var(--background);
|
|
777
|
+
border: 1px solid var(--ring);
|
|
778
|
+
border-radius: var(--border-radius-lg);
|
|
779
|
+
padding: 2px;
|
|
780
|
+
height: 32px;
|
|
781
|
+
width: 32px;
|
|
782
|
+
cursor: pointer;
|
|
783
|
+
outline: none;
|
|
784
|
+
}
|
|
785
|
+
input[type="color"]:focus {
|
|
786
|
+
border-color: var(--foreground);
|
|
787
|
+
}
|
|
788
|
+
input[type="color"]:disabled {
|
|
789
|
+
cursor: not-allowed;
|
|
790
|
+
opacity: 0.5;
|
|
791
|
+
}
|
|
792
|
+
${f}
|
|
793
|
+
${g}
|
|
794
|
+
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.styleSheet],this._styles={default:{},sm:{},md:{},lg:{},xl:{}},this._lastStyleString="",this._inputElement=document.createElement("input"),this._inputElement.type="color",this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._inputElement),this._inputElement.addEventListener("change",this._onChange),this._inputElement.addEventListener("input",this._onInput)}static get observedAttributes(){return["key","value","disabled",...y([...v,"wh","w","h","hide","show","op","z"])]}get value(){return this._inputElement.value}set value(t){this._inputElement.value=t}_onChange=t=>{this.dispatchEvent(new CustomEvent("colorpicker-change",{detail:{value:this._inputElement.value}}))};_onInput=t=>{this.dispatchEvent(new CustomEvent("colorpicker-input",{detail:{value:this._inputElement.value}}))};attributeChangedCallback(t,i,n){if(t==="key"&&i!==n){requestAnimationFrame(()=>{let e=this.getAttribute("value");this._inputElement.value=e??"#000000"});return}if(["value","disabled"].includes(t)){this._updateInputAttributes();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(e=>{let l=b=>`${e==="default"?"":`${e}-`}${b}`,a=this.getAttribute(l("wh")),r=u(a===null?this.getAttribute(l("w")):a),h=u(a===null?this.getAttribute(l("h")):a),p=this.getAttribute(l("op")),m=this.getAttribute(l("z"));m!==null&&(this._styles[e]["z-index"]=m),p!==null&&(this._styles[e].opacity=p),r==="f"?this._styles[e].width="var(--width-stretch)":r!==void 0&&(this._styles[e].width=r,this._styles[e]["min-width"]=r,this._styles[e]["max-width"]=r),h==="f"?this._styles[e].height="100%":h!==void 0&&(this._styles[e].height=h,this._styles[e]["min-height"]=h,this._styles[e]["max-height"]=h),this.hasAttribute(l("hide"))&&(this._styles[e].display="none !important"),this.hasAttribute(l("show"))&&(this._styles[e].display="block !important")});let o=_(this._styles,'input[type="color"]');o!==this._lastStyleString&&(this._styleElement.textContent=o,this._lastStyleString=o)}_updateInputAttributes(){let t=this.getAttribute("value"),i=this.hasAttribute("disabled");t!==null&&(this._inputElement.value=t),i?this._inputElement.setAttribute("disabled",""):this._inputElement.removeAttribute("disabled")}connectedCallback(){this._updateInputAttributes()}},ot=({render:s,html:t})=>H;var q=class s extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){s.styleSheet||(s.styleSheet=new CSSStyleSheet,s.styleSheet.replaceSync(d`
|
|
795
|
+
:host {
|
|
796
|
+
display: contents;
|
|
797
|
+
}
|
|
798
|
+
input[type="range"] {
|
|
799
|
+
-webkit-appearance: none;
|
|
800
|
+
appearance: none;
|
|
801
|
+
height: 8px;
|
|
802
|
+
background: var(--muted);
|
|
803
|
+
border-radius: var(--border-radius-full);
|
|
804
|
+
outline: none;
|
|
805
|
+
cursor: pointer;
|
|
806
|
+
}
|
|
807
|
+
input[type="range"]::-webkit-slider-thumb {
|
|
808
|
+
-webkit-appearance: none;
|
|
809
|
+
appearance: none;
|
|
810
|
+
width: 20px;
|
|
811
|
+
height: 20px;
|
|
812
|
+
background: var(--foreground);
|
|
813
|
+
border-radius: 50%;
|
|
814
|
+
cursor: pointer;
|
|
815
|
+
transition: all 0.2s ease;
|
|
816
|
+
}
|
|
817
|
+
input[type="range"]::-moz-range-thumb {
|
|
818
|
+
width: 20px;
|
|
819
|
+
height: 20px;
|
|
820
|
+
background: var(--foreground);
|
|
821
|
+
border-radius: 50%;
|
|
822
|
+
cursor: pointer;
|
|
823
|
+
border: none;
|
|
824
|
+
transition: all 0.2s ease;
|
|
825
|
+
}
|
|
826
|
+
input[type="range"]:hover::-webkit-slider-thumb {
|
|
827
|
+
transform: scale(1.1);
|
|
828
|
+
}
|
|
829
|
+
input[type="range"]:hover::-moz-range-thumb {
|
|
830
|
+
transform: scale(1.1);
|
|
831
|
+
}
|
|
832
|
+
input[type="range"]:focus {
|
|
833
|
+
outline: 2px solid var(--ring);
|
|
834
|
+
outline-offset: 2px;
|
|
835
|
+
}
|
|
836
|
+
input[type="range"]:disabled {
|
|
837
|
+
cursor: not-allowed;
|
|
838
|
+
opacity: 0.5;
|
|
839
|
+
}
|
|
840
|
+
input[type="range"]:disabled::-webkit-slider-thumb {
|
|
841
|
+
cursor: not-allowed;
|
|
842
|
+
}
|
|
843
|
+
input[type="range"]:disabled::-moz-range-thumb {
|
|
844
|
+
cursor: not-allowed;
|
|
845
|
+
}
|
|
846
|
+
${f}
|
|
847
|
+
${g}
|
|
848
|
+
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s.styleSheet],this._styles={default:{},sm:{},md:{},lg:{},xl:{}},this._lastStyleString="",this._inputElement=document.createElement("input"),this._inputElement.type="range",this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._inputElement),this._inputElement.addEventListener("input",this._onInput),this._inputElement.addEventListener("change",this._onChange)}static get observedAttributes(){return["key","value","min","max","step","disabled",...y([...v,"wh","w","h","hide","show","op","z"])]}get value(){return this._inputElement.value}set value(t){this._inputElement.value=t}_onInput=()=>{this.dispatchEvent(new CustomEvent("slider-input",{detail:{value:Number(this._inputElement.value)}}))};_onChange=()=>{this.dispatchEvent(new CustomEvent("slider-change",{detail:{value:Number(this._inputElement.value)}}))};attributeChangedCallback(t,i,n){if(t==="key"&&i!==n){requestAnimationFrame(()=>{let e=this.getAttribute("value"),l=this.getAttribute("min")||"0";this._inputElement.value=e??l});return}if(["value","min","max","step","disabled"].includes(t)){this._updateInputAttributes();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(e=>{let l=b=>`${e==="default"?"":`${e}-`}${b}`,a=this.getAttribute(l("wh")),r=u(a===null?this.getAttribute(l("w")):a),h=u(a===null?this.getAttribute(l("h")):a),p=this.getAttribute(l("op")),m=this.getAttribute(l("z"));m!==null&&(this._styles[e]["z-index"]=m),p!==null&&(this._styles[e].opacity=p),r==="f"?this._styles[e].width="var(--width-stretch)":r!==void 0&&(this._styles[e].width=r,this._styles[e]["min-width"]=r,this._styles[e]["max-width"]=r),h==="f"?this._styles[e].height="100%":h!==void 0&&(this._styles[e].height=h,this._styles[e]["min-height"]=h,this._styles[e]["max-height"]=h),this.hasAttribute(l("hide"))&&(this._styles[e].display="none !important"),this.hasAttribute(l("show"))&&(this._styles[e].display="block !important")});let o=_(this._styles,'input[type="range"]');o!==this._lastStyleString&&(this._styleElement.textContent=o,this._lastStyleString=o)}_updateInputAttributes(){let t=this.getAttribute("value"),i=this.getAttribute("min"),n=this.getAttribute("max"),o=this.getAttribute("step"),e=this.hasAttribute("disabled");t!==null?this._inputElement.value=t:this._inputElement.value=i??0,i!==null?this._inputElement.min=i:this._inputElement.min="0",n!==null?this._inputElement.max=n:this._inputElement.max="100",o!==null?this._inputElement.step=o:this._inputElement.step="1",e?this._inputElement.setAttribute("disabled",""):this._inputElement.removeAttribute("disabled")}connectedCallback(){this._updateInputAttributes()}},rt=({render:s,html:t})=>q;var P=class s extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){s.styleSheet||(s.styleSheet=new CSSStyleSheet,s.styleSheet.replaceSync(d`
|
|
772
849
|
:host {
|
|
773
850
|
display: contents;
|
|
774
851
|
}
|
|
@@ -839,4 +916,58 @@ var rettangoli=(()=>{function c(s,...t){let e="";return s.forEach((n,r)=>{e+=n+(
|
|
|
839
916
|
dialog[open] slot[name="content"] {
|
|
840
917
|
animation: dialog-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
841
918
|
}
|
|
842
|
-
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[s.styleSheet],this._dialogElement=document.createElement("dialog"),this.shadow.appendChild(this._dialogElement),this._slotElement=null,this._isConnected=!1,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:{}}))}static get observedAttributes(){return["open","w","s"]}connectedCallback(){this._updateDialog(),this._isConnected=!0,this.hasAttribute("open")&&this._showModal()}attributeChangedCallback(t,
|
|
919
|
+
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[s.styleSheet],this._dialogElement=document.createElement("dialog"),this.shadow.appendChild(this._dialogElement),this._slotElement=null,this._isConnected=!1,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:{}}))}static get observedAttributes(){return["open","w","s"]}connectedCallback(){this._updateDialog(),this._isConnected=!0,this.hasAttribute("open")&&this._showModal()}attributeChangedCallback(t,i,n){t==="open"?n!==null&&!this._dialogElement.open&&this._isConnected?this._showModal():n===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._dialogElement.appendChild(this._slotElement)),this._dialogElement.showModal(),this._dialogElement.scrollTop=0,this._applyAdaptiveCentering())}_hideModal(){this._dialogElement.open&&(this._dialogElement.close(),this._slotElement&&(this._slotElement.style.marginTop="",this._slotElement.style.marginBottom="",this._dialogElement.removeChild(this._slotElement),this._slotElement=null),this._dialogElement.style.height="")}_applyAdaptiveCentering(){this._slotElement&&requestAnimationFrame(()=>{if(!this._slotElement)return;let t=this._slotElement.offsetHeight,i=window.innerHeight,n=40;if(t>=i-2*n)this._slotElement.style.marginTop=`${n}px`,this._slotElement.style.marginBottom=`${n}px`,this._dialogElement.style.height="100vh";else{let o=i-t,e=Math.floor(o/2);this._slotElement.style.marginTop=`${e}px`,this._slotElement.style.marginBottom=`${e}px`,this._dialogElement.style.height="auto"}})}get dialog(){return this._dialogElement}},at=({render:s,html:t})=>P;var V=class s extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){s.styleSheet||(s.styleSheet=new CSSStyleSheet,s.styleSheet.replaceSync(d`
|
|
920
|
+
:host {
|
|
921
|
+
display: contents;
|
|
922
|
+
}
|
|
923
|
+
|
|
924
|
+
dialog {
|
|
925
|
+
padding: 0;
|
|
926
|
+
border: none;
|
|
927
|
+
background: transparent;
|
|
928
|
+
margin: 0;
|
|
929
|
+
overflow: visible;
|
|
930
|
+
color: inherit;
|
|
931
|
+
scrollbar-width: none;
|
|
932
|
+
outline: none;
|
|
933
|
+
position: fixed;
|
|
934
|
+
top: 0;
|
|
935
|
+
left: 0;
|
|
936
|
+
width: 100vw;
|
|
937
|
+
height: 100vh;
|
|
938
|
+
/* Prevent dialog from being focused */
|
|
939
|
+
pointer-events: none;
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
dialog::backdrop {
|
|
943
|
+
background-color: transparent;
|
|
944
|
+
/* Allow backdrop to receive clicks */
|
|
945
|
+
pointer-events: auto;
|
|
946
|
+
}
|
|
947
|
+
|
|
948
|
+
.popover-container {
|
|
949
|
+
position: fixed;
|
|
950
|
+
z-index: 1000;
|
|
951
|
+
outline: none;
|
|
952
|
+
pointer-events: auto;
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
:host([open]) .popover-container {
|
|
956
|
+
display: block;
|
|
957
|
+
visibility: hidden;
|
|
958
|
+
}
|
|
959
|
+
|
|
960
|
+
:host([open][positioned]) .popover-container {
|
|
961
|
+
visibility: visible;
|
|
962
|
+
}
|
|
963
|
+
|
|
964
|
+
slot[name="content"] {
|
|
965
|
+
display: block;
|
|
966
|
+
background-color: var(--muted);
|
|
967
|
+
border: 1px solid var(--border);
|
|
968
|
+
border-radius: var(--border-radius-md);
|
|
969
|
+
padding: var(--spacing-md);
|
|
970
|
+
min-width: 200px;
|
|
971
|
+
max-width: 400px;
|
|
972
|
+
}
|
|
973
|
+
`))}constructor(){super(),s.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[s.styleSheet],this._dialogElement=document.createElement("dialog"),this.shadow.appendChild(this._dialogElement),this._dialogElement.addEventListener("click",t=>{t.stopPropagation();let i=t.composedPath();(i[0]===this._dialogElement||i[0].nodeName==="DIALOG"&&i[0]===this._dialogElement)&&this.dispatchEvent(new CustomEvent("close",{detail:{}}))}),this._dialogElement.addEventListener("contextmenu",t=>{let i=t.composedPath();(i[0]===this._dialogElement||i[0].nodeName==="DIALOG"&&i[0]===this._dialogElement)&&(t.preventDefault(),this.dispatchEvent(new CustomEvent("close",{detail:{}})))}),this._dialogElement.addEventListener("cancel",t=>{t.preventDefault(),this.dispatchEvent(new CustomEvent("close",{detail:{}}))}),this._popoverContainer=document.createElement("div"),this._popoverContainer.className="popover-container",this._dialogElement.appendChild(this._popoverContainer),this._slotElement=null,this._isOpen=!1}static get observedAttributes(){return["open","x","y","placement"]}connectedCallback(){this.hasAttribute("open")&&this._show()}disconnectedCallback(){this._isOpen&&this._dialogElement.open&&this._dialogElement.close()}attributeChangedCallback(t,i,n){t==="open"?n!==null&&!this._isOpen?this.isConnected&&this._show():n===null&&this._isOpen&&this._hide():(t==="x"||t==="y"||t==="placement")&&this._isOpen&&this._updatePosition()}_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"),i=parseFloat(this.getAttribute("y")||"0"),n=this.getAttribute("placement")||"bottom-start";this.removeAttribute("positioned"),requestAnimationFrame(()=>{let o=this._popoverContainer.getBoundingClientRect(),{left:e,top:l}=this._calculatePosition(t,i,o.width,o.height,n);this._popoverContainer.style.left=`${e}px`,this._popoverContainer.style.top=`${l}px`,requestAnimationFrame(()=>{this.setAttribute("positioned","")})})}_calculatePosition(t,i,n,o,e){let a=t,r=i;switch(e){case"top":a=t-n/2,r=i-o-8;break;case"top-start":a=t,r=i-o-8;break;case"top-end":a=t-n,r=i-o-8;break;case"right":a=t+8,r=i-o/2;break;case"right-start":a=t+8,r=i;break;case"right-end":a=t+8,r=i-o;break;case"bottom":a=t-n/2,r=i+8;break;case"bottom-start":a=t,r=i+8;break;case"bottom-end":a=t-n,r=i+8;break;case"left":a=t-n-8,r=i-o/2;break;case"left-start":a=t-n-8,r=i;break;case"left-end":a=t-n-8,r=i-o;break}let h=8;return a=Math.max(h,Math.min(a,window.innerWidth-n-h)),r=Math.max(h,Math.min(r,window.innerHeight-o-h)),{left:a,top:r}}get popover(){return this._popoverContainer}},ht=({render:s,html:t})=>V;customElements.define("rtgl-button",G({}));customElements.define("rtgl-view",X({}));customElements.define("rtgl-text",Z({}));customElements.define("rtgl-image",tt({}));customElements.define("rtgl-svg",it({}));customElements.define("rtgl-input",st({}));customElements.define("rtgl-input-number",nt({}));customElements.define("rtgl-textarea",lt({}));customElements.define("rtgl-color-picker",ot({}));customElements.define("rtgl-slider",rt({}));customElements.define("rtgl-dialog",at({}));customElements.define("rtgl-popover",ht({}));})();
|
package/package.json
CHANGED
package/src/entry-iife-layout.js
CHANGED
|
@@ -6,7 +6,10 @@ import RettangoliSvg from './primitives/svg.js';
|
|
|
6
6
|
import RettangoliInput from './primitives/input.js';
|
|
7
7
|
import RettangoliInputNumber from './primitives/input-number.js';
|
|
8
8
|
import RettangoliTextArea from './primitives/textarea.js';
|
|
9
|
+
import RettangoliColorPicker from './primitives/colorPicker.js';
|
|
10
|
+
import RettangoliSlider from './primitives/slider.js';
|
|
9
11
|
import RettangoliDialog from './primitives/dialog.js';
|
|
12
|
+
import RettangoliPopover from './primitives/popover.js';
|
|
10
13
|
|
|
11
14
|
|
|
12
15
|
customElements.define("rtgl-button", RettangoliButton({}));
|
|
@@ -17,4 +20,7 @@ customElements.define("rtgl-svg", RettangoliSvg({}));
|
|
|
17
20
|
customElements.define("rtgl-input", RettangoliInput({}));
|
|
18
21
|
customElements.define("rtgl-input-number", RettangoliInputNumber({}));
|
|
19
22
|
customElements.define("rtgl-textarea", RettangoliTextArea({}));
|
|
23
|
+
customElements.define("rtgl-color-picker", RettangoliColorPicker({}));
|
|
24
|
+
customElements.define("rtgl-slider", RettangoliSlider({}));
|
|
20
25
|
customElements.define("rtgl-dialog", RettangoliDialog({}));
|
|
26
|
+
customElements.define("rtgl-popover", RettangoliPopover({}));
|
package/src/index.js
CHANGED
|
@@ -8,6 +8,8 @@ import RettangoliInputNumber from './primitives/input-number.js';
|
|
|
8
8
|
import RettangoliTextArea from './primitives/textarea.js';
|
|
9
9
|
import RettangoliDialog from './primitives/dialog.js';
|
|
10
10
|
import RettangoliPopover from './primitives/popover.js';
|
|
11
|
+
import RettangoliColorPicker from './primitives/colorPicker.js';
|
|
12
|
+
import RettangoliSlider from './primitives/slider.js';
|
|
11
13
|
import createGlobalUI from './deps/createGlobalUI.js';
|
|
12
14
|
|
|
13
15
|
export {
|
|
@@ -21,5 +23,7 @@ export {
|
|
|
21
23
|
RettangoliTextArea,
|
|
22
24
|
RettangoliDialog,
|
|
23
25
|
RettangoliPopover,
|
|
26
|
+
RettangoliColorPicker,
|
|
27
|
+
RettangoliSlider,
|
|
24
28
|
createGlobalUI,
|
|
25
29
|
}
|