wj-elements
Version:
WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.
39 lines (38 loc) • 22.9 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import WJElement from "./wje-element.js";
const styles = "/*\n[ WJ Col ]\n*/\n:host {\n display: block;\n flex-grow: 1;\n width: 100%;\n max-width: 100%;\n padding-right: calc(var(--wje-gutter-x) * 0.5);\n padding-left: calc(var(--wje-gutter-x) * 0.5);\n margin-top: var(--wje-gutter-y);\n}\n\n:host(.wje-col) {\n flex: 1 0 0%;\n}\n\n:host(.wje-row-cols-auto) > * {\n flex: 0 0 auto;\n width: auto;\n}\n\n:host(.wje-row-cols-1) > * {\n flex: 0 0 auto;\n width: 100%;\n}\n\n:host(.wje-row-cols-2) > * {\n flex: 0 0 auto;\n width: 50%;\n}\n\n:host(.wje-row-cols-3) > * {\n flex: 0 0 auto;\n width: 33.3333333333%;\n}\n\n:host(.wje-row-cols-4) > * {\n flex: 0 0 auto;\n width: 25%;\n}\n\n:host(.wje-row-cols-5) > * {\n flex: 0 0 auto;\n width: 20%;\n}\n\n:host(.wje-row-cols-6) > * {\n flex: 0 0 auto;\n width: 16.6666666667%;\n}\n\n@media (min-width: 576px) {\n :host(.wje-col-sm) {\n flex: 1 0 0%;\n }\n :host(.wje-row-cols-sm-auto) > * {\n flex: 0 0 auto;\n width: auto;\n }\n :host(.wje-row-cols-sm-1) > * {\n flex: 0 0 auto;\n width: 100%;\n }\n :host(.wje-row-cols-sm-2) > * {\n flex: 0 0 auto;\n width: 50%;\n }\n :host(.wje-row-cols-sm-3) > * {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n :host(.wje-row-cols-sm-4) > * {\n flex: 0 0 auto;\n width: 25%;\n }\n :host(.wje-row-cols-sm-5) > * {\n flex: 0 0 auto;\n width: 20%;\n }\n :host(.wje-row-cols-sm-6) > * {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n@media (min-width: 768px) {\n :host(.wje-col-md) {\n flex: 1 0 0%;\n }\n :host(.wje-row-cols-md-auto) > * {\n flex: 0 0 auto;\n width: auto;\n }\n :host(.wje-row-cols-md-1) > * {\n flex: 0 0 auto;\n width: 100%;\n }\n :host(.wje-row-cols-md-2) > * {\n flex: 0 0 auto;\n width: 50%;\n }\n :host(.wje-row-cols-md-3) > * {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n :host(.wje-row-cols-md-4) > * {\n flex: 0 0 auto;\n width: 25%;\n }\n :host(.wje-row-cols-md-5) > * {\n flex: 0 0 auto;\n width: 20%;\n }\n :host(.wje-row-cols-md-6) > * {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n@media (min-width: 992px) {\n :host(.wje-col-lg) {\n flex: 1 0 0%;\n }\n :host(.wje-row-cols-lg-auto) > * {\n flex: 0 0 auto;\n width: auto;\n }\n :host(.wje-row-cols-lg-1) > * {\n flex: 0 0 auto;\n width: 100%;\n }\n :host(.wje-row-cols-lg-2) > * {\n flex: 0 0 auto;\n width: 50%;\n }\n :host(.wje-row-cols-lg-3) > * {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n :host(.wje-row-cols-lg-4) > * {\n flex: 0 0 auto;\n width: 25%;\n }\n :host(.wje-row-cols-lg-5) > * {\n flex: 0 0 auto;\n width: 20%;\n }\n :host(.wje-row-cols-lg-6) > * {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n@media (min-width: 1200px) {\n :host(.wje-col-xl) {\n flex: 1 0 0%;\n }\n :host(.wje-row-cols-xl-auto) > * {\n flex: 0 0 auto;\n width: auto;\n }\n :host(.wje-row-cols-xl-1) > * {\n flex: 0 0 auto;\n width: 100%;\n }\n :host(.wje-row-cols-xl-2) > * {\n flex: 0 0 auto;\n width: 50%;\n }\n :host(.wje-row-cols-xl-3) > * {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n :host(.wje-row-cols-xl-4) > * {\n flex: 0 0 auto;\n width: 25%;\n }\n :host(.wje-row-cols-xl-5) > * {\n flex: 0 0 auto;\n width: 20%;\n }\n :host(.wje-row-cols-xl-6) > * {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n@media (min-width: 1400px) {\n :host(.wje-col-xxl) {\n flex: 1 0 0%;\n }\n :host(.wje-row-cols-xxl-auto) > * {\n flex: 0 0 auto;\n width: auto;\n }\n :host(.wje-row-cols-xxl-1) > * {\n flex: 0 0 auto;\n width: 100%;\n }\n :host(.wje-row-cols-xxl-2) > * {\n flex: 0 0 auto;\n width: 50%;\n }\n :host(.wje-row-cols-xxl-3) > * {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n :host(.wje-row-cols-xxl-4) > * {\n flex: 0 0 auto;\n width: 25%;\n }\n :host(.wje-row-cols-xxl-5) > * {\n flex: 0 0 auto;\n width: 20%;\n }\n :host(.wje-row-cols-xxl-6) > * {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n:host(.wje-col-auto) {\n flex: 0 0 auto;\n width: auto;\n}\n\n:host(.wje-col-1) {\n flex: 0 0 auto;\n width: 8.33333333%;\n}\n\n:host(.wje-col-2) {\n flex: 0 0 auto;\n width: 16.66666667%;\n}\n\n:host(.wje-col-3) {\n flex: 0 0 auto;\n width: 25%;\n}\n\n:host(.wje-col-4) {\n flex: 0 0 auto;\n width: 33.33333333%;\n}\n\n:host(.wje-col-5) {\n flex: 0 0 auto;\n width: 41.66666667%;\n}\n\n:host(.wje-col-6) {\n flex: 0 0 auto;\n width: 50%;\n}\n\n:host(.wje-col-7) {\n flex: 0 0 auto;\n width: 58.33333333%;\n}\n\n:host(.wje-col-8) {\n flex: 0 0 auto;\n width: 66.66666667%;\n}\n\n:host(.wje-col-9) {\n flex: 0 0 auto;\n width: 75%;\n}\n\n:host(.wje-col-10) {\n flex: 0 0 auto;\n width: 83.33333333%;\n}\n\n:host(.wje-col-11) {\n flex: 0 0 auto;\n width: 91.66666667%;\n}\n\n:host(.wje-col-12) {\n flex: 0 0 auto;\n width: 100%;\n}\n\n:host(.wje-offset-1) {\n margin-left: 8.33333333%;\n}\n\n:host(.wje-offset-2) {\n margin-left: 16.66666667%;\n}\n\n:host(.wje-offset-3) {\n margin-left: 25%;\n}\n\n:host(.wje-offset-4) {\n margin-left: 33.33333333%;\n}\n\n:host(.wje-offset-5) {\n margin-left: 41.66666667%;\n}\n\n:host(.wje-offset-6) {\n margin-left: 50%;\n}\n\n:host(.wje-offset-7) {\n margin-left: 58.33333333%;\n}\n\n:host(.wje-offset-8) {\n margin-left: 66.66666667%;\n}\n\n:host(.wje-offset-9) {\n margin-left: 75%;\n}\n\n:host(.wje-offset-10) {\n margin-left: 83.33333333%;\n}\n\n:host(.wje-offset-11) {\n margin-left: 91.66666667%;\n}\n\n.g-0,\n.gx-0 {\n --wje-gutter-x: 0;\n}\n\n.g-0,\n.gy-0 {\n --wje-gutter-y: 0;\n}\n\n.g-1,\n.gx-1 {\n --wje-gutter-x: 0.25rem;\n}\n\n.g-1,\n.gy-1 {\n --wje-gutter-y: 0.25rem;\n}\n\n.g-2,\n.gx-2 {\n --wje-gutter-x: 0.5rem;\n}\n\n.g-2,\n.gy-2 {\n --wje-gutter-y: 0.5rem;\n}\n\n.g-3,\n.gx-3 {\n --wje-gutter-x: 1rem;\n}\n\n.g-3,\n.gy-3 {\n --wje-gutter-y: 1rem;\n}\n\n.g-4,\n.gx-4 {\n --wje-gutter-x: 1.5rem;\n}\n\n.g-4,\n.gy-4 {\n --wje-gutter-y: 1.5rem;\n}\n\n.g-5,\n.gx-5 {\n --wje-gutter-x: 3rem;\n}\n\n.g-5,\n.gy-5 {\n --wje-gutter-y: 3rem;\n}\n\n@media (min-width: 576px) {\n :host(.wje-col-sm-auto) {\n flex: 0 0 auto;\n width: auto;\n }\n :host(.wje-col-sm-1) {\n flex: 0 0 auto;\n width: 8.33333333%;\n }\n :host(.wje-col-sm-2) {\n flex: 0 0 auto;\n width: 16.66666667%;\n }\n :host(.wje-col-sm-3) {\n flex: 0 0 auto;\n width: 25%;\n }\n :host(.wje-col-sm-4) {\n flex: 0 0 auto;\n width: 33.33333333%;\n }\n :host(.wje-col-sm-5) {\n flex: 0 0 auto;\n width: 41.66666667%;\n }\n :host(.wje-col-sm-6) {\n flex: 0 0 auto;\n width: 50%;\n }\n :host(.wje-col-sm-7) {\n flex: 0 0 auto;\n width: 58.33333333%;\n }\n :host(.wje-col-sm-8) {\n flex: 0 0 auto;\n width: 66.66666667%;\n }\n :host(.wje-col-sm-9) {\n flex: 0 0 auto;\n width: 75%;\n }\n :host(.wje-col-sm-10) {\n flex: 0 0 auto;\n width: 83.33333333%;\n }\n :host(.wje-col-sm-11) {\n flex: 0 0 auto;\n width: 91.66666667%;\n }\n :host(.wje-col-sm-12) {\n flex: 0 0 auto;\n width: 100%;\n }\n :host(.wje-offset-sm-0) {\n margin-left: 0;\n }\n :host(.wje-offset-sm-1) {\n margin-left: 8.33333333%;\n }\n :host(.wje-offset-sm-2) {\n margin-left: 16.66666667%;\n }\n :host(.wje-offset-sm-3) {\n margin-left: 25%;\n }\n :host(.wje-offset-sm-4) {\n margin-left: 33.33333333%;\n }\n :host(.wje-offset-sm-5) {\n margin-left: 41.66666667%;\n }\n :host(.wje-offset-sm-6) {\n margin-left: 50%;\n }\n :host(.wje-offset-sm-7) {\n margin-left: 58.33333333%;\n }\n :host(.wje-offset-sm-8) {\n margin-left: 66.66666667%;\n }\n :host(.wje-offset-sm-9) {\n margin-left: 75%;\n }\n :host(.wje-offset-sm-10) {\n margin-left: 83.33333333%;\n }\n :host(.wje-offset-sm-11) {\n margin-left: 91.66666667%;\n }\n .g-sm-0,\n .gx-sm-0 {\n --wje-gutter-x: 0;\n }\n .g-sm-0,\n .gy-sm-0 {\n --wje-gutter-y: 0;\n }\n .g-sm-1,\n .gx-sm-1 {\n --wje-gutter-x: 0.25rem;\n }\n .g-sm-1,\n .gy-sm-1 {\n --wje-gutter-y: 0.25rem;\n }\n .g-sm-2,\n .gx-sm-2 {\n --wje-gutter-x: 0.5rem;\n }\n .g-sm-2,\n .gy-sm-2 {\n --wje-gutter-y: 0.5rem;\n }\n .g-sm-3,\n .gx-sm-3 {\n --wje-gutter-x: 1rem;\n }\n .g-sm-3,\n .gy-sm-3 {\n --wje-gutter-y: 1rem;\n }\n .g-sm-4,\n .gx-sm-4 {\n --wje-gutter-x: 1.5rem;\n }\n .g-sm-4,\n .gy-sm-4 {\n --wje-gutter-y: 1.5rem;\n }\n .g-sm-5,\n .gx-sm-5 {\n --wje-gutter-x: 3rem;\n }\n .g-sm-5,\n .gy-sm-5 {\n --wje-gutter-y: 3rem;\n }\n}\n@media (min-width: 768px) {\n :host(.wje-col-md-auto) {\n flex: 0 0 auto;\n width: auto;\n }\n :host(.wje-col-md-1) {\n flex: 0 0 auto;\n width: 8.33333333%;\n }\n :host(.wje-col-md-2) {\n flex: 0 0 auto;\n width: 16.66666667%;\n }\n :host(.wje-col-md-3) {\n flex: 0 0 auto;\n width: 25%;\n }\n :host(.wje-col-md-4) {\n flex: 0 0 auto;\n width: 33.33333333%;\n }\n :host(.wje-col-md-5) {\n flex: 0 0 auto;\n width: 41.66666667%;\n }\n :host(.wje-col-md-6) {\n flex: 0 0 auto;\n width: 50%;\n }\n :host(.wje-col-md-7) {\n flex: 0 0 auto;\n width: 58.33333333%;\n }\n :host(.wje-col-md-8) {\n flex: 0 0 auto;\n width: 66.66666667%;\n }\n :host(.wje-col-md-9) {\n flex: 0 0 auto;\n width: 75%;\n }\n :host(.wje-col-md-10) {\n flex: 0 0 auto;\n width: 83.33333333%;\n }\n :host(.wje-col-md-11) {\n flex: 0 0 auto;\n width: 91.66666667%;\n }\n :host(.wje-col-md-12) {\n flex: 0 0 auto;\n width: 100%;\n }\n :host(.wje-offset-md-0) {\n margin-left: 0;\n }\n :host(.wje-offset-md-1) {\n margin-left: 8.33333333%;\n }\n :host(.wje-offset-md-2) {\n margin-left: 16.66666667%;\n }\n :host(.wje-offset-md-3) {\n margin-left: 25%;\n }\n :host(.wje-offset-md-4) {\n margin-left: 33.33333333%;\n }\n :host(.wje-offset-md-5) {\n margin-left: 41.66666667%;\n }\n :host(.wje-offset-md-6) {\n margin-left: 50%;\n }\n :host(.wje-offset-md-7) {\n margin-left: 58.33333333%;\n }\n :host(.wje-offset-md-8) {\n margin-left: 66.66666667%;\n }\n :host(.wje-offset-md-9) {\n margin-left: 75%;\n }\n :host(.wje-offset-md-10) {\n margin-left: 83.33333333%;\n }\n :host(.wje-offset-md-11) {\n margin-left: 91.66666667%;\n }\n .g-md-0,\n .gx-md-0 {\n --wje-gutter-x: 0;\n }\n .g-md-0,\n .gy-md-0 {\n --wje-gutter-y: 0;\n }\n .g-md-1,\n .gx-md-1 {\n --wje-gutter-x: 0.25rem;\n }\n .g-md-1,\n .gy-md-1 {\n --wje-gutter-y: 0.25rem;\n }\n .g-md-2,\n .gx-md-2 {\n --wje-gutter-x: 0.5rem;\n }\n .g-md-2,\n .gy-md-2 {\n --wje-gutter-y: 0.5rem;\n }\n .g-md-3,\n .gx-md-3 {\n --wje-gutter-x: 1rem;\n }\n .g-md-3,\n .gy-md-3 {\n --wje-gutter-y: 1rem;\n }\n .g-md-4,\n .gx-md-4 {\n --wje-gutter-x: 1.5rem;\n }\n .g-md-4,\n .gy-md-4 {\n --wje-gutter-y: 1.5rem;\n }\n .g-md-5,\n .gx-md-5 {\n --wje-gutter-x: 3rem;\n }\n .g-md-5,\n .gy-md-5 {\n --wje-gutter-y: 3rem;\n }\n}\n@media (min-width: 992px) {\n :host(.wje-col-lg-auto) {\n flex: 0 0 auto;\n width: auto;\n }\n :host(.wje-col-lg-1) {\n flex: 0 0 auto;\n width: 8.33333333%;\n }\n :host(.wje-col-lg-2) {\n flex: 0 0 auto;\n width: 16.66666667%;\n }\n :host(.wje-col-lg-3) {\n flex: 0 0 auto;\n width: 25%;\n }\n :host(.wje-col-lg-4) {\n flex: 0 0 auto;\n width: 33.33333333%;\n }\n :host(.wje-col-lg-5) {\n flex: 0 0 auto;\n width: 41.66666667%;\n }\n :host(.wje-col-lg-6) {\n flex: 0 0 auto;\n width: 50%;\n }\n :host(.wje-col-lg-7) {\n flex: 0 0 auto;\n width: 58.33333333%;\n }\n :host(.wje-col-lg-8) {\n flex: 0 0 auto;\n width: 66.66666667%;\n }\n :host(.wje-col-lg-9) {\n flex: 0 0 auto;\n width: 75%;\n }\n :host(.wje-col-lg-10) {\n flex: 0 0 auto;\n width: 83.33333333%;\n }\n :host(.wje-col-lg-11) {\n flex: 0 0 auto;\n width: 91.66666667%;\n }\n :host(.wje-col-lg-12) {\n flex: 0 0 auto;\n width: 100%;\n }\n :host(.wje-offset-lg-0) {\n margin-left: 0;\n }\n :host(.wje-offset-lg-1) {\n margin-left: 8.33333333%;\n }\n :host(.wje-offset-lg-2) {\n margin-left: 16.66666667%;\n }\n :host(.wje-offset-lg-3) {\n margin-left: 25%;\n }\n :host(.wje-offset-lg-4) {\n margin-left: 33.33333333%;\n }\n :host(.wje-offset-lg-5) {\n margin-left: 41.66666667%;\n }\n :host(.wje-offset-lg-6) {\n margin-left: 50%;\n }\n :host(.wje-offset-lg-7) {\n margin-left: 58.33333333%;\n }\n :host(.wje-offset-lg-8) {\n margin-left: 66.66666667%;\n }\n :host(.wje-offset-lg-9) {\n margin-left: 75%;\n }\n :host(.wje-offset-lg-10) {\n margin-left: 83.33333333%;\n }\n :host(.wje-offset-lg-11) {\n margin-left: 91.66666667%;\n }\n .g-lg-0,\n .gx-lg-0 {\n --wje-gutter-x: 0;\n }\n .g-lg-0,\n .gy-lg-0 {\n --wje-gutter-y: 0;\n }\n .g-lg-1,\n .gx-lg-1 {\n --wje-gutter-x: 0.25rem;\n }\n .g-lg-1,\n .gy-lg-1 {\n --wje-gutter-y: 0.25rem;\n }\n .g-lg-2,\n .gx-lg-2 {\n --wje-gutter-x: 0.5rem;\n }\n .g-lg-2,\n .gy-lg-2 {\n --wje-gutter-y: 0.5rem;\n }\n .g-lg-3,\n .gx-lg-3 {\n --wje-gutter-x: 1rem;\n }\n .g-lg-3,\n .gy-lg-3 {\n --wje-gutter-y: 1rem;\n }\n .g-lg-4,\n .gx-lg-4 {\n --wje-gutter-x: 1.5rem;\n }\n .g-lg-4,\n .gy-lg-4 {\n --wje-gutter-y: 1.5rem;\n }\n .g-lg-5,\n .gx-lg-5 {\n --wje-gutter-x: 3rem;\n }\n .g-lg-5,\n .gy-lg-5 {\n --wje-gutter-y: 3rem;\n }\n}\n@media (min-width: 1200px) {\n :host(.wje-col-xl-auto) {\n flex: 0 0 auto;\n width: auto;\n }\n :host(.wje-col-xl-1) {\n flex: 0 0 auto;\n width: 8.33333333%;\n }\n :host(.wje-col-xl-2) {\n flex: 0 0 auto;\n width: 16.66666667%;\n }\n :host(.wje-col-xl-3) {\n flex: 0 0 auto;\n width: 25%;\n }\n :host(.wje-col-xl-4) {\n flex: 0 0 auto;\n width: 33.33333333%;\n }\n :host(.wje-col-xl-5) {\n flex: 0 0 auto;\n width: 41.66666667%;\n }\n :host(.wje-col-xl-6) {\n flex: 0 0 auto;\n width: 50%;\n }\n :host(.wje-col-xl-7) {\n flex: 0 0 auto;\n width: 58.33333333%;\n }\n :host(.wje-col-xl-8) {\n flex: 0 0 auto;\n width: 66.66666667%;\n }\n :host(.wje-col-xl-9) {\n flex: 0 0 auto;\n width: 75%;\n }\n :host(.wje-col-xl-10) {\n flex: 0 0 auto;\n width: 83.33333333%;\n }\n :host(.wje-col-xl-11) {\n flex: 0 0 auto;\n width: 91.66666667%;\n }\n :host(.wje-col-xl-12) {\n flex: 0 0 auto;\n width: 100%;\n }\n :host(.wje-offset-xl-0) {\n margin-left: 0;\n }\n :host(.wje-offset-xl-1) {\n margin-left: 8.33333333%;\n }\n :host(.wje-offset-xl-2) {\n margin-left: 16.66666667%;\n }\n :host(.wje-offset-xl-3) {\n margin-left: 25%;\n }\n :host(.wje-offset-xl-4) {\n margin-left: 33.33333333%;\n }\n :host(.wje-offset-xl-5) {\n margin-left: 41.66666667%;\n }\n :host(.wje-offset-xl-6) {\n margin-left: 50%;\n }\n :host(.wje-offset-xl-7) {\n margin-left: 58.33333333%;\n }\n :host(.wje-offset-xl-8) {\n margin-left: 66.66666667%;\n }\n :host(.wje-offset-xl-9) {\n margin-left: 75%;\n }\n :host(.wje-offset-xl-10) {\n margin-left: 83.33333333%;\n }\n :host(.wje-offset-xl-11) {\n margin-left: 91.66666667%;\n }\n .g-xl-0,\n .gx-xl-0 {\n --wje-gutter-x: 0;\n }\n .g-xl-0,\n .gy-xl-0 {\n --wje-gutter-y: 0;\n }\n .g-xl-1,\n .gx-xl-1 {\n --wje-gutter-x: 0.25rem;\n }\n .g-xl-1,\n .gy-xl-1 {\n --wje-gutter-y: 0.25rem;\n }\n .g-xl-2,\n .gx-xl-2 {\n --wje-gutter-x: 0.5rem;\n }\n .g-xl-2,\n .gy-xl-2 {\n --wje-gutter-y: 0.5rem;\n }\n .g-xl-3,\n .gx-xl-3 {\n --wje-gutter-x: 1rem;\n }\n .g-xl-3,\n .gy-xl-3 {\n --wje-gutter-y: 1rem;\n }\n .g-xl-4,\n .gx-xl-4 {\n --wje-gutter-x: 1.5rem;\n }\n .g-xl-4,\n .gy-xl-4 {\n --wje-gutter-y: 1.5rem;\n }\n .g-xl-5,\n .gx-xl-5 {\n --wje-gutter-x: 3rem;\n }\n .g-xl-5,\n .gy-xl-5 {\n --wje-gutter-y: 3rem;\n }\n}\n@media (min-width: 1400px) {\n :host(.wje-col-xxl-auto) {\n flex: 0 0 auto;\n width: auto;\n }\n :host(.wje-col-xxl-1) {\n flex: 0 0 auto;\n width: 8.33333333%;\n }\n :host(.wje-col-xxl-2) {\n flex: 0 0 auto;\n width: 16.66666667%;\n }\n :host(.wje-col-xxl-3) {\n flex: 0 0 auto;\n width: 25%;\n }\n :host(.wje-col-xxl-4) {\n flex: 0 0 auto;\n width: 33.33333333%;\n }\n :host(.wje-col-xxl-5) {\n flex: 0 0 auto;\n width: 41.66666667%;\n }\n :host(.wje-col-xxl-6) {\n flex: 0 0 auto;\n width: 50%;\n }\n :host(.wje-col-xxl-7) {\n flex: 0 0 auto;\n width: 58.33333333%;\n }\n :host(.wje-col-xxl-8) {\n flex: 0 0 auto;\n width: 66.66666667%;\n }\n :host(.wje-col-xxl-9) {\n flex: 0 0 auto;\n width: 75%;\n }\n :host(.wje-col-xxl-10) {\n flex: 0 0 auto;\n width: 83.33333333%;\n }\n :host(.wje-col-xxl-11) {\n flex: 0 0 auto;\n width: 91.66666667%;\n }\n :host(.wje-col-xxl-12) {\n flex: 0 0 auto;\n width: 100%;\n }\n :host(.wje-offset-xxl-0) {\n margin-left: 0;\n }\n :host(.wje-offset-xxl-1) {\n margin-left: 8.33333333%;\n }\n :host(.wje-offset-xxl-2) {\n margin-left: 16.66666667%;\n }\n :host(.wje-offset-xxl-3) {\n margin-left: 25%;\n }\n :host(.wje-offset-xxl-4) {\n margin-left: 33.33333333%;\n }\n :host(.wje-offset-xxl-5) {\n margin-left: 41.66666667%;\n }\n :host(.wje-offset-xxl-6) {\n margin-left: 50%;\n }\n :host(.wje-offset-xxl-7) {\n margin-left: 58.33333333%;\n }\n :host(.wje-offset-xxl-8) {\n margin-left: 66.66666667%;\n }\n :host(.wje-offset-xxl-9) {\n margin-left: 75%;\n }\n :host(.wje-offset-xxl-10) {\n margin-left: 83.33333333%;\n }\n :host(.wje-offset-xxl-11) {\n margin-left: 91.66666667%;\n }\n .g-xxl-0,\n .gx-xxl-0 {\n --wje-gutter-x: 0;\n }\n .g-xxl-0,\n .gy-xxl-0 {\n --wje-gutter-y: 0;\n }\n .g-xxl-1,\n .gx-xxl-1 {\n --wje-gutter-x: 0.25rem;\n }\n .g-xxl-1,\n .gy-xxl-1 {\n --wje-gutter-y: 0.25rem;\n }\n .g-xxl-2,\n .gx-xxl-2 {\n --wje-gutter-x: 0.5rem;\n }\n .g-xxl-2,\n .gy-xxl-2 {\n --wje-gutter-y: 0.5rem;\n }\n .g-xxl-3,\n .gx-xxl-3 {\n --wje-gutter-x: 1rem;\n }\n .g-xxl-3,\n .gy-xxl-3 {\n --wje-gutter-y: 1rem;\n }\n .g-xxl-4,\n .gx-xxl-4 {\n --wje-gutter-x: 1.5rem;\n }\n .g-xxl-4,\n .gy-xxl-4 {\n --wje-gutter-y: 1.5rem;\n }\n .g-xxl-5,\n .gx-xxl-5 {\n --wje-gutter-x: 3rem;\n }\n .g-xxl-5,\n .gy-xxl-5 {\n --wje-gutter-y: 3rem;\n }\n}\n:host(.some-other-value-first) {\n order: -1 !important;\n}\n\n:host(.some-other-value-0) {\n order: 0 !important;\n}\n\n:host(.some-other-value-1) {\n order: 1 !important;\n}\n\n:host(.some-other-value-2) {\n order: 2 !important;\n}\n\n:host(.some-other-value-3) {\n order: 3 !important;\n}\n\n:host(.some-other-value-4) {\n order: 4 !important;\n}\n\n:host(.some-other-value-5) {\n order: 5 !important;\n}\n\n:host(.some-other-value-last) {\n order: 6 !important;\n}\n\n:host(.some-other-value-sm-first) {\n order: -1 !important;\n}\n\n:host(.some-other-value-sm-0) {\n order: 0 !important;\n}\n\n:host(.some-other-value-sm-1) {\n order: 1 !important;\n}\n\n:host(.some-other-value-sm-2) {\n order: 2 !important;\n}\n\n:host(.some-other-value-sm-3) {\n order: 3 !important;\n}\n\n:host(.some-other-value-sm-4) {\n order: 4 !important;\n}\n\n:host(.some-other-value-sm-5) {\n order: 5 !important;\n}\n\n:host(.some-other-value-sm-last) {\n order: 6 !important;\n}\n\n:host(.some-other-value-md-first) {\n order: -1 !important;\n}\n\n:host(.some-other-value-md-0) {\n order: 0 !important;\n}\n\n:host(.some-other-value-md-1) {\n order: 1 !important;\n}\n\n:host(.some-other-value-md-2) {\n order: 2 !important;\n}\n\n:host(.some-other-value-md-3) {\n order: 3 !important;\n}\n\n:host(.some-other-value-md-4) {\n order: 4 !important;\n}\n\n:host(.some-other-value-md-5) {\n order: 5 !important;\n}\n\n:host(.some-other-value-md-last) {\n order: 6 !important;\n}\n\n:host(.some-other-value-lg-first) {\n order: -1 !important;\n}\n\n:host(.some-other-value-lg-0) {\n order: 0 !important;\n}\n\n:host(.some-other-value-lg-1) {\n order: 1 !important;\n}\n\n:host(.some-other-value-lg-2) {\n order: 2 !important;\n}\n\n:host(.some-other-value-lg-3) {\n order: 3 !important;\n}\n\n:host(.some-other-value-lg-4) {\n order: 4 !important;\n}\n\n:host(.some-other-value-lg-5) {\n order: 5 !important;\n}\n\n:host(.some-other-value-lg-last) {\n order: 6 !important;\n}\n\n:host(.some-other-value-xl-first) {\n order: -1 !important;\n}\n\n:host(.some-other-value-xl-0) {\n order: 0 !important;\n}\n\n:host(.some-other-value-xl-1) {\n order: 1 !important;\n}\n\n:host(.some-other-value-xl-2) {\n order: 2 !important;\n}\n\n:host(.some-other-value-xl-3) {\n order: 3 !important;\n}\n\n:host(.some-other-value-xl-4) {\n order: 4 !important;\n}\n\n:host(.some-other-value-xl-5) {\n order: 5 !important;\n}\n\n:host(.some-other-value-xl-last) {\n order: 6 !important;\n}\n\n:host(.some-other-value-xxl-first) {\n order: -1 !important;\n}\n\n:host(.some-other-value-xxl-0) {\n order: 0 !important;\n}\n\n:host(.some-other-value-xxl-1) {\n order: 1 !important;\n}\n\n:host(.some-other-value-xxl-2) {\n order: 2 !important;\n}\n\n:host(.some-other-value-xxl-3) {\n order: 3 !important;\n}\n\n:host(.some-other-value-xxl-4) {\n order: 4 !important;\n}\n\n:host(.some-other-value-xxl-5) {\n order: 5 !important;\n}\n\n:host(.some-other-value-xxl-last) {\n order: 6 !important;\n}";
class Col extends WJElement {
constructor() {
super();
__publicField(this, "className", "Col");
}
static get cssStyleSheet() {
return styles;
}
setupAttributes() {
this.isShadowRoot = "open";
}
/**
* Draws the component element.
* @returns {DocumentFragment}
*/
draw() {
let fragment = document.createDocumentFragment();
let element = document.createElement("slot");
if (this.order) this.classList.add("order-" + this.order);
if (this.size) this.classList.add("wje-col-" + this.size);
if (this.sizeSm) this.classList.add("wje-col-sm-" + this.sizeSm);
if (this.sizeMd) this.classList.add("wje-col-md-" + this.sizeMd);
if (this.offset) this.classList.add("wje-offset-" + this.offset);
if (this.offsetSm) this.classList.add("wje-offset-sm-" + this.offsetSm);
fragment.appendChild(element);
return fragment;
}
}
WJElement.define("wje-col", Col);
export {
Col as default
};
//# sourceMappingURL=wje-col.js.map