rezel 1.0.2 → 1.0.3

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.
Files changed (5) hide show
  1. package/dist/r-grid.cjs.js +2 -2
  2. package/dist/r-grid.cjs.js.map +1 -1
  3. package/dist/r-grid.es.js +69 -69
  4. package/dist/r-grid.es.js.map +1 -1
  5. package/package.json +1 -1
package/dist/r-grid.cjs.js CHANGED
@@ -1,4 +1,4 @@
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),p=e=>l.includes(e),m=e=>c.includes(e);var h=e=>{let t=parseInt(e.trim());return t===void 0?null:String(t)},g=e=>{let t=e.trim().toLowerCase();return m(t)?t:null},_=e=>{let t=e.trim().toLowerCase();return s.includes(t)?String(s.indexOf(t)):null},v=e=>{let t=e.trim().toLowerCase();return p(t)?t:null},y=e=>{let t=e.trim().toLowerCase();return u.includes(t)?String(u.indexOf(t)):null};const b={row:`boolean`,cell:`boolean`,"text-align":v,"skip-before":h,"skip-after":h,col:h,gap:_,font:y,order:h,display:g,padding:_},x={font:y,margin:_,padding:_,display:g,"text-align":v,"margin-top":_,"margin-right":_,"margin-bottom":_,"margin-left":_,"padding-top":_,"padding-right":_,"padding-bottom":_,"padding-left":_},S={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`},C={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`},w=(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},T=(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)},E=(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 D=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=w([`row`,`gap`],this.attr,b),t=T(a,this.attr,b,S),n=E([`display`,`text-align`],this.attr,b);`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=`
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
2
  <div class="${e.join(` `)}"><slot></slot></div>
3
- `}};customElements.define(`r-grid`,D);var O=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=T(i,this.attr,x,C);E([`display`,`text-align`],this.attr,x).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-element`,O),exports.GridElement=D,exports.ResponsiveElement=O;
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
4
  //# sourceMappingURL=r-grid.cjs.js.map
package/dist/r-grid.cjs.js.map CHANGED
@@ -1 +1 @@
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\nexport const isTextAlignValue = (value: string): value is TextAlignValue =>\r\n TextAlignValues.includes(value as TextAlignValue);\r\n\r\nexport const isDisplayValue = (value: string): value is DisplayValue =>\r\n DisplayValues.includes(value as DisplayValue);\r\n\r\nexport const isFontSize = (size: string): size is FontSize => FontSizes.includes(size as FontSize);\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 isDisplayValue(value) ? value : 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 isTextAlignValue(value) ? value : 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 - move element left by the given columns for each breakpoint (Integers)\r\n * @attr {string} skip-after - clear 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-element\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-element', ResponsiveElement);\r\n"],"mappings":"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"}
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 CHANGED
@@ -80,22 +80,22 @@ const GlobalValues = [
80
80
  "large",
81
81
  "xlarge",
82
82
  "xxlarge"
83
- ], isElemAttribute = (e) => ObservedElemAttributes.includes(e), isGridAttribute = (e) => ObservedGridAttributes.includes(e), isTextAlignValue = (e) => TextAlignValues.includes(e), isDisplayValue = (e) => DisplayValues.includes(e);
84
- var getValidNumber = (e) => {
85
- let S = parseInt(e.trim());
86
- return S === void 0 ? null : String(S);
87
- }, getValidDisplay = (e) => {
88
- let S = e.trim().toLowerCase();
89
- return isDisplayValue(S) ? S : null;
90
- }, getValidDimension = (e) => {
91
- let S = e.trim().toLowerCase();
92
- return DimensionSizes.includes(S) ? String(DimensionSizes.indexOf(S)) : null;
93
- }, getValidTextAlign = (e) => {
94
- let S = e.trim().toLowerCase();
95
- return isTextAlignValue(S) ? S : null;
96
- }, getValidFont = (e) => {
97
- let S = e.trim().toLowerCase();
98
- return FontSizes.includes(S) ? String(FontSizes.indexOf(S)) : null;
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
99
  };
100
100
  const getGridAttributeValue = {
101
101
  row: "boolean",
@@ -149,40 +149,40 @@ const getGridAttributeValue = {
149
149
  "padding-right": "pr",
150
150
  "padding-bottom": "pb",
151
151
  "padding-left": "pl"
152
- }, getClasses = (e, S, C) => {
153
- let w = [];
154
- for (let T of e) if (S[T] !== void 0) {
155
- let e = C[T];
156
- e === "boolean" ? w.push(`${T}`) : S[T].split(" ").filter(Boolean).forEach((S, C) => {
157
- let E = MediaSizes[C], D = e(S);
158
- E && D && w.push(`${T}-${E}-${D}`);
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
159
  });
160
160
  }
161
- return w;
162
- }, getHostAttributes = (e, S, C, w) => {
163
- let T = {};
164
- for (let E of e) if (MediaSizes.forEach((e, S) => {
165
- T[`r-${w[E]}${S + 1}`] = void 0;
166
- }), S[E] !== void 0) {
167
- let e = C[E];
168
- e === "boolean" ? T[`r-${E}`] = E : S[E].split(" ").filter(Boolean).forEach((S, C) => {
169
- let D = MediaSizes[C], O = e(S);
170
- D && O && (T[`r-${w[E]}${C + 1}`] = O);
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
171
  });
172
172
  }
173
- return Object.entries(T);
174
- }, getHostCSS = (e, S, C) => {
175
- let w = {};
176
- for (let T of e) if (MediaSizes.forEach((e) => {
177
- w[`--${T}-${e}`] = void 0;
178
- }), S[T] !== void 0) {
179
- let e = C[T];
180
- e !== "boolean" && S[T].split(" ").filter(Boolean).forEach((S, C) => {
181
- let E = MediaSizes[C], D = e(S);
182
- E && D && (w[`--${T}-${E}`] = D);
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
183
  });
184
184
  }
185
- return Object.entries(w);
185
+ return Object.entries(S);
186
186
  };
187
187
  var GridElement = class extends HTMLElement {
188
188
  static observedAttributes = ObservedGridAttributes;
@@ -193,17 +193,17 @@ var GridElement = class extends HTMLElement {
193
193
  super(), this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [grid_style_default];
194
194
  }
195
195
  detectRowChange() {
196
- let e = this.mainSlot(), S = this.container();
197
- if (!e || !S) return;
198
- let C = e.assignedElements().some((e) => e.matches("r-grid")), w = this.attr.row !== "row" && C, T = this.attr.row === "row" && !C;
199
- return w && (this.attr.row = "row"), T && delete this.attr.row, w || T;
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
200
  }
201
201
  detectCellChange() {
202
- let e = this.parentElement?.matches("r-grid"), S = this.attr.cell !== "cell" && e, C = this.attr.cell === "cell" && !e;
203
- return S && (this.attr.cell = "cell"), C && delete this.attr.cell, S || C;
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
204
  }
205
- attributeChangedCallback(e, S, C) {
206
- isGridAttribute(e) && (this.attr[e] = C, this.render());
205
+ attributeChangedCallback(t, b, x) {
206
+ isGridAttribute(t) && (this.attr[t] = x, this.render());
207
207
  }
208
208
  connectedMoveCallback() {
209
209
  this.detectCellChange();
@@ -212,20 +212,20 @@ var GridElement = class extends HTMLElement {
212
212
  this.mainSlot()?.addEventListener("slotchange", () => {
213
213
  this.detectRowChange() && this.render();
214
214
  }), this.render();
215
- let e = this.detectRowChange(), S = this.detectCellChange();
216
- (e || S) && this.render();
215
+ let t = this.detectRowChange(), b = this.detectCellChange();
216
+ (t || b) && this.render();
217
217
  }
218
218
  render() {
219
- let e = getClasses(["row", "gap"], this.attr, getGridAttributeValue), S = getHostAttributes(ObservedGridAttributes, this.attr, getGridAttributeValue, gridAttrShort), C = getHostCSS(["display", "text-align"], this.attr, getGridAttributeValue);
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
220
  "skip-before" in this.attr && console.log({
221
- hostAttributes: S,
221
+ hostAttributes: b,
222
222
  attr: this.attr
223
- }), C.forEach(([e, S]) => {
224
- S && this.style.setProperty(e, S), S === void 0 && this.style.removeProperty(e);
225
- }), S.forEach(([e, S]) => {
226
- S && this.setAttribute(e, S), S === void 0 && this.removeAttribute(e);
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
227
  }), this.shadowRoot.innerHTML = `
228
- <div class="${e.join(" ")}"><slot></slot></div>
228
+ <div class="${t.join(" ")}"><slot></slot></div>
229
229
  `;
230
230
  }
231
231
  };
@@ -236,22 +236,22 @@ var ResponsiveElement = class extends HTMLElement {
236
236
  constructor() {
237
237
  super(), this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [grid_style_default];
238
238
  }
239
- attributeChangedCallback(e, S, C) {
240
- isElemAttribute(e) && (this.attr[e] = C, this.render());
239
+ attributeChangedCallback(t, b, x) {
240
+ isElemAttribute(t) && (this.attr[t] = x, this.render());
241
241
  }
242
242
  connectedCallback() {
243
243
  this.render();
244
244
  }
245
245
  render() {
246
- let e = getHostAttributes(ObservedElemAttributes, this.attr, getElemAttributeValue, elmAttrShort);
247
- getHostCSS(["display", "text-align"], this.attr, getElemAttributeValue).forEach(([e, S]) => {
248
- S && this.style.setProperty(e, S), S === void 0 && this.style.removeProperty(e);
249
- }), e.forEach(([e, S]) => {
250
- S && this.setAttribute(e, S), S === void 0 && this.removeAttribute(e);
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
251
  }), this.shadowRoot.innerHTML = "<slot></slot>";
252
252
  }
253
253
  };
254
- customElements.define("r-element", ResponsiveElement);
254
+ customElements.define("r-elm", ResponsiveElement);
255
255
  export { GridElement, ResponsiveElement };
256
256
 
257
257
  //# sourceMappingURL=r-grid.es.js.map
package/dist/r-grid.es.js.map CHANGED
@@ -1 +1 @@
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\nexport const isTextAlignValue = (value: string): value is TextAlignValue =>\r\n TextAlignValues.includes(value as TextAlignValue);\r\n\r\nexport const isDisplayValue = (value: string): value is DisplayValue =>\r\n DisplayValues.includes(value as DisplayValue);\r\n\r\nexport const isFontSize = (size: string): size is FontSize => FontSizes.includes(size as FontSize);\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 isDisplayValue(value) ? value : 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 isTextAlignValue(value) ? value : 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 - move element left by the given columns for each breakpoint (Integers)\r\n * @attr {string} skip-after - clear 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-element\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-element', ResponsiveElement);\r\n"],"mappings":"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"}
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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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "rezel",
3
3
  "description": "custom elements with responsive attributes",
4
- "version": "1.0.2",
4
+ "version": "1.0.3",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "dist"