snice 1.13.2 → 1.13.4

package/dist/components/tooltip/snice-tooltip.js

@@ -0,0 +1,656 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var SniceTooltip_1;
+import { element, property, query, on, watch, ready, dispose } from '../../src/index';
+import css from './snice-tooltip.css?inline';
+import portalCss from './snice-tooltip-portal.css?inline';
+let SniceTooltip = SniceTooltip_1 = class SniceTooltip extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.content = '';
+        this.position = 'top';
+        this.trigger = 'hover';
+        this.delay = 0;
+        this.hideDelay = 0;
+        this.offset = 12;
+        this.arrow = true;
+        this.open = false;
+        this.maxWidth = 250;
+        this.zIndex = 10000;
+        this.strictPositioning = false;
+        this.activePosition = 'top';
+        this.handleClickOutside = (e) => {
+            if (!this.contains(e.target)) {
+                this.hide();
+            }
+        };
+    }
+    static ensurePortalStyles() {
+        if (SniceTooltip_1.portalStylesInjected)
+            return;
+        try {
+            // Use Constructable Stylesheets if supported
+            if ('adoptedStyleSheets' in document && 'CSSStyleSheet' in window) {
+                const sheet = new CSSStyleSheet();
+                sheet.replaceSync(portalCss);
+                document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+            }
+            else {
+                // Fallback for older browsers
+                const style = document.createElement('style');
+                style.textContent = portalCss;
+                document.head.appendChild(style);
+            }
+            SniceTooltip_1.portalStylesInjected = true;
+        }
+        catch (error) {
+            console.warn('Failed to inject tooltip portal styles:', error);
+        }
+    }
+    html() {
+        return /*html*/ `
+      <div class="tooltip-trigger">
+        <slot></slot>
+      </div>
+      <div class="tooltip tooltip--${this.position}" role="tooltip" hidden>
+        <div class="tooltip__content">${this.content}</div>
+        <div class="tooltip__arrow"></div>
+      </div>
+    `;
+    }
+    css() {
+        return css;
+    }
+    init() {
+        if (this.tooltipElement) {
+            this.tooltipElement.style.setProperty('--tooltip-max-width', `${this.maxWidth}px`);
+            this.tooltipElement.style.setProperty('--tooltip-z-index', `${this.zIndex}`);
+        }
+        if (this.open && this.trigger === 'manual') {
+            this.show();
+        }
+    }
+    cleanup() {
+        this.clearTimeouts();
+        if (this.portalElement) {
+            this.portalElement.remove();
+            this.portalElement = undefined;
+        }
+    }
+    updateContent() {
+        const contentEl = this.shadowRoot?.querySelector('.tooltip__content');
+        if (contentEl) {
+            contentEl.textContent = this.content;
+        }
+    }
+    updateArrow() {
+        if (this.arrowElement) {
+            if (this.arrow) {
+                this.arrowElement.removeAttribute('hidden');
+            }
+            else {
+                this.arrowElement.setAttribute('hidden', '');
+            }
+        }
+    }
+    updateMaxWidth() {
+        if (this.tooltipElement) {
+            this.tooltipElement.style.setProperty('--tooltip-max-width', `${this.maxWidth}px`);
+        }
+    }
+    updateZIndex() {
+        if (this.tooltipElement) {
+            this.tooltipElement.style.setProperty('--tooltip-z-index', `${this.zIndex}`);
+        }
+    }
+    handleOpenChange() {
+        if (this.trigger === 'manual') {
+            if (this.open) {
+                this.show();
+            }
+            else {
+                this.hide();
+            }
+        }
+    }
+    handleMouseEnter() {
+        if (this.trigger === 'hover') {
+            this.scheduleShow();
+        }
+    }
+    handleMouseLeave() {
+        if (this.trigger === 'hover') {
+            this.scheduleHide();
+        }
+    }
+    handleFocusIn() {
+        if (this.trigger === 'focus') {
+            this.scheduleShow();
+        }
+    }
+    handleFocusOut() {
+        if (this.trigger === 'focus') {
+            this.scheduleHide();
+        }
+    }
+    handleClick() {
+        if (this.trigger === 'click') {
+            this.toggle();
+        }
+    }
+    scheduleShow() {
+        this.clearTimeouts();
+        if (this.delay > 0) {
+            this.showTimeout = window.setTimeout(() => this.show(), this.delay);
+        }
+        else {
+            this.show();
+        }
+    }
+    scheduleHide() {
+        this.clearTimeouts();
+        if (this.hideDelay > 0) {
+            this.hideTimeout = window.setTimeout(() => this.hide(), this.hideDelay);
+        }
+        else {
+            this.hide();
+        }
+    }
+    clearTimeouts() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = undefined;
+        }
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = undefined;
+        }
+    }
+    show() {
+        if (!this.content)
+            return;
+        // Ensure portal styles are injected
+        SniceTooltip_1.ensurePortalStyles();
+        // Create portal element if it doesn't exist
+        if (!this.portalElement) {
+            this.portalElement = this.createPortalElement();
+            this.updateArrowStyles(this.position);
+        }
+        this.portalElement.style.display = 'block';
+        this.updatePortalContent();
+        // Force reflow before adding visible class
+        void this.portalElement.offsetHeight;
+        this.updatePosition();
+        this.portalElement.classList.add('snice-tooltip--visible');
+        if (this.trigger === 'click') {
+            // Add click outside listener
+            setTimeout(() => {
+                document.addEventListener('click', this.handleClickOutside);
+            }, 0);
+        }
+    }
+    hide() {
+        if (!this.portalElement)
+            return;
+        this.portalElement.classList.remove('snice-tooltip--visible');
+        setTimeout(() => {
+            if (this.portalElement) {
+                this.portalElement.style.display = 'none';
+            }
+        }, 200); // Match transition duration
+        if (this.trigger === 'click') {
+            document.removeEventListener('click', this.handleClickOutside);
+        }
+    }
+    toggle() {
+        if (!this.portalElement || this.portalElement.style.display === 'none') {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+    updatePosition() {
+        if (!this.portalElement)
+            return;
+        // Make sure tooltip is visible but off-screen to get accurate dimensions
+        this.portalElement.style.visibility = 'hidden';
+        this.portalElement.style.left = '-9999px';
+        this.portalElement.style.top = '-9999px';
+        const triggerRect = this.getBoundingClientRect();
+        const tooltipRect = this.portalElement.getBoundingClientRect();
+        // Restore visibility
+        this.portalElement.style.visibility = '';
+        // Calculate position with smart viewport detection
+        const position = this.calculatePosition(triggerRect, tooltipRect);
+        // Update tooltip position class if it changed
+        if (position.adjustedPosition !== this.activePosition) {
+            this.portalElement.classList.remove(`snice-tooltip--${this.activePosition}`);
+            this.portalElement.classList.add(`snice-tooltip--${position.adjustedPosition}`);
+            this.activePosition = position.adjustedPosition;
+            // Update arrow styles for new position
+            this.updateArrowStyles(position.adjustedPosition);
+        }
+        // Apply calculated position
+        this.portalElement.style.left = `${position.left}px`;
+        this.portalElement.style.top = `${position.top}px`;
+    }
+    updateArrowStyles(position) {
+        if (!this.portalElement || !this.arrow)
+            return;
+        const arrow = this.portalElement.querySelector('.snice-tooltip__arrow');
+        if (!arrow)
+            return;
+        // Reset styles - set to explicit values instead of empty strings
+        arrow.style.top = 'auto';
+        arrow.style.bottom = 'auto';
+        arrow.style.left = 'auto';
+        arrow.style.right = 'auto';
+        arrow.style.transform = 'none';
+        arrow.style.borderTopColor = 'transparent';
+        arrow.style.borderBottomColor = 'transparent';
+        arrow.style.borderLeftColor = 'transparent';
+        arrow.style.borderRightColor = 'transparent';
+        // Apply position-specific styles
+        switch (position) {
+            case 'top':
+            case 'top-start':
+            case 'top-end':
+                arrow.style.bottom = '-6px';
+                arrow.style.borderWidth = '6px 6px 0';
+                arrow.style.borderTopColor = '#333';
+                arrow.style.borderLeftColor = 'transparent';
+                arrow.style.borderRightColor = 'transparent';
+                if (position === 'top') {
+                    arrow.style.left = '50%';
+                    arrow.style.transform = 'translateX(-50%)';
+                }
+                else if (position === 'top-start') {
+                    arrow.style.left = '16px';
+                }
+                else {
+                    arrow.style.right = '16px';
+                }
+                break;
+            case 'bottom':
+            case 'bottom-start':
+            case 'bottom-end':
+                arrow.style.top = '-6px';
+                arrow.style.borderWidth = '0 6px 6px';
+                arrow.style.borderBottomColor = '#333';
+                arrow.style.borderLeftColor = 'transparent';
+                arrow.style.borderRightColor = 'transparent';
+                if (position === 'bottom') {
+                    arrow.style.left = '50%';
+                    arrow.style.transform = 'translateX(-50%)';
+                }
+                else if (position === 'bottom-start') {
+                    arrow.style.left = '16px';
+                }
+                else {
+                    arrow.style.right = '16px';
+                }
+                break;
+            case 'left':
+            case 'left-start':
+            case 'left-end':
+                arrow.style.right = '-6px';
+                arrow.style.borderWidth = '6px 0 6px 6px';
+                arrow.style.borderLeftColor = '#333';
+                arrow.style.borderTopColor = 'transparent';
+                arrow.style.borderBottomColor = 'transparent';
+                if (position === 'left') {
+                    arrow.style.top = '50%';
+                    arrow.style.transform = 'translateY(-50%)';
+                }
+                else if (position === 'left-start') {
+                    arrow.style.top = '16px';
+                }
+                else {
+                    arrow.style.bottom = '16px';
+                }
+                break;
+            case 'right':
+            case 'right-start':
+            case 'right-end':
+                arrow.style.left = '-6px';
+                arrow.style.borderWidth = '6px 6px 6px 0';
+                arrow.style.borderRightColor = '#333';
+                arrow.style.borderTopColor = 'transparent';
+                arrow.style.borderBottomColor = 'transparent';
+                if (position === 'right') {
+                    arrow.style.top = '50%';
+                    arrow.style.transform = 'translateY(-50%)';
+                }
+                else if (position === 'right-start') {
+                    arrow.style.top = '16px';
+                }
+                else {
+                    arrow.style.bottom = '16px';
+                }
+                break;
+        }
+    }
+    calculatePosition(triggerRect, tooltipRect) {
+        const viewport = {
+            width: window.innerWidth,
+            height: window.innerHeight,
+            scrollX: window.scrollX,
+            scrollY: window.scrollY
+        };
+        let position = this.position;
+        let left = 0;
+        let top = 0;
+        // Calculate base position
+        const positions = this.getPositionCoordinates(triggerRect, tooltipRect, position);
+        left = positions.left;
+        top = positions.top;
+        // If strict positioning is disabled, check if tooltip fits in viewport
+        if (!this.strictPositioning) {
+            const fitsInViewport = left >= 0 &&
+                top >= 0 &&
+                left + tooltipRect.width <= viewport.width &&
+                top + tooltipRect.height <= viewport.height;
+            // If it doesn't fit, try alternative positions
+            if (!fitsInViewport) {
+                const alternativePositions = this.getAlternativePositions(position);
+                for (const altPosition of alternativePositions) {
+                    const altCoords = this.getPositionCoordinates(triggerRect, tooltipRect, altPosition);
+                    if (altCoords.left >= 0 &&
+                        altCoords.top >= 0 &&
+                        altCoords.left + tooltipRect.width <= viewport.width &&
+                        altCoords.top + tooltipRect.height <= viewport.height) {
+                        position = altPosition;
+                        left = altCoords.left;
+                        top = altCoords.top;
+                        break;
+                    }
+                }
+            }
+        }
+        return { left, top, adjustedPosition: position };
+    }
+    getPositionCoordinates(triggerRect, tooltipRect, position) {
+        let left = 0;
+        let top = 0;
+        const centerX = triggerRect.left + triggerRect.width / 2;
+        const centerY = triggerRect.top + triggerRect.height / 2;
+        // Different offsets for different directions
+        // Left/right need more spacing, top/bottom need less
+        const arrowSize = this.arrow ? 6 : 0;
+        const verticalOffset = this.offset; // Just base offset for top/bottom
+        const horizontalOffset = this.offset + arrowSize; // More offset for left/right
+        switch (position) {
+            case 'top':
+                left = centerX - tooltipRect.width / 2;
+                top = triggerRect.top - tooltipRect.height - verticalOffset;
+                break;
+            case 'top-start':
+                left = triggerRect.left;
+                top = triggerRect.top - tooltipRect.height - verticalOffset;
+                break;
+            case 'top-end':
+                left = triggerRect.right - tooltipRect.width;
+                top = triggerRect.top - tooltipRect.height - verticalOffset;
+                break;
+            case 'bottom':
+                left = centerX - tooltipRect.width / 2;
+                top = triggerRect.bottom + verticalOffset;
+                break;
+            case 'bottom-start':
+                left = triggerRect.left;
+                top = triggerRect.bottom + verticalOffset;
+                break;
+            case 'bottom-end':
+                left = triggerRect.right - tooltipRect.width;
+                top = triggerRect.bottom + verticalOffset;
+                break;
+            case 'left':
+                left = triggerRect.left - tooltipRect.width - horizontalOffset;
+                top = centerY - tooltipRect.height / 2;
+                break;
+            case 'left-start':
+                left = triggerRect.left - tooltipRect.width - horizontalOffset;
+                top = triggerRect.top;
+                break;
+            case 'left-end':
+                left = triggerRect.left - tooltipRect.width - horizontalOffset;
+                top = triggerRect.bottom - tooltipRect.height;
+                break;
+            case 'right':
+                left = triggerRect.right + horizontalOffset;
+                top = centerY - tooltipRect.height / 2;
+                break;
+            case 'right-start':
+                left = triggerRect.right + horizontalOffset;
+                top = triggerRect.top;
+                break;
+            case 'right-end':
+                left = triggerRect.right + horizontalOffset;
+                top = triggerRect.bottom - tooltipRect.height;
+                break;
+        }
+        return { left, top };
+    }
+    getAlternativePositions(position) {
+        const opposites = {
+            'top': ['bottom', 'left', 'right'],
+            'top-start': ['bottom-start', 'left', 'right'],
+            'top-end': ['bottom-end', 'left', 'right'],
+            'bottom': ['top', 'left', 'right'],
+            'bottom-start': ['top-start', 'left', 'right'],
+            'bottom-end': ['top-end', 'left', 'right'],
+            'left': ['right', 'top', 'bottom'],
+            'left-start': ['right-start', 'top', 'bottom'],
+            'left-end': ['right-end', 'top', 'bottom'],
+            'right': ['left', 'top', 'bottom'],
+            'right-start': ['left-start', 'top', 'bottom'],
+            'right-end': ['left-end', 'top', 'bottom']
+        };
+        return opposites[position] || ['top', 'bottom', 'left', 'right'];
+    }
+    createPortalElement() {
+        const portal = document.createElement('div');
+        portal.className = `snice-tooltip snice-tooltip--${this.position}`;
+        portal.setAttribute('role', 'tooltip');
+        portal.style.cssText = `
+      position: fixed;
+      z-index: ${this.zIndex};
+      padding: 8px 12px;
+      background: #333;
+      color: white;
+      border-radius: 6px;
+      font-size: 14px;
+      line-height: 1.4;
+      max-width: ${this.maxWidth}px;
+      width: max-content;
+      pointer-events: none;
+      opacity: 0;
+      transform: scale(0.95);
+      transition: opacity 0.2s, transform 0.2s;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      display: none;
+    `;
+        // Create content element
+        const content = document.createElement('div');
+        content.className = 'snice-tooltip__content';
+        portal.appendChild(content);
+        // Create arrow element if needed
+        if (this.arrow) {
+            const arrow = document.createElement('div');
+            arrow.className = 'snice-tooltip__arrow';
+            arrow.style.cssText = `
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+      `;
+            portal.appendChild(arrow);
+        }
+        // Add to body
+        document.body.appendChild(portal);
+        return portal;
+    }
+    updatePortalContent() {
+        if (!this.portalElement)
+            return;
+        const content = this.portalElement.querySelector('.snice-tooltip__content');
+        if (content) {
+            content.textContent = this.content;
+        }
+        // Update or create arrow if needed
+        let arrow = this.portalElement.querySelector('.snice-tooltip__arrow');
+        if (this.arrow && !arrow) {
+            // Create arrow if it doesn't exist but should
+            arrow = document.createElement('div');
+            arrow.className = 'snice-tooltip__arrow';
+            arrow.style.cssText = `
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+      `;
+            this.portalElement.appendChild(arrow);
+        }
+        else if (arrow) {
+            arrow.style.display = this.arrow ? '' : 'none';
+        }
+    }
+};
+SniceTooltip.portalStylesInjected = false;
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], SniceTooltip.prototype, "content", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], SniceTooltip.prototype, "position", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], SniceTooltip.prototype, "trigger", void 0);
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
+], SniceTooltip.prototype, "delay", void 0);
+__decorate([
+    property({ type: Number, attribute: 'hide-delay', reflect: true }),
+    __metadata("design:type", Number)
+], SniceTooltip.prototype, "hideDelay", void 0);
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
+], SniceTooltip.prototype, "offset", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], SniceTooltip.prototype, "arrow", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], SniceTooltip.prototype, "open", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-width', reflect: true }),
+    __metadata("design:type", Number)
+], SniceTooltip.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: Number, attribute: 'z-index', reflect: true }),
+    __metadata("design:type", Number)
+], SniceTooltip.prototype, "zIndex", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'strict-positioning', reflect: true }),
+    __metadata("design:type", Boolean)
+], SniceTooltip.prototype, "strictPositioning", void 0);
+__decorate([
+    query('.tooltip'),
+    __metadata("design:type", HTMLElement)
+], SniceTooltip.prototype, "tooltipElement", void 0);
+__decorate([
+    query('.tooltip__arrow'),
+    __metadata("design:type", HTMLElement)
+], SniceTooltip.prototype, "arrowElement", void 0);
+__decorate([
+    ready(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTooltip.prototype, "init", null);
+__decorate([
+    dispose(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTooltip.prototype, "cleanup", null);
+__decorate([
+    watch('content'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTooltip.prototype, "updateContent", null);
+__decorate([
+    watch('arrow'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTooltip.prototype, "updateArrow", null);
+__decorate([
+    watch('maxWidth'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTooltip.prototype, "updateMaxWidth", null);
+__decorate([
+    watch('zIndex'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTooltip.prototype, "updateZIndex", null);
+__decorate([
+    watch('open'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTooltip.prototype, "handleOpenChange", null);
+__decorate([
+    on('mouseenter'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTooltip.prototype, "handleMouseEnter", null);
+__decorate([
+    on('mouseleave'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTooltip.prototype, "handleMouseLeave", null);
+__decorate([
+    on('focusin'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTooltip.prototype, "handleFocusIn", null);
+__decorate([
+    on('focusout'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTooltip.prototype, "handleFocusOut", null);
+__decorate([
+    on('click'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTooltip.prototype, "handleClick", null);
+SniceTooltip = SniceTooltip_1 = __decorate([
+    element('snice-tooltip')
+], SniceTooltip);
+export { SniceTooltip };
+//# sourceMappingURL=snice-tooltip.js.map