le-kit 0.1.5 → 0.1.6

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

@@ -0,0 +1,693 @@
+import { h } from "@stencil/core";
+/**
+ * A popover component for displaying floating content.
+ *
+ * Uses the native HTML Popover API for proper layering with dialogs
+ * and other top-layer elements. Falls back gracefully in older browsers.
+ *
+ * @slot - Content to display inside the popover
+ * @slot trigger - Element that triggers the popover (optional)
+ *
+ * @cmsInternal true
+ * @cmsCategory System
+ */
+export class LePopover {
+    el;
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode;
+    /**
+     * Whether the popover is currently open
+     */
+    open = false;
+    /**
+     * Position of the popover relative to its trigger
+     */
+    position = 'bottom';
+    /**
+     * Alignment of the popover
+     */
+    align = 'start';
+    /**
+     * Optional title for the popover header
+     */
+    popoverTitle;
+    /**
+     * Whether to show a close button in the header
+     */
+    showClose = true;
+    /**
+     * Whether clicking outside closes the popover
+     */
+    closeOnClickOutside = true;
+    /**
+     * Whether pressing Escape closes the popover
+     */
+    closeOnEscape = true;
+    /**
+     * Offset from the trigger element (in pixels)
+     */
+    offset = 8;
+    /**
+     * Fixed width for the popover (e.g., '300px', '20rem')
+     */
+    width;
+    /**
+     * Minimum width for the popover (e.g., '200px', '15rem')
+     */
+    minWidth = '200px';
+    /**
+     * Maximum width for the popover (e.g., '400px', '25rem')
+     */
+    maxWidth;
+    /**
+     * Emitted when the popover opens
+     */
+    lePopoverOpen;
+    /**
+     * Emitted when the popover closes
+     */
+    lePopoverClose;
+    isPositioned = false;
+    triggerEl;
+    popoverEl;
+    uniqueId = `le-popover-${Math.random().toString(36).substr(2, 9)}`;
+    scrollParents = [];
+    componentDidLoad() {
+        // Listen for toggle events from the native popover API
+        this.popoverEl?.addEventListener('toggle', this.handlePopoverToggle);
+        // Listen for other popovers opening to close this one
+        document.addEventListener('le-popover-will-open', this.handleOtherPopoverOpen);
+    }
+    disconnectedCallback() {
+        this.popoverEl?.removeEventListener('toggle', this.handlePopoverToggle);
+        document.removeEventListener('le-popover-will-open', this.handleOtherPopoverOpen);
+        this.removeScrollListeners();
+    }
+    /**
+     * Find all scrollable parent elements
+     */
+    getScrollParents(element) {
+        const scrollParents = [];
+        let parent = element.parentElement;
+        while (parent) {
+            const style = getComputedStyle(parent);
+            const overflow = style.overflow + style.overflowY + style.overflowX;
+            if (/(auto|scroll)/.test(overflow)) {
+                scrollParents.push(parent);
+            }
+            parent = parent.parentElement;
+        }
+        // Always include window for page scroll
+        return scrollParents;
+    }
+    /**
+     * Add scroll listeners to all scrollable parents
+     */
+    addScrollListeners() {
+        if (!this.triggerEl)
+            return;
+        this.scrollParents = this.getScrollParents(this.triggerEl);
+        // Listen to each scroll parent
+        this.scrollParents.forEach(parent => {
+            parent.addEventListener('scroll', this.handleScroll, { passive: true });
+        });
+        // Also listen to window scroll and resize
+        window.addEventListener('scroll', this.handleScroll, { passive: true });
+        window.addEventListener('resize', this.handleScroll, { passive: true });
+    }
+    /**
+     * Remove scroll listeners
+     */
+    removeScrollListeners() {
+        this.scrollParents.forEach(parent => {
+            parent.removeEventListener('scroll', this.handleScroll);
+        });
+        window.removeEventListener('scroll', this.handleScroll);
+        window.removeEventListener('resize', this.handleScroll);
+        this.scrollParents = [];
+    }
+    handleScroll = () => {
+        if (this.open) {
+            this.updatePosition();
+        }
+    };
+    handlePopoverToggle = (event) => {
+        if (event.newState === 'open') {
+            this.open = true;
+            this.addScrollListeners();
+            this.updatePosition();
+            this.lePopoverOpen.emit();
+        }
+        else {
+            this.open = false;
+            this.isPositioned = false;
+            this.removeScrollListeners();
+            this.lePopoverClose.emit();
+        }
+    };
+    handleOtherPopoverOpen = (event) => {
+        const customEvent = event;
+        if (customEvent.detail?.popover === this.el)
+            return;
+        if (this.open) {
+            this.hide();
+        }
+    };
+    /**
+     * Opens the popover
+     */
+    async show() {
+        document.dispatchEvent(new CustomEvent('le-popover-will-open', {
+            detail: { popover: this.el }
+        }));
+        this.popoverEl?.showPopover();
+    }
+    /**
+     * Closes the popover
+     */
+    async hide() {
+        this.popoverEl?.hidePopover();
+    }
+    /**
+     * Toggles the popover
+     */
+    async toggle() {
+        if (this.open) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        this.toggle();
+    };
+    updatePosition() {
+        if (!this.triggerEl || !this.popoverEl)
+            return;
+        const triggerRect = this.triggerEl.getBoundingClientRect();
+        const popoverRect = this.popoverEl.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const viewportPadding = 8;
+        let position = this.position;
+        let align = this.align;
+        // Auto-position logic
+        const spaceBelow = viewportHeight - triggerRect.bottom - viewportPadding;
+        const spaceAbove = triggerRect.top - viewportPadding;
+        const spaceRight = viewportWidth - triggerRect.right - viewportPadding;
+        const spaceLeft = triggerRect.left - viewportPadding;
+        if (position === 'auto') {
+            if (spaceBelow >= popoverRect.height + this.offset) {
+                position = 'bottom';
+            }
+            else if (spaceAbove >= popoverRect.height + this.offset) {
+                position = 'top';
+            }
+            else if (spaceRight >= popoverRect.width + this.offset) {
+                position = 'right';
+            }
+            else if (spaceLeft >= popoverRect.width + this.offset) {
+                position = 'left';
+            }
+            else {
+                const maxSpace = Math.max(spaceBelow, spaceAbove, spaceRight, spaceLeft);
+                if (maxSpace === spaceBelow)
+                    position = 'bottom';
+                else if (maxSpace === spaceAbove)
+                    position = 'top';
+                else if (maxSpace === spaceRight)
+                    position = 'right';
+                else
+                    position = 'left';
+            }
+        }
+        // Adjust alignment for horizontal overflow
+        if (position === 'top' || position === 'bottom') {
+            if (align === 'start' && triggerRect.left + popoverRect.width > viewportWidth - viewportPadding) {
+                align = 'end';
+            }
+            else if (align === 'end' && triggerRect.right - popoverRect.width < viewportPadding) {
+                align = 'start';
+            }
+            else if (align === 'center') {
+                const triggerCenter = triggerRect.left + triggerRect.width / 2;
+                if (triggerCenter - popoverRect.width / 2 < viewportPadding) {
+                    align = 'start';
+                }
+                else if (triggerCenter + popoverRect.width / 2 > viewportWidth - viewportPadding) {
+                    align = 'end';
+                }
+            }
+        }
+        // Calculate position
+        let top = 0;
+        let left = 0;
+        let maxHeight = null;
+        switch (position) {
+            case 'top':
+                top = triggerRect.top - popoverRect.height - this.offset;
+                if (top < viewportPadding) {
+                    maxHeight = triggerRect.top - this.offset - viewportPadding * 2;
+                    top = viewportPadding;
+                }
+                break;
+            case 'bottom':
+                top = triggerRect.bottom + this.offset;
+                if (top + popoverRect.height > viewportHeight - viewportPadding) {
+                    maxHeight = viewportHeight - top - viewportPadding;
+                }
+                break;
+            case 'left':
+                left = triggerRect.left - popoverRect.width - this.offset;
+                top = triggerRect.top;
+                if (left < viewportPadding)
+                    left = viewportPadding;
+                break;
+            case 'right':
+                left = triggerRect.right + this.offset;
+                top = triggerRect.top;
+                if (left + popoverRect.width > viewportWidth - viewportPadding) {
+                    left = viewportWidth - popoverRect.width - viewportPadding;
+                }
+                break;
+        }
+        // Calculate horizontal alignment for top/bottom
+        if (position === 'top' || position === 'bottom') {
+            switch (align) {
+                case 'start':
+                    left = triggerRect.left;
+                    break;
+                case 'center':
+                    left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+                    break;
+                case 'end':
+                    left = triggerRect.right - popoverRect.width;
+                    break;
+            }
+            // Constrain to viewport
+            if (left < viewportPadding) {
+                left = viewportPadding;
+            }
+            else if (left + popoverRect.width > viewportWidth - viewportPadding) {
+                left = viewportWidth - popoverRect.width - viewportPadding;
+            }
+        }
+        // Calculate vertical alignment for left/right
+        if (position === 'left' || position === 'right') {
+            switch (align) {
+                case 'start':
+                    top = triggerRect.top;
+                    break;
+                case 'center':
+                    top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+                    break;
+                case 'end':
+                    top = triggerRect.bottom - popoverRect.height;
+                    break;
+            }
+            if (top < viewportPadding)
+                top = viewportPadding;
+            if (top + popoverRect.height > viewportHeight - viewportPadding) {
+                maxHeight = viewportHeight - top - viewportPadding;
+            }
+        }
+        // Apply styles
+        this.popoverEl.style.top = `${top}px`;
+        this.popoverEl.style.left = `${left}px`;
+        if (maxHeight !== null && maxHeight > 100) {
+            this.popoverEl.style.maxHeight = `${maxHeight}px`;
+            this.popoverEl.style.overflowY = 'auto';
+        }
+        else {
+            this.popoverEl.style.maxHeight = '';
+            this.popoverEl.style.overflowY = '';
+        }
+        this.isPositioned = true;
+    }
+    render() {
+        const popoverStyles = {
+            visibility: this.isPositioned ? 'visible' : 'hidden',
+        };
+        if (this.width)
+            popoverStyles.width = this.width;
+        if (this.minWidth)
+            popoverStyles.minWidth = this.minWidth;
+        if (this.maxWidth)
+            popoverStyles.maxWidth = this.maxWidth;
+        return [
+            h("div", { key: '3d2a3b86ddb3be577bd0e976a5a00f25396a97fb', class: "le-popover-trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '9db2e9e2b0bdb25c5a2361115d2094292fe692ec', name: "trigger" }, h("button", { key: '88d78b192f72731f00d6131b92b8d6a4b445d7f9', type: "button", class: "le-popover-default-trigger" }, h("span", { key: '0f2913f160cda5dcbeb20c714219d587196e230b' }, "\u2295")))),
+            h("div", { key: 'b65d2de900ff6e67a62d92d7452db34afde9f257', id: this.uniqueId, class: "le-popover-content", popover: this.closeOnClickOutside ? 'auto' : 'manual', ref: (el) => (this.popoverEl = el), style: popoverStyles }, (this.popoverTitle || this.showClose) && (h("div", { key: '323061fc49c8e0fc9ae541dfc576e551b0a83818', class: "le-popover-header" }, this.popoverTitle && h("span", { key: 'b1d9f4203966ae6a0bb14186824596643954d6f8', class: "le-popover-title" }, this.popoverTitle), this.showClose && (h("button", { key: 'd0d335d8c9897ed9ba7bd0370572a8cafa72b044', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), h("div", { key: '52d3294394b0e1fd49f8c361414e228feed68ea9', class: "le-popover-body" }, h("slot", { key: '16d8691545f2eaa44f136bfea33a1f1d71d18cd7' })))
+        ];
+    }
+    static get is() { return "le-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-popover.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'default' | 'admin'",
+                    "resolved": "\"admin\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mode of the popover should be 'default' for internal use"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mode"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the popover is currently open"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'left' | 'right' | 'auto'",
+                    "resolved": "\"auto\" | \"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the popover relative to its trigger"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'bottom'"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end'",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alignment of the popover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'start'"
+            },
+            "popoverTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional title for the popover header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popover-title"
+            },
+            "showClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a close button in the header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-close",
+                "defaultValue": "true"
+            },
+            "closeOnClickOutside": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether clicking outside closes the popover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-click-outside",
+                "defaultValue": "true"
+            },
+            "closeOnEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether pressing Escape closes the popover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-escape",
+                "defaultValue": "true"
+            },
+            "offset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Offset from the trigger element (in pixels)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset",
+                "defaultValue": "8"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fixed width for the popover (e.g., '300px', '20rem')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "minWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum width for the popover (e.g., '200px', '15rem')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-width",
+                "defaultValue": "'200px'"
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width for the popover (e.g., '400px', '25rem')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isPositioned": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lePopoverOpen",
+                "name": "lePopoverOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the popover opens"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "lePopoverClose",
+                "name": "lePopoverClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the popover closes"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the popover",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the popover",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the popover",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=le-popover.js.map