@tet/tet-components 1.4.123-testing → 1.4.124-staging

package/dist/cjs/tet-tooltip.cjs.entry.js

@@ -1,432 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-3242ff3f.js');
-const TooltipPosition = require('./TooltipPosition-03ffa8a1.js');
-
-const tetTooltipCss = ":host{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;padding:0;margin:0}:host{--color-gray-light:#cdd2de;--color-ta070:#f5f6f8;--color-ta080:#e6e8ee;--color-ta100:#cdd2de;--color-ta200:#9ba5be;--color-ta300:#69789c;--color-ta500:#1e356a;--color-ta600:#051d59;--color-tc090:#d6e6fd;--color-tc100:#d1dffe;--color-tc300:#75a1fb;--color-tc500:#1a70f6;--color-tc600:#0060f5;--color-td500:#00F1F2;--color-td600:#01cbe0;--color-tf600:#f53b2a;--color-tg300:#2b3036;--color-tg400:#1d2128;--color-tg500:#12171e;--color-tg600:#01050c;--color-th500:#f5f5f5;--color-ti500:#869198;--color-ti600:#aeb7bc;--text-font:Gilroy, serif;--text-color-darker:var(--color-ta600);--text-color-dark:var(--color-ta500);--text-color-dark-theme:var(--color-th500);--icons-font:Tet Icons, serif}.icon.tet-search{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-search::before{content:\"\\e86e\"}.icon.tet-close-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close-circled::before{content:\"\\e85a\"}.icon.tet-close{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close::before{content:\"\\e85b\"}.icon.tet-check-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check-circled::before{content:\"\\e86c\"}.icon.tet-check{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check::before{content:\"\\e855\"}.icon.tet-chevron-up{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-up::before{content:\"\\e859\"}.icon.tet-chevron-down{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-down::before{content:\"\\e856\"}.icon.tet-clipboard{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-clipboard::before{content:\"\\e86a\"}.icon.tet-info{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-info::before{content:\"\\e81d\"}.icon.tet-done{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-done::before{content:\"\\e867\"}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}:host{--font-family-fallback:Gilroy, Arial, sans-serif;--font-family-headline:Gilroy;--font-family-content:Inter, var(--font-family-fallback);font-family:var(--font-family-content)}:host{--tooltip-background-color:var(--tc-tooltip-layer-secondary);--tooltip-text-color:var(--tc-tooltip-text-inverse-primary);--tooltip-padding:1em;--tooltip-display-speed:.2s;--tooltip-delay-show:0s;--tooltip-delay-hide:.25s;--tooltip-max-width:18.75rem;--tooltip-border-radius:0.3125rem;--tooltip-font-weight:400;position:fixed;display:inline-block;width:max-content;max-width:min(var(--tooltip-max-width), 100%);z-index:100;pointer-events:none;opacity:0}:host(.hidden){visibility:hidden;opacity:0;transition:visibility 0s var(--tooltip-display-speed), opacity var(--tooltip-display-speed) linear}:host(.hidden-quick){opacity:0;visibility:hidden;transform:scale(0)}:host(.visible){visibility:visible;opacity:1;transition:visibility 0s var(--tooltip-display-speed), opacity var(--tooltip-display-speed) linear;transition-delay:var(--tooltip-delay-show)}.light-inverse{--tooltip-background-color:var(--tc-tooltip-layer-primary);--tooltip-text-color:var(--tc-tooltip-text-primary)}.dark{--tooltip-background-color:var(--tc-tooltip-layer-primary-dark);--tooltip-text-color:var(--tc-tooltip-text-primary-dark)}.dark-inverse{--tooltip-background-color:var(--tc-tooltip-layer-secondary-dark);--tooltip-text-color:var(--tc-tooltip-text-inverse-primary-dark)}.tooltip{position:relative;background:var(--tooltip-background-color);color:var(--tooltip-text-color);border-radius:var(--tooltip-border-radius);padding:var(--tooltip-padding);font-family:var(--font-family-content);font-weight:var(--tooltip-font-weight);font-size:0.875rem;white-space:normal;line-height:1.5em}.tooltip-pointer{position:absolute;width:0;height:0;border-left:0.5rem solid transparent;border-right:0.5rem solid transparent;border-bottom:0.5rem solid var(--tooltip-background-color)}@keyframes fadeIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;visibility:visible;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1;visibility:visible;transform:scale(1)}100%{opacity:0;visibility:hidden;transform:scale(0)}}";
-const TetTooltipStyle0 = tetTooltipCss;
-
-const TetTooltip = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.theme = 'classic';
-        this.targetElementSelector = undefined;
-        this.hoverElement = undefined;
-        this.doNotShowOnHover = false;
-        this.position = TooltipPosition.TooltipPosition.BOTTOM;
-        this.positionState = TooltipPosition.TooltipPosition.BOTTOM;
-        this.showTooltip = false;
-    }
-    /**
-     * The HTML element that should trigger the tooltip.
-     */
-    targetElement = null;
-    /**
-     * The pointer element of the tooltip.
-     */
-    tooltipPointer;
-    /**
-     * The minimum spacing in pixels from the sides of the window and the target element for the tooltip.
-     */
-    margin = 8;
-    /**
-     * The time in seconds of how long should the hover should happen before the tooltip should play the fade-out animation.
-     * This should match CSS --tooltip-delay-show property value.
-     */
-    tooltipTimeThreshold = 0.25;
-    /**
-     * The properties of keeping track when the mouse entered or exited the target element.
-     */
-    tooltipStartTime = 0;
-    tooltipEndTime = 0;
-    resizeObserver;
-    displayTimeout;
-    listenersAttached = false;
-    showHandler = this.show.bind(this);
-    hideHandler = this.hide.bind(this);
-    get element() { return index.getElement(this); }
-    /**
-     * Listen for the `touchmove` event and hide the tooltip if visible.
-     * This will handle the mobile device events.
-     */
-    handleTouchmove() {
-        this.hideQuick();
-    }
-    /**
-     * Listen for the `wheel` event and hide the tooltip if visible.
-     * The `wheel` event is intentionally preferred instead of `scroll`.
-     */
-    handleWheel() {
-        this.hideQuick();
-    }
-    /**
-     * Listen for the `Escape` keydown event and hide the tooltip if visible.
-     */
-    onKeydown(event) {
-        if (event.code === 'Escape') {
-            this.hideQuick();
-        }
-    }
-    /**
-     * Listen for the window to resize and reset the `positionState` to the original default value.
-     */
-    handleResize() {
-        this.positionState = this.position;
-    }
-    handlePositionChange(position) {
-        this.positionState = position;
-    }
-    /**
-     * Hide the tooltip quickly and ignore the time the tooltip has been visible for on screen.
-     */
-    hideQuick = () => {
-        if (this.showTooltip) {
-            this.tooltipStartTime = Date.now();
-            this.hide();
-        }
-    };
-    onShowTooltipChange(value) {
-        // The "fade-out" is watched separately for changes to avoid the animation on the initial page load.
-        if (!value) {
-            // The time spent on showing the tooltip in seconds.
-            const tooltipTime = this.tooltipEndTime / 1000 - this.tooltipStartTime / 1000;
-            // This avoids playing the "fade-out" animation when the mouse is quickly moved over tooltip target element.
-            // Otherwise, the tooltips would pop up and play the fade-out animation each time.
-            this.element.classList.add(tooltipTime > this.tooltipTimeThreshold ? 'hidden' : 'hidden-quick');
-        }
-        else {
-            this.element.classList.remove('hidden', 'hidden-quick');
-        }
-    }
-    componentWillLoad() {
-        this.positionState = this.position;
-        // By default, set tooltip to be hidden.
-        this.element.style.display = 'none';
-    }
-    resolveTarget() {
-        if (this.hoverElement) {
-            return this.hoverElement;
-        }
-        if (this.targetElementSelector) {
-            return (this.element.closest(this.targetElementSelector) ??
-                document.querySelector(this.targetElementSelector));
-        }
-        return this.element.parentElement;
-    }
-    bindTarget() {
-        const target = this.resolveTarget();
-        const element = this.element;
-        if (this.listenersAttached && target === this.targetElement) {
-            return;
-        }
-        this.unbindTarget();
-        this.targetElement = target;
-        if (!target) {
-            return;
-        }
-        if (!this.doNotShowOnHover) {
-            target.addEventListener('mouseenter', this.showHandler);
-            target.addEventListener('mouseleave', this.hideHandler);
-        }
-        target.addEventListener('focusin', this.showHandler);
-        target.addEventListener('focusout', this.hideHandler);
-        this.resizeObserver = new ResizeObserver(() => {
-            if (!target.offsetHeight) {
-                element.classList.remove('hidden');
-                element.classList.add('hidden-quick');
-            }
-        });
-        this.resizeObserver.observe(target);
-        this.listenersAttached = true;
-    }
-    unbindTarget() {
-        if (this.targetElement && this.listenersAttached) {
-            this.targetElement.removeEventListener('mouseenter', this.showHandler);
-            this.targetElement.removeEventListener('mouseleave', this.hideHandler);
-            this.targetElement.removeEventListener('focusin', this.showHandler);
-            this.targetElement.removeEventListener('focusout', this.hideHandler);
-        }
-        this.resizeObserver?.disconnect();
-        this.resizeObserver = undefined;
-        this.listenersAttached = false;
-    }
-    scheduleDisplay() {
-        // Delay the visibility for a moment to avoid the blinking effect of the tooltips shortly after the load.
-        const element = this.element;
-        const shouldShowOnHover = !this.doNotShowOnHover;
-        const targetElement = this.targetElement;
-        clearTimeout(this.displayTimeout);
-        this.displayTimeout = setTimeout(() => {
-            this.displayTimeout = undefined;
-            if (!element.isConnected)
-                return;
-            element.style.display = 'inline-block';
-            if (shouldShowOnHover && targetElement?.matches(':hover')) {
-                void this.show();
-            }
-        }, 100);
-    }
-    componentDidLoad() {
-        this.bindTarget();
-        this.scheduleDisplay();
-    }
-    connectedCallback() {
-        const element = this.element;
-        queueMicrotask(() => {
-            if (!element.isConnected) {
-                return;
-            }
-            this.bindTarget();
-            this.scheduleDisplay();
-        });
-    }
-    disconnectedCallback() {
-        clearTimeout(this.displayTimeout);
-        this.displayTimeout = undefined;
-        this.unbindTarget();
-    }
-    /**
-     * Show the tooltip.
-     */
-    async show() {
-        this.tooltipStartTime = Date.now();
-        this.showTooltip = true;
-        this.positionTooltip();
-    }
-    /**
-     * Hide the tooltip.
-     */
-    async hide() {
-        this.tooltipEndTime = Date.now();
-        this.showTooltip = false;
-    }
-    /**
-     * Toggle the tooltip.
-     */
-    async toggle() {
-        if (this.showTooltip) {
-            await this.hide();
-        }
-        else {
-            await this.show();
-        }
-    }
-    /**
-     * Positions the tooltip corresponding to the target element.
-     */
-    positionTooltip = () => {
-        const targetElement = this.targetElement;
-        if (!targetElement) {
-            return;
-        }
-        const targetBoundaries = targetElement.getBoundingClientRect();
-        /**
-         * Check whether the tooltip can be placed on either side of the element
-         * when either the left or the right position is set by default.
-         */
-        if ([TooltipPosition.TooltipPosition.LEFT, TooltipPosition.TooltipPosition.RIGHT].includes(this.positionState)) {
-            const canPositionRight = window.innerWidth > targetBoundaries.right + this.margin + this.element.offsetWidth;
-            const canPositionLeft = this.element.offsetWidth + this.margin < targetBoundaries.left;
-            // Change positioning if it cannot.
-            if (!canPositionLeft && !canPositionRight) {
-                this.positionState = TooltipPosition.TooltipPosition.BOTTOM;
-            }
-        }
-        const isTooltipOutOfVerticalBounds = this.positionTooltipVertically(targetBoundaries);
-        const isTooltipOutOfHorizontalBounds = this.positionTooltipHorizontally(targetBoundaries);
-        // Applies a margin for spacing purposes.
-        // This is done via JS as the margin values are needed for position calculations as well.
-        this.element.style.margin = `${this.margin}px`;
-        // Position the pointer (caret) element after the tooltip as the main tooltip position is required for calculations.
-        const isTooltipOutOfBounds = isTooltipOutOfVerticalBounds || isTooltipOutOfHorizontalBounds;
-        const actualTooltipPosition = this.getTooltipPosition(isTooltipOutOfBounds);
-        this.positionTooltipPointer(actualTooltipPosition);
-    };
-    getTooltipPosition(isTooltipOutOfBounds) {
-        switch (this.positionState) {
-            case TooltipPosition.TooltipPosition.TOP:
-                if (isTooltipOutOfBounds) {
-                    return TooltipPosition.TooltipPosition.BOTTOM;
-                }
-                return TooltipPosition.TooltipPosition.TOP;
-            case TooltipPosition.TooltipPosition.BOTTOM:
-                if (isTooltipOutOfBounds) {
-                    return TooltipPosition.TooltipPosition.TOP;
-                }
-                return TooltipPosition.TooltipPosition.BOTTOM;
-            case TooltipPosition.TooltipPosition.LEFT:
-                if (isTooltipOutOfBounds) {
-                    return TooltipPosition.TooltipPosition.RIGHT;
-                }
-                return TooltipPosition.TooltipPosition.LEFT;
-            case TooltipPosition.TooltipPosition.RIGHT:
-                if (isTooltipOutOfBounds) {
-                    return TooltipPosition.TooltipPosition.LEFT;
-                }
-                return TooltipPosition.TooltipPosition.RIGHT;
-        }
-    }
-    positionTooltipVertically(targetBoundaries) {
-        let isTooltipOutOfBounds = false;
-        switch (this.positionState) {
-            case TooltipPosition.TooltipPosition.BOTTOM:
-                if (targetBoundaries.bottom + this.element.offsetHeight + this.margin > window.innerHeight) {
-                    // When the tooltip would be outside the screen on the bottom side.
-                    this.element.style.top = '';
-                    this.element.style.bottom = `${window.innerHeight - targetBoundaries.top}px`;
-                    isTooltipOutOfBounds = true;
-                }
-                else {
-                    // When the tooltip is within the screen boundaries.
-                    this.element.style.top = `${targetBoundaries.bottom}px`;
-                    this.element.style.bottom = '';
-                }
-                break;
-            case TooltipPosition.TooltipPosition.TOP:
-                if (targetBoundaries.top - this.element.offsetHeight < 0) {
-                    // When the tooltip would be outside the screen on the top side.
-                    this.element.style.top = `${targetBoundaries.bottom}px`;
-                    this.element.style.bottom = '';
-                    isTooltipOutOfBounds = true;
-                }
-                else {
-                    // When the tooltip is within the screen boundaries.
-                    this.element.style.top = '';
-                    this.element.style.bottom = `${window.innerHeight - targetBoundaries.top}px`;
-                }
-                break;
-            default:
-                const targetElementCenterPostion = targetBoundaries.top + targetBoundaries.height / 2;
-                const tooltipCenterWidth = this.element.offsetHeight / 2 + this.margin;
-                const tooltipTopPosition = targetElementCenterPostion - tooltipCenterWidth;
-                if (tooltipTopPosition < 0) {
-                    // When the tooltip would be outside the screen on the top side.
-                    this.element.style.top = '0';
-                    this.element.style.bottom = '';
-                }
-                else if (tooltipTopPosition + this.element.offsetHeight + this.margin > window.innerHeight) {
-                    // When the tooltip would be outside the screen on the bottom side.
-                    this.element.style.top = '';
-                    this.element.style.bottom = '0';
-                }
-                else {
-                    // When the tooltip is within the screen boundaries.
-                    this.element.style.top = `${tooltipTopPosition}px`;
-                    this.element.style.bottom = '';
-                }
-                break;
-        }
-        return isTooltipOutOfBounds;
-    }
-    positionTooltipHorizontally(targetBoundaries) {
-        let isTooltipOutOfBounds = false;
-        switch (this.positionState) {
-            case TooltipPosition.TooltipPosition.LEFT:
-                if (this.element.offsetWidth + this.margin > targetBoundaries.left) {
-                    this.element.style.left = `${targetBoundaries.right}px`;
-                    this.element.style.right = '';
-                    isTooltipOutOfBounds = true;
-                }
-                else {
-                    this.element.style.left = '';
-                    this.element.style.right = `${window.innerWidth - targetBoundaries.left}px`;
-                }
-                break;
-            case TooltipPosition.TooltipPosition.RIGHT:
-                if (window.innerWidth < targetBoundaries.right + this.margin + this.element.offsetWidth) {
-                    this.element.style.left = '';
-                    this.element.style.right = `${window.innerWidth - targetBoundaries.left}px`;
-                    isTooltipOutOfBounds = true;
-                }
-                else {
-                    this.element.style.left = `${targetBoundaries.right}px`;
-                    this.element.style.right = '';
-                }
-                break;
-            default:
-                const targetElementCenterPostion = targetBoundaries.left + targetBoundaries.width / 2;
-                const tooltipCenterWidth = this.element.offsetWidth / 2 - this.margin;
-                const tooltipLeftPosition = targetElementCenterPostion - tooltipCenterWidth;
-                if (tooltipLeftPosition < 0) {
-                    // When the tooltip would be outside the screen on the left side.
-                    this.element.style.left = '0';
-                    this.element.style.right = '';
-                }
-                else if (tooltipLeftPosition + this.element.offsetWidth + this.margin > window.innerWidth) {
-                    // When the tooltip would be outside the screen on the right side.
-                    this.element.style.left = '';
-                    this.element.style.right = '0';
-                }
-                else {
-                    // When the tooltip is within the screen boundaries.
-                    this.element.style.left = `${tooltipLeftPosition}px`;
-                    this.element.style.right = '';
-                }
-                break;
-        }
-        return isTooltipOutOfBounds;
-    }
-    /**
-     * Position the tooltip pointer (caret) element.
-     */
-    positionTooltipPointer = (position) => {
-        const targetElement = this.targetElement;
-        if (!targetElement) {
-            return;
-        }
-        const target = targetElement.getBoundingClientRect();
-        const tooltip = this.element.getBoundingClientRect();
-        if ([TooltipPosition.TooltipPosition.TOP, TooltipPosition.TooltipPosition.BOTTOM].includes(position)) {
-            // Get the boundaries of the overlapping target element and the tooltip area on X axis.
-            const max = Math.min(target.right, tooltip.left + this.element.offsetWidth);
-            const min = Math.max(target.left, tooltip.left);
-            const overlapAreaMiddle = (max + min) / 2;
-            this.tooltipPointer.style.left = `${overlapAreaMiddle - tooltip.left - this.tooltipPointer.offsetWidth / 2}px`;
-            if (position === TooltipPosition.TooltipPosition.BOTTOM) {
-                this.tooltipPointer.style.top = `-6px`;
-                this.tooltipPointer.style.bottom = '';
-                this.tooltipPointer.style.transform = 'rotate(0deg)';
-            }
-            if (position === TooltipPosition.TooltipPosition.TOP) {
-                this.tooltipPointer.style.top = '';
-                this.tooltipPointer.style.bottom = `-6px`;
-                this.tooltipPointer.style.transform = 'rotate(180deg)';
-            }
-        }
-        if ([TooltipPosition.TooltipPosition.LEFT, TooltipPosition.TooltipPosition.RIGHT].includes(position)) {
-            // Get the boundaries of the overlapping target element and the tooltip area on Y axis.
-            const max = Math.min(target.bottom, tooltip.top + this.element.offsetHeight);
-            const min = Math.max(target.top, tooltip.top);
-            const overlapAreaMiddle = (max + min) / 2;
-            this.tooltipPointer.style.top = `${overlapAreaMiddle - tooltip.top - this.tooltipPointer.offsetHeight / 2}px`;
-            if (position === TooltipPosition.TooltipPosition.RIGHT) {
-                this.tooltipPointer.style.left = `-12px`;
-                this.tooltipPointer.style.right = '';
-                this.tooltipPointer.style.transform = 'rotate(270deg)';
-            }
-            if (position === TooltipPosition.TooltipPosition.LEFT) {
-                this.tooltipPointer.style.left = '';
-                this.tooltipPointer.style.right = `-12px`;
-                this.tooltipPointer.style.transform = 'rotate(90deg)';
-            }
-        }
-    };
-    /**
-     * Renders the tooltip.
-     */
-    renderTooltip = () => {
-        return (index.h("div", { class: { tooltip: true, [`${this.theme}`]: true }, role: "tooltip", "aria-hidden": this.showTooltip ? 'false' : 'true', "aria-live": this.showTooltip ? 'polite' : undefined }, index.h("div", { class: "tooltip-pointer", ref: (el) => (this.tooltipPointer = el) }), index.h("slot", null)));
-    };
-    render() {
-        return index.h(index.Host, { key: '8ec5e15fbd0522e11d2c313c282b3a8d86a91ffc', class: { visible: this.showTooltip } }, this.renderTooltip());
-    }
-    static get watchers() { return {
-        "position": ["handlePositionChange"],
-        "showTooltip": ["onShowTooltipChange"]
-    }; }
-};
-TetTooltip.style = TetTooltipStyle0;
-
-exports.tet_tooltip = TetTooltip;