@riverty/web-components 6.3.0 → 6.3.1

package/dist/esm/r-icon-button_2.entry.js

@@ -0,0 +1,489 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+
+const iconButtonCss = ":host{display:inline-flex;vertical-align:top;--r-icon-button--color:inherit}:host(:hover:not([disabled]:not([disabled=false])):not(:active)){--r-icon-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false]))){--r-icon-button--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-within:not(:active):not([disabled]:not([disabled=false]))){box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}:host([disabled]:not([disabled=false])){opacity:0.4;--r-icon-button--cursor:not-allowed;--r-icon-button--box-shadow:none;--r-icon-button--background-color:transparent}:host([variant=contained]){--r-icon-button--color:var(--r-icon-inverse, #fff);--r-icon-button--background-color:var(--r-background-interactive-regular, #282828);--r-icon-button--box-shadow:none}:host([variant=contained]:hover:not([disabled]:not([disabled=false]))){--r-icon-button--color:var(--r-icon-regular, #282828);--r-icon-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=contained]:active:not([disabled]:not([disabled=false]))){--r-icon-button--color:var(--r-icon-regular, #282828);--r-icon-button--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([variant=contained][disabled]:not([disabled=false])){--r-icon-button--color:var(--r-icon-inverse, #fff);--r-icon-button--background-color:var(--r-background-interactive-regular, #282828)}:host([size=s]){--r-icon-button--height:1.5rem;--r-icon-button--width:1.5rem}:host([size=m]){--r-icon-button--height:2.25rem;--r-icon-button--width:2.25rem}:host([size=l]){--r-icon-button--height:2.75rem;--r-icon-button--width:2.75rem}.r-icon-button{display:var(--r-icon-button--display, inline-flex);align-items:var(--r-icon-button--align-items, center);justify-content:var(--r-icon-button--justify-content, center);outline:var(--r-icon-button--outline, none);cursor:var(--r-icon-button--cursor, pointer);pointer-events:var(--r-icon-button--pointer-events, initial);padding:var(--r-icon-button--padding, 0);border:var(--r-icon-button--border, none);color:var(--r-icon-button--color, inherit);background-color:var(--r-icon-button--background-color, transparent);box-sizing:var(--r-icon-button--box-sizing, border-box);border-width:var(--r-icon-button--border-width, 1px);border-style:var(--r-icon-button--border-style, solid);border-color:var(--r-icon-button--border-color, transparent);border-radius:var(--r-icon-button--border-radius, 50%);z-index:var(--r-icon-button--z-index, initial);width:var(--r-icon-button--width, 2.25rem);height:var(--r-icon-button--height, 2.25rem)}.r-icon-button--target-area{position:var(--r-icon-button--target-area--position, absolute);background:var(--r-icon-button--target-area--background, rgba(0, 0, 0, 0));width:var(--r-icon-button--target-area--width, 2.75rem);height:var(--r-icon-button--target-area--height, 2.75rem);z-index:var(--r-icon-button--target-area--z-index, 1)}.r-icon-button--icon{display:flex;align-items:center;justify-content:center}.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}";
+
+const IconButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.rClick = createEvent(this, "rClick");
+        /**
+         * Defines the size of the icon used within the button.
+         */
+        this.size = 'm';
+        /**
+         * @deprecated Use the `<r-tooltip>` component as a wrapper instead.
+         * Sets position for the tooltip.
+         * - `top`: Tooltip appears above the button.
+         * - `bottom`: Tooltip appears below the button.
+         * - `left`: Tooltip appears to the left of the button.
+         * - `right`: Tooltip appears to the right of the button.
+         */
+        this.tooltipPosition = 'top';
+        /**
+         * Defines the visual style of the button.
+         * - `standard`: Default button style.
+         * - `contained`: Button with a contained background.
+         */
+        this.variant = 'standard';
+        this._handleClick = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            this.rClick.emit();
+        };
+        this.onFocus = () => {
+            this.setFocus();
+        };
+        this.onBlur = () => {
+            this.setBlur();
+        };
+    }
+    /** Simulate a button click */
+    async triggerClick() {
+        var _a;
+        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.click();
+    }
+    /** Set focus on the button */
+    async setFocus() {
+        var _a;
+        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /** Remove focus from the button */
+    async setBlur() {
+        var _a;
+        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    render() {
+        const { name, size, disabled, tooltipText, tooltipPosition } = this;
+        const buttonAttrs = {
+            disabled,
+        };
+        const iconAttrs = {
+            name,
+            size
+        };
+        const buttonTemplate = () => (h("button", Object.assign({ key: 'df699957ba93858e755bfdf29de83a3ab9718fe3', type: "button", tabindex: !this.disabled && this.rTabindex || null, class: "r-icon-button", "aria-label": this.host.getAttribute('aria-label') || null }, buttonAttrs, { onClick: this._handleClick, onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.nativeElement = el) }), name ?
+            h("r-icon", Object.assign({}, iconAttrs))
+            :
+                h("r-icon", { size: size, class: "r-icon-button--icon" }, h("slot", null)), h("span", { key: '86e9640751a2e75f24ba6eb1d75850251f629579', class: "r-icon-button--label visually-hidden" }, this.label), h("span", { key: '509e3f6870a4da1e788082a8af5a50c93e8360b5', class: "r-icon-button--target-area" })));
+        return (h(Host, { key: 'e829d0c5038ebe4893b998b832bbff3c62335327' }, !disabled && tooltipText ?
+            h("r-tooltip", { text: tooltipText, position: tooltipPosition }, buttonTemplate())
+            :
+                buttonTemplate()));
+    }
+    get host() { return getElement(this); }
+};
+IconButton.style = iconButtonCss;
+
+const tooltipCss = ":host{display:inline-block}:host slot{display:contents}:host([data-position=bottom]){--r-tooltip--arrow--transform:rotate(0)}:host([data-position=right]){--r-tooltip--arrow--transform:rotate(270deg)}:host([data-position=left]){--r-tooltip--arrow--transform:rotate(90deg)}.r-tooltip{position:var(--r-tooltip--position, relative)}.r-tooltip:has(.r-tooltip--content--visible){--r-tooltip--content--display:flex;--r-tooltip--content--z-index:1060;--r-tooltip--arrow--display:flex}.r-tooltip--trigger{color:var(--r-tooltip--trigger--color, inherit);box-shadow:var(--r-tooltip--trigger--box-shadow, none);outline:var(--r-tooltip--trigger--outline, none);outline-offset:var(--r-tooltip--trigger--outline-offset, 0)}.r-tooltip--trigger:focus{--r-tooltip--trigger--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-tooltip--trigger--outline:2px solid var(--r-border-focused);--r-tooltip--trigger--outline-offset:2px}.r-tooltip--content{position:var(--r-tooltip--content--position, fixed);display:var(--r-tooltip--content--display, none);justify-content:var(--r-tooltip--content--justify-content, center);align-items:var(--r-tooltip--content--align-items, center);color:var(--r-tooltip--content--color, var(--r-text-inverse));background-color:var(--r-tooltip--content--background-color, var(--r-background-inverse));font-family:var(--r-tooltip--content--font-family, var(--r-font-family-text));font-weight:var(--r-tooltip--content--font-weight, var(--r-font-weight-regular));font-size:var(--r-tooltip--content--font-size, var(--r-font-size-200));line-height:var(--r-tooltip--content--line-height, var(--r-line-height-s));min-width:var(--r-tooltip--content--min-width, 32px);max-width:var(--r-tooltip--content--max-width, 300px);min-height:var(--r-tooltip--content--min-height, 32px);padding:var(--r-tooltip--content--padding, var(--r-spacing-050) var(--r-spacing-100));width:var(--r-tooltip--content--width, max-content);word-break:var(--r-tooltip--content--word-break, break-word);box-sizing:var(--r-tooltip--content--box-sizing, border-box);z-index:var(--r-tooltip--content--z-index, 0);white-space:var(--r-tooltip--content--white-space, normal)}.r-tooltip--arrow{display:var(--r-tooltip--arrow--display, none);position:var(--r-tooltip--arrow--position, fixed);width:var(--r-tooltip--arrow--width, 12px);height:var(--r-tooltip--arrow--height, 12px);transform:var(--r-tooltip--arrow--transform, rotate(180deg));z-index:var(--r-tooltip--content--z-index)}.r-tooltip--arrow:after{content:var(--r-tooltip--arrow--inner-content, \"\");display:var(--r-tooltip--arrow--inner--display, block);width:var(--r-tooltip--arrow--inner--width, 12px);height:var(--r-tooltip--arrow--inner--height, 6px);background-color:var(--r-tooltip--arrow--inner--background-color, var(--r-background-inverse));clip-path:var(--r-tooltip--arrow--inner--clip-path, polygon(50% 0%, 0% 100%, 100% 100%));border-radius:var(--r-tooltip--arrow--inner--border-radius, 0);align-self:var(--r-tooltip--arrow--inner--align-self, flex-end)}";
+
+const OFFSET = 20;
+const Tooltip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.rTooltipFocus = createEvent(this, "rTooltipFocus");
+        /** Tooltip display text */
+        this.text = '';
+        /** Specifies tooltip position */
+        this.position = 'top';
+        this.arrowPositionState = 'left';
+        this.isShown = false;
+        this.uniqueId = `r-tooltip-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.getOffsetLeft = (arrowPosition) => {
+            var _a, _b, _c;
+            const offsetLeft = Math.abs(((_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) - ((_c = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.width));
+            switch (arrowPosition) {
+                case 'center':
+                    return offsetLeft / 2;
+                case 'right':
+                    return offsetLeft;
+                default:
+                    return 0;
+            }
+        };
+        this.alignTooltipPosition = () => {
+            var _a, _b;
+            const elementRect = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const tooltipRect = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            const offsetLeft = this.getOffsetLeft(this.arrowPositionState);
+            const hostHeight = (elementRect === null || elementRect === void 0 ? void 0 : elementRect.height) + this.arrowHeight || 0;
+            switch (this.positionState) {
+                case 'top':
+                    this.alignPosition(this.tooltip, -offsetLeft, -this.tooltipContainerHeight);
+                    break;
+                case 'bottom':
+                    this.alignPosition(this.tooltip, -offsetLeft, hostHeight);
+                    break;
+                case 'left':
+                    this.tooltip.style.left = `${elementRect.left - tooltipRect.width - this.arrowWidth}px`;
+                    this.tooltip.style.top = `${elementRect.top + elementRect.height / 2 - tooltipRect.height / 2}px`;
+                    break;
+                case 'right':
+                    this.tooltip.style.left = `${elementRect.left + elementRect.width + this.arrowWidth}px`;
+                    this.tooltip.style.top = `${elementRect.top + elementRect.height / 2 - tooltipRect.height / 2}px`;
+                    break;
+            }
+        };
+        this.alignArrowPosition = () => {
+            var _a, _b, _c, _d;
+            const elementRect = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const tooltipRect = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            const hostHeight = (elementRect === null || elementRect === void 0 ? void 0 : elementRect.height) || 0;
+            const offsetLeft = Math.abs((elementRect === null || elementRect === void 0 ? void 0 : elementRect.width) - ((_d = (_c = this.arrow) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.width)) / 2;
+            const arrowCenterY = (elementRect === null || elementRect === void 0 ? void 0 : elementRect.top) + elementRect.height / 2 - this.arrowHeight / 2;
+            switch (this.positionState) {
+                case 'top':
+                    this.alignPosition(this.arrow, offsetLeft, -this.arrowHeight);
+                    break;
+                case 'bottom':
+                    this.alignPosition(this.arrow, offsetLeft, hostHeight);
+                    break;
+                case 'left':
+                    this.arrow.style.left = `${tooltipRect.left + tooltipRect.width}px`;
+                    this.arrow.style.top = `${arrowCenterY}px`;
+                    break;
+                case 'right':
+                    this.arrow.style.left = `${tooltipRect.left - this.arrowWidth}px`;
+                    this.arrow.style.top = `${arrowCenterY}px`;
+                    break;
+            }
+        };
+        this.alignPosition = (element, offsetLeft, offsetTop) => {
+            var _a;
+            if (!element) {
+                return;
+            }
+            let elementOffset = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            let left = elementOffset.left + offsetLeft;
+            let top = elementOffset.top + offsetTop;
+            element.style.left = `${left > 0 ? left : 0}px`;
+            element.style.top = `${top}px`;
+        };
+        /**
+         * Listen on hovering tooltip element and update tooltip position if needed
+         */
+        this.handleHover = () => {
+            this.showTooltip();
+            this.setCorrectPosition();
+        };
+        /**
+         * Listen on focusing tooltip element and update tooltip position if needed
+         */
+        this.handleFocus = () => {
+            this.showTooltip();
+            this.setCorrectPosition();
+            this.rTooltipFocus.emit({ element: this.element });
+        };
+        this.showTooltip = () => {
+            var _a;
+            this.isShown = true;
+            this.tooltip.classList.add('r-tooltip--content--visible');
+            this.updateZIndex();
+            const interactiveElement = this.getInteractiveElement(this.activeElement);
+            interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-description', (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.innerText);
+        };
+        this.removeTooltip = () => {
+            this.isShown = false;
+            this.tooltip.style.width = 'max-content';
+            this.tooltip.style.zIndex = '';
+            this.arrow.style.zIndex = '';
+            this.tooltip.classList.remove('r-tooltip--content--visible');
+            const interactiveElement = this.getInteractiveElement(this.activeElement);
+            interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.removeAttribute('aria-description');
+        };
+        this.handleScroll = () => {
+            if (!this.isShown) {
+                return;
+            }
+            if (!this.isOnScreen) {
+                this.removeTooltip();
+                return;
+            }
+            this.setCorrectPosition();
+        };
+    }
+    /**
+     * Watch on position value change and update tooltip position if needed
+     */
+    handleVerticalPosition() {
+        this.setCorrectPosition();
+    }
+    /**
+     * Listen on window scroll and update tooltip position if needed
+     */
+    handleScrolling() {
+        this.setCorrectPosition();
+    }
+    /**
+     * Listen on window resizing and update tooltip position if needed
+     */
+    handleResizing() {
+        this.setCorrectPosition();
+    }
+    /**
+     * Listen on window keydown and hide tooltip if needed
+     */
+    handleKeydown(event) {
+        if (this.isShown && event.key === 'Escape') {
+            this.removeTooltip();
+        }
+    }
+    /**
+     * Parent with non visible overflow
+     */
+    get overflowedParent() {
+        return this.findOverflowParent(this.element.parentElement);
+    }
+    get arrowWidth() {
+        var _a;
+        return ((_a = this.arrow) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+    }
+    get arrowHeight() {
+        var _a;
+        return ((_a = this.arrow) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
+    }
+    get tooltipContainerWidth() {
+        var _a, _b;
+        return ((_b = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) + this.arrowWidth || 0;
+    }
+    get tooltipContainerHeight() {
+        var _a, _b;
+        return ((_b = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) + this.arrowHeight || 0;
+    }
+    /**
+     * Available space at the top
+     */
+    get top() {
+        return this.element.getBoundingClientRect().top;
+    }
+    /**
+     * Available space on the left
+     */
+    get left() {
+        return this.element.getBoundingClientRect().left;
+    }
+    get isOnScreen() {
+        const parent = this.overflowedParent || document.documentElement;
+        const parentRect = parent.getBoundingClientRect();
+        const elementRect = this.element.getBoundingClientRect();
+        const isVerticallyVisible = elementRect.top >= parentRect.top && elementRect.bottom <= parentRect.bottom;
+        const isHorizontallyVisible = elementRect.left >= parentRect.left && elementRect.right <= parentRect.right;
+        return isVerticallyVisible && isHorizontallyVisible;
+    }
+    /**
+     * Available space at the bottom
+     */
+    get bottom() {
+        function calculateBottomSpace(element) {
+            return window.innerHeight - element.getBoundingClientRect().top - element.getBoundingClientRect().height;
+        }
+        return calculateBottomSpace(this.element);
+    }
+    /**
+     * Available space on the right
+     */
+    get right() {
+        function calculateRightSpace(element) {
+            return window.innerWidth - element.getBoundingClientRect().left - element.getBoundingClientRect().width;
+        }
+        return calculateRightSpace(this.element);
+    }
+    /**
+     * Defines which horizontal placement is available
+     */
+    get horizontalPlacement() {
+        return this.tooltipContainerWidth + OFFSET < this.left ? 'left' : 'right';
+    }
+    /**
+     * Defines which vertical placement is available
+     */
+    get verticalPlacement() {
+        return this.tooltipContainerHeight + OFFSET < this.top ? 'top' : 'bottom';
+    }
+    /**
+     * Checks if there is enough space for placing tooltip vertically
+     */
+    get isEnoughSpaceVertically() {
+        return this.tooltipContainerHeight + OFFSET < this.top || this.tooltipContainerHeight + OFFSET < this.bottom;
+    }
+    /**
+     * Checks if there is enough space for placing tooltip horizontally
+     */
+    get isEnoughSpaceHorizontally() {
+        return this.tooltipContainerWidth + OFFSET < this.left || this.tooltipContainerWidth + OFFSET < this.right;
+    }
+    get activeElement() {
+        return this.element.querySelector('r-button, r-icon-button, a, button, [tabindex]:not([tabindex="-1"])');
+    }
+    /**
+     * Gets the actual interactive element (button/link) from within r-button or r-icon-button shadow DOM,
+     * or returns the element itself if it's already interactive
+     */
+    getInteractiveElement(element) {
+        if (!element)
+            return null;
+        if (element.tagName === 'R-BUTTON' || element.tagName === 'R-ICON-BUTTON') {
+            const shadowRoot = element.shadowRoot;
+            if (shadowRoot) {
+                return shadowRoot.querySelector('button, a');
+            }
+        }
+        return element;
+    }
+    /**
+     * Define position state
+     */
+    componentWillLoad() {
+        this.positionState = this.position;
+    }
+    /**
+     * Listen to active child element
+     */
+    componentDidLoad() {
+        var _a, _b, _c;
+        (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', () => {
+            this.handleFocus();
+        });
+        (_b = this.activeElement) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', () => {
+            this.removeTooltip();
+        });
+        (_c = this.overflowedParent) === null || _c === void 0 ? void 0 : _c.addEventListener('scroll', () => {
+            this.handleScroll();
+        });
+    }
+    /**
+     * Finds first element's parent with not visible overflow.
+     * @param element -- parent element
+     * @param initEl -- initial(child) element
+     */
+    findOverflowParent(element) {
+        var _a, _b;
+        function notVisible(element) {
+            return getComputedStyle(element).overflow !== "visible";
+        }
+        if (!element) {
+            return null;
+        }
+        if (((_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.nodeType) === Node.DOCUMENT_FRAGMENT_NODE) {
+            return this.findOverflowParent((_b = element.parentNode) === null || _b === void 0 ? void 0 : _b.host);
+        }
+        if (notVisible(element)) {
+            return element;
+        }
+        if (element.parentElement) {
+            return this.findOverflowParent(element.parentElement);
+        }
+        return null;
+    }
+    /**
+     * Checks the alternative tooltip position.
+     * For example: If defined position is "top" and there is no free space for this position at the top of the component,
+     * first it checks available vertical space to place tooltip at the bottom.
+     * If there is no available space at the bottom, it checks the available space horizontally and sets it horizontally.
+     */
+    getAlternativePosition() {
+        switch (this.position) {
+            case 'top':
+                return this.isEnoughSpaceVertically ? 'bottom' : this.horizontalPlacement;
+            case 'bottom':
+                return this.isEnoughSpaceVertically ? 'top' : this.horizontalPlacement;
+            case 'left':
+                return this.isEnoughSpaceHorizontally ? 'right' : this.verticalPlacement;
+            case 'right':
+                return this.isEnoughSpaceHorizontally ? 'left' : this.verticalPlacement;
+        }
+    }
+    /**
+     * Set correct tooltip position.
+     * First it checks the available space for a defined position and then sets the new one based on the available space.
+     */
+    setCorrectPosition() {
+        if (!this.tooltip || !this.isShown) {
+            return;
+        }
+        switch (this.position) {
+            case 'top':
+                this.positionState = this.tooltipContainerHeight + OFFSET < this.top ? this.position : this.getAlternativePosition();
+                break;
+            case 'bottom':
+                this.positionState = this.tooltipContainerHeight + OFFSET < this.bottom ? this.position : this.getAlternativePosition();
+                break;
+            case 'left':
+                this.positionState = this.tooltipContainerWidth + OFFSET < this.left ? this.position : this.getAlternativePosition();
+                break;
+            case 'right':
+                this.positionState = this.tooltipContainerWidth + OFFSET < this.right ? this.position : this.getAlternativePosition();
+                break;
+        }
+        this.adjustArrowPosition();
+        this.alignTooltipPosition();
+        this.alignArrowPosition();
+        // Allow tooltip content wrap and recalculate position
+        if (this.tooltip.style.width === 'fit-content') {
+            return;
+        }
+        this.tooltip.style.width = 'fit-content';
+        this.alignTooltipPosition();
+    }
+    /**
+     * Adjusts arrow correct position.
+     * For bottom & top tooltip positions there are 3 possible arrow.
+     * For right & left tooltip positions there is only one position = "center".
+     */
+    adjustArrowPosition() {
+        const isEnoughTooltipSpaceLeft = this.tooltipContainerWidth / 2 + OFFSET < this.left;
+        const isEnoughTooltipSpaceRight = this.tooltipContainerWidth / 2 + OFFSET < this.right;
+        if (isEnoughTooltipSpaceLeft && isEnoughTooltipSpaceRight || !isEnoughTooltipSpaceLeft && !isEnoughTooltipSpaceRight || this.positionState === 'left' || this.positionState === 'right') {
+            this.arrowPositionState = 'center';
+        }
+        else if (!isEnoughTooltipSpaceLeft) {
+            this.arrowPositionState = 'left';
+        }
+        else if (!isEnoughTooltipSpaceRight) {
+            this.arrowPositionState = 'right';
+        }
+    }
+    updateZIndex() {
+        const dialogs = document.querySelectorAll('dialog[open]');
+        let highestZIndex = 0;
+        dialogs.forEach((dialog) => {
+            const htmlDialog = dialog;
+            if (htmlDialog.open) {
+                const style = getComputedStyle(htmlDialog);
+                const zIndex = parseInt(style.zIndex, 10);
+                if (!isNaN(zIndex) && zIndex > highestZIndex) {
+                    highestZIndex = zIndex;
+                }
+            }
+        });
+        const tooltipZIndex = highestZIndex > 0 ? highestZIndex + 10 : 1060;
+        this.tooltip.style.zIndex = `${tooltipZIndex}`;
+        this.arrow.style.zIndex = `${tooltipZIndex}`;
+    }
+    render() {
+        const { text, arrowPositionState, positionState, isShown, uniqueId } = this;
+        const hostAttrs = {
+            'data-arrow-position': arrowPositionState,
+            'data-position': positionState
+        };
+        const triggerAttrs = {
+            tabindex: !this.activeElement ? 0 : null,
+            role: !this.activeElement ? 'button' : null,
+            'aria-describedby': !this.activeElement && isShown ? uniqueId : null
+        };
+        const contentAttrs = {
+            id: uniqueId,
+            role: 'tooltip',
+            'aria-hidden': `${!isShown}`
+        };
+        return (h(Host, Object.assign({ key: '19155344b057a413834706bf19dd5a1bc082549d' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: '298c77b5c9611aba36d3df450f2c4ebda728113a', class: "r-tooltip" }, h("div", Object.assign({ key: 'e97a5fb30b6b67cde30734b02acdd1f354d58219', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: '3ad175db2674badbe9e022f52794a6f16afee7f5' })), h("div", Object.assign({ key: '6ed4995a7765422ff604e8da0797f651c12b1e8a', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), h("div", { key: '98e5991e801b1e54138c2a5156061237cafa2459', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
+    }
+    get element() { return getElement(this); }
+    static get watchers() { return {
+        "position": ["handleVerticalPosition"]
+    }; }
+};
+Tooltip.style = tooltipCss;
+
+export { IconButton as r_icon_button, Tooltip as r_tooltip };