jebamo 0.0.1 → 0.0.2

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

@@ -0,0 +1,71 @@
+import { Host, h } from "@stencil/core";
+export class JeDrawer {
+    constructor() {
+        this.state = 'closed';
+    }
+    componentDidLoad() {
+        this.pageEl = this.el.closest('je-page');
+        this.parentEl = this.el.parentElement;
+    }
+    async stateChangeHandler(newValue) {
+        if (newValue == 'open') {
+            this.el.remove();
+            this.pageEl.append(this.el);
+        }
+        else {
+            this.el.remove();
+            this.parentEl.append(this.el);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'af9feae455f378cb203bbb62eda5cc05d62dce70', slot: 'overlay' }, h("div", { key: '7ae88770955b96ff62bf63c035ea4c84a47e238e', part: 'container' }, h("slot", { key: 'd419fa2f162aab9ad14d25568363b0184dcc3031' })), h("div", { key: '389e815994b313640cd2efb85e6788219624cd77', onClick: () => this.state = 'closed', class: 'backdrop' })));
+    }
+    static get is() { return "je-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-drawer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DrawerState",
+                    "resolved": "\"closed\" | \"open\"",
+                    "references": {
+                        "DrawerState": {
+                            "location": "local",
+                            "path": "/Users/psg/src/jebamo/packages/core/src/components/je-drawer/je-drawer.tsx",
+                            "id": "src/components/je-drawer/je-drawer.tsx::DrawerState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": true,
+                "defaultValue": "'closed'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "state",
+                "methodName": "stateChangeHandler"
+            }];
+    }
+}
+//# sourceMappingURL=je-drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"je-drawer.js","sourceRoot":"","sources":["../../../src/components/je-drawer/je-drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AASzE,MAAM,OAAO,QAAQ;;qBAE0C,QAAQ;;IAIrE,gBAAgB;QACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;IACxC,CAAC;IAGD,KAAK,CAAC,kBAAkB,CAAC,QAAqB;QAC5C,IAAI,QAAQ,IAAI,MAAM,EAAE,CAAC;YACvB,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;YACjB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,SAAS;YAClB,4DAAK,IAAI,EAAC,WAAW;gBACnB,8DAAO,CACH;YACN,4DAAK,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,EAAG,KAAK,EAAC,UAAU,GAAO,CAC9D,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, Watch } from '@stencil/core';\n\nexport type DrawerState = 'open' | 'closed';\n\n@Component({\n  tag: 'je-drawer',\n  styleUrl: 'je-drawer.scss',\n  shadow: true,\n})\nexport class JeDrawer {\n  @Element() el!: HTMLElement;\n  @Prop({ reflect: true, mutable: true }) state: DrawerState = 'closed';\n  private pageEl: HTMLElement;\n  private parentEl: HTMLElement;\n\n  componentDidLoad() {\n    this.pageEl = this.el.closest('je-page');\n    this.parentEl = this.el.parentElement;\n  }\n\n  @Watch('state')\n  async stateChangeHandler(newValue: DrawerState) {\n    if (newValue == 'open') {\n      this.el.remove();\n      this.pageEl.append(this.el);\n    } else {\n      this.el.remove();\n      this.parentEl.append(this.el);\n    }\n  }\n\n  render() {\n    return (\n      <Host slot='overlay'>\n        <div part='container'>\n          <slot/>\n        </div>\n        <div onClick={() => this.state = 'closed' } class='backdrop'></div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,21 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  width: 300px;
+  border: 1px dashed var(--je-text-color);
+  border-radius: var(--je-border-radius);
+  color: var(--je-text-color);
+  background-color: var(--je-background-color);
+  transition: border-color 250ms, background-color 250ms;
+}
+
+:host(.hover) {
+  border-color: var(--je-primary-500);
+  background-color: var(--je-medium-100);
+}
+
+:host([darkmode].hover) {
+  background-color: var(--je-medium-850);
+}

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

@@ -0,0 +1,86 @@
+import { Host, h } from "@stencil/core";
+export class JeDropzone {
+    handleThemeChange(e) {
+        this.el.toggleAttribute('darkmode', e.detail == 'dark');
+    }
+    onDrop(e) {
+        e.preventDefault();
+        this.el.classList.remove('hover');
+        this.dataDrop.emit(e.dataTransfer);
+    }
+    onDragOver(e) {
+        e.preventDefault();
+        this.el.classList.add('hover');
+    }
+    onDragLeave(e) {
+        e.preventDefault();
+        this.el.classList.remove('hover');
+    }
+    render() {
+        return (h(Host, { key: '429fde45a6ef766fdb8d3212a92759ac3206aae1' }, h("div", { key: 'ea9a99fac7c311e0368de0af20141c6302f882c3', part: "content-container" }, h("slot", { key: '9132da72c448411aa8d4aa60a30d93d7dfd161fa' }))));
+    }
+    static get is() { return "je-dropzone"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-dropzone.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-dropzone.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dataDrop",
+                "name": "dataDrop",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "DataTransfer",
+                    "resolved": "DataTransfer",
+                    "references": {
+                        "DataTransfer": {
+                            "location": "global",
+                            "id": "global::DataTransfer"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "themeChange",
+                "method": "handleThemeChange",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "drop",
+                "method": "onDrop",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "dragover",
+                "method": "onDragOver",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "dragleave",
+                "method": "onDragLeave",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=je-dropzone.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"je-dropzone.js","sourceRoot":"","sources":["../../../src/components/je-dropzone/je-dropzone.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzF,MAAM,OAAO,UAAU;IAKrB,iBAAiB,CAAC,CAAgC;QAChD,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,CAAA;IACzD,CAAC;IAGD,MAAM,CAAC,CAAY;QACjB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QACjC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;IACrC,CAAC;IAGD,UAAU,CAAC,CAAY;QACrB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IAChC,CAAC;IAGD,WAAW,CAAC,CAAY;QACtB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IACnC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,IAAI,EAAC,mBAAmB;gBAC3B,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-dropzone',\n  styleUrl: 'je-dropzone.scss',\n  shadow: true,\n})\nexport class JeDropzone {\n  @Element() el!: HTMLJeDropzoneElement;\n  @Event() dataDrop: EventEmitter<DataTransfer>;\n\n  @Listen('themeChange', { target: 'body' })\n  handleThemeChange(e: CustomEvent<'light' | 'dark'>) {\n    this.el.toggleAttribute('darkmode', e.detail == 'dark')\n  }\n\n  @Listen('drop', { passive: false })\n  onDrop(e: DragEvent) {\n    e.preventDefault();\n    this.el.classList.remove('hover')\n    this.dataDrop.emit(e.dataTransfer);\n  }\n\n  @Listen('dragover', { passive: false })\n  onDragOver(e: DragEvent) {\n    e.preventDefault();\n    this.el.classList.add('hover')\n  }\n\n  @Listen('dragleave', { passive: false })\n  onDragLeave(e: DragEvent) {\n    e.preventDefault();\n    this.el.classList.remove('hover')\n  }\n\n  render() {\n    return (\n      <Host>\n        <div part=\"content-container\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+}
+
+:host(:not([gap=none])) form {
+  gap: var(--je-spacing, 16px);
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+}

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

@@ -0,0 +1,95 @@
+import { h } from "@stencil/core";
+export class JeForm {
+    constructor() {
+        this.gap = 'default';
+    }
+    async handleSubmit(event) {
+        event.preventDefault();
+        const formData = new FormData(this.el);
+        this.formData.emit(formData);
+    }
+    handleKeyup(event) {
+        if (event.key === 'Enter') {
+            const submitButton = this.el.querySelector('button[type=submit]');
+            if (submitButton) {
+                submitButton.click();
+            }
+        }
+    }
+    render() {
+        return (h("form", { key: 'a1bdda6c842835ef6db2f81f09ac709606b77808', ref: el => this.el = el }, h("slot", { key: 'c191310d0efffc71bf16d17a33d92881bd653a9e' })));
+    }
+    static get is() { return "je-form"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-form.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'default'",
+                    "resolved": "\"default\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Removes the default gap between elements passed in"
+                },
+                "attribute": "gap",
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "formData",
+                "name": "formData",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FormData",
+                    "resolved": "FormData",
+                    "references": {
+                        "FormData": {
+                            "location": "global",
+                            "id": "global::FormData"
+                        }
+                    }
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "submit",
+                "method": "handleSubmit",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyup",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=je-form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"je-form.js","sourceRoot":"","sources":["../../../src/components/je-form/je-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOhF,MAAM,OAAO,MAAM;;mBAQiB,SAAS;;IAG3C,KAAK,CAAC,YAAY,CAAC,KAAkB;QACnC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACvC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC9B,CAAC;IAGD,WAAW,CAAC,KAAoB;QAC9B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC1B,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAA6B,CAAC;YAC9F,IAAI,YAAY,EAAE,CAAC;gBACjB,YAAY,CAAC,KAAK,EAAE,CAAC;YACvB,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,6DAAM,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE;YAC3B,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-form',\n  styleUrl: 'je-form.scss',\n  scoped: true\n})\nexport class JeForm {\n  private el!: HTMLFormElement;\n\n  @Event() formData: EventEmitter<FormData>;\n\n  /**\n   * Removes the default gap between elements passed in\n   */\n  @Prop() gap: 'none' | 'default' = 'default';\n\n  @Listen('submit')\n  async handleSubmit(event: SubmitEvent) {\n    event.preventDefault();\n    const formData = new FormData(this.el);\n    this.formData.emit(formData)\n  }\n\n  @Listen('keydown')\n  handleKeyup(event: KeyboardEvent) {\n    if (event.key === 'Enter') {\n      const submitButton = this.el.querySelector('button[type=submit]') as HTMLButtonElement | null;\n      if (submitButton) {\n        submitButton.click();\n      }\n    }\n  }\n\n  render() {\n    return (\n      <form ref={el => this.el = el}>\n        <slot />\n      </form>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,60 @@
+:host {
+  /**
+   * @prop --je-fill: 1 or 0, true or false
+   * @prop --je-weight: icon weight
+   * @prop --je-grade: Emphasis?
+   * @prop --je-optical: Stroke weight
+   */
+  --je-fill: 0;
+  --je-weight: 400;
+  --je-grade: 0;
+  --je-optical: 24;
+  display: block;
+  cursor: default;
+  font-family: "Material Symbols Rounded";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: unset;
+  letter-spacing: normal;
+  text-transform: none;
+  user-select: none;
+  -webkit-user-select: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings: "FILL" var(--je-fill), "wght" var(--je-weight), "GRAD" var(--je-grade), "opsz" var(--je-optical);
+}
+
+:host([fill]) {
+  --je-fill: 1;
+}
+
+:host([size=sm]) {
+  --je-optical: 20;
+  font-size: 20px;
+}
+
+:host([size=md]) {
+  --je-optical: 24;
+  font-size: 24px;
+}
+
+:host([size=lg]) {
+  --je-optical: 40;
+  font-size: 40px;
+}
+
+:host([size=xl]) {
+  --je-optical: 48;
+  font-size: 48px;
+}
+
+:host([grade=low]) {
+  --je-grade: -25;
+}
+
+:host([grade=high]) {
+  --je-grade: 200;
+}

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

@@ -0,0 +1,122 @@
+import { Host, h } from "@stencil/core";
+export class JeIcon {
+    constructor() {
+        this.icon = undefined;
+        this.size = 'md';
+        this.fill = undefined;
+        this.grade = undefined;
+        this.weight = undefined;
+    }
+    componentDidLoad() {
+        if (this.weight) {
+            this.el.style.setProperty('--je-weight', this.weight.toString());
+        }
+    }
+    render() {
+        return (h(Host, { key: '97337aa9c29d8edcda89217af52c6263a286fd7b' }, this.icon));
+    }
+    static get is() { return "je-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Google material icon name"
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg' | 'xl'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the icon"
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'md'"
+            },
+            "fill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the icon should be filled"
+                },
+                "attribute": "fill",
+                "reflect": true
+            },
+            "grade": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'high' | 'low'",
+                    "resolved": "\"high\" | \"low\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon grade"
+                },
+                "attribute": "grade",
+                "reflect": true
+            },
+            "weight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon weight"
+                },
+                "attribute": "weight",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=je-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"je-icon.js","sourceRoot":"","sources":["../../../src/components/je-icon/je-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,MAAM;;;oBAO0C,IAAI;;;;;IAW/D,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;QACnE,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'je-icon',\n  styleUrl: 'je-icon.scss',\n  shadow: true,\n})\nexport class JeIcon {\n  @Element() el!: HTMLJeIconElement;\n\n  /** Google material icon name */\n  @Prop() icon: string;\n\n  /** Size of the icon */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n  /** Whether or not the icon should be filled */\n  @Prop({ reflect: true }) fill?: boolean;\n\n  /** Icon grade */\n  @Prop({ reflect: true }) grade?: 'high' | 'low';\n\n  /** Icon weight */\n  @Prop() weight?: number;\n\n  componentDidLoad() {\n    if (this.weight) {\n      this.el.style.setProperty('--je-weight', this.weight.toString());\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.icon}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,18 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+[part=scroll-container] {
+  flex: 1;
+}
+
+[part=intersect-container] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,119 @@
+import { Host, h } from "@stencil/core";
+export class JeInfinite {
+    constructor() {
+        this.handleEntry = (entries) => {
+            const intersecting = entries[0].isIntersecting;
+            if (intersecting) {
+                console.log('intersecting');
+                this.intersect.emit();
+            }
+            else {
+                console.log('not intersecting');
+            }
+        };
+        this.loading = false;
+        this.threshold = 0.8;
+        this.rootMargin = '0px';
+    }
+    componentDidLoad() {
+        this.observer = new IntersectionObserver(this.handleEntry, {
+            root: this.element,
+            rootMargin: this.rootMargin,
+            threshold: this.threshold
+        });
+        this.observer.observe(this.viewportEl);
+    }
+    render() {
+        return (h(Host, { key: '98100d06e1ca2c1c4777ad41597430c7681fddae' }, h("div", { key: 'edd6bb1ad21584c35752eff5715aaad9da2f1b49', part: 'scroll-container' }, h("slot", { key: '59a0d3e0f772b7747ec4a87e66faf7d1e345f7b9' })), h("div", { key: 'e9267517e8b676d899ef007753f899ca12621d2b', part: 'intersect-container', style: { opacity: this.loading ? '1' : '0' }, ref: el => this.viewportEl = el }, h("slot", { key: '4fff97122df1fdb7402b4d305b0860a5d2a82122', name: 'content' }))));
+    }
+    static get is() { return "je-infinite"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-infinite.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-infinite.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This must be manually set to true/false to show/hide the intersecting content"
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "threshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Threshold passed to observer api"
+                },
+                "attribute": "threshold",
+                "reflect": false,
+                "defaultValue": "0.8"
+            },
+            "rootMargin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to observer api"
+                },
+                "attribute": "root-margin",
+                "reflect": false,
+                "defaultValue": "'0px'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "intersect",
+                "name": "intersect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the bottom of the scroll container is in the viewport"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=je-infinite.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"je-infinite.js","sourceRoot":"","sources":["../../../src/components/je-infinite/je-infinite.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,eAAe,CAAC;AAOvF,MAAM,OAAO,UAAU;;QAmCb,gBAAW,GAAiC,CAAC,OAAO,EAAE,EAAE;YAC9D,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;YAC/C,IAAI,YAAY,EAAE,CAAC;gBACjB,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;gBAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAA;YACjC,CAAC;QACH,CAAC,CAAA;uBAnCiB,KAAK;yBAUH,GAAG;0BAKF,KAAK;;IAE1B,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,WAAW,EAAE;YACzD,IAAI,EAAE,IAAI,CAAC,OAAO;YAClB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC;IAYD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,IAAI,EAAC,kBAAkB;gBAC1B,8DAAO,CACH;YACN,4DAAK,IAAI,EAAC,qBAAqB,EAAC,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE;gBACzG,6DAAM,IAAI,EAAC,SAAS,GAAE,CAClB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Event, EventEmitter, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'je-infinite',\n  styleUrl: 'je-infinite.scss',\n  shadow: true,\n})\nexport class JeInfinite {\n  @Element() element!: HTMLElement;\n  private observer!: IntersectionObserver;\n  private viewportEl!: HTMLElement;\n\n  /**\n   * This must be manually set to true/false to show/hide the intersecting content\n   */\n  @Prop() loading = false;\n\n  /**\n   * Emitted when the bottom of the scroll container is in the viewport\n   */\n  @Event() intersect: EventEmitter<void>;\n\n  /**\n   * Threshold passed to observer api\n   */\n  @Prop() threshold = 0.8;\n\n  /**\n   * Passed to observer api\n   */\n  @Prop() rootMargin = '0px';\n\n  componentDidLoad() {\n    this.observer = new IntersectionObserver(this.handleEntry, {\n      root: this.element,\n      rootMargin: this.rootMargin,\n      threshold: this.threshold\n    });\n\n    this.observer.observe(this.viewportEl);\n  }\n\n  private handleEntry: IntersectionObserverCallback = (entries) => {\n    const intersecting = entries[0].isIntersecting;\n    if (intersecting) {\n      console.log('intersecting')\n      this.intersect.emit();\n    } else {\n      console.log('not intersecting')\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div part='scroll-container'>\n          <slot/>\n        </div>\n        <div part='intersect-container' style={{opacity: this.loading ? '1' : '0'}} ref={el => this.viewportEl = el}>\n          <slot name='content'/>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}