le-kit 0.5.3 → 0.6.0

package/dist/components/le-popover2.js

@@ -1,642 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host, transformTag } from '@stencil/core/internal/client';
-import { c as classnames } from './utils.js';
-
-const lePopoverCss = () => `/* ============================================
-   le-popover.css
-   Popover using native HTML Popover API
-   ============================================ */
-
-:host {
-  display: inline-block;
-  position: relative;
-  --le-popover-padding: var(--le-space-md, 12px);
-}
-
-:host([trigger-full-width]) {
-  display: block;
-  width: 100%;
-}
-
-/* ============================================
-   Trigger
-   ============================================ */
-
-.le-popover-trigger {
-  display: inline-flex;
-  cursor: pointer;
-}
-
-.le-popover-trigger-full-width {
-  display: flex;
-  width: 100%;
-}
-
-.le-popover-default-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid var(--le-color-border, #e0e0e0);
-  border-radius: var(--le-radius-md, 6px);
-  background: var(--le-color-surface, #fff);
-  color: var(--le-color-text-secondary, #666);
-  font-size: 16px;
-  cursor: pointer;
-  transition: all var(--le-transition-fast, 0.15s ease);
-}
-
-.le-popover-default-trigger:hover {
-  border-color: var(--le-color-primary, #2196f3);
-  color: var(--le-color-primary, #2196f3);
-  background: var(--le-color-primary-light, rgba(33, 150, 243, 0.1));
-}
-
-/* ============================================
-   Popover Content (native popover)
-   ============================================ */
-
-.le-popover-content {
-  /* Reset native popover defaults */
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  
-  /* Positioning - will be set via JS */
-  position: fixed;
-  inset: unset;
-  
-  /* Styling */
-  background: var(--le-color-surface, #ffffff);
-  border: 1px solid var(--le-color-border, #e0e0e0);
-  border-radius: var(--le-radius-lg, 8px);
-  box-shadow: var(--le-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
-  overflow: hidden;
-  font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);
-  font-size: var(--le-font-size-sm, 0.875rem);
-  color: var(--le-color-text, #333);
-  
-  /* Animation */
-  opacity: 0;
-  transform: scale(0.95);
-  transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s ease allow-discrete;
-}
-
-/* When popover is open */
-.le-popover-content:popover-open {
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* Fallback for browsers without the Popover API */
-.le-popover-content[data-fallback-open="false"] {
-  display: none;
-}
-
-.le-popover-content[data-fallback-open="true"] {
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* Starting style for animation (CSS Anchor Positioning spec) */
-@starting-style {
-  .le-popover-content:popover-open {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
-
-/* ============================================
-   Header
-   ============================================ */
-
-.le-popover-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-sm, 8px);
-  border-bottom: 1px solid var(--le-color-border, #e0e0e0);
-  background: var(--le-color-surface-alt, #f9f9f9);
-  min-height: 32px;
-}
-
-.le-popover-title {
-  font-weight: var(--le-font-weight-semibold, 600);
-  font-size: var(--le-font-size-sm, 0.875rem);
-  color: var(--le-color-text, #333);
-}
-
-.le-popover-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--le-color-text-secondary, #666);
-  font-size: 18px;
-  line-height: 1;
-  cursor: pointer;
-  border-radius: var(--le-radius-sm, 4px);
-  transition: background-color 0.15s, color 0.15s;
-}
-
-.le-popover-close:hover {
-  background: var(--le-color-surface-hover, rgba(0, 0, 0, 0.05));
-  color: var(--le-color-text, #333);
-}
-
-/* ============================================
-   Body
-   ============================================ */
-
-.le-popover-body {
-  padding: var(--le-popover-padding);
-}
-
-/* ============================================
-   Scrollable content
-   ============================================ */
-
-.le-popover-content[style*="overflow-y: auto"] .le-popover-body {
-  overflow-y: auto;
-}
-`;
-
-// Keep a simple stack so Escape closes the most recently opened popover first.
-// This also helps nested popovers behave naturally.
-const openPopoverStack = [];
-const LePopover = /*@__PURE__*/ proxyCustomElement(class LePopover extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.lePopoverOpen = createEvent(this, "lePopoverOpen", 7);
-        this.lePopoverClose = createEvent(this, "lePopoverClose", 7);
-        /**
-         * Whether the popover is currently open
-         */
-        this.open = false;
-        /**
-         * Position of the popover relative to its trigger
-         */
-        this.position = 'bottom';
-        /**
-         * Alignment of the popover
-         */
-        this.align = 'start';
-        /**
-         * Whether to show a close button in the header
-         */
-        this.showClose = true;
-        /**
-         * Whether clicking outside closes the popover
-         */
-        this.closeOnClickOutside = true;
-        /**
-         * Whether pressing Escape closes the popover
-         */
-        this.closeOnEscape = true;
-        /**
-         * Offset from the trigger element (in pixels)
-         */
-        this.offset = 8;
-        /**
-         * Minimum width for the popover (e.g., '200px', '15rem')
-         */
-        this.minWidth = '200px';
-        /**
-         * Should the popover's trigger take full width of its container
-         */
-        this.triggerFullWidth = false;
-        this.isPositioned = false;
-        this.uniqueId = `le-popover-${Math.random().toString(36).substr(2, 9)}`;
-        this.scrollParents = [];
-        this.isListeningForDismiss = false;
-        this.handleDocumentPointerDown = (event) => {
-            if (!this.open || !this.closeOnClickOutside)
-                return;
-            // If the click happens inside this popover component (trigger OR content), don't close.
-            const path = (event.composedPath?.() ?? []);
-            if (path.includes(this.el))
-                return;
-            this.hide();
-        };
-        this.handleDocumentKeyDown = (event) => {
-            if (!this.open || !this.closeOnEscape)
-                return;
-            if (event.key !== 'Escape')
-                return;
-            // Only the top-most opened popover handles Escape.
-            const top = openPopoverStack[openPopoverStack.length - 1];
-            if (top !== this.el)
-                return;
-            event.preventDefault();
-            event.stopPropagation();
-            this.hide();
-        };
-        this.handleScroll = () => {
-            if (this.open) {
-                this._updatePosition();
-            }
-        };
-        this.handlePopoverToggle = (event) => {
-            if (event.newState === 'open') {
-                this.handleOpened();
-            }
-            else {
-                this.handleClosed();
-            }
-        };
-        this.handleOtherPopoverOpen = (event) => {
-            const customEvent = event;
-            const openingPopover = customEvent.detail?.popover;
-            if (!openingPopover)
-                return;
-            if (openingPopover === this.el)
-                return;
-            // Allow nested popovers (e.g., le-select inside another popover).
-            // Use a shadow-DOM-aware containment check.
-            if (this.shadowContains(this.el, openingPopover) ||
-                this.shadowContains(openingPopover, this.el)) {
-                return;
-            }
-            if (this.open) {
-                this.hide();
-            }
-        };
-        this.handleTriggerClick = (event) => {
-            event.stopPropagation();
-            this.toggle();
-        };
-    }
-    /**
-     * Method to update the popover position from a parent component
-     */
-    async updatePosition() {
-        this._updatePosition();
-    }
-    get supportsPopoverApi() {
-        return typeof HTMLElement.prototype.showPopover === 'function';
-    }
-    shadowContains(container, node) {
-        let current = node;
-        while (current) {
-            if (current === container)
-                return true;
-            if (current instanceof ShadowRoot) {
-                current = current.host;
-                continue;
-            }
-            if (current.parentNode) {
-                current = current.parentNode;
-                continue;
-            }
-            const root = current.getRootNode?.();
-            if (root instanceof ShadowRoot) {
-                current = root.host;
-                continue;
-            }
-            break;
-        }
-        return false;
-    }
-    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);
-        // If the popover is initially open (unlikely, but possible), wire listeners.
-        if (this.open) {
-            this.addDismissListeners();
-        }
-    }
-    disconnectedCallback() {
-        this.popoverEl?.removeEventListener('toggle', this.handlePopoverToggle);
-        document.removeEventListener('le-popover-will-open', this.handleOtherPopoverOpen);
-        this.removeScrollListeners();
-        this.removeDismissListeners();
-    }
-    addDismissListeners() {
-        if (this.isListeningForDismiss)
-            return;
-        // Use capture so clicks inside the trigger (which stops propagation) are still observed.
-        document.addEventListener('pointerdown', this.handleDocumentPointerDown, true);
-        document.addEventListener('keydown', this.handleDocumentKeyDown, true);
-        this.isListeningForDismiss = true;
-    }
-    removeDismissListeners() {
-        if (!this.isListeningForDismiss)
-            return;
-        document.removeEventListener('pointerdown', this.handleDocumentPointerDown, true);
-        document.removeEventListener('keydown', this.handleDocumentKeyDown, true);
-        this.isListeningForDismiss = false;
-    }
-    /**
-     * 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 = [];
-    }
-    handleOpened() {
-        this.open = true;
-        // Track stack order for Escape handling.
-        const existingIndex = openPopoverStack.indexOf(this.el);
-        if (existingIndex >= 0)
-            openPopoverStack.splice(existingIndex, 1);
-        openPopoverStack.push(this.el);
-        this.addDismissListeners();
-        this.addScrollListeners();
-        this._updatePosition();
-        this.lePopoverOpen.emit();
-    }
-    handleClosed() {
-        this.open = false;
-        this.isPositioned = false;
-        this.removeScrollListeners();
-        this.removeDismissListeners();
-        const index = openPopoverStack.indexOf(this.el);
-        if (index >= 0)
-            openPopoverStack.splice(index, 1);
-        this.lePopoverClose.emit();
-    }
-    /**
-     * Opens the popover
-     */
-    async show() {
-        document.dispatchEvent(new CustomEvent('le-popover-will-open', {
-            detail: { popover: this.el },
-        }));
-        if (this.supportsPopoverApi) {
-            this.popoverEl?.showPopover();
-        }
-        else {
-            this.handleOpened();
-        }
-    }
-    /**
-     * Closes the popover
-     */
-    async hide() {
-        if (this.supportsPopoverApi) {
-            this.popoverEl?.hidePopover();
-        }
-        else {
-            this.handleClosed();
-        }
-    }
-    /**
-     * Toggles the popover
-     */
-    async toggle() {
-        if (this.open) {
-            await this.hide();
-        }
-        else {
-            await this.show();
-        }
-    }
-    _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(Host, { key: 'c9adf9fa285b33fca47bd2caa54c3ad62f2784e1', "trigger-full-width": this.triggerFullWidth }, h("div", { key: 'e3f6c1441ec018325400e2673e012ba2939d359b', class: classnames('le-popover-trigger', {
-                'le-popover-trigger-full-width': this.triggerFullWidth,
-            }), ref: el => (this.triggerEl = el), onClick: this.handleTriggerClick, part: "trigger" }, h("slot", { key: '9ece065f14fedc62905406359f0b6ae25747403b', name: "trigger" }, h("button", { key: '816e450c49c441f315bd619c24a4c96ef3bbc164', type: "button", class: "le-popover-default-trigger" }, h("span", { key: '4408bf0edee9ccf6e3fa9147110793c94eed8a39' }, "\u2295")))), h("div", { key: '9061223ed8051dda88802b1fb54b455aafcd20a6', id: this.uniqueId, class: "le-popover-content",
-            // Always use manual mode so nested popovers can be open together.
-            // We implement click-outside and Escape handling ourselves.
-            popover: "manual", ref: el => (this.popoverEl = el), style: popoverStyles, "data-fallback-open": this.supportsPopoverApi ? undefined : String(this.open) }, (this.popoverTitle || this.showClose) && (h("div", { key: '92f61d207bfd18693d5e610cdfca708afecadf9d', class: "le-popover-header" }, this.popoverTitle && h("span", { key: 'caeb2cfc8b500061bad1e8dc9cf36eff298ba7ed', class: "le-popover-title" }, this.popoverTitle), this.showClose && (h("button", { key: '3fc53cc7c0ae0bce3330613ecc90003db5028d69', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), h("div", { key: '829a9d5d78cb8b5d19dfb7c2afeda55faafaa8ac', class: "le-popover-body", part: "content" }, h("slot", { key: '684b41952086d22e7d3d79f6db02f7cbfd32bbf5' })))));
-    }
-    get el() { return this; }
-    static get style() { return lePopoverCss(); }
-}, [257, "le-popover", {
-        "mode": [1537],
-        "open": [1540],
-        "position": [1],
-        "align": [1],
-        "popoverTitle": [1, "popover-title"],
-        "showClose": [4, "show-close"],
-        "closeOnClickOutside": [4, "close-on-click-outside"],
-        "closeOnEscape": [4, "close-on-escape"],
-        "offset": [2],
-        "width": [1],
-        "minWidth": [1, "min-width"],
-        "maxWidth": [1, "max-width"],
-        "triggerFullWidth": [4, "trigger-full-width"],
-        "isPositioned": [32],
-        "updatePosition": [64],
-        "show": [64],
-        "hide": [64],
-        "toggle": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-popover"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), LePopover);
-            }
-            break;
-    } });
-}
-
-export { LePopover as L, defineCustomElement as d };
-//# sourceMappingURL=le-popover2.js.map
-
-//# sourceMappingURL=le-popover2.js.map