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.
55 lines (54 loc) • 6.05 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[ Grid ]\n*/\n:host {\n width: 100%;\n flex-grow: 0;\n}\n\n/*\n[ Row ]\n*/\nwje-row {\n display: flex;\n flex-wrap: wrap;\n}\n\nwje-row {\n --wje-gutter-x: 1.5rem;\n --wje-gutter-y: 0;\n display: flex;\n flex-wrap: wrap;\n margin-top: calc(var(--wje-gutter-y) * -1);\n margin-right: calc(var(--wje-gutter-x) * -0.5);\n margin-left: calc(var(--wje-gutter-x) * -0.5);\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 .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 .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 .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 .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 .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}";
class Grid extends WJElement {
/**
* Constructor for the Grid class.
*/
constructor() {
super();
/**
* The class name for the Grid class.
* @type {string}
*/
__publicField(this, "className", "Grid");
}
/**
* Getter for the CSS stylesheet.
* @returns {*}
*/
static get cssStyleSheet() {
return styles;
}
/**
* Getter for the observed attributes.
* @returns {*[]}
*/
static get observedAttributes() {
return [];
}
/**
* Sets up the attributes for the Grid.
*/
setupAttributes() {
this.isShadowRoot = "open";
}
/**
* Draws the Grid element.
* @returns {DocumentFragment}
*/
draw() {
let fragment = document.createDocumentFragment();
let element = document.createElement("slot");
if (this.color) this.classList.add("wje-color-" + this.color, "wje-color");
fragment.appendChild(element);
return fragment;
}
}
Grid.define("wje-grid", Grid);
export {
Grid as default
};
//# sourceMappingURL=wje-grid.js.map