rettangoli-ui 0.1.0-rc1 → 0.1.0-rc2
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 +309 -284
- package/dist/rettangoli-iife-ui.min.js +383 -548
- package/package.json +4 -3
@@ -1,24 +1,24 @@
|
|
1
|
-
var rettangoli=(()=>{
|
2
|
-
:host([${
|
3
|
-
${
|
1
|
+
var rettangoli=(()=>{function n(e,...t){let i="";return e.forEach((r,a)=>{i+=r+(t[a]||"")}),i}var G=["xs","sm","md","lg","xl"],D={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"},S=Object.keys(D),_=e=>e.concat(G.flatMap(t=>e.map(i=>`${t}-${i}`))),T={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 i="";for(let[r,a]of Object.entries(T)){r!=="default"&&(i+=`${a} {`);for(let[s,l]of Object.entries(e)){let h=t[s]?` ${t[s]} `:" ";for(let[c,d]of Object.entries(l)){let m=D[s],u=d.startsWith("--")?`var(${d})`:d,v=r==="default"?s:`${r}-${s}`,O=r==="default"?`h-${s}`:`${r}-h-${s}`;if(m){let W=m.split(" ").map(R=>`${R}: ${u};`).join(" ");i+=`
|
2
|
+
:host([${v}="${c}"])${h}{
|
3
|
+
${W}
|
4
4
|
}
|
5
|
-
:host([${
|
6
|
-
${
|
5
|
+
:host([${O}="${c}"]:hover)${h}{
|
6
|
+
${W}
|
7
7
|
}
|
8
|
-
`}else
|
9
|
-
:host([${
|
10
|
-
${
|
8
|
+
`}else i+=`
|
9
|
+
:host([${v}="${c}"])${h}{
|
10
|
+
${d}
|
11
11
|
}
|
12
|
-
:host([${
|
13
|
-
${
|
12
|
+
:host([${O}="${c}"]:hover)${h}{
|
13
|
+
${d}
|
14
14
|
}
|
15
|
-
`}}
|
16
|
-
`);let
|
17
|
-
`);t
|
18
|
-
${
|
15
|
+
`}}r!=="default"&&(i+="}")}return i};function q(e){if(e===null||e.includes("/"))return!1;let t=String(e);return/[0-9]$/.test(t)}var F=e=>/%$/.test(e),g=e=>{if(e!==void 0)return F(e)?e:q(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 E(e,t=":host"){let i="";for(let[r,a]of Object.entries(T)){r!=="default"&&(i+=`${a} {
|
16
|
+
`);let s="";for(let[l,h]of Object.entries(e[r]))h!=null&&(s+=`${l}: ${h};
|
17
|
+
`);i+=`${t} {
|
18
|
+
${s.trim()}
|
19
19
|
}
|
20
|
-
`,r!=="default"&&(
|
21
|
-
`)}return
|
20
|
+
`,r!=="default"&&(i+=`}
|
21
|
+
`)}return i}var b=n`
|
22
22
|
:host([flex="0"]) {
|
23
23
|
flex: 0;
|
24
24
|
}
|
@@ -58,7 +58,7 @@ var rettangoli=(()=>{var{isArray:it}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
|
|
58
58
|
:host([flex="12"]) {
|
59
59
|
flex: 12;
|
60
60
|
}
|
61
|
-
`;var
|
61
|
+
`;var J={mt:o,mr:o,mb:o,ml:o,m:o,mh:o,mv:o,s:{sm:`
|
62
62
|
height: 28px;
|
63
63
|
padding-left: 12px;
|
64
64
|
padding-right: 12px;
|
@@ -104,141 +104,139 @@ var rettangoli=(()=>{var{isArray:it}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
|
|
104
104
|
`,lk:`
|
105
105
|
background-color: transparent;
|
106
106
|
color: var(--foreground);
|
107
|
-
`}},
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
107
|
+
`}},X={mt:"button",mr:"button",mb:"button",ml:"button",m:"button",mh:"button",mv:"button",s:"button",v:"button"},B=p(J,X);var y=n`
|
108
|
+
a, a:link, a:visited, a:hover, a:active {
|
109
|
+
color: inherit;
|
110
|
+
text-decoration: none;
|
111
|
+
background: none;
|
112
|
+
border: none;
|
113
|
+
padding: 0;
|
114
|
+
margin: 0;
|
115
|
+
font: inherit;
|
116
|
+
}
|
117
|
+
`;var A=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(n`
|
118
|
+
:host {
|
119
|
+
display: contents;
|
120
|
+
}
|
121
|
+
slot {
|
122
|
+
display: contents;
|
123
|
+
}
|
114
124
|
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
125
|
+
button {
|
126
|
+
display: flex;
|
127
|
+
flex-direction: row;
|
128
|
+
align-items: center;
|
129
|
+
justify-content: center;
|
130
|
+
gap: var(--spacing-sm);
|
131
|
+
border-width: 0px;
|
132
|
+
border-style: solid;
|
133
|
+
border-color: var(--border);
|
134
|
+
padding: 0px;
|
135
|
+
height: 32px;
|
136
|
+
padding-left: 16px;
|
137
|
+
padding-right: 16px;
|
138
|
+
border-radius: 4px;
|
129
139
|
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
140
|
+
font-size: var(--sm-font-size);
|
141
|
+
font-weight: var(--sm-font-weight);
|
142
|
+
line-height: var(--sm-line-height);
|
143
|
+
letter-spacing: var(--sm-letter-spacing);
|
134
144
|
|
135
|
-
|
136
|
-
|
137
|
-
|
145
|
+
background-color: var(--primary);
|
146
|
+
color: var(--primary-foreground);
|
147
|
+
}
|
138
148
|
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
149
|
+
button:hover {
|
150
|
+
cursor: pointer;
|
151
|
+
background-color: color-mix(
|
152
|
+
in srgb,
|
153
|
+
var(--primary) 85%,
|
154
|
+
white 15%
|
155
|
+
);
|
156
|
+
}
|
147
157
|
|
148
|
-
|
149
|
-
|
150
|
-
|
158
|
+
button:disabled {
|
159
|
+
cursor: not-allowed;
|
160
|
+
}
|
151
161
|
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
162
|
+
button:active {
|
163
|
+
cursor: pointer;
|
164
|
+
background-color: color-mix(
|
165
|
+
in srgb,
|
166
|
+
var(--primary) 80%,
|
167
|
+
white 20%
|
168
|
+
);
|
169
|
+
}
|
160
170
|
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
171
|
+
:host([v="pr"]) button:hover {
|
172
|
+
background-color: color-mix(
|
173
|
+
in srgb,
|
174
|
+
var(--primary) 85%,
|
175
|
+
white 15%
|
176
|
+
);
|
177
|
+
}
|
168
178
|
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
179
|
+
:host([v="pr"]) button:active {
|
180
|
+
background-color: color-mix(
|
181
|
+
in srgb,
|
182
|
+
var(--primary) 80%,
|
183
|
+
white 20%
|
184
|
+
);
|
185
|
+
}
|
176
186
|
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
187
|
+
:host([v="se"]) button:hover {
|
188
|
+
background-color: color-mix(
|
189
|
+
in srgb,
|
190
|
+
var(--secondary) 85%,
|
191
|
+
white 15%
|
192
|
+
);
|
193
|
+
}
|
184
194
|
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
195
|
+
:host([v="se"]) button:active {
|
196
|
+
background-color: color-mix(
|
197
|
+
in srgb,
|
198
|
+
var(--secondary) 80%,
|
199
|
+
white 20%
|
200
|
+
);
|
201
|
+
}
|
192
202
|
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
203
|
+
:host([v="de"]) button:hover {
|
204
|
+
background-color: color-mix(
|
205
|
+
in srgb,
|
206
|
+
var(--destructive) 85%,
|
207
|
+
white 15%
|
208
|
+
);
|
209
|
+
}
|
200
210
|
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
211
|
+
:host([v="de"]) button:active {
|
212
|
+
background-color: color-mix(
|
213
|
+
in srgb,
|
214
|
+
var(--destructive) 80%,
|
215
|
+
white 20%
|
216
|
+
);
|
217
|
+
}
|
208
218
|
|
209
|
-
|
210
|
-
|
211
|
-
|
219
|
+
:host([v="ol"]) button:hover {
|
220
|
+
background-color: var(--accent);
|
221
|
+
}
|
212
222
|
|
213
|
-
|
214
|
-
|
215
|
-
|
223
|
+
:host([v="gh"]) button:hover {
|
224
|
+
background-color: var(--accent);
|
225
|
+
}
|
216
226
|
|
217
|
-
|
218
|
-
|
219
|
-
|
227
|
+
:host([v="lk"]) button:hover {
|
228
|
+
text-decoration: underline;
|
229
|
+
}
|
230
|
+
|
231
|
+
${y}
|
232
|
+
|
233
|
+
a {
|
234
|
+
display: contents;
|
235
|
+
}
|
220
236
|
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
<rtgl-svg svg="${o}" c="${s}" wh="${d}"></rtgl-svg>
|
225
|
-
`:t``};render=()=>{let o=this.hasAttribute("disabled");return this.getAttribute("href")?t`
|
226
|
-
<a
|
227
|
-
href=${this.getAttribute("href")}
|
228
|
-
target=${this.getAttribute("target")}
|
229
|
-
style="text-decoration: none; display: contents; color: inherit;"
|
230
|
-
>
|
231
|
-
<button disabled="${o}">
|
232
|
-
${this.renderIcon()}
|
233
|
-
<slot></slot>
|
234
|
-
</button>
|
235
|
-
</a>
|
236
|
-
`:t`
|
237
|
-
<button ref=${this._assingRef} disabled="${o}">
|
238
|
-
${this.renderIcon()}
|
239
|
-
<slot></slot>
|
240
|
-
</button>
|
241
|
-
`}}};var St=v`
|
237
|
+
${B}
|
238
|
+
${b}
|
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,i,r){this._updateButton()}_updateButton(){this.shadow.innerHTML="",this._updateIcon(),this._updateWidth(),this.hasAttribute("disabled")?this._buttonElement.setAttribute("disabled",""):this._buttonElement.removeAttribute("disabled");let i=this.getAttribute("href");if(i){let r=document.createElement("a");r.setAttribute("href",i);let a=this.getAttribute("target");a&&r.setAttribute("target",a),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 i={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},a=i[this.getAttribute("v")]||"pr-fg",s=r[this.getAttribute("t")]||18;this._iconElement=document.createElement("rtgl-svg"),this._iconElement.setAttribute("svg",t),this._iconElement.setAttribute("c",a),this._iconElement.setAttribute("wh",s.toString()),this._buttonElement.insertBefore(this._iconElement,this._slotElement)}}_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="")}},I=({render:e,html:t})=>A;var H=n`
|
242
240
|
|
243
241
|
:host([d="h"]) {
|
244
242
|
flex-direction: row;
|
@@ -309,7 +307,7 @@ var rettangoli=(()=>{var{isArray:it}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
|
|
309
307
|
justify-content: center;
|
310
308
|
}
|
311
309
|
}
|
312
|
-
`;var
|
310
|
+
`;var Y={cur:{p:"pointer",m:"move",grab:"grab",grabbing:"grabbing"}},f=p(Y);var L=n`
|
313
311
|
:host([sh]:not([sv])) {
|
314
312
|
overflow-x: scroll;
|
315
313
|
flex-wrap: nowrap;
|
@@ -327,12 +325,14 @@ var rettangoli=(()=>{var{isArray:it}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
|
|
327
325
|
flex-wrap: nowrap;
|
328
326
|
}
|
329
327
|
|
330
|
-
`;var
|
328
|
+
`;var w={xs:"--border-width-xs",sm:"--border-width-sm",md:"--border-width-md",lg:"--border-width-lg",xl:"--border-width-xl"},Z={bgc:{pr:`
|
331
329
|
background-color: var(--primary);
|
332
330
|
`,se:`
|
333
331
|
background-color: var(--secondary);
|
334
332
|
`,de:`
|
335
333
|
background-color: var(--destructive);
|
334
|
+
`,fg:`
|
335
|
+
background-color: var(--foreground);
|
336
336
|
`,bg:`
|
337
337
|
background-color: var(--background);
|
338
338
|
`,mu:`
|
@@ -365,37 +365,47 @@ var rettangoli=(()=>{var{isArray:it}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
|
|
365
365
|
left: 0;
|
366
366
|
top: 0;
|
367
367
|
height: 100%;
|
368
|
-
`},shadow:{
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
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:w,bwt:w,bwr:w,bwb:w,bwl:w,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(Z);var tt={mt:o,mr:o,mb:o,ml:o,m:o,mh:o,mv:o},x=p(tt);var C=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(n`
|
369
|
+
slot {
|
370
|
+
display: contents;
|
371
|
+
}
|
372
|
+
:host {
|
373
|
+
display: flex;
|
374
|
+
flex-direction: column;
|
375
|
+
align-self: auto;
|
376
|
+
align-content: flex-start;
|
377
|
+
border-style: solid;
|
378
|
+
border-width: 0;
|
379
|
+
box-sizing: border-box;
|
380
|
+
border-color: var(--border);
|
381
|
+
}
|
382
382
|
|
383
|
-
|
384
|
-
|
385
|
-
|
383
|
+
:host([fw="w"]) {
|
384
|
+
flex-wrap: wrap;
|
385
|
+
}
|
386
386
|
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
387
|
+
${b}
|
388
|
+
${L}
|
389
|
+
${H}
|
390
|
+
${x}
|
391
|
+
${f}
|
392
|
+
${k}
|
393
|
+
${y}
|
394
|
+
|
395
|
+
:host([href]) {
|
396
|
+
cursor: pointer;
|
397
|
+
position: relative;
|
398
|
+
}
|
399
|
+
|
400
|
+
:host([href]) a {
|
401
|
+
position: absolute;
|
402
|
+
top: 0;
|
403
|
+
left: 0;
|
404
|
+
right: 0;
|
405
|
+
bottom: 0;
|
406
|
+
z-index: 1;
|
407
|
+
}
|
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",..._([...S,"wh","w","h","hidden","sh","sv"])]}_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)}attributeChangedCallback(t,i,r){if(t==="href"||t==="target"){this._updateDOM();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(s=>{let l=v=>`${s==="default"?"":`${s}-`}${v}`,h=this.getAttribute(l("wh")),c=g(h===null?this.getAttribute(l("w")):h),d=g(h===null?this.getAttribute(l("h")):h),m=this.getAttribute(l("op")),u=this.getAttribute(l("z"));u!==null&&(this._styles[s]["z-index"]=u),m!==null&&(this._styles[s].opacity=m),c==="f"?this._styles[s].width="var(--width-stretch)":c!==void 0&&(this._styles[s].width=c,this._styles[s]["min-width"]=c,this._styles[s]["max-width"]=c),d==="f"?this._styles[s].height="100%":d!==void 0&&(this._styles[s].height=d,this._styles[s]["min-height"]=d,this._styles[s]["max-height"]=d),this.hasAttribute(l("hidden"))&&(this._styles[s].display="none !important"),this.hasAttribute(l("visible"))&&(this._styles[s].display="flex !important")});let a=E(this._styles);a!==this._lastStyleString&&(this._styleElement.textContent=a,this._lastStyleString=a)}},V=({render:e,html:t})=>C;var et={ta:{s:"start",c:"center",e:"end",j:"justify"},s:{h1:`
|
399
409
|
font-size: var(--h1-font-size);
|
400
410
|
font-weight: var(--h1-font-weight);
|
401
411
|
line-height: var(--h1-line-height);
|
@@ -435,76 +445,92 @@ var rettangoli=(()=>{var{isArray:it}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
|
|
435
445
|
font-weight: var(--xs-font-weight);
|
436
446
|
line-height: var(--xs-line-height);
|
437
447
|
letter-spacing: var(--xs-letter-spacing);
|
438
|
-
`}},
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
445
|
-
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
448
|
+
`}},N=p(et);var it={c:{fg:"--foreground",de:"--destructive","pr-fg":"--primary-foreground","se-fg":"--secondary-foreground","mu-fg":"--muted-foreground","ac-fg":"--accent-foreground"}},$=p(it);var z=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(n`
|
449
|
+
:host {
|
450
|
+
display: block;
|
451
|
+
font-size: var(--md-font-size);
|
452
|
+
font-weight: var(--md-font-weight);
|
453
|
+
line-height: var(--md-line-height);
|
454
|
+
letter-spacing: var(--md-letter-spacing);
|
455
|
+
}
|
456
|
+
slot {
|
457
|
+
display: contents;
|
458
|
+
}
|
459
|
+
:host ::slotted(a) {
|
460
|
+
text-decoration: var(--anchor-text-decoration);
|
461
|
+
color: var(--anchor-color);
|
462
|
+
}
|
463
|
+
:host ::slotted(a:hover) {
|
464
|
+
text-decoration: var(--anchor-text-decoration-hover);
|
465
|
+
color: var(--anchor-color-hover);
|
466
|
+
}
|
467
|
+
:host([href]) {
|
468
|
+
cursor: pointer;
|
469
|
+
position: relative;
|
470
|
+
}
|
471
|
+
:host([href]) a {
|
472
|
+
position: absolute;
|
473
|
+
top: 0;
|
474
|
+
left: 0;
|
475
|
+
right: 0;
|
476
|
+
bottom: 0;
|
477
|
+
z-index: 1;
|
478
|
+
}
|
479
|
+
${N}
|
480
|
+
${$}
|
481
|
+
${x}
|
482
|
+
${f}
|
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,i,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"),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)}},U=({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(n`
|
484
|
+
:host {
|
485
|
+
border-style: solid;
|
486
|
+
box-sizing: border-box;
|
487
|
+
overflow: hidden;
|
488
|
+
border-width: 0;
|
489
|
+
}
|
490
|
+
slot {
|
491
|
+
display: contents;
|
492
|
+
}
|
493
|
+
:host([of="con"]) img {
|
494
|
+
object-fit: contain;
|
495
|
+
}
|
496
|
+
:host([of="cov"]) img {
|
497
|
+
object-fit: cover;
|
498
|
+
}
|
499
|
+
:host([of="none"]) img {
|
500
|
+
object-fit: none;
|
501
|
+
}
|
502
|
+
img {
|
503
|
+
height: 100%;
|
504
|
+
width: 100%;
|
505
|
+
}
|
506
|
+
|
507
|
+
${y}
|
508
|
+
|
509
|
+
a {
|
510
|
+
display: block;
|
511
|
+
height: 100%;
|
512
|
+
width: 100%;
|
513
|
+
}
|
514
|
+
|
515
|
+
:host([href]) {
|
516
|
+
cursor: pointer;
|
517
|
+
}
|
518
|
+
|
519
|
+
${k}
|
520
|
+
${x}
|
521
|
+
${f}
|
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 _([...S,"key","src","href","target","wh","w","h","hidden","height","width"])}_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,r){if(t==="href"||t==="target"){this._updateDOM();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(s=>{let l=v=>`${s==="default"?"":`${s}-`}${v}`,h=this.getAttribute(l("wh")),c=g(h===null?this.getAttribute(l("w")):h),d=g(h===null?this.getAttribute(l("h")):h),m=this.getAttribute(l("o")),u=this.getAttribute(l("z"));u!==null&&(this._styles[s]["z-index"]=u),m!==null&&(this._styles[s].opacity=m),c==="f"?this._styles[s].width="var(--width-stretch)":c!==void 0&&(this._styles[s].width=c,this._styles[s]["min-width"]=c,this._styles[s]["max-width"]=c),d==="f"?this._styles[s].height="100%":d!==void 0&&(this._styles[s].height=d,this._styles[s]["min-height"]=d,this._styles[s]["max-height"]=d),this.hasAttribute(l("hidden"))&&(this._styles[s].display="none !important"),this.hasAttribute(l("visible"))&&(this._styles[s].display="block !important")});let a=E(this._styles);a!==this._lastStyleString&&(this._styleElement.textContent=a,this._lastStyleString=a),this._updateImageAttributes()}_updateImageAttributes(){let t=this.getAttribute("src"),i=this.getAttribute("width"),r=this.getAttribute("height");t!==null&&this._imgElement.setAttribute("src",t),i!==null&&this._imgElement.setAttribute("width",i),r!==null&&this._imgElement.setAttribute("height",r)}connectedCallback(){this._updateImageAttributes()}},P=({render:e,html:t})=>M;var K=n`
|
497
523
|
:host([pt="xs"]) svg {
|
498
524
|
padding-top: var(--spacing-xs);
|
499
525
|
}
|
500
|
-
:host([pt="
|
501
|
-
padding-top: var(--spacing-
|
526
|
+
:host([pt="sm"]) svg {
|
527
|
+
padding-top: var(--spacing-sm);
|
502
528
|
}
|
503
|
-
:host([pt="
|
504
|
-
padding-top: var(--spacing-
|
529
|
+
:host([pt="md"]) svg {
|
530
|
+
padding-top: var(--spacing-md);
|
505
531
|
}
|
506
|
-
:host([pt="
|
507
|
-
padding-top: var(--spacing-
|
532
|
+
:host([pt="lg"]) svg {
|
533
|
+
padding-top: var(--spacing-lg);
|
508
534
|
}
|
509
535
|
:host([pt="xl"]) svg {
|
510
536
|
padding-top: var(--spacing-xl);
|
@@ -512,14 +538,14 @@ ${S}
|
|
512
538
|
:host([pr="xs"]) svg {
|
513
539
|
padding-right: var(--spacing-xs);
|
514
540
|
}
|
515
|
-
:host([pr="
|
516
|
-
padding-right: var(--spacing-
|
541
|
+
:host([pr="sm"]) svg {
|
542
|
+
padding-right: var(--spacing-sm);
|
517
543
|
}
|
518
|
-
:host([pr="
|
519
|
-
padding-right: var(--spacing-
|
544
|
+
:host([pr="md"]) svg {
|
545
|
+
padding-right: var(--spacing-md);
|
520
546
|
}
|
521
|
-
:host([pr="
|
522
|
-
padding-right: var(--spacing-
|
547
|
+
:host([pr="lg"]) svg {
|
548
|
+
padding-right: var(--spacing-lg);
|
523
549
|
}
|
524
550
|
:host([pr="xl"]) svg {
|
525
551
|
padding-right: var(--spacing-xl);
|
@@ -527,14 +553,14 @@ ${S}
|
|
527
553
|
:host([pb="xs"]) svg {
|
528
554
|
padding-bottom: var(--spacing-xs);
|
529
555
|
}
|
530
|
-
:host([pb="
|
531
|
-
padding-bottom: var(--spacing-
|
556
|
+
:host([pb="sm"]) svg {
|
557
|
+
padding-bottom: var(--spacing-sm);
|
532
558
|
}
|
533
|
-
:host([pb="
|
534
|
-
padding-bottom: var(--spacing-
|
559
|
+
:host([pb="md"]) svg {
|
560
|
+
padding-bottom: var(--spacing-md);
|
535
561
|
}
|
536
|
-
:host([pb="
|
537
|
-
padding-bottom: var(--spacing-
|
562
|
+
:host([pb="lg"]) svg {
|
563
|
+
padding-bottom: var(--spacing-lg);
|
538
564
|
}
|
539
565
|
:host([pb="xl"]) svg {
|
540
566
|
padding-bottom: var(--spacing-xl);
|
@@ -542,14 +568,14 @@ ${S}
|
|
542
568
|
:host([pl="xs"]) svg {
|
543
569
|
padding-left: var(--spacing-xs);
|
544
570
|
}
|
545
|
-
:host([pl="
|
546
|
-
padding-left: var(--spacing-
|
571
|
+
:host([pl="sm"]) svg {
|
572
|
+
padding-left: var(--spacing-sm);
|
547
573
|
}
|
548
|
-
:host([pl="
|
549
|
-
padding-left: var(--spacing-
|
574
|
+
:host([pl="md"]) svg {
|
575
|
+
padding-left: var(--spacing-md);
|
550
576
|
}
|
551
|
-
:host([pl="
|
552
|
-
padding-left: var(--spacing-
|
577
|
+
:host([pl="lg"]) svg {
|
578
|
+
padding-left: var(--spacing-lg);
|
553
579
|
}
|
554
580
|
:host([pl="xl"]) svg {
|
555
581
|
padding-left: var(--spacing-xl);
|
@@ -557,14 +583,14 @@ ${S}
|
|
557
583
|
:host([p="xs"]) svg {
|
558
584
|
padding: var(--spacing-xs);
|
559
585
|
}
|
560
|
-
:host([p="
|
561
|
-
padding: var(--spacing-
|
586
|
+
:host([p="sm"]) svg {
|
587
|
+
padding: var(--spacing-sm);
|
562
588
|
}
|
563
|
-
:host([p="
|
564
|
-
padding: var(--spacing-
|
589
|
+
:host([p="md"]) svg {
|
590
|
+
padding: var(--spacing-md);
|
565
591
|
}
|
566
|
-
:host([p="
|
567
|
-
padding: var(--spacing-
|
592
|
+
:host([p="lg"]) svg {
|
593
|
+
padding: var(--spacing-lg);
|
568
594
|
}
|
569
595
|
:host([p="xl"]) svg {
|
570
596
|
padding: var(--spacing-xl);
|
@@ -573,17 +599,17 @@ ${S}
|
|
573
599
|
padding-left: var(--spacing-xs);
|
574
600
|
padding-right: var(--spacing-xs);
|
575
601
|
}
|
576
|
-
:host([ph="
|
577
|
-
padding-left: var(--spacing-
|
578
|
-
padding-right: var(--spacing-
|
602
|
+
:host([ph="sm"]) svg {
|
603
|
+
padding-left: var(--spacing-sm);
|
604
|
+
padding-right: var(--spacing-sm);
|
579
605
|
}
|
580
|
-
:host([ph="
|
581
|
-
padding-left: var(--spacing-
|
582
|
-
padding-right: var(--spacing-
|
606
|
+
:host([ph="md"]) svg {
|
607
|
+
padding-left: var(--spacing-md);
|
608
|
+
padding-right: var(--spacing-md);
|
583
609
|
}
|
584
|
-
:host([ph="
|
585
|
-
padding-left: var(--spacing-
|
586
|
-
padding-right: var(--spacing-
|
610
|
+
:host([ph="lg"]) svg {
|
611
|
+
padding-left: var(--spacing-lg);
|
612
|
+
padding-right: var(--spacing-lg);
|
587
613
|
}
|
588
614
|
:host([ph="xl"]) svg {
|
589
615
|
padding-left: var(--spacing-xl);
|
@@ -593,29 +619,28 @@ ${S}
|
|
593
619
|
padding-top: var(--spacing-xs);
|
594
620
|
padding-bottom: var(--spacing-xs);
|
595
621
|
}
|
596
|
-
:host([pv="
|
597
|
-
padding-top: var(--spacing-
|
598
|
-
padding-bottom: var(--spacing-
|
622
|
+
:host([pv="sm"]) svg {
|
623
|
+
padding-top: var(--spacing-sm);
|
624
|
+
padding-bottom: var(--spacing-sm);
|
599
625
|
}
|
600
|
-
:host([pv="
|
601
|
-
padding-top: var(--spacing-
|
602
|
-
padding-bottom: var(--spacing-
|
626
|
+
:host([pv="md"]) svg {
|
627
|
+
padding-top: var(--spacing-md);
|
628
|
+
padding-bottom: var(--spacing-md);
|
603
629
|
}
|
604
|
-
:host([pv="
|
605
|
-
padding-top: var(--spacing-
|
606
|
-
padding-bottom: var(--spacing-
|
630
|
+
:host([pv="lg"]) svg {
|
631
|
+
padding-top: var(--spacing-lg);
|
632
|
+
padding-bottom: var(--spacing-lg);
|
607
633
|
}
|
608
634
|
:host([pv="xl"]) svg {
|
609
635
|
padding-top: var(--spacing-xl);
|
610
636
|
padding-bottom: var(--spacing-xl);
|
611
637
|
}
|
612
|
-
`;var
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
${
|
619
|
-
${
|
620
|
-
|
621
|
-
/*! (c) Andrea Giammarchi - MIT */
|
638
|
+
`;var j=class e extends HTMLElement{static styleSheet=null;static _icons={};static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(n`
|
639
|
+
:host {
|
640
|
+
color: var(--foreground);
|
641
|
+
}
|
642
|
+
${$}
|
643
|
+
${K}
|
644
|
+
${b}
|
645
|
+
${f}
|
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,i){e._icons[t]=i}connectedCallback(){this._updateSizing(),this._render()}attributeChangedCallback(t,i,r){this._updateSizing(),this._render()}_updateSizing(){let t=this.getAttribute("wh"),i=g(t===null?this.getAttribute("w"):t),r=g(t===null?this.getAttribute("h"):t);i&&(this.style.width=i),r&&(this.style.height=r)}_render(){try{let t=this.getAttribute("svg"),i=e._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=""}},Q=({render:e,html:t})=>j;customElements.define("rtgl-button",I({}));customElements.define("rtgl-view",V({}));customElements.define("rtgl-text",U({}));customElements.define("rtgl-image",P({}));customElements.define("rtgl-svg",Q({}));})();
|