jebamo 0.0.1 → 0.0.2

package/dist/collection/components/checkbox-group/je-checkbox-group/je-checkbox-group.js

@@ -0,0 +1,141 @@
+import { Host, h } from "@stencil/core";
+export class JeCheckboxGroup {
+    constructor() {
+        this.label = undefined;
+        this.value = [];
+    }
+    componentWillLoad() {
+        if (!Array.isArray(this.value)) {
+            this.value = [];
+        }
+        this.originalValue = this.value;
+        if (this.label) {
+            this.el.setAttribute('name', this.label);
+        }
+    }
+    componentDidLoad() {
+        if (this.value) {
+            const checkboxes = this.getChecks();
+            for (let item of checkboxes) {
+                item.checked = this.value.includes(item.value);
+            }
+        }
+    }
+    formResetCallback() {
+        this.value = this.originalValue;
+    }
+    getChecks() {
+        const elements = this.el.querySelectorAll('je-checkbox-option');
+        return Array.from(elements);
+    }
+    handleValueChange() {
+        this.valueChange.emit(this.value);
+        const checkboxes = this.getChecks();
+        for (let checkbox of checkboxes) {
+            const includes = this.value.includes(checkbox.value);
+            if (checkbox.checked != includes) {
+                checkbox.checked = includes;
+            }
+        }
+    }
+    handleCheck(ev) {
+        this.value = [ev.detail, ...this.value];
+    }
+    handleUncheck(ev) {
+        this.value = this.value.filter(t => t !== ev.detail);
+    }
+    render() {
+        return (h(Host, { key: '7d3112f65038d79a8ca5ebbba5bceb7b07ff401d' }, this.label && h("label", { key: '7f71075409ca98d45e18974ee1bda4a6afec859a' }, this.label), h("slot", { key: '2473328de9c142d0c972a32228edac8f51b66b38' })));
+    }
+    static get is() { return "je-checkbox-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-checkbox-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-checkbox-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label that shows above the controls"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current selected values"
+                },
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the current selected values whenever they change"
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "check",
+                "method": "handleCheck",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "uncheck",
+                "method": "handleUncheck",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=je-checkbox-group.js.map

package/dist/collection/components/checkbox-group/je-checkbox-group/je-checkbox-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-checkbox-group.js","sourceRoot":"","sources":["../../../../src/components/checkbox-group/je-checkbox-group/je-checkbox-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQtG,MAAM,OAAO,eAAe;;;qBAYiB,EAAE;;IAO7C,iBAAiB;QACf,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAClB,CAAC;QAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QAEhC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YACpC,KAAK,IAAI,IAAI,IAAI,UAAU,EAAE,CAAC;gBAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACjD,CAAC;QACH,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;IAClC,CAAC;IAEO,SAAS;QACf,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;QAChE,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QACpC,KAAK,IAAI,QAAQ,IAAI,UAAU,EAAE,CAAC;YAChC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACrD,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,EAAE,CAAC;gBACjC,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC;YAC9B,CAAC;QACH,CAAC;IACH,CAAC;IAGD,WAAW,CAAC,EAAoB;QAC9B,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAGD,aAAa,CAAC,EAAoB;QAChC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,KAAK,IAAI,gEAAQ,IAAI,CAAC,KAAK,CAAS;YAC1C,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'je-checkbox-group',\n  styleUrl: 'je-checkbox-group.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class JeCheckboxGroup {\n  @Element() el!: HTMLJeCheckboxGroupElement;\n  private originalValue?: string[];\n\n  /**\n   * Label that shows above the controls\n   */\n  @Prop() label?: string;\n\n  /**\n   * Current selected values\n   */\n  @Prop({ mutable: true }) value: string[] = [];\n\n  /**\n   * Emits the current selected values whenever they change\n   */\n  @Event({ bubbles: false }) valueChange: EventEmitter<string[]>;\n\n  componentWillLoad() {\n    if (!Array.isArray(this.value)) {\n      this.value = [];\n    }\n\n    this.originalValue = this.value;\n\n    if (this.label) {\n      this.el.setAttribute('name', this.label);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.value) {\n      const checkboxes = this.getChecks();\n      for (let item of checkboxes) {\n        item.checked = this.value.includes(item.value);\n      }\n    }\n  }\n\n  formResetCallback() {\n    this.value = this.originalValue;\n  }\n\n  private getChecks() {\n    const elements = this.el.querySelectorAll('je-checkbox-option');\n    return Array.from(elements);\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.valueChange.emit(this.value);\n    const checkboxes = this.getChecks();\n    for (let checkbox of checkboxes) {\n      const includes = this.value.includes(checkbox.value);\n      if (checkbox.checked != includes) {\n        checkbox.checked = includes;\n      }\n    }\n  }\n\n  @Listen('check')\n  handleCheck(ev: CustomEvent<any>) {\n    this.value = [ev.detail, ...this.value];\n  }\n\n  @Listen('uncheck')\n  handleUncheck(ev: CustomEvent<any>) {\n    this.value = this.value.filter(t => t !== ev.detail);\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.label && <label>{this.label}</label>}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/checkbox-group/je-checkbox-option/je-checkbox-option.css

@@ -0,0 +1,13 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: var(--je-spacing-2xs);
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+je-icon {
+  cursor: pointer;
+  color: var(--je-primary-500);
+}

package/dist/collection/components/checkbox-group/je-checkbox-option/je-checkbox-option.js

@@ -0,0 +1,153 @@
+import { Host, h } from "@stencil/core";
+export class JeCheckboxOption {
+    constructor() {
+        this.value = undefined;
+        this.checked = false;
+        this.readonly = false;
+        this.disabled = false;
+    }
+    onClick() {
+        if (!this.readonly && !this.disabled) {
+            if (this.checked) {
+                this.uncheck.emit(this.value);
+            }
+            else {
+                this.check.emit(this.value);
+            }
+        }
+    }
+    render() {
+        return (h(Host, { key: '39b01f92be46d74b1efda5259bf766495694331b' }, h("je-icon", { key: '42ad722098b6094f4edbae636282a7b2fb0a4497', icon: this.checked ? 'check_box' : 'check_box_outline_blank' }), h("slot", { key: 'a7591297da5fa8b50576a21341c2480bfed86e07' })));
+    }
+    static get is() { return "je-checkbox-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-checkbox-option.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-checkbox-option.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of this option that the checkbox group will compare against"
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not this option is currently checked"
+                },
+                "attribute": "checked",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows readonly state and prevents changes to this option"
+                },
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows disabled state and prevents changes to this option"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "check",
+                "name": "check",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the value whenever it is checked"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "uncheck",
+                "name": "uncheck",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the value whenever it is unchecked"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=je-checkbox-option.js.map

package/dist/collection/components/checkbox-group/je-checkbox-option/je-checkbox-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-checkbox-option.js","sourceRoot":"","sources":["../../../../src/components/checkbox-group/je-checkbox-option/je-checkbox-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAO/F,MAAM,OAAO,gBAAgB;;;uBAWT,KAAK;wBAKJ,KAAK;wBAKL,KAAK;;IAaxB,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACrC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAChC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,gEAAS,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,yBAAyB,GAAI;YACzE,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Event, EventEmitter, Prop, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'je-checkbox-option',\n  styleUrl: 'je-checkbox-option.scss',\n  shadow: true,\n})\nexport class JeCheckboxOption {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Value of this option that the checkbox group will compare against\n   */\n  @Prop() value: any;\n\n  /**\n   * Whether or not this option is currently checked\n   */\n  @Prop() checked = false;\n\n  /**\n   * Shows readonly state and prevents changes to this option\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Shows disabled state and prevents changes to this option\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Emits the value whenever it is checked\n   */\n  @Event() check: EventEmitter<any>;\n\n  /**\n   * Emits the value whenever it is unchecked\n   */\n  @Event() uncheck: EventEmitter<any>;\n\n  @Listen('click')\n  onClick() {\n    if (!this.readonly && !this.disabled) {\n      if (this.checked) {\n        this.uncheck.emit(this.value);\n      } else {\n        this.check.emit(this.value);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <je-icon icon={this.checked ? 'check_box' : 'check_box_outline_blank'} />\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/column/je-column/je-column.css

@@ -0,0 +1,10 @@
+:host {
+  margin: 0px;
+  box-sizing: border-box;
+  flex-basis: 0px;
+  flex-grow: 1;
+  width: 100%;
+  max-width: 100%;
+  min-height: 1px;
+  font-family: var(--je-font-family, inherit);
+}

package/dist/collection/components/column/je-column/je-column.js

@@ -0,0 +1,187 @@
+import { Host, forceUpdate, h } from "@stencil/core";
+const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
+const SIZE_TO_MEDIA = {
+    xs: '(min-width: 0px)',
+    sm: '(min-width: 576px)',
+    md: '(min-width: 768px)',
+    lg: '(min-width: 992px)',
+    xl: '(min-width: 1200px)',
+};
+export class JeColumn {
+    constructor() {
+        this.size = undefined;
+        this.sizeXs = undefined;
+        this.sizeSm = undefined;
+        this.sizeMd = undefined;
+        this.sizeLg = undefined;
+        this.sizeXl = undefined;
+    }
+    onResize() {
+        forceUpdate(this);
+    }
+    matchBreakpoint(breakpoint) {
+        if (breakpoint === undefined || breakpoint === '') {
+            return true;
+        }
+        if (window.matchMedia) {
+            const mediaQuery = SIZE_TO_MEDIA[breakpoint];
+            return window.matchMedia(mediaQuery).matches;
+        }
+        return false;
+    }
+    ;
+    getColumns(property) {
+        let matched;
+        for (const breakpoint of BREAKPOINTS) {
+            const matches = this.matchBreakpoint(breakpoint);
+            const columns = this[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];
+            if (matches && columns !== undefined) {
+                matched = columns;
+            }
+        }
+        return matched;
+    }
+    calculateSize() {
+        const columns = this.getColumns('size');
+        if (!columns || columns === '') {
+            return;
+        }
+        const colSize = columns === 'auto' ? 'auto' : `calc(calc(${columns} / var(--je-columns, 12)) * 100%)`;
+        return {
+            flex: `0 0 ${colSize}`,
+            width: `${colSize}`,
+            'max-width': `${colSize}`,
+        };
+    }
+    render() {
+        return (h(Host, { key: '612be9e71ffa176295b9d0336c06b62dbda388c0', style: Object.assign({}, this.calculateSize()) }, h("slot", { key: '3e74a2e7ed2327d16299bc158791627d46f29173' })));
+    }
+    static get is() { return "je-column"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-column.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-column.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the column, in terms of how many columns it should take up out of the total available."
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "sizeXs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the column for xs screens, in terms of how many columns it should take up out of the total available."
+                },
+                "attribute": "size-xs",
+                "reflect": false
+            },
+            "sizeSm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the column for sm screens, in terms of how many columns it should take up out of the total available."
+                },
+                "attribute": "size-sm",
+                "reflect": false
+            },
+            "sizeMd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the column for md screens, in terms of how many columns it should take up out of the total available."
+                },
+                "attribute": "size-md",
+                "reflect": false
+            },
+            "sizeLg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the column for lg screens, in terms of how many columns it should take up out of the total available."
+                },
+                "attribute": "size-lg",
+                "reflect": false
+            },
+            "sizeXl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the column for xl screens, in terms of how many columns it should take up out of the total available."
+                },
+                "attribute": "size-xl",
+                "reflect": false
+            }
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "onResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=je-column.js.map

package/dist/collection/components/column/je-column/je-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-column.js","sourceRoot":"","sources":["../../../../src/components/column/je-column/je-column.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE9E,MAAM,WAAW,GAAG,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AACvD,MAAM,aAAa,GAAG;IACpB,EAAE,EAAE,kBAAkB;IACtB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,qBAAqB;CAC1B,CAAC;AAOF,MAAM,OAAO,QAAQ;;;;;;;;;IAgCnB,QAAQ;QACN,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC;IAEO,eAAe,CAAC,UAA8B;QACpD,IAAI,UAAU,KAAK,SAAS,IAAI,UAAU,KAAK,EAAE,EAAE,CAAC;YAClD,OAAO,IAAI,CAAC;QACd,CAAC;QACD,IAAK,MAAc,CAAC,UAAU,EAAE,CAAC;YAC/B,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;YAC7C,OAAO,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC;QAC/C,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAAA,CAAC;IAEM,UAAU,CAAC,QAAgB;QACjC,IAAI,OAAY,CAAC;QAEjB,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE,CAAC;YACrC,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YACjD,MAAM,OAAO,GAAI,IAAY,CAAC,QAAQ,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YACnG,IAAI,OAAO,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;gBACrC,OAAO,GAAG,OAAO,CAAC;YACpB,CAAC;QACH,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAEO,aAAa;QACnB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAExC,IAAI,CAAC,OAAO,IAAI,OAAO,KAAK,EAAE,EAAE,CAAC;YAC/B,OAAO;QACT,CAAC;QAED,MAAM,OAAO,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,OAAO,mCAAmC,CAAC;QAEtG,OAAO;YACL,IAAI,EAAE,OAAO,OAAO,EAAE;YACtB,KAAK,EAAE,GAAG,OAAO,EAAE;YACnB,WAAW,EAAE,GAAG,OAAO,EAAE;SAC1B,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,oBAAO,IAAI,CAAC,aAAa,EAAE;YACpC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';\n\nconst BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];\nconst SIZE_TO_MEDIA = {\n  xs: '(min-width: 0px)',\n  sm: '(min-width: 576px)',\n  md: '(min-width: 768px)',\n  lg: '(min-width: 992px)',\n  xl: '(min-width: 1200px)',\n};\n\n@Component({\n  tag: 'je-column',\n  styleUrl: 'je-column.scss',\n  shadow: true,\n})\nexport class JeColumn {\n  /**\n   * The size of the column, in terms of how many columns it should take up out of the total available.\n   */\n  @Prop() size?: string;\n\n  /**\n   * The size of the column for xs screens, in terms of how many columns it should take up out of the total available.\n   */\n  @Prop() sizeXs?: string;\n\n  /**\n   * The size of the column for sm screens, in terms of how many columns it should take up out of the total available.\n   */\n  @Prop() sizeSm?: string;\n\n  /**\n   * The size of the column for md screens, in terms of how many columns it should take up out of the total available.\n   */\n  @Prop() sizeMd?: string;\n\n  /**\n   * The size of the column for lg screens, in terms of how many columns it should take up out of the total available.\n   */\n  @Prop() sizeLg?: string;\n\n  /**\n   * The size of the column for xl screens, in terms of how many columns it should take up out of the total available.\n   */\n  @Prop() sizeXl?: string;\n\n  @Listen('resize', { target: 'window' })\n  onResize() {\n    forceUpdate(this);\n  }\n\n  private matchBreakpoint(breakpoint: string | undefined) {\n    if (breakpoint === undefined || breakpoint === '') {\n      return true;\n    }\n    if ((window as any).matchMedia) {\n      const mediaQuery = SIZE_TO_MEDIA[breakpoint];\n      return window.matchMedia(mediaQuery).matches;\n    }\n    return false;\n  };\n\n  private getColumns(property: string) {\n    let matched: any;\n\n    for (const breakpoint of BREAKPOINTS) {\n      const matches = this.matchBreakpoint(breakpoint);\n      const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];\n      if (matches && columns !== undefined) {\n        matched = columns;\n      }\n    }\n\n    return matched;\n  }\n\n  private calculateSize() {\n    const columns = this.getColumns('size');\n\n    if (!columns || columns === '') {\n      return;\n    }\n\n    const colSize = columns === 'auto' ? 'auto' : `calc(calc(${columns} / var(--je-columns, 12)) * 100%)`;\n\n    return {\n      flex: `0 0 ${colSize}`,\n      width: `${colSize}`,\n      'max-width': `${colSize}`,\n    };\n  }\n\n  render() {\n    return (\n      <Host style={{ ...this.calculateSize() }}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/column/je-column-group/je-column-group.css

@@ -0,0 +1,4 @@
+:host {
+  display: flex;
+  --je-columns: 12;
+}

package/dist/collection/components/column/je-column-group/je-column-group.js

@@ -0,0 +1,49 @@
+import { Host, h } from "@stencil/core";
+export class JeColumnGroup {
+    constructor() {
+        this.columns = undefined;
+    }
+    componentDidLoad() {
+        if (this.columns) {
+            this.el.style.setProperty('--je-columns', this.columns.toString());
+        }
+    }
+    render() {
+        return (h(Host, { key: '8c4c7502241659afff87bb4742f0b4acf15c7cde' }, h("slot", { key: '76109da039bd6f86813463f8cabc2f0e1b75e371' })));
+    }
+    static get is() { return "je-column-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-column-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-column-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of columns the flex grid has."
+                },
+                "attribute": "columns",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=je-column-group.js.map

package/dist/collection/components/column/je-column-group/je-column-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-column-group.js","sourceRoot":"","sources":["../../../../src/components/column/je-column-group/je-column-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,aAAa;;;;IAQxB,gBAAgB;QACd,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;QACrE,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-column-group',\n  styleUrl: 'je-column-group.scss',\n  shadow: true,\n})\nexport class JeColumnGroup {\n  @Element() el: HTMLJeColumnGroupElement;\n\n  /**\n   * The number of columns the flex grid has.\n   */\n  @Prop() columns?: number;\n\n  componentDidLoad() {\n    if (this.columns) {\n      this.el.style.setProperty('--je-columns', this.columns.toString());\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/je-alert/je-alert.css

@@ -0,0 +1,84 @@
+:host {
+  display: block;
+  --je-width: 35%;
+}
+
+@media (width < 1200px) {
+  :host {
+    --je-width: 75%;
+  }
+}
+.modal {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  border-radius: var(--je-border-radius, 2px);
+  overflow: hidden;
+  top: 20%;
+  left: 50%;
+  transform: translate(-50%, -20%);
+  z-index: 910;
+  width: var(--je-width);
+  background-color: var(--je-background-color);
+  color: var(--je-text-color);
+  box-shadow: 0px 0px 15px 5px rgba(77, 77, 77, 0.4509803922);
+}
+
+.content-container {
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+}
+
+.content-container .header {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+.content-container .header .close {
+  margin-left: auto;
+  --je-background: var(--je-medium-850);
+}
+
+.content-container .controls {
+  margin-top: 16px;
+}
+
+.content-container .buttons {
+  margin-top: 24px;
+  display: flex;
+  gap: var(--je-spacing);
+  justify-content: flex-end;
+}
+
+.modal-transition {
+  opacity: 0;
+  transition: opacity 250ms ease-in-out;
+}
+
+.modal.open {
+  opacity: 1;
+}
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--je-backdrop-color);
+  z-index: 909;
+}
+
+.backdrop-transition {
+  opacity: 0;
+  transition: opacity 250ms ease-in-out;
+}
+
+.backdrop.fade {
+  opacity: 1;
+}
+
+.clear {
+  background: rgba(0, 0, 0, 0);
+}