@aquera/nile-elements 0.1.31-beta-1.1 → 0.1.31

package/dist/src/nile-tooltip/nile-tooltip.d.ts

@@ -1,40 +1,80 @@
-import { CSSResultArray } from 'lit';
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CSSResultArray, TemplateResult } from 'lit';
+import '../nile-popup/nile-popup';
 import NileElement from '../internal/nile-element';
-type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+import type NilePopup from '../nile-popup/nile-popup';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-tooltip
+ *
+ */
 export declare class NileTooltip extends NileElement {
+    /**
+     * The styles for Tooltip
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    private hoverTimeout;
+    defaultSlot: HTMLSlotElement;
+    body: HTMLElement;
+    popup: NilePopup;
+    /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
     content: string;
+    /** Size Property to decide the tool tip size */
     size: 'small' | 'large';
-    placement: TooltipPlacement;
+    /**
+     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
+     * inside of the viewport.
+     */
+    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    /** Disables the tooltip so it won't show when triggered. */
     disabled: boolean;
-    open: boolean;
-    trigger: string;
+    /** The distance in pixels from which to offset the tooltip away from its target. */
     distance: number;
+    /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
+    open: boolean;
+    /** The distance in pixels from which to offset the tooltip along its target. */
     skidding: number;
+    /**
+     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
+     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
+     * programmatically.
+     */
+    trigger: string;
+    /**
+     * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+     * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+     * scenarios.
+     */
     hoist: boolean;
-    tooltip: HTMLElement;
-    slotElement: HTMLSlotElement;
-    private hoverTimeout;
-    static get styles(): CSSResultArray;
     connectedCallback(): void;
+    firstUpdated(): void;
     disconnectedCallback(): void;
-    private getBasePlacement;
-    private getAlignmentModifier;
-    private updateTooltipPosition;
-    private showTooltip;
-    private handleAfterShow;
-    private hideTooltip;
-    private handleAfterHide;
-    private handleMouseOver;
-    private handleMouseOut;
+    private handleBlur;
     private handleClick;
-    updated(changedProperties: Map<string, any>): void;
     private handleFocus;
-    private handleBlur;
-    render(): import("lit-html").TemplateResult<1>;
+    private handleKeyDown;
+    private handleMouseOver;
+    private handleMouseOut;
+    private hasTrigger;
+    handleOpenChange(): Promise<void>;
+    handleOptionsChange(): Promise<void>;
+    handleDisabledChange(): void;
+    /** Shows the tooltip. */
+    show(): Promise<void>;
+    /** Hides the tooltip */
+    hide(): Promise<void>;
+    render(): TemplateResult<1>;
 }
+export default NileTooltip;
 declare global {
     interface HTMLElementTagNameMap {
         'nile-tooltip': NileTooltip;
     }
 }
-export {};

package/dist/src/nile-tooltip/nile-tooltip.js

@@ -1,239 +1,303 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 import { __decorate } from "tslib";
-import { html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-tooltip.css';
+import '../nile-popup/nile-popup';
+import { animateTo, parseDuration, stopAnimations } from '../internal/animate';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import { getAnimation, setDefaultAnimation, } from '../utilities/animation-registry';
+import { html } from 'lit';
+// import { LocalizeController } from '../utilities/localize';
+import { waitForEvent } from '../internal/event';
+import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
-// CSS Anchor positiong
+/**
+ * Nile icon component.
+ *
+ * @tag nile-tooltip
+ *
+ */
 let NileTooltip = class NileTooltip extends NileElement {
     constructor() {
         super(...arguments);
+        /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
         this.content = '';
+        /** Size Property to decide the tool tip size */
         this.size = 'small';
+        /**
+         * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
+         * inside of the viewport.
+         */
         this.placement = 'top';
+        /** Disables the tooltip so it won't show when triggered. */
         this.disabled = false;
-        this.open = false;
-        this.trigger = 'hover focus';
+        /** The distance in pixels from which to offset the tooltip away from its target. */
         this.distance = 8;
+        /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
+        this.open = false;
+        /** The distance in pixels from which to offset the tooltip along its target. */
         this.skidding = 0;
+        /**
+         * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
+         * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
+         * programmatically.
+         */
+        this.trigger = 'hover focus';
+        /**
+         * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+         * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+         * scenarios.
+         */
         this.hoist = false;
-        this.updateTooltipPosition = () => {
-            if (!this.tooltip || !this.open)
-                return;
-            const triggerEl = this.slotElement.assignedElements()[0];
-            if (!triggerEl)
-                return;
-            const triggerRect = triggerEl.getBoundingClientRect();
-            const tooltipRect = this.tooltip.getBoundingClientRect();
-            const viewportWidth = window.innerWidth;
-            const viewportHeight = window.innerHeight;
-            let top = 0, left = 0;
-            let finalPlacement = this.placement;
-            const basePlacement = this.getBasePlacement(this.placement);
-            const alignment = this.getAlignmentModifier(this.placement);
-            const fitsLeft = triggerRect.left - tooltipRect.width - this.distance > 0;
-            const fitsRight = triggerRect.right + tooltipRect.width + this.distance < viewportWidth;
-            const fitsBottom = triggerRect.bottom + tooltipRect.height + this.distance < viewportHeight;
-            const fitsTop = triggerRect.top - tooltipRect.height - this.distance > 0;
-            let finalBasePlacement = basePlacement;
-            if ((basePlacement === 'left' && !fitsLeft) || (basePlacement === 'right' && !fitsRight)) {
-                finalBasePlacement = fitsBottom ? 'bottom' : (fitsTop ? 'top' : 'bottom');
-            }
-            else if (basePlacement === 'top' && !fitsTop) {
-                finalBasePlacement = fitsBottom ? 'bottom' : (fitsLeft ? 'left' : 'right');
-            }
-            else if (basePlacement === 'bottom' && !fitsBottom) {
-                finalBasePlacement = fitsTop ? 'top' : (fitsLeft ? 'left' : 'right');
-            }
-            let finalAlignment = alignment;
-            if ((basePlacement === 'left' || basePlacement === 'right') &&
-                (finalBasePlacement === 'top' || finalBasePlacement === 'bottom')) {
-                if (alignment === 'start') {
-                    finalAlignment = 'start';
-                }
-                else if (alignment === 'end') {
-                    finalAlignment = 'end';
-                }
-            }
-            switch (finalBasePlacement) {
-                case 'left':
-                    top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + this.skidding;
-                    left = triggerRect.left - tooltipRect.width - this.distance;
-                    break;
-                case 'right':
-                    top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + this.skidding;
-                    left = triggerRect.right + this.distance;
-                    break;
-                case 'top':
-                    top = triggerRect.top - tooltipRect.height - this.distance;
-                    left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + this.skidding;
-                    break;
-                case 'bottom':
-                    top = triggerRect.bottom + this.distance;
-                    left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + this.skidding;
-                    break;
-            }
-            if ((finalBasePlacement === 'top' || finalBasePlacement === 'bottom') && finalAlignment) {
-                if (finalAlignment === 'start') {
-                    left = triggerRect.left + this.skidding;
-                }
-                else if (finalAlignment === 'end') {
-                    left = triggerRect.right - tooltipRect.width + this.skidding;
-                }
-            }
-            if ((finalBasePlacement === 'left' || finalBasePlacement === 'right') && finalAlignment) {
-                if (finalAlignment === 'start') {
-                    top = triggerRect.top + this.skidding;
-                }
-                else if (finalAlignment === 'end') {
-                    top = triggerRect.bottom - tooltipRect.height + this.skidding;
-                }
-            }
-            finalPlacement = finalAlignment ? `${finalBasePlacement}-${finalAlignment}` : finalBasePlacement;
-            if (left < 0)
-                left = 5;
-            if (left + tooltipRect.width > viewportWidth)
-                left = viewportWidth - tooltipRect.width - 5;
-            if (top < 0)
-                top = 5;
-            if (top + tooltipRect.height > viewportHeight)
-                top = viewportHeight - tooltipRect.height - 5;
-            this.tooltip.style.top = `${top}px`;
-            this.tooltip.style.left = `${left}px`;
-            this.tooltip.setAttribute('data-placement', finalPlacement);
-        };
-        this.showTooltip = () => {
-            if (!this.disabled &&
-                this.content.trim() !== '') {
-                this.open = true;
-                this.emit('nile-show');
-                this.updateComplete.then(() => {
-                    this.updateTooltipPosition();
-                    this.tooltip.addEventListener('transitionend', this.handleAfterShow, { once: true });
-                });
-            }
-        };
-        this.handleAfterShow = () => {
-            this.emit('nile-after-show');
-        };
-        this.hideTooltip = () => {
-            if (!this.open)
-                return;
-            this.emit('nile-hide');
-            this.open = false;
-            this.tooltip.addEventListener('transitionend', this.handleAfterHide, { once: true });
-        };
-        this.handleAfterHide = () => {
-            this.emit('nile-after-hide');
-        };
-        this.handleMouseOver = () => {
-            if (this.trigger.includes('hover')) {
-                clearTimeout(this.hoverTimeout);
-                this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 150);
-            }
-        };
-        this.handleMouseOut = () => {
-            if (this.trigger.includes('hover')) {
-                clearTimeout(this.hoverTimeout);
-                this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 0);
-            }
-        };
-        this.handleClick = () => {
-            if (this.trigger.includes('click')) {
-                this.open = !this.open;
-                this.emit('nile-show');
-                this.updateComplete.then(() => this.updateTooltipPosition());
-            }
-        };
-        this.handleFocus = () => {
-            if (this.trigger.includes('focus')) {
-                this.showTooltip();
-            }
-        };
-        this.handleBlur = () => {
-            if (this.trigger.includes('focus')) {
-                this.hideTooltip();
-            }
-        };
     }
+    /**
+     * The styles for Tooltip
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
     static get styles() {
         return [styles];
     }
     connectedCallback() {
         super.connectedCallback();
-        window.addEventListener('resize', this.updateTooltipPosition);
-        window.addEventListener('scroll', this.updateTooltipPosition, true);
+        this.handleBlur = this.handleBlur.bind(this);
+        this.handleClick = this.handleClick.bind(this);
+        this.handleFocus = this.handleFocus.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.handleMouseOver = this.handleMouseOver.bind(this);
+        this.handleMouseOut = this.handleMouseOut.bind(this);
+        this.updateComplete.then(() => {
+            this.addEventListener('blur', this.handleBlur, true);
+            this.addEventListener('focus', this.handleFocus, true);
+            this.addEventListener('click', this.handleClick);
+            this.addEventListener('keydown', this.handleKeyDown);
+            this.addEventListener('mouseover', this.handleMouseOver);
+            this.addEventListener('mouseout', this.handleMouseOut);
+        });
+    }
+    firstUpdated() {
+        this.body.hidden = !this.open;
+        // If the tooltip is visible on init, update its position
+        if (this.open) {
+            this.popup.active = true;
+            this.popup.reposition();
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        window.removeEventListener('resize', this.updateTooltipPosition);
-        window.removeEventListener('scroll', this.updateTooltipPosition, true);
+        this.removeEventListener('blur', this.handleBlur, true);
+        this.removeEventListener('focus', this.handleFocus, true);
+        this.removeEventListener('click', this.handleClick);
+        this.removeEventListener('keydown', this.handleKeyDown);
+        this.removeEventListener('mouseover', this.handleMouseOver);
+        this.removeEventListener('mouseout', this.handleMouseOut);
     }
-    getBasePlacement(placement) {
-        return placement.split('-')[0];
+    handleBlur() {
+        if (this.hasTrigger('focus')) {
+            this.hide();
+        }
     }
-    getAlignmentModifier(placement) {
-        const parts = placement.split('-');
-        return parts.length > 1 ? parts[1] : null;
+    handleClick() {
+        if (this.hasTrigger('click')) {
+            if (this.open) {
+                this.hide();
+            }
+            else {
+                this.show();
+            }
+        }
+    }
+    handleFocus() {
+        if (this.hasTrigger('focus')) {
+            this.show();
+        }
     }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('open') || changedProperties.has('hoist')) {
-            if (this.open && this.hoist) {
+    handleKeyDown(event) {
+        // Pressing escape when the target element has focus should dismiss the tooltip
+        if (this.open && event.key === 'Escape') {
+            event.stopPropagation();
+            this.hide();
+        }
+    }
+    handleMouseOver() {
+        if (this.hasTrigger('hover')) {
+            const delay = parseDuration(getComputedStyle(this).getPropertyValue('--show-delay'));
+            clearTimeout(this.hoverTimeout);
+            this.hoverTimeout = window.setTimeout(() => this.show(), delay);
+        }
+    }
+    handleMouseOut() {
+        if (this.hasTrigger('hover')) {
+            const delay = parseDuration(getComputedStyle(this).getPropertyValue('--hide-delay'));
+            clearTimeout(this.hoverTimeout);
+            this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
+        }
+    }
+    hasTrigger(triggerType) {
+        const triggers = this.trigger.split(' ');
+        return triggers.includes(triggerType);
+    }
+    async handleOpenChange() {
+        if (this.open) {
+            if (this.disabled) {
+                return;
             }
+            // Show
+            this.emit('nile-show');
+            await stopAnimations(this.body);
+            this.body.hidden = false;
+            this.popup.active = true;
+            const { keyframes, options } = getAnimation(this, 'tooltip.show', {
+                dir: '',
+            });
+            await animateTo(this.popup.popup, keyframes, options);
+            this.emit('nile-after-show');
+        }
+        else {
+            // Hide
+            this.emit('nile-hide');
+            await stopAnimations(this.body);
+            const { keyframes, options } = getAnimation(this, 'tooltip.hide', {
+                dir: '',
+            });
+            await animateTo(this.popup.popup, keyframes, options);
+            this.popup.active = false;
+            this.body.hidden = true;
+            this.emit('nile-after-hide');
+        }
+    }
+    async handleOptionsChange() {
+        if (this.hasUpdated) {
+            await this.updateComplete;
+            this.popup.reposition();
+        }
+    }
+    handleDisabledChange() {
+        if (this.disabled && this.open) {
+            this.hide();
         }
     }
+    /** Shows the tooltip. */
+    async show() {
+        if (this.open || !this.content?.trim().length) {
+            return undefined;
+        }
+        this.open = true;
+        return waitForEvent(this, 'nile-after-show');
+    }
+    /** Hides the tooltip */
+    async hide() {
+        if (!this.open) {
+            return undefined;
+        }
+        this.open = false;
+        return waitForEvent(this, 'nile-after-hide');
+    }
     render() {
         return html `
-      <div class=${classMap({ tooltip: true, 'tooltip__body--large': this.size === 'large' })}>
-        ${this.content}
-      </div>
-      <slot
-        @mouseover=${this.handleMouseOver}
-        @mouseout=${this.handleMouseOut}
-        @click=${this.handleClick}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-        aria-describedby="tooltip"
-      ></slot>
+      <nile-popup
+        part="base"
+        exportparts="
+          popup:base__popup,
+          arrow:base__arrow
+        "
+        class=${classMap({
+            tooltip: true,
+            'tooltip--open': this.open,
+        })}
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        flip
+        shift
+        arrow
+      >
+        <slot slot="anchor" aria-describedby="tooltip"></slot>
+
+        <slot
+          name="content"
+          part="body"
+          id="tooltip"
+          class=${classMap({
+            tooltip__body: true,
+            'tooltip__body--large': this.size === 'large',
+        })}
+          role="tooltip"
+          aria-live=${this.open ? 'polite' : 'off'}
+        >
+          ${this.content}
+        </slot>
+      </nile-popup>
     `;
     }
 };
 __decorate([
-    property({ type: String })
+    query('slot:not([name])')
+], NileTooltip.prototype, "defaultSlot", void 0);
+__decorate([
+    query('.tooltip__body')
+], NileTooltip.prototype, "body", void 0);
+__decorate([
+    query('nile-popup')
+], NileTooltip.prototype, "popup", void 0);
+__decorate([
+    property({ type: String, reflect: true })
 ], NileTooltip.prototype, "content", void 0);
 __decorate([
     property({ reflect: true })
 ], NileTooltip.prototype, "size", void 0);
 __decorate([
-    property({ type: String })
+    property()
 ], NileTooltip.prototype, "placement", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileTooltip.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NileTooltip.prototype, "open", void 0);
-__decorate([
-    property()
-], NileTooltip.prototype, "trigger", void 0);
 __decorate([
     property({ type: Number })
 ], NileTooltip.prototype, "distance", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileTooltip.prototype, "open", void 0);
 __decorate([
     property({ type: Number })
 ], NileTooltip.prototype, "skidding", void 0);
+__decorate([
+    property()
+], NileTooltip.prototype, "trigger", void 0);
 __decorate([
     property({ type: Boolean })
 ], NileTooltip.prototype, "hoist", void 0);
 __decorate([
-    query('.tooltip')
-], NileTooltip.prototype, "tooltip", void 0);
+    watch('open', { waitUntilFirstUpdate: true })
+], NileTooltip.prototype, "handleOpenChange", null);
+__decorate([
+    watch(['content', 'distance', 'hoist', 'placement', 'skidding'])
+], NileTooltip.prototype, "handleOptionsChange", null);
 __decorate([
-    query('slot')
-], NileTooltip.prototype, "slotElement", void 0);
+    watch('disabled')
+], NileTooltip.prototype, "handleDisabledChange", null);
 NileTooltip = __decorate([
     customElement('nile-tooltip')
 ], NileTooltip);
 export { NileTooltip };
+setDefaultAnimation('tooltip.show', {
+    keyframes: [
+        { opacity: 0, scale: 0.8 },
+        { opacity: 1, scale: 1 },
+    ],
+    options: { duration: 150, easing: 'ease' },
+});
+setDefaultAnimation('tooltip.hide', {
+    keyframes: [
+        { opacity: 1, scale: 1 },
+        { opacity: 0, scale: 0.8 },
+    ],
+    options: { duration: 150, easing: 'ease' },
+});
+export default NileTooltip;
 //# sourceMappingURL=nile-tooltip.js.map

package/dist/src/nile-tooltip/nile-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tooltip.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css,  CSSResultArray } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-tooltip.css';\nimport NileElement from '../internal/nile-element';\n\ntype TooltipPlacement = \n  | 'top' | 'top-start' | 'top-end' \n  | 'right' | 'right-start' | 'right-end' \n  | 'bottom' | 'bottom-start' | 'bottom-end' \n  | 'left' | 'left-start' | 'left-end';\n\n// CSS Anchor positiong\n@customElement('nile-tooltip')\nexport class NileTooltip extends NileElement {\n  @property({ type: String }) content = '';\n  @property({ reflect: true }) size: 'small' | 'large' = 'small';\n  @property({ type: String }) placement: TooltipPlacement = 'top';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property() trigger = 'hover focus';\n  @property({ type: Number }) distance = 8;\n  @property({ type: Number }) skidding = 0;\n  @property({ type: Boolean }) hoist = false;\n\n  @query('.tooltip') tooltip!: HTMLElement;\n  @query('slot') slotElement!: HTMLSlotElement;\n\n  private hoverTimeout: number;\n\n   public static get styles(): CSSResultArray {\n      return [styles];\n    }\n  \n\n \n \n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('resize', this.updateTooltipPosition);\n    window.addEventListener('scroll', this.updateTooltipPosition, true);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('resize', this.updateTooltipPosition);\n    window.removeEventListener('scroll', this.updateTooltipPosition, true);\n  }\n\n  private getBasePlacement(placement: TooltipPlacement): 'top' | 'right' | 'bottom' | 'left' {\n    return placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n  }\n\n  private getAlignmentModifier(placement: TooltipPlacement): 'start' | 'end' | null {\n    const parts = placement.split('-');\n    return parts.length > 1 ? parts[1] as 'start' | 'end' : null;\n  }\n\n  private updateTooltipPosition = () => {\n    if (!this.tooltip || !this.open) return;\n\n    const triggerEl = this.slotElement.assignedElements()[0] as HTMLElement;\n    if (!triggerEl) return;\n\n \n    \n    const triggerRect = triggerEl.getBoundingClientRect();\n    const tooltipRect = this.tooltip.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n    \n    let top = 0, left = 0;\n    let finalPlacement = this.placement;\n    const basePlacement = this.getBasePlacement(this.placement);\n    const alignment = this.getAlignmentModifier(this.placement);\n\n     \n    const fitsLeft = triggerRect.left - tooltipRect.width - this.distance > 0;\n    const fitsRight = triggerRect.right + tooltipRect.width + this.distance < viewportWidth;\n    const fitsBottom = triggerRect.bottom + tooltipRect.height + this.distance < viewportHeight;\n    const fitsTop = triggerRect.top - tooltipRect.height - this.distance > 0;\n\n   \n    let finalBasePlacement = basePlacement;\n    \n \n    if ((basePlacement === 'left' && !fitsLeft) || (basePlacement === 'right' && !fitsRight)) {\n      finalBasePlacement = fitsBottom ? 'bottom' : (fitsTop ? 'top' : 'bottom');\n    } \n \n    else if (basePlacement === 'top' && !fitsTop) {\n      finalBasePlacement = fitsBottom ? 'bottom' : (fitsLeft ? 'left' : 'right');\n    } else if (basePlacement === 'bottom' && !fitsBottom) {\n      finalBasePlacement = fitsTop ? 'top' : (fitsLeft ? 'left' : 'right');\n    }\n\n     \n    let finalAlignment = alignment;\n    \n \n    if ((basePlacement === 'left' || basePlacement === 'right') && \n        (finalBasePlacement === 'top' || finalBasePlacement === 'bottom')) {\n       \n      if (alignment === 'start') {\n        finalAlignment = 'start';\n      } else if (alignment === 'end') {\n        finalAlignment = 'end';\n      }\n    }\n\n   \n    switch (finalBasePlacement) {\n      case 'left':\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + this.skidding;\n        left = triggerRect.left - tooltipRect.width - this.distance;\n        break;\n      case 'right':\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + this.skidding;\n        left = triggerRect.right + this.distance;\n        break;\n      case 'top':\n        top = triggerRect.top - tooltipRect.height - this.distance;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + this.skidding;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + this.distance;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + this.skidding;\n        break;\n    }\n\n  \n    if ((finalBasePlacement === 'top' || finalBasePlacement === 'bottom') && finalAlignment) {\n      if (finalAlignment === 'start') {\n        left = triggerRect.left + this.skidding;\n      } else if (finalAlignment === 'end') {\n        left = triggerRect.right - tooltipRect.width + this.skidding;\n      }\n    }\n    \n   \n    if ((finalBasePlacement === 'left' || finalBasePlacement === 'right') && finalAlignment) {\n      if (finalAlignment === 'start') {\n        top = triggerRect.top + this.skidding;\n      } else if (finalAlignment === 'end') {\n        top = triggerRect.bottom - tooltipRect.height + this.skidding;\n      }\n    }\n\n  \n    finalPlacement = finalAlignment ? `${finalBasePlacement}-${finalAlignment}` : finalBasePlacement;\n\n \n    if (left < 0) left = 5;\n    if (left + tooltipRect.width > viewportWidth) left = viewportWidth - tooltipRect.width - 5;\n    if (top < 0) top = 5;\n    if (top + tooltipRect.height > viewportHeight) top = viewportHeight - tooltipRect.height - 5;\n\n    \n    this.tooltip.style.top = `${top}px`;\n    this.tooltip.style.left = `${left}px`;\n    this.tooltip.setAttribute('data-placement', finalPlacement as string);\n  };\n\n  private showTooltip = () => {\n    if (!this.disabled  && \n    this.content.trim() !== '') {\n      this.open = true;\n      this.emit('nile-show');\n      this.updateComplete.then(() => {\n        this.updateTooltipPosition();\n        \n \n        this.tooltip.addEventListener('transitionend', this.handleAfterShow, { once: true });\n      });\n    }\n  };\n  \n  private handleAfterShow = () => {\n    this.emit('nile-after-show');\n  };\n  \n\n  private hideTooltip = () => {\n    if (!this.open) return;\n    \n    this.emit('nile-hide');\n    this.open = false;\n    \n    this.tooltip.addEventListener('transitionend', this.handleAfterHide, { once: true });\n  };\n  \n  private handleAfterHide = () => {\n    this.emit('nile-after-hide');\n  };\n  \n  private handleMouseOver = () => {\n    if (this.trigger.includes('hover')) {\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 150);\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.trigger.includes('hover')) {\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 0);\n    }\n  };\n\n  private handleClick = () => {\n    if (this.trigger.includes('click')) {\n      this.open = !this.open;\n      this.emit('nile-show');\n      this.updateComplete.then(() => this.updateTooltipPosition());\n    }\n  };\n\n  updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    \n   \n    if (changedProperties.has('open') || changedProperties.has('hoist')) {\n      if (this.open && this.hoist) {\n      \n      }\n    }\n  }\n\n  private handleFocus = () => {\n    if (this.trigger.includes('focus')) {\n      this.showTooltip();\n    }\n  };\n\n  private handleBlur = () => {\n    if (this.trigger.includes('focus')) {\n      this.hideTooltip();\n    }\n  };\n\n  render() {\n    return html`\n      <div class=${classMap({ tooltip: true, 'tooltip__body--large': this.size === 'large' })}>\n        ${this.content}\n      </div>\n      <slot\n        @mouseover=${this.handleMouseOver}\n        @mouseout=${this.handleMouseOut}\n        @click=${this.handleClick}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        aria-describedby=\"tooltip\"\n      ></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tooltip': NileTooltip;\n  }\n}"]}
+{"version":3,"file":"nile-tooltip.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, CSSResultArray, TemplateResult } from 'lit';\nimport { styles } from './nile-tooltip.css';\nimport '../nile-popup/nile-popup';\nimport { animateTo, parseDuration, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { html } from 'lit';\n// import { LocalizeController } from '../utilities/localize';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NilePopup from '../nile-popup/nile-popup';\n/**\n * Nile icon component.\n *\n * @tag nile-tooltip\n *\n */\n@customElement('nile-tooltip')\nexport class NileTooltip extends NileElement {\n  /**\n   * The styles for Tooltip\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private hoverTimeout: number;\n  // private readonly localize = new LocalizeController(this);\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n  @query('.tooltip__body') body: HTMLElement;\n  @query('nile-popup') popup: NilePopup;\n\n  /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */\n  @property({ type: String, reflect: true }) content = '';\n\n  /** Size Property to decide the tool tip size */\n  @property({ reflect: true }) size: 'small' | 'large' = 'small';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @property() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Disables the tooltip so it won't show when triggered. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @property({ type: Number }) distance = 8;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @property({ type: Number }) skidding = 0;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @property() trigger = 'hover focus';\n\n  /**\n   * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n   * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\n   * scenarios.\n   */\n  @property({ type: Boolean }) hoist = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleClick = this.handleClick.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleMouseOver = this.handleMouseOver.bind(this);\n    this.handleMouseOut = this.handleMouseOut.bind(this);\n\n    this.updateComplete.then(() => {\n      this.addEventListener('blur', this.handleBlur, true);\n      this.addEventListener('focus', this.handleFocus, true);\n      this.addEventListener('click', this.handleClick);\n      this.addEventListener('keydown', this.handleKeyDown);\n      this.addEventListener('mouseover', this.handleMouseOver);\n      this.addEventListener('mouseout', this.handleMouseOut);\n    });\n  }\n\n  firstUpdated() {\n    this.body.hidden = !this.open;\n\n    // If the tooltip is visible on init, update its position\n    if (this.open) {\n      this.popup.active = true;\n      this.popup.reposition();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('blur', this.handleBlur, true);\n    this.removeEventListener('focus', this.handleFocus, true);\n    this.removeEventListener('click', this.handleClick);\n    this.removeEventListener('keydown', this.handleKeyDown);\n    this.removeEventListener('mouseover', this.handleMouseOver);\n    this.removeEventListener('mouseout', this.handleMouseOut);\n  }\n\n  private handleBlur() {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  }\n\n  private handleClick() {\n    if (this.hasTrigger('click')) {\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n  }\n\n  private handleFocus() {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  }\n\n  private handleMouseOver() {\n    if (this.hasTrigger('hover')) {\n      const delay = parseDuration(\n        getComputedStyle(this).getPropertyValue('--show-delay')\n      );\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.show(), delay);\n    }\n  }\n\n  private handleMouseOut() {\n    if (this.hasTrigger('hover')) {\n      const delay = parseDuration(\n        getComputedStyle(this).getPropertyValue('--hide-delay')\n      );\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.hide(), delay);\n    }\n  }\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      if (this.disabled) {\n        return;\n      }\n\n      // Show\n      this.emit('nile-show');\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n      this.popup.active = true;\n      const { keyframes, options } = getAnimation(this, 'tooltip.show', {\n        dir: '',\n      });\n      await animateTo(this.popup.popup, keyframes, options);\n\n      this.emit('nile-after-show');\n    } else {\n      // Hide\n      this.emit('nile-hide');\n\n      await stopAnimations(this.body);\n      const { keyframes, options } = getAnimation(this, 'tooltip.hide', {\n        dir: '',\n      });\n      await animateTo(this.popup.popup, keyframes, options);\n      this.popup.active = false;\n      this.body.hidden = true;\n\n      this.emit('nile-after-hide');\n    }\n  }\n\n  @watch(['content', 'distance', 'hoist', 'placement', 'skidding'])\n  async handleOptionsChange() {\n    if (this.hasUpdated) {\n      await this.updateComplete;\n      this.popup.reposition();\n    }\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    if (this.disabled && this.open) {\n      this.hide();\n    }\n  }\n\n  /** Shows the tooltip. */\n  async show() {\n    if (this.open || !this.content?.trim().length) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'nile-after-show');\n  }\n\n  /** Hides the tooltip */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'nile-after-hide');\n  }\n\n  render() {\n    return html`\n      <nile-popup\n        part=\"base\"\n        exportparts=\"\n          popup:base__popup,\n          arrow:base__arrow\n        \"\n        class=${classMap({\n          tooltip: true,\n          'tooltip--open': this.open,\n        })}\n        placement=${this.placement}\n        distance=${this.distance}\n        skidding=${this.skidding}\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n        flip\n        shift\n        arrow\n      >\n        <slot slot=\"anchor\" aria-describedby=\"tooltip\"></slot>\n\n        <slot\n          name=\"content\"\n          part=\"body\"\n          id=\"tooltip\"\n          class=${classMap({\n            tooltip__body: true,\n            'tooltip__body--large': this.size === 'large',\n          })}\n          role=\"tooltip\"\n          aria-live=${this.open ? 'polite' : 'off'}\n        >\n          ${this.content}\n        </slot>\n      </nile-popup>\n    `;\n  }\n}\n\nsetDefaultAnimation('tooltip.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 150, easing: 'ease' },\n});\n\nsetDefaultAnimation('tooltip.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 150, easing: 'ease' },\n});\n\nexport default NileTooltip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tooltip': NileTooltip;\n  }\n}\n"]}