container-css 0.3.0

package/container-box.js

@@ -0,0 +1,830 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
+const breakpoints = {
+    sm: '30rem',
+    md: '48rem',
+    lg: '62rem',
+    xl: '80rem',
+    '2xl': '96rem',
+};
+let ContainerBox = class ContainerBox extends LitElement {
+    formatWidth(value) {
+        const keywords = ['auto', 'full', 'min-content', 'max-content'];
+        if (keywords.includes(value)) {
+            return value === 'full' ? '100%' : value;
+        }
+        return `${value}rem`;
+    }
+    buildWrapperStyles() {
+        const styles = [];
+        if (this.p)
+            styles.push(`padding: ${this.p}rem;`);
+        if (this.pt)
+            styles.push(`padding-top: ${this.pt}rem;`);
+        if (this.pr)
+            styles.push(`padding-right: ${this.pr}rem;`);
+        if (this.pb)
+            styles.push(`padding-bottom: ${this.pb}rem;`);
+        if (this.pl)
+            styles.push(`padding-left: ${this.pl}rem;`);
+        if (this.bg)
+            styles.push(`background-color: ${this.bg};`);
+        if (this.borderW)
+            styles.push(`border-width: ${this.borderW}px;`);
+        if (this.borderStyle)
+            styles.push(`border-style: ${this.borderStyle};`);
+        if (this.borderColor)
+            styles.push(`border-color: ${this.borderColor};`);
+        if (this.borderTopW)
+            styles.push(`border-top-width: ${this.borderTopW}px;`);
+        if (this.borderTopStyle)
+            styles.push(`border-top-style: ${this.borderTopStyle};`);
+        if (this.borderTopColor)
+            styles.push(`border-top-color: ${this.borderTopColor};`);
+        if (this.borderRightW)
+            styles.push(`border-right-width: ${this.borderRightW}px;`);
+        if (this.borderRightStyle)
+            styles.push(`border-right-style: ${this.borderRightStyle};`);
+        if (this.borderRightColor)
+            styles.push(`border-right-color: ${this.borderRightColor};`);
+        if (this.borderBottomW)
+            styles.push(`border-bottom-width: ${this.borderBottomW}px;`);
+        if (this.borderBottomStyle)
+            styles.push(`border-bottom-style: ${this.borderBottomStyle};`);
+        if (this.borderBottomColor)
+            styles.push(`border-bottom-color: ${this.borderBottomColor};`);
+        if (this.borderLeftW)
+            styles.push(`border-left-width: ${this.borderLeftW}px;`);
+        if (this.borderLeftStyle)
+            styles.push(`border-left-style: ${this.borderLeftStyle};`);
+        if (this.borderLeftColor)
+            styles.push(`border-left-color: ${this.borderLeftColor};`);
+        if (this.borderRadius)
+            styles.push(`border-radius: ${this.borderRadius}px;`);
+        return styles.join(' ');
+    }
+    buildHostStyles() {
+        const styles = [];
+        if (this.flex)
+            styles.push(`flex: ${this.flex};`);
+        if (this.w)
+            styles.push(`width: ${this.formatWidth(this.w)};`);
+        if (this.minW)
+            styles.push(`min-width: ${this.formatWidth(this.minW)};`);
+        if (this.maxW)
+            styles.push(`max-width: ${this.formatWidth(this.maxW)};`);
+        return styles.join(' ');
+    }
+    buildMediaQueries() {
+        let mediaStyles = '';
+        const breakpointProps = [
+            {
+                breakpoint: 'sm',
+                minWidth: breakpoints.sm,
+                props: {
+                    p: this.smP,
+                    pt: this.smPt,
+                    pr: this.smPr,
+                    pb: this.smPb,
+                    pl: this.smPl,
+                    bg: this.smBg,
+                    borderW: this.smBorderW,
+                    borderStyle: this.smBorderStyle,
+                    borderColor: this.smBorderColor,
+                    borderTopW: this.smBorderTopW,
+                    borderTopStyle: this.smBorderTopStyle,
+                    borderTopColor: this.smBorderTopColor,
+                    borderRightW: this.smBorderRightW,
+                    borderRightStyle: this.smBorderRightStyle,
+                    borderRightColor: this.smBorderRightColor,
+                    borderBottomW: this.smBorderBottomW,
+                    borderBottomStyle: this.smBorderBottomStyle,
+                    borderBottomColor: this.smBorderBottomColor,
+                    borderLeftW: this.smBorderLeftW,
+                    borderLeftStyle: this.smBorderLeftStyle,
+                    borderLeftColor: this.smBorderLeftColor,
+                    borderRadius: this.smBorderRadius,
+                    flex: this.smFlex,
+                    w: this.smW,
+                    minW: this.smMinW,
+                    maxW: this.smMaxW,
+                },
+            },
+            {
+                breakpoint: 'md',
+                minWidth: breakpoints.md,
+                props: {
+                    p: this.mdP,
+                    pt: this.mdPt,
+                    pr: this.mdPr,
+                    pb: this.mdPb,
+                    pl: this.mdPl,
+                    bg: this.mdBg,
+                    borderW: this.mdBorderW,
+                    borderStyle: this.mdBorderStyle,
+                    borderColor: this.mdBorderColor,
+                    borderTopW: this.mdBorderTopW,
+                    borderTopStyle: this.mdBorderTopStyle,
+                    borderTopColor: this.mdBorderTopColor,
+                    borderRightW: this.mdBorderRightW,
+                    borderRightStyle: this.mdBorderRightStyle,
+                    borderRightColor: this.mdBorderRightColor,
+                    borderBottomW: this.mdBorderBottomW,
+                    borderBottomStyle: this.mdBorderBottomStyle,
+                    borderBottomColor: this.mdBorderBottomColor,
+                    borderLeftW: this.mdBorderLeftW,
+                    borderLeftStyle: this.mdBorderLeftStyle,
+                    borderLeftColor: this.mdBorderLeftColor,
+                    borderRadius: this.mdBorderRadius,
+                    flex: this.mdFlex,
+                    w: this.mdW,
+                    minW: this.mdMinW,
+                    maxW: this.mdMaxW,
+                },
+            },
+            {
+                breakpoint: 'lg',
+                minWidth: breakpoints.lg,
+                props: {
+                    p: this.lgP,
+                    pt: this.lgPt,
+                    pr: this.lgPr,
+                    pb: this.lgPb,
+                    pl: this.lgPl,
+                    bg: this.lgBg,
+                    borderW: this.lgBorderW,
+                    borderStyle: this.lgBorderStyle,
+                    borderColor: this.lgBorderColor,
+                    borderTopW: this.lgBorderTopW,
+                    borderTopStyle: this.lgBorderTopStyle,
+                    borderTopColor: this.lgBorderTopColor,
+                    borderRightW: this.lgBorderRightW,
+                    borderRightStyle: this.lgBorderRightStyle,
+                    borderRightColor: this.lgBorderRightColor,
+                    borderBottomW: this.lgBorderBottomW,
+                    borderBottomStyle: this.lgBorderBottomStyle,
+                    borderBottomColor: this.lgBorderBottomColor,
+                    borderLeftW: this.lgBorderLeftW,
+                    borderLeftStyle: this.lgBorderLeftStyle,
+                    borderLeftColor: this.lgBorderLeftColor,
+                    borderRadius: this.lgBorderRadius,
+                    flex: this.lgFlex,
+                    w: this.lgW,
+                    minW: this.lgMinW,
+                    maxW: this.lgMaxW,
+                },
+            },
+            {
+                breakpoint: 'xl',
+                minWidth: breakpoints.xl,
+                props: {
+                    p: this.xlP,
+                    pt: this.xlPt,
+                    pr: this.xlPr,
+                    pb: this.xlPb,
+                    pl: this.xlPl,
+                    bg: this.xlBg,
+                    borderW: this.xlBorderW,
+                    borderStyle: this.xlBorderStyle,
+                    borderColor: this.xlBorderColor,
+                    borderTopW: this.xlBorderTopW,
+                    borderTopStyle: this.xlBorderTopStyle,
+                    borderTopColor: this.xlBorderTopColor,
+                    borderRightW: this.xlBorderRightW,
+                    borderRightStyle: this.xlBorderRightStyle,
+                    borderRightColor: this.xlBorderRightColor,
+                    borderBottomW: this.xlBorderBottomW,
+                    borderBottomStyle: this.xlBorderBottomStyle,
+                    borderBottomColor: this.xlBorderBottomColor,
+                    borderLeftW: this.xlBorderLeftW,
+                    borderLeftStyle: this.xlBorderLeftStyle,
+                    borderLeftColor: this.xlBorderLeftColor,
+                    borderRadius: this.xlBorderRadius,
+                    flex: this.xlFlex,
+                    w: this.xlW,
+                    minW: this.xlMinW,
+                    maxW: this.xlMaxW,
+                },
+            },
+            {
+                breakpoint: '2xl',
+                minWidth: breakpoints['2xl'],
+                props: {
+                    p: this.xxlP,
+                    pt: this.xxlPt,
+                    pr: this.xxlPr,
+                    pb: this.xxlPb,
+                    pl: this.xxlPl,
+                    bg: this.xxlBg,
+                    borderW: this.xxlBorderW,
+                    borderStyle: this.xxlBorderStyle,
+                    borderColor: this.xxlBorderColor,
+                    borderTopW: this.xxlBorderTopW,
+                    borderTopStyle: this.xxlBorderTopStyle,
+                    borderTopColor: this.xxlBorderTopColor,
+                    borderRightW: this.xxlBorderRightW,
+                    borderRightStyle: this.xxlBorderRightStyle,
+                    borderRightColor: this.xxlBorderRightColor,
+                    borderBottomW: this.xxlBorderBottomW,
+                    borderBottomStyle: this.xxlBorderBottomStyle,
+                    borderBottomColor: this.xxlBorderBottomColor,
+                    borderLeftW: this.xxlBorderLeftW,
+                    borderLeftStyle: this.xxlBorderLeftStyle,
+                    borderLeftColor: this.xxlBorderLeftColor,
+                    borderRadius: this.xxlBorderRadius,
+                    flex: this.xxlFlex,
+                    w: this.xxlW,
+                    minW: this.xxlMinW,
+                    maxW: this.xxlMaxW,
+                },
+            },
+        ];
+        for (const { minWidth, props } of breakpointProps) {
+            const styles = [];
+            if (props.p)
+                styles.push(`padding: ${props.p}rem;`);
+            if (props.pt)
+                styles.push(`padding-top: ${props.pt}rem;`);
+            if (props.pr)
+                styles.push(`padding-right: ${props.pr}rem;`);
+            if (props.pb)
+                styles.push(`padding-bottom: ${props.pb}rem;`);
+            if (props.pl)
+                styles.push(`padding-left: ${props.pl}rem;`);
+            if (props.bg)
+                styles.push(`background-color: ${props.bg};`);
+            if (props.borderW)
+                styles.push(`border-width: ${props.borderW}px;`);
+            if (props.borderStyle)
+                styles.push(`border-style: ${props.borderStyle};`);
+            if (props.borderColor)
+                styles.push(`border-color: ${props.borderColor};`);
+            if (props.borderTopW)
+                styles.push(`border-top-width: ${props.borderTopW}px;`);
+            if (props.borderTopStyle)
+                styles.push(`border-top-style: ${props.borderTopStyle};`);
+            if (props.borderTopColor)
+                styles.push(`border-top-color: ${props.borderTopColor};`);
+            if (props.borderRightW)
+                styles.push(`border-right-width: ${props.borderRightW}px;`);
+            if (props.borderRightStyle)
+                styles.push(`border-right-style: ${props.borderRightStyle};`);
+            if (props.borderRightColor)
+                styles.push(`border-right-color: ${props.borderRightColor};`);
+            if (props.borderBottomW)
+                styles.push(`border-bottom-width: ${props.borderBottomW}px;`);
+            if (props.borderBottomStyle)
+                styles.push(`border-bottom-style: ${props.borderBottomStyle};`);
+            if (props.borderBottomColor)
+                styles.push(`border-bottom-color: ${props.borderBottomColor};`);
+            if (props.borderLeftW)
+                styles.push(`border-left-width: ${props.borderLeftW}px;`);
+            if (props.borderLeftStyle)
+                styles.push(`border-left-style: ${props.borderLeftStyle};`);
+            if (props.borderLeftColor)
+                styles.push(`border-left-color: ${props.borderLeftColor};`);
+            if (props.borderRadius)
+                styles.push(`border-radius: ${props.borderRadius}px;`);
+            if (styles.length > 0) {
+                mediaStyles += `
+          @media (min-width: ${minWidth}) {
+            .wrapper {
+              ${styles.join(' ')}
+            }
+          }
+        `;
+            }
+            const hostStyles = [];
+            if (props.flex)
+                hostStyles.push(`flex: ${props.flex};`);
+            if (props.w)
+                hostStyles.push(`width: ${this.formatWidth(props.w)};`);
+            if (props.minW)
+                hostStyles.push(`min-width: ${this.formatWidth(props.minW)};`);
+            if (props.maxW)
+                hostStyles.push(`max-width: ${this.formatWidth(props.maxW)};`);
+            if (hostStyles.length > 0) {
+                mediaStyles += `
+          @media (min-width: ${minWidth}) {
+            :host {
+              ${hostStyles.join(' ')}
+            }
+          }
+        `;
+            }
+        }
+        return mediaStyles;
+    }
+    render() {
+        const wrapperStyles = this.buildWrapperStyles();
+        const hostStyles = this.buildHostStyles();
+        const mediaQueries = this.buildMediaQueries();
+        const tag = unsafeStatic(this.as || 'div');
+        return staticHtml `
+      <style>
+        :host {
+          ${hostStyles}
+        }
+        .wrapper {
+          display: block;
+          width: 100%;
+          box-sizing: border-box; 
+          ${wrapperStyles}
+        }
+        ${mediaQueries}
+      </style>
+      <${tag} class="wrapper">
+        <slot></slot>
+      </${tag}>
+    `;
+    }
+};
+ContainerBox.styles = css `
+    :host {
+      display: block;
+      box-sizing: border-box;
+    }
+  `;
+__decorate([
+    property()
+], ContainerBox.prototype, "as", void 0);
+__decorate([
+    property()
+], ContainerBox.prototype, "p", void 0);
+__decorate([
+    property()
+], ContainerBox.prototype, "pb", void 0);
+__decorate([
+    property()
+], ContainerBox.prototype, "bg", void 0);
+__decorate([
+    property({ attribute: 'border-color' })
+], ContainerBox.prototype, "borderColor", void 0);
+__decorate([
+    property({ attribute: 'border-radius' })
+], ContainerBox.prototype, "borderRadius", void 0);
+__decorate([
+    property({ attribute: 'border-style' })
+], ContainerBox.prototype, "borderStyle", void 0);
+__decorate([
+    property({ attribute: 'border-w' })
+], ContainerBox.prototype, "borderW", void 0);
+__decorate([
+    property({ attribute: 'border-top-w' })
+], ContainerBox.prototype, "borderTopW", void 0);
+__decorate([
+    property({ attribute: 'border-top-style' })
+], ContainerBox.prototype, "borderTopStyle", void 0);
+__decorate([
+    property({ attribute: 'border-top-color' })
+], ContainerBox.prototype, "borderTopColor", void 0);
+__decorate([
+    property({ attribute: 'border-right-w' })
+], ContainerBox.prototype, "borderRightW", void 0);
+__decorate([
+    property({ attribute: 'border-right-style' })
+], ContainerBox.prototype, "borderRightStyle", void 0);
+__decorate([
+    property({ attribute: 'border-right-color' })
+], ContainerBox.prototype, "borderRightColor", void 0);
+__decorate([
+    property({ attribute: 'border-bottom-w' })
+], ContainerBox.prototype, "borderBottomW", void 0);
+__decorate([
+    property({ attribute: 'border-bottom-style' })
+], ContainerBox.prototype, "borderBottomStyle", void 0);
+__decorate([
+    property({ attribute: 'border-bottom-color' })
+], ContainerBox.prototype, "borderBottomColor", void 0);
+__decorate([
+    property({ attribute: 'border-left-w' })
+], ContainerBox.prototype, "borderLeftW", void 0);
+__decorate([
+    property({ attribute: 'border-left-style' })
+], ContainerBox.prototype, "borderLeftStyle", void 0);
+__decorate([
+    property({ attribute: 'border-left-color' })
+], ContainerBox.prototype, "borderLeftColor", void 0);
+__decorate([
+    property()
+], ContainerBox.prototype, "flex", void 0);
+__decorate([
+    property()
+], ContainerBox.prototype, "pl", void 0);
+__decorate([
+    property()
+], ContainerBox.prototype, "pr", void 0);
+__decorate([
+    property()
+], ContainerBox.prototype, "pt", void 0);
+__decorate([
+    property()
+], ContainerBox.prototype, "w", void 0);
+__decorate([
+    property({ attribute: 'min-w' })
+], ContainerBox.prototype, "minW", void 0);
+__decorate([
+    property({ attribute: 'max-w' })
+], ContainerBox.prototype, "maxW", void 0);
+__decorate([
+    property({ attribute: 'sm-p' })
+], ContainerBox.prototype, "smP", void 0);
+__decorate([
+    property({ attribute: 'sm-pb' })
+], ContainerBox.prototype, "smPb", void 0);
+__decorate([
+    property({ attribute: 'sm-bg' })
+], ContainerBox.prototype, "smBg", void 0);
+__decorate([
+    property({ attribute: 'sm-border-color' })
+], ContainerBox.prototype, "smBorderColor", void 0);
+__decorate([
+    property({ attribute: 'sm-border-radius' })
+], ContainerBox.prototype, "smBorderRadius", void 0);
+__decorate([
+    property({ attribute: 'sm-border-style' })
+], ContainerBox.prototype, "smBorderStyle", void 0);
+__decorate([
+    property({ attribute: 'sm-border-w' })
+], ContainerBox.prototype, "smBorderW", void 0);
+__decorate([
+    property({ attribute: 'sm-border-top-w' })
+], ContainerBox.prototype, "smBorderTopW", void 0);
+__decorate([
+    property({ attribute: 'sm-border-top-style' })
+], ContainerBox.prototype, "smBorderTopStyle", void 0);
+__decorate([
+    property({ attribute: 'sm-border-top-color' })
+], ContainerBox.prototype, "smBorderTopColor", void 0);
+__decorate([
+    property({ attribute: 'sm-border-right-w' })
+], ContainerBox.prototype, "smBorderRightW", void 0);
+__decorate([
+    property({ attribute: 'sm-border-right-style' })
+], ContainerBox.prototype, "smBorderRightStyle", void 0);
+__decorate([
+    property({ attribute: 'sm-border-right-color' })
+], ContainerBox.prototype, "smBorderRightColor", void 0);
+__decorate([
+    property({ attribute: 'sm-border-bottom-w' })
+], ContainerBox.prototype, "smBorderBottomW", void 0);
+__decorate([
+    property({ attribute: 'sm-border-bottom-style' })
+], ContainerBox.prototype, "smBorderBottomStyle", void 0);
+__decorate([
+    property({ attribute: 'sm-border-bottom-color' })
+], ContainerBox.prototype, "smBorderBottomColor", void 0);
+__decorate([
+    property({ attribute: 'sm-border-left-w' })
+], ContainerBox.prototype, "smBorderLeftW", void 0);
+__decorate([
+    property({ attribute: 'sm-border-left-style' })
+], ContainerBox.prototype, "smBorderLeftStyle", void 0);
+__decorate([
+    property({ attribute: 'sm-border-left-color' })
+], ContainerBox.prototype, "smBorderLeftColor", void 0);
+__decorate([
+    property({ attribute: 'sm-flex' })
+], ContainerBox.prototype, "smFlex", void 0);
+__decorate([
+    property({ attribute: 'sm-pl' })
+], ContainerBox.prototype, "smPl", void 0);
+__decorate([
+    property({ attribute: 'sm-pr' })
+], ContainerBox.prototype, "smPr", void 0);
+__decorate([
+    property({ attribute: 'sm-pt' })
+], ContainerBox.prototype, "smPt", void 0);
+__decorate([
+    property({ attribute: 'sm-w' })
+], ContainerBox.prototype, "smW", void 0);
+__decorate([
+    property({ attribute: 'sm-min-w' })
+], ContainerBox.prototype, "smMinW", void 0);
+__decorate([
+    property({ attribute: 'sm-max-w' })
+], ContainerBox.prototype, "smMaxW", void 0);
+__decorate([
+    property({ attribute: 'md-p' })
+], ContainerBox.prototype, "mdP", void 0);
+__decorate([
+    property({ attribute: 'md-pb' })
+], ContainerBox.prototype, "mdPb", void 0);
+__decorate([
+    property({ attribute: 'md-bg' })
+], ContainerBox.prototype, "mdBg", void 0);
+__decorate([
+    property({ attribute: 'md-border-color' })
+], ContainerBox.prototype, "mdBorderColor", void 0);
+__decorate([
+    property({ attribute: 'md-border-radius' })
+], ContainerBox.prototype, "mdBorderRadius", void 0);
+__decorate([
+    property({ attribute: 'md-border-style' })
+], ContainerBox.prototype, "mdBorderStyle", void 0);
+__decorate([
+    property({ attribute: 'md-border-w' })
+], ContainerBox.prototype, "mdBorderW", void 0);
+__decorate([
+    property({ attribute: 'md-border-top-w' })
+], ContainerBox.prototype, "mdBorderTopW", void 0);
+__decorate([
+    property({ attribute: 'md-border-top-style' })
+], ContainerBox.prototype, "mdBorderTopStyle", void 0);
+__decorate([
+    property({ attribute: 'md-border-top-color' })
+], ContainerBox.prototype, "mdBorderTopColor", void 0);
+__decorate([
+    property({ attribute: 'md-border-right-w' })
+], ContainerBox.prototype, "mdBorderRightW", void 0);
+__decorate([
+    property({ attribute: 'md-border-right-style' })
+], ContainerBox.prototype, "mdBorderRightStyle", void 0);
+__decorate([
+    property({ attribute: 'md-border-right-color' })
+], ContainerBox.prototype, "mdBorderRightColor", void 0);
+__decorate([
+    property({ attribute: 'md-border-bottom-w' })
+], ContainerBox.prototype, "mdBorderBottomW", void 0);
+__decorate([
+    property({ attribute: 'md-border-bottom-style' })
+], ContainerBox.prototype, "mdBorderBottomStyle", void 0);
+__decorate([
+    property({ attribute: 'md-border-bottom-color' })
+], ContainerBox.prototype, "mdBorderBottomColor", void 0);
+__decorate([
+    property({ attribute: 'md-border-left-w' })
+], ContainerBox.prototype, "mdBorderLeftW", void 0);
+__decorate([
+    property({ attribute: 'md-border-left-style' })
+], ContainerBox.prototype, "mdBorderLeftStyle", void 0);
+__decorate([
+    property({ attribute: 'md-border-left-color' })
+], ContainerBox.prototype, "mdBorderLeftColor", void 0);
+__decorate([
+    property({ attribute: 'md-flex' })
+], ContainerBox.prototype, "mdFlex", void 0);
+__decorate([
+    property({ attribute: 'md-pl' })
+], ContainerBox.prototype, "mdPl", void 0);
+__decorate([
+    property({ attribute: 'md-pr' })
+], ContainerBox.prototype, "mdPr", void 0);
+__decorate([
+    property({ attribute: 'md-pt' })
+], ContainerBox.prototype, "mdPt", void 0);
+__decorate([
+    property({ attribute: 'md-w' })
+], ContainerBox.prototype, "mdW", void 0);
+__decorate([
+    property({ attribute: 'md-min-w' })
+], ContainerBox.prototype, "mdMinW", void 0);
+__decorate([
+    property({ attribute: 'md-max-w' })
+], ContainerBox.prototype, "mdMaxW", void 0);
+__decorate([
+    property({ attribute: 'lg-p' })
+], ContainerBox.prototype, "lgP", void 0);
+__decorate([
+    property({ attribute: 'lg-pb' })
+], ContainerBox.prototype, "lgPb", void 0);
+__decorate([
+    property({ attribute: 'lg-bg' })
+], ContainerBox.prototype, "lgBg", void 0);
+__decorate([
+    property({ attribute: 'lg-border-color' })
+], ContainerBox.prototype, "lgBorderColor", void 0);
+__decorate([
+    property({ attribute: 'lg-border-radius' })
+], ContainerBox.prototype, "lgBorderRadius", void 0);
+__decorate([
+    property({ attribute: 'lg-border-style' })
+], ContainerBox.prototype, "lgBorderStyle", void 0);
+__decorate([
+    property({ attribute: 'lg-border-w' })
+], ContainerBox.prototype, "lgBorderW", void 0);
+__decorate([
+    property({ attribute: 'lg-border-top-w' })
+], ContainerBox.prototype, "lgBorderTopW", void 0);
+__decorate([
+    property({ attribute: 'lg-border-top-style' })
+], ContainerBox.prototype, "lgBorderTopStyle", void 0);
+__decorate([
+    property({ attribute: 'lg-border-top-color' })
+], ContainerBox.prototype, "lgBorderTopColor", void 0);
+__decorate([
+    property({ attribute: 'lg-border-right-w' })
+], ContainerBox.prototype, "lgBorderRightW", void 0);
+__decorate([
+    property({ attribute: 'lg-border-right-style' })
+], ContainerBox.prototype, "lgBorderRightStyle", void 0);
+__decorate([
+    property({ attribute: 'lg-border-right-color' })
+], ContainerBox.prototype, "lgBorderRightColor", void 0);
+__decorate([
+    property({ attribute: 'lg-border-bottom-w' })
+], ContainerBox.prototype, "lgBorderBottomW", void 0);
+__decorate([
+    property({ attribute: 'lg-border-bottom-style' })
+], ContainerBox.prototype, "lgBorderBottomStyle", void 0);
+__decorate([
+    property({ attribute: 'lg-border-bottom-color' })
+], ContainerBox.prototype, "lgBorderBottomColor", void 0);
+__decorate([
+    property({ attribute: 'lg-border-left-w' })
+], ContainerBox.prototype, "lgBorderLeftW", void 0);
+__decorate([
+    property({ attribute: 'lg-border-left-style' })
+], ContainerBox.prototype, "lgBorderLeftStyle", void 0);
+__decorate([
+    property({ attribute: 'lg-border-left-color' })
+], ContainerBox.prototype, "lgBorderLeftColor", void 0);
+__decorate([
+    property({ attribute: 'lg-flex' })
+], ContainerBox.prototype, "lgFlex", void 0);
+__decorate([
+    property({ attribute: 'lg-pl' })
+], ContainerBox.prototype, "lgPl", void 0);
+__decorate([
+    property({ attribute: 'lg-pr' })
+], ContainerBox.prototype, "lgPr", void 0);
+__decorate([
+    property({ attribute: 'lg-pt' })
+], ContainerBox.prototype, "lgPt", void 0);
+__decorate([
+    property({ attribute: 'lg-w' })
+], ContainerBox.prototype, "lgW", void 0);
+__decorate([
+    property({ attribute: 'lg-min-w' })
+], ContainerBox.prototype, "lgMinW", void 0);
+__decorate([
+    property({ attribute: 'lg-max-w' })
+], ContainerBox.prototype, "lgMaxW", void 0);
+__decorate([
+    property({ attribute: 'xl-p' })
+], ContainerBox.prototype, "xlP", void 0);
+__decorate([
+    property({ attribute: 'xl-pb' })
+], ContainerBox.prototype, "xlPb", void 0);
+__decorate([
+    property({ attribute: 'xl-bg' })
+], ContainerBox.prototype, "xlBg", void 0);
+__decorate([
+    property({ attribute: 'xl-border-color' })
+], ContainerBox.prototype, "xlBorderColor", void 0);
+__decorate([
+    property({ attribute: 'xl-border-radius' })
+], ContainerBox.prototype, "xlBorderRadius", void 0);
+__decorate([
+    property({ attribute: 'xl-border-style' })
+], ContainerBox.prototype, "xlBorderStyle", void 0);
+__decorate([
+    property({ attribute: 'xl-border-w' })
+], ContainerBox.prototype, "xlBorderW", void 0);
+__decorate([
+    property({ attribute: 'xl-border-top-w' })
+], ContainerBox.prototype, "xlBorderTopW", void 0);
+__decorate([
+    property({ attribute: 'xl-border-top-style' })
+], ContainerBox.prototype, "xlBorderTopStyle", void 0);
+__decorate([
+    property({ attribute: 'xl-border-top-color' })
+], ContainerBox.prototype, "xlBorderTopColor", void 0);
+__decorate([
+    property({ attribute: 'xl-border-right-w' })
+], ContainerBox.prototype, "xlBorderRightW", void 0);
+__decorate([
+    property({ attribute: 'xl-border-right-style' })
+], ContainerBox.prototype, "xlBorderRightStyle", void 0);
+__decorate([
+    property({ attribute: 'xl-border-right-color' })
+], ContainerBox.prototype, "xlBorderRightColor", void 0);
+__decorate([
+    property({ attribute: 'xl-border-bottom-w' })
+], ContainerBox.prototype, "xlBorderBottomW", void 0);
+__decorate([
+    property({ attribute: 'xl-border-bottom-style' })
+], ContainerBox.prototype, "xlBorderBottomStyle", void 0);
+__decorate([
+    property({ attribute: 'xl-border-bottom-color' })
+], ContainerBox.prototype, "xlBorderBottomColor", void 0);
+__decorate([
+    property({ attribute: 'xl-border-left-w' })
+], ContainerBox.prototype, "xlBorderLeftW", void 0);
+__decorate([
+    property({ attribute: 'xl-border-left-style' })
+], ContainerBox.prototype, "xlBorderLeftStyle", void 0);
+__decorate([
+    property({ attribute: 'xl-border-left-color' })
+], ContainerBox.prototype, "xlBorderLeftColor", void 0);
+__decorate([
+    property({ attribute: 'xl-flex' })
+], ContainerBox.prototype, "xlFlex", void 0);
+__decorate([
+    property({ attribute: 'xl-pl' })
+], ContainerBox.prototype, "xlPl", void 0);
+__decorate([
+    property({ attribute: 'xl-pr' })
+], ContainerBox.prototype, "xlPr", void 0);
+__decorate([
+    property({ attribute: 'xl-pt' })
+], ContainerBox.prototype, "xlPt", void 0);
+__decorate([
+    property({ attribute: 'xl-w' })
+], ContainerBox.prototype, "xlW", void 0);
+__decorate([
+    property({ attribute: 'xl-min-w' })
+], ContainerBox.prototype, "xlMinW", void 0);
+__decorate([
+    property({ attribute: 'xl-max-w' })
+], ContainerBox.prototype, "xlMaxW", void 0);
+__decorate([
+    property({ attribute: '2xl-p' })
+], ContainerBox.prototype, "xxlP", void 0);
+__decorate([
+    property({ attribute: '2xl-pb' })
+], ContainerBox.prototype, "xxlPb", void 0);
+__decorate([
+    property({ attribute: '2xl-bg' })
+], ContainerBox.prototype, "xxlBg", void 0);
+__decorate([
+    property({ attribute: '2xl-border-color' })
+], ContainerBox.prototype, "xxlBorderColor", void 0);
+__decorate([
+    property({ attribute: '2xl-border-radius' })
+], ContainerBox.prototype, "xxlBorderRadius", void 0);
+__decorate([
+    property({ attribute: '2xl-border-style' })
+], ContainerBox.prototype, "xxlBorderStyle", void 0);
+__decorate([
+    property({ attribute: '2xl-border-w' })
+], ContainerBox.prototype, "xxlBorderW", void 0);
+__decorate([
+    property({ attribute: '2xl-border-top-w' })
+], ContainerBox.prototype, "xxlBorderTopW", void 0);
+__decorate([
+    property({ attribute: '2xl-border-top-style' })
+], ContainerBox.prototype, "xxlBorderTopStyle", void 0);
+__decorate([
+    property({ attribute: '2xl-border-top-color' })
+], ContainerBox.prototype, "xxlBorderTopColor", void 0);
+__decorate([
+    property({ attribute: '2xl-border-right-w' })
+], ContainerBox.prototype, "xxlBorderRightW", void 0);
+__decorate([
+    property({ attribute: '2xl-border-right-style' })
+], ContainerBox.prototype, "xxlBorderRightStyle", void 0);
+__decorate([
+    property({ attribute: '2xl-border-right-color' })
+], ContainerBox.prototype, "xxlBorderRightColor", void 0);
+__decorate([
+    property({ attribute: '2xl-border-bottom-w' })
+], ContainerBox.prototype, "xxlBorderBottomW", void 0);
+__decorate([
+    property({ attribute: '2xl-border-bottom-style' })
+], ContainerBox.prototype, "xxlBorderBottomStyle", void 0);
+__decorate([
+    property({ attribute: '2xl-border-bottom-color' })
+], ContainerBox.prototype, "xxlBorderBottomColor", void 0);
+__decorate([
+    property({ attribute: '2xl-border-left-w' })
+], ContainerBox.prototype, "xxlBorderLeftW", void 0);
+__decorate([
+    property({ attribute: '2xl-border-left-style' })
+], ContainerBox.prototype, "xxlBorderLeftStyle", void 0);
+__decorate([
+    property({ attribute: '2xl-border-left-color' })
+], ContainerBox.prototype, "xxlBorderLeftColor", void 0);
+__decorate([
+    property({ attribute: '2xl-flex' })
+], ContainerBox.prototype, "xxlFlex", void 0);
+__decorate([
+    property({ attribute: '2xl-pl' })
+], ContainerBox.prototype, "xxlPl", void 0);
+__decorate([
+    property({ attribute: '2xl-pr' })
+], ContainerBox.prototype, "xxlPr", void 0);
+__decorate([
+    property({ attribute: '2xl-pt' })
+], ContainerBox.prototype, "xxlPt", void 0);
+__decorate([
+    property({ attribute: '2xl-w' })
+], ContainerBox.prototype, "xxlW", void 0);
+__decorate([
+    property({ attribute: '2xl-min-w' })
+], ContainerBox.prototype, "xxlMinW", void 0);
+__decorate([
+    property({ attribute: '2xl-max-w' })
+], ContainerBox.prototype, "xxlMaxW", void 0);
+ContainerBox = __decorate([
+    customElement('container-box')
+], ContainerBox);
+export { ContainerBox };
+//# sourceMappingURL=container-box.js.map