jebamo 0.0.1 → 0.0.2

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

@@ -0,0 +1,252 @@
+import { h } from "@stencil/core";
+export class JeButton {
+    constructor() {
+        this.disabled = false;
+        this.type = 'button';
+        this.expand = false;
+        this.iconOnly = false;
+        this.fill = 'solid';
+        this.size = 'md';
+        this.color = 'primary';
+        this.lightModeColor = 'dark';
+        this.darkModeColor = 'light';
+    }
+    componentDidLoad() {
+        if (this.type == 'submit' || this.type == 'reset') {
+            this.formEl = this.el.closest('form');
+            if (this.formEl) {
+                this.formButtonEl = document.createElement('button');
+                this.formButtonEl.type = this.type;
+                this.formButtonEl.style.display = 'none';
+                this.formEl.append(this.formButtonEl);
+            }
+        }
+    }
+    handleThemeChange(e) {
+        if (this.color == 'auto') {
+            this.el.toggleAttribute(this.lightModeColor, e.detail == 'light');
+            this.el.toggleAttribute(this.darkModeColor, e.detail == 'dark');
+        }
+    }
+    handleClick() {
+        if (this.formButtonEl) {
+            this.formButtonEl.click();
+        }
+    }
+    render() {
+        return (h("button", { key: 'ebf16b4d043ac8346c34475bc6424f3f8d537bfb', part: 'inner-button', disabled: this.disabled, type: this.type }, h("slot", { key: '4a2f527ad436bcf5bdc1f9ae84034388bda0e674' }), h("slot", { key: '0e7d1c98c5b242a0f9c29cb47a893ac408557808', name: 'badge' })));
+    }
+    static get is() { return "je-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables button"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Can set to submit or reset to participate in forms"
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'button'"
+            },
+            "expand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Expands the button to the full width of it's container"
+                },
+                "attribute": "expand",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Removes the padding, ideal for turning an icon or image into a button"
+                },
+                "attribute": "icon-only",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "fill": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'solid' | 'outline' | 'clear'",
+                    "resolved": "\"clear\" | \"outline\" | \"solid\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button fill"
+                },
+                "attribute": "fill",
+                "reflect": true,
+                "defaultValue": "'solid'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'md' | 'lg' | 'sm'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button size"
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'md'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color | 'auto'",
+                    "resolved": "\"auto\" | \"dark\" | \"error\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "../../utils/utils",
+                            "id": "src/utils/utils.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Predefined colors. Auto will switch between light and dark based on the closest je-page's theme."
+                },
+                "attribute": "color",
+                "reflect": true,
+                "defaultValue": "'primary'"
+            },
+            "lightModeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "\"dark\" | \"error\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "../../utils/utils",
+                            "id": "src/utils/utils.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides what the light mode color will be when color is \"auto\"."
+                },
+                "attribute": "light-mode-color",
+                "reflect": false,
+                "defaultValue": "'dark'"
+            },
+            "darkModeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "\"dark\" | \"error\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "../../utils/utils",
+                            "id": "src/utils/utils.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides what the dark mode color will be when color is \"auto\"."
+                },
+                "attribute": "dark-mode-color",
+                "reflect": false,
+                "defaultValue": "'light'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "themeChange",
+                "method": "handleThemeChange",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=je-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"je-button.js","sourceRoot":"","sources":["../../../src/components/je-button/je-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQpE,MAAM,OAAO,QAAQ;;wBAMA,KAAK;oBAGT,QAAQ;sBAGW,KAAK;wBAGH,KAAK;oBAGsB,OAAO;oBAGlB,IAAI;qBAGP,SAAS;8BAG1B,MAAM;6BAGP,OAAO;;IAEtC,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,EAAE,CAAC;YAClD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YACtC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;gBACrD,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;gBACnC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBACzC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACxC,CAAC;QACH,CAAC;IACH,CAAC;IAGD,iBAAiB,CAAC,CAAgC;QAChD,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAC;YACzB,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,MAAM,IAAI,OAAO,CAAC,CAAA;YACjE,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,CAAA;QACjE,CAAC;IACH,CAAC;IAGD,WAAW;QACT,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DAAQ,IAAI,EAAC,cAAc,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;YAClE,8DAAa;YACb,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACnB,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element, Listen } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-button',\n  styleUrl: 'je-button.scss',\n  shadow: true,\n})\nexport class JeButton {\n  @Element() el: HTMLJeButtonElement;\n  private formEl?: HTMLFormElement;\n  private formButtonEl?: HTMLButtonElement;\n\n  /** Disables button */\n  @Prop() disabled = false;\n\n  /** Can set to submit or reset to participate in forms */\n  @Prop() type = 'button';\n\n  /** Expands the button to the full width of it's container */\n  @Prop({ reflect: true }) expand = false;\n\n  /** Removes the padding, ideal for turning an icon or image into a button */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /** Button fill */\n  @Prop({ reflect: true }) fill: 'solid' | 'outline' | 'clear' = 'solid';\n\n  /** Button size */\n  @Prop({ reflect: true }) size: 'md' | 'lg' | 'sm' = 'md';\n\n  /** Predefined colors. Auto will switch between light and dark based on the closest je-page's theme. */\n  @Prop({ reflect: true }) color: Color | 'auto' = 'primary';\n\n  /** Overrides what the light mode color will be when color is \"auto\". */\n  @Prop() lightModeColor: Color = 'dark';\n\n  /** Overrides what the dark mode color will be when color is \"auto\". */\n  @Prop() darkModeColor: Color = 'light';\n\n  componentDidLoad() {\n    if (this.type == 'submit' || this.type == 'reset') {\n      this.formEl = this.el.closest('form');\n      if (this.formEl) {\n        this.formButtonEl = document.createElement('button');\n        this.formButtonEl.type = this.type;\n        this.formButtonEl.style.display = 'none';\n        this.formEl.append(this.formButtonEl);\n      }\n    }\n  }\n\n  @Listen('themeChange', { target: 'body' })\n  handleThemeChange(e: CustomEvent<'light' | 'dark'>) {\n    if (this.color == 'auto') {\n      this.el.toggleAttribute(this.lightModeColor, e.detail == 'light')\n      this.el.toggleAttribute(this.darkModeColor, e.detail == 'dark')\n    }\n  }\n\n  @Listen('click')\n  handleClick() {\n    if (this.formButtonEl) {\n      this.formButtonEl.click();\n    }\n  }\n\n  render() {\n    return (\n      <button part='inner-button' disabled={this.disabled} type={this.type}>\n        <slot></slot>\n        <slot name='badge'></slot>\n      </button>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,113 @@
+:host {
+  display: block;
+  border: solid 1px var(--je-card-border-color);
+  border-radius: var(--je-border-radius, 2px);
+  overflow: hidden;
+  box-sizing: border-box;
+  position: relative;
+  color: var(--je-card-color);
+  background-color: var(--je-card-background);
+  --je-card-color: inherit;
+  --je-card-background: inherit;
+  --je-card-hover-background: #9f9e9e0e;
+  --je-card-active-background: #9f9e9e19;
+  --je-card-border-color: var(--je-medium-300);
+}
+
+:host([button]) {
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: all 125ms ease-in-out;
+}
+
+:host([button]:hover) {
+  background-color: var(--je-card-hover-background);
+}
+
+:host([button]:active) {
+  background-color: var(--je-card-active-background);
+}
+
+:host([color=error]) {
+  --je-card-color: var(--je-error-100);
+  --je-card-background: var(--je-error-500);
+  --je-card-hover-background: var(--je-error-600);
+  --je-card-active-background: var(--je-error-700);
+  --je-card-border-color: var(--je-error-300);
+}
+
+:host([color=secondary]) {
+  --je-card-color: var(--je-secondary-100);
+  --je-card-background: var(--je-secondary-500);
+  --je-card-hover-background: var(--je-secondary-600);
+  --je-card-active-background: var(--je-secondary-700);
+  --je-card-border-color: var(--je-secondary-300);
+}
+
+:host([color=tertiary]) {
+  --je-card-color: var(--je-tertiary-100);
+  --je-card-background: var(--je-tertiary-500);
+  --je-card-hover-background: var(--je-tertiary-600);
+  --je-card-active-background: var(--je-tertiary-700);
+  --je-card-border-color: var(--je-tertiary-300);
+}
+
+:host([color=warning]) {
+  --je-card-color: var(--je-warning-100);
+  --je-card-background: var(--je-warning-500);
+  --je-card-hover-background: var(--je-warning-600);
+  --je-card-active-background: var(--je-warning-700);
+  --je-card-border-color: var(--je-warning-300);
+}
+
+:host([color=success]) {
+  --je-card-color: var(--je-success-100);
+  --je-card-background: var(--je-success-500);
+  --je-card-hover-background: var(--je-success-600);
+  --je-card-active-background: var(--je-success-700);
+  --je-card-border-color: var(--je-success-300);
+}
+
+:host([color=medium]) {
+  --je-card-color: var(--je-medium-50);
+  --je-card-background: var(--je-medium-500);
+  --je-card-hover-background: var(--je-medium-600);
+  --je-card-active-background: var(--je-medium-700);
+}
+
+:host([color=light]) {
+  --je-card-color: var(--je-medium-900);
+  --je-card-background: var(--je-medium-100);
+  --je-card-hover-background: var(--je-medium-400);
+  --je-card-active-background: var(--je-medium-500);
+}
+
+:host([color=dark]) {
+  --je-card-color: var(--je-medium-50);
+  --je-card-background: var(--je-medium-850);
+  --je-card-hover-background: var(--je-medium-850);
+  --je-card-active-background: var(--je-medium-900);
+}
+
+::slotted([slot=media]) {
+  width: 100%;
+}
+
+::slotted([slot=header]) {
+  box-sizing: border-box;
+  padding-inline: var(--je-spacing-xs, 10px);
+  border-bottom: solid 1px var(--je-card-border-color);
+}
+
+::slotted([slot=footer]) {
+  box-sizing: border-box;
+  display: flex;
+  padding-block: var(--je-spacing-xs, 10px);
+  gap: var(--je-spacing-2xs, 8px);
+}
+
+.container {
+  box-sizing: border-box;
+  padding: var(--je-spacing-xs, 10px);
+}

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

@@ -0,0 +1,67 @@
+import { Host, h } from "@stencil/core";
+export class JeCard {
+    constructor() {
+        this.color = undefined;
+        this.button = undefined;
+    }
+    render() {
+        return (h(Host, { key: '33f8bed14daea376f91f0ae6c948235a54a7a135' }, h("slot", { key: '5a108e5cc5339c21ae02ce1913b632856787825c', name: 'media' }), h("slot", { key: 'a6d8fc7f088f3d7b9512e27292d890cf5198ece6', name: 'header' }), h("div", { key: '5edfea57c094c3ca6504c2657fbd014d11eb5889', class: 'container' }, h("slot", { key: '47646e973cee3cbcb526f12b65404034ace999ca' }), h("slot", { key: 'e34763d24d6652f18463aeceb06c3f5db729ac06', name: 'footer' }))));
+    }
+    static get is() { return "je-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "\"dark\" | \"error\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "../../utils/utils",
+                            "id": "src/utils/utils.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "color",
+                "reflect": true
+            },
+            "button": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "button",
+                "reflect": true
+            }
+        };
+    }
+}
+//# sourceMappingURL=je-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"je-card.js","sourceRoot":"","sources":["../../../src/components/je-card/je-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,MAAM;;;;;IAIjB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,OAAO,GAAG;YACrB,6DAAM,IAAI,EAAC,QAAQ,GAAG;YACtB,4DAAK,KAAK,EAAC,WAAW;gBACpB,8DAAQ;gBACR,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-card',\n  styleUrl: 'je-card.scss',\n  shadow: true,\n})\nexport class JeCard {\n  @Prop({ reflect: true }) color?: Color;\n  @Prop({ reflect: true }) button?: boolean;\n\n  render() {\n    return (\n      <Host>\n        <slot name='media' />\n        <slot name='header' />\n        <div class='container'>\n          <slot />\n          <slot name='footer' />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,191 @@
+import { Host, h } from "@stencil/core";
+export class JeCheckbox {
+    constructor() {
+        this.value = undefined;
+        this.labelPlacement = 'end';
+        this.indeterminate = false;
+        this.labelOnly = false;
+        this.readonly = false;
+        this.disabled = false;
+    }
+    componentWillLoad() {
+        if (this.value === undefined && !this.indeterminate) {
+            this.value = false;
+        }
+        this.originalValue = this.value;
+    }
+    formResetCallback() {
+        if (this.value !== this.originalValue) {
+            this.value = this.originalValue;
+        }
+    }
+    onClick() {
+        if (!this.readonly && !this.disabled) {
+            if (!this.indeterminate) {
+                this.value = !this.value;
+            }
+            else {
+                // when indeterminate, the flow is false -> true -> null
+                this.value = this.value == false ? true : this.value == true ? null : false;
+            }
+            this.valueChange.emit(this.value);
+        }
+    }
+    render() {
+        return (h(Host, { key: '492df32418a1fad791e502a04dd1f4704af73c19' }, this.labelPlacement == 'start' && h("slot", { key: 'b1fe9f38f42da604059158012be57f08ea6c0223' }), h("je-icon", { key: 'de6acfe6dc089be11e12c7948a7be20b3d6af7f4', icon: this.value === true ? 'check_box' : this.value === false ? 'check_box_outline_blank' : 'indeterminate_check_box' }), this.labelPlacement == 'end' && h("slot", { key: '2f6b3feb823cc374566845bbc0a73c4280644376' })));
+    }
+    static get is() { return "je-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the checkbox is active"
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "labelPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the label should go before or after the checkbox"
+                },
+                "attribute": "label-placement",
+                "reflect": false,
+                "defaultValue": "'end'"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If the checkbox should contain a 3rd indeterminate state"
+                },
+                "attribute": "indeterminate",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "labelOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Will hide the checkbox and just display the label"
+                },
+                "attribute": "label-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the readonly state and prevents changes"
+                },
+                "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 the disabled state and prevents changes"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the current value whenever it's state changes"
+                },
+                "complexType": {
+                    "original": "boolean | undefined",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=je-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"je-checkbox.js","sourceRoot":"","sources":["../../../src/components/je-checkbox/je-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQhH,MAAM,OAAO,UAAU;;;8BAaqB,KAAK;6BAKN,KAAK;yBAK1B,KAAK;wBAKN,KAAK;wBAKL,KAAK;;IAOxB,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACpD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;QACD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;IAClC,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,EAAE,CAAC;YACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;QAClC,CAAC;IACH,CAAC;IAGD,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACrC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACxB,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,CAAC;iBAAM,CAAC;gBACN,wDAAwD;gBACxD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;YAC9E,CAAC;YACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,cAAc,IAAI,OAAO,IAAI,8DAAa;YAChD,gEAAS,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,yBAAyB,GAAI;YAClI,IAAI,CAAC,cAAc,IAAI,KAAK,IAAI,8DAAa,CACzC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, EventEmitter, Host, Prop, h, Element, Event, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'je-checkbox',\n  styleUrl: 'je-checkbox.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class JeCheckbox {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el!: HTMLElement;\n  private originalValue?: boolean;\n\n  /**\n   * Whether or not the checkbox is active\n   */\n  @Prop({ mutable: true }) value?: boolean;\n\n  /**\n   * Whether or not the label should go before or after the checkbox\n   */\n  @Prop() labelPlacement: 'start' | 'end' = 'end';\n\n  /**\n   * If the checkbox should contain a 3rd indeterminate state\n   */\n  @Prop({ reflect: true }) indeterminate = false;\n\n  /**\n   * Will hide the checkbox and just display the label\n   */\n  @Prop() labelOnly = false;\n\n  /**\n   * Shows the readonly state and prevents changes\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Shows the disabled state and prevents changes\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Emits the current value whenever it's state changes\n   */\n  @Event({ bubbles: false }) valueChange: EventEmitter<boolean | undefined>;\n\n  componentWillLoad() {\n    if (this.value === undefined && !this.indeterminate) {\n      this.value = false;\n    }\n    this.originalValue = this.value;\n  }\n\n  formResetCallback() {\n    if (this.value !== this.originalValue) {\n      this.value = this.originalValue;\n    }\n  }\n\n  @Listen('click')\n  onClick() {\n    if (!this.readonly && !this.disabled) {\n      if (!this.indeterminate) {\n        this.value = !this.value;\n      } else {\n        // when indeterminate, the flow is false -> true -> null\n        this.value = this.value == false ? true : this.value == true ? null : false;\n      }\n      this.valueChange.emit(this.value);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.labelPlacement == 'start' && <slot></slot>}\n        <je-icon icon={this.value === true ? 'check_box' : this.value === false ? 'check_box_outline_blank' : 'indeterminate_check_box'} />\n        {this.labelPlacement == 'end' && <slot></slot>}\n      </Host>\n    );\n  }\n}\n"]}