snice 2.1.5 → 2.2.0

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

@@ -0,0 +1,644 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, ready, dispose, watch, on } from 'snice';
+
+var css = '';
+
+var portalCss = '';
+
+let SniceTooltip = (() => {
+    let _classDecorators = [element('snice-tooltip')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _content_decorators;
+    let _content_initializers = [];
+    let _content_extraInitializers = [];
+    let _position_decorators;
+    let _position_initializers = [];
+    let _position_extraInitializers = [];
+    let _trigger_decorators;
+    let _trigger_initializers = [];
+    let _trigger_extraInitializers = [];
+    let _delay_decorators;
+    let _delay_initializers = [];
+    let _delay_extraInitializers = [];
+    let _hideDelay_decorators;
+    let _hideDelay_initializers = [];
+    let _hideDelay_extraInitializers = [];
+    let _offset_decorators;
+    let _offset_initializers = [];
+    let _offset_extraInitializers = [];
+    let _arrow_decorators;
+    let _arrow_initializers = [];
+    let _arrow_extraInitializers = [];
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _maxWidth_decorators;
+    let _maxWidth_initializers = [];
+    let _maxWidth_extraInitializers = [];
+    let _zIndex_decorators;
+    let _zIndex_initializers = [];
+    let _zIndex_extraInitializers = [];
+    let _strictPositioning_decorators;
+    let _strictPositioning_initializers = [];
+    let _strictPositioning_extraInitializers = [];
+    let _tooltipElement_decorators;
+    let _tooltipElement_initializers = [];
+    let _tooltipElement_extraInitializers = [];
+    let _arrowElement_decorators;
+    let _arrowElement_initializers = [];
+    let _arrowElement_extraInitializers = [];
+    let _init_decorators;
+    let _cleanup_decorators;
+    let _updateContent_decorators;
+    let _updateArrow_decorators;
+    let _updateMaxWidth_decorators;
+    let _updateZIndex_decorators;
+    let _handleOpenChange_decorators;
+    let _handleMouseEnter_decorators;
+    let _handleMouseLeave_decorators;
+    let _handleFocusIn_decorators;
+    let _handleFocusOut_decorators;
+    let _handleClick_decorators;
+    var SniceTooltip = class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.content = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _content_initializers, ''));
+            this.position = (__runInitializers(this, _content_extraInitializers), __runInitializers(this, _position_initializers, 'top'));
+            this.trigger = (__runInitializers(this, _position_extraInitializers), __runInitializers(this, _trigger_initializers, 'hover'));
+            this.delay = (__runInitializers(this, _trigger_extraInitializers), __runInitializers(this, _delay_initializers, 0));
+            this.hideDelay = (__runInitializers(this, _delay_extraInitializers), __runInitializers(this, _hideDelay_initializers, 0));
+            this.offset = (__runInitializers(this, _hideDelay_extraInitializers), __runInitializers(this, _offset_initializers, 12));
+            this.arrow = (__runInitializers(this, _offset_extraInitializers), __runInitializers(this, _arrow_initializers, true));
+            this.open = (__runInitializers(this, _arrow_extraInitializers), __runInitializers(this, _open_initializers, false));
+            this.maxWidth = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _maxWidth_initializers, 250));
+            this.zIndex = (__runInitializers(this, _maxWidth_extraInitializers), __runInitializers(this, _zIndex_initializers, 10000));
+            this.strictPositioning = (__runInitializers(this, _zIndex_extraInitializers), __runInitializers(this, _strictPositioning_initializers, false));
+            this.tooltipElement = (__runInitializers(this, _strictPositioning_extraInitializers), __runInitializers(this, _tooltipElement_initializers, void 0));
+            this.arrowElement = (__runInitializers(this, _tooltipElement_extraInitializers), __runInitializers(this, _arrowElement_initializers, void 0));
+            this.showTimeout = __runInitializers(this, _arrowElement_extraInitializers);
+            this.activePosition = 'top';
+            this.handleClickOutside = (e) => {
+                if (!this.contains(e.target)) {
+                    this.hide();
+                }
+            };
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _content_decorators = [property({ reflect: true })];
+            _position_decorators = [property({ reflect: true })];
+            _trigger_decorators = [property({ reflect: true })];
+            _delay_decorators = [property({ type: Number, reflect: true })];
+            _hideDelay_decorators = [property({ type: Number, attribute: 'hide-delay', reflect: true })];
+            _offset_decorators = [property({ type: Number, reflect: true })];
+            _arrow_decorators = [property({ type: Boolean, reflect: true })];
+            _open_decorators = [property({ type: Boolean, reflect: true })];
+            _maxWidth_decorators = [property({ type: Number, attribute: 'max-width', reflect: true })];
+            _zIndex_decorators = [property({ type: Number, attribute: 'z-index', reflect: true })];
+            _strictPositioning_decorators = [property({ type: Boolean, attribute: 'strict-positioning', reflect: true })];
+            _tooltipElement_decorators = [query('.tooltip')];
+            _arrowElement_decorators = [query('.tooltip__arrow')];
+            _init_decorators = [ready()];
+            _cleanup_decorators = [dispose()];
+            _updateContent_decorators = [watch('content')];
+            _updateArrow_decorators = [watch('arrow')];
+            _updateMaxWidth_decorators = [watch('maxWidth')];
+            _updateZIndex_decorators = [watch('zIndex')];
+            _handleOpenChange_decorators = [watch('open')];
+            _handleMouseEnter_decorators = [on('mouseenter')];
+            _handleMouseLeave_decorators = [on('mouseleave')];
+            _handleFocusIn_decorators = [on('focusin')];
+            _handleFocusOut_decorators = [on('focusout')];
+            _handleClick_decorators = [on('click')];
+            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _updateContent_decorators, { kind: "method", name: "updateContent", static: false, private: false, access: { has: obj => "updateContent" in obj, get: obj => obj.updateContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _updateArrow_decorators, { kind: "method", name: "updateArrow", static: false, private: false, access: { has: obj => "updateArrow" in obj, get: obj => obj.updateArrow }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _updateMaxWidth_decorators, { kind: "method", name: "updateMaxWidth", static: false, private: false, access: { has: obj => "updateMaxWidth" in obj, get: obj => obj.updateMaxWidth }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _updateZIndex_decorators, { kind: "method", name: "updateZIndex", static: false, private: false, access: { has: obj => "updateZIndex" in obj, get: obj => obj.updateZIndex }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleOpenChange_decorators, { kind: "method", name: "handleOpenChange", static: false, private: false, access: { has: obj => "handleOpenChange" in obj, get: obj => obj.handleOpenChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleMouseEnter_decorators, { kind: "method", name: "handleMouseEnter", static: false, private: false, access: { has: obj => "handleMouseEnter" in obj, get: obj => obj.handleMouseEnter }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleMouseLeave_decorators, { kind: "method", name: "handleMouseLeave", static: false, private: false, access: { has: obj => "handleMouseLeave" in obj, get: obj => obj.handleMouseLeave }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleFocusIn_decorators, { kind: "method", name: "handleFocusIn", static: false, private: false, access: { has: obj => "handleFocusIn" in obj, get: obj => obj.handleFocusIn }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleFocusOut_decorators, { kind: "method", name: "handleFocusOut", static: false, private: false, access: { has: obj => "handleFocusOut" in obj, get: obj => obj.handleFocusOut }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleClick_decorators, { kind: "method", name: "handleClick", static: false, private: false, access: { has: obj => "handleClick" in obj, get: obj => obj.handleClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _content_decorators, { kind: "field", name: "content", static: false, private: false, access: { has: obj => "content" in obj, get: obj => obj.content, set: (obj, value) => { obj.content = value; } }, metadata: _metadata }, _content_initializers, _content_extraInitializers);
+            __esDecorate(null, null, _position_decorators, { kind: "field", name: "position", static: false, private: false, access: { has: obj => "position" in obj, get: obj => obj.position, set: (obj, value) => { obj.position = value; } }, metadata: _metadata }, _position_initializers, _position_extraInitializers);
+            __esDecorate(null, null, _trigger_decorators, { kind: "field", name: "trigger", static: false, private: false, access: { has: obj => "trigger" in obj, get: obj => obj.trigger, set: (obj, value) => { obj.trigger = value; } }, metadata: _metadata }, _trigger_initializers, _trigger_extraInitializers);
+            __esDecorate(null, null, _delay_decorators, { kind: "field", name: "delay", static: false, private: false, access: { has: obj => "delay" in obj, get: obj => obj.delay, set: (obj, value) => { obj.delay = value; } }, metadata: _metadata }, _delay_initializers, _delay_extraInitializers);
+            __esDecorate(null, null, _hideDelay_decorators, { kind: "field", name: "hideDelay", static: false, private: false, access: { has: obj => "hideDelay" in obj, get: obj => obj.hideDelay, set: (obj, value) => { obj.hideDelay = value; } }, metadata: _metadata }, _hideDelay_initializers, _hideDelay_extraInitializers);
+            __esDecorate(null, null, _offset_decorators, { kind: "field", name: "offset", static: false, private: false, access: { has: obj => "offset" in obj, get: obj => obj.offset, set: (obj, value) => { obj.offset = value; } }, metadata: _metadata }, _offset_initializers, _offset_extraInitializers);
+            __esDecorate(null, null, _arrow_decorators, { kind: "field", name: "arrow", static: false, private: false, access: { has: obj => "arrow" in obj, get: obj => obj.arrow, set: (obj, value) => { obj.arrow = value; } }, metadata: _metadata }, _arrow_initializers, _arrow_extraInitializers);
+            __esDecorate(null, null, _open_decorators, { kind: "field", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
+            __esDecorate(null, null, _maxWidth_decorators, { kind: "field", name: "maxWidth", static: false, private: false, access: { has: obj => "maxWidth" in obj, get: obj => obj.maxWidth, set: (obj, value) => { obj.maxWidth = value; } }, metadata: _metadata }, _maxWidth_initializers, _maxWidth_extraInitializers);
+            __esDecorate(null, null, _zIndex_decorators, { kind: "field", name: "zIndex", static: false, private: false, access: { has: obj => "zIndex" in obj, get: obj => obj.zIndex, set: (obj, value) => { obj.zIndex = value; } }, metadata: _metadata }, _zIndex_initializers, _zIndex_extraInitializers);
+            __esDecorate(null, null, _strictPositioning_decorators, { kind: "field", name: "strictPositioning", static: false, private: false, access: { has: obj => "strictPositioning" in obj, get: obj => obj.strictPositioning, set: (obj, value) => { obj.strictPositioning = value; } }, metadata: _metadata }, _strictPositioning_initializers, _strictPositioning_extraInitializers);
+            __esDecorate(null, null, _tooltipElement_decorators, { kind: "field", name: "tooltipElement", static: false, private: false, access: { has: obj => "tooltipElement" in obj, get: obj => obj.tooltipElement, set: (obj, value) => { obj.tooltipElement = value; } }, metadata: _metadata }, _tooltipElement_initializers, _tooltipElement_extraInitializers);
+            __esDecorate(null, null, _arrowElement_decorators, { kind: "field", name: "arrowElement", static: false, private: false, access: { has: obj => "arrowElement" in obj, get: obj => obj.arrowElement, set: (obj, value) => { obj.arrowElement = value; } }, metadata: _metadata }, _arrowElement_initializers, _arrowElement_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SniceTooltip = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.portalStylesInjected = false; }
+        static ensurePortalStyles() {
+            if (SniceTooltip.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.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.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};
+            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';
+            }
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SniceTooltip = _classThis;
+})();
+
+export { SniceTooltip };
+//# sourceMappingURL=snice-tooltip.js.map