rezel 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/r-grid.cjs.js +3 -3
- package/dist/r-grid.cjs.js.map +1 -1
- package/dist/r-grid.es.js +95 -64
- package/dist/r-grid.es.js.map +1 -1
- package/package.json +3 -2
package/dist/r-grid.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var e=`:host{--dim-none:var(--grid-dim-none,0px);--dim-small:var(--grid-dim-small,4px);--dim-medium:var(--grid-dim-medium,8px);--dim-large:var(--grid-dim-large,16px);--dim-xlarge:var(--grid-dim-xlarge,32px);--dim-xxlarge:var(--grid-dim-xxlarge,64px);--dim-small-:var(--grid-dim-small-,-4px);--dim-medium-:var(--grid-dim-medium-,-8px);--dim-large-:var(--grid-dim-large-,-16px);--dim-xlarge-:var(--grid-dim-xlarge-,-32px);--dim-xxlarge-:var(--grid-dim-xxlarge-,-64px);--font-xsmall:var(--grid-font-xsmall,12px);--font-small:var(--grid-font-small,14px);--font-medium:var(--grid-font-medium,16px);--font-large:var(--grid-font-large,24px);--font-xlarge:var(--grid-font-xlarge,32px);--font-xxlarge: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([data-cell]){flex:auto}:host([data-col-small]),:host([data-col-medium]),:host([data-col-large]),:host([data-col-xlarge]){max-width:calc(var(--columns)/12*100% - var(--gap)*(12 - var(--columns))/12);flex:100%}:host([data-offset-small]),:host([data-offset-medium]),:host([data-offset-large]),:host([data-offset-xlarge]){margin-left:calc(var(--offset)/12*100% + var(--gap)*var(--offset)/12)}@media (min-width:0){:host([data-text-align-small]){text-align:var(--text-align-small)}:host([data-display-small]){display:var(--display-small)}:host([data-font-small=xsmall]){font-size:var(--font-xsmall)}:host([data-font-small=small]){font-size:var(--font-small)}:host([data-font-small=medium]){font-size:var(--font-medium)}:host([data-font-small=large]){font-size:var(--font-large)}:host([data-font-small=xlarge]){font-size:var(--font-xlarge)}:host([data-font-small=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-small-none{--gap:var(--dim-none)}:host([data-padding-small=none]){padding:var(--dim-none)}:host([data-padding-top-small=none]){padding-top:var(--dim-none)}:host([data-padding-left-small=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-small=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-small=none]){padding-right:var(--dim-none)}:host([data-margin-small=none]){margin:var(--dim-none)}:host([data-margin-top-small=none]){margin-top:var(--dim-none)}:host([data-margin-left-small=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-small=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-small=none]){margin-right:var(--dim-none)}.row.gap-small-small{--gap:var(--dim-small)}:host([data-padding-small=small]){padding:var(--dim-small)}:host([data-padding-top-small=small]){padding-top:var(--dim-small)}:host([data-padding-left-small=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-small=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-small=small]){padding-right:var(--dim-small)}:host([data-margin-small=small]){margin:var(--dim-small)}:host([data-margin-top-small=small]){margin-top:var(--dim-small)}:host([data-margin-left-small=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-small=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-small=small]){margin-right:var(--dim-small)}.row.gap-small-medium{--gap:var(--dim-medium)}:host([data-padding-small=medium]){padding:var(--dim-medium)}:host([data-padding-top-small=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-small=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-small=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-small=medium]){padding-right:var(--dim-medium)}:host([data-margin-small=medium]){margin:var(--dim-medium)}:host([data-margin-top-small=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-small=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-small=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-small=medium]){margin-right:var(--dim-medium)}.row.gap-small-large{--gap:var(--dim-large)}:host([data-padding-small=large]){padding:var(--dim-large)}:host([data-padding-top-small=large]){padding-top:var(--dim-large)}:host([data-padding-left-small=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-small=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-small=large]){padding-right:var(--dim-large)}:host([data-margin-small=large]){margin:var(--dim-large)}:host([data-margin-top-small=large]){margin-top:var(--dim-large)}:host([data-margin-left-small=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-small=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-small=large]){margin-right:var(--dim-large)}.row.gap-small-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-small=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-small=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-small=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-small=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-small=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-small=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-small=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-small=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-small=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-small=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-small-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-small=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-small=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-small=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-small=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-small=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-small=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-small=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-small=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-small=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-small=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-small-small-{--gap:var(--dim-small-)}:host([data-padding-small=small-]){padding:var(--dim-small-)}:host([data-padding-top-small=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-small=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-small=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-small=small-]){padding-right:var(--dim-small-)}:host([data-margin-small=small-]){margin:var(--dim-small-)}:host([data-margin-top-small=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-small=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-small=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-small=small-]){margin-right:var(--dim-small-)}.row.gap-small-medium-{--gap:var(--dim-medium-)}:host([data-padding-small=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-small=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-small=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-small=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-small=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-small=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-small=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-small=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-small=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-small=medium-]){margin-right:var(--dim-medium-)}.row.gap-small-large-{--gap:var(--dim-large-)}:host([data-padding-small=large-]){padding:var(--dim-large-)}:host([data-padding-top-small=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-small=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-small=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-small=large-]){padding-right:var(--dim-large-)}:host([data-margin-small=large-]){margin:var(--dim-large-)}:host([data-margin-top-small=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-small=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-small=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-small=large-]){margin-right:var(--dim-large-)}.row.gap-small-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-small=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-small=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-small=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-small=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-small=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-small=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-small=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-small=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-small=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-small=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-small-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-small=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-small=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-small=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-small=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-small=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-small=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-small=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-small=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-small=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-small=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-small="12"]){order:12}:host([data-col-small="12"]){--columns:12}:host([data-offset-small="12"]){--offset:12}:host([data-order-small="11"]){order:11}:host([data-col-small="11"]){--columns:11}:host([data-offset-small="11"]){--offset:11}:host([data-order-small="10"]){order:10}:host([data-col-small="10"]){--columns:10}:host([data-offset-small="10"]){--offset:10}:host([data-order-small="9"]){order:9}:host([data-col-small="9"]){--columns:9}:host([data-offset-small="9"]){--offset:9}:host([data-order-small="8"]){order:8}:host([data-col-small="8"]){--columns:8}:host([data-offset-small="8"]){--offset:8}:host([data-order-small="7"]){order:7}:host([data-col-small="7"]){--columns:7}:host([data-offset-small="7"]){--offset:7}:host([data-order-small="6"]){order:6}:host([data-col-small="6"]){--columns:6}:host([data-offset-small="6"]){--offset:6}:host([data-order-small="5"]){order:5}:host([data-col-small="5"]){--columns:5}:host([data-offset-small="5"]){--offset:5}:host([data-order-small="4"]){order:4}:host([data-col-small="4"]){--columns:4}:host([data-offset-small="4"]){--offset:4}:host([data-order-small="3"]){order:3}:host([data-col-small="3"]){--columns:3}:host([data-offset-small="3"]){--offset:3}:host([data-order-small="2"]){order:2}:host([data-col-small="2"]){--columns:2}:host([data-offset-small="2"]){--offset:2}:host([data-order-small="1"]){order:1}:host([data-col-small="1"]){--columns:1}:host([data-offset-small="1"]){--offset:1}}@media (min-width:768px){:host([data-text-align-medium]){text-align:var(--text-align-medium)}:host([data-display-medium]){display:var(--display-medium)}:host([data-font-medium=xsmall]){font-size:var(--font-xsmall)}:host([data-font-medium=small]){font-size:var(--font-small)}:host([data-font-medium=medium]){font-size:var(--font-medium)}:host([data-font-medium=large]){font-size:var(--font-large)}:host([data-font-medium=xlarge]){font-size:var(--font-xlarge)}:host([data-font-medium=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-medium-none{--gap:var(--dim-none)}:host([data-padding-medium=none]){padding:var(--dim-none)}:host([data-padding-top-medium=none]){padding-top:var(--dim-none)}:host([data-padding-left-medium=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-medium=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-medium=none]){padding-right:var(--dim-none)}:host([data-margin-medium=none]){margin:var(--dim-none)}:host([data-margin-top-medium=none]){margin-top:var(--dim-none)}:host([data-margin-left-medium=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-medium=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-medium=none]){margin-right:var(--dim-none)}.row.gap-medium-small{--gap:var(--dim-small)}:host([data-padding-medium=small]){padding:var(--dim-small)}:host([data-padding-top-medium=small]){padding-top:var(--dim-small)}:host([data-padding-left-medium=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-medium=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-medium=small]){padding-right:var(--dim-small)}:host([data-margin-medium=small]){margin:var(--dim-small)}:host([data-margin-top-medium=small]){margin-top:var(--dim-small)}:host([data-margin-left-medium=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-medium=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-medium=small]){margin-right:var(--dim-small)}.row.gap-medium-medium{--gap:var(--dim-medium)}:host([data-padding-medium=medium]){padding:var(--dim-medium)}:host([data-padding-top-medium=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-medium=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-medium=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-medium=medium]){padding-right:var(--dim-medium)}:host([data-margin-medium=medium]){margin:var(--dim-medium)}:host([data-margin-top-medium=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-medium=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-medium=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-medium=medium]){margin-right:var(--dim-medium)}.row.gap-medium-large{--gap:var(--dim-large)}:host([data-padding-medium=large]){padding:var(--dim-large)}:host([data-padding-top-medium=large]){padding-top:var(--dim-large)}:host([data-padding-left-medium=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-medium=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-medium=large]){padding-right:var(--dim-large)}:host([data-margin-medium=large]){margin:var(--dim-large)}:host([data-margin-top-medium=large]){margin-top:var(--dim-large)}:host([data-margin-left-medium=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-medium=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-medium=large]){margin-right:var(--dim-large)}.row.gap-medium-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-medium=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-medium=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-medium=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-medium=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-medium=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-medium=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-medium=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-medium=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-medium=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-medium=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-medium-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-medium=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-medium=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-medium=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-medium=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-medium=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-medium=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-medium=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-medium=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-medium=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-medium=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-medium-small-{--gap:var(--dim-small-)}:host([data-padding-medium=small-]){padding:var(--dim-small-)}:host([data-padding-top-medium=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-medium=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-medium=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-medium=small-]){padding-right:var(--dim-small-)}:host([data-margin-medium=small-]){margin:var(--dim-small-)}:host([data-margin-top-medium=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-medium=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-medium=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-medium=small-]){margin-right:var(--dim-small-)}.row.gap-medium-medium-{--gap:var(--dim-medium-)}:host([data-padding-medium=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-medium=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-medium=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-medium=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-medium=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-medium=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-medium=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-medium=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-medium=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-medium=medium-]){margin-right:var(--dim-medium-)}.row.gap-medium-large-{--gap:var(--dim-large-)}:host([data-padding-medium=large-]){padding:var(--dim-large-)}:host([data-padding-top-medium=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-medium=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-medium=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-medium=large-]){padding-right:var(--dim-large-)}:host([data-margin-medium=large-]){margin:var(--dim-large-)}:host([data-margin-top-medium=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-medium=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-medium=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-medium=large-]){margin-right:var(--dim-large-)}.row.gap-medium-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-medium=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-medium=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-medium=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-medium=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-medium=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-medium=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-medium=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-medium=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-medium=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-medium=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-medium-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-medium=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-medium=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-medium=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-medium=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-medium=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-medium=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-medium=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-medium=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-medium=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-medium=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-medium="12"]){order:12}:host([data-col-medium="12"]){--columns:12}:host([data-offset-medium="12"]){--offset:12}:host([data-order-medium="11"]){order:11}:host([data-col-medium="11"]){--columns:11}:host([data-offset-medium="11"]){--offset:11}:host([data-order-medium="10"]){order:10}:host([data-col-medium="10"]){--columns:10}:host([data-offset-medium="10"]){--offset:10}:host([data-order-medium="9"]){order:9}:host([data-col-medium="9"]){--columns:9}:host([data-offset-medium="9"]){--offset:9}:host([data-order-medium="8"]){order:8}:host([data-col-medium="8"]){--columns:8}:host([data-offset-medium="8"]){--offset:8}:host([data-order-medium="7"]){order:7}:host([data-col-medium="7"]){--columns:7}:host([data-offset-medium="7"]){--offset:7}:host([data-order-medium="6"]){order:6}:host([data-col-medium="6"]){--columns:6}:host([data-offset-medium="6"]){--offset:6}:host([data-order-medium="5"]){order:5}:host([data-col-medium="5"]){--columns:5}:host([data-offset-medium="5"]){--offset:5}:host([data-order-medium="4"]){order:4}:host([data-col-medium="4"]){--columns:4}:host([data-offset-medium="4"]){--offset:4}:host([data-order-medium="3"]){order:3}:host([data-col-medium="3"]){--columns:3}:host([data-offset-medium="3"]){--offset:3}:host([data-order-medium="2"]){order:2}:host([data-col-medium="2"]){--columns:2}:host([data-offset-medium="2"]){--offset:2}:host([data-order-medium="1"]){order:1}:host([data-col-medium="1"]){--columns:1}:host([data-offset-medium="1"]){--offset:1}}@media (min-width:1024px){:host([data-text-align-large]){text-align:var(--text-align-large)}:host([data-display-large]){display:var(--display-large)}:host([data-font-large=xsmall]){font-size:var(--font-xsmall)}:host([data-font-large=small]){font-size:var(--font-small)}:host([data-font-large=medium]){font-size:var(--font-medium)}:host([data-font-large=large]){font-size:var(--font-large)}:host([data-font-large=xlarge]){font-size:var(--font-xlarge)}:host([data-font-large=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-large-none{--gap:var(--dim-none)}:host([data-padding-large=none]){padding:var(--dim-none)}:host([data-padding-top-large=none]){padding-top:var(--dim-none)}:host([data-padding-left-large=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-large=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-large=none]){padding-right:var(--dim-none)}:host([data-margin-large=none]){margin:var(--dim-none)}:host([data-margin-top-large=none]){margin-top:var(--dim-none)}:host([data-margin-left-large=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-large=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-large=none]){margin-right:var(--dim-none)}.row.gap-large-small{--gap:var(--dim-small)}:host([data-padding-large=small]){padding:var(--dim-small)}:host([data-padding-top-large=small]){padding-top:var(--dim-small)}:host([data-padding-left-large=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-large=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-large=small]){padding-right:var(--dim-small)}:host([data-margin-large=small]){margin:var(--dim-small)}:host([data-margin-top-large=small]){margin-top:var(--dim-small)}:host([data-margin-left-large=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-large=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-large=small]){margin-right:var(--dim-small)}.row.gap-large-medium{--gap:var(--dim-medium)}:host([data-padding-large=medium]){padding:var(--dim-medium)}:host([data-padding-top-large=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-large=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-large=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-large=medium]){padding-right:var(--dim-medium)}:host([data-margin-large=medium]){margin:var(--dim-medium)}:host([data-margin-top-large=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-large=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-large=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-large=medium]){margin-right:var(--dim-medium)}.row.gap-large-large{--gap:var(--dim-large)}:host([data-padding-large=large]){padding:var(--dim-large)}:host([data-padding-top-large=large]){padding-top:var(--dim-large)}:host([data-padding-left-large=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-large=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-large=large]){padding-right:var(--dim-large)}:host([data-margin-large=large]){margin:var(--dim-large)}:host([data-margin-top-large=large]){margin-top:var(--dim-large)}:host([data-margin-left-large=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-large=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-large=large]){margin-right:var(--dim-large)}.row.gap-large-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-large=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-large=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-large=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-large=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-large=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-large=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-large=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-large=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-large=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-large=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-large-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-large=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-large=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-large=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-large=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-large=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-large=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-large=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-large=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-large=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-large=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-large-small-{--gap:var(--dim-small-)}:host([data-padding-large=small-]){padding:var(--dim-small-)}:host([data-padding-top-large=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-large=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-large=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-large=small-]){padding-right:var(--dim-small-)}:host([data-margin-large=small-]){margin:var(--dim-small-)}:host([data-margin-top-large=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-large=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-large=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-large=small-]){margin-right:var(--dim-small-)}.row.gap-large-medium-{--gap:var(--dim-medium-)}:host([data-padding-large=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-large=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-large=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-large=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-large=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-large=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-large=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-large=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-large=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-large=medium-]){margin-right:var(--dim-medium-)}.row.gap-large-large-{--gap:var(--dim-large-)}:host([data-padding-large=large-]){padding:var(--dim-large-)}:host([data-padding-top-large=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-large=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-large=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-large=large-]){padding-right:var(--dim-large-)}:host([data-margin-large=large-]){margin:var(--dim-large-)}:host([data-margin-top-large=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-large=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-large=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-large=large-]){margin-right:var(--dim-large-)}.row.gap-large-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-large=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-large=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-large=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-large=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-large=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-large=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-large=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-large=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-large=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-large=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-large-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-large=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-large=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-large=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-large=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-large=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-large=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-large=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-large=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-large=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-large=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-large="12"]){order:12}:host([data-col-large="12"]){--columns:12}:host([data-offset-large="12"]){--offset:12}:host([data-order-large="11"]){order:11}:host([data-col-large="11"]){--columns:11}:host([data-offset-large="11"]){--offset:11}:host([data-order-large="10"]){order:10}:host([data-col-large="10"]){--columns:10}:host([data-offset-large="10"]){--offset:10}:host([data-order-large="9"]){order:9}:host([data-col-large="9"]){--columns:9}:host([data-offset-large="9"]){--offset:9}:host([data-order-large="8"]){order:8}:host([data-col-large="8"]){--columns:8}:host([data-offset-large="8"]){--offset:8}:host([data-order-large="7"]){order:7}:host([data-col-large="7"]){--columns:7}:host([data-offset-large="7"]){--offset:7}:host([data-order-large="6"]){order:6}:host([data-col-large="6"]){--columns:6}:host([data-offset-large="6"]){--offset:6}:host([data-order-large="5"]){order:5}:host([data-col-large="5"]){--columns:5}:host([data-offset-large="5"]){--offset:5}:host([data-order-large="4"]){order:4}:host([data-col-large="4"]){--columns:4}:host([data-offset-large="4"]){--offset:4}:host([data-order-large="3"]){order:3}:host([data-col-large="3"]){--columns:3}:host([data-offset-large="3"]){--offset:3}:host([data-order-large="2"]){order:2}:host([data-col-large="2"]){--columns:2}:host([data-offset-large="2"]){--offset:2}:host([data-order-large="1"]){order:1}:host([data-col-large="1"]){--columns:1}:host([data-offset-large="1"]){--offset:1}}@media (min-width:1280px){:host([data-text-align-xlarge]){text-align:var(--text-align-xlarge)}:host([data-display-xlarge]){display:var(--display-xlarge)}:host([data-font-xlarge=xsmall]){font-size:var(--font-xsmall)}:host([data-font-xlarge=small]){font-size:var(--font-small)}:host([data-font-xlarge=medium]){font-size:var(--font-medium)}:host([data-font-xlarge=large]){font-size:var(--font-large)}:host([data-font-xlarge=xlarge]){font-size:var(--font-xlarge)}:host([data-font-xlarge=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-xlarge-none{--gap:var(--dim-none)}:host([data-padding-xlarge=none]){padding:var(--dim-none)}:host([data-padding-top-xlarge=none]){padding-top:var(--dim-none)}:host([data-padding-left-xlarge=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-xlarge=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-xlarge=none]){padding-right:var(--dim-none)}:host([data-margin-xlarge=none]){margin:var(--dim-none)}:host([data-margin-top-xlarge=none]){margin-top:var(--dim-none)}:host([data-margin-left-xlarge=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-xlarge=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-xlarge=none]){margin-right:var(--dim-none)}.row.gap-xlarge-small{--gap:var(--dim-small)}:host([data-padding-xlarge=small]){padding:var(--dim-small)}:host([data-padding-top-xlarge=small]){padding-top:var(--dim-small)}:host([data-padding-left-xlarge=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-xlarge=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-xlarge=small]){padding-right:var(--dim-small)}:host([data-margin-xlarge=small]){margin:var(--dim-small)}:host([data-margin-top-xlarge=small]){margin-top:var(--dim-small)}:host([data-margin-left-xlarge=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-xlarge=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-xlarge=small]){margin-right:var(--dim-small)}.row.gap-xlarge-medium{--gap:var(--dim-medium)}:host([data-padding-xlarge=medium]){padding:var(--dim-medium)}:host([data-padding-top-xlarge=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-xlarge=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-xlarge=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-xlarge=medium]){padding-right:var(--dim-medium)}:host([data-margin-xlarge=medium]){margin:var(--dim-medium)}:host([data-margin-top-xlarge=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-xlarge=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-xlarge=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-xlarge=medium]){margin-right:var(--dim-medium)}.row.gap-xlarge-large{--gap:var(--dim-large)}:host([data-padding-xlarge=large]){padding:var(--dim-large)}:host([data-padding-top-xlarge=large]){padding-top:var(--dim-large)}:host([data-padding-left-xlarge=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-xlarge=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-xlarge=large]){padding-right:var(--dim-large)}:host([data-margin-xlarge=large]){margin:var(--dim-large)}:host([data-margin-top-xlarge=large]){margin-top:var(--dim-large)}:host([data-margin-left-xlarge=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-xlarge=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-xlarge=large]){margin-right:var(--dim-large)}.row.gap-xlarge-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-xlarge=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-xlarge=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-xlarge=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-xlarge=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-xlarge=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-xlarge=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-xlarge=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-xlarge=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-xlarge=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-xlarge=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-xlarge-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-xlarge=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-xlarge=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-xlarge=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-xlarge=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-xlarge=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-xlarge=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-xlarge=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-xlarge=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-xlarge=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-xlarge=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-xlarge-small-{--gap:var(--dim-small-)}:host([data-padding-xlarge=small-]){padding:var(--dim-small-)}:host([data-padding-top-xlarge=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-xlarge=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-xlarge=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-xlarge=small-]){padding-right:var(--dim-small-)}:host([data-margin-xlarge=small-]){margin:var(--dim-small-)}:host([data-margin-top-xlarge=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-xlarge=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-xlarge=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-xlarge=small-]){margin-right:var(--dim-small-)}.row.gap-xlarge-medium-{--gap:var(--dim-medium-)}:host([data-padding-xlarge=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-xlarge=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-xlarge=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-xlarge=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-xlarge=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-xlarge=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-xlarge=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-xlarge=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-xlarge=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-xlarge=medium-]){margin-right:var(--dim-medium-)}.row.gap-xlarge-large-{--gap:var(--dim-large-)}:host([data-padding-xlarge=large-]){padding:var(--dim-large-)}:host([data-padding-top-xlarge=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-xlarge=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-xlarge=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-xlarge=large-]){padding-right:var(--dim-large-)}:host([data-margin-xlarge=large-]){margin:var(--dim-large-)}:host([data-margin-top-xlarge=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-xlarge=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-xlarge=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-xlarge=large-]){margin-right:var(--dim-large-)}.row.gap-xlarge-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-xlarge=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-xlarge=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-xlarge=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-xlarge=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-xlarge=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-xlarge=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-xlarge=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-xlarge=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-xlarge=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-xlarge=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-xlarge-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-xlarge=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-xlarge=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-xlarge=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-xlarge=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-xlarge=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-xlarge=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-xlarge=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-xlarge=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-xlarge=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-xlarge=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-xlarge="12"]){order:12}:host([data-col-xlarge="12"]){--columns:12}:host([data-offset-xlarge="12"]){--offset:12}:host([data-order-xlarge="11"]){order:11}:host([data-col-xlarge="11"]){--columns:11}:host([data-offset-xlarge="11"]){--offset:11}:host([data-order-xlarge="10"]){order:10}:host([data-col-xlarge="10"]){--columns:10}:host([data-offset-xlarge="10"]){--offset:10}:host([data-order-xlarge="9"]){order:9}:host([data-col-xlarge="9"]){--columns:9}:host([data-offset-xlarge="9"]){--offset:9}:host([data-order-xlarge="8"]){order:8}:host([data-col-xlarge="8"]){--columns:8}:host([data-offset-xlarge="8"]){--offset:8}:host([data-order-xlarge="7"]){order:7}:host([data-col-xlarge="7"]){--columns:7}:host([data-offset-xlarge="7"]){--offset:7}:host([data-order-xlarge="6"]){order:6}:host([data-col-xlarge="6"]){--columns:6}:host([data-offset-xlarge="6"]){--offset:6}:host([data-order-xlarge="5"]){order:5}:host([data-col-xlarge="5"]){--columns:5}:host([data-offset-xlarge="5"]){--offset:5}:host([data-order-xlarge="4"]){order:4}:host([data-col-xlarge="4"]){--columns:4}:host([data-offset-xlarge="4"]){--offset:4}:host([data-order-xlarge="3"]){order:3}:host([data-col-xlarge="3"]){--columns:3}:host([data-offset-xlarge="3"]){--offset:3}:host([data-order-xlarge="2"]){order:2}:host([data-col-xlarge="2"]){--columns:2}:host([data-offset-xlarge="2"]){--offset:2}:host([data-order-xlarge="1"]){order:1}:host([data-col-xlarge="1"]){--columns:1}:host([data-offset-xlarge="1"]){--offset:1}}`,t=new CSSStyleSheet;t.replaceSync(e);var n=t;const r=`grid-element`,i=[`inherit`,`initial`,`revert`,`revert-layer`,`unset`],a=[`display`,`font`,`text-align`,`padding`,`padding-top`,`padding-right`,`padding-bottom`,`padding-left`,`margin`,`margin-top`,`margin-right`,`margin-bottom`,`margin-left`],o=[`row`,`cell`,`col`,`display`,`text-align`,`order`,`offset`,`gap`,`padding`,`font`],s=[`small`,`medium`,`large`,`xlarge`],c=[`none`,`small`,`medium`,`large`,`xlarge`,`xxlarge`,`small-`,`medium-`,`large-`,`xlarge-`,`xxlarge-`],l=[`block`,`inline`,`inline-block`,`flex`,`inline-flex`,`grid`,`inline-grid`,`flow-root`,`none`,`contents`,`table`,`table-row`,`list-item`,...i],u=[`start`,`end`,`left`,`right`,`center`,`justify`,`match-parent`],d=[`xsmall`,`small`,`medium`,`large`,`xlarge`,`xxlarge`],f=e=>a.includes(e),p=e=>o.includes(e),m=e=>c.includes(e),h=e=>u.includes(e),g=e=>l.includes(e),_=e=>d.includes(e);var v=e=>{let t=parseInt(e.trim());return t?String(t):null},y=e=>{let t=e.trim().toLowerCase();return g(t)?t:null},b=e=>{let t=e.trim().toLowerCase();return m(t)?t:null},x=e=>{let t=e.trim().toLowerCase();return h(t)?t:null},S=e=>{let t=e.trim().toLowerCase();return _(t)?t:null};const C={row:`boolean`,cell:`boolean`,"text-align":x,col:v,gap:b,font:S,order:v,offset:v,display:y,padding:b},w={font:S,margin:b,padding:b,display:y,"text-align":x,"margin-top":b,"margin-right":b,"margin-bottom":b,"margin-left":b,"padding-top":b,"padding-right":b,"padding-bottom":b,"padding-left":b},T=(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=s[n],o=e(t);a&&o&&r.push(`${i}-${a}-${o}`)})}return r},E=(e,t,n)=>{let r={};for(let i of e)if(s.forEach(e=>{r[`data-${i}-${e}`]=void 0}),t[i]!==void 0){let e=n[i];e===`boolean`?r[`data-${i}`]=i:t[i].split(` `).filter(Boolean).forEach((t,n)=>{let a=s[n],o=e(t);a&&o&&(r[`data-${i}-${a}`]=o)})}return Object.entries(r)},D=(e,t,n)=>{let r={};for(let i of e)if(s.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=s[n],o=e(t);a&&o&&(r[`--${i}-${a}`]=o)})}return Object.entries(r)};var O=class extends HTMLElement{static observedAttributes=o;attr={};mainSlot=()=>this.shadowRoot?.querySelector(`slot`)||null;container=()=>this.shadowRoot?.querySelector(`.grid-element`)||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){p(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=T(o,this.attr,C),t=E(o,this.attr,C);D([`display`,`text-align`],this.attr,C).forEach(([e,t])=>{t&&this.style.setProperty(e,t),t===void 0&&this.style.removeProperty(e)}),t.forEach(([e,t])=>{t&&this.setAttribute(e,t),t===void 0&&this.removeAttribute(e)}),this.shadowRoot.innerHTML=`
|
|
2
|
-
<div class="
|
|
3
|
-
`}};customElements.define(`r-grid`,
|
|
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=`
|
|
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;
|
|
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>","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';\n@use 'sass:math';\n\n$mediaSizes: (\n small: 0px,\n medium: 768px,\n large: 1024px,\n xlarge: 1280px,\n);\n$dimensions:\n 'none', 'small', 'medium', 'large', 'xlarge', 'xxlarge', 'small-', 'medium-', 'large-', 'xlarge-',\n 'xxlarge-';\n$fonts: 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\n\n:host {\n --dim-none: var(--grid-dim-none, 0px);\n --dim-small: var(--grid-dim-small, 4px);\n --dim-medium: var(--grid-dim-medium, 8px);\n --dim-large: var(--grid-dim-large, 16px);\n --dim-xlarge: var(--grid-dim-xlarge, 32px);\n --dim-xxlarge: var(--grid-dim-xxlarge, 64px);\n --dim-small-: var(--grid-dim-small-, -4px);\n --dim-medium-: var(--grid-dim-medium-, -8px);\n --dim-large-: var(--grid-dim-large-, -16px);\n --dim-xlarge-: var(--grid-dim-xlarge-, -32px);\n --dim-xxlarge-: var(--grid-dim-xxlarge-, -64px);\n --font-xsmall: var(--grid-font-xsmall, 12px);\n --font-small: var(--grid-font-small, 14px);\n --font-medium: var(--grid-font-medium, 16px);\n --font-large: var(--grid-font-large, 24px);\n --font-xlarge: var(--grid-font-xlarge, 32px);\n --font-xxlarge: var(--grid-font-xxlarge, 40px);\n display: block;\n box-sizing: border-box !important;\n}\n\nslot {\n display: contents !important;\n}\n\n.row {\n box-sizing: border-box;\n justify-content: flex-start;\n gap: var(--gap);\n --gap: 0px;\n flex-flow: wrap;\n margin: 0;\n padding: 0;\n display: flex;\n}\n\n.cell {\n box-sizing: border-box;\n}\n\n:host([data-cell]) {\n flex: auto;\n}\n\n:host([data-col-small]),\n:host([data-col-medium]),\n:host([data-col-large]),\n:host([data-col-xlarge]) {\n flex: 100%;\n max-width: calc(((var(--columns) / 12) * 100%) - var(--gap) * (calc((12 - var(--columns)) / 12)));\n}\n\n:host([data-offset-small]),\n:host([data-offset-medium]),\n:host([data-offset-large]),\n:host([data-offset-xlarge]) {\n margin-left: calc(((var(--offset) / 12) * 100%) + var(--gap) * (calc(var(--offset) / 12)));\n}\n\n@each $mediaName, $mediaSize in $mediaSizes {\n @media (min-width: #{$mediaSize}) {\n :host([data-text-align-#{$mediaName}]) {\n text-align: var(--text-align-#{$mediaName});\n }\n :host([data-display-#{$mediaName}]) {\n display: var(--display-#{$mediaName});\n }\n\n @each $font in $fonts {\n :host([data-font-#{$mediaName}='#{$font}']) {\n font-size: var(--font-#{$font});\n }\n }\n @each $dimension in $dimensions {\n .row.gap-#{$mediaName}-#{$dimension} {\n --gap: var(--dim-#{$dimension});\n }\n :host([data-padding-#{$mediaName}='#{$dimension}']) {\n padding: var(--dim-#{$dimension});\n }\n :host([data-padding-top-#{$mediaName}='#{$dimension}']) {\n padding-top: var(--dim-#{$dimension});\n }\n :host([data-padding-left-#{$mediaName}='#{$dimension}']) {\n padding-left: var(--dim-#{$dimension});\n }\n :host([data-padding-bottom-#{$mediaName}='#{$dimension}']) {\n padding-bottom: var(--dim-#{$dimension});\n }\n :host([data-padding-right-#{$mediaName}='#{$dimension}']) {\n padding-right: var(--dim-#{$dimension});\n }\n :host([data-margin-#{$mediaName}='#{$dimension}']) {\n margin: var(--dim-#{$dimension});\n }\n :host([data-margin-top-#{$mediaName}='#{$dimension}']) {\n margin-top: var(--dim-#{$dimension});\n }\n :host([data-margin-left-#{$mediaName}='#{$dimension}']) {\n margin-left: var(--dim-#{$dimension});\n }\n :host([data-margin-bottom-#{$mediaName}='#{$dimension}']) {\n margin-bottom: var(--dim-#{$dimension});\n }\n :host([data-margin-right-#{$mediaName}='#{$dimension}']) {\n margin-right: var(--dim-#{$dimension});\n }\n }\n\n @for $i from 12 through 1 {\n :host([data-order-#{$mediaName}='#{$i}']) {\n order: #{$i};\n }\n :host([data-col-#{$mediaName}='#{$i}']) {\n --columns: #{$i};\n }\n :host([data-offset-#{$mediaName}='#{$i}']) {\n --offset: #{$i};\n }\n }\n }\n}\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 ContainerClass = 'grid-element' as const;\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 'offset',\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 isDimensionSize = (size: string): size is DimensionSize =>\r\n DimensionSizes.includes(size as DimensionSize);\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 ? 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): DimensionSize | null => {\r\n const value = val.trim().toLowerCase();\r\n return isDimensionSize(value) ? value : 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): FontSize | null => {\r\n const value = val.trim().toLowerCase();\r\n return isFontSize(value) ? value : 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 col: getValidNumber,\r\n gap: getValidDimension,\r\n font: getValidFont,\r\n order: getValidNumber,\r\n offset: 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 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) => {\r\n const hostAttributes: Record<string, string | undefined> = {};\r\n\r\n for (const attr of attrNames) {\r\n MediaSizes.forEach((mediaSize) => {\r\n hostAttributes[`data-${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 hostAttributes[`data-${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[`data-${attr}-${mediaSize}`] = 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 ContainerClass,\r\n getClasses,\r\n getGridAttributeValue as getValues,\r\n getHostAttributes,\r\n isGridAttribute,\r\n ObservedGridAttributes as Attributes,\r\n getHostCSS,\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} 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} offset - set element's column offset for each breakpoint (Integers)\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 =>\r\n this.shadowRoot?.querySelector(`.${ContainerClass}`) || 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(Attributes, this.attr, getValues);\r\n const hostAttributes = getHostAttributes(Attributes, this.attr, getValues);\r\n const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n hostCSS.forEach(([attr, value]) => {\r\n if (value) this.style.setProperty(attr, value);\r\n if (value === undefined) this.style.removeProperty(attr);\r\n });\r\n\r\n hostAttributes.forEach(([attr, value]) => {\r\n if (value) this.setAttribute(attr, value);\r\n if (value === undefined) this.removeAttribute(attr);\r\n });\r\n\r\n this.shadowRoot!.innerHTML = `\r\n <div class=\"${ContainerClass} ${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} 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);\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\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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"}
|
package/dist/r-grid.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var grid_default = ":host{--dim-none:var(--grid-dim-none,0px);--dim-small:var(--grid-dim-small,4px);--dim-medium:var(--grid-dim-medium,8px);--dim-large:var(--grid-dim-large,16px);--dim-xlarge:var(--grid-dim-xlarge,32px);--dim-xxlarge:var(--grid-dim-xxlarge,64px);--dim-small-:var(--grid-dim-small-,-4px);--dim-medium-:var(--grid-dim-medium-,-8px);--dim-large-:var(--grid-dim-large-,-16px);--dim-xlarge-:var(--grid-dim-xlarge-,-32px);--dim-xxlarge-:var(--grid-dim-xxlarge-,-64px);--font-xsmall:var(--grid-font-xsmall,12px);--font-small:var(--grid-font-small,14px);--font-medium:var(--grid-font-medium,16px);--font-large:var(--grid-font-large,24px);--font-xlarge:var(--grid-font-xlarge,32px);--font-xxlarge: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([data-cell]){flex:auto}:host([data-col-small]),:host([data-col-medium]),:host([data-col-large]),:host([data-col-xlarge]){max-width:calc(var(--columns)/12*100% - var(--gap)*(12 - var(--columns))/12);flex:100%}:host([data-offset-small]),:host([data-offset-medium]),:host([data-offset-large]),:host([data-offset-xlarge]){margin-left:calc(var(--offset)/12*100% + var(--gap)*var(--offset)/12)}@media (min-width:0){:host([data-text-align-small]){text-align:var(--text-align-small)}:host([data-display-small]){display:var(--display-small)}:host([data-font-small=xsmall]){font-size:var(--font-xsmall)}:host([data-font-small=small]){font-size:var(--font-small)}:host([data-font-small=medium]){font-size:var(--font-medium)}:host([data-font-small=large]){font-size:var(--font-large)}:host([data-font-small=xlarge]){font-size:var(--font-xlarge)}:host([data-font-small=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-small-none{--gap:var(--dim-none)}:host([data-padding-small=none]){padding:var(--dim-none)}:host([data-padding-top-small=none]){padding-top:var(--dim-none)}:host([data-padding-left-small=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-small=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-small=none]){padding-right:var(--dim-none)}:host([data-margin-small=none]){margin:var(--dim-none)}:host([data-margin-top-small=none]){margin-top:var(--dim-none)}:host([data-margin-left-small=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-small=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-small=none]){margin-right:var(--dim-none)}.row.gap-small-small{--gap:var(--dim-small)}:host([data-padding-small=small]){padding:var(--dim-small)}:host([data-padding-top-small=small]){padding-top:var(--dim-small)}:host([data-padding-left-small=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-small=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-small=small]){padding-right:var(--dim-small)}:host([data-margin-small=small]){margin:var(--dim-small)}:host([data-margin-top-small=small]){margin-top:var(--dim-small)}:host([data-margin-left-small=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-small=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-small=small]){margin-right:var(--dim-small)}.row.gap-small-medium{--gap:var(--dim-medium)}:host([data-padding-small=medium]){padding:var(--dim-medium)}:host([data-padding-top-small=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-small=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-small=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-small=medium]){padding-right:var(--dim-medium)}:host([data-margin-small=medium]){margin:var(--dim-medium)}:host([data-margin-top-small=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-small=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-small=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-small=medium]){margin-right:var(--dim-medium)}.row.gap-small-large{--gap:var(--dim-large)}:host([data-padding-small=large]){padding:var(--dim-large)}:host([data-padding-top-small=large]){padding-top:var(--dim-large)}:host([data-padding-left-small=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-small=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-small=large]){padding-right:var(--dim-large)}:host([data-margin-small=large]){margin:var(--dim-large)}:host([data-margin-top-small=large]){margin-top:var(--dim-large)}:host([data-margin-left-small=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-small=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-small=large]){margin-right:var(--dim-large)}.row.gap-small-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-small=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-small=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-small=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-small=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-small=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-small=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-small=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-small=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-small=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-small=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-small-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-small=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-small=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-small=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-small=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-small=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-small=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-small=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-small=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-small=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-small=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-small-small-{--gap:var(--dim-small-)}:host([data-padding-small=small-]){padding:var(--dim-small-)}:host([data-padding-top-small=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-small=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-small=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-small=small-]){padding-right:var(--dim-small-)}:host([data-margin-small=small-]){margin:var(--dim-small-)}:host([data-margin-top-small=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-small=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-small=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-small=small-]){margin-right:var(--dim-small-)}.row.gap-small-medium-{--gap:var(--dim-medium-)}:host([data-padding-small=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-small=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-small=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-small=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-small=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-small=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-small=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-small=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-small=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-small=medium-]){margin-right:var(--dim-medium-)}.row.gap-small-large-{--gap:var(--dim-large-)}:host([data-padding-small=large-]){padding:var(--dim-large-)}:host([data-padding-top-small=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-small=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-small=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-small=large-]){padding-right:var(--dim-large-)}:host([data-margin-small=large-]){margin:var(--dim-large-)}:host([data-margin-top-small=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-small=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-small=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-small=large-]){margin-right:var(--dim-large-)}.row.gap-small-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-small=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-small=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-small=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-small=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-small=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-small=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-small=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-small=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-small=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-small=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-small-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-small=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-small=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-small=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-small=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-small=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-small=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-small=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-small=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-small=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-small=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-small=\"12\"]){order:12}:host([data-col-small=\"12\"]){--columns:12}:host([data-offset-small=\"12\"]){--offset:12}:host([data-order-small=\"11\"]){order:11}:host([data-col-small=\"11\"]){--columns:11}:host([data-offset-small=\"11\"]){--offset:11}:host([data-order-small=\"10\"]){order:10}:host([data-col-small=\"10\"]){--columns:10}:host([data-offset-small=\"10\"]){--offset:10}:host([data-order-small=\"9\"]){order:9}:host([data-col-small=\"9\"]){--columns:9}:host([data-offset-small=\"9\"]){--offset:9}:host([data-order-small=\"8\"]){order:8}:host([data-col-small=\"8\"]){--columns:8}:host([data-offset-small=\"8\"]){--offset:8}:host([data-order-small=\"7\"]){order:7}:host([data-col-small=\"7\"]){--columns:7}:host([data-offset-small=\"7\"]){--offset:7}:host([data-order-small=\"6\"]){order:6}:host([data-col-small=\"6\"]){--columns:6}:host([data-offset-small=\"6\"]){--offset:6}:host([data-order-small=\"5\"]){order:5}:host([data-col-small=\"5\"]){--columns:5}:host([data-offset-small=\"5\"]){--offset:5}:host([data-order-small=\"4\"]){order:4}:host([data-col-small=\"4\"]){--columns:4}:host([data-offset-small=\"4\"]){--offset:4}:host([data-order-small=\"3\"]){order:3}:host([data-col-small=\"3\"]){--columns:3}:host([data-offset-small=\"3\"]){--offset:3}:host([data-order-small=\"2\"]){order:2}:host([data-col-small=\"2\"]){--columns:2}:host([data-offset-small=\"2\"]){--offset:2}:host([data-order-small=\"1\"]){order:1}:host([data-col-small=\"1\"]){--columns:1}:host([data-offset-small=\"1\"]){--offset:1}}@media (min-width:768px){:host([data-text-align-medium]){text-align:var(--text-align-medium)}:host([data-display-medium]){display:var(--display-medium)}:host([data-font-medium=xsmall]){font-size:var(--font-xsmall)}:host([data-font-medium=small]){font-size:var(--font-small)}:host([data-font-medium=medium]){font-size:var(--font-medium)}:host([data-font-medium=large]){font-size:var(--font-large)}:host([data-font-medium=xlarge]){font-size:var(--font-xlarge)}:host([data-font-medium=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-medium-none{--gap:var(--dim-none)}:host([data-padding-medium=none]){padding:var(--dim-none)}:host([data-padding-top-medium=none]){padding-top:var(--dim-none)}:host([data-padding-left-medium=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-medium=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-medium=none]){padding-right:var(--dim-none)}:host([data-margin-medium=none]){margin:var(--dim-none)}:host([data-margin-top-medium=none]){margin-top:var(--dim-none)}:host([data-margin-left-medium=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-medium=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-medium=none]){margin-right:var(--dim-none)}.row.gap-medium-small{--gap:var(--dim-small)}:host([data-padding-medium=small]){padding:var(--dim-small)}:host([data-padding-top-medium=small]){padding-top:var(--dim-small)}:host([data-padding-left-medium=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-medium=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-medium=small]){padding-right:var(--dim-small)}:host([data-margin-medium=small]){margin:var(--dim-small)}:host([data-margin-top-medium=small]){margin-top:var(--dim-small)}:host([data-margin-left-medium=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-medium=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-medium=small]){margin-right:var(--dim-small)}.row.gap-medium-medium{--gap:var(--dim-medium)}:host([data-padding-medium=medium]){padding:var(--dim-medium)}:host([data-padding-top-medium=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-medium=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-medium=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-medium=medium]){padding-right:var(--dim-medium)}:host([data-margin-medium=medium]){margin:var(--dim-medium)}:host([data-margin-top-medium=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-medium=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-medium=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-medium=medium]){margin-right:var(--dim-medium)}.row.gap-medium-large{--gap:var(--dim-large)}:host([data-padding-medium=large]){padding:var(--dim-large)}:host([data-padding-top-medium=large]){padding-top:var(--dim-large)}:host([data-padding-left-medium=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-medium=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-medium=large]){padding-right:var(--dim-large)}:host([data-margin-medium=large]){margin:var(--dim-large)}:host([data-margin-top-medium=large]){margin-top:var(--dim-large)}:host([data-margin-left-medium=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-medium=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-medium=large]){margin-right:var(--dim-large)}.row.gap-medium-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-medium=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-medium=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-medium=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-medium=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-medium=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-medium=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-medium=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-medium=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-medium=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-medium=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-medium-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-medium=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-medium=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-medium=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-medium=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-medium=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-medium=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-medium=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-medium=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-medium=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-medium=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-medium-small-{--gap:var(--dim-small-)}:host([data-padding-medium=small-]){padding:var(--dim-small-)}:host([data-padding-top-medium=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-medium=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-medium=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-medium=small-]){padding-right:var(--dim-small-)}:host([data-margin-medium=small-]){margin:var(--dim-small-)}:host([data-margin-top-medium=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-medium=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-medium=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-medium=small-]){margin-right:var(--dim-small-)}.row.gap-medium-medium-{--gap:var(--dim-medium-)}:host([data-padding-medium=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-medium=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-medium=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-medium=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-medium=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-medium=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-medium=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-medium=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-medium=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-medium=medium-]){margin-right:var(--dim-medium-)}.row.gap-medium-large-{--gap:var(--dim-large-)}:host([data-padding-medium=large-]){padding:var(--dim-large-)}:host([data-padding-top-medium=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-medium=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-medium=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-medium=large-]){padding-right:var(--dim-large-)}:host([data-margin-medium=large-]){margin:var(--dim-large-)}:host([data-margin-top-medium=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-medium=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-medium=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-medium=large-]){margin-right:var(--dim-large-)}.row.gap-medium-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-medium=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-medium=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-medium=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-medium=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-medium=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-medium=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-medium=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-medium=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-medium=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-medium=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-medium-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-medium=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-medium=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-medium=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-medium=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-medium=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-medium=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-medium=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-medium=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-medium=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-medium=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-medium=\"12\"]){order:12}:host([data-col-medium=\"12\"]){--columns:12}:host([data-offset-medium=\"12\"]){--offset:12}:host([data-order-medium=\"11\"]){order:11}:host([data-col-medium=\"11\"]){--columns:11}:host([data-offset-medium=\"11\"]){--offset:11}:host([data-order-medium=\"10\"]){order:10}:host([data-col-medium=\"10\"]){--columns:10}:host([data-offset-medium=\"10\"]){--offset:10}:host([data-order-medium=\"9\"]){order:9}:host([data-col-medium=\"9\"]){--columns:9}:host([data-offset-medium=\"9\"]){--offset:9}:host([data-order-medium=\"8\"]){order:8}:host([data-col-medium=\"8\"]){--columns:8}:host([data-offset-medium=\"8\"]){--offset:8}:host([data-order-medium=\"7\"]){order:7}:host([data-col-medium=\"7\"]){--columns:7}:host([data-offset-medium=\"7\"]){--offset:7}:host([data-order-medium=\"6\"]){order:6}:host([data-col-medium=\"6\"]){--columns:6}:host([data-offset-medium=\"6\"]){--offset:6}:host([data-order-medium=\"5\"]){order:5}:host([data-col-medium=\"5\"]){--columns:5}:host([data-offset-medium=\"5\"]){--offset:5}:host([data-order-medium=\"4\"]){order:4}:host([data-col-medium=\"4\"]){--columns:4}:host([data-offset-medium=\"4\"]){--offset:4}:host([data-order-medium=\"3\"]){order:3}:host([data-col-medium=\"3\"]){--columns:3}:host([data-offset-medium=\"3\"]){--offset:3}:host([data-order-medium=\"2\"]){order:2}:host([data-col-medium=\"2\"]){--columns:2}:host([data-offset-medium=\"2\"]){--offset:2}:host([data-order-medium=\"1\"]){order:1}:host([data-col-medium=\"1\"]){--columns:1}:host([data-offset-medium=\"1\"]){--offset:1}}@media (min-width:1024px){:host([data-text-align-large]){text-align:var(--text-align-large)}:host([data-display-large]){display:var(--display-large)}:host([data-font-large=xsmall]){font-size:var(--font-xsmall)}:host([data-font-large=small]){font-size:var(--font-small)}:host([data-font-large=medium]){font-size:var(--font-medium)}:host([data-font-large=large]){font-size:var(--font-large)}:host([data-font-large=xlarge]){font-size:var(--font-xlarge)}:host([data-font-large=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-large-none{--gap:var(--dim-none)}:host([data-padding-large=none]){padding:var(--dim-none)}:host([data-padding-top-large=none]){padding-top:var(--dim-none)}:host([data-padding-left-large=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-large=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-large=none]){padding-right:var(--dim-none)}:host([data-margin-large=none]){margin:var(--dim-none)}:host([data-margin-top-large=none]){margin-top:var(--dim-none)}:host([data-margin-left-large=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-large=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-large=none]){margin-right:var(--dim-none)}.row.gap-large-small{--gap:var(--dim-small)}:host([data-padding-large=small]){padding:var(--dim-small)}:host([data-padding-top-large=small]){padding-top:var(--dim-small)}:host([data-padding-left-large=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-large=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-large=small]){padding-right:var(--dim-small)}:host([data-margin-large=small]){margin:var(--dim-small)}:host([data-margin-top-large=small]){margin-top:var(--dim-small)}:host([data-margin-left-large=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-large=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-large=small]){margin-right:var(--dim-small)}.row.gap-large-medium{--gap:var(--dim-medium)}:host([data-padding-large=medium]){padding:var(--dim-medium)}:host([data-padding-top-large=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-large=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-large=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-large=medium]){padding-right:var(--dim-medium)}:host([data-margin-large=medium]){margin:var(--dim-medium)}:host([data-margin-top-large=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-large=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-large=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-large=medium]){margin-right:var(--dim-medium)}.row.gap-large-large{--gap:var(--dim-large)}:host([data-padding-large=large]){padding:var(--dim-large)}:host([data-padding-top-large=large]){padding-top:var(--dim-large)}:host([data-padding-left-large=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-large=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-large=large]){padding-right:var(--dim-large)}:host([data-margin-large=large]){margin:var(--dim-large)}:host([data-margin-top-large=large]){margin-top:var(--dim-large)}:host([data-margin-left-large=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-large=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-large=large]){margin-right:var(--dim-large)}.row.gap-large-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-large=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-large=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-large=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-large=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-large=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-large=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-large=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-large=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-large=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-large=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-large-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-large=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-large=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-large=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-large=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-large=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-large=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-large=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-large=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-large=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-large=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-large-small-{--gap:var(--dim-small-)}:host([data-padding-large=small-]){padding:var(--dim-small-)}:host([data-padding-top-large=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-large=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-large=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-large=small-]){padding-right:var(--dim-small-)}:host([data-margin-large=small-]){margin:var(--dim-small-)}:host([data-margin-top-large=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-large=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-large=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-large=small-]){margin-right:var(--dim-small-)}.row.gap-large-medium-{--gap:var(--dim-medium-)}:host([data-padding-large=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-large=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-large=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-large=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-large=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-large=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-large=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-large=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-large=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-large=medium-]){margin-right:var(--dim-medium-)}.row.gap-large-large-{--gap:var(--dim-large-)}:host([data-padding-large=large-]){padding:var(--dim-large-)}:host([data-padding-top-large=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-large=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-large=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-large=large-]){padding-right:var(--dim-large-)}:host([data-margin-large=large-]){margin:var(--dim-large-)}:host([data-margin-top-large=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-large=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-large=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-large=large-]){margin-right:var(--dim-large-)}.row.gap-large-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-large=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-large=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-large=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-large=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-large=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-large=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-large=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-large=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-large=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-large=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-large-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-large=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-large=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-large=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-large=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-large=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-large=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-large=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-large=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-large=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-large=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-large=\"12\"]){order:12}:host([data-col-large=\"12\"]){--columns:12}:host([data-offset-large=\"12\"]){--offset:12}:host([data-order-large=\"11\"]){order:11}:host([data-col-large=\"11\"]){--columns:11}:host([data-offset-large=\"11\"]){--offset:11}:host([data-order-large=\"10\"]){order:10}:host([data-col-large=\"10\"]){--columns:10}:host([data-offset-large=\"10\"]){--offset:10}:host([data-order-large=\"9\"]){order:9}:host([data-col-large=\"9\"]){--columns:9}:host([data-offset-large=\"9\"]){--offset:9}:host([data-order-large=\"8\"]){order:8}:host([data-col-large=\"8\"]){--columns:8}:host([data-offset-large=\"8\"]){--offset:8}:host([data-order-large=\"7\"]){order:7}:host([data-col-large=\"7\"]){--columns:7}:host([data-offset-large=\"7\"]){--offset:7}:host([data-order-large=\"6\"]){order:6}:host([data-col-large=\"6\"]){--columns:6}:host([data-offset-large=\"6\"]){--offset:6}:host([data-order-large=\"5\"]){order:5}:host([data-col-large=\"5\"]){--columns:5}:host([data-offset-large=\"5\"]){--offset:5}:host([data-order-large=\"4\"]){order:4}:host([data-col-large=\"4\"]){--columns:4}:host([data-offset-large=\"4\"]){--offset:4}:host([data-order-large=\"3\"]){order:3}:host([data-col-large=\"3\"]){--columns:3}:host([data-offset-large=\"3\"]){--offset:3}:host([data-order-large=\"2\"]){order:2}:host([data-col-large=\"2\"]){--columns:2}:host([data-offset-large=\"2\"]){--offset:2}:host([data-order-large=\"1\"]){order:1}:host([data-col-large=\"1\"]){--columns:1}:host([data-offset-large=\"1\"]){--offset:1}}@media (min-width:1280px){:host([data-text-align-xlarge]){text-align:var(--text-align-xlarge)}:host([data-display-xlarge]){display:var(--display-xlarge)}:host([data-font-xlarge=xsmall]){font-size:var(--font-xsmall)}:host([data-font-xlarge=small]){font-size:var(--font-small)}:host([data-font-xlarge=medium]){font-size:var(--font-medium)}:host([data-font-xlarge=large]){font-size:var(--font-large)}:host([data-font-xlarge=xlarge]){font-size:var(--font-xlarge)}:host([data-font-xlarge=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-xlarge-none{--gap:var(--dim-none)}:host([data-padding-xlarge=none]){padding:var(--dim-none)}:host([data-padding-top-xlarge=none]){padding-top:var(--dim-none)}:host([data-padding-left-xlarge=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-xlarge=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-xlarge=none]){padding-right:var(--dim-none)}:host([data-margin-xlarge=none]){margin:var(--dim-none)}:host([data-margin-top-xlarge=none]){margin-top:var(--dim-none)}:host([data-margin-left-xlarge=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-xlarge=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-xlarge=none]){margin-right:var(--dim-none)}.row.gap-xlarge-small{--gap:var(--dim-small)}:host([data-padding-xlarge=small]){padding:var(--dim-small)}:host([data-padding-top-xlarge=small]){padding-top:var(--dim-small)}:host([data-padding-left-xlarge=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-xlarge=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-xlarge=small]){padding-right:var(--dim-small)}:host([data-margin-xlarge=small]){margin:var(--dim-small)}:host([data-margin-top-xlarge=small]){margin-top:var(--dim-small)}:host([data-margin-left-xlarge=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-xlarge=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-xlarge=small]){margin-right:var(--dim-small)}.row.gap-xlarge-medium{--gap:var(--dim-medium)}:host([data-padding-xlarge=medium]){padding:var(--dim-medium)}:host([data-padding-top-xlarge=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-xlarge=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-xlarge=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-xlarge=medium]){padding-right:var(--dim-medium)}:host([data-margin-xlarge=medium]){margin:var(--dim-medium)}:host([data-margin-top-xlarge=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-xlarge=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-xlarge=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-xlarge=medium]){margin-right:var(--dim-medium)}.row.gap-xlarge-large{--gap:var(--dim-large)}:host([data-padding-xlarge=large]){padding:var(--dim-large)}:host([data-padding-top-xlarge=large]){padding-top:var(--dim-large)}:host([data-padding-left-xlarge=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-xlarge=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-xlarge=large]){padding-right:var(--dim-large)}:host([data-margin-xlarge=large]){margin:var(--dim-large)}:host([data-margin-top-xlarge=large]){margin-top:var(--dim-large)}:host([data-margin-left-xlarge=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-xlarge=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-xlarge=large]){margin-right:var(--dim-large)}.row.gap-xlarge-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-xlarge=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-xlarge=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-xlarge=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-xlarge=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-xlarge=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-xlarge=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-xlarge=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-xlarge=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-xlarge=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-xlarge=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-xlarge-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-xlarge=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-xlarge=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-xlarge=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-xlarge=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-xlarge=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-xlarge=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-xlarge=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-xlarge=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-xlarge=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-xlarge=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-xlarge-small-{--gap:var(--dim-small-)}:host([data-padding-xlarge=small-]){padding:var(--dim-small-)}:host([data-padding-top-xlarge=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-xlarge=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-xlarge=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-xlarge=small-]){padding-right:var(--dim-small-)}:host([data-margin-xlarge=small-]){margin:var(--dim-small-)}:host([data-margin-top-xlarge=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-xlarge=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-xlarge=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-xlarge=small-]){margin-right:var(--dim-small-)}.row.gap-xlarge-medium-{--gap:var(--dim-medium-)}:host([data-padding-xlarge=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-xlarge=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-xlarge=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-xlarge=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-xlarge=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-xlarge=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-xlarge=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-xlarge=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-xlarge=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-xlarge=medium-]){margin-right:var(--dim-medium-)}.row.gap-xlarge-large-{--gap:var(--dim-large-)}:host([data-padding-xlarge=large-]){padding:var(--dim-large-)}:host([data-padding-top-xlarge=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-xlarge=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-xlarge=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-xlarge=large-]){padding-right:var(--dim-large-)}:host([data-margin-xlarge=large-]){margin:var(--dim-large-)}:host([data-margin-top-xlarge=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-xlarge=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-xlarge=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-xlarge=large-]){margin-right:var(--dim-large-)}.row.gap-xlarge-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-xlarge=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-xlarge=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-xlarge=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-xlarge=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-xlarge=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-xlarge=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-xlarge=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-xlarge=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-xlarge=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-xlarge=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-xlarge-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-xlarge=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-xlarge=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-xlarge=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-xlarge=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-xlarge=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-xlarge=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-xlarge=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-xlarge=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-xlarge=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-xlarge=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-xlarge=\"12\"]){order:12}:host([data-col-xlarge=\"12\"]){--columns:12}:host([data-offset-xlarge=\"12\"]){--offset:12}:host([data-order-xlarge=\"11\"]){order:11}:host([data-col-xlarge=\"11\"]){--columns:11}:host([data-offset-xlarge=\"11\"]){--offset:11}:host([data-order-xlarge=\"10\"]){order:10}:host([data-col-xlarge=\"10\"]){--columns:10}:host([data-offset-xlarge=\"10\"]){--offset:10}:host([data-order-xlarge=\"9\"]){order:9}:host([data-col-xlarge=\"9\"]){--columns:9}:host([data-offset-xlarge=\"9\"]){--offset:9}:host([data-order-xlarge=\"8\"]){order:8}:host([data-col-xlarge=\"8\"]){--columns:8}:host([data-offset-xlarge=\"8\"]){--offset:8}:host([data-order-xlarge=\"7\"]){order:7}:host([data-col-xlarge=\"7\"]){--columns:7}:host([data-offset-xlarge=\"7\"]){--offset:7}:host([data-order-xlarge=\"6\"]){order:6}:host([data-col-xlarge=\"6\"]){--columns:6}:host([data-offset-xlarge=\"6\"]){--offset:6}:host([data-order-xlarge=\"5\"]){order:5}:host([data-col-xlarge=\"5\"]){--columns:5}:host([data-offset-xlarge=\"5\"]){--offset:5}:host([data-order-xlarge=\"4\"]){order:4}:host([data-col-xlarge=\"4\"]){--columns:4}:host([data-offset-xlarge=\"4\"]){--offset:4}:host([data-order-xlarge=\"3\"]){order:3}:host([data-col-xlarge=\"3\"]){--columns:3}:host([data-offset-xlarge=\"3\"]){--offset:3}:host([data-order-xlarge=\"2\"]){order:2}:host([data-col-xlarge=\"2\"]){--columns:2}:host([data-offset-xlarge=\"2\"]){--offset:2}:host([data-order-xlarge=\"1\"]){order:1}:host([data-col-xlarge=\"1\"]){--columns:1}:host([data-offset-xlarge=\"1\"]){--offset:1}}", sheet = new CSSStyleSheet();
|
|
1
|
+
var grid_default = ":host{--d0:var(--grid-dim-none,0px);--d1:var(--grid-dim-small,4px);--d2:var(--grid-dim-medium,8px);--d3:var(--grid-dim-large,16px);--d4:var(--grid-dim-xlarge,32px);--d5:var(--grid-dim-xxlarge,64px);--f0:var(--grid-font-xsmall,12px);--f1:var(--grid-font-small,14px);--f2:var(--grid-font-medium,16px);--f3:var(--grid-font-large,24px);--f4:var(--grid-font-xlarge,32px);--f5:var(--grid-font-xxlarge,40px);display:block;box-sizing:border-box!important}slot{display:contents!important}.row{box-sizing:border-box;justify-content:flex-start;gap:var(--gap);--gap:0px;flex-flow:wrap;margin:0;padding:0;display:flex}.cell{box-sizing:border-box}:host([r-cell]){flex:auto}:host([r-c1]),:host([r-c2]),:host([r-c3]),:host([r-c4]){max-width:calc(var(--rc)/12*100% - var(--gap)*(12 - var(--rc))/12);flex:100%}:host([r-sb1]),:host([r-sb2]),:host([r-sb3]),:host([r-sb4]){margin-left:calc(var(--rsb)/12*100% + var(--gap)*var(--rsb)/12)}:host([r-sa1]),:host([r-sa2]),:host([r-sa3]),:host([r-sa4]){margin-right:calc(var(--rsa)/12*100% + var(--gap)*var(--rsa)/12)}@media (min-width:0){:host([r-ta1]){text-align:var(--text-align-small)}:host([r-d1]){display:var(--display-small)}:host([r-f1=\"1\"]){font-size:var(--f1)}:host([r-f1=\"2\"]){font-size:var(--f2)}:host([r-f1=\"3\"]){font-size:var(--f3)}:host([r-f1=\"4\"]){font-size:var(--f4)}:host([r-f1=\"5\"]){font-size:var(--f5)}:host([r-f1=\"6\"]){font-size:var(--f6)}.row.gap-small-1{--gap:var(--d1)}:host([r-p1=\"1\"]){padding:var(--d1)}:host([r-pt1=\"1\"]){padding-top:var(--d1)}:host([r-pl1=\"1\"]){padding-left:var(--d1)}:host([r-pb1=\"1\"]){padding-bottom:var(--d1)}:host([r-pr1=\"1\"]){padding-right:var(--d1)}:host([r-m1=\"1\"]){margin:var(--d1)}:host([r-mt1=\"1\"]){margin-top:var(--d1)}:host([r-ml1=\"1\"]){margin-left:var(--d1)}:host([r-mb1=\"1\"]){margin-bottom:var(--d1)}:host([r-mr1=\"1\"]){margin-right:var(--d1)}.row.gap-small-2{--gap:var(--d2)}:host([r-p1=\"2\"]){padding:var(--d2)}:host([r-pt1=\"2\"]){padding-top:var(--d2)}:host([r-pl1=\"2\"]){padding-left:var(--d2)}:host([r-pb1=\"2\"]){padding-bottom:var(--d2)}:host([r-pr1=\"2\"]){padding-right:var(--d2)}:host([r-m1=\"2\"]){margin:var(--d2)}:host([r-mt1=\"2\"]){margin-top:var(--d2)}:host([r-ml1=\"2\"]){margin-left:var(--d2)}:host([r-mb1=\"2\"]){margin-bottom:var(--d2)}:host([r-mr1=\"2\"]){margin-right:var(--d2)}.row.gap-small-3{--gap:var(--d3)}:host([r-p1=\"3\"]){padding:var(--d3)}:host([r-pt1=\"3\"]){padding-top:var(--d3)}:host([r-pl1=\"3\"]){padding-left:var(--d3)}:host([r-pb1=\"3\"]){padding-bottom:var(--d3)}:host([r-pr1=\"3\"]){padding-right:var(--d3)}:host([r-m1=\"3\"]){margin:var(--d3)}:host([r-mt1=\"3\"]){margin-top:var(--d3)}:host([r-ml1=\"3\"]){margin-left:var(--d3)}:host([r-mb1=\"3\"]){margin-bottom:var(--d3)}:host([r-mr1=\"3\"]){margin-right:var(--d3)}.row.gap-small-4{--gap:var(--d4)}:host([r-p1=\"4\"]){padding:var(--d4)}:host([r-pt1=\"4\"]){padding-top:var(--d4)}:host([r-pl1=\"4\"]){padding-left:var(--d4)}:host([r-pb1=\"4\"]){padding-bottom:var(--d4)}:host([r-pr1=\"4\"]){padding-right:var(--d4)}:host([r-m1=\"4\"]){margin:var(--d4)}:host([r-mt1=\"4\"]){margin-top:var(--d4)}:host([r-ml1=\"4\"]){margin-left:var(--d4)}:host([r-mb1=\"4\"]){margin-bottom:var(--d4)}:host([r-mr1=\"4\"]){margin-right:var(--d4)}.row.gap-small-5{--gap:var(--d5)}:host([r-p1=\"5\"]){padding:var(--d5)}:host([r-pt1=\"5\"]){padding-top:var(--d5)}:host([r-pl1=\"5\"]){padding-left:var(--d5)}:host([r-pb1=\"5\"]){padding-bottom:var(--d5)}:host([r-pr1=\"5\"]){padding-right:var(--d5)}:host([r-m1=\"5\"]){margin:var(--d5)}:host([r-mt1=\"5\"]){margin-top:var(--d5)}:host([r-ml1=\"5\"]){margin-left:var(--d5)}:host([r-mb1=\"5\"]){margin-bottom:var(--d5)}:host([r-mr1=\"5\"]){margin-right:var(--d5)}.row.gap-small-6{--gap:var(--d6)}:host([r-p1=\"6\"]){padding:var(--d6)}:host([r-pt1=\"6\"]){padding-top:var(--d6)}:host([r-pl1=\"6\"]){padding-left:var(--d6)}:host([r-pb1=\"6\"]){padding-bottom:var(--d6)}:host([r-pr1=\"6\"]){padding-right:var(--d6)}:host([r-m1=\"6\"]){margin:var(--d6)}:host([r-mt1=\"6\"]){margin-top:var(--d6)}:host([r-ml1=\"6\"]){margin-left:var(--d6)}:host([r-mb1=\"6\"]){margin-bottom:var(--d6)}:host([r-mr1=\"6\"]){margin-right:var(--d6)}:host([r-or1=\"12\"]){order:12}:host([r-c1=\"12\"]){--rc:12}:host([r-or1=\"11\"]){order:11}:host([r-c1=\"11\"]){--rc:11}:host([r-or1=\"10\"]){order:10}:host([r-c1=\"10\"]){--rc:10}:host([r-or1=\"9\"]){order:9}:host([r-c1=\"9\"]){--rc:9}:host([r-or1=\"8\"]){order:8}:host([r-c1=\"8\"]){--rc:8}:host([r-or1=\"7\"]){order:7}:host([r-c1=\"7\"]){--rc:7}:host([r-or1=\"6\"]){order:6}:host([r-c1=\"6\"]){--rc:6}:host([r-or1=\"5\"]){order:5}:host([r-c1=\"5\"]){--rc:5}:host([r-or1=\"4\"]){order:4}:host([r-c1=\"4\"]){--rc:4}:host([r-or1=\"3\"]){order:3}:host([r-c1=\"3\"]){--rc:3}:host([r-or1=\"2\"]){order:2}:host([r-c1=\"2\"]){--rc:2}:host([r-or1=\"1\"]){order:1}:host([r-c1=\"1\"]){--rc:1}:host([r-sb1=\"11\"]){--rsb:11}:host([r-sa1=\"11\"]){--rsa:11}:host([r-sb1=\"10\"]){--rsb:10}:host([r-sa1=\"10\"]){--rsa:10}:host([r-sb1=\"9\"]){--rsb:9}:host([r-sa1=\"9\"]){--rsa:9}:host([r-sb1=\"8\"]){--rsb:8}:host([r-sa1=\"8\"]){--rsa:8}:host([r-sb1=\"7\"]){--rsb:7}:host([r-sa1=\"7\"]){--rsa:7}:host([r-sb1=\"6\"]){--rsb:6}:host([r-sa1=\"6\"]){--rsa:6}:host([r-sb1=\"5\"]){--rsb:5}:host([r-sa1=\"5\"]){--rsa:5}:host([r-sb1=\"4\"]){--rsb:4}:host([r-sa1=\"4\"]){--rsa:4}:host([r-sb1=\"3\"]){--rsb:3}:host([r-sa1=\"3\"]){--rsa:3}:host([r-sb1=\"2\"]){--rsb:2}:host([r-sa1=\"2\"]){--rsa:2}:host([r-sb1=\"1\"]){--rsb:1}:host([r-sa1=\"1\"]){--rsa:1}:host([r-sb1=\"0\"]){--rsb:0}:host([r-sa1=\"0\"]){--rsa:0}}@media (min-width:768px){:host([r-ta2]){text-align:var(--text-align-medium)}:host([r-d2]){display:var(--display-medium)}:host([r-f2=\"1\"]){font-size:var(--f1)}:host([r-f2=\"2\"]){font-size:var(--f2)}:host([r-f2=\"3\"]){font-size:var(--f3)}:host([r-f2=\"4\"]){font-size:var(--f4)}:host([r-f2=\"5\"]){font-size:var(--f5)}:host([r-f2=\"6\"]){font-size:var(--f6)}.row.gap-medium-1{--gap:var(--d1)}:host([r-p2=\"1\"]){padding:var(--d1)}:host([r-pt2=\"1\"]){padding-top:var(--d1)}:host([r-pl2=\"1\"]){padding-left:var(--d1)}:host([r-pb2=\"1\"]){padding-bottom:var(--d1)}:host([r-pr2=\"1\"]){padding-right:var(--d1)}:host([r-m2=\"1\"]){margin:var(--d1)}:host([r-mt2=\"1\"]){margin-top:var(--d1)}:host([r-ml2=\"1\"]){margin-left:var(--d1)}:host([r-mb2=\"1\"]){margin-bottom:var(--d1)}:host([r-mr2=\"1\"]){margin-right:var(--d1)}.row.gap-medium-2{--gap:var(--d2)}:host([r-p2=\"2\"]){padding:var(--d2)}:host([r-pt2=\"2\"]){padding-top:var(--d2)}:host([r-pl2=\"2\"]){padding-left:var(--d2)}:host([r-pb2=\"2\"]){padding-bottom:var(--d2)}:host([r-pr2=\"2\"]){padding-right:var(--d2)}:host([r-m2=\"2\"]){margin:var(--d2)}:host([r-mt2=\"2\"]){margin-top:var(--d2)}:host([r-ml2=\"2\"]){margin-left:var(--d2)}:host([r-mb2=\"2\"]){margin-bottom:var(--d2)}:host([r-mr2=\"2\"]){margin-right:var(--d2)}.row.gap-medium-3{--gap:var(--d3)}:host([r-p2=\"3\"]){padding:var(--d3)}:host([r-pt2=\"3\"]){padding-top:var(--d3)}:host([r-pl2=\"3\"]){padding-left:var(--d3)}:host([r-pb2=\"3\"]){padding-bottom:var(--d3)}:host([r-pr2=\"3\"]){padding-right:var(--d3)}:host([r-m2=\"3\"]){margin:var(--d3)}:host([r-mt2=\"3\"]){margin-top:var(--d3)}:host([r-ml2=\"3\"]){margin-left:var(--d3)}:host([r-mb2=\"3\"]){margin-bottom:var(--d3)}:host([r-mr2=\"3\"]){margin-right:var(--d3)}.row.gap-medium-4{--gap:var(--d4)}:host([r-p2=\"4\"]){padding:var(--d4)}:host([r-pt2=\"4\"]){padding-top:var(--d4)}:host([r-pl2=\"4\"]){padding-left:var(--d4)}:host([r-pb2=\"4\"]){padding-bottom:var(--d4)}:host([r-pr2=\"4\"]){padding-right:var(--d4)}:host([r-m2=\"4\"]){margin:var(--d4)}:host([r-mt2=\"4\"]){margin-top:var(--d4)}:host([r-ml2=\"4\"]){margin-left:var(--d4)}:host([r-mb2=\"4\"]){margin-bottom:var(--d4)}:host([r-mr2=\"4\"]){margin-right:var(--d4)}.row.gap-medium-5{--gap:var(--d5)}:host([r-p2=\"5\"]){padding:var(--d5)}:host([r-pt2=\"5\"]){padding-top:var(--d5)}:host([r-pl2=\"5\"]){padding-left:var(--d5)}:host([r-pb2=\"5\"]){padding-bottom:var(--d5)}:host([r-pr2=\"5\"]){padding-right:var(--d5)}:host([r-m2=\"5\"]){margin:var(--d5)}:host([r-mt2=\"5\"]){margin-top:var(--d5)}:host([r-ml2=\"5\"]){margin-left:var(--d5)}:host([r-mb2=\"5\"]){margin-bottom:var(--d5)}:host([r-mr2=\"5\"]){margin-right:var(--d5)}.row.gap-medium-6{--gap:var(--d6)}:host([r-p2=\"6\"]){padding:var(--d6)}:host([r-pt2=\"6\"]){padding-top:var(--d6)}:host([r-pl2=\"6\"]){padding-left:var(--d6)}:host([r-pb2=\"6\"]){padding-bottom:var(--d6)}:host([r-pr2=\"6\"]){padding-right:var(--d6)}:host([r-m2=\"6\"]){margin:var(--d6)}:host([r-mt2=\"6\"]){margin-top:var(--d6)}:host([r-ml2=\"6\"]){margin-left:var(--d6)}:host([r-mb2=\"6\"]){margin-bottom:var(--d6)}:host([r-mr2=\"6\"]){margin-right:var(--d6)}:host([r-or2=\"12\"]){order:12}:host([r-c2=\"12\"]){--rc:12}:host([r-or2=\"11\"]){order:11}:host([r-c2=\"11\"]){--rc:11}:host([r-or2=\"10\"]){order:10}:host([r-c2=\"10\"]){--rc:10}:host([r-or2=\"9\"]){order:9}:host([r-c2=\"9\"]){--rc:9}:host([r-or2=\"8\"]){order:8}:host([r-c2=\"8\"]){--rc:8}:host([r-or2=\"7\"]){order:7}:host([r-c2=\"7\"]){--rc:7}:host([r-or2=\"6\"]){order:6}:host([r-c2=\"6\"]){--rc:6}:host([r-or2=\"5\"]){order:5}:host([r-c2=\"5\"]){--rc:5}:host([r-or2=\"4\"]){order:4}:host([r-c2=\"4\"]){--rc:4}:host([r-or2=\"3\"]){order:3}:host([r-c2=\"3\"]){--rc:3}:host([r-or2=\"2\"]){order:2}:host([r-c2=\"2\"]){--rc:2}:host([r-or2=\"1\"]){order:1}:host([r-c2=\"1\"]){--rc:1}:host([r-sb2=\"11\"]){--rsb:11}:host([r-sa2=\"11\"]){--rsa:11}:host([r-sb2=\"10\"]){--rsb:10}:host([r-sa2=\"10\"]){--rsa:10}:host([r-sb2=\"9\"]){--rsb:9}:host([r-sa2=\"9\"]){--rsa:9}:host([r-sb2=\"8\"]){--rsb:8}:host([r-sa2=\"8\"]){--rsa:8}:host([r-sb2=\"7\"]){--rsb:7}:host([r-sa2=\"7\"]){--rsa:7}:host([r-sb2=\"6\"]){--rsb:6}:host([r-sa2=\"6\"]){--rsa:6}:host([r-sb2=\"5\"]){--rsb:5}:host([r-sa2=\"5\"]){--rsa:5}:host([r-sb2=\"4\"]){--rsb:4}:host([r-sa2=\"4\"]){--rsa:4}:host([r-sb2=\"3\"]){--rsb:3}:host([r-sa2=\"3\"]){--rsa:3}:host([r-sb2=\"2\"]){--rsb:2}:host([r-sa2=\"2\"]){--rsa:2}:host([r-sb2=\"1\"]){--rsb:1}:host([r-sa2=\"1\"]){--rsa:1}:host([r-sb2=\"0\"]){--rsb:0}:host([r-sa2=\"0\"]){--rsa:0}}@media (min-width:1024px){:host([r-ta3]){text-align:var(--text-align-large)}:host([r-d3]){display:var(--display-large)}:host([r-f3=\"1\"]){font-size:var(--f1)}:host([r-f3=\"2\"]){font-size:var(--f2)}:host([r-f3=\"3\"]){font-size:var(--f3)}:host([r-f3=\"4\"]){font-size:var(--f4)}:host([r-f3=\"5\"]){font-size:var(--f5)}:host([r-f3=\"6\"]){font-size:var(--f6)}.row.gap-large-1{--gap:var(--d1)}:host([r-p3=\"1\"]){padding:var(--d1)}:host([r-pt3=\"1\"]){padding-top:var(--d1)}:host([r-pl3=\"1\"]){padding-left:var(--d1)}:host([r-pb3=\"1\"]){padding-bottom:var(--d1)}:host([r-pr3=\"1\"]){padding-right:var(--d1)}:host([r-m3=\"1\"]){margin:var(--d1)}:host([r-mt3=\"1\"]){margin-top:var(--d1)}:host([r-ml3=\"1\"]){margin-left:var(--d1)}:host([r-mb3=\"1\"]){margin-bottom:var(--d1)}:host([r-mr3=\"1\"]){margin-right:var(--d1)}.row.gap-large-2{--gap:var(--d2)}:host([r-p3=\"2\"]){padding:var(--d2)}:host([r-pt3=\"2\"]){padding-top:var(--d2)}:host([r-pl3=\"2\"]){padding-left:var(--d2)}:host([r-pb3=\"2\"]){padding-bottom:var(--d2)}:host([r-pr3=\"2\"]){padding-right:var(--d2)}:host([r-m3=\"2\"]){margin:var(--d2)}:host([r-mt3=\"2\"]){margin-top:var(--d2)}:host([r-ml3=\"2\"]){margin-left:var(--d2)}:host([r-mb3=\"2\"]){margin-bottom:var(--d2)}:host([r-mr3=\"2\"]){margin-right:var(--d2)}.row.gap-large-3{--gap:var(--d3)}:host([r-p3=\"3\"]){padding:var(--d3)}:host([r-pt3=\"3\"]){padding-top:var(--d3)}:host([r-pl3=\"3\"]){padding-left:var(--d3)}:host([r-pb3=\"3\"]){padding-bottom:var(--d3)}:host([r-pr3=\"3\"]){padding-right:var(--d3)}:host([r-m3=\"3\"]){margin:var(--d3)}:host([r-mt3=\"3\"]){margin-top:var(--d3)}:host([r-ml3=\"3\"]){margin-left:var(--d3)}:host([r-mb3=\"3\"]){margin-bottom:var(--d3)}:host([r-mr3=\"3\"]){margin-right:var(--d3)}.row.gap-large-4{--gap:var(--d4)}:host([r-p3=\"4\"]){padding:var(--d4)}:host([r-pt3=\"4\"]){padding-top:var(--d4)}:host([r-pl3=\"4\"]){padding-left:var(--d4)}:host([r-pb3=\"4\"]){padding-bottom:var(--d4)}:host([r-pr3=\"4\"]){padding-right:var(--d4)}:host([r-m3=\"4\"]){margin:var(--d4)}:host([r-mt3=\"4\"]){margin-top:var(--d4)}:host([r-ml3=\"4\"]){margin-left:var(--d4)}:host([r-mb3=\"4\"]){margin-bottom:var(--d4)}:host([r-mr3=\"4\"]){margin-right:var(--d4)}.row.gap-large-5{--gap:var(--d5)}:host([r-p3=\"5\"]){padding:var(--d5)}:host([r-pt3=\"5\"]){padding-top:var(--d5)}:host([r-pl3=\"5\"]){padding-left:var(--d5)}:host([r-pb3=\"5\"]){padding-bottom:var(--d5)}:host([r-pr3=\"5\"]){padding-right:var(--d5)}:host([r-m3=\"5\"]){margin:var(--d5)}:host([r-mt3=\"5\"]){margin-top:var(--d5)}:host([r-ml3=\"5\"]){margin-left:var(--d5)}:host([r-mb3=\"5\"]){margin-bottom:var(--d5)}:host([r-mr3=\"5\"]){margin-right:var(--d5)}.row.gap-large-6{--gap:var(--d6)}:host([r-p3=\"6\"]){padding:var(--d6)}:host([r-pt3=\"6\"]){padding-top:var(--d6)}:host([r-pl3=\"6\"]){padding-left:var(--d6)}:host([r-pb3=\"6\"]){padding-bottom:var(--d6)}:host([r-pr3=\"6\"]){padding-right:var(--d6)}:host([r-m3=\"6\"]){margin:var(--d6)}:host([r-mt3=\"6\"]){margin-top:var(--d6)}:host([r-ml3=\"6\"]){margin-left:var(--d6)}:host([r-mb3=\"6\"]){margin-bottom:var(--d6)}:host([r-mr3=\"6\"]){margin-right:var(--d6)}:host([r-or3=\"12\"]){order:12}:host([r-c3=\"12\"]){--rc:12}:host([r-or3=\"11\"]){order:11}:host([r-c3=\"11\"]){--rc:11}:host([r-or3=\"10\"]){order:10}:host([r-c3=\"10\"]){--rc:10}:host([r-or3=\"9\"]){order:9}:host([r-c3=\"9\"]){--rc:9}:host([r-or3=\"8\"]){order:8}:host([r-c3=\"8\"]){--rc:8}:host([r-or3=\"7\"]){order:7}:host([r-c3=\"7\"]){--rc:7}:host([r-or3=\"6\"]){order:6}:host([r-c3=\"6\"]){--rc:6}:host([r-or3=\"5\"]){order:5}:host([r-c3=\"5\"]){--rc:5}:host([r-or3=\"4\"]){order:4}:host([r-c3=\"4\"]){--rc:4}:host([r-or3=\"3\"]){order:3}:host([r-c3=\"3\"]){--rc:3}:host([r-or3=\"2\"]){order:2}:host([r-c3=\"2\"]){--rc:2}:host([r-or3=\"1\"]){order:1}:host([r-c3=\"1\"]){--rc:1}:host([r-sb3=\"11\"]){--rsb:11}:host([r-sa3=\"11\"]){--rsa:11}:host([r-sb3=\"10\"]){--rsb:10}:host([r-sa3=\"10\"]){--rsa:10}:host([r-sb3=\"9\"]){--rsb:9}:host([r-sa3=\"9\"]){--rsa:9}:host([r-sb3=\"8\"]){--rsb:8}:host([r-sa3=\"8\"]){--rsa:8}:host([r-sb3=\"7\"]){--rsb:7}:host([r-sa3=\"7\"]){--rsa:7}:host([r-sb3=\"6\"]){--rsb:6}:host([r-sa3=\"6\"]){--rsa:6}:host([r-sb3=\"5\"]){--rsb:5}:host([r-sa3=\"5\"]){--rsa:5}:host([r-sb3=\"4\"]){--rsb:4}:host([r-sa3=\"4\"]){--rsa:4}:host([r-sb3=\"3\"]){--rsb:3}:host([r-sa3=\"3\"]){--rsa:3}:host([r-sb3=\"2\"]){--rsb:2}:host([r-sa3=\"2\"]){--rsa:2}:host([r-sb3=\"1\"]){--rsb:1}:host([r-sa3=\"1\"]){--rsa:1}:host([r-sb3=\"0\"]){--rsb:0}:host([r-sa3=\"0\"]){--rsa:0}}@media (min-width:1280px){:host([r-ta4]){text-align:var(--text-align-xlarge)}:host([r-d4]){display:var(--display-xlarge)}:host([r-f4=\"1\"]){font-size:var(--f1)}:host([r-f4=\"2\"]){font-size:var(--f2)}:host([r-f4=\"3\"]){font-size:var(--f3)}:host([r-f4=\"4\"]){font-size:var(--f4)}:host([r-f4=\"5\"]){font-size:var(--f5)}:host([r-f4=\"6\"]){font-size:var(--f6)}.row.gap-xlarge-1{--gap:var(--d1)}:host([r-p4=\"1\"]){padding:var(--d1)}:host([r-pt4=\"1\"]){padding-top:var(--d1)}:host([r-pl4=\"1\"]){padding-left:var(--d1)}:host([r-pb4=\"1\"]){padding-bottom:var(--d1)}:host([r-pr4=\"1\"]){padding-right:var(--d1)}:host([r-m4=\"1\"]){margin:var(--d1)}:host([r-mt4=\"1\"]){margin-top:var(--d1)}:host([r-ml4=\"1\"]){margin-left:var(--d1)}:host([r-mb4=\"1\"]){margin-bottom:var(--d1)}:host([r-mr4=\"1\"]){margin-right:var(--d1)}.row.gap-xlarge-2{--gap:var(--d2)}:host([r-p4=\"2\"]){padding:var(--d2)}:host([r-pt4=\"2\"]){padding-top:var(--d2)}:host([r-pl4=\"2\"]){padding-left:var(--d2)}:host([r-pb4=\"2\"]){padding-bottom:var(--d2)}:host([r-pr4=\"2\"]){padding-right:var(--d2)}:host([r-m4=\"2\"]){margin:var(--d2)}:host([r-mt4=\"2\"]){margin-top:var(--d2)}:host([r-ml4=\"2\"]){margin-left:var(--d2)}:host([r-mb4=\"2\"]){margin-bottom:var(--d2)}:host([r-mr4=\"2\"]){margin-right:var(--d2)}.row.gap-xlarge-3{--gap:var(--d3)}:host([r-p4=\"3\"]){padding:var(--d3)}:host([r-pt4=\"3\"]){padding-top:var(--d3)}:host([r-pl4=\"3\"]){padding-left:var(--d3)}:host([r-pb4=\"3\"]){padding-bottom:var(--d3)}:host([r-pr4=\"3\"]){padding-right:var(--d3)}:host([r-m4=\"3\"]){margin:var(--d3)}:host([r-mt4=\"3\"]){margin-top:var(--d3)}:host([r-ml4=\"3\"]){margin-left:var(--d3)}:host([r-mb4=\"3\"]){margin-bottom:var(--d3)}:host([r-mr4=\"3\"]){margin-right:var(--d3)}.row.gap-xlarge-4{--gap:var(--d4)}:host([r-p4=\"4\"]){padding:var(--d4)}:host([r-pt4=\"4\"]){padding-top:var(--d4)}:host([r-pl4=\"4\"]){padding-left:var(--d4)}:host([r-pb4=\"4\"]){padding-bottom:var(--d4)}:host([r-pr4=\"4\"]){padding-right:var(--d4)}:host([r-m4=\"4\"]){margin:var(--d4)}:host([r-mt4=\"4\"]){margin-top:var(--d4)}:host([r-ml4=\"4\"]){margin-left:var(--d4)}:host([r-mb4=\"4\"]){margin-bottom:var(--d4)}:host([r-mr4=\"4\"]){margin-right:var(--d4)}.row.gap-xlarge-5{--gap:var(--d5)}:host([r-p4=\"5\"]){padding:var(--d5)}:host([r-pt4=\"5\"]){padding-top:var(--d5)}:host([r-pl4=\"5\"]){padding-left:var(--d5)}:host([r-pb4=\"5\"]){padding-bottom:var(--d5)}:host([r-pr4=\"5\"]){padding-right:var(--d5)}:host([r-m4=\"5\"]){margin:var(--d5)}:host([r-mt4=\"5\"]){margin-top:var(--d5)}:host([r-ml4=\"5\"]){margin-left:var(--d5)}:host([r-mb4=\"5\"]){margin-bottom:var(--d5)}:host([r-mr4=\"5\"]){margin-right:var(--d5)}.row.gap-xlarge-6{--gap:var(--d6)}:host([r-p4=\"6\"]){padding:var(--d6)}:host([r-pt4=\"6\"]){padding-top:var(--d6)}:host([r-pl4=\"6\"]){padding-left:var(--d6)}:host([r-pb4=\"6\"]){padding-bottom:var(--d6)}:host([r-pr4=\"6\"]){padding-right:var(--d6)}:host([r-m4=\"6\"]){margin:var(--d6)}:host([r-mt4=\"6\"]){margin-top:var(--d6)}:host([r-ml4=\"6\"]){margin-left:var(--d6)}:host([r-mb4=\"6\"]){margin-bottom:var(--d6)}:host([r-mr4=\"6\"]){margin-right:var(--d6)}:host([r-or4=\"12\"]){order:12}:host([r-c4=\"12\"]){--rc:12}:host([r-or4=\"11\"]){order:11}:host([r-c4=\"11\"]){--rc:11}:host([r-or4=\"10\"]){order:10}:host([r-c4=\"10\"]){--rc:10}:host([r-or4=\"9\"]){order:9}:host([r-c4=\"9\"]){--rc:9}:host([r-or4=\"8\"]){order:8}:host([r-c4=\"8\"]){--rc:8}:host([r-or4=\"7\"]){order:7}:host([r-c4=\"7\"]){--rc:7}:host([r-or4=\"6\"]){order:6}:host([r-c4=\"6\"]){--rc:6}:host([r-or4=\"5\"]){order:5}:host([r-c4=\"5\"]){--rc:5}:host([r-or4=\"4\"]){order:4}:host([r-c4=\"4\"]){--rc:4}:host([r-or4=\"3\"]){order:3}:host([r-c4=\"3\"]){--rc:3}:host([r-or4=\"2\"]){order:2}:host([r-c4=\"2\"]){--rc:2}:host([r-or4=\"1\"]){order:1}:host([r-c4=\"1\"]){--rc:1}:host([r-sb4=\"11\"]){--rsb:11}:host([r-sa4=\"11\"]){--rsa:11}:host([r-sb4=\"10\"]){--rsb:10}:host([r-sa4=\"10\"]){--rsa:10}:host([r-sb4=\"9\"]){--rsb:9}:host([r-sa4=\"9\"]){--rsa:9}:host([r-sb4=\"8\"]){--rsb:8}:host([r-sa4=\"8\"]){--rsa:8}:host([r-sb4=\"7\"]){--rsb:7}:host([r-sa4=\"7\"]){--rsa:7}:host([r-sb4=\"6\"]){--rsb:6}:host([r-sa4=\"6\"]){--rsa:6}:host([r-sb4=\"5\"]){--rsb:5}:host([r-sa4=\"5\"]){--rsa:5}:host([r-sb4=\"4\"]){--rsb:4}:host([r-sa4=\"4\"]){--rsa:4}:host([r-sb4=\"3\"]){--rsb:3}:host([r-sa4=\"3\"]){--rsa:3}:host([r-sb4=\"2\"]){--rsb:2}:host([r-sa4=\"2\"]){--rsa:2}:host([r-sb4=\"1\"]){--rsb:1}:host([r-sa4=\"1\"]){--rsa:1}:host([r-sb4=\"0\"]){--rsb:0}:host([r-sa4=\"0\"]){--rsa:0}}", sheet = new CSSStyleSheet();
|
|
2
2
|
sheet.replaceSync(grid_default);
|
|
3
3
|
var grid_style_default = sheet;
|
|
4
4
|
const GlobalValues = [
|
|
@@ -28,7 +28,8 @@ const GlobalValues = [
|
|
|
28
28
|
"display",
|
|
29
29
|
"text-align",
|
|
30
30
|
"order",
|
|
31
|
-
"
|
|
31
|
+
"skip-before",
|
|
32
|
+
"skip-after",
|
|
32
33
|
"gap",
|
|
33
34
|
"padding",
|
|
34
35
|
"font"
|
|
@@ -79,32 +80,33 @@ const GlobalValues = [
|
|
|
79
80
|
"large",
|
|
80
81
|
"xlarge",
|
|
81
82
|
"xxlarge"
|
|
82
|
-
], isElemAttribute = (e) => ObservedElemAttributes.includes(e), isGridAttribute = (e) => ObservedGridAttributes.includes(e),
|
|
83
|
+
], isElemAttribute = (e) => ObservedElemAttributes.includes(e), isGridAttribute = (e) => ObservedGridAttributes.includes(e), isTextAlignValue = (e) => TextAlignValues.includes(e), isDisplayValue = (e) => DisplayValues.includes(e);
|
|
83
84
|
var getValidNumber = (e) => {
|
|
84
|
-
let
|
|
85
|
-
return
|
|
85
|
+
let S = parseInt(e.trim());
|
|
86
|
+
return S === void 0 ? null : String(S);
|
|
86
87
|
}, getValidDisplay = (e) => {
|
|
87
|
-
let
|
|
88
|
-
return isDisplayValue(
|
|
88
|
+
let S = e.trim().toLowerCase();
|
|
89
|
+
return isDisplayValue(S) ? S : null;
|
|
89
90
|
}, getValidDimension = (e) => {
|
|
90
|
-
let
|
|
91
|
-
return
|
|
91
|
+
let S = e.trim().toLowerCase();
|
|
92
|
+
return DimensionSizes.includes(S) ? String(DimensionSizes.indexOf(S)) : null;
|
|
92
93
|
}, getValidTextAlign = (e) => {
|
|
93
|
-
let
|
|
94
|
-
return isTextAlignValue(
|
|
94
|
+
let S = e.trim().toLowerCase();
|
|
95
|
+
return isTextAlignValue(S) ? S : null;
|
|
95
96
|
}, getValidFont = (e) => {
|
|
96
|
-
let
|
|
97
|
-
return
|
|
97
|
+
let S = e.trim().toLowerCase();
|
|
98
|
+
return FontSizes.includes(S) ? String(FontSizes.indexOf(S)) : null;
|
|
98
99
|
};
|
|
99
100
|
const getGridAttributeValue = {
|
|
100
101
|
row: "boolean",
|
|
101
102
|
cell: "boolean",
|
|
102
103
|
"text-align": getValidTextAlign,
|
|
104
|
+
"skip-before": getValidNumber,
|
|
105
|
+
"skip-after": getValidNumber,
|
|
103
106
|
col: getValidNumber,
|
|
104
107
|
gap: getValidDimension,
|
|
105
108
|
font: getValidFont,
|
|
106
109
|
order: getValidNumber,
|
|
107
|
-
offset: getValidNumber,
|
|
108
110
|
display: getValidDisplay,
|
|
109
111
|
padding: getValidDimension
|
|
110
112
|
}, getElemAttributeValue = {
|
|
@@ -121,61 +123,87 @@ const getGridAttributeValue = {
|
|
|
121
123
|
"padding-right": getValidDimension,
|
|
122
124
|
"padding-bottom": getValidDimension,
|
|
123
125
|
"padding-left": getValidDimension
|
|
124
|
-
},
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
126
|
+
}, gridAttrShort = {
|
|
127
|
+
font: "f",
|
|
128
|
+
padding: "p",
|
|
129
|
+
display: "d",
|
|
130
|
+
row: "row",
|
|
131
|
+
cell: "cell",
|
|
132
|
+
col: "c",
|
|
133
|
+
gap: "g",
|
|
134
|
+
order: "or",
|
|
135
|
+
"skip-before": "sb",
|
|
136
|
+
"skip-after": "sa",
|
|
137
|
+
"text-align": "ta"
|
|
138
|
+
}, elmAttrShort = {
|
|
139
|
+
font: "f",
|
|
140
|
+
margin: "m",
|
|
141
|
+
padding: "p",
|
|
142
|
+
display: "d",
|
|
143
|
+
"text-align": "ta",
|
|
144
|
+
"margin-top": "mt",
|
|
145
|
+
"margin-right": "mr",
|
|
146
|
+
"margin-bottom": "mb",
|
|
147
|
+
"margin-left": "ml",
|
|
148
|
+
"padding-top": "pt",
|
|
149
|
+
"padding-right": "pr",
|
|
150
|
+
"padding-bottom": "pb",
|
|
151
|
+
"padding-left": "pl"
|
|
152
|
+
}, getClasses = (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}`);
|
|
131
159
|
});
|
|
132
160
|
}
|
|
133
|
-
return
|
|
134
|
-
}, getHostAttributes = (e, C, w) => {
|
|
161
|
+
return w;
|
|
162
|
+
}, getHostAttributes = (e, S, C, w) => {
|
|
135
163
|
let T = {};
|
|
136
|
-
for (let E of e) if (MediaSizes.forEach((e) => {
|
|
137
|
-
T[`
|
|
138
|
-
}),
|
|
139
|
-
let e =
|
|
140
|
-
e === "boolean" ? T[`
|
|
141
|
-
let D = MediaSizes[
|
|
142
|
-
D && O && (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);
|
|
143
171
|
});
|
|
144
172
|
}
|
|
145
173
|
return Object.entries(T);
|
|
146
|
-
}, getHostCSS = (e,
|
|
147
|
-
let
|
|
148
|
-
for (let
|
|
149
|
-
|
|
150
|
-
}),
|
|
151
|
-
let e =
|
|
152
|
-
e !== "boolean" &&
|
|
153
|
-
let
|
|
154
|
-
|
|
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);
|
|
155
183
|
});
|
|
156
184
|
}
|
|
157
|
-
return Object.entries(
|
|
185
|
+
return Object.entries(w);
|
|
158
186
|
};
|
|
159
187
|
var GridElement = class extends HTMLElement {
|
|
160
188
|
static observedAttributes = ObservedGridAttributes;
|
|
161
189
|
attr = {};
|
|
162
190
|
mainSlot = () => this.shadowRoot?.querySelector("slot") || null;
|
|
163
|
-
container = () => this.shadowRoot?.
|
|
191
|
+
container = () => this.shadowRoot?.firstElementChild || null;
|
|
164
192
|
constructor() {
|
|
165
193
|
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [grid_style_default];
|
|
166
194
|
}
|
|
167
195
|
detectRowChange() {
|
|
168
|
-
let e = this.mainSlot(),
|
|
169
|
-
if (!e || !
|
|
170
|
-
let
|
|
171
|
-
return
|
|
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;
|
|
172
200
|
}
|
|
173
201
|
detectCellChange() {
|
|
174
|
-
let e = this.parentElement?.matches("r-grid"),
|
|
175
|
-
return
|
|
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;
|
|
176
204
|
}
|
|
177
|
-
attributeChangedCallback(e,
|
|
178
|
-
isGridAttribute(e) && (this.attr[e] =
|
|
205
|
+
attributeChangedCallback(e, S, C) {
|
|
206
|
+
isGridAttribute(e) && (this.attr[e] = C, this.render());
|
|
179
207
|
}
|
|
180
208
|
connectedMoveCallback() {
|
|
181
209
|
this.detectCellChange();
|
|
@@ -184,17 +212,20 @@ var GridElement = class extends HTMLElement {
|
|
|
184
212
|
this.mainSlot()?.addEventListener("slotchange", () => {
|
|
185
213
|
this.detectRowChange() && this.render();
|
|
186
214
|
}), this.render();
|
|
187
|
-
let e = this.detectRowChange(),
|
|
188
|
-
(e ||
|
|
215
|
+
let e = this.detectRowChange(), S = this.detectCellChange();
|
|
216
|
+
(e || S) && this.render();
|
|
189
217
|
}
|
|
190
218
|
render() {
|
|
191
|
-
let e = getClasses(
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
219
|
+
let e = getClasses(["row", "gap"], this.attr, getGridAttributeValue), S = getHostAttributes(ObservedGridAttributes, this.attr, getGridAttributeValue, gridAttrShort), C = getHostCSS(["display", "text-align"], this.attr, getGridAttributeValue);
|
|
220
|
+
"skip-before" in this.attr && console.log({
|
|
221
|
+
hostAttributes: S,
|
|
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);
|
|
196
227
|
}), this.shadowRoot.innerHTML = `
|
|
197
|
-
<div class="
|
|
228
|
+
<div class="${e.join(" ")}"><slot></slot></div>
|
|
198
229
|
`;
|
|
199
230
|
}
|
|
200
231
|
};
|
|
@@ -205,18 +236,18 @@ var ResponsiveElement = class extends HTMLElement {
|
|
|
205
236
|
constructor() {
|
|
206
237
|
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [grid_style_default];
|
|
207
238
|
}
|
|
208
|
-
attributeChangedCallback(e,
|
|
209
|
-
isElemAttribute(e) && (this.attr[e] =
|
|
239
|
+
attributeChangedCallback(e, S, C) {
|
|
240
|
+
isElemAttribute(e) && (this.attr[e] = C, this.render());
|
|
210
241
|
}
|
|
211
242
|
connectedCallback() {
|
|
212
243
|
this.render();
|
|
213
244
|
}
|
|
214
245
|
render() {
|
|
215
|
-
let e = getHostAttributes(ObservedElemAttributes, this.attr, getElemAttributeValue);
|
|
216
|
-
getHostCSS(["display", "text-align"], this.attr, getElemAttributeValue).forEach(([e,
|
|
217
|
-
|
|
218
|
-
}), e.forEach(([e,
|
|
219
|
-
|
|
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);
|
|
220
251
|
}), this.shadowRoot.innerHTML = "<slot></slot>";
|
|
221
252
|
}
|
|
222
253
|
};
|
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>","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';\n@use 'sass:math';\n\n$mediaSizes: (\n small: 0px,\n medium: 768px,\n large: 1024px,\n xlarge: 1280px,\n);\n$dimensions:\n 'none', 'small', 'medium', 'large', 'xlarge', 'xxlarge', 'small-', 'medium-', 'large-', 'xlarge-',\n 'xxlarge-';\n$fonts: 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\n\n:host {\n --dim-none: var(--grid-dim-none, 0px);\n --dim-small: var(--grid-dim-small, 4px);\n --dim-medium: var(--grid-dim-medium, 8px);\n --dim-large: var(--grid-dim-large, 16px);\n --dim-xlarge: var(--grid-dim-xlarge, 32px);\n --dim-xxlarge: var(--grid-dim-xxlarge, 64px);\n --dim-small-: var(--grid-dim-small-, -4px);\n --dim-medium-: var(--grid-dim-medium-, -8px);\n --dim-large-: var(--grid-dim-large-, -16px);\n --dim-xlarge-: var(--grid-dim-xlarge-, -32px);\n --dim-xxlarge-: var(--grid-dim-xxlarge-, -64px);\n --font-xsmall: var(--grid-font-xsmall, 12px);\n --font-small: var(--grid-font-small, 14px);\n --font-medium: var(--grid-font-medium, 16px);\n --font-large: var(--grid-font-large, 24px);\n --font-xlarge: var(--grid-font-xlarge, 32px);\n --font-xxlarge: var(--grid-font-xxlarge, 40px);\n display: block;\n box-sizing: border-box !important;\n}\n\nslot {\n display: contents !important;\n}\n\n.row {\n box-sizing: border-box;\n justify-content: flex-start;\n gap: var(--gap);\n --gap: 0px;\n flex-flow: wrap;\n margin: 0;\n padding: 0;\n display: flex;\n}\n\n.cell {\n box-sizing: border-box;\n}\n\n:host([data-cell]) {\n flex: auto;\n}\n\n:host([data-col-small]),\n:host([data-col-medium]),\n:host([data-col-large]),\n:host([data-col-xlarge]) {\n flex: 100%;\n max-width: calc(((var(--columns) / 12) * 100%) - var(--gap) * (calc((12 - var(--columns)) / 12)));\n}\n\n:host([data-offset-small]),\n:host([data-offset-medium]),\n:host([data-offset-large]),\n:host([data-offset-xlarge]) {\n margin-left: calc(((var(--offset) / 12) * 100%) + var(--gap) * (calc(var(--offset) / 12)));\n}\n\n@each $mediaName, $mediaSize in $mediaSizes {\n @media (min-width: #{$mediaSize}) {\n :host([data-text-align-#{$mediaName}]) {\n text-align: var(--text-align-#{$mediaName});\n }\n :host([data-display-#{$mediaName}]) {\n display: var(--display-#{$mediaName});\n }\n\n @each $font in $fonts {\n :host([data-font-#{$mediaName}='#{$font}']) {\n font-size: var(--font-#{$font});\n }\n }\n @each $dimension in $dimensions {\n .row.gap-#{$mediaName}-#{$dimension} {\n --gap: var(--dim-#{$dimension});\n }\n :host([data-padding-#{$mediaName}='#{$dimension}']) {\n padding: var(--dim-#{$dimension});\n }\n :host([data-padding-top-#{$mediaName}='#{$dimension}']) {\n padding-top: var(--dim-#{$dimension});\n }\n :host([data-padding-left-#{$mediaName}='#{$dimension}']) {\n padding-left: var(--dim-#{$dimension});\n }\n :host([data-padding-bottom-#{$mediaName}='#{$dimension}']) {\n padding-bottom: var(--dim-#{$dimension});\n }\n :host([data-padding-right-#{$mediaName}='#{$dimension}']) {\n padding-right: var(--dim-#{$dimension});\n }\n :host([data-margin-#{$mediaName}='#{$dimension}']) {\n margin: var(--dim-#{$dimension});\n }\n :host([data-margin-top-#{$mediaName}='#{$dimension}']) {\n margin-top: var(--dim-#{$dimension});\n }\n :host([data-margin-left-#{$mediaName}='#{$dimension}']) {\n margin-left: var(--dim-#{$dimension});\n }\n :host([data-margin-bottom-#{$mediaName}='#{$dimension}']) {\n margin-bottom: var(--dim-#{$dimension});\n }\n :host([data-margin-right-#{$mediaName}='#{$dimension}']) {\n margin-right: var(--dim-#{$dimension});\n }\n }\n\n @for $i from 12 through 1 {\n :host([data-order-#{$mediaName}='#{$i}']) {\n order: #{$i};\n }\n :host([data-col-#{$mediaName}='#{$i}']) {\n --columns: #{$i};\n }\n :host([data-offset-#{$mediaName}='#{$i}']) {\n --offset: #{$i};\n }\n }\n }\n}\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 ContainerClass = 'grid-element' as const;\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 'offset',\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 isDimensionSize = (size: string): size is DimensionSize =>\r\n DimensionSizes.includes(size as DimensionSize);\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 ? 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): DimensionSize | null => {\r\n const value = val.trim().toLowerCase();\r\n return isDimensionSize(value) ? value : 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): FontSize | null => {\r\n const value = val.trim().toLowerCase();\r\n return isFontSize(value) ? value : 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 col: getValidNumber,\r\n gap: getValidDimension,\r\n font: getValidFont,\r\n order: getValidNumber,\r\n offset: 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 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) => {\r\n const hostAttributes: Record<string, string | undefined> = {};\r\n\r\n for (const attr of attrNames) {\r\n MediaSizes.forEach((mediaSize) => {\r\n hostAttributes[`data-${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 hostAttributes[`data-${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[`data-${attr}-${mediaSize}`] = 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 ContainerClass,\r\n getClasses,\r\n getGridAttributeValue as getValues,\r\n getHostAttributes,\r\n isGridAttribute,\r\n ObservedGridAttributes as Attributes,\r\n getHostCSS,\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} 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} offset - set element's column offset for each breakpoint (Integers)\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 =>\r\n this.shadowRoot?.querySelector(`.${ContainerClass}`) || 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(Attributes, this.attr, getValues);\r\n const hostAttributes = getHostAttributes(Attributes, this.attr, getValues);\r\n const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n hostCSS.forEach(([attr, value]) => {\r\n if (value) this.style.setProperty(attr, value);\r\n if (value === undefined) this.style.removeProperty(attr);\r\n });\r\n\r\n hostAttributes.forEach(([attr, value]) => {\r\n if (value) this.setAttribute(attr, value);\r\n if (value === undefined) this.removeAttribute(attr);\r\n });\r\n\r\n this.shadowRoot!.innerHTML = `\r\n <div class=\"${ContainerClass} ${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} 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);\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\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":"kqlBCEM,QAAQ,IAAI,eAAe;AACjC,MAAM,YAAY,aAAW;AAE7B,IAAA,qBAAe;ACFf,MAAa,eAAe;CAAC;CAAW;CAAW;CAAU;CAAgB;CAAQ,EAExE,yBAAyB;CACpC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACY,yBAAyB;CACpC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACY,aAAa;CAAC;CAAS;CAAU;CAAS;CAAS,EACnD,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACY,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACJ,EACY,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACY,YAAY;CAAC;CAAU;CAAS;CAAU;CAAS;CAAU;CAAU,EAUvE,mBAAmB,MAC9B,uBAAuB,SAAS,EAA8B,EAEnD,mBAAmB,MAC9B,uBAAuB,SAAS,EAA8B,EAEnD,oBAAoB,MAC/B,gBAAgB,SAAS,EAAwB,EAEtC,kBAAkB,MAC7B,cAAc,SAAS,EAAsB;AAI/C,IAAM,kBAAkB,MAA+B;CACrD,IAAM,IAAQ,SAAS,EAAI,MAAM,CAAC;AAClC,QAAO,MAAU,KAAA,IAA4B,OAAhB,OAAO,EAAM;GAGtC,mBAAmB,MAA+B;CACtD,IAAM,IAAQ,EAAI,MAAM,CAAC,aAAa;AACtC,QAAO,eAAe,EAAM,GAAG,IAAQ;GAGnC,qBAAqB,MAA+B;CACxD,IAAM,IAAQ,EAAI,MAAM,CAAC,aAAa;AACtC,QAAO,eAAe,SAAS,EAAuB,GAClD,OAAO,eAAe,QAAQ,EAAuB,CAAC,GACtD;GAGA,qBAAqB,MAAuC;CAChE,IAAM,IAAQ,EAAI,MAAM,CAAC,aAAa;AACtC,QAAO,iBAAiB,EAAM,GAAG,IAAQ;GAGrC,gBAAgB,MAA+B;CACnD,IAAM,IAAQ,EAAI,MAAM,CAAC,aAAa;AACtC,QAAO,UAAU,SAAS,EAAkB,GACxC,OAAO,UAAU,QAAQ,EAAkB,CAAC,GAC5C;;AAMN,MAAaA,wBAAgE;CAC3E,KAAK;CACL,MAAM;CACN,cAAc;CACd,eAAe;CACf,cAAc;CACd,KAAK;CACL,KAAK;CACL,MAAM;CACN,OAAO;CACP,SAAS;CACT,SAAS;CACV,EAEYC,wBAAgE;CAC3E,MAAM;CACN,QAAQ;CACR,SAAS;CACT,SAAS;CACT,cAAc;CACd,cAAc;CACd,gBAAgB;CAChB,iBAAiB;CACjB,eAAe;CACf,eAAe;CACf,iBAAiB;CACjB,kBAAkB;CAClB,gBAAgB;CACjB,EAEYC,gBAAuD;CAClE,MAAM;CACN,SAAS;CACT,SAAS;CACT,KAAK;CACL,MAAM;CACN,KAAK;CACL,KAAK;CACL,OAAO;CACP,eAAe;CACf,cAAc;CACd,cAAc;CACf,EAEYC,eAAsD;CACjE,MAAM;CACN,QAAQ;CACR,SAAS;CACT,SAAS;CACT,cAAc;CACd,cAAc;CACd,gBAAgB;CAChB,iBAAiB;CACjB,eAAe;CACf,eAAe;CACf,iBAAiB;CACjB,kBAAkB;CAClB,gBAAgB;CACjB,EAEY,cACX,GACA,GACA,MACG;CACH,IAAMC,IAAoB,EAAE;AAC5B,MAAK,IAAM,KAAQ,EACjB,KAAI,EAAM,OAAU,KAAA,GAAW;EAC7B,IAAM,IAAa,EAAY;AAC/B,EAAI,MAAe,YACjB,EAAQ,KAAK,GAAG,IAAO,GAER,EAAM,GAAM,MAAM,IAAI,CAAC,OAAO,QAAQ,CAC9C,SAAS,GAAK,MAAM;GACzB,IAAM,IAAY,WAAW,IACvB,IAAQ,EAAW,EAAI;AAC7B,GAAI,KAAa,KACf,EAAQ,KAAK,GAAG,EAAK,GAAG,EAAU,GAAG,IAAQ;IAE/C;;AAKR,QAAO;GAGI,qBACX,GACA,GACA,GACA,MACG;CACH,IAAMC,IAAqD,EAAE;AAE7D,MAAK,IAAM,KAAQ,EAKjB,KAJA,WAAW,SAAS,GAAY,MAAM;AACpC,IAAe,KAAK,EAAM,KAAQ,IAAI,OAAO,KAAA;GAC7C,EAEE,EAAM,OAAU,KAAA,GAAW;EAC7B,IAAM,IAAa,EAAY;AAC/B,EAAI,MAAe,YACjB,EAAe,KAAK,OAAU,IAEf,EAAM,GAAM,MAAM,IAAI,CAAC,OAAO,QAAQ,CAC9C,SAAS,GAAK,MAAM;GACzB,IAAM,IAAY,WAAW,IACvB,IAAQ,EAAW,EAAI;AAC7B,GAAI,KAAa,MACf,EAAe,KAAK,EAAM,KAAQ,IAAI,OAAO;IAE/C;;AAKR,QAAO,OAAO,QAAQ,EAAe;GAG1B,cACX,GACA,GACA,MACG;CACH,IAAMC,IAA8C,EAAE;AAEtD,MAAK,IAAM,KAAQ,EAKjB,KAJA,WAAW,SAAS,MAAc;AAChC,IAAQ,KAAK,EAAK,GAAG,OAAe,KAAA;GACpC,EAEE,EAAM,OAAU,KAAA,GAAW;EAC7B,IAAM,IAAa,EAAY;AAC/B,EAAI,MAAe,aACF,EAAM,GAAM,MAAM,IAAI,CAAC,OAAO,QAAQ,CAC9C,SAAS,GAAK,MAAM;GACzB,IAAM,IAAY,WAAW,IACvB,IAAQ,EAAW,EAAI;AAC7B,GAAI,KAAa,MACf,EAAQ,KAAK,EAAK,GAAG,OAAe;IAEtC;;AAKR,QAAO,OAAO,QAAQ,EAAQ;;ACnPhC,IAAa,cAAb,cAAiC,YAAY;CAC3C,OAAO,qBAAqB;CAK5B,OAA6C,EAAE;CAK/C,iBACE,KAAK,YAAY,cAAc,OAAO,IAAI;CAI5C,kBAAmD,KAAK,YAAY,qBAAqB;CAEzF,cAAc;AAGZ,EAFA,OAAO,EACP,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC,EACnC,KAAK,WAAY,qBAAqB,CAAC,mBAAM;;CAM/C,kBAA0B;EACxB,IAAM,IAAO,KAAK,UAAU,EACtB,IAAY,KAAK,WAAW;AAElC,MAAI,CAAC,KAAQ,CAAC,EAAW;EAGzB,IAAM,IADU,EAAK,kBAAkB,CACjB,MAAM,MAAO,EAAG,QAAQ,SAAS,CAAC,EAClD,IAAW,KAAK,KAAK,QAAQ,SAAS,GACtC,IAAc,KAAK,KAAK,QAAQ,SAAS,CAAC;AAIhD,SAFI,MAAU,KAAK,KAAK,MAAM,QAC1B,KAAa,OAAO,KAAK,KAAK,KAC3B,KAAY;;CAMrB,mBAA2B;EACzB,IAAM,IAAS,KAAK,eAAe,QAAQ,SAAS,EAC9C,IAAY,KAAK,KAAK,SAAS,UAAU,GACzC,IAAe,KAAK,KAAK,SAAS,UAAU,CAAC;AAInD,SAFI,MAAW,KAAK,KAAK,OAAO,SAC5B,KAAc,OAAO,KAAK,KAAK,MAC5B,KAAa;;CAGtB,yBAAyB,GAAc,GAAc,GAAe;AAClE,EAAI,gBAAgB,EAAK,KACvB,KAAK,KAAK,KAAQ,GAClB,KAAK,QAAQ;;CAOjB,wBAAwB;AACtB,OAAK,kBAAkB;;CAGzB,oBAAoB;AAKlB,EAJA,KAAK,UAAU,EAAE,iBAAiB,oBAAoB;AACpD,GAAI,KAAK,iBAAiB,IAAE,KAAK,QAAQ;IACzC,EAEF,KAAK,QAAQ;EACb,IAAM,IAAe,KAAK,iBAAiB,EACrC,IAAgB,KAAK,kBAAkB;AAC7C,GAAI,KAAgB,MAAe,KAAK,QAAQ;;CAGlD,SAAS;EACP,IAAM,IAAU,WAAW,CAAC,OAAO,MAAM,EAAE,KAAK,MAAM,sBAAU,EAC1D,IAAiB,kBAAkB,wBAAY,KAAK,MAAM,uBAAW,cAAc,EACnF,IAAU,WAAW,CAAC,WAAW,aAAa,EAAE,KAAK,MAAM,sBAAU;AAe3E,EAbI,iBAAiB,KAAK,QACxB,QAAQ,IAAI;GAAE;GAAgB,MAAM,KAAK;GAAM,CAAC,EAElD,EAAQ,SAAS,CAAC,GAAM,OAAW;AAEjC,GADI,KAAO,KAAK,MAAM,YAAY,GAAM,EAAM,EAC1C,MAAU,KAAA,KAAW,KAAK,MAAM,eAAe,EAAK;IACxD,EAEF,EAAe,SAAS,CAAC,GAAM,OAAW;AAExC,GADI,KAAO,KAAK,aAAa,GAAM,EAAM,EACrC,MAAU,KAAA,KAAW,KAAK,gBAAgB,EAAK;IACnD,EAEF,KAAK,WAAY,YAAY;oBACb,EAAQ,KAAK,IAAI,CAAC;;;;AAKtC,eAAe,OAAO,UAAU,YAAY;ACtG5C,IAAa,oBAAb,cAAuC,YAAY;CACjD,OAAO,qBAAqB;CAC5B,OAA6C,EAAE;CAE/C,cAAc;AAGZ,EAFA,OAAO,EACP,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC,EACnC,KAAK,WAAY,qBAAqB,CAAC,mBAAM;;CAG/C,yBAAyB,GAAc,GAAc,GAAe;AAClE,EAAI,gBAAgB,EAAK,KACvB,KAAK,KAAK,KAAQ,GAClB,KAAK,QAAQ;;CAIjB,oBAAoB;AAClB,OAAK,QAAQ;;CAGf,SAAS;EACP,IAAM,IAAiB,kBAAkB,wBAAY,KAAK,MAAM,uBAAW,aAAa;AAaxF,EAZgB,WAAW,CAAC,WAAW,aAAa,EAAE,KAAK,MAAM,sBAAU,CAEnE,SAAS,CAAC,GAAM,OAAW;AAEjC,GADI,KAAO,KAAK,MAAM,YAAY,GAAM,EAAM,EAC1C,MAAU,KAAA,KAAW,KAAK,MAAM,eAAe,EAAK;IACxD,EAEF,EAAe,SAAS,CAAC,GAAM,OAAW;AAExC,GADI,KAAO,KAAK,aAAa,GAAM,EAAM,EACrC,MAAU,KAAA,KAAW,KAAK,gBAAgB,EAAK;IACnD,EAEF,KAAK,WAAY,YAAY;;;AAIjC,eAAe,OAAO,aAAa,kBAAkB"}
|
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.
|
|
4
|
+
"version": "1.0.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist"
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
"module": "./dist/r-grid.es.js",
|
|
11
11
|
"scripts": {
|
|
12
12
|
"dev": "vite",
|
|
13
|
-
"build": "
|
|
13
|
+
"build-manifest": "custom-elements-manifest analyze",
|
|
14
|
+
"build": "tsc && npm run build-manifest && vite build",
|
|
14
15
|
"preview": "vite preview"
|
|
15
16
|
},
|
|
16
17
|
"devDependencies": {
|