le-kit 0.1.4 → 0.1.5

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

@@ -1,693 +0,0 @@
-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