@sekiui/elements 0.0.65 → 0.0.70

package/dist/collection/components/hover-card/seki-hover-card-content.js

@@ -0,0 +1,478 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Hover Card Content Component
+ *
+ * The floating content panel that displays when the hover card is open.
+ * Handles positioning, viewport boundary collision, arrow placement,
+ * and interaction handlers to maintain open state while user interacts with content.
+ *
+ * @slot - The hover card content (rich content like user profiles, link previews)
+ *
+ * @part content - The content container
+ * @part arrow - The arrow/pointer element
+ *
+ * @example
+ * ```html
+ * <seki-hover-card-content side="top" align="center">
+ *   <div class="user-preview">
+ *     <img src="avatar.jpg" alt="Avatar" />
+ *     <h4>John Doe</h4>
+ *     <p>Software Engineer</p>
+ *   </div>
+ * </seki-hover-card-content>
+ * ```
+ */
+export class SekiHoverCardContent {
+    constructor() {
+        /**
+         * Distance from the trigger element in pixels
+         * @default 8
+         */
+        this.sideOffset = 8;
+        /**
+         * Offset along the alignment axis in pixels
+         * @default 0
+         */
+        this.alignOffset = 0;
+        /**
+         * Internal open state
+         */
+        this._isOpen = false;
+        /**
+         * Calculated position for the content
+         */
+        this._position = { top: '0', left: '0' };
+        /**
+         * The actual side after collision detection (may differ from preferred side)
+         */
+        this._actualSide = 'bottom';
+        /**
+         * Arrow position relative to trigger center
+         */
+        this._arrowPosition = {};
+        /**
+         * Handle mouse enter - cancel any pending close
+         */
+        this.handleMouseEnter = () => {
+            if (this.isTouchDevice())
+                return;
+            this.cancelClose.emit();
+        };
+        /**
+         * Handle mouse leave - request close
+         */
+        this.handleMouseLeave = () => {
+            if (this.isTouchDevice())
+                return;
+            this.requestClose.emit();
+        };
+        /**
+         * Handle focus within - cancel close to keep open while interacting
+         */
+        this.handleFocusIn = () => {
+            this.cancelClose.emit();
+        };
+        /**
+         * Handle focus out - request close unless focus moves within hover card
+         */
+        this.handleFocusOut = (event) => {
+            const relatedTarget = event.relatedTarget;
+            // Check if focus is moving to within the hover card
+            if (relatedTarget) {
+                const hoverCard = this.el.closest('seki-hover-card');
+                if (hoverCard && hoverCard.contains(relatedTarget)) {
+                    // Focus is moving within the hover card, cancel any pending close
+                    this.cancelClose.emit();
+                    return;
+                }
+            }
+            this.requestClose.emit();
+        };
+    }
+    /**
+     * Detect if the current device is a touch device
+     */
+    isTouchDevice() {
+        return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    }
+    /**
+     * Get the hover card context from the parent container
+     */
+    getContext() {
+        const parent = this.el.closest('seki-hover-card');
+        if (parent) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return parent._hoverCardContext || null;
+        }
+        return null;
+    }
+    /**
+     * Listen for open state changes from parent container
+     */
+    handleOpenChange(event) {
+        this._isOpen = event.detail.open;
+        if (this._isOpen) {
+            // Update position when opening
+            requestAnimationFrame(() => this.updatePosition());
+            // Setup click-outside listener for touch devices
+            if (this.isTouchDevice()) {
+                this.setupClickOutsideListener();
+            }
+        }
+        else {
+            // Remove click-outside listener when closing
+            this.removeClickOutsideListener();
+        }
+    }
+    componentWillRender() {
+        var _a;
+        const context = this.getContext();
+        this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+    }
+    componentDidLoad() {
+        // Listen for open changes from parent
+        const hoverCard = this.el.closest('seki-hover-card');
+        if (hoverCard) {
+            hoverCard.addEventListener('sekiOpenChange', () => {
+                var _a;
+                const context = this.getContext();
+                this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+                if (this._isOpen) {
+                    requestAnimationFrame(() => this.updatePosition());
+                }
+            });
+        }
+    }
+    componentDidRender() {
+        if (this._isOpen) {
+            this.updatePosition();
+        }
+    }
+    disconnectedCallback() {
+        this.removeClickOutsideListener();
+    }
+    /**
+     * Setup click-outside listener for touch devices to close on tap outside
+     */
+    setupClickOutsideListener() {
+        this.clickOutsideHandler = (event) => {
+            const target = event.target;
+            const hoverCard = this.el.closest('seki-hover-card');
+            // Check if click is outside the hover card
+            if (hoverCard && !hoverCard.contains(target)) {
+                this.requestClose.emit();
+            }
+        };
+        // Use a slight delay to avoid triggering on the same tap that opened
+        setTimeout(() => {
+            document.addEventListener('touchstart', this.clickOutsideHandler, { passive: true });
+            document.addEventListener('click', this.clickOutsideHandler);
+        }, 100);
+    }
+    /**
+     * Remove click-outside listener
+     */
+    removeClickOutsideListener() {
+        if (this.clickOutsideHandler) {
+            document.removeEventListener('touchstart', this.clickOutsideHandler);
+            document.removeEventListener('click', this.clickOutsideHandler);
+            this.clickOutsideHandler = undefined;
+        }
+    }
+    /**
+     * Calculate and update the position of the content
+     */
+    updatePosition() {
+        var _a, _b, _c, _d;
+        const hoverCard = this.el.closest('seki-hover-card');
+        const trigger = hoverCard === null || hoverCard === void 0 ? void 0 : hoverCard.querySelector('seki-hover-card-trigger');
+        if (!trigger || !this.contentRef)
+            return;
+        const triggerRect = trigger.getBoundingClientRect();
+        const contentRect = this.contentRef.getBoundingClientRect();
+        const viewport = {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        };
+        const context = this.getContext();
+        const preferredSide = (_b = (_a = this.side) !== null && _a !== void 0 ? _a : context === null || context === void 0 ? void 0 : context.side) !== null && _b !== void 0 ? _b : 'bottom';
+        const align = (_d = (_c = this.align) !== null && _c !== void 0 ? _c : context === null || context === void 0 ? void 0 : context.align) !== null && _d !== void 0 ? _d : 'center';
+        const offset = this.sideOffset;
+        const margin = 8; // Viewport margin
+        // Calculate position for each side
+        const calculateSidePosition = (side) => {
+            let top = 0;
+            let left = 0;
+            // Side positioning
+            switch (side) {
+                case 'top':
+                    top = triggerRect.top - contentRect.height - offset;
+                    break;
+                case 'bottom':
+                    top = triggerRect.bottom + offset;
+                    break;
+                case 'left':
+                    left = triggerRect.left - contentRect.width - offset;
+                    break;
+                case 'right':
+                    left = triggerRect.right + offset;
+                    break;
+            }
+            // Align positioning
+            if (side === 'top' || side === 'bottom') {
+                switch (align) {
+                    case 'start':
+                        left = triggerRect.left + this.alignOffset;
+                        break;
+                    case 'center':
+                        left = triggerRect.left + (triggerRect.width - contentRect.width) / 2 + this.alignOffset;
+                        break;
+                    case 'end':
+                        left = triggerRect.right - contentRect.width + this.alignOffset;
+                        break;
+                }
+            }
+            else {
+                switch (align) {
+                    case 'start':
+                        top = triggerRect.top + this.alignOffset;
+                        break;
+                    case 'center':
+                        top = triggerRect.top + (triggerRect.height - contentRect.height) / 2 + this.alignOffset;
+                        break;
+                    case 'end':
+                        top = triggerRect.bottom - contentRect.height + this.alignOffset;
+                        break;
+                }
+            }
+            // Check if fits within viewport
+            const fits = top >= margin &&
+                top + contentRect.height <= viewport.height - margin &&
+                left >= margin &&
+                left + contentRect.width <= viewport.width - margin;
+            return { top, left, fits };
+        };
+        // Try preferred side first
+        let position = calculateSidePosition(preferredSide);
+        let actualSide = preferredSide;
+        // If doesn't fit, try opposite side
+        if (!position.fits) {
+            const oppositeSides = {
+                top: 'bottom',
+                bottom: 'top',
+                left: 'right',
+                right: 'left',
+            };
+            const oppositeSide = oppositeSides[preferredSide];
+            const oppositePosition = calculateSidePosition(oppositeSide);
+            if (oppositePosition.fits) {
+                position = oppositePosition;
+                actualSide = oppositeSide;
+            }
+        }
+        // Clamp to viewport bounds
+        position.left = Math.max(margin, Math.min(position.left, viewport.width - contentRect.width - margin));
+        position.top = Math.max(margin, Math.min(position.top, viewport.height - contentRect.height - margin));
+        // Calculate arrow position based on trigger center
+        const arrowPosition = {};
+        if (actualSide === 'top' || actualSide === 'bottom') {
+            // Arrow should point to trigger center
+            const triggerCenter = triggerRect.left + triggerRect.width / 2;
+            const arrowLeft = triggerCenter - position.left;
+            // Clamp arrow within content bounds (with some padding)
+            const clampedArrowLeft = Math.max(16, Math.min(arrowLeft, contentRect.width - 16));
+            arrowPosition.left = `${clampedArrowLeft}px`;
+        }
+        else {
+            // For left/right sides, arrow points to trigger vertical center
+            const triggerCenter = triggerRect.top + triggerRect.height / 2;
+            const arrowTop = triggerCenter - position.top;
+            const clampedArrowTop = Math.max(16, Math.min(arrowTop, contentRect.height - 16));
+            arrowPosition.top = `${clampedArrowTop}px`;
+        }
+        this._position = { top: `${position.top}px`, left: `${position.left}px` };
+        this._actualSide = actualSide;
+        this._arrowPosition = arrowPosition;
+    }
+    render() {
+        if (!this._isOpen) {
+            return null;
+        }
+        const arrowStyle = {};
+        if (this._arrowPosition.left) {
+            arrowStyle.left = this._arrowPosition.left;
+        }
+        if (this._arrowPosition.top) {
+            arrowStyle.top = this._arrowPosition.top;
+        }
+        return (h(Host, { "data-state": "open", "data-side": this._actualSide }, h("div", { ref: (el) => (this.contentRef = el), part: "content", class: "hover-card-content", role: "dialog", style: {
+                position: 'fixed',
+                top: this._position.top,
+                left: this._position.left,
+                zIndex: '50',
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut }, h("slot", null), h("div", { part: "arrow", class: "hover-card-arrow", "data-side": this._actualSide, style: arrowStyle }))));
+    }
+    static get is() { return "seki-hover-card-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-hover-card-content.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-hover-card-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "side": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HoverCardSide",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
+                    "references": {
+                        "HoverCardSide": {
+                            "location": "import",
+                            "path": "./seki-hover-card",
+                            "id": "src/components/hover-card/seki-hover-card.tsx::HoverCardSide"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the side positioning from the parent container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "side"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HoverCardAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\" | undefined",
+                    "references": {
+                        "HoverCardAlign": {
+                            "location": "import",
+                            "path": "./seki-hover-card",
+                            "id": "src/components/hover-card/seki-hover-card.tsx::HoverCardAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the alignment from the parent container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align"
+            },
+            "sideOffset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "8"
+                        }],
+                    "text": "Distance from the trigger element in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "side-offset",
+                "defaultValue": "8"
+            },
+            "alignOffset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "0"
+                        }],
+                    "text": "Offset along the alignment axis in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-offset",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_isOpen": {},
+            "_position": {},
+            "_actualSide": {},
+            "_arrowPosition": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "requestClose",
+                "name": "sekiHoverCardRequestClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted to request closing the hover card (with delay)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "cancelClose",
+                "name": "sekiHoverCardCancelClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted to cancel a pending close timer"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "sekiOpenChange",
+                "method": "handleOpenChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}