rezel 1.0.3 → 1.0.5
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/rezel.cjs.js +4 -0
- package/dist/rezel.cjs.js.map +1 -0
- package/dist/rezel.d.ts +156 -0
- package/dist/rezel.es.js +250 -0
- package/dist/rezel.es.js.map +1 -0
- package/package.json +16 -4
- package/dist/r-grid.cjs.js +0 -4
- package/dist/r-grid.cjs.js.map +0 -1
- package/dist/r-grid.es.js +0 -257
- package/dist/r-grid.es.js.map +0 -1
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));require(`react`);var c=`:host{--d0:var(--rezel-dim-none,0px);--d1:var(--rezel-dim-small,4px);--d2:var(--rezel-dim-medium,8px);--d3:var(--rezel-dim-large,16px);--d4:var(--rezel-dim-xlarge,32px);--d5:var(--rezel-dim-xxlarge,64px);--f0:var(--rezel-font-xsmall,12px);--f1:var(--rezel-font-small,14px);--f2:var(--rezel-font-medium,16px);--f3:var(--rezel-font-large,24px);--f4:var(--rezel-font-xlarge,32px);--f5:var(--rezel-font-xxlarge,40px);display:block;box-sizing:border-box!important}slot{display:contents!important}.row{box-sizing:border-box;justify-content:flex-start;gap:var(--gap);--gap:0px;flex-flow:wrap;margin:0;padding:0;display:flex}.cell{box-sizing:border-box}:host([r-cell]){flex:auto}::slotted(hr){width:100%}:host([r-c1]),:host([r-c2]),:host([r-c3]),:host([r-c4]){max-width:calc(var(--rc)/12*100% - var(--gap)*(12 - var(--rc))/12);flex:100%}:host([r-sb1]),:host([r-sb2]),:host([r-sb3]),:host([r-sb4]){margin-left:calc(var(--rsb)/12*100% + var(--gap)*var(--rsb)/12)}:host([r-sa1]),:host([r-sa2]),:host([r-sa3]),:host([r-sa4]){margin-right:calc(var(--rsa)/12*100% + var(--gap)*var(--rsa)/12)}@media (min-width:0){:host([r-ta1]){text-align:var(--text-align-small)}:host([r-d1]){display:var(--display-small)}:host([r-f1="1"]){font-size:var(--f1)}:host([r-f1="2"]){font-size:var(--f2)}:host([r-f1="3"]){font-size:var(--f3)}:host([r-f1="4"]){font-size:var(--f4)}:host([r-f1="5"]){font-size:var(--f5)}:host([r-f1="6"]){font-size:var(--f6)}.row.gap-small-1{--gap:var(--d1)}:host([r-p1="1"]){padding:var(--d1)}:host([r-pt1="1"]){padding-top:var(--d1)}:host([r-pl1="1"]){padding-left:var(--d1)}:host([r-pb1="1"]){padding-bottom:var(--d1)}:host([r-pr1="1"]){padding-right:var(--d1)}:host([r-m1="1"]){margin:var(--d1)}:host([r-mt1="1"]){margin-top:var(--d1)}:host([r-ml1="1"]){margin-left:var(--d1)}:host([r-mb1="1"]){margin-bottom:var(--d1)}:host([r-mr1="1"]){margin-right:var(--d1)}.row.gap-small-2{--gap:var(--d2)}:host([r-p1="2"]){padding:var(--d2)}:host([r-pt1="2"]){padding-top:var(--d2)}:host([r-pl1="2"]){padding-left:var(--d2)}:host([r-pb1="2"]){padding-bottom:var(--d2)}:host([r-pr1="2"]){padding-right:var(--d2)}:host([r-m1="2"]){margin:var(--d2)}:host([r-mt1="2"]){margin-top:var(--d2)}:host([r-ml1="2"]){margin-left:var(--d2)}:host([r-mb1="2"]){margin-bottom:var(--d2)}:host([r-mr1="2"]){margin-right:var(--d2)}.row.gap-small-3{--gap:var(--d3)}:host([r-p1="3"]){padding:var(--d3)}:host([r-pt1="3"]){padding-top:var(--d3)}:host([r-pl1="3"]){padding-left:var(--d3)}:host([r-pb1="3"]){padding-bottom:var(--d3)}:host([r-pr1="3"]){padding-right:var(--d3)}:host([r-m1="3"]){margin:var(--d3)}:host([r-mt1="3"]){margin-top:var(--d3)}:host([r-ml1="3"]){margin-left:var(--d3)}:host([r-mb1="3"]){margin-bottom:var(--d3)}:host([r-mr1="3"]){margin-right:var(--d3)}.row.gap-small-4{--gap:var(--d4)}:host([r-p1="4"]){padding:var(--d4)}:host([r-pt1="4"]){padding-top:var(--d4)}:host([r-pl1="4"]){padding-left:var(--d4)}:host([r-pb1="4"]){padding-bottom:var(--d4)}:host([r-pr1="4"]){padding-right:var(--d4)}:host([r-m1="4"]){margin:var(--d4)}:host([r-mt1="4"]){margin-top:var(--d4)}:host([r-ml1="4"]){margin-left:var(--d4)}:host([r-mb1="4"]){margin-bottom:var(--d4)}:host([r-mr1="4"]){margin-right:var(--d4)}.row.gap-small-5{--gap:var(--d5)}:host([r-p1="5"]){padding:var(--d5)}:host([r-pt1="5"]){padding-top:var(--d5)}:host([r-pl1="5"]){padding-left:var(--d5)}:host([r-pb1="5"]){padding-bottom:var(--d5)}:host([r-pr1="5"]){padding-right:var(--d5)}:host([r-m1="5"]){margin:var(--d5)}:host([r-mt1="5"]){margin-top:var(--d5)}:host([r-ml1="5"]){margin-left:var(--d5)}:host([r-mb1="5"]){margin-bottom:var(--d5)}:host([r-mr1="5"]){margin-right:var(--d5)}.row.gap-small-6{--gap:var(--d6)}:host([r-p1="6"]){padding:var(--d6)}:host([r-pt1="6"]){padding-top:var(--d6)}:host([r-pl1="6"]){padding-left:var(--d6)}:host([r-pb1="6"]){padding-bottom:var(--d6)}:host([r-pr1="6"]){padding-right:var(--d6)}:host([r-m1="6"]){margin:var(--d6)}:host([r-mt1="6"]){margin-top:var(--d6)}:host([r-ml1="6"]){margin-left:var(--d6)}:host([r-mb1="6"]){margin-bottom:var(--d6)}:host([r-mr1="6"]){margin-right:var(--d6)}:host([r-or1="12"]){order:12}:host([r-c1="12"]){--rc:12}:host([r-or1="11"]){order:11}:host([r-c1="11"]){--rc:11}:host([r-or1="10"]){order:10}:host([r-c1="10"]){--rc:10}:host([r-or1="9"]){order:9}:host([r-c1="9"]){--rc:9}:host([r-or1="8"]){order:8}:host([r-c1="8"]){--rc:8}:host([r-or1="7"]){order:7}:host([r-c1="7"]){--rc:7}:host([r-or1="6"]){order:6}:host([r-c1="6"]){--rc:6}:host([r-or1="5"]){order:5}:host([r-c1="5"]){--rc:5}:host([r-or1="4"]){order:4}:host([r-c1="4"]){--rc:4}:host([r-or1="3"]){order:3}:host([r-c1="3"]){--rc:3}:host([r-or1="2"]){order:2}:host([r-c1="2"]){--rc:2}:host([r-or1="1"]){order:1}:host([r-c1="1"]){--rc:1}:host([r-sb1="11"]){--rsb:11}:host([r-sa1="11"]){--rsa:11}:host([r-sb1="10"]){--rsb:10}:host([r-sa1="10"]){--rsa:10}:host([r-sb1="9"]){--rsb:9}:host([r-sa1="9"]){--rsa:9}:host([r-sb1="8"]){--rsb:8}:host([r-sa1="8"]){--rsa:8}:host([r-sb1="7"]){--rsb:7}:host([r-sa1="7"]){--rsa:7}:host([r-sb1="6"]){--rsb:6}:host([r-sa1="6"]){--rsa:6}:host([r-sb1="5"]){--rsb:5}:host([r-sa1="5"]){--rsa:5}:host([r-sb1="4"]){--rsb:4}:host([r-sa1="4"]){--rsa:4}:host([r-sb1="3"]){--rsb:3}:host([r-sa1="3"]){--rsa:3}:host([r-sb1="2"]){--rsb:2}:host([r-sa1="2"]){--rsa:2}:host([r-sb1="1"]){--rsb:1}:host([r-sa1="1"]){--rsa:1}:host([r-sb1="0"]){--rsb:0}:host([r-sa1="0"]){--rsa:0}}@media (min-width:768px){:host([r-ta2]){text-align:var(--text-align-medium)}:host([r-d2]){display:var(--display-medium)}:host([r-f2="1"]){font-size:var(--f1)}:host([r-f2="2"]){font-size:var(--f2)}:host([r-f2="3"]){font-size:var(--f3)}:host([r-f2="4"]){font-size:var(--f4)}:host([r-f2="5"]){font-size:var(--f5)}:host([r-f2="6"]){font-size:var(--f6)}.row.gap-medium-1{--gap:var(--d1)}:host([r-p2="1"]){padding:var(--d1)}:host([r-pt2="1"]){padding-top:var(--d1)}:host([r-pl2="1"]){padding-left:var(--d1)}:host([r-pb2="1"]){padding-bottom:var(--d1)}:host([r-pr2="1"]){padding-right:var(--d1)}:host([r-m2="1"]){margin:var(--d1)}:host([r-mt2="1"]){margin-top:var(--d1)}:host([r-ml2="1"]){margin-left:var(--d1)}:host([r-mb2="1"]){margin-bottom:var(--d1)}:host([r-mr2="1"]){margin-right:var(--d1)}.row.gap-medium-2{--gap:var(--d2)}:host([r-p2="2"]){padding:var(--d2)}:host([r-pt2="2"]){padding-top:var(--d2)}:host([r-pl2="2"]){padding-left:var(--d2)}:host([r-pb2="2"]){padding-bottom:var(--d2)}:host([r-pr2="2"]){padding-right:var(--d2)}:host([r-m2="2"]){margin:var(--d2)}:host([r-mt2="2"]){margin-top:var(--d2)}:host([r-ml2="2"]){margin-left:var(--d2)}:host([r-mb2="2"]){margin-bottom:var(--d2)}:host([r-mr2="2"]){margin-right:var(--d2)}.row.gap-medium-3{--gap:var(--d3)}:host([r-p2="3"]){padding:var(--d3)}:host([r-pt2="3"]){padding-top:var(--d3)}:host([r-pl2="3"]){padding-left:var(--d3)}:host([r-pb2="3"]){padding-bottom:var(--d3)}:host([r-pr2="3"]){padding-right:var(--d3)}:host([r-m2="3"]){margin:var(--d3)}:host([r-mt2="3"]){margin-top:var(--d3)}:host([r-ml2="3"]){margin-left:var(--d3)}:host([r-mb2="3"]){margin-bottom:var(--d3)}:host([r-mr2="3"]){margin-right:var(--d3)}.row.gap-medium-4{--gap:var(--d4)}:host([r-p2="4"]){padding:var(--d4)}:host([r-pt2="4"]){padding-top:var(--d4)}:host([r-pl2="4"]){padding-left:var(--d4)}:host([r-pb2="4"]){padding-bottom:var(--d4)}:host([r-pr2="4"]){padding-right:var(--d4)}:host([r-m2="4"]){margin:var(--d4)}:host([r-mt2="4"]){margin-top:var(--d4)}:host([r-ml2="4"]){margin-left:var(--d4)}:host([r-mb2="4"]){margin-bottom:var(--d4)}:host([r-mr2="4"]){margin-right:var(--d4)}.row.gap-medium-5{--gap:var(--d5)}:host([r-p2="5"]){padding:var(--d5)}:host([r-pt2="5"]){padding-top:var(--d5)}:host([r-pl2="5"]){padding-left:var(--d5)}:host([r-pb2="5"]){padding-bottom:var(--d5)}:host([r-pr2="5"]){padding-right:var(--d5)}:host([r-m2="5"]){margin:var(--d5)}:host([r-mt2="5"]){margin-top:var(--d5)}:host([r-ml2="5"]){margin-left:var(--d5)}:host([r-mb2="5"]){margin-bottom:var(--d5)}:host([r-mr2="5"]){margin-right:var(--d5)}.row.gap-medium-6{--gap:var(--d6)}:host([r-p2="6"]){padding:var(--d6)}:host([r-pt2="6"]){padding-top:var(--d6)}:host([r-pl2="6"]){padding-left:var(--d6)}:host([r-pb2="6"]){padding-bottom:var(--d6)}:host([r-pr2="6"]){padding-right:var(--d6)}:host([r-m2="6"]){margin:var(--d6)}:host([r-mt2="6"]){margin-top:var(--d6)}:host([r-ml2="6"]){margin-left:var(--d6)}:host([r-mb2="6"]){margin-bottom:var(--d6)}:host([r-mr2="6"]){margin-right:var(--d6)}:host([r-or2="12"]){order:12}:host([r-c2="12"]){--rc:12}:host([r-or2="11"]){order:11}:host([r-c2="11"]){--rc:11}:host([r-or2="10"]){order:10}:host([r-c2="10"]){--rc:10}:host([r-or2="9"]){order:9}:host([r-c2="9"]){--rc:9}:host([r-or2="8"]){order:8}:host([r-c2="8"]){--rc:8}:host([r-or2="7"]){order:7}:host([r-c2="7"]){--rc:7}:host([r-or2="6"]){order:6}:host([r-c2="6"]){--rc:6}:host([r-or2="5"]){order:5}:host([r-c2="5"]){--rc:5}:host([r-or2="4"]){order:4}:host([r-c2="4"]){--rc:4}:host([r-or2="3"]){order:3}:host([r-c2="3"]){--rc:3}:host([r-or2="2"]){order:2}:host([r-c2="2"]){--rc:2}:host([r-or2="1"]){order:1}:host([r-c2="1"]){--rc:1}:host([r-sb2="11"]){--rsb:11}:host([r-sa2="11"]){--rsa:11}:host([r-sb2="10"]){--rsb:10}:host([r-sa2="10"]){--rsa:10}:host([r-sb2="9"]){--rsb:9}:host([r-sa2="9"]){--rsa:9}:host([r-sb2="8"]){--rsb:8}:host([r-sa2="8"]){--rsa:8}:host([r-sb2="7"]){--rsb:7}:host([r-sa2="7"]){--rsa:7}:host([r-sb2="6"]){--rsb:6}:host([r-sa2="6"]){--rsa:6}:host([r-sb2="5"]){--rsb:5}:host([r-sa2="5"]){--rsa:5}:host([r-sb2="4"]){--rsb:4}:host([r-sa2="4"]){--rsa:4}:host([r-sb2="3"]){--rsb:3}:host([r-sa2="3"]){--rsa:3}:host([r-sb2="2"]){--rsb:2}:host([r-sa2="2"]){--rsa:2}:host([r-sb2="1"]){--rsb:1}:host([r-sa2="1"]){--rsa:1}:host([r-sb2="0"]){--rsb:0}:host([r-sa2="0"]){--rsa:0}}@media (min-width:1024px){:host([r-ta3]){text-align:var(--text-align-large)}:host([r-d3]){display:var(--display-large)}:host([r-f3="1"]){font-size:var(--f1)}:host([r-f3="2"]){font-size:var(--f2)}:host([r-f3="3"]){font-size:var(--f3)}:host([r-f3="4"]){font-size:var(--f4)}:host([r-f3="5"]){font-size:var(--f5)}:host([r-f3="6"]){font-size:var(--f6)}.row.gap-large-1{--gap:var(--d1)}:host([r-p3="1"]){padding:var(--d1)}:host([r-pt3="1"]){padding-top:var(--d1)}:host([r-pl3="1"]){padding-left:var(--d1)}:host([r-pb3="1"]){padding-bottom:var(--d1)}:host([r-pr3="1"]){padding-right:var(--d1)}:host([r-m3="1"]){margin:var(--d1)}:host([r-mt3="1"]){margin-top:var(--d1)}:host([r-ml3="1"]){margin-left:var(--d1)}:host([r-mb3="1"]){margin-bottom:var(--d1)}:host([r-mr3="1"]){margin-right:var(--d1)}.row.gap-large-2{--gap:var(--d2)}:host([r-p3="2"]){padding:var(--d2)}:host([r-pt3="2"]){padding-top:var(--d2)}:host([r-pl3="2"]){padding-left:var(--d2)}:host([r-pb3="2"]){padding-bottom:var(--d2)}:host([r-pr3="2"]){padding-right:var(--d2)}:host([r-m3="2"]){margin:var(--d2)}:host([r-mt3="2"]){margin-top:var(--d2)}:host([r-ml3="2"]){margin-left:var(--d2)}:host([r-mb3="2"]){margin-bottom:var(--d2)}:host([r-mr3="2"]){margin-right:var(--d2)}.row.gap-large-3{--gap:var(--d3)}:host([r-p3="3"]){padding:var(--d3)}:host([r-pt3="3"]){padding-top:var(--d3)}:host([r-pl3="3"]){padding-left:var(--d3)}:host([r-pb3="3"]){padding-bottom:var(--d3)}:host([r-pr3="3"]){padding-right:var(--d3)}:host([r-m3="3"]){margin:var(--d3)}:host([r-mt3="3"]){margin-top:var(--d3)}:host([r-ml3="3"]){margin-left:var(--d3)}:host([r-mb3="3"]){margin-bottom:var(--d3)}:host([r-mr3="3"]){margin-right:var(--d3)}.row.gap-large-4{--gap:var(--d4)}:host([r-p3="4"]){padding:var(--d4)}:host([r-pt3="4"]){padding-top:var(--d4)}:host([r-pl3="4"]){padding-left:var(--d4)}:host([r-pb3="4"]){padding-bottom:var(--d4)}:host([r-pr3="4"]){padding-right:var(--d4)}:host([r-m3="4"]){margin:var(--d4)}:host([r-mt3="4"]){margin-top:var(--d4)}:host([r-ml3="4"]){margin-left:var(--d4)}:host([r-mb3="4"]){margin-bottom:var(--d4)}:host([r-mr3="4"]){margin-right:var(--d4)}.row.gap-large-5{--gap:var(--d5)}:host([r-p3="5"]){padding:var(--d5)}:host([r-pt3="5"]){padding-top:var(--d5)}:host([r-pl3="5"]){padding-left:var(--d5)}:host([r-pb3="5"]){padding-bottom:var(--d5)}:host([r-pr3="5"]){padding-right:var(--d5)}:host([r-m3="5"]){margin:var(--d5)}:host([r-mt3="5"]){margin-top:var(--d5)}:host([r-ml3="5"]){margin-left:var(--d5)}:host([r-mb3="5"]){margin-bottom:var(--d5)}:host([r-mr3="5"]){margin-right:var(--d5)}.row.gap-large-6{--gap:var(--d6)}:host([r-p3="6"]){padding:var(--d6)}:host([r-pt3="6"]){padding-top:var(--d6)}:host([r-pl3="6"]){padding-left:var(--d6)}:host([r-pb3="6"]){padding-bottom:var(--d6)}:host([r-pr3="6"]){padding-right:var(--d6)}:host([r-m3="6"]){margin:var(--d6)}:host([r-mt3="6"]){margin-top:var(--d6)}:host([r-ml3="6"]){margin-left:var(--d6)}:host([r-mb3="6"]){margin-bottom:var(--d6)}:host([r-mr3="6"]){margin-right:var(--d6)}:host([r-or3="12"]){order:12}:host([r-c3="12"]){--rc:12}:host([r-or3="11"]){order:11}:host([r-c3="11"]){--rc:11}:host([r-or3="10"]){order:10}:host([r-c3="10"]){--rc:10}:host([r-or3="9"]){order:9}:host([r-c3="9"]){--rc:9}:host([r-or3="8"]){order:8}:host([r-c3="8"]){--rc:8}:host([r-or3="7"]){order:7}:host([r-c3="7"]){--rc:7}:host([r-or3="6"]){order:6}:host([r-c3="6"]){--rc:6}:host([r-or3="5"]){order:5}:host([r-c3="5"]){--rc:5}:host([r-or3="4"]){order:4}:host([r-c3="4"]){--rc:4}:host([r-or3="3"]){order:3}:host([r-c3="3"]){--rc:3}:host([r-or3="2"]){order:2}:host([r-c3="2"]){--rc:2}:host([r-or3="1"]){order:1}:host([r-c3="1"]){--rc:1}:host([r-sb3="11"]){--rsb:11}:host([r-sa3="11"]){--rsa:11}:host([r-sb3="10"]){--rsb:10}:host([r-sa3="10"]){--rsa:10}:host([r-sb3="9"]){--rsb:9}:host([r-sa3="9"]){--rsa:9}:host([r-sb3="8"]){--rsb:8}:host([r-sa3="8"]){--rsa:8}:host([r-sb3="7"]){--rsb:7}:host([r-sa3="7"]){--rsa:7}:host([r-sb3="6"]){--rsb:6}:host([r-sa3="6"]){--rsa:6}:host([r-sb3="5"]){--rsb:5}:host([r-sa3="5"]){--rsa:5}:host([r-sb3="4"]){--rsb:4}:host([r-sa3="4"]){--rsa:4}:host([r-sb3="3"]){--rsb:3}:host([r-sa3="3"]){--rsa:3}:host([r-sb3="2"]){--rsb:2}:host([r-sa3="2"]){--rsa:2}:host([r-sb3="1"]){--rsb:1}:host([r-sa3="1"]){--rsa:1}:host([r-sb3="0"]){--rsb:0}:host([r-sa3="0"]){--rsa:0}}@media (min-width:1280px){:host([r-ta4]){text-align:var(--text-align-xlarge)}:host([r-d4]){display:var(--display-xlarge)}:host([r-f4="1"]){font-size:var(--f1)}:host([r-f4="2"]){font-size:var(--f2)}:host([r-f4="3"]){font-size:var(--f3)}:host([r-f4="4"]){font-size:var(--f4)}:host([r-f4="5"]){font-size:var(--f5)}:host([r-f4="6"]){font-size:var(--f6)}.row.gap-xlarge-1{--gap:var(--d1)}:host([r-p4="1"]){padding:var(--d1)}:host([r-pt4="1"]){padding-top:var(--d1)}:host([r-pl4="1"]){padding-left:var(--d1)}:host([r-pb4="1"]){padding-bottom:var(--d1)}:host([r-pr4="1"]){padding-right:var(--d1)}:host([r-m4="1"]){margin:var(--d1)}:host([r-mt4="1"]){margin-top:var(--d1)}:host([r-ml4="1"]){margin-left:var(--d1)}:host([r-mb4="1"]){margin-bottom:var(--d1)}:host([r-mr4="1"]){margin-right:var(--d1)}.row.gap-xlarge-2{--gap:var(--d2)}:host([r-p4="2"]){padding:var(--d2)}:host([r-pt4="2"]){padding-top:var(--d2)}:host([r-pl4="2"]){padding-left:var(--d2)}:host([r-pb4="2"]){padding-bottom:var(--d2)}:host([r-pr4="2"]){padding-right:var(--d2)}:host([r-m4="2"]){margin:var(--d2)}:host([r-mt4="2"]){margin-top:var(--d2)}:host([r-ml4="2"]){margin-left:var(--d2)}:host([r-mb4="2"]){margin-bottom:var(--d2)}:host([r-mr4="2"]){margin-right:var(--d2)}.row.gap-xlarge-3{--gap:var(--d3)}:host([r-p4="3"]){padding:var(--d3)}:host([r-pt4="3"]){padding-top:var(--d3)}:host([r-pl4="3"]){padding-left:var(--d3)}:host([r-pb4="3"]){padding-bottom:var(--d3)}:host([r-pr4="3"]){padding-right:var(--d3)}:host([r-m4="3"]){margin:var(--d3)}:host([r-mt4="3"]){margin-top:var(--d3)}:host([r-ml4="3"]){margin-left:var(--d3)}:host([r-mb4="3"]){margin-bottom:var(--d3)}:host([r-mr4="3"]){margin-right:var(--d3)}.row.gap-xlarge-4{--gap:var(--d4)}:host([r-p4="4"]){padding:var(--d4)}:host([r-pt4="4"]){padding-top:var(--d4)}:host([r-pl4="4"]){padding-left:var(--d4)}:host([r-pb4="4"]){padding-bottom:var(--d4)}:host([r-pr4="4"]){padding-right:var(--d4)}:host([r-m4="4"]){margin:var(--d4)}:host([r-mt4="4"]){margin-top:var(--d4)}:host([r-ml4="4"]){margin-left:var(--d4)}:host([r-mb4="4"]){margin-bottom:var(--d4)}:host([r-mr4="4"]){margin-right:var(--d4)}.row.gap-xlarge-5{--gap:var(--d5)}:host([r-p4="5"]){padding:var(--d5)}:host([r-pt4="5"]){padding-top:var(--d5)}:host([r-pl4="5"]){padding-left:var(--d5)}:host([r-pb4="5"]){padding-bottom:var(--d5)}:host([r-pr4="5"]){padding-right:var(--d5)}:host([r-m4="5"]){margin:var(--d5)}:host([r-mt4="5"]){margin-top:var(--d5)}:host([r-ml4="5"]){margin-left:var(--d5)}:host([r-mb4="5"]){margin-bottom:var(--d5)}:host([r-mr4="5"]){margin-right:var(--d5)}.row.gap-xlarge-6{--gap:var(--d6)}:host([r-p4="6"]){padding:var(--d6)}:host([r-pt4="6"]){padding-top:var(--d6)}:host([r-pl4="6"]){padding-left:var(--d6)}:host([r-pb4="6"]){padding-bottom:var(--d6)}:host([r-pr4="6"]){padding-right:var(--d6)}:host([r-m4="6"]){margin:var(--d6)}:host([r-mt4="6"]){margin-top:var(--d6)}:host([r-ml4="6"]){margin-left:var(--d6)}:host([r-mb4="6"]){margin-bottom:var(--d6)}:host([r-mr4="6"]){margin-right:var(--d6)}:host([r-or4="12"]){order:12}:host([r-c4="12"]){--rc:12}:host([r-or4="11"]){order:11}:host([r-c4="11"]){--rc:11}:host([r-or4="10"]){order:10}:host([r-c4="10"]){--rc:10}:host([r-or4="9"]){order:9}:host([r-c4="9"]){--rc:9}:host([r-or4="8"]){order:8}:host([r-c4="8"]){--rc:8}:host([r-or4="7"]){order:7}:host([r-c4="7"]){--rc:7}:host([r-or4="6"]){order:6}:host([r-c4="6"]){--rc:6}:host([r-or4="5"]){order:5}:host([r-c4="5"]){--rc:5}:host([r-or4="4"]){order:4}:host([r-c4="4"]){--rc:4}:host([r-or4="3"]){order:3}:host([r-c4="3"]){--rc:3}:host([r-or4="2"]){order:2}:host([r-c4="2"]){--rc:2}:host([r-or4="1"]){order:1}:host([r-c4="1"]){--rc:1}:host([r-sb4="11"]){--rsb:11}:host([r-sa4="11"]){--rsa:11}:host([r-sb4="10"]){--rsb:10}:host([r-sa4="10"]){--rsa:10}:host([r-sb4="9"]){--rsb:9}:host([r-sa4="9"]){--rsa:9}:host([r-sb4="8"]){--rsb:8}:host([r-sa4="8"]){--rsa:8}:host([r-sb4="7"]){--rsb:7}:host([r-sa4="7"]){--rsa:7}:host([r-sb4="6"]){--rsb:6}:host([r-sa4="6"]){--rsa:6}:host([r-sb4="5"]){--rsb:5}:host([r-sa4="5"]){--rsa:5}:host([r-sb4="4"]){--rsb:4}:host([r-sa4="4"]){--rsa:4}:host([r-sb4="3"]){--rsb:3}:host([r-sa4="3"]){--rsa:3}:host([r-sb4="2"]){--rsb:2}:host([r-sa4="2"]){--rsa:2}:host([r-sb4="1"]){--rsb:1}:host([r-sa4="1"]){--rsa:1}:host([r-sb4="0"]){--rsb:0}:host([r-sa4="0"]){--rsa:0}}`,l=new CSSStyleSheet;l.replaceSync(c);var u=l;const d=[`inherit`,`initial`,`revert`,`revert-layer`,`unset`],f=[`display`,`font`,`text-align`,`padding`,`padding-top`,`padding-right`,`padding-bottom`,`padding-left`,`margin`,`margin-top`,`margin-right`,`margin-bottom`,`margin-left`],p=[`row`,`cell`,`col`,`display`,`text-align`,`order`,`skip-before`,`skip-after`,`gap`,`padding`,`font`],m=[`small`,`medium`,`large`,`xlarge`],h=[`none`,`small`,`medium`,`large`,`xlarge`,`xxlarge`],g=[`none`,`block`,`flex`,`grid`,`inline`,`inline-block`,`inline-flex`,`inline-grid`,`flow-root`,`contents`,`table`,`table-row`,`list-item`,...d],_=[`start`,`end`,`left`,`right`,`center`,`justify`,`match-parent`],v=[`xsmall`,`small`,`medium`,`large`,`xlarge`,`xxlarge`],y=e=>f.includes(e),b=e=>p.includes(e);var x=e=>{let t=parseInt(e.trim());return t===void 0?null:String(t)},S=e=>{let t=e.trim().toLowerCase();return g.includes(t)?t:null},C=e=>{let t=e.trim().toLowerCase();return h.includes(t)?String(h.indexOf(t)):null},w=e=>{let t=e.trim().toLowerCase();return _.includes(t)?t:null},T=e=>{let t=e.trim().toLowerCase();return v.includes(t)?String(v.indexOf(t)):null};const E={row:`boolean`,cell:`boolean`,"text-align":w,"skip-before":x,"skip-after":x,col:x,gap:C,font:T,order:x,display:S,padding:C},D={font:T,margin:C,padding:C,display:S,"text-align":w,"margin-top":C,"margin-right":C,"margin-bottom":C,"margin-left":C,"padding-top":C,"padding-right":C,"padding-bottom":C,"padding-left":C},O={font:`f`,padding:`p`,display:`d`,row:`row`,cell:`cell`,col:`c`,gap:`g`,order:`or`,"skip-before":`sb`,"skip-after":`sa`,"text-align":`ta`},k={font:`f`,margin:`m`,padding:`p`,display:`d`,"text-align":`ta`,"margin-top":`mt`,"margin-right":`mr`,"margin-bottom":`mb`,"margin-left":`ml`,"padding-top":`pt`,"padding-right":`pr`,"padding-bottom":`pb`,"padding-left":`pl`},A=(e,t,n)=>{let r=[];for(let i of e)if(t[i]!==void 0){let e=n[i];e===`boolean`?r.push(`${i}`):t[i].split(` `).filter(Boolean).forEach((t,n)=>{let a=m[n],o=e(t);a&&o&&r.push(`${i}-${a}-${o}`)})}return r},j=(e,t,n,r)=>{let i={};for(let a of e)if(m.forEach((e,t)=>{i[`r-${r[a]}${t+1}`]=void 0}),t[a]!==void 0){let e=n[a];e===`boolean`?i[`r-${a}`]=a:t[a].split(` `).filter(Boolean).forEach((t,n)=>{let o=m[n],s=e(t);o&&s&&(i[`r-${r[a]}${n+1}`]=s)})}return Object.entries(i)},M=(e,t,n)=>{let r={};for(let i of e)if(m.forEach(e=>{r[`--${i}-${e}`]=void 0}),t[i]!==void 0){let e=n[i];e!==`boolean`&&t[i].split(` `).filter(Boolean).forEach((t,n)=>{let a=m[n],o=e(t);a&&o&&(r[`--${i}-${a}`]=o)})}return Object.entries(r)};var N=class extends HTMLElement{static observedAttributes=p;attr={};mainSlot=()=>this.shadowRoot?.querySelector(`slot`)||null;container=()=>this.shadowRoot?.firstElementChild||null;constructor(){super(),this.attachShadow({mode:`open`}),this.shadowRoot.adoptedStyleSheets=[u]}detectRowChange(){let e=this.mainSlot(),t=this.container();if(!e||!t)return;let n=e.assignedElements().some(e=>e.matches(`r-grid`)),r=this.attr.row!==`row`&&n,i=this.attr.row===`row`&&!n;return r&&(this.attr.row=`row`),i&&delete this.attr.row,r||i}detectCellChange(){let e=this.parentElement?.matches(`r-grid`),t=this.attr.cell!==`cell`&&e,n=this.attr.cell===`cell`&&!e;return t&&(this.attr.cell=`cell`),n&&delete this.attr.cell,t||n}attributeChangedCallback(e,t,n){b(e)&&(this.attr[e]=n,this.render())}connectedMoveCallback(){this.detectCellChange()}connectedCallback(){this.mainSlot()?.addEventListener(`slotchange`,()=>{this.detectRowChange()&&this.render()}),this.render();let e=this.detectRowChange(),t=this.detectCellChange();(e||t)&&this.render()}render(){let e=A([`row`,`gap`],this.attr,E),t=j(p,this.attr,E,O);M([`display`,`text-align`],this.attr,E).forEach(([e,t])=>{t&&this.style.setProperty(e,t),t===void 0&&this.style.removeProperty(e)}),t.forEach(([e,t])=>{t&&this.setAttribute(e,t),t===void 0&&this.removeAttribute(e)}),this.shadowRoot.innerHTML=`
|
|
2
|
+
<div class="${e.join(` `)}"><slot></slot></div>
|
|
3
|
+
`}};customElements.define(`r-grid`,N);var P=class extends HTMLElement{static observedAttributes=f;attr={};constructor(){super(),this.attachShadow({mode:`open`}),this.shadowRoot.adoptedStyleSheets=[u]}attributeChangedCallback(e,t,n){y(e)&&(this.attr[e]=n,this.render())}connectedCallback(){this.render()}render(){let e=j(f,this.attr,D,k);M([`display`,`text-align`],this.attr,D).forEach(([e,t])=>{t&&this.style.setProperty(e,t),t===void 0&&this.style.removeProperty(e)}),e.forEach(([e,t])=>{t&&this.setAttribute(e,t),t===void 0&&this.removeAttribute(e)}),this.shadowRoot.innerHTML=`<slot></slot>`}};customElements.define(`r-elm`,P),exports.GridElement=N,exports.ResponsiveElement=P;
|
|
4
|
+
//# sourceMappingURL=rezel.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rezel.cjs.js","names":["getGridAttributeValue: AttrValidations<ObservedGridAttribute>","getElemAttributeValue: AttrValidations<ObservedElemAttribute>","gridAttrShort: Record<ObservedGridAttribute, string>","elmAttrShort: Record<ObservedElemAttribute, string>","classes: string[]","hostAttributes: Record<string, string | undefined>","hostCSS: Record<string, string | undefined>"],"sources":["../src/grid.scss?inline","../src/grid-style.ts","../src/util.ts","../src/components/grid-element.ts","../src/components/resonsive-element.ts"],"sourcesContent":["@use 'sass:map';\r\n@use 'sass:math';\r\n@use 'sass:list';\r\n\r\n$mediaSizes: (\r\n small: 0px,\r\n medium: 768px,\r\n large: 1024px,\r\n xlarge: 1280px,\r\n);\r\n$dimensions: 'none', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n$fonts: 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n\r\n:host {\r\n --d0: var(--rezel-dim-none, 0px);\r\n --d1: var(--rezel-dim-small, 4px);\r\n --d2: var(--rezel-dim-medium, 8px);\r\n --d3: var(--rezel-dim-large, 16px);\r\n --d4: var(--rezel-dim-xlarge, 32px);\r\n --d5: var(--rezel-dim-xxlarge, 64px);\r\n --f0: var(--rezel-font-xsmall, 12px);\r\n --f1: var(--rezel-font-small, 14px);\r\n --f2: var(--rezel-font-medium, 16px);\r\n --f3: var(--rezel-font-large, 24px);\r\n --f4: var(--rezel-font-xlarge, 32px);\r\n --f5: var(--rezel-font-xxlarge, 40px);\r\n display: block;\r\n box-sizing: border-box !important;\r\n}\r\n\r\nslot {\r\n display: contents !important;\r\n}\r\n\r\n.row {\r\n box-sizing: border-box;\r\n justify-content: flex-start;\r\n gap: var(--gap);\r\n --gap: 0px;\r\n flex-flow: wrap;\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n}\r\n\r\n.cell {\r\n box-sizing: border-box;\r\n}\r\n\r\n:host([r-cell]) {\r\n flex: auto;\r\n}\r\n\r\n::slotted(hr) {\r\n width: 100%;\r\n}\r\n\r\n:host([r-c1]),\r\n:host([r-c2]),\r\n:host([r-c3]),\r\n:host([r-c4]) {\r\n flex: 100%;\r\n max-width: calc(((var(--rc) / 12) * 100%) - var(--gap) * (calc((12 - var(--rc)) / 12)));\r\n}\r\n\r\n:host([r-sb1]),\r\n:host([r-sb2]),\r\n:host([r-sb3]),\r\n:host([r-sb4]) {\r\n margin-left: calc(((var(--rsb) / 12) * 100%) + var(--gap) * (calc(var(--rsb) / 12)));\r\n}\r\n\r\n:host([r-sa1]),\r\n:host([r-sa2]),\r\n:host([r-sa3]),\r\n:host([r-sa4]) {\r\n margin-right: calc(((var(--rsa) / 12) * 100%) + var(--gap) * (calc(var(--rsa) / 12)));\r\n}\r\n\r\n@each $mediaName, $mediaSize in $mediaSizes {\r\n $mIndex: list.index(map.keys($mediaSizes), $mediaName);\r\n\r\n @media (min-width: #{$mediaSize}) {\r\n :host([r-ta#{$mIndex}]) {\r\n text-align: var(--text-align-#{$mediaName});\r\n }\r\n :host([r-d#{$mIndex}]) {\r\n display: var(--display-#{$mediaName});\r\n }\r\n\r\n @each $font in $fonts {\r\n $fIndex: list.index($fonts, $font);\r\n\r\n :host([r-f#{$mIndex}='#{$fIndex}']) {\r\n font-size: var(--f#{$fIndex});\r\n }\r\n }\r\n @each $dimension in $dimensions {\r\n $dIndex: list.index($dimensions, $dimension);\r\n\r\n .row.gap-#{$mediaName}-#{$dIndex} {\r\n --gap: var(--d#{$dIndex});\r\n }\r\n :host([r-p#{$mIndex}='#{$dIndex}']) {\r\n padding: var(--d#{$dIndex});\r\n }\r\n :host([r-pt#{$mIndex}='#{$dIndex}']) {\r\n padding-top: var(--d#{$dIndex});\r\n }\r\n :host([r-pl#{$mIndex}='#{$dIndex}']) {\r\n padding-left: var(--d#{$dIndex});\r\n }\r\n :host([r-pb#{$mIndex}='#{$dIndex}']) {\r\n padding-bottom: var(--d#{$dIndex});\r\n }\r\n :host([r-pr#{$mIndex}='#{$dIndex}']) {\r\n padding-right: var(--d#{$dIndex});\r\n }\r\n :host([r-m#{$mIndex}='#{$dIndex}']) {\r\n margin: var(--d#{$dIndex});\r\n }\r\n :host([r-mt#{$mIndex}='#{$dIndex}']) {\r\n margin-top: var(--d#{$dIndex});\r\n }\r\n :host([r-ml#{$mIndex}='#{$dIndex}']) {\r\n margin-left: var(--d#{$dIndex});\r\n }\r\n :host([r-mb#{$mIndex}='#{$dIndex}']) {\r\n margin-bottom: var(--d#{$dIndex});\r\n }\r\n :host([r-mr#{$mIndex}='#{$dIndex}']) {\r\n margin-right: var(--d#{$dIndex});\r\n }\r\n }\r\n\r\n @for $i from 12 through 1 {\r\n :host([r-or#{$mIndex}='#{$i}']) {\r\n order: #{$i};\r\n }\r\n :host([r-c#{$mIndex}='#{$i}']) {\r\n --rc: #{$i};\r\n }\r\n }\r\n @for $i from 11 through 0 {\r\n :host([r-sb#{$mIndex}='#{$i}']) {\r\n --rsb: #{$i};\r\n }\r\n :host([r-sa#{$mIndex}='#{$i}']) {\r\n --rsa: #{$i};\r\n }\r\n }\r\n }\r\n}\r\n","import gridStyles from \"./grid.scss?inline\";\r\n\r\nconst sheet = new CSSStyleSheet();\r\nsheet.replaceSync(gridStyles);\r\n\r\nexport default sheet;\r\n","type AttrValues<K extends string> = Partial<Record<K, string | undefined>>;\r\ntype AttrValidations<K extends string> = Record<K, 'boolean' | ((val: string) => string | null)>;\r\n\r\nexport const GlobalValues = ['inherit', 'initial', 'revert', 'revert-layer', 'unset'] as const;\r\n\r\nexport const ObservedElemAttributes = [\r\n 'display',\r\n 'font',\r\n 'text-align',\r\n 'padding',\r\n 'padding-top',\r\n 'padding-right',\r\n 'padding-bottom',\r\n 'padding-left',\r\n 'margin',\r\n 'margin-top',\r\n 'margin-right',\r\n 'margin-bottom',\r\n 'margin-left',\r\n] as const;\r\nexport const ObservedGridAttributes = [\r\n 'row',\r\n 'cell',\r\n 'col',\r\n 'display',\r\n 'text-align',\r\n 'order',\r\n 'skip-before',\r\n 'skip-after',\r\n 'gap',\r\n 'padding',\r\n 'font',\r\n] as const;\r\nexport const MediaSizes = ['small', 'medium', 'large', 'xlarge'] as const;\r\nexport const DimensionSizes = ['none', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;\r\nexport const DisplayValues = [\r\n 'none',\r\n 'block',\r\n 'flex',\r\n 'grid',\r\n 'inline',\r\n 'inline-block',\r\n 'inline-flex',\r\n 'inline-grid',\r\n 'flow-root',\r\n 'contents',\r\n 'table',\r\n 'table-row',\r\n 'list-item',\r\n ...GlobalValues,\r\n] as const;\r\nexport const TextAlignValues = [\r\n 'start',\r\n 'end',\r\n 'left',\r\n 'right',\r\n 'center',\r\n 'justify',\r\n 'match-parent',\r\n] as const;\r\nexport const FontSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;\r\n\r\nexport type ObservedGridAttribute = (typeof ObservedGridAttributes)[number];\r\nexport type ObservedElemAttribute = (typeof ObservedElemAttributes)[number];\r\n\r\nexport type DimensionSize = (typeof DimensionSizes)[number];\r\nexport type DisplayValue = (typeof DisplayValues)[number];\r\nexport type TextAlignValue = (typeof TextAlignValues)[number];\r\nexport type FontSize = (typeof FontSizes)[number];\r\n\r\nexport const isElemAttribute = (name: string): name is ObservedElemAttribute =>\r\n ObservedElemAttributes.includes(name as ObservedElemAttribute);\r\n\r\nexport const isGridAttribute = (name: string): name is ObservedGridAttribute =>\r\n ObservedGridAttributes.includes(name as ObservedGridAttribute);\r\n\r\nconst getValidNumber = (val: string): string | null => {\r\n const value = parseInt(val.trim());\r\n return value !== undefined ? String(value) : null;\r\n};\r\n\r\nconst getValidDisplay = (val: string): string | null => {\r\n const value = val.trim().toLowerCase();\r\n return DisplayValues.includes(value as DisplayValue) ? (value as DisplayValue) : null;\r\n};\r\n\r\nconst getValidDimension = (val: string): string | null => {\r\n const value = val.trim().toLowerCase();\r\n return DimensionSizes.includes(value as DimensionSize)\r\n ? String(DimensionSizes.indexOf(value as DimensionSize))\r\n : null;\r\n};\r\n\r\nconst getValidTextAlign = (val: string): TextAlignValue | null => {\r\n const value = val.trim().toLowerCase();\r\n return TextAlignValues.includes(value as TextAlignValue) ? (value as TextAlignValue) : null;\r\n};\r\n\r\nconst getValidFont = (val: string): string | null => {\r\n const value = val.trim().toLowerCase();\r\n return FontSizes.includes(value as FontSize)\r\n ? String(FontSizes.indexOf(value as FontSize))\r\n : null;\r\n};\r\n\r\nexport type GridAttributeValues = AttrValues<ObservedGridAttribute>;\r\nexport type ElemAttributeValues = AttrValues<ObservedElemAttribute>;\r\n\r\nexport const getGridAttributeValue: AttrValidations<ObservedGridAttribute> = {\r\n row: 'boolean',\r\n cell: 'boolean',\r\n 'text-align': getValidTextAlign,\r\n 'skip-before': getValidNumber,\r\n 'skip-after': getValidNumber,\r\n col: getValidNumber,\r\n gap: getValidDimension,\r\n font: getValidFont,\r\n order: getValidNumber,\r\n display: getValidDisplay,\r\n padding: getValidDimension,\r\n};\r\n\r\nexport const getElemAttributeValue: AttrValidations<ObservedElemAttribute> = {\r\n font: getValidFont,\r\n margin: getValidDimension,\r\n padding: getValidDimension,\r\n display: getValidDisplay,\r\n 'text-align': getValidTextAlign,\r\n 'margin-top': getValidDimension,\r\n 'margin-right': getValidDimension,\r\n 'margin-bottom': getValidDimension,\r\n 'margin-left': getValidDimension,\r\n 'padding-top': getValidDimension,\r\n 'padding-right': getValidDimension,\r\n 'padding-bottom': getValidDimension,\r\n 'padding-left': getValidDimension,\r\n};\r\n\r\nexport const gridAttrShort: Record<ObservedGridAttribute, string> = {\r\n font: 'f',\r\n padding: 'p',\r\n display: 'd',\r\n row: 'row',\r\n cell: 'cell',\r\n col: 'c',\r\n gap: 'g',\r\n order: 'or',\r\n 'skip-before': 'sb',\r\n 'skip-after': 'sa',\r\n 'text-align': 'ta',\r\n};\r\n\r\nexport const elmAttrShort: Record<ObservedElemAttribute, string> = {\r\n font: 'f',\r\n margin: 'm',\r\n padding: 'p',\r\n display: 'd',\r\n 'text-align': 'ta',\r\n 'margin-top': 'mt',\r\n 'margin-right': 'mr',\r\n 'margin-bottom': 'mb',\r\n 'margin-left': 'ml',\r\n 'padding-top': 'pt',\r\n 'padding-right': 'pr',\r\n 'padding-bottom': 'pb',\r\n 'padding-left': 'pl',\r\n};\r\n\r\nexport const getClasses = <K extends string>(\r\n attrNames: readonly K[],\r\n attrs: AttrValues<K>,\r\n validations: AttrValidations<K>,\r\n) => {\r\n const classes: string[] = [];\r\n for (const attr of attrNames) {\r\n if (attrs[attr] !== undefined) {\r\n const validation = validations[attr];\r\n if (validation === 'boolean') {\r\n classes.push(`${attr}`);\r\n } else {\r\n const values = attrs[attr].split(' ').filter(Boolean);\r\n values.forEach((val, i) => {\r\n const mediaSize = MediaSizes[i];\r\n const value = validation(val);\r\n if (mediaSize && value) {\r\n classes.push(`${attr}-${mediaSize}-${value}`);\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n return classes;\r\n};\r\n\r\nexport const getHostAttributes = <K extends string>(\r\n attrNames: readonly K[],\r\n attrs: AttrValues<K>,\r\n validations: AttrValidations<K>,\r\n short: Record<K, string>,\r\n) => {\r\n const hostAttributes: Record<string, string | undefined> = {};\r\n\r\n for (const attr of attrNames) {\r\n MediaSizes.forEach((_mediaSize, i) => {\r\n hostAttributes[`r-${short[attr]}${i + 1}`] = undefined;\r\n });\r\n\r\n if (attrs[attr] !== undefined) {\r\n const validation = validations[attr];\r\n if (validation === 'boolean') {\r\n hostAttributes[`r-${attr}`] = attr;\r\n } else {\r\n const values = attrs[attr].split(' ').filter(Boolean);\r\n values.forEach((val, i) => {\r\n const mediaSize = MediaSizes[i];\r\n const value = validation(val);\r\n if (mediaSize && value) {\r\n hostAttributes[`r-${short[attr]}${i + 1}`] = value;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n return Object.entries(hostAttributes);\r\n};\r\n\r\nexport const getHostCSS = <K extends string>(\r\n attrNames: readonly K[],\r\n attrs: AttrValues<K>,\r\n validations: AttrValidations<K>,\r\n) => {\r\n const hostCSS: Record<string, string | undefined> = {};\r\n\r\n for (const attr of attrNames) {\r\n MediaSizes.forEach((mediaSize) => {\r\n hostCSS[`--${attr}-${mediaSize}`] = undefined;\r\n });\r\n\r\n if (attrs[attr] !== undefined) {\r\n const validation = validations[attr];\r\n if (validation !== 'boolean') {\r\n const values = attrs[attr].split(' ').filter(Boolean);\r\n values.forEach((val, i) => {\r\n const mediaSize = MediaSizes[i];\r\n const value = validation(val);\r\n if (mediaSize && value) {\r\n hostCSS[`--${attr}-${mediaSize}`] = value;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n return Object.entries(hostCSS);\r\n};\r\n","import sheet from '../grid-style';\r\nimport {\r\n getClasses,\r\n getGridAttributeValue as getValues,\r\n getHostAttributes,\r\n isGridAttribute,\r\n ObservedGridAttributes as Attributes,\r\n getHostCSS,\r\n gridAttrShort,\r\n} from '../util';\r\nimport type { GridAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} skip-before - skip the given columns before the element for each breakpoint (Integers)\r\n * @attr {string} skip-after - skip the given columns after the element for each breakpoint (Integers)\r\n * @attr {string} display - set element's display value for each breakpoint\r\n * @attr {string} padding - set element's padding for each breakpoint (Dimension values)\r\n * @attr {string} order - set element's flex order for each breakpoint (Integers)\r\n * @attr {string} font - set element's font-size for each breakpoint (Font values)\r\n * @attr {string} col - set element's column spans for each breakpoint (Integers)\r\n * @attr {string} gap - set element's flex gap for each breakpoint (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-grid\r\n */\r\nexport class GridElement extends HTMLElement {\r\n static observedAttributes = Attributes;\r\n\r\n /**\r\n * @internal\r\n */\r\n private attr: Partial<GridAttributeValues> = {};\r\n\r\n /**\r\n * @internal\r\n */\r\n private readonly mainSlot = (): HTMLSlotElement | null =>\r\n this.shadowRoot?.querySelector('slot') || null;\r\n /**\r\n * @internal\r\n */\r\n private readonly container = (): Element | null => this.shadowRoot?.firstElementChild || null;\r\n\r\n constructor() {\r\n super();\r\n this.attachShadow({ mode: 'open' });\r\n this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n private detectRowChange() {\r\n const slot = this.mainSlot();\r\n const container = this.container();\r\n\r\n if (!slot || !container) return;\r\n\r\n const tenants = slot.assignedElements();\r\n const isRow = tenants.some((el) => el.matches('r-grid'));\r\n const isNowRow = this.attr.row !== 'row' && isRow;\r\n const noLongerRow = this.attr.row === 'row' && !isRow;\r\n\r\n if (isNowRow) this.attr.row = 'row';\r\n if (noLongerRow) delete this.attr.row;\r\n return isNowRow || noLongerRow;\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n private detectCellChange() {\r\n const isCell = this.parentElement?.matches('r-grid');\r\n const isNowCell = this.attr.cell !== 'cell' && isCell;\r\n const noLongerCell = this.attr.cell === 'cell' && !isCell;\r\n\r\n if (isNowCell) this.attr.cell = 'cell';\r\n if (noLongerCell) delete this.attr.cell;\r\n return isNowCell || noLongerCell;\r\n }\r\n\r\n attributeChangedCallback(name: string, _old: string, value: string) {\r\n if (isGridAttribute(name)) {\r\n this.attr[name] = value;\r\n this.render();\r\n }\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n connectedMoveCallback() {\r\n this.detectCellChange();\r\n }\r\n\r\n connectedCallback() {\r\n this.mainSlot()?.addEventListener('slotchange', () => {\r\n if (this.detectRowChange()) this.render();\r\n });\r\n\r\n this.render();\r\n const hasRowChange = this.detectRowChange();\r\n const hasCellChange = this.detectCellChange();\r\n if (hasRowChange || hasCellChange) this.render();\r\n }\r\n\r\n render() {\r\n const classes = getClasses(['row', 'gap'], this.attr, getValues);\r\n const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, gridAttrShort);\r\n const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n hostCSS.forEach(([attr, value]) => {\r\n if (value) this.style.setProperty(attr, value);\r\n if (value === undefined) this.style.removeProperty(attr);\r\n });\r\n\r\n hostAttributes.forEach(([attr, value]) => {\r\n if (value) this.setAttribute(attr, value);\r\n if (value === undefined) this.removeAttribute(attr);\r\n });\r\n\r\n this.shadowRoot!.innerHTML = `\r\n <div class=\"${classes.join(' ')}\"><slot></slot></div>\r\n `;\r\n }\r\n}\r\n\r\ncustomElements.define('r-grid', GridElement);\r\n","import sheet from '../grid-style';\r\nimport {\r\n getElemAttributeValue as getValues,\r\n getHostAttributes,\r\n isElemAttribute,\r\n ObservedElemAttributes as Attributes,\r\n getHostCSS,\r\n elmAttrShort,\r\n} from '../util';\r\nimport type { ElemAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} display - set element's display value for each breakpoint, space-separated\r\n * @attr {string} font - set element's font-size for each breakpoint, space-separated (Font values)\r\n * @attr {string} padding - set element's padding for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin - set element's margin for each breakpoint, space-separated (Integers)\r\n * @attr {string} margin-top - set element's margin-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-right - set element's margin-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-bottom - set element's margin-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-left - set element's margin-left for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-top - set element's padding-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-right - set element's padding-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-bottom - set element's padding-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-left - set element's padding-left for each breakpoint, space-separated (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-elm\r\n */\r\nexport class ResponsiveElement extends HTMLElement {\r\n static observedAttributes = Attributes;\r\n private attr: Partial<ElemAttributeValues> = {};\r\n\r\n constructor() {\r\n super();\r\n this.attachShadow({ mode: 'open' });\r\n this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n }\r\n\r\n attributeChangedCallback(name: string, _old: string, value: string) {\r\n if (isElemAttribute(name)) {\r\n this.attr[name] = value;\r\n this.render();\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.render();\r\n }\r\n\r\n render() {\r\n const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, elmAttrShort);\r\n const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n hostCSS.forEach(([attr, value]) => {\r\n if (value) this.style.setProperty(attr, value);\r\n if (value === undefined) this.style.removeProperty(attr);\r\n });\r\n\r\n hostAttributes.forEach(([attr, value]) => {\r\n if (value) this.setAttribute(attr, value);\r\n if (value === undefined) this.removeAttribute(attr);\r\n });\r\n\r\n this.shadowRoot!.innerHTML = `<slot></slot>`;\r\n }\r\n}\r\n\r\ncustomElements.define('r-elm', ResponsiveElement);\r\n"],"mappings":"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"}
|
package/dist/rezel.d.ts
ADDED
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import * as React_2 from 'react';
|
|
2
|
+
|
|
3
|
+
declare type ColumnNumber = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
|
|
4
|
+
|
|
5
|
+
declare type DimensionSize = (typeof DimensionSizes)[number];
|
|
6
|
+
|
|
7
|
+
declare const DimensionSizes: readonly ["none", "small", "medium", "large", "xlarge", "xxlarge"];
|
|
8
|
+
|
|
9
|
+
declare type DisplayValue = (typeof DisplayValues)[number];
|
|
10
|
+
|
|
11
|
+
declare const DisplayValues: readonly ["none", "block", "flex", "grid", "inline", "inline-block", "inline-flex", "inline-grid", "flow-root", "contents", "table", "table-row", "list-item", "inherit", "initial", "revert", "revert-layer", "unset"];
|
|
12
|
+
|
|
13
|
+
declare type FontSize = (typeof FontSizes)[number];
|
|
14
|
+
|
|
15
|
+
declare const FontSizes: readonly ["xsmall", "small", "medium", "large", "xlarge", "xxlarge"];
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* @attr {string} text-align - set element's text alignment for each breakpoint
|
|
19
|
+
* @attr {string} skip-before - skip the given columns before the element for each breakpoint (Integers)
|
|
20
|
+
* @attr {string} skip-after - skip the given columns after the element for each breakpoint (Integers)
|
|
21
|
+
* @attr {string} display - set element's display value for each breakpoint
|
|
22
|
+
* @attr {string} padding - set element's padding for each breakpoint (Dimension values)
|
|
23
|
+
* @attr {string} order - set element's flex order for each breakpoint (Integers)
|
|
24
|
+
* @attr {string} font - set element's font-size for each breakpoint (Font values)
|
|
25
|
+
* @attr {string} col - set element's column spans for each breakpoint (Integers)
|
|
26
|
+
* @attr {string} gap - set element's flex gap for each breakpoint (Dimension values)
|
|
27
|
+
*
|
|
28
|
+
* @summary attributes are space-separated values for each break-point
|
|
29
|
+
* - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-
|
|
30
|
+
* - Font values: xsmall, small, medium, large, xlarge, xxlarge
|
|
31
|
+
* - ex:
|
|
32
|
+
* - font="medium large xlarge"
|
|
33
|
+
* - col="12 6 4"
|
|
34
|
+
*
|
|
35
|
+
* @tag r-grid
|
|
36
|
+
*/
|
|
37
|
+
export declare class GridElement extends HTMLElement {
|
|
38
|
+
static observedAttributes: readonly ["row", "cell", "col", "display", "text-align", "order", "skip-before", "skip-after", "gap", "padding", "font"];
|
|
39
|
+
/* Excluded from this release type: attr */
|
|
40
|
+
/* Excluded from this release type: mainSlot */
|
|
41
|
+
/* Excluded from this release type: container */
|
|
42
|
+
constructor();
|
|
43
|
+
/* Excluded from this release type: detectRowChange */
|
|
44
|
+
/* Excluded from this release type: detectCellChange */
|
|
45
|
+
attributeChangedCallback(name: string, _old: string, value: string): void;
|
|
46
|
+
/* Excluded from this release type: connectedMoveCallback */
|
|
47
|
+
connectedCallback(): void;
|
|
48
|
+
render(): void;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
declare type Hint<T extends string> = T | `${T} ${string}`;
|
|
52
|
+
|
|
53
|
+
declare type OffsetNumber = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11';
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* @attr {string} text-align - set element's text alignment for each breakpoint
|
|
57
|
+
* @attr {string} display - set element's display value for each breakpoint, space-separated
|
|
58
|
+
* @attr {string} font - set element's font-size for each breakpoint, space-separated (Font values)
|
|
59
|
+
* @attr {string} padding - set element's padding for each breakpoint, space-separated (Dimension values)
|
|
60
|
+
* @attr {string} margin - set element's margin for each breakpoint, space-separated (Integers)
|
|
61
|
+
* @attr {string} margin-top - set element's margin-top for each breakpoint, space-separated (Dimension values)
|
|
62
|
+
* @attr {string} margin-right - set element's margin-right for each breakpoint, space-separated (Dimension values)
|
|
63
|
+
* @attr {string} margin-bottom - set element's margin-bottom for each breakpoint, space-separated (Dimension values)
|
|
64
|
+
* @attr {string} margin-left - set element's margin-left for each breakpoint, space-separated (Dimension values)
|
|
65
|
+
* @attr {string} padding-top - set element's padding-top for each breakpoint, space-separated (Dimension values)
|
|
66
|
+
* @attr {string} padding-right - set element's padding-right for each breakpoint, space-separated (Dimension values)
|
|
67
|
+
* @attr {string} padding-bottom - set element's padding-bottom for each breakpoint, space-separated (Dimension values)
|
|
68
|
+
* @attr {string} padding-left - set element's padding-left for each breakpoint, space-separated (Dimension values)
|
|
69
|
+
*
|
|
70
|
+
* @summary attributes are space-separated values for each break-point
|
|
71
|
+
* - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-
|
|
72
|
+
* - Font values: xsmall, small, medium, large, xlarge, xxlarge
|
|
73
|
+
* - ex:
|
|
74
|
+
* - font="medium large xlarge"
|
|
75
|
+
* - col="12 6 4"
|
|
76
|
+
*
|
|
77
|
+
* @tag r-elm
|
|
78
|
+
*/
|
|
79
|
+
export declare class ResponsiveElement extends HTMLElement {
|
|
80
|
+
static observedAttributes: readonly ["display", "font", "text-align", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left"];
|
|
81
|
+
private attr;
|
|
82
|
+
constructor();
|
|
83
|
+
attributeChangedCallback(name: string, _old: string, value: string): void;
|
|
84
|
+
connectedCallback(): void;
|
|
85
|
+
render(): void;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
export declare type Rezel<T> = React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLElement>, HTMLElement> & T;
|
|
89
|
+
|
|
90
|
+
export declare interface RezElement {
|
|
91
|
+
/** set element's text alignment for each breakpoint */
|
|
92
|
+
'text-align'?: Hint<TextAlignValue>;
|
|
93
|
+
/** set element's display value, space-separated */
|
|
94
|
+
display?: Hint<DisplayValue>;
|
|
95
|
+
/** set element's font-size, space-separated (Font values) */
|
|
96
|
+
font?: Hint<FontSize>;
|
|
97
|
+
/** set element's padding, space-separated (Dimension values) */
|
|
98
|
+
padding?: Hint<DimensionSize>;
|
|
99
|
+
/** set element's margin, space-separated (Dimension values) */
|
|
100
|
+
margin?: Hint<DimensionSize>;
|
|
101
|
+
'margin-top'?: Hint<DimensionSize>;
|
|
102
|
+
'margin-right'?: Hint<DimensionSize>;
|
|
103
|
+
'margin-bottom'?: Hint<DimensionSize>;
|
|
104
|
+
'margin-left'?: Hint<DimensionSize>;
|
|
105
|
+
'padding-top'?: Hint<DimensionSize>;
|
|
106
|
+
'padding-right'?: Hint<DimensionSize>;
|
|
107
|
+
'padding-bottom'?: Hint<DimensionSize>;
|
|
108
|
+
'padding-left'?: Hint<DimensionSize>;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
export declare interface RezGrid {
|
|
112
|
+
/** set element's text alignment for each breakpoint */
|
|
113
|
+
'text-align'?: Hint<TextAlignValue>;
|
|
114
|
+
/** skip the given columns before the element (0 to 11) */
|
|
115
|
+
'skip-before'?: Hint<OffsetNumber>;
|
|
116
|
+
/** skip the given columns after the element (0 to 11) */
|
|
117
|
+
'skip-after'?: Hint<OffsetNumber>;
|
|
118
|
+
/** set element's display value (e.g., block, flex, none) */
|
|
119
|
+
display?: Hint<DisplayValue>;
|
|
120
|
+
/** set element's padding (none, small, medium, large, etc.) */
|
|
121
|
+
padding?: Hint<DimensionSize>;
|
|
122
|
+
/** set element's flex order (0-11) */
|
|
123
|
+
order?: Hint<ColumnNumber>;
|
|
124
|
+
/** set element's font-size (xsmall to xxlarge) */
|
|
125
|
+
font?: Hint<FontSize>;
|
|
126
|
+
/** set element's column spans (1-12) */
|
|
127
|
+
col?: Hint<ColumnNumber>;
|
|
128
|
+
/** set element's flex gap (Dimension values) */
|
|
129
|
+
gap?: Hint<DimensionSize>;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
declare type TextAlignValue = (typeof TextAlignValues)[number];
|
|
133
|
+
|
|
134
|
+
declare const TextAlignValues: readonly ["start", "end", "left", "right", "center", "justify", "match-parent"];
|
|
135
|
+
|
|
136
|
+
export { }
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
declare module 'react' {
|
|
140
|
+
namespace JSX {
|
|
141
|
+
interface IntrinsicElements {
|
|
142
|
+
/**
|
|
143
|
+
* `<r-grid>`: A responsive grid layout container using space-separated breakpoint values.
|
|
144
|
+
* * @summary Breakpoints: `[small] [medium] [large] [xlarge]`
|
|
145
|
+
* @example: <r-grid col="12 6 4" gap="small medium">...</r-grid>
|
|
146
|
+
*/
|
|
147
|
+
'r-grid': Rezel<RezGrid>;
|
|
148
|
+
/**
|
|
149
|
+
* `<r-elm>`: A general purpose responsive element using space-separated breakpoint values.
|
|
150
|
+
* * @summary Breakpoints: `[small] [medium] [large] [xlarge]`
|
|
151
|
+
* @example <r-elm margin-top="medium" font="large">...</r-elm>
|
|
152
|
+
*/
|
|
153
|
+
'r-elm': Rezel<RezElement>;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
}
|
package/dist/rezel.es.js
ADDED
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
import "react";
|
|
2
|
+
var grid_default = ":host{--d0:var(--rezel-dim-none,0px);--d1:var(--rezel-dim-small,4px);--d2:var(--rezel-dim-medium,8px);--d3:var(--rezel-dim-large,16px);--d4:var(--rezel-dim-xlarge,32px);--d5:var(--rezel-dim-xxlarge,64px);--f0:var(--rezel-font-xsmall,12px);--f1:var(--rezel-font-small,14px);--f2:var(--rezel-font-medium,16px);--f3:var(--rezel-font-large,24px);--f4:var(--rezel-font-xlarge,32px);--f5:var(--rezel-font-xxlarge,40px);display:block;box-sizing:border-box!important}slot{display:contents!important}.row{box-sizing:border-box;justify-content:flex-start;gap:var(--gap);--gap:0px;flex-flow:wrap;margin:0;padding:0;display:flex}.cell{box-sizing:border-box}:host([r-cell]){flex:auto}::slotted(hr){width:100%}:host([r-c1]),:host([r-c2]),:host([r-c3]),:host([r-c4]){max-width:calc(var(--rc)/12*100% - var(--gap)*(12 - var(--rc))/12);flex:100%}:host([r-sb1]),:host([r-sb2]),:host([r-sb3]),:host([r-sb4]){margin-left:calc(var(--rsb)/12*100% + var(--gap)*var(--rsb)/12)}:host([r-sa1]),:host([r-sa2]),:host([r-sa3]),:host([r-sa4]){margin-right:calc(var(--rsa)/12*100% + var(--gap)*var(--rsa)/12)}@media (min-width:0){:host([r-ta1]){text-align:var(--text-align-small)}:host([r-d1]){display:var(--display-small)}:host([r-f1=\"1\"]){font-size:var(--f1)}:host([r-f1=\"2\"]){font-size:var(--f2)}:host([r-f1=\"3\"]){font-size:var(--f3)}:host([r-f1=\"4\"]){font-size:var(--f4)}:host([r-f1=\"5\"]){font-size:var(--f5)}:host([r-f1=\"6\"]){font-size:var(--f6)}.row.gap-small-1{--gap:var(--d1)}:host([r-p1=\"1\"]){padding:var(--d1)}:host([r-pt1=\"1\"]){padding-top:var(--d1)}:host([r-pl1=\"1\"]){padding-left:var(--d1)}:host([r-pb1=\"1\"]){padding-bottom:var(--d1)}:host([r-pr1=\"1\"]){padding-right:var(--d1)}:host([r-m1=\"1\"]){margin:var(--d1)}:host([r-mt1=\"1\"]){margin-top:var(--d1)}:host([r-ml1=\"1\"]){margin-left:var(--d1)}:host([r-mb1=\"1\"]){margin-bottom:var(--d1)}:host([r-mr1=\"1\"]){margin-right:var(--d1)}.row.gap-small-2{--gap:var(--d2)}:host([r-p1=\"2\"]){padding:var(--d2)}:host([r-pt1=\"2\"]){padding-top:var(--d2)}:host([r-pl1=\"2\"]){padding-left:var(--d2)}:host([r-pb1=\"2\"]){padding-bottom:var(--d2)}:host([r-pr1=\"2\"]){padding-right:var(--d2)}:host([r-m1=\"2\"]){margin:var(--d2)}:host([r-mt1=\"2\"]){margin-top:var(--d2)}:host([r-ml1=\"2\"]){margin-left:var(--d2)}:host([r-mb1=\"2\"]){margin-bottom:var(--d2)}:host([r-mr1=\"2\"]){margin-right:var(--d2)}.row.gap-small-3{--gap:var(--d3)}:host([r-p1=\"3\"]){padding:var(--d3)}:host([r-pt1=\"3\"]){padding-top:var(--d3)}:host([r-pl1=\"3\"]){padding-left:var(--d3)}:host([r-pb1=\"3\"]){padding-bottom:var(--d3)}:host([r-pr1=\"3\"]){padding-right:var(--d3)}:host([r-m1=\"3\"]){margin:var(--d3)}:host([r-mt1=\"3\"]){margin-top:var(--d3)}:host([r-ml1=\"3\"]){margin-left:var(--d3)}:host([r-mb1=\"3\"]){margin-bottom:var(--d3)}:host([r-mr1=\"3\"]){margin-right:var(--d3)}.row.gap-small-4{--gap:var(--d4)}:host([r-p1=\"4\"]){padding:var(--d4)}:host([r-pt1=\"4\"]){padding-top:var(--d4)}:host([r-pl1=\"4\"]){padding-left:var(--d4)}:host([r-pb1=\"4\"]){padding-bottom:var(--d4)}:host([r-pr1=\"4\"]){padding-right:var(--d4)}:host([r-m1=\"4\"]){margin:var(--d4)}:host([r-mt1=\"4\"]){margin-top:var(--d4)}:host([r-ml1=\"4\"]){margin-left:var(--d4)}:host([r-mb1=\"4\"]){margin-bottom:var(--d4)}:host([r-mr1=\"4\"]){margin-right:var(--d4)}.row.gap-small-5{--gap:var(--d5)}:host([r-p1=\"5\"]){padding:var(--d5)}:host([r-pt1=\"5\"]){padding-top:var(--d5)}:host([r-pl1=\"5\"]){padding-left:var(--d5)}:host([r-pb1=\"5\"]){padding-bottom:var(--d5)}:host([r-pr1=\"5\"]){padding-right:var(--d5)}:host([r-m1=\"5\"]){margin:var(--d5)}:host([r-mt1=\"5\"]){margin-top:var(--d5)}:host([r-ml1=\"5\"]){margin-left:var(--d5)}:host([r-mb1=\"5\"]){margin-bottom:var(--d5)}:host([r-mr1=\"5\"]){margin-right:var(--d5)}.row.gap-small-6{--gap:var(--d6)}:host([r-p1=\"6\"]){padding:var(--d6)}:host([r-pt1=\"6\"]){padding-top:var(--d6)}:host([r-pl1=\"6\"]){padding-left:var(--d6)}:host([r-pb1=\"6\"]){padding-bottom:var(--d6)}:host([r-pr1=\"6\"]){padding-right:var(--d6)}:host([r-m1=\"6\"]){margin:var(--d6)}:host([r-mt1=\"6\"]){margin-top:var(--d6)}:host([r-ml1=\"6\"]){margin-left:var(--d6)}:host([r-mb1=\"6\"]){margin-bottom:var(--d6)}:host([r-mr1=\"6\"]){margin-right:var(--d6)}:host([r-or1=\"12\"]){order:12}:host([r-c1=\"12\"]){--rc:12}:host([r-or1=\"11\"]){order:11}:host([r-c1=\"11\"]){--rc:11}:host([r-or1=\"10\"]){order:10}:host([r-c1=\"10\"]){--rc:10}:host([r-or1=\"9\"]){order:9}:host([r-c1=\"9\"]){--rc:9}:host([r-or1=\"8\"]){order:8}:host([r-c1=\"8\"]){--rc:8}:host([r-or1=\"7\"]){order:7}:host([r-c1=\"7\"]){--rc:7}:host([r-or1=\"6\"]){order:6}:host([r-c1=\"6\"]){--rc:6}:host([r-or1=\"5\"]){order:5}:host([r-c1=\"5\"]){--rc:5}:host([r-or1=\"4\"]){order:4}:host([r-c1=\"4\"]){--rc:4}:host([r-or1=\"3\"]){order:3}:host([r-c1=\"3\"]){--rc:3}:host([r-or1=\"2\"]){order:2}:host([r-c1=\"2\"]){--rc:2}:host([r-or1=\"1\"]){order:1}:host([r-c1=\"1\"]){--rc:1}:host([r-sb1=\"11\"]){--rsb:11}:host([r-sa1=\"11\"]){--rsa:11}:host([r-sb1=\"10\"]){--rsb:10}:host([r-sa1=\"10\"]){--rsa:10}:host([r-sb1=\"9\"]){--rsb:9}:host([r-sa1=\"9\"]){--rsa:9}:host([r-sb1=\"8\"]){--rsb:8}:host([r-sa1=\"8\"]){--rsa:8}:host([r-sb1=\"7\"]){--rsb:7}:host([r-sa1=\"7\"]){--rsa:7}:host([r-sb1=\"6\"]){--rsb:6}:host([r-sa1=\"6\"]){--rsa:6}:host([r-sb1=\"5\"]){--rsb:5}:host([r-sa1=\"5\"]){--rsa:5}:host([r-sb1=\"4\"]){--rsb:4}:host([r-sa1=\"4\"]){--rsa:4}:host([r-sb1=\"3\"]){--rsb:3}:host([r-sa1=\"3\"]){--rsa:3}:host([r-sb1=\"2\"]){--rsb:2}:host([r-sa1=\"2\"]){--rsa:2}:host([r-sb1=\"1\"]){--rsb:1}:host([r-sa1=\"1\"]){--rsa:1}:host([r-sb1=\"0\"]){--rsb:0}:host([r-sa1=\"0\"]){--rsa:0}}@media (min-width:768px){:host([r-ta2]){text-align:var(--text-align-medium)}:host([r-d2]){display:var(--display-medium)}:host([r-f2=\"1\"]){font-size:var(--f1)}:host([r-f2=\"2\"]){font-size:var(--f2)}:host([r-f2=\"3\"]){font-size:var(--f3)}:host([r-f2=\"4\"]){font-size:var(--f4)}:host([r-f2=\"5\"]){font-size:var(--f5)}:host([r-f2=\"6\"]){font-size:var(--f6)}.row.gap-medium-1{--gap:var(--d1)}:host([r-p2=\"1\"]){padding:var(--d1)}:host([r-pt2=\"1\"]){padding-top:var(--d1)}:host([r-pl2=\"1\"]){padding-left:var(--d1)}:host([r-pb2=\"1\"]){padding-bottom:var(--d1)}:host([r-pr2=\"1\"]){padding-right:var(--d1)}:host([r-m2=\"1\"]){margin:var(--d1)}:host([r-mt2=\"1\"]){margin-top:var(--d1)}:host([r-ml2=\"1\"]){margin-left:var(--d1)}:host([r-mb2=\"1\"]){margin-bottom:var(--d1)}:host([r-mr2=\"1\"]){margin-right:var(--d1)}.row.gap-medium-2{--gap:var(--d2)}:host([r-p2=\"2\"]){padding:var(--d2)}:host([r-pt2=\"2\"]){padding-top:var(--d2)}:host([r-pl2=\"2\"]){padding-left:var(--d2)}:host([r-pb2=\"2\"]){padding-bottom:var(--d2)}:host([r-pr2=\"2\"]){padding-right:var(--d2)}:host([r-m2=\"2\"]){margin:var(--d2)}:host([r-mt2=\"2\"]){margin-top:var(--d2)}:host([r-ml2=\"2\"]){margin-left:var(--d2)}:host([r-mb2=\"2\"]){margin-bottom:var(--d2)}:host([r-mr2=\"2\"]){margin-right:var(--d2)}.row.gap-medium-3{--gap:var(--d3)}:host([r-p2=\"3\"]){padding:var(--d3)}:host([r-pt2=\"3\"]){padding-top:var(--d3)}:host([r-pl2=\"3\"]){padding-left:var(--d3)}:host([r-pb2=\"3\"]){padding-bottom:var(--d3)}:host([r-pr2=\"3\"]){padding-right:var(--d3)}:host([r-m2=\"3\"]){margin:var(--d3)}:host([r-mt2=\"3\"]){margin-top:var(--d3)}:host([r-ml2=\"3\"]){margin-left:var(--d3)}:host([r-mb2=\"3\"]){margin-bottom:var(--d3)}:host([r-mr2=\"3\"]){margin-right:var(--d3)}.row.gap-medium-4{--gap:var(--d4)}:host([r-p2=\"4\"]){padding:var(--d4)}:host([r-pt2=\"4\"]){padding-top:var(--d4)}:host([r-pl2=\"4\"]){padding-left:var(--d4)}:host([r-pb2=\"4\"]){padding-bottom:var(--d4)}:host([r-pr2=\"4\"]){padding-right:var(--d4)}:host([r-m2=\"4\"]){margin:var(--d4)}:host([r-mt2=\"4\"]){margin-top:var(--d4)}:host([r-ml2=\"4\"]){margin-left:var(--d4)}:host([r-mb2=\"4\"]){margin-bottom:var(--d4)}:host([r-mr2=\"4\"]){margin-right:var(--d4)}.row.gap-medium-5{--gap:var(--d5)}:host([r-p2=\"5\"]){padding:var(--d5)}:host([r-pt2=\"5\"]){padding-top:var(--d5)}:host([r-pl2=\"5\"]){padding-left:var(--d5)}:host([r-pb2=\"5\"]){padding-bottom:var(--d5)}:host([r-pr2=\"5\"]){padding-right:var(--d5)}:host([r-m2=\"5\"]){margin:var(--d5)}:host([r-mt2=\"5\"]){margin-top:var(--d5)}:host([r-ml2=\"5\"]){margin-left:var(--d5)}:host([r-mb2=\"5\"]){margin-bottom:var(--d5)}:host([r-mr2=\"5\"]){margin-right:var(--d5)}.row.gap-medium-6{--gap:var(--d6)}:host([r-p2=\"6\"]){padding:var(--d6)}:host([r-pt2=\"6\"]){padding-top:var(--d6)}:host([r-pl2=\"6\"]){padding-left:var(--d6)}:host([r-pb2=\"6\"]){padding-bottom:var(--d6)}:host([r-pr2=\"6\"]){padding-right:var(--d6)}:host([r-m2=\"6\"]){margin:var(--d6)}:host([r-mt2=\"6\"]){margin-top:var(--d6)}:host([r-ml2=\"6\"]){margin-left:var(--d6)}:host([r-mb2=\"6\"]){margin-bottom:var(--d6)}:host([r-mr2=\"6\"]){margin-right:var(--d6)}:host([r-or2=\"12\"]){order:12}:host([r-c2=\"12\"]){--rc:12}:host([r-or2=\"11\"]){order:11}:host([r-c2=\"11\"]){--rc:11}:host([r-or2=\"10\"]){order:10}:host([r-c2=\"10\"]){--rc:10}:host([r-or2=\"9\"]){order:9}:host([r-c2=\"9\"]){--rc:9}:host([r-or2=\"8\"]){order:8}:host([r-c2=\"8\"]){--rc:8}:host([r-or2=\"7\"]){order:7}:host([r-c2=\"7\"]){--rc:7}:host([r-or2=\"6\"]){order:6}:host([r-c2=\"6\"]){--rc:6}:host([r-or2=\"5\"]){order:5}:host([r-c2=\"5\"]){--rc:5}:host([r-or2=\"4\"]){order:4}:host([r-c2=\"4\"]){--rc:4}:host([r-or2=\"3\"]){order:3}:host([r-c2=\"3\"]){--rc:3}:host([r-or2=\"2\"]){order:2}:host([r-c2=\"2\"]){--rc:2}:host([r-or2=\"1\"]){order:1}:host([r-c2=\"1\"]){--rc:1}:host([r-sb2=\"11\"]){--rsb:11}:host([r-sa2=\"11\"]){--rsa:11}:host([r-sb2=\"10\"]){--rsb:10}:host([r-sa2=\"10\"]){--rsa:10}:host([r-sb2=\"9\"]){--rsb:9}:host([r-sa2=\"9\"]){--rsa:9}:host([r-sb2=\"8\"]){--rsb:8}:host([r-sa2=\"8\"]){--rsa:8}:host([r-sb2=\"7\"]){--rsb:7}:host([r-sa2=\"7\"]){--rsa:7}:host([r-sb2=\"6\"]){--rsb:6}:host([r-sa2=\"6\"]){--rsa:6}:host([r-sb2=\"5\"]){--rsb:5}:host([r-sa2=\"5\"]){--rsa:5}:host([r-sb2=\"4\"]){--rsb:4}:host([r-sa2=\"4\"]){--rsa:4}:host([r-sb2=\"3\"]){--rsb:3}:host([r-sa2=\"3\"]){--rsa:3}:host([r-sb2=\"2\"]){--rsb:2}:host([r-sa2=\"2\"]){--rsa:2}:host([r-sb2=\"1\"]){--rsb:1}:host([r-sa2=\"1\"]){--rsa:1}:host([r-sb2=\"0\"]){--rsb:0}:host([r-sa2=\"0\"]){--rsa:0}}@media (min-width:1024px){:host([r-ta3]){text-align:var(--text-align-large)}:host([r-d3]){display:var(--display-large)}:host([r-f3=\"1\"]){font-size:var(--f1)}:host([r-f3=\"2\"]){font-size:var(--f2)}:host([r-f3=\"3\"]){font-size:var(--f3)}:host([r-f3=\"4\"]){font-size:var(--f4)}:host([r-f3=\"5\"]){font-size:var(--f5)}:host([r-f3=\"6\"]){font-size:var(--f6)}.row.gap-large-1{--gap:var(--d1)}:host([r-p3=\"1\"]){padding:var(--d1)}:host([r-pt3=\"1\"]){padding-top:var(--d1)}:host([r-pl3=\"1\"]){padding-left:var(--d1)}:host([r-pb3=\"1\"]){padding-bottom:var(--d1)}:host([r-pr3=\"1\"]){padding-right:var(--d1)}:host([r-m3=\"1\"]){margin:var(--d1)}:host([r-mt3=\"1\"]){margin-top:var(--d1)}:host([r-ml3=\"1\"]){margin-left:var(--d1)}:host([r-mb3=\"1\"]){margin-bottom:var(--d1)}:host([r-mr3=\"1\"]){margin-right:var(--d1)}.row.gap-large-2{--gap:var(--d2)}:host([r-p3=\"2\"]){padding:var(--d2)}:host([r-pt3=\"2\"]){padding-top:var(--d2)}:host([r-pl3=\"2\"]){padding-left:var(--d2)}:host([r-pb3=\"2\"]){padding-bottom:var(--d2)}:host([r-pr3=\"2\"]){padding-right:var(--d2)}:host([r-m3=\"2\"]){margin:var(--d2)}:host([r-mt3=\"2\"]){margin-top:var(--d2)}:host([r-ml3=\"2\"]){margin-left:var(--d2)}:host([r-mb3=\"2\"]){margin-bottom:var(--d2)}:host([r-mr3=\"2\"]){margin-right:var(--d2)}.row.gap-large-3{--gap:var(--d3)}:host([r-p3=\"3\"]){padding:var(--d3)}:host([r-pt3=\"3\"]){padding-top:var(--d3)}:host([r-pl3=\"3\"]){padding-left:var(--d3)}:host([r-pb3=\"3\"]){padding-bottom:var(--d3)}:host([r-pr3=\"3\"]){padding-right:var(--d3)}:host([r-m3=\"3\"]){margin:var(--d3)}:host([r-mt3=\"3\"]){margin-top:var(--d3)}:host([r-ml3=\"3\"]){margin-left:var(--d3)}:host([r-mb3=\"3\"]){margin-bottom:var(--d3)}:host([r-mr3=\"3\"]){margin-right:var(--d3)}.row.gap-large-4{--gap:var(--d4)}:host([r-p3=\"4\"]){padding:var(--d4)}:host([r-pt3=\"4\"]){padding-top:var(--d4)}:host([r-pl3=\"4\"]){padding-left:var(--d4)}:host([r-pb3=\"4\"]){padding-bottom:var(--d4)}:host([r-pr3=\"4\"]){padding-right:var(--d4)}:host([r-m3=\"4\"]){margin:var(--d4)}:host([r-mt3=\"4\"]){margin-top:var(--d4)}:host([r-ml3=\"4\"]){margin-left:var(--d4)}:host([r-mb3=\"4\"]){margin-bottom:var(--d4)}:host([r-mr3=\"4\"]){margin-right:var(--d4)}.row.gap-large-5{--gap:var(--d5)}:host([r-p3=\"5\"]){padding:var(--d5)}:host([r-pt3=\"5\"]){padding-top:var(--d5)}:host([r-pl3=\"5\"]){padding-left:var(--d5)}:host([r-pb3=\"5\"]){padding-bottom:var(--d5)}:host([r-pr3=\"5\"]){padding-right:var(--d5)}:host([r-m3=\"5\"]){margin:var(--d5)}:host([r-mt3=\"5\"]){margin-top:var(--d5)}:host([r-ml3=\"5\"]){margin-left:var(--d5)}:host([r-mb3=\"5\"]){margin-bottom:var(--d5)}:host([r-mr3=\"5\"]){margin-right:var(--d5)}.row.gap-large-6{--gap:var(--d6)}:host([r-p3=\"6\"]){padding:var(--d6)}:host([r-pt3=\"6\"]){padding-top:var(--d6)}:host([r-pl3=\"6\"]){padding-left:var(--d6)}:host([r-pb3=\"6\"]){padding-bottom:var(--d6)}:host([r-pr3=\"6\"]){padding-right:var(--d6)}:host([r-m3=\"6\"]){margin:var(--d6)}:host([r-mt3=\"6\"]){margin-top:var(--d6)}:host([r-ml3=\"6\"]){margin-left:var(--d6)}:host([r-mb3=\"6\"]){margin-bottom:var(--d6)}:host([r-mr3=\"6\"]){margin-right:var(--d6)}:host([r-or3=\"12\"]){order:12}:host([r-c3=\"12\"]){--rc:12}:host([r-or3=\"11\"]){order:11}:host([r-c3=\"11\"]){--rc:11}:host([r-or3=\"10\"]){order:10}:host([r-c3=\"10\"]){--rc:10}:host([r-or3=\"9\"]){order:9}:host([r-c3=\"9\"]){--rc:9}:host([r-or3=\"8\"]){order:8}:host([r-c3=\"8\"]){--rc:8}:host([r-or3=\"7\"]){order:7}:host([r-c3=\"7\"]){--rc:7}:host([r-or3=\"6\"]){order:6}:host([r-c3=\"6\"]){--rc:6}:host([r-or3=\"5\"]){order:5}:host([r-c3=\"5\"]){--rc:5}:host([r-or3=\"4\"]){order:4}:host([r-c3=\"4\"]){--rc:4}:host([r-or3=\"3\"]){order:3}:host([r-c3=\"3\"]){--rc:3}:host([r-or3=\"2\"]){order:2}:host([r-c3=\"2\"]){--rc:2}:host([r-or3=\"1\"]){order:1}:host([r-c3=\"1\"]){--rc:1}:host([r-sb3=\"11\"]){--rsb:11}:host([r-sa3=\"11\"]){--rsa:11}:host([r-sb3=\"10\"]){--rsb:10}:host([r-sa3=\"10\"]){--rsa:10}:host([r-sb3=\"9\"]){--rsb:9}:host([r-sa3=\"9\"]){--rsa:9}:host([r-sb3=\"8\"]){--rsb:8}:host([r-sa3=\"8\"]){--rsa:8}:host([r-sb3=\"7\"]){--rsb:7}:host([r-sa3=\"7\"]){--rsa:7}:host([r-sb3=\"6\"]){--rsb:6}:host([r-sa3=\"6\"]){--rsa:6}:host([r-sb3=\"5\"]){--rsb:5}:host([r-sa3=\"5\"]){--rsa:5}:host([r-sb3=\"4\"]){--rsb:4}:host([r-sa3=\"4\"]){--rsa:4}:host([r-sb3=\"3\"]){--rsb:3}:host([r-sa3=\"3\"]){--rsa:3}:host([r-sb3=\"2\"]){--rsb:2}:host([r-sa3=\"2\"]){--rsa:2}:host([r-sb3=\"1\"]){--rsb:1}:host([r-sa3=\"1\"]){--rsa:1}:host([r-sb3=\"0\"]){--rsb:0}:host([r-sa3=\"0\"]){--rsa:0}}@media (min-width:1280px){:host([r-ta4]){text-align:var(--text-align-xlarge)}:host([r-d4]){display:var(--display-xlarge)}:host([r-f4=\"1\"]){font-size:var(--f1)}:host([r-f4=\"2\"]){font-size:var(--f2)}:host([r-f4=\"3\"]){font-size:var(--f3)}:host([r-f4=\"4\"]){font-size:var(--f4)}:host([r-f4=\"5\"]){font-size:var(--f5)}:host([r-f4=\"6\"]){font-size:var(--f6)}.row.gap-xlarge-1{--gap:var(--d1)}:host([r-p4=\"1\"]){padding:var(--d1)}:host([r-pt4=\"1\"]){padding-top:var(--d1)}:host([r-pl4=\"1\"]){padding-left:var(--d1)}:host([r-pb4=\"1\"]){padding-bottom:var(--d1)}:host([r-pr4=\"1\"]){padding-right:var(--d1)}:host([r-m4=\"1\"]){margin:var(--d1)}:host([r-mt4=\"1\"]){margin-top:var(--d1)}:host([r-ml4=\"1\"]){margin-left:var(--d1)}:host([r-mb4=\"1\"]){margin-bottom:var(--d1)}:host([r-mr4=\"1\"]){margin-right:var(--d1)}.row.gap-xlarge-2{--gap:var(--d2)}:host([r-p4=\"2\"]){padding:var(--d2)}:host([r-pt4=\"2\"]){padding-top:var(--d2)}:host([r-pl4=\"2\"]){padding-left:var(--d2)}:host([r-pb4=\"2\"]){padding-bottom:var(--d2)}:host([r-pr4=\"2\"]){padding-right:var(--d2)}:host([r-m4=\"2\"]){margin:var(--d2)}:host([r-mt4=\"2\"]){margin-top:var(--d2)}:host([r-ml4=\"2\"]){margin-left:var(--d2)}:host([r-mb4=\"2\"]){margin-bottom:var(--d2)}:host([r-mr4=\"2\"]){margin-right:var(--d2)}.row.gap-xlarge-3{--gap:var(--d3)}:host([r-p4=\"3\"]){padding:var(--d3)}:host([r-pt4=\"3\"]){padding-top:var(--d3)}:host([r-pl4=\"3\"]){padding-left:var(--d3)}:host([r-pb4=\"3\"]){padding-bottom:var(--d3)}:host([r-pr4=\"3\"]){padding-right:var(--d3)}:host([r-m4=\"3\"]){margin:var(--d3)}:host([r-mt4=\"3\"]){margin-top:var(--d3)}:host([r-ml4=\"3\"]){margin-left:var(--d3)}:host([r-mb4=\"3\"]){margin-bottom:var(--d3)}:host([r-mr4=\"3\"]){margin-right:var(--d3)}.row.gap-xlarge-4{--gap:var(--d4)}:host([r-p4=\"4\"]){padding:var(--d4)}:host([r-pt4=\"4\"]){padding-top:var(--d4)}:host([r-pl4=\"4\"]){padding-left:var(--d4)}:host([r-pb4=\"4\"]){padding-bottom:var(--d4)}:host([r-pr4=\"4\"]){padding-right:var(--d4)}:host([r-m4=\"4\"]){margin:var(--d4)}:host([r-mt4=\"4\"]){margin-top:var(--d4)}:host([r-ml4=\"4\"]){margin-left:var(--d4)}:host([r-mb4=\"4\"]){margin-bottom:var(--d4)}:host([r-mr4=\"4\"]){margin-right:var(--d4)}.row.gap-xlarge-5{--gap:var(--d5)}:host([r-p4=\"5\"]){padding:var(--d5)}:host([r-pt4=\"5\"]){padding-top:var(--d5)}:host([r-pl4=\"5\"]){padding-left:var(--d5)}:host([r-pb4=\"5\"]){padding-bottom:var(--d5)}:host([r-pr4=\"5\"]){padding-right:var(--d5)}:host([r-m4=\"5\"]){margin:var(--d5)}:host([r-mt4=\"5\"]){margin-top:var(--d5)}:host([r-ml4=\"5\"]){margin-left:var(--d5)}:host([r-mb4=\"5\"]){margin-bottom:var(--d5)}:host([r-mr4=\"5\"]){margin-right:var(--d5)}.row.gap-xlarge-6{--gap:var(--d6)}:host([r-p4=\"6\"]){padding:var(--d6)}:host([r-pt4=\"6\"]){padding-top:var(--d6)}:host([r-pl4=\"6\"]){padding-left:var(--d6)}:host([r-pb4=\"6\"]){padding-bottom:var(--d6)}:host([r-pr4=\"6\"]){padding-right:var(--d6)}:host([r-m4=\"6\"]){margin:var(--d6)}:host([r-mt4=\"6\"]){margin-top:var(--d6)}:host([r-ml4=\"6\"]){margin-left:var(--d6)}:host([r-mb4=\"6\"]){margin-bottom:var(--d6)}:host([r-mr4=\"6\"]){margin-right:var(--d6)}:host([r-or4=\"12\"]){order:12}:host([r-c4=\"12\"]){--rc:12}:host([r-or4=\"11\"]){order:11}:host([r-c4=\"11\"]){--rc:11}:host([r-or4=\"10\"]){order:10}:host([r-c4=\"10\"]){--rc:10}:host([r-or4=\"9\"]){order:9}:host([r-c4=\"9\"]){--rc:9}:host([r-or4=\"8\"]){order:8}:host([r-c4=\"8\"]){--rc:8}:host([r-or4=\"7\"]){order:7}:host([r-c4=\"7\"]){--rc:7}:host([r-or4=\"6\"]){order:6}:host([r-c4=\"6\"]){--rc:6}:host([r-or4=\"5\"]){order:5}:host([r-c4=\"5\"]){--rc:5}:host([r-or4=\"4\"]){order:4}:host([r-c4=\"4\"]){--rc:4}:host([r-or4=\"3\"]){order:3}:host([r-c4=\"3\"]){--rc:3}:host([r-or4=\"2\"]){order:2}:host([r-c4=\"2\"]){--rc:2}:host([r-or4=\"1\"]){order:1}:host([r-c4=\"1\"]){--rc:1}:host([r-sb4=\"11\"]){--rsb:11}:host([r-sa4=\"11\"]){--rsa:11}:host([r-sb4=\"10\"]){--rsb:10}:host([r-sa4=\"10\"]){--rsa:10}:host([r-sb4=\"9\"]){--rsb:9}:host([r-sa4=\"9\"]){--rsa:9}:host([r-sb4=\"8\"]){--rsb:8}:host([r-sa4=\"8\"]){--rsa:8}:host([r-sb4=\"7\"]){--rsb:7}:host([r-sa4=\"7\"]){--rsa:7}:host([r-sb4=\"6\"]){--rsb:6}:host([r-sa4=\"6\"]){--rsa:6}:host([r-sb4=\"5\"]){--rsb:5}:host([r-sa4=\"5\"]){--rsa:5}:host([r-sb4=\"4\"]){--rsb:4}:host([r-sa4=\"4\"]){--rsa:4}:host([r-sb4=\"3\"]){--rsb:3}:host([r-sa4=\"3\"]){--rsa:3}:host([r-sb4=\"2\"]){--rsb:2}:host([r-sa4=\"2\"]){--rsa:2}:host([r-sb4=\"1\"]){--rsb:1}:host([r-sa4=\"1\"]){--rsa:1}:host([r-sb4=\"0\"]){--rsb:0}:host([r-sa4=\"0\"]){--rsa:0}}", sheet = new CSSStyleSheet();
|
|
3
|
+
sheet.replaceSync(grid_default);
|
|
4
|
+
var grid_style_default = sheet;
|
|
5
|
+
const GlobalValues = [
|
|
6
|
+
"inherit",
|
|
7
|
+
"initial",
|
|
8
|
+
"revert",
|
|
9
|
+
"revert-layer",
|
|
10
|
+
"unset"
|
|
11
|
+
], ObservedElemAttributes = [
|
|
12
|
+
"display",
|
|
13
|
+
"font",
|
|
14
|
+
"text-align",
|
|
15
|
+
"padding",
|
|
16
|
+
"padding-top",
|
|
17
|
+
"padding-right",
|
|
18
|
+
"padding-bottom",
|
|
19
|
+
"padding-left",
|
|
20
|
+
"margin",
|
|
21
|
+
"margin-top",
|
|
22
|
+
"margin-right",
|
|
23
|
+
"margin-bottom",
|
|
24
|
+
"margin-left"
|
|
25
|
+
], ObservedGridAttributes = [
|
|
26
|
+
"row",
|
|
27
|
+
"cell",
|
|
28
|
+
"col",
|
|
29
|
+
"display",
|
|
30
|
+
"text-align",
|
|
31
|
+
"order",
|
|
32
|
+
"skip-before",
|
|
33
|
+
"skip-after",
|
|
34
|
+
"gap",
|
|
35
|
+
"padding",
|
|
36
|
+
"font"
|
|
37
|
+
], MediaSizes = [
|
|
38
|
+
"small",
|
|
39
|
+
"medium",
|
|
40
|
+
"large",
|
|
41
|
+
"xlarge"
|
|
42
|
+
], DimensionSizes = [
|
|
43
|
+
"none",
|
|
44
|
+
"small",
|
|
45
|
+
"medium",
|
|
46
|
+
"large",
|
|
47
|
+
"xlarge",
|
|
48
|
+
"xxlarge"
|
|
49
|
+
], DisplayValues = [
|
|
50
|
+
"none",
|
|
51
|
+
"block",
|
|
52
|
+
"flex",
|
|
53
|
+
"grid",
|
|
54
|
+
"inline",
|
|
55
|
+
"inline-block",
|
|
56
|
+
"inline-flex",
|
|
57
|
+
"inline-grid",
|
|
58
|
+
"flow-root",
|
|
59
|
+
"contents",
|
|
60
|
+
"table",
|
|
61
|
+
"table-row",
|
|
62
|
+
"list-item",
|
|
63
|
+
...GlobalValues
|
|
64
|
+
], TextAlignValues = [
|
|
65
|
+
"start",
|
|
66
|
+
"end",
|
|
67
|
+
"left",
|
|
68
|
+
"right",
|
|
69
|
+
"center",
|
|
70
|
+
"justify",
|
|
71
|
+
"match-parent"
|
|
72
|
+
], FontSizes = [
|
|
73
|
+
"xsmall",
|
|
74
|
+
"small",
|
|
75
|
+
"medium",
|
|
76
|
+
"large",
|
|
77
|
+
"xlarge",
|
|
78
|
+
"xxlarge"
|
|
79
|
+
], isElemAttribute = (e) => ObservedElemAttributes.includes(e), isGridAttribute = (e) => ObservedGridAttributes.includes(e);
|
|
80
|
+
var getValidNumber = (e) => {
|
|
81
|
+
let b = parseInt(e.trim());
|
|
82
|
+
return b === void 0 ? null : String(b);
|
|
83
|
+
}, getValidDisplay = (e) => {
|
|
84
|
+
let b = e.trim().toLowerCase();
|
|
85
|
+
return DisplayValues.includes(b) ? b : null;
|
|
86
|
+
}, getValidDimension = (e) => {
|
|
87
|
+
let b = e.trim().toLowerCase();
|
|
88
|
+
return DimensionSizes.includes(b) ? String(DimensionSizes.indexOf(b)) : null;
|
|
89
|
+
}, getValidTextAlign = (e) => {
|
|
90
|
+
let b = e.trim().toLowerCase();
|
|
91
|
+
return TextAlignValues.includes(b) ? b : null;
|
|
92
|
+
}, getValidFont = (e) => {
|
|
93
|
+
let b = e.trim().toLowerCase();
|
|
94
|
+
return FontSizes.includes(b) ? String(FontSizes.indexOf(b)) : null;
|
|
95
|
+
};
|
|
96
|
+
const getGridAttributeValue = {
|
|
97
|
+
row: "boolean",
|
|
98
|
+
cell: "boolean",
|
|
99
|
+
"text-align": getValidTextAlign,
|
|
100
|
+
"skip-before": getValidNumber,
|
|
101
|
+
"skip-after": getValidNumber,
|
|
102
|
+
col: getValidNumber,
|
|
103
|
+
gap: getValidDimension,
|
|
104
|
+
font: getValidFont,
|
|
105
|
+
order: getValidNumber,
|
|
106
|
+
display: getValidDisplay,
|
|
107
|
+
padding: getValidDimension
|
|
108
|
+
}, getElemAttributeValue = {
|
|
109
|
+
font: getValidFont,
|
|
110
|
+
margin: getValidDimension,
|
|
111
|
+
padding: getValidDimension,
|
|
112
|
+
display: getValidDisplay,
|
|
113
|
+
"text-align": getValidTextAlign,
|
|
114
|
+
"margin-top": getValidDimension,
|
|
115
|
+
"margin-right": getValidDimension,
|
|
116
|
+
"margin-bottom": getValidDimension,
|
|
117
|
+
"margin-left": getValidDimension,
|
|
118
|
+
"padding-top": getValidDimension,
|
|
119
|
+
"padding-right": getValidDimension,
|
|
120
|
+
"padding-bottom": getValidDimension,
|
|
121
|
+
"padding-left": getValidDimension
|
|
122
|
+
}, gridAttrShort = {
|
|
123
|
+
font: "f",
|
|
124
|
+
padding: "p",
|
|
125
|
+
display: "d",
|
|
126
|
+
row: "row",
|
|
127
|
+
cell: "cell",
|
|
128
|
+
col: "c",
|
|
129
|
+
gap: "g",
|
|
130
|
+
order: "or",
|
|
131
|
+
"skip-before": "sb",
|
|
132
|
+
"skip-after": "sa",
|
|
133
|
+
"text-align": "ta"
|
|
134
|
+
}, elmAttrShort = {
|
|
135
|
+
font: "f",
|
|
136
|
+
margin: "m",
|
|
137
|
+
padding: "p",
|
|
138
|
+
display: "d",
|
|
139
|
+
"text-align": "ta",
|
|
140
|
+
"margin-top": "mt",
|
|
141
|
+
"margin-right": "mr",
|
|
142
|
+
"margin-bottom": "mb",
|
|
143
|
+
"margin-left": "ml",
|
|
144
|
+
"padding-top": "pt",
|
|
145
|
+
"padding-right": "pr",
|
|
146
|
+
"padding-bottom": "pb",
|
|
147
|
+
"padding-left": "pl"
|
|
148
|
+
}, getClasses = (e, b, x) => {
|
|
149
|
+
let S = [];
|
|
150
|
+
for (let C of e) if (b[C] !== void 0) {
|
|
151
|
+
let e = x[C];
|
|
152
|
+
e === "boolean" ? S.push(`${C}`) : b[C].split(" ").filter(Boolean).forEach((b, x) => {
|
|
153
|
+
let w = MediaSizes[x], T = e(b);
|
|
154
|
+
w && T && S.push(`${C}-${w}-${T}`);
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
return S;
|
|
158
|
+
}, getHostAttributes = (e, b, x, S) => {
|
|
159
|
+
let C = {};
|
|
160
|
+
for (let w of e) if (MediaSizes.forEach((e, b) => {
|
|
161
|
+
C[`r-${S[w]}${b + 1}`] = void 0;
|
|
162
|
+
}), b[w] !== void 0) {
|
|
163
|
+
let e = x[w];
|
|
164
|
+
e === "boolean" ? C[`r-${w}`] = w : b[w].split(" ").filter(Boolean).forEach((b, x) => {
|
|
165
|
+
let T = MediaSizes[x], E = e(b);
|
|
166
|
+
T && E && (C[`r-${S[w]}${x + 1}`] = E);
|
|
167
|
+
});
|
|
168
|
+
}
|
|
169
|
+
return Object.entries(C);
|
|
170
|
+
}, getHostCSS = (e, b, x) => {
|
|
171
|
+
let S = {};
|
|
172
|
+
for (let C of e) if (MediaSizes.forEach((e) => {
|
|
173
|
+
S[`--${C}-${e}`] = void 0;
|
|
174
|
+
}), b[C] !== void 0) {
|
|
175
|
+
let e = x[C];
|
|
176
|
+
e !== "boolean" && b[C].split(" ").filter(Boolean).forEach((b, x) => {
|
|
177
|
+
let w = MediaSizes[x], T = e(b);
|
|
178
|
+
w && T && (S[`--${C}-${w}`] = T);
|
|
179
|
+
});
|
|
180
|
+
}
|
|
181
|
+
return Object.entries(S);
|
|
182
|
+
};
|
|
183
|
+
var GridElement = class extends HTMLElement {
|
|
184
|
+
static observedAttributes = ObservedGridAttributes;
|
|
185
|
+
attr = {};
|
|
186
|
+
mainSlot = () => this.shadowRoot?.querySelector("slot") || null;
|
|
187
|
+
container = () => this.shadowRoot?.firstElementChild || null;
|
|
188
|
+
constructor() {
|
|
189
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [grid_style_default];
|
|
190
|
+
}
|
|
191
|
+
detectRowChange() {
|
|
192
|
+
let e = this.mainSlot(), b = this.container();
|
|
193
|
+
if (!e || !b) return;
|
|
194
|
+
let x = e.assignedElements().some((e) => e.matches("r-grid")), S = this.attr.row !== "row" && x, C = this.attr.row === "row" && !x;
|
|
195
|
+
return S && (this.attr.row = "row"), C && delete this.attr.row, S || C;
|
|
196
|
+
}
|
|
197
|
+
detectCellChange() {
|
|
198
|
+
let e = this.parentElement?.matches("r-grid"), b = this.attr.cell !== "cell" && e, x = this.attr.cell === "cell" && !e;
|
|
199
|
+
return b && (this.attr.cell = "cell"), x && delete this.attr.cell, b || x;
|
|
200
|
+
}
|
|
201
|
+
attributeChangedCallback(e, b, x) {
|
|
202
|
+
isGridAttribute(e) && (this.attr[e] = x, this.render());
|
|
203
|
+
}
|
|
204
|
+
connectedMoveCallback() {
|
|
205
|
+
this.detectCellChange();
|
|
206
|
+
}
|
|
207
|
+
connectedCallback() {
|
|
208
|
+
this.mainSlot()?.addEventListener("slotchange", () => {
|
|
209
|
+
this.detectRowChange() && this.render();
|
|
210
|
+
}), this.render();
|
|
211
|
+
let e = this.detectRowChange(), b = this.detectCellChange();
|
|
212
|
+
(e || b) && this.render();
|
|
213
|
+
}
|
|
214
|
+
render() {
|
|
215
|
+
let e = getClasses(["row", "gap"], this.attr, getGridAttributeValue), b = getHostAttributes(ObservedGridAttributes, this.attr, getGridAttributeValue, gridAttrShort);
|
|
216
|
+
getHostCSS(["display", "text-align"], this.attr, getGridAttributeValue).forEach(([e, b]) => {
|
|
217
|
+
b && this.style.setProperty(e, b), b === void 0 && this.style.removeProperty(e);
|
|
218
|
+
}), b.forEach(([e, b]) => {
|
|
219
|
+
b && this.setAttribute(e, b), b === void 0 && this.removeAttribute(e);
|
|
220
|
+
}), this.shadowRoot.innerHTML = `
|
|
221
|
+
<div class="${e.join(" ")}"><slot></slot></div>
|
|
222
|
+
`;
|
|
223
|
+
}
|
|
224
|
+
};
|
|
225
|
+
customElements.define("r-grid", GridElement);
|
|
226
|
+
var ResponsiveElement = class extends HTMLElement {
|
|
227
|
+
static observedAttributes = ObservedElemAttributes;
|
|
228
|
+
attr = {};
|
|
229
|
+
constructor() {
|
|
230
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [grid_style_default];
|
|
231
|
+
}
|
|
232
|
+
attributeChangedCallback(e, b, x) {
|
|
233
|
+
isElemAttribute(e) && (this.attr[e] = x, this.render());
|
|
234
|
+
}
|
|
235
|
+
connectedCallback() {
|
|
236
|
+
this.render();
|
|
237
|
+
}
|
|
238
|
+
render() {
|
|
239
|
+
let e = getHostAttributes(ObservedElemAttributes, this.attr, getElemAttributeValue, elmAttrShort);
|
|
240
|
+
getHostCSS(["display", "text-align"], this.attr, getElemAttributeValue).forEach(([e, b]) => {
|
|
241
|
+
b && this.style.setProperty(e, b), b === void 0 && this.style.removeProperty(e);
|
|
242
|
+
}), e.forEach(([e, b]) => {
|
|
243
|
+
b && this.setAttribute(e, b), b === void 0 && this.removeAttribute(e);
|
|
244
|
+
}), this.shadowRoot.innerHTML = "<slot></slot>";
|
|
245
|
+
}
|
|
246
|
+
};
|
|
247
|
+
customElements.define("r-elm", ResponsiveElement);
|
|
248
|
+
export { GridElement, ResponsiveElement };
|
|
249
|
+
|
|
250
|
+
//# sourceMappingURL=rezel.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rezel.es.js","names":["getGridAttributeValue: AttrValidations<ObservedGridAttribute>","getElemAttributeValue: AttrValidations<ObservedElemAttribute>","gridAttrShort: Record<ObservedGridAttribute, string>","elmAttrShort: Record<ObservedElemAttribute, string>","classes: string[]","hostAttributes: Record<string, string | undefined>","hostCSS: Record<string, string | undefined>"],"sources":["../src/grid.scss?inline","../src/grid-style.ts","../src/util.ts","../src/components/grid-element.ts","../src/components/resonsive-element.ts"],"sourcesContent":["@use 'sass:map';\r\n@use 'sass:math';\r\n@use 'sass:list';\r\n\r\n$mediaSizes: (\r\n small: 0px,\r\n medium: 768px,\r\n large: 1024px,\r\n xlarge: 1280px,\r\n);\r\n$dimensions: 'none', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n$fonts: 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n\r\n:host {\r\n --d0: var(--rezel-dim-none, 0px);\r\n --d1: var(--rezel-dim-small, 4px);\r\n --d2: var(--rezel-dim-medium, 8px);\r\n --d3: var(--rezel-dim-large, 16px);\r\n --d4: var(--rezel-dim-xlarge, 32px);\r\n --d5: var(--rezel-dim-xxlarge, 64px);\r\n --f0: var(--rezel-font-xsmall, 12px);\r\n --f1: var(--rezel-font-small, 14px);\r\n --f2: var(--rezel-font-medium, 16px);\r\n --f3: var(--rezel-font-large, 24px);\r\n --f4: var(--rezel-font-xlarge, 32px);\r\n --f5: var(--rezel-font-xxlarge, 40px);\r\n display: block;\r\n box-sizing: border-box !important;\r\n}\r\n\r\nslot {\r\n display: contents !important;\r\n}\r\n\r\n.row {\r\n box-sizing: border-box;\r\n justify-content: flex-start;\r\n gap: var(--gap);\r\n --gap: 0px;\r\n flex-flow: wrap;\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n}\r\n\r\n.cell {\r\n box-sizing: border-box;\r\n}\r\n\r\n:host([r-cell]) {\r\n flex: auto;\r\n}\r\n\r\n::slotted(hr) {\r\n width: 100%;\r\n}\r\n\r\n:host([r-c1]),\r\n:host([r-c2]),\r\n:host([r-c3]),\r\n:host([r-c4]) {\r\n flex: 100%;\r\n max-width: calc(((var(--rc) / 12) * 100%) - var(--gap) * (calc((12 - var(--rc)) / 12)));\r\n}\r\n\r\n:host([r-sb1]),\r\n:host([r-sb2]),\r\n:host([r-sb3]),\r\n:host([r-sb4]) {\r\n margin-left: calc(((var(--rsb) / 12) * 100%) + var(--gap) * (calc(var(--rsb) / 12)));\r\n}\r\n\r\n:host([r-sa1]),\r\n:host([r-sa2]),\r\n:host([r-sa3]),\r\n:host([r-sa4]) {\r\n margin-right: calc(((var(--rsa) / 12) * 100%) + var(--gap) * (calc(var(--rsa) / 12)));\r\n}\r\n\r\n@each $mediaName, $mediaSize in $mediaSizes {\r\n $mIndex: list.index(map.keys($mediaSizes), $mediaName);\r\n\r\n @media (min-width: #{$mediaSize}) {\r\n :host([r-ta#{$mIndex}]) {\r\n text-align: var(--text-align-#{$mediaName});\r\n }\r\n :host([r-d#{$mIndex}]) {\r\n display: var(--display-#{$mediaName});\r\n }\r\n\r\n @each $font in $fonts {\r\n $fIndex: list.index($fonts, $font);\r\n\r\n :host([r-f#{$mIndex}='#{$fIndex}']) {\r\n font-size: var(--f#{$fIndex});\r\n }\r\n }\r\n @each $dimension in $dimensions {\r\n $dIndex: list.index($dimensions, $dimension);\r\n\r\n .row.gap-#{$mediaName}-#{$dIndex} {\r\n --gap: var(--d#{$dIndex});\r\n }\r\n :host([r-p#{$mIndex}='#{$dIndex}']) {\r\n padding: var(--d#{$dIndex});\r\n }\r\n :host([r-pt#{$mIndex}='#{$dIndex}']) {\r\n padding-top: var(--d#{$dIndex});\r\n }\r\n :host([r-pl#{$mIndex}='#{$dIndex}']) {\r\n padding-left: var(--d#{$dIndex});\r\n }\r\n :host([r-pb#{$mIndex}='#{$dIndex}']) {\r\n padding-bottom: var(--d#{$dIndex});\r\n }\r\n :host([r-pr#{$mIndex}='#{$dIndex}']) {\r\n padding-right: var(--d#{$dIndex});\r\n }\r\n :host([r-m#{$mIndex}='#{$dIndex}']) {\r\n margin: var(--d#{$dIndex});\r\n }\r\n :host([r-mt#{$mIndex}='#{$dIndex}']) {\r\n margin-top: var(--d#{$dIndex});\r\n }\r\n :host([r-ml#{$mIndex}='#{$dIndex}']) {\r\n margin-left: var(--d#{$dIndex});\r\n }\r\n :host([r-mb#{$mIndex}='#{$dIndex}']) {\r\n margin-bottom: var(--d#{$dIndex});\r\n }\r\n :host([r-mr#{$mIndex}='#{$dIndex}']) {\r\n margin-right: var(--d#{$dIndex});\r\n }\r\n }\r\n\r\n @for $i from 12 through 1 {\r\n :host([r-or#{$mIndex}='#{$i}']) {\r\n order: #{$i};\r\n }\r\n :host([r-c#{$mIndex}='#{$i}']) {\r\n --rc: #{$i};\r\n }\r\n }\r\n @for $i from 11 through 0 {\r\n :host([r-sb#{$mIndex}='#{$i}']) {\r\n --rsb: #{$i};\r\n }\r\n :host([r-sa#{$mIndex}='#{$i}']) {\r\n --rsa: #{$i};\r\n }\r\n }\r\n }\r\n}\r\n","import gridStyles from \"./grid.scss?inline\";\r\n\r\nconst sheet = new CSSStyleSheet();\r\nsheet.replaceSync(gridStyles);\r\n\r\nexport default sheet;\r\n","type AttrValues<K extends string> = Partial<Record<K, string | undefined>>;\r\ntype AttrValidations<K extends string> = Record<K, 'boolean' | ((val: string) => string | null)>;\r\n\r\nexport const GlobalValues = ['inherit', 'initial', 'revert', 'revert-layer', 'unset'] as const;\r\n\r\nexport const ObservedElemAttributes = [\r\n 'display',\r\n 'font',\r\n 'text-align',\r\n 'padding',\r\n 'padding-top',\r\n 'padding-right',\r\n 'padding-bottom',\r\n 'padding-left',\r\n 'margin',\r\n 'margin-top',\r\n 'margin-right',\r\n 'margin-bottom',\r\n 'margin-left',\r\n] as const;\r\nexport const ObservedGridAttributes = [\r\n 'row',\r\n 'cell',\r\n 'col',\r\n 'display',\r\n 'text-align',\r\n 'order',\r\n 'skip-before',\r\n 'skip-after',\r\n 'gap',\r\n 'padding',\r\n 'font',\r\n] as const;\r\nexport const MediaSizes = ['small', 'medium', 'large', 'xlarge'] as const;\r\nexport const DimensionSizes = ['none', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;\r\nexport const DisplayValues = [\r\n 'none',\r\n 'block',\r\n 'flex',\r\n 'grid',\r\n 'inline',\r\n 'inline-block',\r\n 'inline-flex',\r\n 'inline-grid',\r\n 'flow-root',\r\n 'contents',\r\n 'table',\r\n 'table-row',\r\n 'list-item',\r\n ...GlobalValues,\r\n] as const;\r\nexport const TextAlignValues = [\r\n 'start',\r\n 'end',\r\n 'left',\r\n 'right',\r\n 'center',\r\n 'justify',\r\n 'match-parent',\r\n] as const;\r\nexport const FontSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;\r\n\r\nexport type ObservedGridAttribute = (typeof ObservedGridAttributes)[number];\r\nexport type ObservedElemAttribute = (typeof ObservedElemAttributes)[number];\r\n\r\nexport type DimensionSize = (typeof DimensionSizes)[number];\r\nexport type DisplayValue = (typeof DisplayValues)[number];\r\nexport type TextAlignValue = (typeof TextAlignValues)[number];\r\nexport type FontSize = (typeof FontSizes)[number];\r\n\r\nexport const isElemAttribute = (name: string): name is ObservedElemAttribute =>\r\n ObservedElemAttributes.includes(name as ObservedElemAttribute);\r\n\r\nexport const isGridAttribute = (name: string): name is ObservedGridAttribute =>\r\n ObservedGridAttributes.includes(name as ObservedGridAttribute);\r\n\r\nconst getValidNumber = (val: string): string | null => {\r\n const value = parseInt(val.trim());\r\n return value !== undefined ? String(value) : null;\r\n};\r\n\r\nconst getValidDisplay = (val: string): string | null => {\r\n const value = val.trim().toLowerCase();\r\n return DisplayValues.includes(value as DisplayValue) ? (value as DisplayValue) : null;\r\n};\r\n\r\nconst getValidDimension = (val: string): string | null => {\r\n const value = val.trim().toLowerCase();\r\n return DimensionSizes.includes(value as DimensionSize)\r\n ? String(DimensionSizes.indexOf(value as DimensionSize))\r\n : null;\r\n};\r\n\r\nconst getValidTextAlign = (val: string): TextAlignValue | null => {\r\n const value = val.trim().toLowerCase();\r\n return TextAlignValues.includes(value as TextAlignValue) ? (value as TextAlignValue) : null;\r\n};\r\n\r\nconst getValidFont = (val: string): string | null => {\r\n const value = val.trim().toLowerCase();\r\n return FontSizes.includes(value as FontSize)\r\n ? String(FontSizes.indexOf(value as FontSize))\r\n : null;\r\n};\r\n\r\nexport type GridAttributeValues = AttrValues<ObservedGridAttribute>;\r\nexport type ElemAttributeValues = AttrValues<ObservedElemAttribute>;\r\n\r\nexport const getGridAttributeValue: AttrValidations<ObservedGridAttribute> = {\r\n row: 'boolean',\r\n cell: 'boolean',\r\n 'text-align': getValidTextAlign,\r\n 'skip-before': getValidNumber,\r\n 'skip-after': getValidNumber,\r\n col: getValidNumber,\r\n gap: getValidDimension,\r\n font: getValidFont,\r\n order: getValidNumber,\r\n display: getValidDisplay,\r\n padding: getValidDimension,\r\n};\r\n\r\nexport const getElemAttributeValue: AttrValidations<ObservedElemAttribute> = {\r\n font: getValidFont,\r\n margin: getValidDimension,\r\n padding: getValidDimension,\r\n display: getValidDisplay,\r\n 'text-align': getValidTextAlign,\r\n 'margin-top': getValidDimension,\r\n 'margin-right': getValidDimension,\r\n 'margin-bottom': getValidDimension,\r\n 'margin-left': getValidDimension,\r\n 'padding-top': getValidDimension,\r\n 'padding-right': getValidDimension,\r\n 'padding-bottom': getValidDimension,\r\n 'padding-left': getValidDimension,\r\n};\r\n\r\nexport const gridAttrShort: Record<ObservedGridAttribute, string> = {\r\n font: 'f',\r\n padding: 'p',\r\n display: 'd',\r\n row: 'row',\r\n cell: 'cell',\r\n col: 'c',\r\n gap: 'g',\r\n order: 'or',\r\n 'skip-before': 'sb',\r\n 'skip-after': 'sa',\r\n 'text-align': 'ta',\r\n};\r\n\r\nexport const elmAttrShort: Record<ObservedElemAttribute, string> = {\r\n font: 'f',\r\n margin: 'm',\r\n padding: 'p',\r\n display: 'd',\r\n 'text-align': 'ta',\r\n 'margin-top': 'mt',\r\n 'margin-right': 'mr',\r\n 'margin-bottom': 'mb',\r\n 'margin-left': 'ml',\r\n 'padding-top': 'pt',\r\n 'padding-right': 'pr',\r\n 'padding-bottom': 'pb',\r\n 'padding-left': 'pl',\r\n};\r\n\r\nexport const getClasses = <K extends string>(\r\n attrNames: readonly K[],\r\n attrs: AttrValues<K>,\r\n validations: AttrValidations<K>,\r\n) => {\r\n const classes: string[] = [];\r\n for (const attr of attrNames) {\r\n if (attrs[attr] !== undefined) {\r\n const validation = validations[attr];\r\n if (validation === 'boolean') {\r\n classes.push(`${attr}`);\r\n } else {\r\n const values = attrs[attr].split(' ').filter(Boolean);\r\n values.forEach((val, i) => {\r\n const mediaSize = MediaSizes[i];\r\n const value = validation(val);\r\n if (mediaSize && value) {\r\n classes.push(`${attr}-${mediaSize}-${value}`);\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n return classes;\r\n};\r\n\r\nexport const getHostAttributes = <K extends string>(\r\n attrNames: readonly K[],\r\n attrs: AttrValues<K>,\r\n validations: AttrValidations<K>,\r\n short: Record<K, string>,\r\n) => {\r\n const hostAttributes: Record<string, string | undefined> = {};\r\n\r\n for (const attr of attrNames) {\r\n MediaSizes.forEach((_mediaSize, i) => {\r\n hostAttributes[`r-${short[attr]}${i + 1}`] = undefined;\r\n });\r\n\r\n if (attrs[attr] !== undefined) {\r\n const validation = validations[attr];\r\n if (validation === 'boolean') {\r\n hostAttributes[`r-${attr}`] = attr;\r\n } else {\r\n const values = attrs[attr].split(' ').filter(Boolean);\r\n values.forEach((val, i) => {\r\n const mediaSize = MediaSizes[i];\r\n const value = validation(val);\r\n if (mediaSize && value) {\r\n hostAttributes[`r-${short[attr]}${i + 1}`] = value;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n return Object.entries(hostAttributes);\r\n};\r\n\r\nexport const getHostCSS = <K extends string>(\r\n attrNames: readonly K[],\r\n attrs: AttrValues<K>,\r\n validations: AttrValidations<K>,\r\n) => {\r\n const hostCSS: Record<string, string | undefined> = {};\r\n\r\n for (const attr of attrNames) {\r\n MediaSizes.forEach((mediaSize) => {\r\n hostCSS[`--${attr}-${mediaSize}`] = undefined;\r\n });\r\n\r\n if (attrs[attr] !== undefined) {\r\n const validation = validations[attr];\r\n if (validation !== 'boolean') {\r\n const values = attrs[attr].split(' ').filter(Boolean);\r\n values.forEach((val, i) => {\r\n const mediaSize = MediaSizes[i];\r\n const value = validation(val);\r\n if (mediaSize && value) {\r\n hostCSS[`--${attr}-${mediaSize}`] = value;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n return Object.entries(hostCSS);\r\n};\r\n","import sheet from '../grid-style';\r\nimport {\r\n getClasses,\r\n getGridAttributeValue as getValues,\r\n getHostAttributes,\r\n isGridAttribute,\r\n ObservedGridAttributes as Attributes,\r\n getHostCSS,\r\n gridAttrShort,\r\n} from '../util';\r\nimport type { GridAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} skip-before - skip the given columns before the element for each breakpoint (Integers)\r\n * @attr {string} skip-after - skip the given columns after the element for each breakpoint (Integers)\r\n * @attr {string} display - set element's display value for each breakpoint\r\n * @attr {string} padding - set element's padding for each breakpoint (Dimension values)\r\n * @attr {string} order - set element's flex order for each breakpoint (Integers)\r\n * @attr {string} font - set element's font-size for each breakpoint (Font values)\r\n * @attr {string} col - set element's column spans for each breakpoint (Integers)\r\n * @attr {string} gap - set element's flex gap for each breakpoint (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-grid\r\n */\r\nexport class GridElement extends HTMLElement {\r\n static observedAttributes = Attributes;\r\n\r\n /**\r\n * @internal\r\n */\r\n private attr: Partial<GridAttributeValues> = {};\r\n\r\n /**\r\n * @internal\r\n */\r\n private readonly mainSlot = (): HTMLSlotElement | null =>\r\n this.shadowRoot?.querySelector('slot') || null;\r\n /**\r\n * @internal\r\n */\r\n private readonly container = (): Element | null => this.shadowRoot?.firstElementChild || null;\r\n\r\n constructor() {\r\n super();\r\n this.attachShadow({ mode: 'open' });\r\n this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n private detectRowChange() {\r\n const slot = this.mainSlot();\r\n const container = this.container();\r\n\r\n if (!slot || !container) return;\r\n\r\n const tenants = slot.assignedElements();\r\n const isRow = tenants.some((el) => el.matches('r-grid'));\r\n const isNowRow = this.attr.row !== 'row' && isRow;\r\n const noLongerRow = this.attr.row === 'row' && !isRow;\r\n\r\n if (isNowRow) this.attr.row = 'row';\r\n if (noLongerRow) delete this.attr.row;\r\n return isNowRow || noLongerRow;\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n private detectCellChange() {\r\n const isCell = this.parentElement?.matches('r-grid');\r\n const isNowCell = this.attr.cell !== 'cell' && isCell;\r\n const noLongerCell = this.attr.cell === 'cell' && !isCell;\r\n\r\n if (isNowCell) this.attr.cell = 'cell';\r\n if (noLongerCell) delete this.attr.cell;\r\n return isNowCell || noLongerCell;\r\n }\r\n\r\n attributeChangedCallback(name: string, _old: string, value: string) {\r\n if (isGridAttribute(name)) {\r\n this.attr[name] = value;\r\n this.render();\r\n }\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n connectedMoveCallback() {\r\n this.detectCellChange();\r\n }\r\n\r\n connectedCallback() {\r\n this.mainSlot()?.addEventListener('slotchange', () => {\r\n if (this.detectRowChange()) this.render();\r\n });\r\n\r\n this.render();\r\n const hasRowChange = this.detectRowChange();\r\n const hasCellChange = this.detectCellChange();\r\n if (hasRowChange || hasCellChange) this.render();\r\n }\r\n\r\n render() {\r\n const classes = getClasses(['row', 'gap'], this.attr, getValues);\r\n const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, gridAttrShort);\r\n const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n hostCSS.forEach(([attr, value]) => {\r\n if (value) this.style.setProperty(attr, value);\r\n if (value === undefined) this.style.removeProperty(attr);\r\n });\r\n\r\n hostAttributes.forEach(([attr, value]) => {\r\n if (value) this.setAttribute(attr, value);\r\n if (value === undefined) this.removeAttribute(attr);\r\n });\r\n\r\n this.shadowRoot!.innerHTML = `\r\n <div class=\"${classes.join(' ')}\"><slot></slot></div>\r\n `;\r\n }\r\n}\r\n\r\ncustomElements.define('r-grid', GridElement);\r\n","import sheet from '../grid-style';\r\nimport {\r\n getElemAttributeValue as getValues,\r\n getHostAttributes,\r\n isElemAttribute,\r\n ObservedElemAttributes as Attributes,\r\n getHostCSS,\r\n elmAttrShort,\r\n} from '../util';\r\nimport type { ElemAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} display - set element's display value for each breakpoint, space-separated\r\n * @attr {string} font - set element's font-size for each breakpoint, space-separated (Font values)\r\n * @attr {string} padding - set element's padding for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin - set element's margin for each breakpoint, space-separated (Integers)\r\n * @attr {string} margin-top - set element's margin-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-right - set element's margin-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-bottom - set element's margin-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-left - set element's margin-left for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-top - set element's padding-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-right - set element's padding-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-bottom - set element's padding-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-left - set element's padding-left for each breakpoint, space-separated (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-elm\r\n */\r\nexport class ResponsiveElement extends HTMLElement {\r\n static observedAttributes = Attributes;\r\n private attr: Partial<ElemAttributeValues> = {};\r\n\r\n constructor() {\r\n super();\r\n this.attachShadow({ mode: 'open' });\r\n this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n }\r\n\r\n attributeChangedCallback(name: string, _old: string, value: string) {\r\n if (isElemAttribute(name)) {\r\n this.attr[name] = value;\r\n this.render();\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.render();\r\n }\r\n\r\n render() {\r\n const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, elmAttrShort);\r\n const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n hostCSS.forEach(([attr, value]) => {\r\n if (value) this.style.setProperty(attr, value);\r\n if (value === undefined) this.style.removeProperty(attr);\r\n });\r\n\r\n hostAttributes.forEach(([attr, value]) => {\r\n if (value) this.setAttribute(attr, value);\r\n if (value === undefined) this.removeAttribute(attr);\r\n });\r\n\r\n this.shadowRoot!.innerHTML = `<slot></slot>`;\r\n }\r\n}\r\n\r\ncustomElements.define('r-elm', ResponsiveElement);\r\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,26 +1,38 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rezel",
|
|
3
3
|
"description": "custom elements with responsive attributes",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.5",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist"
|
|
8
8
|
],
|
|
9
|
-
"main": "./dist/
|
|
10
|
-
"module": "./dist/
|
|
9
|
+
"main": "./dist/rezel.cjs.js",
|
|
10
|
+
"module": "./dist/rezel.es.js",
|
|
11
|
+
"types": "./dist/rezel.d.ts",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"types": "./dist/rezel.d.ts",
|
|
15
|
+
"import": "./dist/rezel.es.js",
|
|
16
|
+
"require": "./dist/rezel.cjs.js"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
11
19
|
"scripts": {
|
|
12
20
|
"dev": "vite",
|
|
13
21
|
"build-manifest": "custom-elements-manifest analyze",
|
|
22
|
+
"tsc": "tsc",
|
|
14
23
|
"build": "tsc && npm run build-manifest && vite build",
|
|
15
24
|
"preview": "vite preview"
|
|
16
25
|
},
|
|
17
26
|
"devDependencies": {
|
|
18
27
|
"@custom-elements-manifest/analyzer": "^0.11.0",
|
|
19
28
|
"@types/node": "^25.0.3",
|
|
29
|
+
"@types/react": "18.2.38",
|
|
30
|
+
"@types/react-dom": "18.2.15",
|
|
20
31
|
"eslint": "^9.39.2",
|
|
21
32
|
"sass": "^1.95.1",
|
|
22
33
|
"typescript": "~5.9.3",
|
|
23
|
-
"vite": "npm:rolldown-vite@7.2.5"
|
|
34
|
+
"vite": "npm:rolldown-vite@7.2.5",
|
|
35
|
+
"vite-plugin-dts": "^4.5.4"
|
|
24
36
|
},
|
|
25
37
|
"overrides": {
|
|
26
38
|
"vite": "npm:rolldown-vite@7.2.5"
|
package/dist/r-grid.cjs.js
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var e=`:host{--d0:var(--grid-dim-none,0px);--d1:var(--grid-dim-small,4px);--d2:var(--grid-dim-medium,8px);--d3:var(--grid-dim-large,16px);--d4:var(--grid-dim-xlarge,32px);--d5:var(--grid-dim-xxlarge,64px);--f0:var(--grid-font-xsmall,12px);--f1:var(--grid-font-small,14px);--f2:var(--grid-font-medium,16px);--f3:var(--grid-font-large,24px);--f4:var(--grid-font-xlarge,32px);--f5:var(--grid-font-xxlarge,40px);display:block;box-sizing:border-box!important}slot{display:contents!important}.row{box-sizing:border-box;justify-content:flex-start;gap:var(--gap);--gap:0px;flex-flow:wrap;margin:0;padding:0;display:flex}.cell{box-sizing:border-box}:host([r-cell]){flex:auto}:host([r-c1]),:host([r-c2]),:host([r-c3]),:host([r-c4]){max-width:calc(var(--rc)/12*100% - var(--gap)*(12 - var(--rc))/12);flex:100%}:host([r-sb1]),:host([r-sb2]),:host([r-sb3]),:host([r-sb4]){margin-left:calc(var(--rsb)/12*100% + var(--gap)*var(--rsb)/12)}:host([r-sa1]),:host([r-sa2]),:host([r-sa3]),:host([r-sa4]){margin-right:calc(var(--rsa)/12*100% + var(--gap)*var(--rsa)/12)}@media (min-width:0){:host([r-ta1]){text-align:var(--text-align-small)}:host([r-d1]){display:var(--display-small)}:host([r-f1="1"]){font-size:var(--f1)}:host([r-f1="2"]){font-size:var(--f2)}:host([r-f1="3"]){font-size:var(--f3)}:host([r-f1="4"]){font-size:var(--f4)}:host([r-f1="5"]){font-size:var(--f5)}:host([r-f1="6"]){font-size:var(--f6)}.row.gap-small-1{--gap:var(--d1)}:host([r-p1="1"]){padding:var(--d1)}:host([r-pt1="1"]){padding-top:var(--d1)}:host([r-pl1="1"]){padding-left:var(--d1)}:host([r-pb1="1"]){padding-bottom:var(--d1)}:host([r-pr1="1"]){padding-right:var(--d1)}:host([r-m1="1"]){margin:var(--d1)}:host([r-mt1="1"]){margin-top:var(--d1)}:host([r-ml1="1"]){margin-left:var(--d1)}:host([r-mb1="1"]){margin-bottom:var(--d1)}:host([r-mr1="1"]){margin-right:var(--d1)}.row.gap-small-2{--gap:var(--d2)}:host([r-p1="2"]){padding:var(--d2)}:host([r-pt1="2"]){padding-top:var(--d2)}:host([r-pl1="2"]){padding-left:var(--d2)}:host([r-pb1="2"]){padding-bottom:var(--d2)}:host([r-pr1="2"]){padding-right:var(--d2)}:host([r-m1="2"]){margin:var(--d2)}:host([r-mt1="2"]){margin-top:var(--d2)}:host([r-ml1="2"]){margin-left:var(--d2)}:host([r-mb1="2"]){margin-bottom:var(--d2)}:host([r-mr1="2"]){margin-right:var(--d2)}.row.gap-small-3{--gap:var(--d3)}:host([r-p1="3"]){padding:var(--d3)}:host([r-pt1="3"]){padding-top:var(--d3)}:host([r-pl1="3"]){padding-left:var(--d3)}:host([r-pb1="3"]){padding-bottom:var(--d3)}:host([r-pr1="3"]){padding-right:var(--d3)}:host([r-m1="3"]){margin:var(--d3)}:host([r-mt1="3"]){margin-top:var(--d3)}:host([r-ml1="3"]){margin-left:var(--d3)}:host([r-mb1="3"]){margin-bottom:var(--d3)}:host([r-mr1="3"]){margin-right:var(--d3)}.row.gap-small-4{--gap:var(--d4)}:host([r-p1="4"]){padding:var(--d4)}:host([r-pt1="4"]){padding-top:var(--d4)}:host([r-pl1="4"]){padding-left:var(--d4)}:host([r-pb1="4"]){padding-bottom:var(--d4)}:host([r-pr1="4"]){padding-right:var(--d4)}:host([r-m1="4"]){margin:var(--d4)}:host([r-mt1="4"]){margin-top:var(--d4)}:host([r-ml1="4"]){margin-left:var(--d4)}:host([r-mb1="4"]){margin-bottom:var(--d4)}:host([r-mr1="4"]){margin-right:var(--d4)}.row.gap-small-5{--gap:var(--d5)}:host([r-p1="5"]){padding:var(--d5)}:host([r-pt1="5"]){padding-top:var(--d5)}:host([r-pl1="5"]){padding-left:var(--d5)}:host([r-pb1="5"]){padding-bottom:var(--d5)}:host([r-pr1="5"]){padding-right:var(--d5)}:host([r-m1="5"]){margin:var(--d5)}:host([r-mt1="5"]){margin-top:var(--d5)}:host([r-ml1="5"]){margin-left:var(--d5)}:host([r-mb1="5"]){margin-bottom:var(--d5)}:host([r-mr1="5"]){margin-right:var(--d5)}.row.gap-small-6{--gap:var(--d6)}:host([r-p1="6"]){padding:var(--d6)}:host([r-pt1="6"]){padding-top:var(--d6)}:host([r-pl1="6"]){padding-left:var(--d6)}:host([r-pb1="6"]){padding-bottom:var(--d6)}:host([r-pr1="6"]){padding-right:var(--d6)}:host([r-m1="6"]){margin:var(--d6)}:host([r-mt1="6"]){margin-top:var(--d6)}:host([r-ml1="6"]){margin-left:var(--d6)}:host([r-mb1="6"]){margin-bottom:var(--d6)}:host([r-mr1="6"]){margin-right:var(--d6)}:host([r-or1="12"]){order:12}:host([r-c1="12"]){--rc:12}:host([r-or1="11"]){order:11}:host([r-c1="11"]){--rc:11}:host([r-or1="10"]){order:10}:host([r-c1="10"]){--rc:10}:host([r-or1="9"]){order:9}:host([r-c1="9"]){--rc:9}:host([r-or1="8"]){order:8}:host([r-c1="8"]){--rc:8}:host([r-or1="7"]){order:7}:host([r-c1="7"]){--rc:7}:host([r-or1="6"]){order:6}:host([r-c1="6"]){--rc:6}:host([r-or1="5"]){order:5}:host([r-c1="5"]){--rc:5}:host([r-or1="4"]){order:4}:host([r-c1="4"]){--rc:4}:host([r-or1="3"]){order:3}:host([r-c1="3"]){--rc:3}:host([r-or1="2"]){order:2}:host([r-c1="2"]){--rc:2}:host([r-or1="1"]){order:1}:host([r-c1="1"]){--rc:1}:host([r-sb1="11"]){--rsb:11}:host([r-sa1="11"]){--rsa:11}:host([r-sb1="10"]){--rsb:10}:host([r-sa1="10"]){--rsa:10}:host([r-sb1="9"]){--rsb:9}:host([r-sa1="9"]){--rsa:9}:host([r-sb1="8"]){--rsb:8}:host([r-sa1="8"]){--rsa:8}:host([r-sb1="7"]){--rsb:7}:host([r-sa1="7"]){--rsa:7}:host([r-sb1="6"]){--rsb:6}:host([r-sa1="6"]){--rsa:6}:host([r-sb1="5"]){--rsb:5}:host([r-sa1="5"]){--rsa:5}:host([r-sb1="4"]){--rsb:4}:host([r-sa1="4"]){--rsa:4}:host([r-sb1="3"]){--rsb:3}:host([r-sa1="3"]){--rsa:3}:host([r-sb1="2"]){--rsb:2}:host([r-sa1="2"]){--rsa:2}:host([r-sb1="1"]){--rsb:1}:host([r-sa1="1"]){--rsa:1}:host([r-sb1="0"]){--rsb:0}:host([r-sa1="0"]){--rsa:0}}@media (min-width:768px){:host([r-ta2]){text-align:var(--text-align-medium)}:host([r-d2]){display:var(--display-medium)}:host([r-f2="1"]){font-size:var(--f1)}:host([r-f2="2"]){font-size:var(--f2)}:host([r-f2="3"]){font-size:var(--f3)}:host([r-f2="4"]){font-size:var(--f4)}:host([r-f2="5"]){font-size:var(--f5)}:host([r-f2="6"]){font-size:var(--f6)}.row.gap-medium-1{--gap:var(--d1)}:host([r-p2="1"]){padding:var(--d1)}:host([r-pt2="1"]){padding-top:var(--d1)}:host([r-pl2="1"]){padding-left:var(--d1)}:host([r-pb2="1"]){padding-bottom:var(--d1)}:host([r-pr2="1"]){padding-right:var(--d1)}:host([r-m2="1"]){margin:var(--d1)}:host([r-mt2="1"]){margin-top:var(--d1)}:host([r-ml2="1"]){margin-left:var(--d1)}:host([r-mb2="1"]){margin-bottom:var(--d1)}:host([r-mr2="1"]){margin-right:var(--d1)}.row.gap-medium-2{--gap:var(--d2)}:host([r-p2="2"]){padding:var(--d2)}:host([r-pt2="2"]){padding-top:var(--d2)}:host([r-pl2="2"]){padding-left:var(--d2)}:host([r-pb2="2"]){padding-bottom:var(--d2)}:host([r-pr2="2"]){padding-right:var(--d2)}:host([r-m2="2"]){margin:var(--d2)}:host([r-mt2="2"]){margin-top:var(--d2)}:host([r-ml2="2"]){margin-left:var(--d2)}:host([r-mb2="2"]){margin-bottom:var(--d2)}:host([r-mr2="2"]){margin-right:var(--d2)}.row.gap-medium-3{--gap:var(--d3)}:host([r-p2="3"]){padding:var(--d3)}:host([r-pt2="3"]){padding-top:var(--d3)}:host([r-pl2="3"]){padding-left:var(--d3)}:host([r-pb2="3"]){padding-bottom:var(--d3)}:host([r-pr2="3"]){padding-right:var(--d3)}:host([r-m2="3"]){margin:var(--d3)}:host([r-mt2="3"]){margin-top:var(--d3)}:host([r-ml2="3"]){margin-left:var(--d3)}:host([r-mb2="3"]){margin-bottom:var(--d3)}:host([r-mr2="3"]){margin-right:var(--d3)}.row.gap-medium-4{--gap:var(--d4)}:host([r-p2="4"]){padding:var(--d4)}:host([r-pt2="4"]){padding-top:var(--d4)}:host([r-pl2="4"]){padding-left:var(--d4)}:host([r-pb2="4"]){padding-bottom:var(--d4)}:host([r-pr2="4"]){padding-right:var(--d4)}:host([r-m2="4"]){margin:var(--d4)}:host([r-mt2="4"]){margin-top:var(--d4)}:host([r-ml2="4"]){margin-left:var(--d4)}:host([r-mb2="4"]){margin-bottom:var(--d4)}:host([r-mr2="4"]){margin-right:var(--d4)}.row.gap-medium-5{--gap:var(--d5)}:host([r-p2="5"]){padding:var(--d5)}:host([r-pt2="5"]){padding-top:var(--d5)}:host([r-pl2="5"]){padding-left:var(--d5)}:host([r-pb2="5"]){padding-bottom:var(--d5)}:host([r-pr2="5"]){padding-right:var(--d5)}:host([r-m2="5"]){margin:var(--d5)}:host([r-mt2="5"]){margin-top:var(--d5)}:host([r-ml2="5"]){margin-left:var(--d5)}:host([r-mb2="5"]){margin-bottom:var(--d5)}:host([r-mr2="5"]){margin-right:var(--d5)}.row.gap-medium-6{--gap:var(--d6)}:host([r-p2="6"]){padding:var(--d6)}:host([r-pt2="6"]){padding-top:var(--d6)}:host([r-pl2="6"]){padding-left:var(--d6)}:host([r-pb2="6"]){padding-bottom:var(--d6)}:host([r-pr2="6"]){padding-right:var(--d6)}:host([r-m2="6"]){margin:var(--d6)}:host([r-mt2="6"]){margin-top:var(--d6)}:host([r-ml2="6"]){margin-left:var(--d6)}:host([r-mb2="6"]){margin-bottom:var(--d6)}:host([r-mr2="6"]){margin-right:var(--d6)}:host([r-or2="12"]){order:12}:host([r-c2="12"]){--rc:12}:host([r-or2="11"]){order:11}:host([r-c2="11"]){--rc:11}:host([r-or2="10"]){order:10}:host([r-c2="10"]){--rc:10}:host([r-or2="9"]){order:9}:host([r-c2="9"]){--rc:9}:host([r-or2="8"]){order:8}:host([r-c2="8"]){--rc:8}:host([r-or2="7"]){order:7}:host([r-c2="7"]){--rc:7}:host([r-or2="6"]){order:6}:host([r-c2="6"]){--rc:6}:host([r-or2="5"]){order:5}:host([r-c2="5"]){--rc:5}:host([r-or2="4"]){order:4}:host([r-c2="4"]){--rc:4}:host([r-or2="3"]){order:3}:host([r-c2="3"]){--rc:3}:host([r-or2="2"]){order:2}:host([r-c2="2"]){--rc:2}:host([r-or2="1"]){order:1}:host([r-c2="1"]){--rc:1}:host([r-sb2="11"]){--rsb:11}:host([r-sa2="11"]){--rsa:11}:host([r-sb2="10"]){--rsb:10}:host([r-sa2="10"]){--rsa:10}:host([r-sb2="9"]){--rsb:9}:host([r-sa2="9"]){--rsa:9}:host([r-sb2="8"]){--rsb:8}:host([r-sa2="8"]){--rsa:8}:host([r-sb2="7"]){--rsb:7}:host([r-sa2="7"]){--rsa:7}:host([r-sb2="6"]){--rsb:6}:host([r-sa2="6"]){--rsa:6}:host([r-sb2="5"]){--rsb:5}:host([r-sa2="5"]){--rsa:5}:host([r-sb2="4"]){--rsb:4}:host([r-sa2="4"]){--rsa:4}:host([r-sb2="3"]){--rsb:3}:host([r-sa2="3"]){--rsa:3}:host([r-sb2="2"]){--rsb:2}:host([r-sa2="2"]){--rsa:2}:host([r-sb2="1"]){--rsb:1}:host([r-sa2="1"]){--rsa:1}:host([r-sb2="0"]){--rsb:0}:host([r-sa2="0"]){--rsa:0}}@media (min-width:1024px){:host([r-ta3]){text-align:var(--text-align-large)}:host([r-d3]){display:var(--display-large)}:host([r-f3="1"]){font-size:var(--f1)}:host([r-f3="2"]){font-size:var(--f2)}:host([r-f3="3"]){font-size:var(--f3)}:host([r-f3="4"]){font-size:var(--f4)}:host([r-f3="5"]){font-size:var(--f5)}:host([r-f3="6"]){font-size:var(--f6)}.row.gap-large-1{--gap:var(--d1)}:host([r-p3="1"]){padding:var(--d1)}:host([r-pt3="1"]){padding-top:var(--d1)}:host([r-pl3="1"]){padding-left:var(--d1)}:host([r-pb3="1"]){padding-bottom:var(--d1)}:host([r-pr3="1"]){padding-right:var(--d1)}:host([r-m3="1"]){margin:var(--d1)}:host([r-mt3="1"]){margin-top:var(--d1)}:host([r-ml3="1"]){margin-left:var(--d1)}:host([r-mb3="1"]){margin-bottom:var(--d1)}:host([r-mr3="1"]){margin-right:var(--d1)}.row.gap-large-2{--gap:var(--d2)}:host([r-p3="2"]){padding:var(--d2)}:host([r-pt3="2"]){padding-top:var(--d2)}:host([r-pl3="2"]){padding-left:var(--d2)}:host([r-pb3="2"]){padding-bottom:var(--d2)}:host([r-pr3="2"]){padding-right:var(--d2)}:host([r-m3="2"]){margin:var(--d2)}:host([r-mt3="2"]){margin-top:var(--d2)}:host([r-ml3="2"]){margin-left:var(--d2)}:host([r-mb3="2"]){margin-bottom:var(--d2)}:host([r-mr3="2"]){margin-right:var(--d2)}.row.gap-large-3{--gap:var(--d3)}:host([r-p3="3"]){padding:var(--d3)}:host([r-pt3="3"]){padding-top:var(--d3)}:host([r-pl3="3"]){padding-left:var(--d3)}:host([r-pb3="3"]){padding-bottom:var(--d3)}:host([r-pr3="3"]){padding-right:var(--d3)}:host([r-m3="3"]){margin:var(--d3)}:host([r-mt3="3"]){margin-top:var(--d3)}:host([r-ml3="3"]){margin-left:var(--d3)}:host([r-mb3="3"]){margin-bottom:var(--d3)}:host([r-mr3="3"]){margin-right:var(--d3)}.row.gap-large-4{--gap:var(--d4)}:host([r-p3="4"]){padding:var(--d4)}:host([r-pt3="4"]){padding-top:var(--d4)}:host([r-pl3="4"]){padding-left:var(--d4)}:host([r-pb3="4"]){padding-bottom:var(--d4)}:host([r-pr3="4"]){padding-right:var(--d4)}:host([r-m3="4"]){margin:var(--d4)}:host([r-mt3="4"]){margin-top:var(--d4)}:host([r-ml3="4"]){margin-left:var(--d4)}:host([r-mb3="4"]){margin-bottom:var(--d4)}:host([r-mr3="4"]){margin-right:var(--d4)}.row.gap-large-5{--gap:var(--d5)}:host([r-p3="5"]){padding:var(--d5)}:host([r-pt3="5"]){padding-top:var(--d5)}:host([r-pl3="5"]){padding-left:var(--d5)}:host([r-pb3="5"]){padding-bottom:var(--d5)}:host([r-pr3="5"]){padding-right:var(--d5)}:host([r-m3="5"]){margin:var(--d5)}:host([r-mt3="5"]){margin-top:var(--d5)}:host([r-ml3="5"]){margin-left:var(--d5)}:host([r-mb3="5"]){margin-bottom:var(--d5)}:host([r-mr3="5"]){margin-right:var(--d5)}.row.gap-large-6{--gap:var(--d6)}:host([r-p3="6"]){padding:var(--d6)}:host([r-pt3="6"]){padding-top:var(--d6)}:host([r-pl3="6"]){padding-left:var(--d6)}:host([r-pb3="6"]){padding-bottom:var(--d6)}:host([r-pr3="6"]){padding-right:var(--d6)}:host([r-m3="6"]){margin:var(--d6)}:host([r-mt3="6"]){margin-top:var(--d6)}:host([r-ml3="6"]){margin-left:var(--d6)}:host([r-mb3="6"]){margin-bottom:var(--d6)}:host([r-mr3="6"]){margin-right:var(--d6)}:host([r-or3="12"]){order:12}:host([r-c3="12"]){--rc:12}:host([r-or3="11"]){order:11}:host([r-c3="11"]){--rc:11}:host([r-or3="10"]){order:10}:host([r-c3="10"]){--rc:10}:host([r-or3="9"]){order:9}:host([r-c3="9"]){--rc:9}:host([r-or3="8"]){order:8}:host([r-c3="8"]){--rc:8}:host([r-or3="7"]){order:7}:host([r-c3="7"]){--rc:7}:host([r-or3="6"]){order:6}:host([r-c3="6"]){--rc:6}:host([r-or3="5"]){order:5}:host([r-c3="5"]){--rc:5}:host([r-or3="4"]){order:4}:host([r-c3="4"]){--rc:4}:host([r-or3="3"]){order:3}:host([r-c3="3"]){--rc:3}:host([r-or3="2"]){order:2}:host([r-c3="2"]){--rc:2}:host([r-or3="1"]){order:1}:host([r-c3="1"]){--rc:1}:host([r-sb3="11"]){--rsb:11}:host([r-sa3="11"]){--rsa:11}:host([r-sb3="10"]){--rsb:10}:host([r-sa3="10"]){--rsa:10}:host([r-sb3="9"]){--rsb:9}:host([r-sa3="9"]){--rsa:9}:host([r-sb3="8"]){--rsb:8}:host([r-sa3="8"]){--rsa:8}:host([r-sb3="7"]){--rsb:7}:host([r-sa3="7"]){--rsa:7}:host([r-sb3="6"]){--rsb:6}:host([r-sa3="6"]){--rsa:6}:host([r-sb3="5"]){--rsb:5}:host([r-sa3="5"]){--rsa:5}:host([r-sb3="4"]){--rsb:4}:host([r-sa3="4"]){--rsa:4}:host([r-sb3="3"]){--rsb:3}:host([r-sa3="3"]){--rsa:3}:host([r-sb3="2"]){--rsb:2}:host([r-sa3="2"]){--rsa:2}:host([r-sb3="1"]){--rsb:1}:host([r-sa3="1"]){--rsa:1}:host([r-sb3="0"]){--rsb:0}:host([r-sa3="0"]){--rsa:0}}@media (min-width:1280px){:host([r-ta4]){text-align:var(--text-align-xlarge)}:host([r-d4]){display:var(--display-xlarge)}:host([r-f4="1"]){font-size:var(--f1)}:host([r-f4="2"]){font-size:var(--f2)}:host([r-f4="3"]){font-size:var(--f3)}:host([r-f4="4"]){font-size:var(--f4)}:host([r-f4="5"]){font-size:var(--f5)}:host([r-f4="6"]){font-size:var(--f6)}.row.gap-xlarge-1{--gap:var(--d1)}:host([r-p4="1"]){padding:var(--d1)}:host([r-pt4="1"]){padding-top:var(--d1)}:host([r-pl4="1"]){padding-left:var(--d1)}:host([r-pb4="1"]){padding-bottom:var(--d1)}:host([r-pr4="1"]){padding-right:var(--d1)}:host([r-m4="1"]){margin:var(--d1)}:host([r-mt4="1"]){margin-top:var(--d1)}:host([r-ml4="1"]){margin-left:var(--d1)}:host([r-mb4="1"]){margin-bottom:var(--d1)}:host([r-mr4="1"]){margin-right:var(--d1)}.row.gap-xlarge-2{--gap:var(--d2)}:host([r-p4="2"]){padding:var(--d2)}:host([r-pt4="2"]){padding-top:var(--d2)}:host([r-pl4="2"]){padding-left:var(--d2)}:host([r-pb4="2"]){padding-bottom:var(--d2)}:host([r-pr4="2"]){padding-right:var(--d2)}:host([r-m4="2"]){margin:var(--d2)}:host([r-mt4="2"]){margin-top:var(--d2)}:host([r-ml4="2"]){margin-left:var(--d2)}:host([r-mb4="2"]){margin-bottom:var(--d2)}:host([r-mr4="2"]){margin-right:var(--d2)}.row.gap-xlarge-3{--gap:var(--d3)}:host([r-p4="3"]){padding:var(--d3)}:host([r-pt4="3"]){padding-top:var(--d3)}:host([r-pl4="3"]){padding-left:var(--d3)}:host([r-pb4="3"]){padding-bottom:var(--d3)}:host([r-pr4="3"]){padding-right:var(--d3)}:host([r-m4="3"]){margin:var(--d3)}:host([r-mt4="3"]){margin-top:var(--d3)}:host([r-ml4="3"]){margin-left:var(--d3)}:host([r-mb4="3"]){margin-bottom:var(--d3)}:host([r-mr4="3"]){margin-right:var(--d3)}.row.gap-xlarge-4{--gap:var(--d4)}:host([r-p4="4"]){padding:var(--d4)}:host([r-pt4="4"]){padding-top:var(--d4)}:host([r-pl4="4"]){padding-left:var(--d4)}:host([r-pb4="4"]){padding-bottom:var(--d4)}:host([r-pr4="4"]){padding-right:var(--d4)}:host([r-m4="4"]){margin:var(--d4)}:host([r-mt4="4"]){margin-top:var(--d4)}:host([r-ml4="4"]){margin-left:var(--d4)}:host([r-mb4="4"]){margin-bottom:var(--d4)}:host([r-mr4="4"]){margin-right:var(--d4)}.row.gap-xlarge-5{--gap:var(--d5)}:host([r-p4="5"]){padding:var(--d5)}:host([r-pt4="5"]){padding-top:var(--d5)}:host([r-pl4="5"]){padding-left:var(--d5)}:host([r-pb4="5"]){padding-bottom:var(--d5)}:host([r-pr4="5"]){padding-right:var(--d5)}:host([r-m4="5"]){margin:var(--d5)}:host([r-mt4="5"]){margin-top:var(--d5)}:host([r-ml4="5"]){margin-left:var(--d5)}:host([r-mb4="5"]){margin-bottom:var(--d5)}:host([r-mr4="5"]){margin-right:var(--d5)}.row.gap-xlarge-6{--gap:var(--d6)}:host([r-p4="6"]){padding:var(--d6)}:host([r-pt4="6"]){padding-top:var(--d6)}:host([r-pl4="6"]){padding-left:var(--d6)}:host([r-pb4="6"]){padding-bottom:var(--d6)}:host([r-pr4="6"]){padding-right:var(--d6)}:host([r-m4="6"]){margin:var(--d6)}:host([r-mt4="6"]){margin-top:var(--d6)}:host([r-ml4="6"]){margin-left:var(--d6)}:host([r-mb4="6"]){margin-bottom:var(--d6)}:host([r-mr4="6"]){margin-right:var(--d6)}:host([r-or4="12"]){order:12}:host([r-c4="12"]){--rc:12}:host([r-or4="11"]){order:11}:host([r-c4="11"]){--rc:11}:host([r-or4="10"]){order:10}:host([r-c4="10"]){--rc:10}:host([r-or4="9"]){order:9}:host([r-c4="9"]){--rc:9}:host([r-or4="8"]){order:8}:host([r-c4="8"]){--rc:8}:host([r-or4="7"]){order:7}:host([r-c4="7"]){--rc:7}:host([r-or4="6"]){order:6}:host([r-c4="6"]){--rc:6}:host([r-or4="5"]){order:5}:host([r-c4="5"]){--rc:5}:host([r-or4="4"]){order:4}:host([r-c4="4"]){--rc:4}:host([r-or4="3"]){order:3}:host([r-c4="3"]){--rc:3}:host([r-or4="2"]){order:2}:host([r-c4="2"]){--rc:2}:host([r-or4="1"]){order:1}:host([r-c4="1"]){--rc:1}:host([r-sb4="11"]){--rsb:11}:host([r-sa4="11"]){--rsa:11}:host([r-sb4="10"]){--rsb:10}:host([r-sa4="10"]){--rsa:10}:host([r-sb4="9"]){--rsb:9}:host([r-sa4="9"]){--rsa:9}:host([r-sb4="8"]){--rsb:8}:host([r-sa4="8"]){--rsa:8}:host([r-sb4="7"]){--rsb:7}:host([r-sa4="7"]){--rsa:7}:host([r-sb4="6"]){--rsb:6}:host([r-sa4="6"]){--rsa:6}:host([r-sb4="5"]){--rsb:5}:host([r-sa4="5"]){--rsa:5}:host([r-sb4="4"]){--rsb:4}:host([r-sa4="4"]){--rsa:4}:host([r-sb4="3"]){--rsb:3}:host([r-sa4="3"]){--rsa:3}:host([r-sb4="2"]){--rsb:2}:host([r-sa4="2"]){--rsa:2}:host([r-sb4="1"]){--rsb:1}:host([r-sa4="1"]){--rsa:1}:host([r-sb4="0"]){--rsb:0}:host([r-sa4="0"]){--rsa:0}}`,t=new CSSStyleSheet;t.replaceSync(e);var n=t;const r=[`inherit`,`initial`,`revert`,`revert-layer`,`unset`],i=[`display`,`font`,`text-align`,`padding`,`padding-top`,`padding-right`,`padding-bottom`,`padding-left`,`margin`,`margin-top`,`margin-right`,`margin-bottom`,`margin-left`],a=[`row`,`cell`,`col`,`display`,`text-align`,`order`,`skip-before`,`skip-after`,`gap`,`padding`,`font`],o=[`small`,`medium`,`large`,`xlarge`],s=[`none`,`small`,`medium`,`large`,`xlarge`,`xxlarge`,`small-`,`medium-`,`large-`,`xlarge-`,`xxlarge-`],c=[`block`,`inline`,`inline-block`,`flex`,`inline-flex`,`grid`,`inline-grid`,`flow-root`,`none`,`contents`,`table`,`table-row`,`list-item`,...r],l=[`start`,`end`,`left`,`right`,`center`,`justify`,`match-parent`],u=[`xsmall`,`small`,`medium`,`large`,`xlarge`,`xxlarge`],d=e=>i.includes(e),f=e=>a.includes(e);var p=e=>{let t=parseInt(e.trim());return t===void 0?null:String(t)},m=e=>{let t=e.trim().toLowerCase();return c.includes(t)?t:null},h=e=>{let t=e.trim().toLowerCase();return s.includes(t)?String(s.indexOf(t)):null},g=e=>{let t=e.trim().toLowerCase();return l.includes(t)?t:null},_=e=>{let t=e.trim().toLowerCase();return u.includes(t)?String(u.indexOf(t)):null};const v={row:`boolean`,cell:`boolean`,"text-align":g,"skip-before":p,"skip-after":p,col:p,gap:h,font:_,order:p,display:m,padding:h},y={font:_,margin:h,padding:h,display:m,"text-align":g,"margin-top":h,"margin-right":h,"margin-bottom":h,"margin-left":h,"padding-top":h,"padding-right":h,"padding-bottom":h,"padding-left":h},b={font:`f`,padding:`p`,display:`d`,row:`row`,cell:`cell`,col:`c`,gap:`g`,order:`or`,"skip-before":`sb`,"skip-after":`sa`,"text-align":`ta`},x={font:`f`,margin:`m`,padding:`p`,display:`d`,"text-align":`ta`,"margin-top":`mt`,"margin-right":`mr`,"margin-bottom":`mb`,"margin-left":`ml`,"padding-top":`pt`,"padding-right":`pr`,"padding-bottom":`pb`,"padding-left":`pl`},S=(e,t,n)=>{let r=[];for(let i of e)if(t[i]!==void 0){let e=n[i];e===`boolean`?r.push(`${i}`):t[i].split(` `).filter(Boolean).forEach((t,n)=>{let a=o[n],s=e(t);a&&s&&r.push(`${i}-${a}-${s}`)})}return r},C=(e,t,n,r)=>{let i={};for(let a of e)if(o.forEach((e,t)=>{i[`r-${r[a]}${t+1}`]=void 0}),t[a]!==void 0){let e=n[a];e===`boolean`?i[`r-${a}`]=a:t[a].split(` `).filter(Boolean).forEach((t,n)=>{let s=o[n],c=e(t);s&&c&&(i[`r-${r[a]}${n+1}`]=c)})}return Object.entries(i)},w=(e,t,n)=>{let r={};for(let i of e)if(o.forEach(e=>{r[`--${i}-${e}`]=void 0}),t[i]!==void 0){let e=n[i];e!==`boolean`&&t[i].split(` `).filter(Boolean).forEach((t,n)=>{let a=o[n],s=e(t);a&&s&&(r[`--${i}-${a}`]=s)})}return Object.entries(r)};var T=class extends HTMLElement{static observedAttributes=a;attr={};mainSlot=()=>this.shadowRoot?.querySelector(`slot`)||null;container=()=>this.shadowRoot?.firstElementChild||null;constructor(){super(),this.attachShadow({mode:`open`}),this.shadowRoot.adoptedStyleSheets=[n]}detectRowChange(){let e=this.mainSlot(),t=this.container();if(!e||!t)return;let n=e.assignedElements().some(e=>e.matches(`r-grid`)),r=this.attr.row!==`row`&&n,i=this.attr.row===`row`&&!n;return r&&(this.attr.row=`row`),i&&delete this.attr.row,r||i}detectCellChange(){let e=this.parentElement?.matches(`r-grid`),t=this.attr.cell!==`cell`&&e,n=this.attr.cell===`cell`&&!e;return t&&(this.attr.cell=`cell`),n&&delete this.attr.cell,t||n}attributeChangedCallback(e,t,n){f(e)&&(this.attr[e]=n,this.render())}connectedMoveCallback(){this.detectCellChange()}connectedCallback(){this.mainSlot()?.addEventListener(`slotchange`,()=>{this.detectRowChange()&&this.render()}),this.render();let e=this.detectRowChange(),t=this.detectCellChange();(e||t)&&this.render()}render(){let e=S([`row`,`gap`],this.attr,v),t=C(a,this.attr,v,b),n=w([`display`,`text-align`],this.attr,v);`skip-before`in this.attr&&console.log({hostAttributes:t,attr:this.attr}),n.forEach(([e,t])=>{t&&this.style.setProperty(e,t),t===void 0&&this.style.removeProperty(e)}),t.forEach(([e,t])=>{t&&this.setAttribute(e,t),t===void 0&&this.removeAttribute(e)}),this.shadowRoot.innerHTML=`
|
|
2
|
-
<div class="${e.join(` `)}"><slot></slot></div>
|
|
3
|
-
`}};customElements.define(`r-grid`,T);var E=class extends HTMLElement{static observedAttributes=i;attr={};constructor(){super(),this.attachShadow({mode:`open`}),this.shadowRoot.adoptedStyleSheets=[n]}attributeChangedCallback(e,t,n){d(e)&&(this.attr[e]=n,this.render())}connectedCallback(){this.render()}render(){let e=C(i,this.attr,y,x);w([`display`,`text-align`],this.attr,y).forEach(([e,t])=>{t&&this.style.setProperty(e,t),t===void 0&&this.style.removeProperty(e)}),e.forEach(([e,t])=>{t&&this.setAttribute(e,t),t===void 0&&this.removeAttribute(e)}),this.shadowRoot.innerHTML=`<slot></slot>`}};customElements.define(`r-elm`,E),exports.GridElement=T,exports.ResponsiveElement=E;
|
|
4
|
-
//# sourceMappingURL=r-grid.cjs.js.map
|
package/dist/r-grid.cjs.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"r-grid.cjs.js","names":["getGridAttributeValue: AttrValidations<ObservedGridAttribute>","getElemAttributeValue: AttrValidations<ObservedElemAttribute>","gridAttrShort: Record<ObservedGridAttribute, string>","elmAttrShort: Record<ObservedElemAttribute, string>","classes: string[]","hostAttributes: Record<string, string | undefined>","hostCSS: Record<string, string | undefined>"],"sources":["../src/grid.scss?inline","../src/grid-style.ts","../src/util.ts","../src/components/grid-element.ts","../src/components/resonsive-element.ts"],"sourcesContent":["@use 'sass:map';\r\n@use 'sass:math';\r\n@use 'sass:list';\r\n\r\n$mediaSizes: (\r\n small: 0px,\r\n medium: 768px,\r\n large: 1024px,\r\n xlarge: 1280px,\r\n);\r\n$dimensions: 'none', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n$fonts: 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n\r\n:host {\r\n --d0: var(--grid-dim-none, 0px);\r\n --d1: var(--grid-dim-small, 4px);\r\n --d2: var(--grid-dim-medium, 8px);\r\n --d3: var(--grid-dim-large, 16px);\r\n --d4: var(--grid-dim-xlarge, 32px);\r\n --d5: var(--grid-dim-xxlarge, 64px);\r\n --f0: var(--grid-font-xsmall, 12px);\r\n --f1: var(--grid-font-small, 14px);\r\n --f2: var(--grid-font-medium, 16px);\r\n --f3: var(--grid-font-large, 24px);\r\n --f4: var(--grid-font-xlarge, 32px);\r\n --f5: var(--grid-font-xxlarge, 40px);\r\n display: block;\r\n box-sizing: border-box !important;\r\n}\r\n\r\nslot {\r\n display: contents !important;\r\n}\r\n\r\n.row {\r\n box-sizing: border-box;\r\n justify-content: flex-start;\r\n gap: var(--gap);\r\n --gap: 0px;\r\n flex-flow: wrap;\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n}\r\n\r\n.cell {\r\n box-sizing: border-box;\r\n}\r\n\r\n:host([r-cell]) {\r\n flex: auto;\r\n}\r\n\r\n:host([r-c1]),\r\n:host([r-c2]),\r\n:host([r-c3]),\r\n:host([r-c4]) {\r\n flex: 100%;\r\n max-width: calc(((var(--rc) / 12) * 100%) - var(--gap) * (calc((12 - var(--rc)) / 12)));\r\n}\r\n\r\n:host([r-sb1]),\r\n:host([r-sb2]),\r\n:host([r-sb3]),\r\n:host([r-sb4]) {\r\n margin-left: calc(((var(--rsb) / 12) * 100%) + var(--gap) * (calc(var(--rsb) / 12)));\r\n}\r\n\r\n:host([r-sa1]),\r\n:host([r-sa2]),\r\n:host([r-sa3]),\r\n:host([r-sa4]) {\r\n margin-right: calc(((var(--rsa) / 12) * 100%) + var(--gap) * (calc(var(--rsa) / 12)));\r\n}\r\n\r\n@each $mediaName, $mediaSize in $mediaSizes {\r\n $mIndex: list.index(map.keys($mediaSizes), $mediaName);\r\n\r\n @media (min-width: #{$mediaSize}) {\r\n :host([r-ta#{$mIndex}]) {\r\n text-align: var(--text-align-#{$mediaName});\r\n }\r\n :host([r-d#{$mIndex}]) {\r\n display: var(--display-#{$mediaName});\r\n }\r\n\r\n @each $font in $fonts {\r\n $fIndex: list.index($fonts, $font);\r\n\r\n :host([r-f#{$mIndex}='#{$fIndex}']) {\r\n font-size: var(--f#{$fIndex});\r\n }\r\n }\r\n @each $dimension in $dimensions {\r\n $dIndex: list.index($dimensions, $dimension);\r\n\r\n .row.gap-#{$mediaName}-#{$dIndex} {\r\n --gap: var(--d#{$dIndex});\r\n }\r\n :host([r-p#{$mIndex}='#{$dIndex}']) {\r\n padding: var(--d#{$dIndex});\r\n }\r\n :host([r-pt#{$mIndex}='#{$dIndex}']) {\r\n padding-top: var(--d#{$dIndex});\r\n }\r\n :host([r-pl#{$mIndex}='#{$dIndex}']) {\r\n padding-left: var(--d#{$dIndex});\r\n }\r\n :host([r-pb#{$mIndex}='#{$dIndex}']) {\r\n padding-bottom: var(--d#{$dIndex});\r\n }\r\n :host([r-pr#{$mIndex}='#{$dIndex}']) {\r\n padding-right: var(--d#{$dIndex});\r\n }\r\n :host([r-m#{$mIndex}='#{$dIndex}']) {\r\n margin: var(--d#{$dIndex});\r\n }\r\n :host([r-mt#{$mIndex}='#{$dIndex}']) {\r\n margin-top: var(--d#{$dIndex});\r\n }\r\n :host([r-ml#{$mIndex}='#{$dIndex}']) {\r\n margin-left: var(--d#{$dIndex});\r\n }\r\n :host([r-mb#{$mIndex}='#{$dIndex}']) {\r\n margin-bottom: var(--d#{$dIndex});\r\n }\r\n :host([r-mr#{$mIndex}='#{$dIndex}']) {\r\n margin-right: var(--d#{$dIndex});\r\n }\r\n }\r\n\r\n @for $i from 12 through 1 {\r\n :host([r-or#{$mIndex}='#{$i}']) {\r\n order: #{$i};\r\n }\r\n :host([r-c#{$mIndex}='#{$i}']) {\r\n --rc: #{$i};\r\n }\r\n }\r\n @for $i from 11 through 0 {\r\n :host([r-sb#{$mIndex}='#{$i}']) {\r\n --rsb: #{$i};\r\n }\r\n :host([r-sa#{$mIndex}='#{$i}']) {\r\n --rsa: #{$i};\r\n }\r\n }\r\n }\r\n}\r\n","import gridStyles from \"./grid.scss?inline\";\r\n\r\nconst sheet = new CSSStyleSheet();\r\nsheet.replaceSync(gridStyles);\r\n\r\nexport default sheet;\r\n","type AttrValues<K extends string> = Partial<Record<K, string | undefined>>;\r\ntype AttrValidations<K extends string> = Record<K, 'boolean' | ((val: string) => string | null)>;\r\n\r\nexport const GlobalValues = ['inherit', 'initial', 'revert', 'revert-layer', 'unset'] as const;\r\n\r\nexport const ObservedElemAttributes = [\r\n 'display',\r\n 'font',\r\n 'text-align',\r\n 'padding',\r\n 'padding-top',\r\n 'padding-right',\r\n 'padding-bottom',\r\n 'padding-left',\r\n 'margin',\r\n 'margin-top',\r\n 'margin-right',\r\n 'margin-bottom',\r\n 'margin-left',\r\n] as const;\r\nexport const ObservedGridAttributes = [\r\n 'row',\r\n 'cell',\r\n 'col',\r\n 'display',\r\n 'text-align',\r\n 'order',\r\n 'skip-before',\r\n 'skip-after',\r\n 'gap',\r\n 'padding',\r\n 'font',\r\n] as const;\r\nexport const MediaSizes = ['small', 'medium', 'large', 'xlarge'] as const;\r\nexport const DimensionSizes = [\r\n 'none',\r\n 'small',\r\n 'medium',\r\n 'large',\r\n 'xlarge',\r\n 'xxlarge',\r\n 'small-',\r\n 'medium-',\r\n 'large-',\r\n 'xlarge-',\r\n 'xxlarge-',\r\n] as const;\r\nexport const DisplayValues = [\r\n 'block',\r\n 'inline',\r\n 'inline-block',\r\n 'flex',\r\n 'inline-flex',\r\n 'grid',\r\n 'inline-grid',\r\n 'flow-root',\r\n 'none',\r\n 'contents',\r\n 'table',\r\n 'table-row',\r\n 'list-item',\r\n ...GlobalValues,\r\n] as const;\r\nexport const TextAlignValues = [\r\n 'start',\r\n 'end',\r\n 'left',\r\n 'right',\r\n 'center',\r\n 'justify',\r\n 'match-parent',\r\n] as const;\r\nexport const FontSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;\r\n\r\nexport type ObservedGridAttribute = (typeof ObservedGridAttributes)[number];\r\nexport type ObservedElemAttribute = (typeof ObservedElemAttributes)[number];\r\n\r\nexport type DimensionSize = (typeof DimensionSizes)[number];\r\nexport type DisplayValue = (typeof DisplayValues)[number];\r\nexport type TextAlignValue = (typeof TextAlignValues)[number];\r\nexport type FontSize = (typeof FontSizes)[number];\r\n\r\nexport const isElemAttribute = (name: string): name is ObservedElemAttribute =>\r\n ObservedElemAttributes.includes(name as ObservedElemAttribute);\r\n\r\nexport const isGridAttribute = (name: string): name is ObservedGridAttribute =>\r\n ObservedGridAttributes.includes(name as ObservedGridAttribute);\r\n\r\nconst getValidNumber = (val: string): string | null => {\r\n const value = parseInt(val.trim());\r\n return value !== undefined ? String(value) : null;\r\n};\r\n\r\nconst getValidDisplay = (val: string): string | null => {\r\n const value = val.trim().toLowerCase();\r\n return DisplayValues.includes(value as DisplayValue) ? (value as DisplayValue) : null;\r\n};\r\n\r\nconst getValidDimension = (val: string): string | null => {\r\n const value = val.trim().toLowerCase();\r\n return DimensionSizes.includes(value as DimensionSize)\r\n ? String(DimensionSizes.indexOf(value as DimensionSize))\r\n : null;\r\n};\r\n\r\nconst getValidTextAlign = (val: string): TextAlignValue | null => {\r\n const value = val.trim().toLowerCase();\r\n return TextAlignValues.includes(value as TextAlignValue) ? (value as TextAlignValue) : null;\r\n};\r\n\r\nconst getValidFont = (val: string): string | null => {\r\n const value = val.trim().toLowerCase();\r\n return FontSizes.includes(value as FontSize)\r\n ? String(FontSizes.indexOf(value as FontSize))\r\n : null;\r\n};\r\n\r\nexport type GridAttributeValues = AttrValues<ObservedGridAttribute>;\r\nexport type ElemAttributeValues = AttrValues<ObservedElemAttribute>;\r\n\r\nexport const getGridAttributeValue: AttrValidations<ObservedGridAttribute> = {\r\n row: 'boolean',\r\n cell: 'boolean',\r\n 'text-align': getValidTextAlign,\r\n 'skip-before': getValidNumber,\r\n 'skip-after': getValidNumber,\r\n col: getValidNumber,\r\n gap: getValidDimension,\r\n font: getValidFont,\r\n order: getValidNumber,\r\n display: getValidDisplay,\r\n padding: getValidDimension,\r\n};\r\n\r\nexport const getElemAttributeValue: AttrValidations<ObservedElemAttribute> = {\r\n font: getValidFont,\r\n margin: getValidDimension,\r\n padding: getValidDimension,\r\n display: getValidDisplay,\r\n 'text-align': getValidTextAlign,\r\n 'margin-top': getValidDimension,\r\n 'margin-right': getValidDimension,\r\n 'margin-bottom': getValidDimension,\r\n 'margin-left': getValidDimension,\r\n 'padding-top': getValidDimension,\r\n 'padding-right': getValidDimension,\r\n 'padding-bottom': getValidDimension,\r\n 'padding-left': getValidDimension,\r\n};\r\n\r\nexport const gridAttrShort: Record<ObservedGridAttribute, string> = {\r\n font: 'f',\r\n padding: 'p',\r\n display: 'd',\r\n row: 'row',\r\n cell: 'cell',\r\n col: 'c',\r\n gap: 'g',\r\n order: 'or',\r\n 'skip-before': 'sb',\r\n 'skip-after': 'sa',\r\n 'text-align': 'ta',\r\n};\r\n\r\nexport const elmAttrShort: Record<ObservedElemAttribute, string> = {\r\n font: 'f',\r\n margin: 'm',\r\n padding: 'p',\r\n display: 'd',\r\n 'text-align': 'ta',\r\n 'margin-top': 'mt',\r\n 'margin-right': 'mr',\r\n 'margin-bottom': 'mb',\r\n 'margin-left': 'ml',\r\n 'padding-top': 'pt',\r\n 'padding-right': 'pr',\r\n 'padding-bottom': 'pb',\r\n 'padding-left': 'pl',\r\n};\r\n\r\nexport const getClasses = <K extends string>(\r\n attrNames: readonly K[],\r\n attrs: AttrValues<K>,\r\n validations: AttrValidations<K>,\r\n) => {\r\n const classes: string[] = [];\r\n for (const attr of attrNames) {\r\n if (attrs[attr] !== undefined) {\r\n const validation = validations[attr];\r\n if (validation === 'boolean') {\r\n classes.push(`${attr}`);\r\n } else {\r\n const values = attrs[attr].split(' ').filter(Boolean);\r\n values.forEach((val, i) => {\r\n const mediaSize = MediaSizes[i];\r\n const value = validation(val);\r\n if (mediaSize && value) {\r\n classes.push(`${attr}-${mediaSize}-${value}`);\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n return classes;\r\n};\r\n\r\nexport const getHostAttributes = <K extends string>(\r\n attrNames: readonly K[],\r\n attrs: AttrValues<K>,\r\n validations: AttrValidations<K>,\r\n short: Record<K, string>,\r\n) => {\r\n const hostAttributes: Record<string, string | undefined> = {};\r\n\r\n for (const attr of attrNames) {\r\n MediaSizes.forEach((_mediaSize, i) => {\r\n hostAttributes[`r-${short[attr]}${i + 1}`] = undefined;\r\n });\r\n\r\n if (attrs[attr] !== undefined) {\r\n const validation = validations[attr];\r\n if (validation === 'boolean') {\r\n hostAttributes[`r-${attr}`] = attr;\r\n } else {\r\n const values = attrs[attr].split(' ').filter(Boolean);\r\n values.forEach((val, i) => {\r\n const mediaSize = MediaSizes[i];\r\n const value = validation(val);\r\n if (mediaSize && value) {\r\n hostAttributes[`r-${short[attr]}${i + 1}`] = value;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n return Object.entries(hostAttributes);\r\n};\r\n\r\nexport const getHostCSS = <K extends string>(\r\n attrNames: readonly K[],\r\n attrs: AttrValues<K>,\r\n validations: AttrValidations<K>,\r\n) => {\r\n const hostCSS: Record<string, string | undefined> = {};\r\n\r\n for (const attr of attrNames) {\r\n MediaSizes.forEach((mediaSize) => {\r\n hostCSS[`--${attr}-${mediaSize}`] = undefined;\r\n });\r\n\r\n if (attrs[attr] !== undefined) {\r\n const validation = validations[attr];\r\n if (validation !== 'boolean') {\r\n const values = attrs[attr].split(' ').filter(Boolean);\r\n values.forEach((val, i) => {\r\n const mediaSize = MediaSizes[i];\r\n const value = validation(val);\r\n if (mediaSize && value) {\r\n hostCSS[`--${attr}-${mediaSize}`] = value;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n return Object.entries(hostCSS);\r\n};\r\n","import sheet from '../grid-style';\r\nimport {\r\n getClasses,\r\n getGridAttributeValue as getValues,\r\n getHostAttributes,\r\n isGridAttribute,\r\n ObservedGridAttributes as Attributes,\r\n getHostCSS,\r\n gridAttrShort,\r\n} from '../util';\r\nimport type { GridAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} skip-before - skip the given columns before the element for each breakpoint (Integers)\r\n * @attr {string} skip-after - skip the given columns after the element for each breakpoint (Integers)\r\n * @attr {string} display - set element's display value for each breakpoint\r\n * @attr {string} padding - set element's padding for each breakpoint (Dimension values)\r\n * @attr {string} order - set element's flex order for each breakpoint (Integers)\r\n * @attr {string} font - set element's font-size for each breakpoint (Font values)\r\n * @attr {string} col - set element's column spans for each breakpoint (Integers)\r\n * @attr {string} gap - set element's flex gap for each breakpoint (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-grid\r\n */\r\nexport class GridElement extends HTMLElement {\r\n static observedAttributes = Attributes;\r\n\r\n /**\r\n * @internal\r\n */\r\n private attr: Partial<GridAttributeValues> = {};\r\n\r\n /**\r\n * @internal\r\n */\r\n private readonly mainSlot = (): HTMLSlotElement | null =>\r\n this.shadowRoot?.querySelector('slot') || null;\r\n /**\r\n * @internal\r\n */\r\n private readonly container = (): Element | null => this.shadowRoot?.firstElementChild || null;\r\n\r\n constructor() {\r\n super();\r\n this.attachShadow({ mode: 'open' });\r\n this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n private detectRowChange() {\r\n const slot = this.mainSlot();\r\n const container = this.container();\r\n\r\n if (!slot || !container) return;\r\n\r\n const tenants = slot.assignedElements();\r\n const isRow = tenants.some((el) => el.matches('r-grid'));\r\n const isNowRow = this.attr.row !== 'row' && isRow;\r\n const noLongerRow = this.attr.row === 'row' && !isRow;\r\n\r\n if (isNowRow) this.attr.row = 'row';\r\n if (noLongerRow) delete this.attr.row;\r\n return isNowRow || noLongerRow;\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n private detectCellChange() {\r\n const isCell = this.parentElement?.matches('r-grid');\r\n const isNowCell = this.attr.cell !== 'cell' && isCell;\r\n const noLongerCell = this.attr.cell === 'cell' && !isCell;\r\n\r\n if (isNowCell) this.attr.cell = 'cell';\r\n if (noLongerCell) delete this.attr.cell;\r\n return isNowCell || noLongerCell;\r\n }\r\n\r\n attributeChangedCallback(name: string, _old: string, value: string) {\r\n if (isGridAttribute(name)) {\r\n this.attr[name] = value;\r\n this.render();\r\n }\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n connectedMoveCallback() {\r\n this.detectCellChange();\r\n }\r\n\r\n connectedCallback() {\r\n this.mainSlot()?.addEventListener('slotchange', () => {\r\n if (this.detectRowChange()) this.render();\r\n });\r\n\r\n this.render();\r\n const hasRowChange = this.detectRowChange();\r\n const hasCellChange = this.detectCellChange();\r\n if (hasRowChange || hasCellChange) this.render();\r\n }\r\n\r\n render() {\r\n const classes = getClasses(['row', 'gap'], this.attr, getValues);\r\n const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, gridAttrShort);\r\n const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n if ('skip-before' in this.attr) {\r\n console.log({ hostAttributes, attr: this.attr });\r\n }\r\n hostCSS.forEach(([attr, value]) => {\r\n if (value) this.style.setProperty(attr, value);\r\n if (value === undefined) this.style.removeProperty(attr);\r\n });\r\n\r\n hostAttributes.forEach(([attr, value]) => {\r\n if (value) this.setAttribute(attr, value);\r\n if (value === undefined) this.removeAttribute(attr);\r\n });\r\n\r\n this.shadowRoot!.innerHTML = `\r\n <div class=\"${classes.join(' ')}\"><slot></slot></div>\r\n `;\r\n }\r\n}\r\n\r\ncustomElements.define('r-grid', GridElement);\r\n","import sheet from '../grid-style';\r\nimport {\r\n getElemAttributeValue as getValues,\r\n getHostAttributes,\r\n isElemAttribute,\r\n ObservedElemAttributes as Attributes,\r\n getHostCSS,\r\n elmAttrShort,\r\n} from '../util';\r\nimport type { ElemAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} display - set element's display value for each breakpoint, space-separated\r\n * @attr {string} font - set element's font-size for each breakpoint, space-separated (Font values)\r\n * @attr {string} padding - set element's padding for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin - set element's margin for each breakpoint, space-separated (Integers)\r\n * @attr {string} margin-top - set element's margin-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-right - set element's margin-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-bottom - set element's margin-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-left - set element's margin-left for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-top - set element's padding-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-right - set element's padding-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-bottom - set element's padding-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-left - set element's padding-left for each breakpoint, space-separated (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-elm\r\n */\r\nexport class ResponsiveElement extends HTMLElement {\r\n static observedAttributes = Attributes;\r\n private attr: Partial<ElemAttributeValues> = {};\r\n\r\n constructor() {\r\n super();\r\n this.attachShadow({ mode: 'open' });\r\n this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n }\r\n\r\n attributeChangedCallback(name: string, _old: string, value: string) {\r\n if (isElemAttribute(name)) {\r\n this.attr[name] = value;\r\n this.render();\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.render();\r\n }\r\n\r\n render() {\r\n const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, elmAttrShort);\r\n const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n hostCSS.forEach(([attr, value]) => {\r\n if (value) this.style.setProperty(attr, value);\r\n if (value === undefined) this.style.removeProperty(attr);\r\n });\r\n\r\n hostAttributes.forEach(([attr, value]) => {\r\n if (value) this.setAttribute(attr, value);\r\n if (value === undefined) this.removeAttribute(attr);\r\n });\r\n\r\n this.shadowRoot!.innerHTML = `<slot></slot>`;\r\n }\r\n}\r\n\r\ncustomElements.define('r-elm', ResponsiveElement);\r\n"],"mappings":"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"}
|
package/dist/r-grid.es.js
DELETED
|
@@ -1,257 +0,0 @@
|
|
|
1
|
-
var grid_default = ":host{--d0:var(--grid-dim-none,0px);--d1:var(--grid-dim-small,4px);--d2:var(--grid-dim-medium,8px);--d3:var(--grid-dim-large,16px);--d4:var(--grid-dim-xlarge,32px);--d5:var(--grid-dim-xxlarge,64px);--f0:var(--grid-font-xsmall,12px);--f1:var(--grid-font-small,14px);--f2:var(--grid-font-medium,16px);--f3:var(--grid-font-large,24px);--f4:var(--grid-font-xlarge,32px);--f5:var(--grid-font-xxlarge,40px);display:block;box-sizing:border-box!important}slot{display:contents!important}.row{box-sizing:border-box;justify-content:flex-start;gap:var(--gap);--gap:0px;flex-flow:wrap;margin:0;padding:0;display:flex}.cell{box-sizing:border-box}:host([r-cell]){flex:auto}:host([r-c1]),:host([r-c2]),:host([r-c3]),:host([r-c4]){max-width:calc(var(--rc)/12*100% - var(--gap)*(12 - var(--rc))/12);flex:100%}:host([r-sb1]),:host([r-sb2]),:host([r-sb3]),:host([r-sb4]){margin-left:calc(var(--rsb)/12*100% + var(--gap)*var(--rsb)/12)}:host([r-sa1]),:host([r-sa2]),:host([r-sa3]),:host([r-sa4]){margin-right:calc(var(--rsa)/12*100% + var(--gap)*var(--rsa)/12)}@media (min-width:0){:host([r-ta1]){text-align:var(--text-align-small)}:host([r-d1]){display:var(--display-small)}:host([r-f1=\"1\"]){font-size:var(--f1)}:host([r-f1=\"2\"]){font-size:var(--f2)}:host([r-f1=\"3\"]){font-size:var(--f3)}:host([r-f1=\"4\"]){font-size:var(--f4)}:host([r-f1=\"5\"]){font-size:var(--f5)}:host([r-f1=\"6\"]){font-size:var(--f6)}.row.gap-small-1{--gap:var(--d1)}:host([r-p1=\"1\"]){padding:var(--d1)}:host([r-pt1=\"1\"]){padding-top:var(--d1)}:host([r-pl1=\"1\"]){padding-left:var(--d1)}:host([r-pb1=\"1\"]){padding-bottom:var(--d1)}:host([r-pr1=\"1\"]){padding-right:var(--d1)}:host([r-m1=\"1\"]){margin:var(--d1)}:host([r-mt1=\"1\"]){margin-top:var(--d1)}:host([r-ml1=\"1\"]){margin-left:var(--d1)}:host([r-mb1=\"1\"]){margin-bottom:var(--d1)}:host([r-mr1=\"1\"]){margin-right:var(--d1)}.row.gap-small-2{--gap:var(--d2)}:host([r-p1=\"2\"]){padding:var(--d2)}:host([r-pt1=\"2\"]){padding-top:var(--d2)}:host([r-pl1=\"2\"]){padding-left:var(--d2)}:host([r-pb1=\"2\"]){padding-bottom:var(--d2)}:host([r-pr1=\"2\"]){padding-right:var(--d2)}:host([r-m1=\"2\"]){margin:var(--d2)}:host([r-mt1=\"2\"]){margin-top:var(--d2)}:host([r-ml1=\"2\"]){margin-left:var(--d2)}:host([r-mb1=\"2\"]){margin-bottom:var(--d2)}:host([r-mr1=\"2\"]){margin-right:var(--d2)}.row.gap-small-3{--gap:var(--d3)}:host([r-p1=\"3\"]){padding:var(--d3)}:host([r-pt1=\"3\"]){padding-top:var(--d3)}:host([r-pl1=\"3\"]){padding-left:var(--d3)}:host([r-pb1=\"3\"]){padding-bottom:var(--d3)}:host([r-pr1=\"3\"]){padding-right:var(--d3)}:host([r-m1=\"3\"]){margin:var(--d3)}:host([r-mt1=\"3\"]){margin-top:var(--d3)}:host([r-ml1=\"3\"]){margin-left:var(--d3)}:host([r-mb1=\"3\"]){margin-bottom:var(--d3)}:host([r-mr1=\"3\"]){margin-right:var(--d3)}.row.gap-small-4{--gap:var(--d4)}:host([r-p1=\"4\"]){padding:var(--d4)}:host([r-pt1=\"4\"]){padding-top:var(--d4)}:host([r-pl1=\"4\"]){padding-left:var(--d4)}:host([r-pb1=\"4\"]){padding-bottom:var(--d4)}:host([r-pr1=\"4\"]){padding-right:var(--d4)}:host([r-m1=\"4\"]){margin:var(--d4)}:host([r-mt1=\"4\"]){margin-top:var(--d4)}:host([r-ml1=\"4\"]){margin-left:var(--d4)}:host([r-mb1=\"4\"]){margin-bottom:var(--d4)}:host([r-mr1=\"4\"]){margin-right:var(--d4)}.row.gap-small-5{--gap:var(--d5)}:host([r-p1=\"5\"]){padding:var(--d5)}:host([r-pt1=\"5\"]){padding-top:var(--d5)}:host([r-pl1=\"5\"]){padding-left:var(--d5)}:host([r-pb1=\"5\"]){padding-bottom:var(--d5)}:host([r-pr1=\"5\"]){padding-right:var(--d5)}:host([r-m1=\"5\"]){margin:var(--d5)}:host([r-mt1=\"5\"]){margin-top:var(--d5)}:host([r-ml1=\"5\"]){margin-left:var(--d5)}:host([r-mb1=\"5\"]){margin-bottom:var(--d5)}:host([r-mr1=\"5\"]){margin-right:var(--d5)}.row.gap-small-6{--gap:var(--d6)}:host([r-p1=\"6\"]){padding:var(--d6)}:host([r-pt1=\"6\"]){padding-top:var(--d6)}:host([r-pl1=\"6\"]){padding-left:var(--d6)}:host([r-pb1=\"6\"]){padding-bottom:var(--d6)}:host([r-pr1=\"6\"]){padding-right:var(--d6)}:host([r-m1=\"6\"]){margin:var(--d6)}:host([r-mt1=\"6\"]){margin-top:var(--d6)}:host([r-ml1=\"6\"]){margin-left:var(--d6)}:host([r-mb1=\"6\"]){margin-bottom:var(--d6)}:host([r-mr1=\"6\"]){margin-right:var(--d6)}:host([r-or1=\"12\"]){order:12}:host([r-c1=\"12\"]){--rc:12}:host([r-or1=\"11\"]){order:11}:host([r-c1=\"11\"]){--rc:11}:host([r-or1=\"10\"]){order:10}:host([r-c1=\"10\"]){--rc:10}:host([r-or1=\"9\"]){order:9}:host([r-c1=\"9\"]){--rc:9}:host([r-or1=\"8\"]){order:8}:host([r-c1=\"8\"]){--rc:8}:host([r-or1=\"7\"]){order:7}:host([r-c1=\"7\"]){--rc:7}:host([r-or1=\"6\"]){order:6}:host([r-c1=\"6\"]){--rc:6}:host([r-or1=\"5\"]){order:5}:host([r-c1=\"5\"]){--rc:5}:host([r-or1=\"4\"]){order:4}:host([r-c1=\"4\"]){--rc:4}:host([r-or1=\"3\"]){order:3}:host([r-c1=\"3\"]){--rc:3}:host([r-or1=\"2\"]){order:2}:host([r-c1=\"2\"]){--rc:2}:host([r-or1=\"1\"]){order:1}:host([r-c1=\"1\"]){--rc:1}:host([r-sb1=\"11\"]){--rsb:11}:host([r-sa1=\"11\"]){--rsa:11}:host([r-sb1=\"10\"]){--rsb:10}:host([r-sa1=\"10\"]){--rsa:10}:host([r-sb1=\"9\"]){--rsb:9}:host([r-sa1=\"9\"]){--rsa:9}:host([r-sb1=\"8\"]){--rsb:8}:host([r-sa1=\"8\"]){--rsa:8}:host([r-sb1=\"7\"]){--rsb:7}:host([r-sa1=\"7\"]){--rsa:7}:host([r-sb1=\"6\"]){--rsb:6}:host([r-sa1=\"6\"]){--rsa:6}:host([r-sb1=\"5\"]){--rsb:5}:host([r-sa1=\"5\"]){--rsa:5}:host([r-sb1=\"4\"]){--rsb:4}:host([r-sa1=\"4\"]){--rsa:4}:host([r-sb1=\"3\"]){--rsb:3}:host([r-sa1=\"3\"]){--rsa:3}:host([r-sb1=\"2\"]){--rsb:2}:host([r-sa1=\"2\"]){--rsa:2}:host([r-sb1=\"1\"]){--rsb:1}:host([r-sa1=\"1\"]){--rsa:1}:host([r-sb1=\"0\"]){--rsb:0}:host([r-sa1=\"0\"]){--rsa:0}}@media (min-width:768px){:host([r-ta2]){text-align:var(--text-align-medium)}:host([r-d2]){display:var(--display-medium)}:host([r-f2=\"1\"]){font-size:var(--f1)}:host([r-f2=\"2\"]){font-size:var(--f2)}:host([r-f2=\"3\"]){font-size:var(--f3)}:host([r-f2=\"4\"]){font-size:var(--f4)}:host([r-f2=\"5\"]){font-size:var(--f5)}:host([r-f2=\"6\"]){font-size:var(--f6)}.row.gap-medium-1{--gap:var(--d1)}:host([r-p2=\"1\"]){padding:var(--d1)}:host([r-pt2=\"1\"]){padding-top:var(--d1)}:host([r-pl2=\"1\"]){padding-left:var(--d1)}:host([r-pb2=\"1\"]){padding-bottom:var(--d1)}:host([r-pr2=\"1\"]){padding-right:var(--d1)}:host([r-m2=\"1\"]){margin:var(--d1)}:host([r-mt2=\"1\"]){margin-top:var(--d1)}:host([r-ml2=\"1\"]){margin-left:var(--d1)}:host([r-mb2=\"1\"]){margin-bottom:var(--d1)}:host([r-mr2=\"1\"]){margin-right:var(--d1)}.row.gap-medium-2{--gap:var(--d2)}:host([r-p2=\"2\"]){padding:var(--d2)}:host([r-pt2=\"2\"]){padding-top:var(--d2)}:host([r-pl2=\"2\"]){padding-left:var(--d2)}:host([r-pb2=\"2\"]){padding-bottom:var(--d2)}:host([r-pr2=\"2\"]){padding-right:var(--d2)}:host([r-m2=\"2\"]){margin:var(--d2)}:host([r-mt2=\"2\"]){margin-top:var(--d2)}:host([r-ml2=\"2\"]){margin-left:var(--d2)}:host([r-mb2=\"2\"]){margin-bottom:var(--d2)}:host([r-mr2=\"2\"]){margin-right:var(--d2)}.row.gap-medium-3{--gap:var(--d3)}:host([r-p2=\"3\"]){padding:var(--d3)}:host([r-pt2=\"3\"]){padding-top:var(--d3)}:host([r-pl2=\"3\"]){padding-left:var(--d3)}:host([r-pb2=\"3\"]){padding-bottom:var(--d3)}:host([r-pr2=\"3\"]){padding-right:var(--d3)}:host([r-m2=\"3\"]){margin:var(--d3)}:host([r-mt2=\"3\"]){margin-top:var(--d3)}:host([r-ml2=\"3\"]){margin-left:var(--d3)}:host([r-mb2=\"3\"]){margin-bottom:var(--d3)}:host([r-mr2=\"3\"]){margin-right:var(--d3)}.row.gap-medium-4{--gap:var(--d4)}:host([r-p2=\"4\"]){padding:var(--d4)}:host([r-pt2=\"4\"]){padding-top:var(--d4)}:host([r-pl2=\"4\"]){padding-left:var(--d4)}:host([r-pb2=\"4\"]){padding-bottom:var(--d4)}:host([r-pr2=\"4\"]){padding-right:var(--d4)}:host([r-m2=\"4\"]){margin:var(--d4)}:host([r-mt2=\"4\"]){margin-top:var(--d4)}:host([r-ml2=\"4\"]){margin-left:var(--d4)}:host([r-mb2=\"4\"]){margin-bottom:var(--d4)}:host([r-mr2=\"4\"]){margin-right:var(--d4)}.row.gap-medium-5{--gap:var(--d5)}:host([r-p2=\"5\"]){padding:var(--d5)}:host([r-pt2=\"5\"]){padding-top:var(--d5)}:host([r-pl2=\"5\"]){padding-left:var(--d5)}:host([r-pb2=\"5\"]){padding-bottom:var(--d5)}:host([r-pr2=\"5\"]){padding-right:var(--d5)}:host([r-m2=\"5\"]){margin:var(--d5)}:host([r-mt2=\"5\"]){margin-top:var(--d5)}:host([r-ml2=\"5\"]){margin-left:var(--d5)}:host([r-mb2=\"5\"]){margin-bottom:var(--d5)}:host([r-mr2=\"5\"]){margin-right:var(--d5)}.row.gap-medium-6{--gap:var(--d6)}:host([r-p2=\"6\"]){padding:var(--d6)}:host([r-pt2=\"6\"]){padding-top:var(--d6)}:host([r-pl2=\"6\"]){padding-left:var(--d6)}:host([r-pb2=\"6\"]){padding-bottom:var(--d6)}:host([r-pr2=\"6\"]){padding-right:var(--d6)}:host([r-m2=\"6\"]){margin:var(--d6)}:host([r-mt2=\"6\"]){margin-top:var(--d6)}:host([r-ml2=\"6\"]){margin-left:var(--d6)}:host([r-mb2=\"6\"]){margin-bottom:var(--d6)}:host([r-mr2=\"6\"]){margin-right:var(--d6)}:host([r-or2=\"12\"]){order:12}:host([r-c2=\"12\"]){--rc:12}:host([r-or2=\"11\"]){order:11}:host([r-c2=\"11\"]){--rc:11}:host([r-or2=\"10\"]){order:10}:host([r-c2=\"10\"]){--rc:10}:host([r-or2=\"9\"]){order:9}:host([r-c2=\"9\"]){--rc:9}:host([r-or2=\"8\"]){order:8}:host([r-c2=\"8\"]){--rc:8}:host([r-or2=\"7\"]){order:7}:host([r-c2=\"7\"]){--rc:7}:host([r-or2=\"6\"]){order:6}:host([r-c2=\"6\"]){--rc:6}:host([r-or2=\"5\"]){order:5}:host([r-c2=\"5\"]){--rc:5}:host([r-or2=\"4\"]){order:4}:host([r-c2=\"4\"]){--rc:4}:host([r-or2=\"3\"]){order:3}:host([r-c2=\"3\"]){--rc:3}:host([r-or2=\"2\"]){order:2}:host([r-c2=\"2\"]){--rc:2}:host([r-or2=\"1\"]){order:1}:host([r-c2=\"1\"]){--rc:1}:host([r-sb2=\"11\"]){--rsb:11}:host([r-sa2=\"11\"]){--rsa:11}:host([r-sb2=\"10\"]){--rsb:10}:host([r-sa2=\"10\"]){--rsa:10}:host([r-sb2=\"9\"]){--rsb:9}:host([r-sa2=\"9\"]){--rsa:9}:host([r-sb2=\"8\"]){--rsb:8}:host([r-sa2=\"8\"]){--rsa:8}:host([r-sb2=\"7\"]){--rsb:7}:host([r-sa2=\"7\"]){--rsa:7}:host([r-sb2=\"6\"]){--rsb:6}:host([r-sa2=\"6\"]){--rsa:6}:host([r-sb2=\"5\"]){--rsb:5}:host([r-sa2=\"5\"]){--rsa:5}:host([r-sb2=\"4\"]){--rsb:4}:host([r-sa2=\"4\"]){--rsa:4}:host([r-sb2=\"3\"]){--rsb:3}:host([r-sa2=\"3\"]){--rsa:3}:host([r-sb2=\"2\"]){--rsb:2}:host([r-sa2=\"2\"]){--rsa:2}:host([r-sb2=\"1\"]){--rsb:1}:host([r-sa2=\"1\"]){--rsa:1}:host([r-sb2=\"0\"]){--rsb:0}:host([r-sa2=\"0\"]){--rsa:0}}@media (min-width:1024px){:host([r-ta3]){text-align:var(--text-align-large)}:host([r-d3]){display:var(--display-large)}:host([r-f3=\"1\"]){font-size:var(--f1)}:host([r-f3=\"2\"]){font-size:var(--f2)}:host([r-f3=\"3\"]){font-size:var(--f3)}:host([r-f3=\"4\"]){font-size:var(--f4)}:host([r-f3=\"5\"]){font-size:var(--f5)}:host([r-f3=\"6\"]){font-size:var(--f6)}.row.gap-large-1{--gap:var(--d1)}:host([r-p3=\"1\"]){padding:var(--d1)}:host([r-pt3=\"1\"]){padding-top:var(--d1)}:host([r-pl3=\"1\"]){padding-left:var(--d1)}:host([r-pb3=\"1\"]){padding-bottom:var(--d1)}:host([r-pr3=\"1\"]){padding-right:var(--d1)}:host([r-m3=\"1\"]){margin:var(--d1)}:host([r-mt3=\"1\"]){margin-top:var(--d1)}:host([r-ml3=\"1\"]){margin-left:var(--d1)}:host([r-mb3=\"1\"]){margin-bottom:var(--d1)}:host([r-mr3=\"1\"]){margin-right:var(--d1)}.row.gap-large-2{--gap:var(--d2)}:host([r-p3=\"2\"]){padding:var(--d2)}:host([r-pt3=\"2\"]){padding-top:var(--d2)}:host([r-pl3=\"2\"]){padding-left:var(--d2)}:host([r-pb3=\"2\"]){padding-bottom:var(--d2)}:host([r-pr3=\"2\"]){padding-right:var(--d2)}:host([r-m3=\"2\"]){margin:var(--d2)}:host([r-mt3=\"2\"]){margin-top:var(--d2)}:host([r-ml3=\"2\"]){margin-left:var(--d2)}:host([r-mb3=\"2\"]){margin-bottom:var(--d2)}:host([r-mr3=\"2\"]){margin-right:var(--d2)}.row.gap-large-3{--gap:var(--d3)}:host([r-p3=\"3\"]){padding:var(--d3)}:host([r-pt3=\"3\"]){padding-top:var(--d3)}:host([r-pl3=\"3\"]){padding-left:var(--d3)}:host([r-pb3=\"3\"]){padding-bottom:var(--d3)}:host([r-pr3=\"3\"]){padding-right:var(--d3)}:host([r-m3=\"3\"]){margin:var(--d3)}:host([r-mt3=\"3\"]){margin-top:var(--d3)}:host([r-ml3=\"3\"]){margin-left:var(--d3)}:host([r-mb3=\"3\"]){margin-bottom:var(--d3)}:host([r-mr3=\"3\"]){margin-right:var(--d3)}.row.gap-large-4{--gap:var(--d4)}:host([r-p3=\"4\"]){padding:var(--d4)}:host([r-pt3=\"4\"]){padding-top:var(--d4)}:host([r-pl3=\"4\"]){padding-left:var(--d4)}:host([r-pb3=\"4\"]){padding-bottom:var(--d4)}:host([r-pr3=\"4\"]){padding-right:var(--d4)}:host([r-m3=\"4\"]){margin:var(--d4)}:host([r-mt3=\"4\"]){margin-top:var(--d4)}:host([r-ml3=\"4\"]){margin-left:var(--d4)}:host([r-mb3=\"4\"]){margin-bottom:var(--d4)}:host([r-mr3=\"4\"]){margin-right:var(--d4)}.row.gap-large-5{--gap:var(--d5)}:host([r-p3=\"5\"]){padding:var(--d5)}:host([r-pt3=\"5\"]){padding-top:var(--d5)}:host([r-pl3=\"5\"]){padding-left:var(--d5)}:host([r-pb3=\"5\"]){padding-bottom:var(--d5)}:host([r-pr3=\"5\"]){padding-right:var(--d5)}:host([r-m3=\"5\"]){margin:var(--d5)}:host([r-mt3=\"5\"]){margin-top:var(--d5)}:host([r-ml3=\"5\"]){margin-left:var(--d5)}:host([r-mb3=\"5\"]){margin-bottom:var(--d5)}:host([r-mr3=\"5\"]){margin-right:var(--d5)}.row.gap-large-6{--gap:var(--d6)}:host([r-p3=\"6\"]){padding:var(--d6)}:host([r-pt3=\"6\"]){padding-top:var(--d6)}:host([r-pl3=\"6\"]){padding-left:var(--d6)}:host([r-pb3=\"6\"]){padding-bottom:var(--d6)}:host([r-pr3=\"6\"]){padding-right:var(--d6)}:host([r-m3=\"6\"]){margin:var(--d6)}:host([r-mt3=\"6\"]){margin-top:var(--d6)}:host([r-ml3=\"6\"]){margin-left:var(--d6)}:host([r-mb3=\"6\"]){margin-bottom:var(--d6)}:host([r-mr3=\"6\"]){margin-right:var(--d6)}:host([r-or3=\"12\"]){order:12}:host([r-c3=\"12\"]){--rc:12}:host([r-or3=\"11\"]){order:11}:host([r-c3=\"11\"]){--rc:11}:host([r-or3=\"10\"]){order:10}:host([r-c3=\"10\"]){--rc:10}:host([r-or3=\"9\"]){order:9}:host([r-c3=\"9\"]){--rc:9}:host([r-or3=\"8\"]){order:8}:host([r-c3=\"8\"]){--rc:8}:host([r-or3=\"7\"]){order:7}:host([r-c3=\"7\"]){--rc:7}:host([r-or3=\"6\"]){order:6}:host([r-c3=\"6\"]){--rc:6}:host([r-or3=\"5\"]){order:5}:host([r-c3=\"5\"]){--rc:5}:host([r-or3=\"4\"]){order:4}:host([r-c3=\"4\"]){--rc:4}:host([r-or3=\"3\"]){order:3}:host([r-c3=\"3\"]){--rc:3}:host([r-or3=\"2\"]){order:2}:host([r-c3=\"2\"]){--rc:2}:host([r-or3=\"1\"]){order:1}:host([r-c3=\"1\"]){--rc:1}:host([r-sb3=\"11\"]){--rsb:11}:host([r-sa3=\"11\"]){--rsa:11}:host([r-sb3=\"10\"]){--rsb:10}:host([r-sa3=\"10\"]){--rsa:10}:host([r-sb3=\"9\"]){--rsb:9}:host([r-sa3=\"9\"]){--rsa:9}:host([r-sb3=\"8\"]){--rsb:8}:host([r-sa3=\"8\"]){--rsa:8}:host([r-sb3=\"7\"]){--rsb:7}:host([r-sa3=\"7\"]){--rsa:7}:host([r-sb3=\"6\"]){--rsb:6}:host([r-sa3=\"6\"]){--rsa:6}:host([r-sb3=\"5\"]){--rsb:5}:host([r-sa3=\"5\"]){--rsa:5}:host([r-sb3=\"4\"]){--rsb:4}:host([r-sa3=\"4\"]){--rsa:4}:host([r-sb3=\"3\"]){--rsb:3}:host([r-sa3=\"3\"]){--rsa:3}:host([r-sb3=\"2\"]){--rsb:2}:host([r-sa3=\"2\"]){--rsa:2}:host([r-sb3=\"1\"]){--rsb:1}:host([r-sa3=\"1\"]){--rsa:1}:host([r-sb3=\"0\"]){--rsb:0}:host([r-sa3=\"0\"]){--rsa:0}}@media (min-width:1280px){:host([r-ta4]){text-align:var(--text-align-xlarge)}:host([r-d4]){display:var(--display-xlarge)}:host([r-f4=\"1\"]){font-size:var(--f1)}:host([r-f4=\"2\"]){font-size:var(--f2)}:host([r-f4=\"3\"]){font-size:var(--f3)}:host([r-f4=\"4\"]){font-size:var(--f4)}:host([r-f4=\"5\"]){font-size:var(--f5)}:host([r-f4=\"6\"]){font-size:var(--f6)}.row.gap-xlarge-1{--gap:var(--d1)}:host([r-p4=\"1\"]){padding:var(--d1)}:host([r-pt4=\"1\"]){padding-top:var(--d1)}:host([r-pl4=\"1\"]){padding-left:var(--d1)}:host([r-pb4=\"1\"]){padding-bottom:var(--d1)}:host([r-pr4=\"1\"]){padding-right:var(--d1)}:host([r-m4=\"1\"]){margin:var(--d1)}:host([r-mt4=\"1\"]){margin-top:var(--d1)}:host([r-ml4=\"1\"]){margin-left:var(--d1)}:host([r-mb4=\"1\"]){margin-bottom:var(--d1)}:host([r-mr4=\"1\"]){margin-right:var(--d1)}.row.gap-xlarge-2{--gap:var(--d2)}:host([r-p4=\"2\"]){padding:var(--d2)}:host([r-pt4=\"2\"]){padding-top:var(--d2)}:host([r-pl4=\"2\"]){padding-left:var(--d2)}:host([r-pb4=\"2\"]){padding-bottom:var(--d2)}:host([r-pr4=\"2\"]){padding-right:var(--d2)}:host([r-m4=\"2\"]){margin:var(--d2)}:host([r-mt4=\"2\"]){margin-top:var(--d2)}:host([r-ml4=\"2\"]){margin-left:var(--d2)}:host([r-mb4=\"2\"]){margin-bottom:var(--d2)}:host([r-mr4=\"2\"]){margin-right:var(--d2)}.row.gap-xlarge-3{--gap:var(--d3)}:host([r-p4=\"3\"]){padding:var(--d3)}:host([r-pt4=\"3\"]){padding-top:var(--d3)}:host([r-pl4=\"3\"]){padding-left:var(--d3)}:host([r-pb4=\"3\"]){padding-bottom:var(--d3)}:host([r-pr4=\"3\"]){padding-right:var(--d3)}:host([r-m4=\"3\"]){margin:var(--d3)}:host([r-mt4=\"3\"]){margin-top:var(--d3)}:host([r-ml4=\"3\"]){margin-left:var(--d3)}:host([r-mb4=\"3\"]){margin-bottom:var(--d3)}:host([r-mr4=\"3\"]){margin-right:var(--d3)}.row.gap-xlarge-4{--gap:var(--d4)}:host([r-p4=\"4\"]){padding:var(--d4)}:host([r-pt4=\"4\"]){padding-top:var(--d4)}:host([r-pl4=\"4\"]){padding-left:var(--d4)}:host([r-pb4=\"4\"]){padding-bottom:var(--d4)}:host([r-pr4=\"4\"]){padding-right:var(--d4)}:host([r-m4=\"4\"]){margin:var(--d4)}:host([r-mt4=\"4\"]){margin-top:var(--d4)}:host([r-ml4=\"4\"]){margin-left:var(--d4)}:host([r-mb4=\"4\"]){margin-bottom:var(--d4)}:host([r-mr4=\"4\"]){margin-right:var(--d4)}.row.gap-xlarge-5{--gap:var(--d5)}:host([r-p4=\"5\"]){padding:var(--d5)}:host([r-pt4=\"5\"]){padding-top:var(--d5)}:host([r-pl4=\"5\"]){padding-left:var(--d5)}:host([r-pb4=\"5\"]){padding-bottom:var(--d5)}:host([r-pr4=\"5\"]){padding-right:var(--d5)}:host([r-m4=\"5\"]){margin:var(--d5)}:host([r-mt4=\"5\"]){margin-top:var(--d5)}:host([r-ml4=\"5\"]){margin-left:var(--d5)}:host([r-mb4=\"5\"]){margin-bottom:var(--d5)}:host([r-mr4=\"5\"]){margin-right:var(--d5)}.row.gap-xlarge-6{--gap:var(--d6)}:host([r-p4=\"6\"]){padding:var(--d6)}:host([r-pt4=\"6\"]){padding-top:var(--d6)}:host([r-pl4=\"6\"]){padding-left:var(--d6)}:host([r-pb4=\"6\"]){padding-bottom:var(--d6)}:host([r-pr4=\"6\"]){padding-right:var(--d6)}:host([r-m4=\"6\"]){margin:var(--d6)}:host([r-mt4=\"6\"]){margin-top:var(--d6)}:host([r-ml4=\"6\"]){margin-left:var(--d6)}:host([r-mb4=\"6\"]){margin-bottom:var(--d6)}:host([r-mr4=\"6\"]){margin-right:var(--d6)}:host([r-or4=\"12\"]){order:12}:host([r-c4=\"12\"]){--rc:12}:host([r-or4=\"11\"]){order:11}:host([r-c4=\"11\"]){--rc:11}:host([r-or4=\"10\"]){order:10}:host([r-c4=\"10\"]){--rc:10}:host([r-or4=\"9\"]){order:9}:host([r-c4=\"9\"]){--rc:9}:host([r-or4=\"8\"]){order:8}:host([r-c4=\"8\"]){--rc:8}:host([r-or4=\"7\"]){order:7}:host([r-c4=\"7\"]){--rc:7}:host([r-or4=\"6\"]){order:6}:host([r-c4=\"6\"]){--rc:6}:host([r-or4=\"5\"]){order:5}:host([r-c4=\"5\"]){--rc:5}:host([r-or4=\"4\"]){order:4}:host([r-c4=\"4\"]){--rc:4}:host([r-or4=\"3\"]){order:3}:host([r-c4=\"3\"]){--rc:3}:host([r-or4=\"2\"]){order:2}:host([r-c4=\"2\"]){--rc:2}:host([r-or4=\"1\"]){order:1}:host([r-c4=\"1\"]){--rc:1}:host([r-sb4=\"11\"]){--rsb:11}:host([r-sa4=\"11\"]){--rsa:11}:host([r-sb4=\"10\"]){--rsb:10}:host([r-sa4=\"10\"]){--rsa:10}:host([r-sb4=\"9\"]){--rsb:9}:host([r-sa4=\"9\"]){--rsa:9}:host([r-sb4=\"8\"]){--rsb:8}:host([r-sa4=\"8\"]){--rsa:8}:host([r-sb4=\"7\"]){--rsb:7}:host([r-sa4=\"7\"]){--rsa:7}:host([r-sb4=\"6\"]){--rsb:6}:host([r-sa4=\"6\"]){--rsa:6}:host([r-sb4=\"5\"]){--rsb:5}:host([r-sa4=\"5\"]){--rsa:5}:host([r-sb4=\"4\"]){--rsb:4}:host([r-sa4=\"4\"]){--rsa:4}:host([r-sb4=\"3\"]){--rsb:3}:host([r-sa4=\"3\"]){--rsa:3}:host([r-sb4=\"2\"]){--rsb:2}:host([r-sa4=\"2\"]){--rsa:2}:host([r-sb4=\"1\"]){--rsb:1}:host([r-sa4=\"1\"]){--rsa:1}:host([r-sb4=\"0\"]){--rsb:0}:host([r-sa4=\"0\"]){--rsa:0}}", sheet = new CSSStyleSheet();
|
|
2
|
-
sheet.replaceSync(grid_default);
|
|
3
|
-
var grid_style_default = sheet;
|
|
4
|
-
const GlobalValues = [
|
|
5
|
-
"inherit",
|
|
6
|
-
"initial",
|
|
7
|
-
"revert",
|
|
8
|
-
"revert-layer",
|
|
9
|
-
"unset"
|
|
10
|
-
], ObservedElemAttributes = [
|
|
11
|
-
"display",
|
|
12
|
-
"font",
|
|
13
|
-
"text-align",
|
|
14
|
-
"padding",
|
|
15
|
-
"padding-top",
|
|
16
|
-
"padding-right",
|
|
17
|
-
"padding-bottom",
|
|
18
|
-
"padding-left",
|
|
19
|
-
"margin",
|
|
20
|
-
"margin-top",
|
|
21
|
-
"margin-right",
|
|
22
|
-
"margin-bottom",
|
|
23
|
-
"margin-left"
|
|
24
|
-
], ObservedGridAttributes = [
|
|
25
|
-
"row",
|
|
26
|
-
"cell",
|
|
27
|
-
"col",
|
|
28
|
-
"display",
|
|
29
|
-
"text-align",
|
|
30
|
-
"order",
|
|
31
|
-
"skip-before",
|
|
32
|
-
"skip-after",
|
|
33
|
-
"gap",
|
|
34
|
-
"padding",
|
|
35
|
-
"font"
|
|
36
|
-
], MediaSizes = [
|
|
37
|
-
"small",
|
|
38
|
-
"medium",
|
|
39
|
-
"large",
|
|
40
|
-
"xlarge"
|
|
41
|
-
], DimensionSizes = [
|
|
42
|
-
"none",
|
|
43
|
-
"small",
|
|
44
|
-
"medium",
|
|
45
|
-
"large",
|
|
46
|
-
"xlarge",
|
|
47
|
-
"xxlarge",
|
|
48
|
-
"small-",
|
|
49
|
-
"medium-",
|
|
50
|
-
"large-",
|
|
51
|
-
"xlarge-",
|
|
52
|
-
"xxlarge-"
|
|
53
|
-
], DisplayValues = [
|
|
54
|
-
"block",
|
|
55
|
-
"inline",
|
|
56
|
-
"inline-block",
|
|
57
|
-
"flex",
|
|
58
|
-
"inline-flex",
|
|
59
|
-
"grid",
|
|
60
|
-
"inline-grid",
|
|
61
|
-
"flow-root",
|
|
62
|
-
"none",
|
|
63
|
-
"contents",
|
|
64
|
-
"table",
|
|
65
|
-
"table-row",
|
|
66
|
-
"list-item",
|
|
67
|
-
...GlobalValues
|
|
68
|
-
], TextAlignValues = [
|
|
69
|
-
"start",
|
|
70
|
-
"end",
|
|
71
|
-
"left",
|
|
72
|
-
"right",
|
|
73
|
-
"center",
|
|
74
|
-
"justify",
|
|
75
|
-
"match-parent"
|
|
76
|
-
], FontSizes = [
|
|
77
|
-
"xsmall",
|
|
78
|
-
"small",
|
|
79
|
-
"medium",
|
|
80
|
-
"large",
|
|
81
|
-
"xlarge",
|
|
82
|
-
"xxlarge"
|
|
83
|
-
], isElemAttribute = (t) => ObservedElemAttributes.includes(t), isGridAttribute = (t) => ObservedGridAttributes.includes(t);
|
|
84
|
-
var getValidNumber = (t) => {
|
|
85
|
-
let b = parseInt(t.trim());
|
|
86
|
-
return b === void 0 ? null : String(b);
|
|
87
|
-
}, getValidDisplay = (t) => {
|
|
88
|
-
let b = t.trim().toLowerCase();
|
|
89
|
-
return DisplayValues.includes(b) ? b : null;
|
|
90
|
-
}, getValidDimension = (t) => {
|
|
91
|
-
let b = t.trim().toLowerCase();
|
|
92
|
-
return DimensionSizes.includes(b) ? String(DimensionSizes.indexOf(b)) : null;
|
|
93
|
-
}, getValidTextAlign = (t) => {
|
|
94
|
-
let b = t.trim().toLowerCase();
|
|
95
|
-
return TextAlignValues.includes(b) ? b : null;
|
|
96
|
-
}, getValidFont = (t) => {
|
|
97
|
-
let b = t.trim().toLowerCase();
|
|
98
|
-
return FontSizes.includes(b) ? String(FontSizes.indexOf(b)) : null;
|
|
99
|
-
};
|
|
100
|
-
const getGridAttributeValue = {
|
|
101
|
-
row: "boolean",
|
|
102
|
-
cell: "boolean",
|
|
103
|
-
"text-align": getValidTextAlign,
|
|
104
|
-
"skip-before": getValidNumber,
|
|
105
|
-
"skip-after": getValidNumber,
|
|
106
|
-
col: getValidNumber,
|
|
107
|
-
gap: getValidDimension,
|
|
108
|
-
font: getValidFont,
|
|
109
|
-
order: getValidNumber,
|
|
110
|
-
display: getValidDisplay,
|
|
111
|
-
padding: getValidDimension
|
|
112
|
-
}, getElemAttributeValue = {
|
|
113
|
-
font: getValidFont,
|
|
114
|
-
margin: getValidDimension,
|
|
115
|
-
padding: getValidDimension,
|
|
116
|
-
display: getValidDisplay,
|
|
117
|
-
"text-align": getValidTextAlign,
|
|
118
|
-
"margin-top": getValidDimension,
|
|
119
|
-
"margin-right": getValidDimension,
|
|
120
|
-
"margin-bottom": getValidDimension,
|
|
121
|
-
"margin-left": getValidDimension,
|
|
122
|
-
"padding-top": getValidDimension,
|
|
123
|
-
"padding-right": getValidDimension,
|
|
124
|
-
"padding-bottom": getValidDimension,
|
|
125
|
-
"padding-left": getValidDimension
|
|
126
|
-
}, gridAttrShort = {
|
|
127
|
-
font: "f",
|
|
128
|
-
padding: "p",
|
|
129
|
-
display: "d",
|
|
130
|
-
row: "row",
|
|
131
|
-
cell: "cell",
|
|
132
|
-
col: "c",
|
|
133
|
-
gap: "g",
|
|
134
|
-
order: "or",
|
|
135
|
-
"skip-before": "sb",
|
|
136
|
-
"skip-after": "sa",
|
|
137
|
-
"text-align": "ta"
|
|
138
|
-
}, elmAttrShort = {
|
|
139
|
-
font: "f",
|
|
140
|
-
margin: "m",
|
|
141
|
-
padding: "p",
|
|
142
|
-
display: "d",
|
|
143
|
-
"text-align": "ta",
|
|
144
|
-
"margin-top": "mt",
|
|
145
|
-
"margin-right": "mr",
|
|
146
|
-
"margin-bottom": "mb",
|
|
147
|
-
"margin-left": "ml",
|
|
148
|
-
"padding-top": "pt",
|
|
149
|
-
"padding-right": "pr",
|
|
150
|
-
"padding-bottom": "pb",
|
|
151
|
-
"padding-left": "pl"
|
|
152
|
-
}, getClasses = (t, b, x) => {
|
|
153
|
-
let S = [];
|
|
154
|
-
for (let C of t) if (b[C] !== void 0) {
|
|
155
|
-
let t = x[C];
|
|
156
|
-
t === "boolean" ? S.push(`${C}`) : b[C].split(" ").filter(Boolean).forEach((b, x) => {
|
|
157
|
-
let w = MediaSizes[x], T = t(b);
|
|
158
|
-
w && T && S.push(`${C}-${w}-${T}`);
|
|
159
|
-
});
|
|
160
|
-
}
|
|
161
|
-
return S;
|
|
162
|
-
}, getHostAttributes = (t, b, x, S) => {
|
|
163
|
-
let C = {};
|
|
164
|
-
for (let w of t) if (MediaSizes.forEach((t, b) => {
|
|
165
|
-
C[`r-${S[w]}${b + 1}`] = void 0;
|
|
166
|
-
}), b[w] !== void 0) {
|
|
167
|
-
let t = x[w];
|
|
168
|
-
t === "boolean" ? C[`r-${w}`] = w : b[w].split(" ").filter(Boolean).forEach((b, x) => {
|
|
169
|
-
let T = MediaSizes[x], E = t(b);
|
|
170
|
-
T && E && (C[`r-${S[w]}${x + 1}`] = E);
|
|
171
|
-
});
|
|
172
|
-
}
|
|
173
|
-
return Object.entries(C);
|
|
174
|
-
}, getHostCSS = (t, b, x) => {
|
|
175
|
-
let S = {};
|
|
176
|
-
for (let C of t) if (MediaSizes.forEach((t) => {
|
|
177
|
-
S[`--${C}-${t}`] = void 0;
|
|
178
|
-
}), b[C] !== void 0) {
|
|
179
|
-
let t = x[C];
|
|
180
|
-
t !== "boolean" && b[C].split(" ").filter(Boolean).forEach((b, x) => {
|
|
181
|
-
let w = MediaSizes[x], T = t(b);
|
|
182
|
-
w && T && (S[`--${C}-${w}`] = T);
|
|
183
|
-
});
|
|
184
|
-
}
|
|
185
|
-
return Object.entries(S);
|
|
186
|
-
};
|
|
187
|
-
var GridElement = class extends HTMLElement {
|
|
188
|
-
static observedAttributes = ObservedGridAttributes;
|
|
189
|
-
attr = {};
|
|
190
|
-
mainSlot = () => this.shadowRoot?.querySelector("slot") || null;
|
|
191
|
-
container = () => this.shadowRoot?.firstElementChild || null;
|
|
192
|
-
constructor() {
|
|
193
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [grid_style_default];
|
|
194
|
-
}
|
|
195
|
-
detectRowChange() {
|
|
196
|
-
let t = this.mainSlot(), b = this.container();
|
|
197
|
-
if (!t || !b) return;
|
|
198
|
-
let x = t.assignedElements().some((t) => t.matches("r-grid")), S = this.attr.row !== "row" && x, C = this.attr.row === "row" && !x;
|
|
199
|
-
return S && (this.attr.row = "row"), C && delete this.attr.row, S || C;
|
|
200
|
-
}
|
|
201
|
-
detectCellChange() {
|
|
202
|
-
let t = this.parentElement?.matches("r-grid"), b = this.attr.cell !== "cell" && t, x = this.attr.cell === "cell" && !t;
|
|
203
|
-
return b && (this.attr.cell = "cell"), x && delete this.attr.cell, b || x;
|
|
204
|
-
}
|
|
205
|
-
attributeChangedCallback(t, b, x) {
|
|
206
|
-
isGridAttribute(t) && (this.attr[t] = x, this.render());
|
|
207
|
-
}
|
|
208
|
-
connectedMoveCallback() {
|
|
209
|
-
this.detectCellChange();
|
|
210
|
-
}
|
|
211
|
-
connectedCallback() {
|
|
212
|
-
this.mainSlot()?.addEventListener("slotchange", () => {
|
|
213
|
-
this.detectRowChange() && this.render();
|
|
214
|
-
}), this.render();
|
|
215
|
-
let t = this.detectRowChange(), b = this.detectCellChange();
|
|
216
|
-
(t || b) && this.render();
|
|
217
|
-
}
|
|
218
|
-
render() {
|
|
219
|
-
let t = getClasses(["row", "gap"], this.attr, getGridAttributeValue), b = getHostAttributes(ObservedGridAttributes, this.attr, getGridAttributeValue, gridAttrShort), x = getHostCSS(["display", "text-align"], this.attr, getGridAttributeValue);
|
|
220
|
-
"skip-before" in this.attr && console.log({
|
|
221
|
-
hostAttributes: b,
|
|
222
|
-
attr: this.attr
|
|
223
|
-
}), x.forEach(([t, b]) => {
|
|
224
|
-
b && this.style.setProperty(t, b), b === void 0 && this.style.removeProperty(t);
|
|
225
|
-
}), b.forEach(([t, b]) => {
|
|
226
|
-
b && this.setAttribute(t, b), b === void 0 && this.removeAttribute(t);
|
|
227
|
-
}), this.shadowRoot.innerHTML = `
|
|
228
|
-
<div class="${t.join(" ")}"><slot></slot></div>
|
|
229
|
-
`;
|
|
230
|
-
}
|
|
231
|
-
};
|
|
232
|
-
customElements.define("r-grid", GridElement);
|
|
233
|
-
var ResponsiveElement = class extends HTMLElement {
|
|
234
|
-
static observedAttributes = ObservedElemAttributes;
|
|
235
|
-
attr = {};
|
|
236
|
-
constructor() {
|
|
237
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [grid_style_default];
|
|
238
|
-
}
|
|
239
|
-
attributeChangedCallback(t, b, x) {
|
|
240
|
-
isElemAttribute(t) && (this.attr[t] = x, this.render());
|
|
241
|
-
}
|
|
242
|
-
connectedCallback() {
|
|
243
|
-
this.render();
|
|
244
|
-
}
|
|
245
|
-
render() {
|
|
246
|
-
let t = getHostAttributes(ObservedElemAttributes, this.attr, getElemAttributeValue, elmAttrShort);
|
|
247
|
-
getHostCSS(["display", "text-align"], this.attr, getElemAttributeValue).forEach(([t, b]) => {
|
|
248
|
-
b && this.style.setProperty(t, b), b === void 0 && this.style.removeProperty(t);
|
|
249
|
-
}), t.forEach(([t, b]) => {
|
|
250
|
-
b && this.setAttribute(t, b), b === void 0 && this.removeAttribute(t);
|
|
251
|
-
}), this.shadowRoot.innerHTML = "<slot></slot>";
|
|
252
|
-
}
|
|
253
|
-
};
|
|
254
|
-
customElements.define("r-elm", ResponsiveElement);
|
|
255
|
-
export { GridElement, ResponsiveElement };
|
|
256
|
-
|
|
257
|
-
//# sourceMappingURL=r-grid.es.js.map
|
package/dist/r-grid.es.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"r-grid.es.js","names":["getGridAttributeValue: AttrValidations<ObservedGridAttribute>","getElemAttributeValue: AttrValidations<ObservedElemAttribute>","gridAttrShort: Record<ObservedGridAttribute, string>","elmAttrShort: Record<ObservedElemAttribute, string>","classes: string[]","hostAttributes: Record<string, string | undefined>","hostCSS: Record<string, string | undefined>"],"sources":["../src/grid.scss?inline","../src/grid-style.ts","../src/util.ts","../src/components/grid-element.ts","../src/components/resonsive-element.ts"],"sourcesContent":["@use 'sass:map';\r\n@use 'sass:math';\r\n@use 'sass:list';\r\n\r\n$mediaSizes: (\r\n small: 0px,\r\n medium: 768px,\r\n large: 1024px,\r\n xlarge: 1280px,\r\n);\r\n$dimensions: 'none', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n$fonts: 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n\r\n:host {\r\n --d0: var(--grid-dim-none, 0px);\r\n --d1: var(--grid-dim-small, 4px);\r\n --d2: var(--grid-dim-medium, 8px);\r\n --d3: var(--grid-dim-large, 16px);\r\n --d4: var(--grid-dim-xlarge, 32px);\r\n --d5: var(--grid-dim-xxlarge, 64px);\r\n --f0: var(--grid-font-xsmall, 12px);\r\n --f1: var(--grid-font-small, 14px);\r\n --f2: var(--grid-font-medium, 16px);\r\n --f3: var(--grid-font-large, 24px);\r\n --f4: var(--grid-font-xlarge, 32px);\r\n --f5: var(--grid-font-xxlarge, 40px);\r\n display: block;\r\n box-sizing: border-box !important;\r\n}\r\n\r\nslot {\r\n display: contents !important;\r\n}\r\n\r\n.row {\r\n box-sizing: border-box;\r\n justify-content: flex-start;\r\n gap: var(--gap);\r\n --gap: 0px;\r\n flex-flow: wrap;\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n}\r\n\r\n.cell {\r\n box-sizing: border-box;\r\n}\r\n\r\n:host([r-cell]) {\r\n flex: auto;\r\n}\r\n\r\n:host([r-c1]),\r\n:host([r-c2]),\r\n:host([r-c3]),\r\n:host([r-c4]) {\r\n flex: 100%;\r\n max-width: calc(((var(--rc) / 12) * 100%) - var(--gap) * (calc((12 - var(--rc)) / 12)));\r\n}\r\n\r\n:host([r-sb1]),\r\n:host([r-sb2]),\r\n:host([r-sb3]),\r\n:host([r-sb4]) {\r\n margin-left: calc(((var(--rsb) / 12) * 100%) + var(--gap) * (calc(var(--rsb) / 12)));\r\n}\r\n\r\n:host([r-sa1]),\r\n:host([r-sa2]),\r\n:host([r-sa3]),\r\n:host([r-sa4]) {\r\n margin-right: calc(((var(--rsa) / 12) * 100%) + var(--gap) * (calc(var(--rsa) / 12)));\r\n}\r\n\r\n@each $mediaName, $mediaSize in $mediaSizes {\r\n $mIndex: list.index(map.keys($mediaSizes), $mediaName);\r\n\r\n @media (min-width: #{$mediaSize}) {\r\n :host([r-ta#{$mIndex}]) {\r\n text-align: var(--text-align-#{$mediaName});\r\n }\r\n :host([r-d#{$mIndex}]) {\r\n display: var(--display-#{$mediaName});\r\n }\r\n\r\n @each $font in $fonts {\r\n $fIndex: list.index($fonts, $font);\r\n\r\n :host([r-f#{$mIndex}='#{$fIndex}']) {\r\n font-size: var(--f#{$fIndex});\r\n }\r\n }\r\n @each $dimension in $dimensions {\r\n $dIndex: list.index($dimensions, $dimension);\r\n\r\n .row.gap-#{$mediaName}-#{$dIndex} {\r\n --gap: var(--d#{$dIndex});\r\n }\r\n :host([r-p#{$mIndex}='#{$dIndex}']) {\r\n padding: var(--d#{$dIndex});\r\n }\r\n :host([r-pt#{$mIndex}='#{$dIndex}']) {\r\n padding-top: var(--d#{$dIndex});\r\n }\r\n :host([r-pl#{$mIndex}='#{$dIndex}']) {\r\n padding-left: var(--d#{$dIndex});\r\n }\r\n :host([r-pb#{$mIndex}='#{$dIndex}']) {\r\n padding-bottom: var(--d#{$dIndex});\r\n }\r\n :host([r-pr#{$mIndex}='#{$dIndex}']) {\r\n padding-right: var(--d#{$dIndex});\r\n }\r\n :host([r-m#{$mIndex}='#{$dIndex}']) {\r\n margin: var(--d#{$dIndex});\r\n }\r\n :host([r-mt#{$mIndex}='#{$dIndex}']) {\r\n margin-top: var(--d#{$dIndex});\r\n }\r\n :host([r-ml#{$mIndex}='#{$dIndex}']) {\r\n margin-left: var(--d#{$dIndex});\r\n }\r\n :host([r-mb#{$mIndex}='#{$dIndex}']) {\r\n margin-bottom: var(--d#{$dIndex});\r\n }\r\n :host([r-mr#{$mIndex}='#{$dIndex}']) {\r\n margin-right: var(--d#{$dIndex});\r\n }\r\n }\r\n\r\n @for $i from 12 through 1 {\r\n :host([r-or#{$mIndex}='#{$i}']) {\r\n order: #{$i};\r\n }\r\n :host([r-c#{$mIndex}='#{$i}']) {\r\n --rc: #{$i};\r\n }\r\n }\r\n @for $i from 11 through 0 {\r\n :host([r-sb#{$mIndex}='#{$i}']) {\r\n --rsb: #{$i};\r\n }\r\n :host([r-sa#{$mIndex}='#{$i}']) {\r\n --rsa: #{$i};\r\n }\r\n }\r\n }\r\n}\r\n","import gridStyles from \"./grid.scss?inline\";\r\n\r\nconst sheet = new CSSStyleSheet();\r\nsheet.replaceSync(gridStyles);\r\n\r\nexport default sheet;\r\n","type AttrValues<K extends string> = Partial<Record<K, string | undefined>>;\r\ntype AttrValidations<K extends string> = Record<K, 'boolean' | ((val: string) => string | null)>;\r\n\r\nexport const GlobalValues = ['inherit', 'initial', 'revert', 'revert-layer', 'unset'] as const;\r\n\r\nexport const ObservedElemAttributes = [\r\n 'display',\r\n 'font',\r\n 'text-align',\r\n 'padding',\r\n 'padding-top',\r\n 'padding-right',\r\n 'padding-bottom',\r\n 'padding-left',\r\n 'margin',\r\n 'margin-top',\r\n 'margin-right',\r\n 'margin-bottom',\r\n 'margin-left',\r\n] as const;\r\nexport const ObservedGridAttributes = [\r\n 'row',\r\n 'cell',\r\n 'col',\r\n 'display',\r\n 'text-align',\r\n 'order',\r\n 'skip-before',\r\n 'skip-after',\r\n 'gap',\r\n 'padding',\r\n 'font',\r\n] as const;\r\nexport const MediaSizes = ['small', 'medium', 'large', 'xlarge'] as const;\r\nexport const DimensionSizes = [\r\n 'none',\r\n 'small',\r\n 'medium',\r\n 'large',\r\n 'xlarge',\r\n 'xxlarge',\r\n 'small-',\r\n 'medium-',\r\n 'large-',\r\n 'xlarge-',\r\n 'xxlarge-',\r\n] as const;\r\nexport const DisplayValues = [\r\n 'block',\r\n 'inline',\r\n 'inline-block',\r\n 'flex',\r\n 'inline-flex',\r\n 'grid',\r\n 'inline-grid',\r\n 'flow-root',\r\n 'none',\r\n 'contents',\r\n 'table',\r\n 'table-row',\r\n 'list-item',\r\n ...GlobalValues,\r\n] as const;\r\nexport const TextAlignValues = [\r\n 'start',\r\n 'end',\r\n 'left',\r\n 'right',\r\n 'center',\r\n 'justify',\r\n 'match-parent',\r\n] as const;\r\nexport const FontSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;\r\n\r\nexport type ObservedGridAttribute = (typeof ObservedGridAttributes)[number];\r\nexport type ObservedElemAttribute = (typeof ObservedElemAttributes)[number];\r\n\r\nexport type DimensionSize = (typeof DimensionSizes)[number];\r\nexport type DisplayValue = (typeof DisplayValues)[number];\r\nexport type TextAlignValue = (typeof TextAlignValues)[number];\r\nexport type FontSize = (typeof FontSizes)[number];\r\n\r\nexport const isElemAttribute = (name: string): name is ObservedElemAttribute =>\r\n ObservedElemAttributes.includes(name as ObservedElemAttribute);\r\n\r\nexport const isGridAttribute = (name: string): name is ObservedGridAttribute =>\r\n ObservedGridAttributes.includes(name as ObservedGridAttribute);\r\n\r\nconst getValidNumber = (val: string): string | null => {\r\n const value = parseInt(val.trim());\r\n return value !== undefined ? String(value) : null;\r\n};\r\n\r\nconst getValidDisplay = (val: string): string | null => {\r\n const value = val.trim().toLowerCase();\r\n return DisplayValues.includes(value as DisplayValue) ? (value as DisplayValue) : null;\r\n};\r\n\r\nconst getValidDimension = (val: string): string | null => {\r\n const value = val.trim().toLowerCase();\r\n return DimensionSizes.includes(value as DimensionSize)\r\n ? String(DimensionSizes.indexOf(value as DimensionSize))\r\n : null;\r\n};\r\n\r\nconst getValidTextAlign = (val: string): TextAlignValue | null => {\r\n const value = val.trim().toLowerCase();\r\n return TextAlignValues.includes(value as TextAlignValue) ? (value as TextAlignValue) : null;\r\n};\r\n\r\nconst getValidFont = (val: string): string | null => {\r\n const value = val.trim().toLowerCase();\r\n return FontSizes.includes(value as FontSize)\r\n ? String(FontSizes.indexOf(value as FontSize))\r\n : null;\r\n};\r\n\r\nexport type GridAttributeValues = AttrValues<ObservedGridAttribute>;\r\nexport type ElemAttributeValues = AttrValues<ObservedElemAttribute>;\r\n\r\nexport const getGridAttributeValue: AttrValidations<ObservedGridAttribute> = {\r\n row: 'boolean',\r\n cell: 'boolean',\r\n 'text-align': getValidTextAlign,\r\n 'skip-before': getValidNumber,\r\n 'skip-after': getValidNumber,\r\n col: getValidNumber,\r\n gap: getValidDimension,\r\n font: getValidFont,\r\n order: getValidNumber,\r\n display: getValidDisplay,\r\n padding: getValidDimension,\r\n};\r\n\r\nexport const getElemAttributeValue: AttrValidations<ObservedElemAttribute> = {\r\n font: getValidFont,\r\n margin: getValidDimension,\r\n padding: getValidDimension,\r\n display: getValidDisplay,\r\n 'text-align': getValidTextAlign,\r\n 'margin-top': getValidDimension,\r\n 'margin-right': getValidDimension,\r\n 'margin-bottom': getValidDimension,\r\n 'margin-left': getValidDimension,\r\n 'padding-top': getValidDimension,\r\n 'padding-right': getValidDimension,\r\n 'padding-bottom': getValidDimension,\r\n 'padding-left': getValidDimension,\r\n};\r\n\r\nexport const gridAttrShort: Record<ObservedGridAttribute, string> = {\r\n font: 'f',\r\n padding: 'p',\r\n display: 'd',\r\n row: 'row',\r\n cell: 'cell',\r\n col: 'c',\r\n gap: 'g',\r\n order: 'or',\r\n 'skip-before': 'sb',\r\n 'skip-after': 'sa',\r\n 'text-align': 'ta',\r\n};\r\n\r\nexport const elmAttrShort: Record<ObservedElemAttribute, string> = {\r\n font: 'f',\r\n margin: 'm',\r\n padding: 'p',\r\n display: 'd',\r\n 'text-align': 'ta',\r\n 'margin-top': 'mt',\r\n 'margin-right': 'mr',\r\n 'margin-bottom': 'mb',\r\n 'margin-left': 'ml',\r\n 'padding-top': 'pt',\r\n 'padding-right': 'pr',\r\n 'padding-bottom': 'pb',\r\n 'padding-left': 'pl',\r\n};\r\n\r\nexport const getClasses = <K extends string>(\r\n attrNames: readonly K[],\r\n attrs: AttrValues<K>,\r\n validations: AttrValidations<K>,\r\n) => {\r\n const classes: string[] = [];\r\n for (const attr of attrNames) {\r\n if (attrs[attr] !== undefined) {\r\n const validation = validations[attr];\r\n if (validation === 'boolean') {\r\n classes.push(`${attr}`);\r\n } else {\r\n const values = attrs[attr].split(' ').filter(Boolean);\r\n values.forEach((val, i) => {\r\n const mediaSize = MediaSizes[i];\r\n const value = validation(val);\r\n if (mediaSize && value) {\r\n classes.push(`${attr}-${mediaSize}-${value}`);\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n return classes;\r\n};\r\n\r\nexport const getHostAttributes = <K extends string>(\r\n attrNames: readonly K[],\r\n attrs: AttrValues<K>,\r\n validations: AttrValidations<K>,\r\n short: Record<K, string>,\r\n) => {\r\n const hostAttributes: Record<string, string | undefined> = {};\r\n\r\n for (const attr of attrNames) {\r\n MediaSizes.forEach((_mediaSize, i) => {\r\n hostAttributes[`r-${short[attr]}${i + 1}`] = undefined;\r\n });\r\n\r\n if (attrs[attr] !== undefined) {\r\n const validation = validations[attr];\r\n if (validation === 'boolean') {\r\n hostAttributes[`r-${attr}`] = attr;\r\n } else {\r\n const values = attrs[attr].split(' ').filter(Boolean);\r\n values.forEach((val, i) => {\r\n const mediaSize = MediaSizes[i];\r\n const value = validation(val);\r\n if (mediaSize && value) {\r\n hostAttributes[`r-${short[attr]}${i + 1}`] = value;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n return Object.entries(hostAttributes);\r\n};\r\n\r\nexport const getHostCSS = <K extends string>(\r\n attrNames: readonly K[],\r\n attrs: AttrValues<K>,\r\n validations: AttrValidations<K>,\r\n) => {\r\n const hostCSS: Record<string, string | undefined> = {};\r\n\r\n for (const attr of attrNames) {\r\n MediaSizes.forEach((mediaSize) => {\r\n hostCSS[`--${attr}-${mediaSize}`] = undefined;\r\n });\r\n\r\n if (attrs[attr] !== undefined) {\r\n const validation = validations[attr];\r\n if (validation !== 'boolean') {\r\n const values = attrs[attr].split(' ').filter(Boolean);\r\n values.forEach((val, i) => {\r\n const mediaSize = MediaSizes[i];\r\n const value = validation(val);\r\n if (mediaSize && value) {\r\n hostCSS[`--${attr}-${mediaSize}`] = value;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n return Object.entries(hostCSS);\r\n};\r\n","import sheet from '../grid-style';\r\nimport {\r\n getClasses,\r\n getGridAttributeValue as getValues,\r\n getHostAttributes,\r\n isGridAttribute,\r\n ObservedGridAttributes as Attributes,\r\n getHostCSS,\r\n gridAttrShort,\r\n} from '../util';\r\nimport type { GridAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} skip-before - skip the given columns before the element for each breakpoint (Integers)\r\n * @attr {string} skip-after - skip the given columns after the element for each breakpoint (Integers)\r\n * @attr {string} display - set element's display value for each breakpoint\r\n * @attr {string} padding - set element's padding for each breakpoint (Dimension values)\r\n * @attr {string} order - set element's flex order for each breakpoint (Integers)\r\n * @attr {string} font - set element's font-size for each breakpoint (Font values)\r\n * @attr {string} col - set element's column spans for each breakpoint (Integers)\r\n * @attr {string} gap - set element's flex gap for each breakpoint (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-grid\r\n */\r\nexport class GridElement extends HTMLElement {\r\n static observedAttributes = Attributes;\r\n\r\n /**\r\n * @internal\r\n */\r\n private attr: Partial<GridAttributeValues> = {};\r\n\r\n /**\r\n * @internal\r\n */\r\n private readonly mainSlot = (): HTMLSlotElement | null =>\r\n this.shadowRoot?.querySelector('slot') || null;\r\n /**\r\n * @internal\r\n */\r\n private readonly container = (): Element | null => this.shadowRoot?.firstElementChild || null;\r\n\r\n constructor() {\r\n super();\r\n this.attachShadow({ mode: 'open' });\r\n this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n private detectRowChange() {\r\n const slot = this.mainSlot();\r\n const container = this.container();\r\n\r\n if (!slot || !container) return;\r\n\r\n const tenants = slot.assignedElements();\r\n const isRow = tenants.some((el) => el.matches('r-grid'));\r\n const isNowRow = this.attr.row !== 'row' && isRow;\r\n const noLongerRow = this.attr.row === 'row' && !isRow;\r\n\r\n if (isNowRow) this.attr.row = 'row';\r\n if (noLongerRow) delete this.attr.row;\r\n return isNowRow || noLongerRow;\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n private detectCellChange() {\r\n const isCell = this.parentElement?.matches('r-grid');\r\n const isNowCell = this.attr.cell !== 'cell' && isCell;\r\n const noLongerCell = this.attr.cell === 'cell' && !isCell;\r\n\r\n if (isNowCell) this.attr.cell = 'cell';\r\n if (noLongerCell) delete this.attr.cell;\r\n return isNowCell || noLongerCell;\r\n }\r\n\r\n attributeChangedCallback(name: string, _old: string, value: string) {\r\n if (isGridAttribute(name)) {\r\n this.attr[name] = value;\r\n this.render();\r\n }\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n connectedMoveCallback() {\r\n this.detectCellChange();\r\n }\r\n\r\n connectedCallback() {\r\n this.mainSlot()?.addEventListener('slotchange', () => {\r\n if (this.detectRowChange()) this.render();\r\n });\r\n\r\n this.render();\r\n const hasRowChange = this.detectRowChange();\r\n const hasCellChange = this.detectCellChange();\r\n if (hasRowChange || hasCellChange) this.render();\r\n }\r\n\r\n render() {\r\n const classes = getClasses(['row', 'gap'], this.attr, getValues);\r\n const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, gridAttrShort);\r\n const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n if ('skip-before' in this.attr) {\r\n console.log({ hostAttributes, attr: this.attr });\r\n }\r\n hostCSS.forEach(([attr, value]) => {\r\n if (value) this.style.setProperty(attr, value);\r\n if (value === undefined) this.style.removeProperty(attr);\r\n });\r\n\r\n hostAttributes.forEach(([attr, value]) => {\r\n if (value) this.setAttribute(attr, value);\r\n if (value === undefined) this.removeAttribute(attr);\r\n });\r\n\r\n this.shadowRoot!.innerHTML = `\r\n <div class=\"${classes.join(' ')}\"><slot></slot></div>\r\n `;\r\n }\r\n}\r\n\r\ncustomElements.define('r-grid', GridElement);\r\n","import sheet from '../grid-style';\r\nimport {\r\n getElemAttributeValue as getValues,\r\n getHostAttributes,\r\n isElemAttribute,\r\n ObservedElemAttributes as Attributes,\r\n getHostCSS,\r\n elmAttrShort,\r\n} from '../util';\r\nimport type { ElemAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} display - set element's display value for each breakpoint, space-separated\r\n * @attr {string} font - set element's font-size for each breakpoint, space-separated (Font values)\r\n * @attr {string} padding - set element's padding for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin - set element's margin for each breakpoint, space-separated (Integers)\r\n * @attr {string} margin-top - set element's margin-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-right - set element's margin-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-bottom - set element's margin-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-left - set element's margin-left for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-top - set element's padding-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-right - set element's padding-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-bottom - set element's padding-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-left - set element's padding-left for each breakpoint, space-separated (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-elm\r\n */\r\nexport class ResponsiveElement extends HTMLElement {\r\n static observedAttributes = Attributes;\r\n private attr: Partial<ElemAttributeValues> = {};\r\n\r\n constructor() {\r\n super();\r\n this.attachShadow({ mode: 'open' });\r\n this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n }\r\n\r\n attributeChangedCallback(name: string, _old: string, value: string) {\r\n if (isElemAttribute(name)) {\r\n this.attr[name] = value;\r\n this.render();\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.render();\r\n }\r\n\r\n render() {\r\n const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, elmAttrShort);\r\n const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n hostCSS.forEach(([attr, value]) => {\r\n if (value) this.style.setProperty(attr, value);\r\n if (value === undefined) this.style.removeProperty(attr);\r\n });\r\n\r\n hostAttributes.forEach(([attr, value]) => {\r\n if (value) this.setAttribute(attr, value);\r\n if (value === undefined) this.removeAttribute(attr);\r\n });\r\n\r\n this.shadowRoot!.innerHTML = `<slot></slot>`;\r\n }\r\n}\r\n\r\ncustomElements.define('r-elm', ResponsiveElement);\r\n"],"mappings":"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"}
|