jebamo 0.0.1 → 0.0.2

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

@@ -0,0 +1,499 @@
+import { Host, h } from "@stencil/core";
+import { animationUpdate } from "../../utils/utils";
+export class JePopover {
+    constructor() {
+        this.handleContentClick = () => {
+            if (this.isOpen && this.dismissOnClick) {
+                this.dismiss('contentClickDismiss');
+            }
+        };
+        this.handleBackdropClick = () => {
+            if (this.isOpen && this.backdropDismiss) {
+                this.dismiss('backdropDismiss');
+            }
+        };
+        this.isOpen = false;
+        this.trigger = undefined;
+        this.showBackdrop = false;
+        this.backdropDismiss = true;
+        this.dismissOnClick = false;
+        this.position = 'element';
+        this.offsetX = 10;
+        this.offsetY = 10;
+        this.triggerAction = 'click';
+    }
+    componentDidLoad() {
+        this.pagEl = this.el.closest('je-page');
+        this.parentEl = this.el.parentElement;
+        if (this.trigger) {
+            this.triggerElement = document.getElementById(this.trigger);
+            if (this.triggerElement && this.triggerAction == 'click') {
+                this.triggerElement.addEventListener("click", () => this.present(this.position));
+            }
+            else if (this.triggerElement && this.triggerAction == 'hover') {
+                this.triggerElement.addEventListener("mouseover", async (ev) => {
+                    await this.present(this.position, ev);
+                    this.triggerElement.addEventListener("mouseleave", () => this.dismiss('hoverDismiss'), { once: true });
+                });
+            }
+            else if (this.triggerElement && this.triggerAction == 'context-menu') {
+                this.triggerElement.addEventListener("contextmenu", ev => {
+                    ev.preventDefault();
+                    this.present(this.position, ev);
+                });
+            }
+            else {
+                console.error('Failed to find popover trigger element:', this.trigger);
+            }
+        }
+    }
+    handleThemeChange(e) {
+        this.el.toggleAttribute('darkmode', e.detail == 'dark');
+    }
+    handleWindowClick(ev) {
+        this.mouseEvent = ev;
+    }
+    /**
+     * Used internally to present the popover. Can also be used to manually
+     * present it if needed. Will auto position itself using the specified
+     * position strategy. If no target is provided, it will use the last mouse
+     * event on the window or the trigger element.
+     * @param positionStrategy The strategy to use when positioning the popover
+     * @param target Can optionally override the target the popover bases it's position off of
+     */
+    async present(positionStrategy, target) {
+        var _a;
+        if (!this.isOpen) {
+            if (this.parentEl) {
+                if (this.pagEl) {
+                    this.pagEl.append(this.el);
+                }
+                else {
+                    document.body.append(this.el);
+                }
+            }
+            this.isOpen = true;
+            if (positionStrategy !== 'none') {
+                this.contentEl.removeAttribute('style');
+                await animationUpdate();
+                const { offsetX, offsetY } = this;
+                const contentHeight = this.contentEl.clientHeight;
+                const rightThreshold = window.innerWidth / 2;
+                const bottomThreshold = window.innerHeight - 20 - contentHeight;
+                if (positionStrategy == 'click') {
+                    target !== null && target !== void 0 ? target : (target = this.mouseEvent);
+                    const { pageX, pageY } = target;
+                    const isNearRight = pageX > rightThreshold;
+                    const isNearBottom = pageY > bottomThreshold;
+                    const isNearTop = pageY - offsetY - contentHeight < 0;
+                    if (isNearRight) {
+                        this.contentEl.style.left = `${pageX - offsetX - this.contentEl.clientWidth}px`;
+                    }
+                    else {
+                        this.contentEl.style.left = `${pageX + offsetX}px`;
+                    }
+                    if (isNearBottom && !isNearTop) {
+                        this.contentEl.style.top = `${pageY - offsetY - contentHeight}px`;
+                    }
+                    else if (isNearBottom && isNearTop) {
+                        this.contentEl.style.overflowY = 'auto';
+                        if (pageY > window.innerHeight - pageY) {
+                            this.contentEl.style.top = `${offsetY}px`;
+                            this.contentEl.style.maxHeight = `${pageY}px`;
+                        }
+                        else {
+                            this.contentEl.style.top = `${pageY + offsetY}px`;
+                            this.contentEl.style.maxHeight = `${window.innerHeight - 20 - pageY}px`;
+                        }
+                    }
+                    else {
+                        this.contentEl.style.top = `${pageY + offsetY}px`;
+                    }
+                }
+                else {
+                    target !== null && target !== void 0 ? target : (target = ((_a = this.triggerElement) !== null && _a !== void 0 ? _a : this.mouseEvent.target));
+                    const boundingRect = target.getBoundingClientRect();
+                    const { x: pageX, y: pageY } = boundingRect;
+                    const isNearRight = pageX > rightThreshold;
+                    const isNearBottom = pageY > bottomThreshold;
+                    const isNearTop = pageY - offsetY - contentHeight < 0;
+                    const triggerElement = target;
+                    const { left, bottom, top, right } = triggerElement.getBoundingClientRect();
+                    this.contentEl.style.boxSizing = 'border-box';
+                    if (isNearRight) {
+                        this.contentEl.style.left = `${right - this.contentEl.clientWidth}px`;
+                    }
+                    else {
+                        this.contentEl.style.left = `${left}px`;
+                    }
+                    if (isNearBottom && !isNearTop) {
+                        this.contentEl.style.top = `${top - offsetY - contentHeight}px`;
+                    }
+                    else if (isNearBottom && isNearTop) {
+                        this.contentEl.style.overflowY = 'auto';
+                        if (pageY > window.innerHeight - pageY) {
+                            this.contentEl.style.top = `${offsetY}px`;
+                            this.contentEl.style.maxHeight = `${top}px`;
+                        }
+                        else {
+                            this.contentEl.style.top = `${bottom + offsetY}px`;
+                            this.contentEl.style.maxHeight = `${window.innerHeight - 20 - bottom}px`;
+                        }
+                    }
+                    else {
+                        this.contentEl.style.top = `${bottom + offsetY}px`;
+                    }
+                }
+            }
+            return new Promise(resolve => {
+                this.contentEl.addEventListener('transitionend', () => {
+                    this.didPresent.emit();
+                    resolve();
+                }, { once: true });
+                if (this.triggerAction !== 'hover') {
+                    this.backdropEl.classList.add('fade');
+                }
+                this.contentEl.classList.add('open');
+            });
+        }
+    }
+    /** Manually dismisses the popover. Role and data get passed to the didDismiss event. */
+    async dismiss(role = 'manualDismiss', data) {
+        if (this.isOpen) {
+            return new Promise(resolve => {
+                this.contentEl.addEventListener('transitionend', () => {
+                    if (this.parentEl) {
+                        this.el.remove();
+                        this.parentEl.append(this.el);
+                    }
+                    this.isOpen = false;
+                    this.didDismiss.emit({ role: role, data: data });
+                    resolve();
+                }, { once: true });
+                if (this.triggerAction !== 'hover') {
+                    this.backdropEl.classList.remove('fade');
+                }
+                this.contentEl.classList.remove('open');
+            });
+        }
+    }
+    render() {
+        return (h(Host, { key: '1de5a4aef076c6296b9c64b96028cc6f4998a40a', slot: "overlay" }, h("div", { key: '845a3c97b059371422707c785707aa499146f2dd', part: "content", ref: el => this.contentEl = el, onClick: this.handleContentClick, class: { 'content-transition': true, content: this.isOpen } }, this.isOpen && h("slot", { key: '436d0ed78d49a6471760da0057fcc75cfbd0dd44' })), this.triggerAction !== 'hover' &&
+            h("div", { key: '1ec70ebb3246b78533e7250eda5d200212b795ad', ref: el => this.backdropEl = el, onClick: this.handleBackdropClick, class: {
+                    'backdrop-transition': true,
+                    backdrop: this.isOpen,
+                    clear: !this.showBackdrop && this.isOpen
+                } })));
+    }
+    static get is() { return "je-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-popover.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The id of the element that will present the menu on click.\nIf not provided, you will have to manually present the popover\nusing present()."
+                },
+                "attribute": "trigger",
+                "reflect": false
+            },
+            "showBackdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the backdrop will be visible to the user"
+                },
+                "attribute": "show-backdrop",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "backdropDismiss": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Backdrop will dismiss the popover on click when enabled"
+                },
+                "attribute": "backdrop-dismiss",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "dismissOnClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Popover will automatically dismiss itself when something is\nclicked in the popover when enabled"
+                },
+                "attribute": "dismiss-on-click",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PositionStrategy",
+                    "resolved": "\"click\" | \"element\" | \"none\"",
+                    "references": {
+                        "PositionStrategy": {
+                            "location": "local",
+                            "path": "/Users/psg/src/jebamo/packages/core/src/components/je-popover/je-popover.tsx",
+                            "id": "src/components/je-popover/je-popover.tsx::PositionStrategy"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If the popover should auto position itself using the mouse event or\nthe triggerElement."
+                },
+                "attribute": "position",
+                "reflect": false,
+                "defaultValue": "'element'"
+            },
+            "offsetX": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Horizontal offset used when auto positioning the popover content"
+                },
+                "attribute": "offset-x",
+                "reflect": false,
+                "defaultValue": "10"
+            },
+            "offsetY": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical offset used when auto positioning the popover content"
+                },
+                "attribute": "offset-y",
+                "reflect": false,
+                "defaultValue": "10"
+            },
+            "triggerAction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'click' | 'hover' | 'context-menu'",
+                    "resolved": "\"click\" | \"context-menu\" | \"hover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "click",
+                            "text": "Popover will show on left click or tap on mobile."
+                        }, {
+                            "name": "context-menu",
+                            "text": "Popover will show on right click or press on mobile."
+                        }, {
+                            "name": "hover",
+                            "text": "Popover will show on hover or tap on mobile. No backdrop will be rendered."
+                        }],
+                    "text": ""
+                },
+                "attribute": "trigger-action",
+                "reflect": false,
+                "defaultValue": "'click'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "didPresent",
+                "name": "didPresent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits whenever the popover has presented. Does not emit any data"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "didDismiss",
+                "name": "didDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits whenever the popover has finished dismissing. Emits the role\nand optional data object passed to the dismiss() method."
+                },
+                "complexType": {
+                    "original": "{ role?: string, data?: any }",
+                    "resolved": "{ role?: string; data?: any; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "present": {
+                "complexType": {
+                    "signature": "<T extends PositionStrategy>(positionStrategy: T, target?: Target<T>) => Promise<void>",
+                    "parameters": [{
+                            "name": "positionStrategy",
+                            "type": "T",
+                            "docs": "The strategy to use when positioning the popover"
+                        }, {
+                            "name": "target",
+                            "type": "T extends \"click\" ? MouseEvent : T extends \"element\" ? HTMLElement : never",
+                            "docs": "Can optionally override the target the popover bases it's position off of"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "PositionStrategy": {
+                            "location": "local",
+                            "path": "/Users/psg/src/jebamo/packages/core/src/components/je-popover/je-popover.tsx",
+                            "id": "src/components/je-popover/je-popover.tsx::PositionStrategy"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        },
+                        "Target": {
+                            "location": "local",
+                            "path": "/Users/psg/src/jebamo/packages/core/src/components/je-popover/je-popover.tsx",
+                            "id": "src/components/je-popover/je-popover.tsx::Target"
+                        },
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Used internally to present the popover. Can also be used to manually\npresent it if needed. Will auto position itself using the specified\nposition strategy. If no target is provided, it will use the last mouse\nevent on the window or the trigger element.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "positionStrategy The strategy to use when positioning the popover"
+                        }, {
+                            "name": "param",
+                            "text": "target Can optionally override the target the popover bases it's position off of"
+                        }]
+                }
+            },
+            "dismiss": {
+                "complexType": {
+                    "signature": "(role?: string, data?: any) => Promise<void>",
+                    "parameters": [{
+                            "name": "role",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "data",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Manually dismisses the popover. Role and data get passed to the didDismiss event.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "themeChange",
+                "method": "handleThemeChange",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleWindowClick",
+                "target": "window",
+                "capture": true,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=je-popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"je-popover.js","sourceRoot":"","sources":["../../../src/components/je-popover/je-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAgB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9G,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAUpD,MAAM,OAAO,SAAS;;QA0FZ,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACvC,IAAI,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;YACtC,CAAC;QACH,CAAC,CAAA;QAsIO,wBAAmB,GAAG,GAAG,EAAE;YACjC,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBACxC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;YAClC,CAAC;QACH,CAAC,CAAA;sBAzNiB,KAAK;;4BAUA,KAAK;+BAGF,IAAI;8BAML,KAAK;wBAMO,SAAS;uBAG5B,EAAE;uBAGF,EAAE;6BAOwC,OAAO;;IAWnE,gBAAgB;QACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAgB,CAAC;QACvD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;QACtC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC5D,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,IAAI,OAAO,EAAE,CAAC;gBACzD,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnF,CAAC;iBAAM,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,IAAI,OAAO,EAAE,CAAC;gBAChE,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,EAAC,EAAE,EAAC,EAAE;oBAC3D,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;oBACtC,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAClC,YAAY,EACZ,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAClC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;gBACpB,CAAC,CAAC,CAAC;YACL,CAAC;iBAAM,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,IAAI,cAAc,EAAE,CAAC;gBACvE,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,aAAa,EAAE,EAAE,CAAC,EAAE;oBACvD,EAAE,CAAC,cAAc,EAAE,CAAC;oBACpB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBAClC,CAAC,CAAC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,KAAK,CAAC,yCAAyC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACzE,CAAC;QACH,CAAC;IACH,CAAC;IASD,iBAAiB,CAAC,CAAgC;QAChD,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,CAAA;IACzD,CAAC;IAGS,iBAAiB,CAAC,EAAc;QACxC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;IACvB,CAAC;IAED;;;;;;;OAOG;IAEH,KAAK,CAAC,OAAO,CAA6B,gBAAmB,EAAE,MAAkB;;QAC/E,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBACf,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;gBAC5B,CAAC;qBAAM,CAAC;oBACN,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBAChC,CAAC;YACH,CAAC;YACD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YAEnB,IAAI,gBAAgB,KAAK,MAAM,EAAE,CAAC;gBAChC,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;gBACxC,MAAM,eAAe,EAAE,CAAC;gBACxB,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;gBAClC,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;gBAClD,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,GAAG,CAAC,CAAC;gBAC7C,MAAM,eAAe,GAAG,MAAM,CAAC,WAAW,GAAG,EAAE,GAAG,aAAa,CAAC;gBAEhE,IAAI,gBAAgB,IAAI,OAAO,EAAE,CAAC;oBAChC,MAAM,aAAN,MAAM,cAAN,MAAM,IAAN,MAAM,GAAK,IAAI,CAAC,UAAuB,EAAC;oBACxC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,MAAoB,CAAC;oBAC9C,MAAM,WAAW,GAAG,KAAK,GAAG,cAAc,CAAC;oBAC3C,MAAM,YAAY,GAAG,KAAK,GAAG,eAAe,CAAC;oBAC7C,MAAM,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,aAAa,GAAG,CAAC,CAAC;oBACtD,IAAI,WAAW,EAAE,CAAC;wBAChB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,KAAK,GAAG,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,IAAI,CAAC;oBAClF,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,KAAK,GAAG,OAAO,IAAI,CAAC;oBACrD,CAAC;oBAED,IAAI,YAAY,IAAI,CAAC,SAAS,EAAE,CAAC;wBAC/B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,KAAK,GAAG,OAAO,GAAG,aAAa,IAAI,CAAC;oBACpE,CAAC;yBAAM,IAAI,YAAY,IAAI,SAAS,EAAE,CAAC;wBACrC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;wBACxC,IAAI,KAAK,GAAG,MAAM,CAAC,WAAW,GAAG,KAAK,EAAE,CAAC;4BACvC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,OAAO,IAAI,CAAC;4BAC1C,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,KAAK,IAAI,CAAC;wBAChD,CAAC;6BAAM,CAAC;4BACN,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,KAAK,GAAG,OAAO,IAAI,CAAC;4BAClD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,MAAM,CAAC,WAAW,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;wBAC1E,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,KAAK,GAAG,OAAO,IAAI,CAAC;oBACpD,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,MAAM,aAAN,MAAM,cAAN,MAAM,IAAN,MAAM,GAAK,CAAC,MAAA,IAAI,CAAC,cAAc,mCAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAc,EAAC;oBACxE,MAAM,YAAY,GAAI,MAAsB,CAAC,qBAAqB,EAAE,CAAC;oBACrE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,YAAY,CAAC;oBAC5C,MAAM,WAAW,GAAG,KAAK,GAAG,cAAc,CAAC;oBAC3C,MAAM,YAAY,GAAG,KAAK,GAAG,eAAe,CAAC;oBAC7C,MAAM,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,aAAa,GAAG,CAAC,CAAC;oBACtD,MAAM,cAAc,GAAG,MAAqB,CAAC;oBAC7C,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC,qBAAqB,EAAE,CAAC;oBAC5E,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;oBAC9C,IAAI,WAAW,EAAE,CAAC;wBAChB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,IAAI,CAAC;oBACxE,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC;oBAC1C,CAAC;oBAED,IAAI,YAAY,IAAI,CAAC,SAAS,EAAE,CAAC;wBAC/B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,OAAO,GAAG,aAAa,IAAI,CAAC;oBAClE,CAAC;yBAAM,IAAI,YAAY,IAAI,SAAS,EAAE,CAAC;wBACrC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;wBACxC,IAAI,KAAK,GAAG,MAAM,CAAC,WAAW,GAAG,KAAK,EAAE,CAAC;4BACvC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,OAAO,IAAI,CAAC;4BAC1C,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,GAAG,IAAI,CAAC;wBAC9C,CAAC;6BAAM,CAAC;4BACN,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,MAAM,GAAG,OAAO,IAAI,CAAC;4BACnD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,MAAM,CAAC,WAAW,GAAG,EAAE,GAAG,MAAM,IAAI,CAAC;wBAC3E,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,MAAM,GAAG,OAAO,IAAI,CAAC;oBACrD,CAAC;gBACH,CAAC;YACH,CAAC;YAED,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;gBACjC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE;oBACpD,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;oBACvB,OAAO,EAAE,CAAC;gBACZ,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;gBACnB,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO,EAAE,CAAC;oBACnC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;gBACxC,CAAC;gBACD,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YACvC,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,wFAAwF;IAExF,KAAK,CAAC,OAAO,CAAC,IAAI,GAAG,eAAe,EAAE,IAAU;QAC9C,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;gBACjC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE;oBACpD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;wBAClB,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;wBACjB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBAChC,CAAC;oBACD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;oBACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;oBACjD,OAAO,EAAE,CAAC;gBACZ,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;gBACnB,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO,EAAE,CAAC;oBACnC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;gBAC3C,CAAC;gBACD,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YAC1C,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAQD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,SAAS;YAClB,4DAAK,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,IAC9I,IAAI,CAAC,MAAM,IAAI,8DAAa,CACzB;YACL,IAAI,CAAC,aAAa,KAAK,OAAO;gBAC7B,4DAAK,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACrE,KAAK,EAAE;wBACL,qBAAqB,EAAE,IAAI;wBAC3B,QAAQ,EAAE,IAAI,CAAC,MAAM;wBACrB,KAAK,EAAE,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM;qBACzC,GACI,CAEJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, EventEmitter, Listen, Method, Prop, State, Event } from '@stencil/core';\nimport { animationUpdate } from '../../utils/utils';\n\nexport type PositionStrategy = 'none' | 'click' | 'element';\nexport type Target<T extends PositionStrategy> = T extends 'click' ? MouseEvent | undefined : T extends 'element' ? HTMLElement | undefined : never;\n\n@Component({\n  tag: 'je-popover',\n  styleUrl: 'je-popover.scss',\n  shadow: true,\n})\nexport class JePopover {\n  @Element() el!: HTMLJePopoverElement;\n\n  protected parentEl!: HTMLElement;\n\n  protected triggerElement!: HTMLElement;\n\n  protected contentEl!: HTMLElement;\n\n  protected backdropEl!: HTMLElement;\n\n  protected pagEl!: HTMLElement;\n\n  private mouseEvent?: MouseEvent;\n\n  @State() isOpen = false;\n\n  /**\n   * The id of the element that will present the menu on click.\n   * If not provided, you will have to manually present the popover\n   * using present().\n   */\n  @Prop() trigger?: string;\n\n  /** Whether or not the backdrop will be visible to the user */\n  @Prop() showBackdrop = false;\n\n  /** Backdrop will dismiss the popover on click when enabled */\n  @Prop() backdropDismiss = true;\n\n  /**\n   * Popover will automatically dismiss itself when something is\n   * clicked in the popover when enabled\n   */\n  @Prop() dismissOnClick = false;\n\n  /**\n   * If the popover should auto position itself using the mouse event or\n   * the triggerElement.\n   */\n  @Prop() position: PositionStrategy = 'element';\n\n  /** Horizontal offset used when auto positioning the popover content */\n  @Prop() offsetX = 10;\n\n  /** Vertical offset used when auto positioning the popover content */\n  @Prop() offsetY = 10;\n\n  /**\n   * @click Popover will show on left click or tap on mobile.\n   * @context-menu Popover will show on right click or press on mobile.\n   * @hover Popover will show on hover or tap on mobile. No backdrop will be rendered.\n   */\n  @Prop() triggerAction: 'click' | 'hover' | 'context-menu' = 'click';\n\n  /** Emits whenever the popover has presented. Does not emit any data */\n  @Event() didPresent: EventEmitter;\n\n  /**\n   * Emits whenever the popover has finished dismissing. Emits the role\n   * and optional data object passed to the dismiss() method.\n   */\n  @Event() didDismiss: EventEmitter<{ role?: string, data?: any }>;\n\n  componentDidLoad() {\n    this.pagEl = this.el.closest('je-page') as HTMLElement;\n    this.parentEl = this.el.parentElement;\n    if (this.trigger) {\n      this.triggerElement = document.getElementById(this.trigger);\n      if (this.triggerElement && this.triggerAction == 'click') {\n        this.triggerElement.addEventListener(\"click\", () => this.present(this.position));\n      } else if (this.triggerElement && this.triggerAction == 'hover') {\n        this.triggerElement.addEventListener(\"mouseover\", async ev => {\n          await this.present(this.position, ev);\n          this.triggerElement.addEventListener(\n            \"mouseleave\",\n            () => this.dismiss('hoverDismiss'),\n            { once: true });\n        });\n      } else if (this.triggerElement && this.triggerAction == 'context-menu') {\n        this.triggerElement.addEventListener(\"contextmenu\", ev => {\n          ev.preventDefault();\n          this.present(this.position, ev);\n        });\n      } else {\n        console.error('Failed to find popover trigger element:', this.trigger);\n      }\n    }\n  }\n\n  private handleContentClick = () => {\n    if (this.isOpen && this.dismissOnClick) {\n      this.dismiss('contentClickDismiss');\n    }\n  }\n\n  @Listen('themeChange', { target: 'body' })\n  handleThemeChange(e: CustomEvent<'light' | 'dark'>) {\n    this.el.toggleAttribute('darkmode', e.detail == 'dark')\n  }\n\n  @Listen('click', { capture: true, target: 'window' })\n  protected handleWindowClick(ev: MouseEvent) {\n    this.mouseEvent = ev;\n  }\n\n  /**\n   * Used internally to present the popover. Can also be used to manually\n   * present it if needed. Will auto position itself using the specified\n   * position strategy. If no target is provided, it will use the last mouse\n   * event on the window or the trigger element.\n   * @param positionStrategy The strategy to use when positioning the popover\n   * @param target Can optionally override the target the popover bases it's position off of\n   */\n  @Method()\n  async present<T extends PositionStrategy>(positionStrategy: T, target?: Target<T>) {\n    if (!this.isOpen) {\n      if (this.parentEl) {\n        if (this.pagEl) {\n          this.pagEl.append(this.el)\n        } else {\n          document.body.append(this.el);\n        }\n      }\n      this.isOpen = true;\n\n      if (positionStrategy !== 'none') {\n        this.contentEl.removeAttribute('style');\n        await animationUpdate();\n        const { offsetX, offsetY } = this;\n        const contentHeight = this.contentEl.clientHeight;\n        const rightThreshold = window.innerWidth / 2;\n        const bottomThreshold = window.innerHeight - 20 - contentHeight;\n\n        if (positionStrategy == 'click') {\n          target ??= this.mouseEvent as Target<T>;\n          const { pageX, pageY } = target as MouseEvent;\n          const isNearRight = pageX > rightThreshold;\n          const isNearBottom = pageY > bottomThreshold;\n          const isNearTop = pageY - offsetY - contentHeight < 0;\n          if (isNearRight) {\n            this.contentEl.style.left = `${pageX - offsetX - this.contentEl.clientWidth}px`;\n          } else {\n            this.contentEl.style.left = `${pageX + offsetX}px`;\n          }\n\n          if (isNearBottom && !isNearTop) {\n            this.contentEl.style.top = `${pageY - offsetY - contentHeight}px`;\n          } else if (isNearBottom && isNearTop) {\n            this.contentEl.style.overflowY = 'auto';\n            if (pageY > window.innerHeight - pageY) {\n              this.contentEl.style.top = `${offsetY}px`;\n              this.contentEl.style.maxHeight = `${pageY}px`;\n            } else {\n              this.contentEl.style.top = `${pageY + offsetY}px`;\n              this.contentEl.style.maxHeight = `${window.innerHeight - 20 - pageY}px`;\n            }\n          } else {\n            this.contentEl.style.top = `${pageY + offsetY}px`;\n          }\n        } else {\n          target ??= (this.triggerElement ?? this.mouseEvent.target) as Target<T>;\n          const boundingRect = (target as HTMLElement).getBoundingClientRect();\n          const { x: pageX, y: pageY } = boundingRect;\n          const isNearRight = pageX > rightThreshold;\n          const isNearBottom = pageY > bottomThreshold;\n          const isNearTop = pageY - offsetY - contentHeight < 0;\n          const triggerElement = target as HTMLElement;\n          const { left, bottom, top, right } = triggerElement.getBoundingClientRect();\n          this.contentEl.style.boxSizing = 'border-box';\n          if (isNearRight) {\n            this.contentEl.style.left = `${right - this.contentEl.clientWidth}px`;\n          } else {\n            this.contentEl.style.left = `${left}px`;\n          }\n\n          if (isNearBottom && !isNearTop) {\n            this.contentEl.style.top = `${top - offsetY - contentHeight}px`;\n          } else if (isNearBottom && isNearTop) {\n            this.contentEl.style.overflowY = 'auto';\n            if (pageY > window.innerHeight - pageY) {\n              this.contentEl.style.top = `${offsetY}px`;\n              this.contentEl.style.maxHeight = `${top}px`;\n            } else {\n              this.contentEl.style.top = `${bottom + offsetY}px`;\n              this.contentEl.style.maxHeight = `${window.innerHeight - 20 - bottom}px`;\n            }\n          } else {\n            this.contentEl.style.top = `${bottom + offsetY}px`;\n          }\n        }\n      }\n\n      return new Promise<void>(resolve => {\n        this.contentEl.addEventListener('transitionend', () => {\n          this.didPresent.emit();\n          resolve();\n        }, { once: true });\n        if (this.triggerAction !== 'hover') {\n          this.backdropEl.classList.add('fade');\n        }\n        this.contentEl.classList.add('open');\n      });\n    }\n  }\n\n  /** Manually dismisses the popover. Role and data get passed to the didDismiss event. */\n  @Method()\n  async dismiss(role = 'manualDismiss', data?: any) {\n    if (this.isOpen) {\n      return new Promise<void>(resolve => {\n        this.contentEl.addEventListener('transitionend', () => {\n          if (this.parentEl) {\n            this.el.remove();\n            this.parentEl.append(this.el);\n          }\n          this.isOpen = false;\n          this.didDismiss.emit({ role: role, data: data });\n          resolve();\n        }, { once: true });\n        if (this.triggerAction !== 'hover') {\n          this.backdropEl.classList.remove('fade');\n        }\n        this.contentEl.classList.remove('open');\n      });\n    }\n  }\n\n  private handleBackdropClick = () => {\n    if (this.isOpen && this.backdropDismiss) {\n      this.dismiss('backdropDismiss');\n    }\n  }\n\n  render() {\n    return (\n      <Host slot=\"overlay\">\n        <div part=\"content\" ref={el => this.contentEl = el} onClick={this.handleContentClick} class={{ 'content-transition': true, content: this.isOpen }}>\n          {this.isOpen && <slot></slot>}\n        </div>\n        {this.triggerAction !== 'hover' &&\n          <div ref={el => this.backdropEl = el} onClick={this.handleBackdropClick}\n            class={{\n              'backdrop-transition': true,\n              backdrop: this.isOpen,\n              clear: !this.showBackdrop && this.isOpen\n            }}\n          ></div>\n        }\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,59 @@
+:host {
+  position: relative;
+  display: flex;
+  align-items: baseline;
+  gap: var(--je-spacing-2xs, 8px);
+  background-color: var(--je-input-background, field);
+  color: var(--je-input-color, fieldtext);
+  padding: var(--je-spacing-xs, 10px);
+  border-radius: var(--je-border-radius, 2px);
+  border: solid 1px var(--je-border-color);
+  transition: border 125ms ease-in-out;
+  --je-height: 84px;
+  --je-border-color: transparent;
+  --je-input-background: var(--je-medium-100);
+  --je-input-color: var(--je-medium-900);
+}
+
+:host([darkmode]) {
+  --je-input-background: var(--je-medium-850);
+  --je-input-color: var(--je-medium-50);
+}
+
+::slotted([slot=top-right]) {
+  top: 0;
+  right: 0;
+  position: absolute;
+  transform: translate(50%, -50%);
+}
+
+textarea {
+  height: var(--je-height);
+  font-family: var(--je-font-family, inherit);
+  font-size: var(--je-font-size, 1rem);
+  background: transparent;
+  color: inherit;
+  flex: 1;
+  border: none;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  width: inherit;
+}
+textarea::placeholder {
+  font-family: var(--je-font-family, inherit);
+  font-size: var(--je-font-size, 1rem);
+  color: var(--je-medium-600);
+}
+textarea:focus {
+  outline: 0;
+}
+
+label {
+  font-weight: var(--je-font-semi-bold);
+}