rettangoli-ui 0.0.8-rc2 → 0.0.9-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-esm.min.js +648 -0
- package/dist/rettangoli-iife-layout.min.js +617 -0
- package/dist/rettangoli-iife-ui.min.js +649 -0
- package/package.json +2 -2
- package/dist/rettangoli-ui.min.js +0 -615
@@ -1,615 +0,0 @@
|
|
1
|
-
var rettangoli=(()=>{var{isArray:ht}=Array,{getPrototypeOf:Rt,getOwnPropertyDescriptor:Ht}=Object,$=[],ct=()=>document.createRange(),E=(e,t,o)=>(e.set(t,o),o),Lt=(e,t)=>t.reduceRight(Vt,e),Vt=(e,t)=>e.childNodes[t],{setPrototypeOf:Bt}=Object,_,dt=(e,t,o)=>(_||(_=ct()),o?_.setStartAfter(e):_.setStartBefore(e),_.setEndAfter(t),_.deleteContents(),e),J=({firstChild:e,lastChild:t},o)=>dt(e,t,o),pt=!1,F=(e,t)=>pt&&e.nodeType===11?1/t<0?t?J(e,!0):e.lastChild:t?e.valueOf():e.firstChild:e,nt=e=>document.createComment(e),K=class extends(t=>{function o(s){return Bt(s,new.target.prototype)}return o.prototype=t.prototype,o})(DocumentFragment){#e=nt("<>");#o=nt("</>");#t=$;constructor(t){super(t),this.replaceChildren(this.#e,...t.childNodes,this.#o),pt=!0}get firstChild(){return this.#e}get lastChild(){return this.#o}get parentNode(){return this.#e.parentNode}remove(){J(this,!1)}replaceWith(t){J(this,!0).replaceWith(t)}valueOf(){let{parentNode:t}=this;if(t===this)this.#t===$&&(this.#t=[...this.childNodes]);else{if(t){let{firstChild:o,lastChild:s}=this;for(this.#t=[o];o!==s;)this.#t.push(o=o.nextSibling)}this.replaceChildren(...this.#t)}return this}},gt=(e,t,o)=>e.setAttribute(t,o),V=(e,t)=>e.removeAttribute(t),R,Dt=(e,t,o)=>{o=o.slice(1),R||(R=new WeakMap);let s=R.get(e)||E(R,e,{}),r=s[o];return r&&r[0]&&e.removeEventListener(o,...r),r=ht(t)?t:[t,!1],s[o]=r,r[0]&&e.addEventListener(o,...r),t},N=(e,t)=>{let{t:o,n:s}=e,r=!1;switch(typeof t){case"object":if(t!==null){(s||o).replaceWith(e.n=t.valueOf());break}case"undefined":r=!0;default:o.data=r?"":t,s&&(e.n=null,s.replaceWith(o))}return t},B=(e,t,o)=>e[o]=t,Pt=(e,t,o)=>B(e,t,o.slice(1)),X=(e,t,o)=>t==null?(V(e,o),t):B(e,t,o),ut=(e,t)=>(typeof t=="function"?t(e):t.current=e,t),Q=(e,t,o)=>(t==null?V(e,o):gt(e,o,t),t),Ut=(e,t,o)=>(e.toggleAttribute(o.slice(1),t),t),L=(e,t,o)=>{let{length:s}=t;if(e.data=`[${s}]`,s)return((r,n,a,i,p)=>{let u=a.length,h=n.length,d=u,l=0,c=0,f=null;for(;l<h||c<d;)if(h===l){let v=d<u?c?i(a[c-1],-0).nextSibling:i(a[d-c],0):p;for(;c<d;)r.insertBefore(i(a[c++],1),v)}else if(d===c)for(;l<h;)f&&f.has(n[l])||r.removeChild(i(n[l],-1)),l++;else if(n[l]===a[c])l++,c++;else if(n[h-1]===a[d-1])h--,d--;else if(n[l]===a[d-1]&&a[c]===n[h-1]){let v=i(n[--h],-1).nextSibling;r.insertBefore(i(a[c++],1),i(n[l++],-1).nextSibling),r.insertBefore(i(a[--d],1),v),n[h]=a[d]}else{if(!f){f=new Map;let v=c;for(;v<d;)f.set(a[v],v++)}if(f.has(n[l])){let v=f.get(n[l]);if(c<v&&v<d){let x=l,k=1;for(;++x<h&&x<d&&f.get(n[x])===v+k;)k++;if(k>v-c){let I=i(n[l],0);for(;c<v;)r.insertBefore(i(a[c++],1),I)}else r.replaceChild(i(a[c++],1),i(n[l++],-1))}else l++}else r.removeChild(i(n[l++],-1))}return a})(e.parentNode,o,t,F,e);switch(o.length){case 1:o[0].remove();case 0:break;default:dt(F(o[0],0),F(o.at(-1),-0),!1)}return $},It=new Map([["aria",(e,t)=>{for(let o in t){let s=t[o],r=o==="role"?o:`aria-${o}`;s==null?V(e,r):gt(e,r,s)}return t}],["class",(e,t)=>X(e,t,t==null?"class":"className")],["data",(e,t)=>{let{dataset:o}=e;for(let s in t)t[s]==null?delete o[s]:o[s]=t[s];return t}],["ref",ut],["style",(e,t)=>t==null?X(e,t,"style"):B(e.style,t,"cssText")]]),Ft=(e,t,o)=>{switch(t[0]){case".":return Pt;case"?":return Ut;case"@":return Dt;default:return o||"ownerSVGElement"in e?t==="ref"?ut:Q:It.get(t)||(t in e?t.startsWith("on")?B:((s,r)=>{let n;do n=Ht(s,r);while(!n&&(s=Rt(s)));return n})(e,t)?.set?X:Q:Q)}},Qt=(e,t)=>(e.textContent=t??"",t),z=(e,t,o)=>({a:e,b:t,c:o}),W=()=>z(null,null,$),ft=e=>(t,o)=>{let{a:s,b:r,c:n}=e(t,o),a=document.importNode(s,!0),i=$;if(r!==$){i=[];for(let l,c,f=0;f<r.length;f++){let{a:v,b:x,c:k}=r[f],I=v===c?l:l=Lt(a,c=v);i[f]=(p=x,u=I,h=k,d=x===L?[]:x===N?W():null,{v:$,u:p,t:u,n:h,c:d})}}var p,u,h,d;return((l,c)=>({b:l,c}))(n?a.firstChild:new K(a),i)},Gt=/^(?:plaintext|script|style|textarea|title|xmp)$/i,Zt=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,qt=/<([a-zA-Z0-9]+[a-zA-Z0-9:._-]*)([^>]*?)(\/?)>/g,Jt=/([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g,Kt=/[\x01\x02]/g,G,Z,H=document.createElement("template"),Xt=(e,t)=>{if(t)return G||(G=document.createElementNS("http://www.w3.org/2000/svg","svg"),Z=ct(),Z.selectNodeContents(G)),Z.createContextualFragment(e);H.innerHTML=e;let{content:o}=H;return H=H.cloneNode(!1),o},q=e=>{let t=[],o;for(;o=e.parentNode;)t.push(t.indexOf.call(o.childNodes,e)),e=o;return t},it=()=>document.createTextNode(""),Yt=(e,t,o)=>{let s=Xt(((p,u,h)=>{let d=0;return p.join("").trim().replace(qt,(l,c,f,v)=>`<${c}${f.replace(Jt,"=$2$1").trimEnd()}${v?h||Zt.test(c)?" /":`></${c}`:""}>`).replace(Kt,l=>l===""?`<!--${u+d++}-->`:u+d++)})(e,O,o),o),{length:r}=e,n=$;if(r>1){let p=[],u=document.createTreeWalker(s,129),h=0,d=`${O}${h++}`;for(n=[];h<r;){let l=u.nextNode();if(l.nodeType===8){if(l.data===d){let c=ht(t[h-1])?L:N;c===N&&p.push(l),n.push(z(q(l),c,null)),d=`${O}${h++}`}}else{let c;for(;l.hasAttribute(d);){c||(c=q(l));let f=l.getAttribute(d);n.push(z(c,Ft(l,f,o),f)),V(l,d),d=`${O}${h++}`}!o&&Gt.test(l.localName)&&l.textContent.trim()===`<!--${d}-->`&&(n.push(z(c||q(l),Qt,null)),d=`${O}${h++}`)}}for(h=0;h<p.length;h++)p[h].replaceWith(it())}let{childNodes:a}=s,{length:i}=a;return i<1?(i=1,s.appendChild(it())):i===1&&r!==1&&a[0].nodeType!==1&&(i=0),E(vt,e,z(s,n,i===1))},vt=new WeakMap,O="is\xB5",bt=e=>(t,o)=>vt.get(t)||Yt(t,o,e),te=ft(bt(!1)),ee=ft(bt(!0)),Y=(e,{s:t,t:o,v:s})=>{if(e.a!==o){let{b:r,c:n}=(t?ee:te)(o,s);e.a=o,e.b=r,e.c=n}for(let{c:r}=e,n=0;n<r.length;n++){let a=s[n],i=r[n];switch(i.u){case L:i.v=L(i.t,oe(i.c,a),i.v);break;case N:let p=a instanceof A?Y(i.c||(i.c=W()),a):(i.c=null,a);p!==i.v&&(i.v=N(i,p));break;default:a!==i.v&&(i.v=i.u(i.t,a,i.n,i.v))}}return e.b},oe=(e,t)=>{let o=0,{length:s}=t;for(s<e.length&&e.splice(s);o<s;o++){let r=t[o];r instanceof A?t[o]=Y(e[o]||(e[o]=W()),r):e[o]=null}return t},A=class{constructor(t,o,s){this.s=t,this.t=o,this.v=s}toDOM(t=W()){return Y(t,this)}};var mt=e=>(t,...o)=>new A(e,t,o),S=mt(!1),me=mt(!0),at=new WeakMap,y=(e,t)=>((o,s,r)=>{let n=at.get(o)||E(at,o,W()),{b:a}=n,i=typeof s=="function"?s():s,p=i instanceof A?i.toDOM(n):i;return a!==p&&o.replaceChildren((n.b=p).valueOf()),o})(e,t),lt=new WeakMap,yt=e=>(t,o)=>{let s=lt.get(t)||E(lt,t,new Map);return s.get(o)||E(s,o,function(r,...n){return new A(e,r,n).toDOM(this)}.bind(W()))},ye=yt(!1),we=yt(!0);function b(e,...t){let o="";return e.forEach((s,r)=>{o+=s+(t[r]||"")}),o}var wt={default:void 0,s:"@media only screen and (max-width: 640px)"},w=(e,t,o={})=>{let s="";for(let[r,n]of Object.entries(wt)){r!=="default"&&(s+=`${n} {`);for(let[a,i]of Object.entries(t)){let p=o[a]?` ${o[a]} `:" ";for(let[u,h]of Object.entries(i)){let d=e[a],l=h.startsWith("--")?`var(${h})`:h,c=r==="default"?a:`${r}-${a}`,f=r==="default"?`h-${a}`:`${r}-h-${a}`;if(d){let x=d.split(" ").map(k=>`${k}: ${l};`).join(" ");s+=`
|
2
|
-
:host([${c}="${u}"])${p}{
|
3
|
-
${x}
|
4
|
-
}
|
5
|
-
:host([${f}="${u}"]:hover)${p}{
|
6
|
-
${x}
|
7
|
-
}
|
8
|
-
`}else s+=`
|
9
|
-
:host([${c}="${u}"])${p}{
|
10
|
-
${h}
|
11
|
-
}
|
12
|
-
:host([${f}="${u}"]:hover)${p}{
|
13
|
-
${h}
|
14
|
-
}
|
15
|
-
`}}r!=="default"&&(s+="}")}return s};function re(e){if(e===null||e.includes("/"))return!1;let t=String(e);return/[0-9]$/.test(t)}var se=e=>/%$/.test(e),m=e=>{if(e!==void 0)return se(e)?e:re(e)?`${e}px`:e},g={xs:"--spacing-xs",s:"--spacing-s",m:"--spacing-m",l:"--spacing-l",xl:"--spacing-xl"};function D(e){let t="";for(let[o,s]of Object.entries(wt)){o!=="default"&&(t+=`${s} {
|
16
|
-
`);let r="";for(let[n,a]of Object.entries(e[o]))a!=null&&(r+=`${n}: ${a};
|
17
|
-
`);t+=`:host {
|
18
|
-
${r.trim()}
|
19
|
-
}
|
20
|
-
`,o!=="default"&&(t+=`}
|
21
|
-
`)}return t}var j=b`
|
22
|
-
:host([flex="0"]) {
|
23
|
-
flex: 0;
|
24
|
-
}
|
25
|
-
:host([flex="1"]) {
|
26
|
-
flex: 1;
|
27
|
-
}
|
28
|
-
:host([flex="2"]) {
|
29
|
-
flex: 2;
|
30
|
-
}
|
31
|
-
:host([flex="3"]) {
|
32
|
-
flex: 3;
|
33
|
-
}
|
34
|
-
:host([flex="4"]) {
|
35
|
-
flex: 4;
|
36
|
-
}
|
37
|
-
:host([flex="5"]) {
|
38
|
-
flex: 5;
|
39
|
-
}
|
40
|
-
:host([flex="6"]) {
|
41
|
-
flex: 6;
|
42
|
-
}
|
43
|
-
:host([flex="7"]) {
|
44
|
-
flex: 7;
|
45
|
-
}
|
46
|
-
:host([flex="8"]) {
|
47
|
-
flex: 8;
|
48
|
-
}
|
49
|
-
:host([flex="9"]) {
|
50
|
-
flex: 9;
|
51
|
-
}
|
52
|
-
:host([flex="10"]) {
|
53
|
-
flex: 10;
|
54
|
-
}
|
55
|
-
:host([flex="11"]) {
|
56
|
-
flex: 11;
|
57
|
-
}
|
58
|
-
:host([flex="12"]) {
|
59
|
-
flex: 12;
|
60
|
-
}
|
61
|
-
`;var ne={mt:"margin-top",mr:"margin-right",mb:"margin-bottom",ml:"margin-left",m:"margin",mh:"margin-left margin-right",mv:"margin-top margin-bottom"},ie={mt:g,mr:g,mb:g,ml:g,m:g,mh:g,mv:g},ae={mt:"button",mr:"button",mb:"button",ml:"button",m:"button",mh:"button",mv:"button"},xt=w(ne,ie,ae);var St=new CSSStyleSheet;St.replaceSync(b`
|
62
|
-
:host {
|
63
|
-
display: contents;
|
64
|
-
}
|
65
|
-
slot {
|
66
|
-
display: contents;
|
67
|
-
}
|
68
|
-
|
69
|
-
button {
|
70
|
-
border-style: solid;
|
71
|
-
padding: 0px;
|
72
|
-
font-size: var(--typography-body-s-font-size);
|
73
|
-
font-weight: var(--typography-body-s-font-weight);
|
74
|
-
line-height: var(--typography-body-s-line-height);
|
75
|
-
letter-spacing: var(--typography-body-s-letter-spacing);
|
76
|
-
}
|
77
|
-
|
78
|
-
button:hover {
|
79
|
-
cursor: pointer;
|
80
|
-
}
|
81
|
-
|
82
|
-
:host([t="ps"]) button,
|
83
|
-
:host([t="p"]) button,
|
84
|
-
:host([t="pl"]) button {
|
85
|
-
color: var(--color-on-primary);
|
86
|
-
border-color: var(--color-primary);
|
87
|
-
background-color: var(--color-primary);
|
88
|
-
}
|
89
|
-
|
90
|
-
:host([t="ps"]) button:hover,
|
91
|
-
:host([t="p"]) button:hover,
|
92
|
-
:host([t="pl"]) button:hover {
|
93
|
-
border-color: var(--color-primary-hover);
|
94
|
-
background-color: var(--color-primary-hover);
|
95
|
-
}
|
96
|
-
|
97
|
-
:host([t="ps"]) button:active,
|
98
|
-
:host([t="p"]) button:active,
|
99
|
-
:host([t="pl"]) button:active {
|
100
|
-
border-color: var(--color-primary-active);
|
101
|
-
background-color: var(--color-primary-active);
|
102
|
-
}
|
103
|
-
|
104
|
-
:host([t="ss"]) button,
|
105
|
-
:host([t="s"]) button,
|
106
|
-
:host([t="sl"]) button {
|
107
|
-
color: var(--color-on-secondary);
|
108
|
-
border-color: var(--color-secondary);
|
109
|
-
background-color: var(--color-secondary);
|
110
|
-
}
|
111
|
-
|
112
|
-
:host([t="ss"]) button:hover,
|
113
|
-
:host([t="s"]) button:hover,
|
114
|
-
:host([t="sl"]) button:hover {
|
115
|
-
background-color: var(--color-secondary-hover);
|
116
|
-
border-color: var(--color-secondary-hover);
|
117
|
-
}
|
118
|
-
|
119
|
-
:host([t="ss"]) button:active,
|
120
|
-
:host([t="s"]) button:active,
|
121
|
-
:host([t="sl"]) button:active {
|
122
|
-
background-color: var(--color-secondary-active);
|
123
|
-
border-color: var(--color-secondary-active);
|
124
|
-
}
|
125
|
-
|
126
|
-
:host([t="es"]) button,
|
127
|
-
:host([t="e"]) button,
|
128
|
-
:host([t="el"]) button {
|
129
|
-
color: var(--color-on-error);
|
130
|
-
border-color: var(--color-error);
|
131
|
-
background-color: var(--color-error);
|
132
|
-
}
|
133
|
-
|
134
|
-
:host([t="es"]) button:hover,
|
135
|
-
:host([t="e"]) button:hover,
|
136
|
-
:host([t="el"]) button:hover {
|
137
|
-
background-color: var(--color-error-hover);
|
138
|
-
border-color: var(--color-error-hover);
|
139
|
-
}
|
140
|
-
|
141
|
-
:host([t="es"]) button:active,
|
142
|
-
:host([t="e"]) button:active,
|
143
|
-
:host([t="el"]) button:active {
|
144
|
-
background-color: var(--color-error-active);
|
145
|
-
border-color: var(--color-error-active);
|
146
|
-
}
|
147
|
-
|
148
|
-
:host([t="ns"]) button,
|
149
|
-
:host([t="n"]) button,
|
150
|
-
:host([t="nl"]) button {
|
151
|
-
color: var(--color-on-surface);
|
152
|
-
border-color: var(--color-surface-container);
|
153
|
-
background-color: var(--color-surface-container);
|
154
|
-
}
|
155
|
-
|
156
|
-
:host([t="ns"]) button:hover,
|
157
|
-
:host([t="n"]) button:hover,
|
158
|
-
:host([t="nl"]) button:hover {
|
159
|
-
background-color: var(--color-surface-container-high);
|
160
|
-
border-color: var(--color-surface-container-high);
|
161
|
-
}
|
162
|
-
|
163
|
-
:host([t="ns"]) button:active,
|
164
|
-
:host([t="n"]) button:active,
|
165
|
-
:host([t="nl"]) button:active {
|
166
|
-
background-color: var(--color-surface-container-high);
|
167
|
-
border-color: var(--color-surface-container-high);
|
168
|
-
}
|
169
|
-
|
170
|
-
:host([t="ps"]) button,
|
171
|
-
:host([t="ss"]) button,
|
172
|
-
:host([t="es"]) button,
|
173
|
-
:host([t="ns"]) button {
|
174
|
-
height: var(--button-height-s);
|
175
|
-
padding-left: var(--button-padding-horizontal-s);
|
176
|
-
padding-right: var(--button-padding-horizontal-s);
|
177
|
-
border-radius: var(--button-border-radius-s);
|
178
|
-
}
|
179
|
-
|
180
|
-
:host([t="p"]) button,
|
181
|
-
:host([t="s"]) button,
|
182
|
-
:host([t="e"]) button,
|
183
|
-
:host([t="n"]) button {
|
184
|
-
height: var(--button-height-m);
|
185
|
-
padding-left: var(--button-padding-horizontal-m);
|
186
|
-
padding-right: var(--button-padding-horizontal-m);
|
187
|
-
border-radius: var(--button-border-radius-m);
|
188
|
-
}
|
189
|
-
|
190
|
-
:host([t="pl"]) button,
|
191
|
-
:host([t="sl"]) button,
|
192
|
-
:host([t="el"]) button,
|
193
|
-
:host([t="nl"]) button {
|
194
|
-
height: var(--button-height-l);
|
195
|
-
padding-left: var(--button-padding-horizontal-l);
|
196
|
-
padding-right: var(--button-padding-horizontal-l);
|
197
|
-
border-radius: var(--button-border-radius-l);
|
198
|
-
font-size: var(--typography-label-l-font-size);
|
199
|
-
font-weight: var(--typography-label-l-font-weight);
|
200
|
-
line-height: var(--typography-label-l-line-height);
|
201
|
-
letter-spacing: var(--typography-label-l-letter-spacing);
|
202
|
-
}
|
203
|
-
${xt}
|
204
|
-
${j}
|
205
|
-
`);var tt=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[St],y(this.shadow,this.render)}static get observedAttributes(){return["key","href","target","w","t"]}_buttonRef={};_assingRef=t=>{this._buttonRef.current=t;let o=m(this.getAttribute("w"));o==="f"?this._buttonRef.current.style.width="100%":o!=null&&(this._buttonRef.current.style.width=o)};attributeChangedCallback(t,o,s){if(!this._buttonRef.current)return;let r=m(this.getAttribute("w"));r==="f"?this._buttonRef.current.style.width="100%":r!=null&&(this._buttonRef.current.style.width=r,this._buttonRef.current.style.minWidth=r,this._buttonRef.current.style.maxWidth=r),y(this.shadow,this.render)}render=()=>this.getAttribute("href")?S`
|
206
|
-
<a
|
207
|
-
href=${this.getAttribute("href")}
|
208
|
-
target=${this.getAttribute("target")}
|
209
|
-
>
|
210
|
-
<button>
|
211
|
-
<slot></slot>
|
212
|
-
</button>
|
213
|
-
</a>
|
214
|
-
`:S`
|
215
|
-
<button ref=${this._assingRef}>
|
216
|
-
<slot></slot>
|
217
|
-
</button>
|
218
|
-
`},$t=tt;var Ct=b`
|
219
|
-
|
220
|
-
:host([d="h"]) {
|
221
|
-
flex-direction: row;
|
222
|
-
}
|
223
|
-
:host(:not([d])) {
|
224
|
-
flex-direction: column;
|
225
|
-
}
|
226
|
-
:host([d="h"]:not([ah])) {
|
227
|
-
justify-content: flex-start;
|
228
|
-
}
|
229
|
-
:host([d="h"][ah="c"]) {
|
230
|
-
justify-content: center;
|
231
|
-
/* align-content: center; */
|
232
|
-
}
|
233
|
-
:host([d="h"][ah="e"]) {
|
234
|
-
justify-content: flex-end;
|
235
|
-
}
|
236
|
-
:host([d="h"]:not([av])) {
|
237
|
-
align-items: flex-start;
|
238
|
-
}
|
239
|
-
:host([d="h"][av="c"]) {
|
240
|
-
align-items: center;
|
241
|
-
align-content: center;
|
242
|
-
}
|
243
|
-
:host([d="h"][av="e"]) {
|
244
|
-
align-items: flex-end;
|
245
|
-
align-content: flex-end;
|
246
|
-
}
|
247
|
-
:host(:not([d]):not([ah])) {
|
248
|
-
align-items: flex-start;
|
249
|
-
}
|
250
|
-
:host(:not([d])[ah="c"]) {
|
251
|
-
align-items: center;
|
252
|
-
align-content: center;
|
253
|
-
}
|
254
|
-
:host(:not([d])[ah="e"]) {
|
255
|
-
align-items: flex-end;
|
256
|
-
align-content: flex-end;
|
257
|
-
}
|
258
|
-
:host(:not([d]):not([av])) {
|
259
|
-
justify-content: flex-start;
|
260
|
-
}
|
261
|
-
:host(:not([d])[av="c"]) {
|
262
|
-
justify-content: center;
|
263
|
-
}
|
264
|
-
:host(:not([d])[av="e"]) {
|
265
|
-
justify-content: flex-end;
|
266
|
-
}
|
267
|
-
@media screen and (max-width: 640px) {
|
268
|
-
:host([s-d="v"]) {
|
269
|
-
flex-direction: column;
|
270
|
-
}
|
271
|
-
:host([s-d="h"]) {
|
272
|
-
flex-direction: row;
|
273
|
-
}
|
274
|
-
:host([s-d="h"][s-av="c"]) {
|
275
|
-
align-items: center;
|
276
|
-
align-content: center;
|
277
|
-
}
|
278
|
-
:host([s-d="v"][s-av="c"]) {
|
279
|
-
justify-content: center;
|
280
|
-
}
|
281
|
-
}
|
282
|
-
`;var le={cur:"cursor"},he={cur:{p:"pointer",m:"move",grab:"grab",grabbing:"grabbing"}},C=w(le,he);var kt=b`
|
283
|
-
:host([sh]:not([sv])) {
|
284
|
-
overflow-x: scroll;
|
285
|
-
flex-wrap: nowrap;
|
286
|
-
}
|
287
|
-
:host([sv]:not([sh])) {
|
288
|
-
overflow-y: scroll;
|
289
|
-
flex-wrap: nowrap;
|
290
|
-
}
|
291
|
-
:host([sh][sv]) {
|
292
|
-
overflow: scroll;
|
293
|
-
flex-wrap: nowrap;
|
294
|
-
}
|
295
|
-
:host([overflow="hidden"]) {
|
296
|
-
overflow: hidden;
|
297
|
-
flex-wrap: nowrap;
|
298
|
-
}
|
299
|
-
|
300
|
-
`;var T={xs:"--border-width-xs",s:"--border-width-s",m:"--border-width-m",l:"--border-width-l",xl:"--border-width-xl"},ce={pos:"position",shadow:"box-shadow",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"},de={bgc:{p:`
|
301
|
-
background-color: var(--color-primary);
|
302
|
-
color: var(--color-on-primary);
|
303
|
-
`,pc:`
|
304
|
-
background-color: var(--color-primary-container);
|
305
|
-
color: var(--color-on-primary-container);
|
306
|
-
`,s:`
|
307
|
-
background-color: var(--color-secondary);
|
308
|
-
color: var(--color-on-secondary);
|
309
|
-
`,sc:`
|
310
|
-
background-color: var(--color-secondary-container);
|
311
|
-
color: var(--color-on-secondary-container);
|
312
|
-
`,e:`
|
313
|
-
background-color: var(--color-error);
|
314
|
-
color: var(--color-on-error);
|
315
|
-
`,ec:`
|
316
|
-
background-color: var(--color-error-container);
|
317
|
-
color: var(--color-on-error-container);
|
318
|
-
`,su:`
|
319
|
-
background-color: var(--color-surface);
|
320
|
-
color: var(--color-on-surface);
|
321
|
-
`,sucl:`
|
322
|
-
background-color: var(--color-surface-container-low);
|
323
|
-
color: var(--color-on-surface);
|
324
|
-
`,suc:`
|
325
|
-
background-color: var(--color-surface-container);
|
326
|
-
color: var(--color-on-surface);
|
327
|
-
`,such:`
|
328
|
-
background-color: var(--color-surface-container-high);
|
329
|
-
color: var(--color-on-surface);
|
330
|
-
`,isu:`
|
331
|
-
background-color: var(--color-inverse-surface);
|
332
|
-
color: var(--color-inverse-on-surface);
|
333
|
-
`,o:`
|
334
|
-
background-color: var(--color-outline);
|
335
|
-
`,ov:`
|
336
|
-
background-color: var(--color-outline-variant);
|
337
|
-
`},pos:{rel:"relative",abs:"absolute",fix:"fixed"},cor:{full:`
|
338
|
-
top: 0;
|
339
|
-
right: 0;
|
340
|
-
bottom: 0;
|
341
|
-
left: 0;
|
342
|
-
height: 100%;
|
343
|
-
`,top:`
|
344
|
-
top: 0;
|
345
|
-
right: 0;
|
346
|
-
left: 0;
|
347
|
-
`,right:`
|
348
|
-
top: 0;
|
349
|
-
right: 0;
|
350
|
-
bottom: 0;
|
351
|
-
height: 100%;
|
352
|
-
`,bottom:`
|
353
|
-
right: 0;
|
354
|
-
bottom: 0;
|
355
|
-
left: 0;
|
356
|
-
`,left:`
|
357
|
-
bottom: 0;
|
358
|
-
left: 0;
|
359
|
-
top: 0;
|
360
|
-
height: 100%;
|
361
|
-
`},shadow:{s:"--shadow-s",m:"--shadow-m",l:"--shadow-l"},pt:g,pr:g,pb:g,pl:g,p:g,ph:g,pv:g,g,gv:g,gh:g,bw:T,bwt:T,bwr:T,bwb:T,bwl:T,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",s:"--border-radius-s",m:"--border-radius-m",l:"--border-radius-l",xl:"--border-radius-xl",f:"50%"}},P=w(ce,de);var pe={mt:"margin-top",mr:"margin-right",mb:"margin-bottom",ml:"margin-left",m:"margin",mh:"margin-left margin-right",mv:"margin-top margin-bottom"},ge={mt:g,mr:g,mb:g,ml:g,m:g,mh:g,mv:g},M=w(pe,ge);var At=new CSSStyleSheet;At.replaceSync(b`
|
362
|
-
slot {
|
363
|
-
display: contents;
|
364
|
-
}
|
365
|
-
:host {
|
366
|
-
display: flex;
|
367
|
-
align-self: auto;
|
368
|
-
align-content: flex-start;
|
369
|
-
flex-wrap: wrap;
|
370
|
-
border-style: solid;
|
371
|
-
border-width: 0;
|
372
|
-
box-sizing: border-box;
|
373
|
-
}
|
374
|
-
:host([stretch]) {
|
375
|
-
align-self: stretch;
|
376
|
-
}
|
377
|
-
${j}
|
378
|
-
${kt}
|
379
|
-
${Ct}
|
380
|
-
${M}
|
381
|
-
${C}
|
382
|
-
${P}
|
383
|
-
`);var et=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[At],y(this.shadow,this.render)}static get observedAttributes(){return["key","wh","w","h","hidden","s-w","s-h","s-d"]}_styles={default:{},s:{}};attributeChangedCallback(t,o,s){["default","s"].forEach(r=>{let n=d=>`${r==="default"?"":`${r}-`}${d}`,a=this.getAttribute(n("wh")),i=m(a===null?this.getAttribute(n("w")):a),p=m(a===null?this.getAttribute(n("h")):a),u=this.getAttribute(n("o")),h=this.getAttribute(n("z"));h!==null&&(this._styles[r]["z-index"]=h),u!==null&&(this._styles[r].opacity=u),i==="f"?this._styles[r].width="100%":i!==void 0&&(this._styles[r].width=i,this._styles[r]["min-width"]=i,this._styles[r]["max-width"]=i),p==="f"?this._styles[r].height="100%":p!==void 0&&(this._styles[r].height=p,this._styles[r]["min-height"]=p,this._styles[r]["max-height"]=p),this.hasAttribute("hidden")&&(this._styles[r].display="none")}),y(this.shadow,this.render)}render=()=>S`
|
384
|
-
<style>
|
385
|
-
${D(this._styles)}
|
386
|
-
</style>
|
387
|
-
<slot></slot> `},_t=et;var ue={at:"text-align"},fe={at:{c:"center",e:"right",j:"justify"},s:{dm:`
|
388
|
-
font-size: var(--typography-display-m-font-size);
|
389
|
-
font-weight: var(--typography-display-m-font-weight);
|
390
|
-
line-height: var(--typography-display-m-line-height);
|
391
|
-
letter-spacing: var(--typography-display-m-letter-spacing);
|
392
|
-
`,hm:`
|
393
|
-
font-size: var(--typography-headline-m-font-size);
|
394
|
-
font-weight: var(--typography-headline-m-font-weight);
|
395
|
-
line-height: var(--typography-headline-m-line-height);
|
396
|
-
letter-spacing: var(--typography-headline-m-letter-spacing);
|
397
|
-
`,tl:`
|
398
|
-
font-size: var(--typography-title-l-font-size);
|
399
|
-
font-weight: var(--typography-title-l-font-weight);
|
400
|
-
line-height: var(--typography-title-l-line-height);
|
401
|
-
letter-spacing: var(--typography-title-l-letter-spacing);
|
402
|
-
`,tm:`
|
403
|
-
font-size: var(--typography-title-m-font-size);
|
404
|
-
font-weight: var(--typography-title-m-font-weight);
|
405
|
-
line-height: var(--typography-title-m-line-height);
|
406
|
-
letter-spacing: var(--typography-title-m-letter-spacing);
|
407
|
-
`,ts:`
|
408
|
-
font-size: var(--typography-title-s-font-size);
|
409
|
-
font-weight: var(--typography-title-s-font-weight);
|
410
|
-
line-height: var(--typography-title-s-line-height);
|
411
|
-
letter-spacing: var(--typography-title-s-letter-spacing);
|
412
|
-
`,bl:`
|
413
|
-
font-size: var(--typography-body-l-font-size);
|
414
|
-
font-weight: var(--typography-body-l-font-weight);
|
415
|
-
line-height: var(--typography-body-l-line-height);
|
416
|
-
letter-spacing: var(--typography-body-l-letter-spacing);
|
417
|
-
`,bm:`
|
418
|
-
font-size: var(--typography-body-m-font-size);
|
419
|
-
font-weight: var(--typography-body-m-font-weight);
|
420
|
-
line-height: var(--typography-body-m-line-height);
|
421
|
-
letter-spacing: var(--typography-body-m-letter-spacing);
|
422
|
-
`,bs:`
|
423
|
-
font-size: var(--typography-body-s-font-size);
|
424
|
-
font-weight: var(--typography-body-s-font-weight);
|
425
|
-
line-height: var(--typography-body-s-line-height);
|
426
|
-
letter-spacing: var(--typography-body-s-letter-spacing);
|
427
|
-
`,ll:`
|
428
|
-
font-size: var(--typography-label-l-font-size);
|
429
|
-
font-weight: var(--typography-label-l-font-weight);
|
430
|
-
line-height: var(--typography-label-l-line-height);
|
431
|
-
letter-spacing: var(--typography-label-l-letter-spacing);
|
432
|
-
`,lm:`
|
433
|
-
font-size: var(--typography-label-m-font-size);
|
434
|
-
font-weight: var(--typography-label-m-font-weight);
|
435
|
-
line-height: var(--typography-label-m-line-height);
|
436
|
-
letter-spacing: var(--typography-label-m-letter-spacing);
|
437
|
-
`}},Wt=w(ue,fe);var ve={c:"color"},be={c:{"on-p":"--color-on-primary","on-pc":"--color-on-primary-container","on-s":"--color-on-secondary","on-sc":"--color-on-secondary-container","on-su":"--color-on-surface","on-su-v":"--color-on-surface-variant","i-on-su":"--color-inverse-on-surface","on-e":"--color-on-error","on-ec":"--color-on-error-container"}},U=w(ve,be);var jt=new CSSStyleSheet;jt.replaceSync(b`
|
438
|
-
:host {
|
439
|
-
display: block;
|
440
|
-
}
|
441
|
-
slot {
|
442
|
-
display: contents;
|
443
|
-
}
|
444
|
-
:host ::slotted(a) {
|
445
|
-
text-decoration: var(--anchor-text-decoration);
|
446
|
-
color: var(--anchor-color);
|
447
|
-
}
|
448
|
-
:host ::slotted(a:hover) {
|
449
|
-
text-decoration: var(--anchor-text-decoration-hover);
|
450
|
-
color: var(--anchor-color-hover);
|
451
|
-
}
|
452
|
-
${Wt}
|
453
|
-
${U}
|
454
|
-
${M}
|
455
|
-
${C}
|
456
|
-
`);var ot=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[jt]}static get observedAttributes(){return["key","w","ellipsis"]}connectedCallback(){y(this.shadow,this.render)}attributeChangedCallback(t,o,s){let r=m(this.getAttribute("w"));this.hasAttribute("ellipsis")&&(this.style.overflow="hidden",this.style.textOverflow="ellipsis",this.style.whiteSpace="nowrap"),r==="f"?this.style.width="100%":r!==void 0&&(this.style.width=r),y(this.shadow,this.render)}render=()=>S`
|
457
|
-
<slot></slot>
|
458
|
-
`},Mt=ot;var Ot=new CSSStyleSheet;Ot.replaceSync(b`
|
459
|
-
:host {
|
460
|
-
border-style: solid;
|
461
|
-
box-sizing: border-box;
|
462
|
-
overflow: hidden;
|
463
|
-
border-width: 0;
|
464
|
-
}
|
465
|
-
slot {
|
466
|
-
display: contents;
|
467
|
-
}
|
468
|
-
:host([of="con"]) img {
|
469
|
-
object-fit: contain;
|
470
|
-
}
|
471
|
-
:host([of="cov"]) img {
|
472
|
-
object-fit: cover;
|
473
|
-
}
|
474
|
-
:host([of="none"]) img {
|
475
|
-
object-fit: none;
|
476
|
-
}
|
477
|
-
img {
|
478
|
-
height: 100%;
|
479
|
-
width: 100%;
|
480
|
-
}
|
481
|
-
${P}
|
482
|
-
${M}
|
483
|
-
${C}
|
484
|
-
`);var rt=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[Ot]}_styles={default:{},s:{}};static get observedAttributes(){return["key","src","wh","w","h","hidden","height","width","s-wh","s-w","s-h"]}connectedCallback(){y(this.shadow,this.render)}attributeChangedCallback(t,o,s){["default","s"].forEach(r=>{let n=d=>`${r==="default"?"":`${r}-`}${d}`,a=this.getAttribute(n("wh")),i=m(a===null?this.getAttribute(n("w")):a),p=m(a===null?this.getAttribute(n("h")):a),u=this.getAttribute(n("o")),h=this.getAttribute(n("z"));h!==null&&(this._styles[r].zIndex=h),u!==null&&(this._styles[r].opacity=u),i==="f"?this._styles[r].width="100%":i!==void 0&&(this._styles[r].width=i,this._styles[r].minWidth=i,this._styles[r].maxWidth=i),p==="f"?this._styles[r].height="100%":p!==void 0&&(this._styles[r].height=p,this._styles[r].minHeight=p,this._styles[r].maxHeight=p)}),y(this.shadow,this.render)}render=()=>S`
|
485
|
-
<style>
|
486
|
-
${D(this._styles)}
|
487
|
-
</style>
|
488
|
-
<img
|
489
|
-
src="${this.getAttribute("src")}"
|
490
|
-
width="${this.getAttribute("width")}"
|
491
|
-
height="${this.getAttribute("height")}"
|
492
|
-
>
|
493
|
-
`},zt=rt;var Et=b`
|
494
|
-
:host([pt="xs"]) svg {
|
495
|
-
padding-top: var(--spacing-xs);
|
496
|
-
}
|
497
|
-
:host([pt="s"]) svg {
|
498
|
-
padding-top: var(--spacing-s);
|
499
|
-
}
|
500
|
-
:host([pt="m"]) svg {
|
501
|
-
padding-top: var(--spacing-m);
|
502
|
-
}
|
503
|
-
:host([pt="l"]) svg {
|
504
|
-
padding-top: var(--spacing-l);
|
505
|
-
}
|
506
|
-
:host([pt="xl"]) svg {
|
507
|
-
padding-top: var(--spacing-xl);
|
508
|
-
}
|
509
|
-
:host([pr="xs"]) svg {
|
510
|
-
padding-right: var(--spacing-xs);
|
511
|
-
}
|
512
|
-
:host([pr="s"]) svg {
|
513
|
-
padding-right: var(--spacing-s);
|
514
|
-
}
|
515
|
-
:host([pr="m"]) svg {
|
516
|
-
padding-right: var(--spacing-m);
|
517
|
-
}
|
518
|
-
:host([pr="l"]) svg {
|
519
|
-
padding-right: var(--spacing-l);
|
520
|
-
}
|
521
|
-
:host([pr="xl"]) svg {
|
522
|
-
padding-right: var(--spacing-xl);
|
523
|
-
}
|
524
|
-
:host([pb="xs"]) svg {
|
525
|
-
padding-bottom: var(--spacing-xs);
|
526
|
-
}
|
527
|
-
:host([pb="s"]) svg {
|
528
|
-
padding-bottom: var(--spacing-s);
|
529
|
-
}
|
530
|
-
:host([pb="m"]) svg {
|
531
|
-
padding-bottom: var(--spacing-m);
|
532
|
-
}
|
533
|
-
:host([pb="l"]) svg {
|
534
|
-
padding-bottom: var(--spacing-l);
|
535
|
-
}
|
536
|
-
:host([pb="xl"]) svg {
|
537
|
-
padding-bottom: var(--spacing-xl);
|
538
|
-
}
|
539
|
-
:host([pl="xs"]) svg {
|
540
|
-
padding-left: var(--spacing-xs);
|
541
|
-
}
|
542
|
-
:host([pl="s"]) svg {
|
543
|
-
padding-left: var(--spacing-s);
|
544
|
-
}
|
545
|
-
:host([pl="m"]) svg {
|
546
|
-
padding-left: var(--spacing-m);
|
547
|
-
}
|
548
|
-
:host([pl="l"]) svg {
|
549
|
-
padding-left: var(--spacing-l);
|
550
|
-
}
|
551
|
-
:host([pl="xl"]) svg {
|
552
|
-
padding-left: var(--spacing-xl);
|
553
|
-
}
|
554
|
-
:host([p="xs"]) svg {
|
555
|
-
padding: var(--spacing-xs);
|
556
|
-
}
|
557
|
-
:host([p="s"]) svg {
|
558
|
-
padding: var(--spacing-s);
|
559
|
-
}
|
560
|
-
:host([p="m"]) svg {
|
561
|
-
padding: var(--spacing-m);
|
562
|
-
}
|
563
|
-
:host([p="l"]) svg {
|
564
|
-
padding: var(--spacing-l);
|
565
|
-
}
|
566
|
-
:host([p="xl"]) svg {
|
567
|
-
padding: var(--spacing-xl);
|
568
|
-
}
|
569
|
-
:host([ph="xs"]) svg {
|
570
|
-
padding-left: var(--spacing-xs);
|
571
|
-
padding-right: var(--spacing-xs);
|
572
|
-
}
|
573
|
-
:host([ph="s"]) svg {
|
574
|
-
padding-left: var(--spacing-s);
|
575
|
-
padding-right: var(--spacing-s);
|
576
|
-
}
|
577
|
-
:host([ph="m"]) svg {
|
578
|
-
padding-left: var(--spacing-m);
|
579
|
-
padding-right: var(--spacing-m);
|
580
|
-
}
|
581
|
-
:host([ph="l"]) svg {
|
582
|
-
padding-left: var(--spacing-l);
|
583
|
-
padding-right: var(--spacing-l);
|
584
|
-
}
|
585
|
-
:host([ph="xl"]) svg {
|
586
|
-
padding-left: var(--spacing-xl);
|
587
|
-
padding-right: var(--spacing-xl);
|
588
|
-
}
|
589
|
-
:host([pv="xs"]) svg {
|
590
|
-
padding-top: var(--spacing-xs);
|
591
|
-
padding-bottom: var(--spacing-xs);
|
592
|
-
}
|
593
|
-
:host([pv="s"]) svg {
|
594
|
-
padding-top: var(--spacing-s);
|
595
|
-
padding-bottom: var(--spacing-s);
|
596
|
-
}
|
597
|
-
:host([pv="m"]) svg {
|
598
|
-
padding-top: var(--spacing-m);
|
599
|
-
padding-bottom: var(--spacing-m);
|
600
|
-
}
|
601
|
-
:host([pv="l"]) svg {
|
602
|
-
padding-top: var(--spacing-l);
|
603
|
-
padding-bottom: var(--spacing-l);
|
604
|
-
}
|
605
|
-
:host([pv="xl"]) svg {
|
606
|
-
padding-top: var(--spacing-xl);
|
607
|
-
padding-bottom: var(--spacing-xl);
|
608
|
-
}
|
609
|
-
`;var Nt=new CSSStyleSheet;Nt.replaceSync(b`
|
610
|
-
${U}
|
611
|
-
${Et}
|
612
|
-
${j}
|
613
|
-
${C}
|
614
|
-
`);var st=class e extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[Nt]}static _icons={};static get observedAttributes(){return["key","svg","w","h","wh"]}static get icons(){return e._icons}static addIcon(t,o){e._icons[t]=o}connectedCallback(){this.render()}attributeChangedCallback(t,o,s){let r=this.getAttribute("wh"),n=m(r===null?this.getAttribute("w"):r),a=m(r===null?this.getAttribute("h"):r);n&&(this.style.width=n),a&&(this.style.height=a),this.render()}render=()=>{try{let t=this.getAttribute("svg"),o=e._icons[t]||(window.rtglIcons||{})[t];if(o){this.shadow.innerHTML=o;return}}catch(t){console.log("error in rtgl-svg render",t)}this.shadow.innerHTML=""}},Tt=st;customElements.define("rtgl-button",$t);customElements.define("rtgl-view",_t);customElements.define("rtgl-text",Mt);customElements.define("rtgl-image",zt);customElements.define("rtgl-svg",Tt);})();
|
615
|
-
/*! (c) Andrea Giammarchi - MIT */
|