@spartan-ng/brain 0.0.1-alpha.373 → 0.0.1-alpha.379

package/fesm2022/spartan-ng-brain-tooltip.mjs

@@ -0,0 +1,975 @@
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, PLATFORM_ID, Renderer2, signal, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Directive, TemplateRef, InjectionToken, ElementRef, ViewContainerRef, NgZone, effect, isDevMode, booleanAttribute, numberAttribute, Input, NgModule } from '@angular/core';
+import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT } from '@angular/common';
+import { Subject } from 'rxjs';
+import { AriaDescriber, FocusMonitor } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { hasModifierKey } from '@angular/cdk/keycodes';
+import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
+import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { brnDevMode } from '@spartan-ng/ui-core';
+import { takeUntil, take } from 'rxjs/operators';
+
+/**
+ * We are building on shoulders of giants here and adapt the implementation provided by the incredible Angular
+ * team: https://github.com/angular/components/blob/main/src/material/tooltip/tooltip.ts
+ * Check them out! Give them a try! Leave a star! Their work is incredible!
+ */
+/**
+ * Internal component that wraps the tooltip's content.
+ * @docs-private
+ */
+class BrnTooltipContentComponent {
+    _cdr = inject(ChangeDetectorRef);
+    _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    _renderer2 = inject(Renderer2);
+    _contentHovered = signal(false);
+    _tooltipClasses = signal('');
+    side = signal('above');
+    /** Message to display in the tooltip */
+    content = null;
+    /** The timeout ID of any current timer set to show the tooltip */
+    _showTimeoutId;
+    /** The timeout ID of any current timer set to hide the tooltip */
+    _hideTimeoutId;
+    /** The timeout ID of any current timer set to animate the tooltip */
+    _animateTimeoutId;
+    /** Element that caused the tooltip to open. */
+    _triggerElement;
+    /** Amount of milliseconds to delay the closing sequence. */
+    _mouseLeaveHideDelay = 0;
+    /** Amount of milliseconds of closing animation. */
+    _exitAnimationDuration = 0;
+    /** Reference to the internal tooltip element. */
+    _tooltip;
+    /** Whether interactions on the page should close the tooltip */
+    _closeOnInteraction = false;
+    /** Whether the tooltip is currently visible. */
+    _isVisible = false;
+    /** Subject for notifying that the tooltip has been hidden from the view */
+    _onHide = new Subject();
+    afterHidden = this._onHide.asObservable();
+    /**
+     * Shows the tooltip with originating from the provided origin
+     * @param delay Amount of milliseconds to the delay showing the tooltip.
+     */
+    show(delay) {
+        // Cancel the delayed hide if it is scheduled
+        if (this._hideTimeoutId !== null) {
+            clearTimeout(this._hideTimeoutId);
+        }
+        if (this._animateTimeoutId !== null) {
+            clearTimeout(this._animateTimeoutId);
+        }
+        this._showTimeoutId = setTimeout(() => {
+            this._toggleDataAttributes(true, this.side());
+            this._toggleVisibility(true);
+            this._showTimeoutId = undefined;
+        }, delay);
+    }
+    /**
+     * Begins to hide the tooltip after the provided delay in ms.
+     * @param delay Amount of milliseconds to delay hiding the tooltip.
+     * @param exitAnimationDuration Time before hiding to finish animation
+     * */
+    hide(delay, exitAnimationDuration) {
+        // Cancel the delayed show if it is scheduled
+        if (this._showTimeoutId !== null) {
+            clearTimeout(this._showTimeoutId);
+        }
+        // start out animation at delay minus animation delay or immediately if possible
+        this._animateTimeoutId = setTimeout(() => {
+            this._animateTimeoutId = undefined;
+            if (this._contentHovered())
+                return;
+            this._toggleDataAttributes(false, this.side());
+        }, Math.max(delay, 0));
+        this._hideTimeoutId = setTimeout(() => {
+            this._hideTimeoutId = undefined;
+            if (this._contentHovered())
+                return;
+            this._toggleVisibility(false);
+        }, delay + exitAnimationDuration);
+    }
+    /** Whether the tooltip is being displayed. */
+    isVisible() {
+        return this._isVisible;
+    }
+    ngOnDestroy() {
+        this._cancelPendingAnimations();
+        this._onHide.complete();
+        this._triggerElement = undefined;
+    }
+    _isTypeOfString(content) {
+        return typeof content === 'string';
+    }
+    /**
+     * Interactions on the HTML body should close the tooltip immediately as defined in the
+     * material design spec.
+     * https://material.io/design/components/tooltips.html#behavior
+     */
+    _handleBodyInteraction() {
+        if (this._closeOnInteraction) {
+            this.hide(0, 0);
+        }
+    }
+    /**
+     * Marks that the tooltip needs to be checked in the next change detection run.
+     * Mainly used for rendering the initial text before positioning a tooltip, which
+     * can be problematic in components with OnPush change detection.
+     */
+    _markForCheck() {
+        this._cdr.markForCheck();
+    }
+    _handleMouseLeave({ relatedTarget }) {
+        if (!relatedTarget || !this._triggerElement?.contains(relatedTarget)) {
+            if (this.isVisible()) {
+                this.hide(this._mouseLeaveHideDelay, this._exitAnimationDuration);
+            }
+            else {
+                this._finalize(false);
+            }
+        }
+        this._contentHovered.set(false);
+    }
+    /** Cancels any pending animation sequences. */
+    _cancelPendingAnimations() {
+        if (this._showTimeoutId !== null) {
+            clearTimeout(this._showTimeoutId);
+        }
+        if (this._hideTimeoutId !== null) {
+            clearTimeout(this._hideTimeoutId);
+        }
+        this._showTimeoutId = this._hideTimeoutId = undefined;
+    }
+    _finalize(toVisible) {
+        if (toVisible) {
+            this._closeOnInteraction = true;
+        }
+        else if (!this.isVisible()) {
+            this._onHide.next();
+        }
+    }
+    /** Toggles the visibility of the tooltip element. */
+    _toggleVisibility(isVisible) {
+        // We set the classes directly here ourselves so that toggling the tooltip state
+        // isn't bound by change detection. This allows us to hide it even if the
+        // view ref has been detached from the CD tree.
+        const tooltip = this._tooltip?.nativeElement;
+        if (!tooltip || !this._isBrowser)
+            return;
+        this._renderer2.setStyle(tooltip, 'visibility', isVisible ? 'visible' : 'hidden');
+        if (isVisible) {
+            this._renderer2.removeStyle(tooltip, 'display');
+        }
+        else {
+            this._renderer2.setStyle(tooltip, 'display', 'none');
+        }
+        this._isVisible = isVisible;
+    }
+    _toggleDataAttributes(isVisible, side) {
+        // We set the classes directly here ourselves so that toggling the tooltip state
+        // isn't bound by change detection. This allows us to hide it even if the
+        // view ref has been detached from the CD tree.
+        const tooltip = this._tooltip?.nativeElement;
+        if (!tooltip || !this._isBrowser)
+            return;
+        this._renderer2.setAttribute(tooltip, 'data-side', side);
+        this._renderer2.setAttribute(tooltip, 'data-state', isVisible ? 'open' : 'closed');
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTooltipContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: BrnTooltipContentComponent, isStandalone: true, selector: "brn-tooltip-content", host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseleave": "_handleMouseLeave($event)" }, properties: { "style.zoom": "isVisible() ? 1 : null" } }, viewQueries: [{ propertyName: "_tooltip", first: true, predicate: ["tooltip"], descendants: true, static: true }], ngImport: i0, template: `
+		<div
+			(mouseenter)="_contentHovered.set(true)"
+			(mouseleave)="_contentHovered.set(false)"
+			[class]="_tooltipClasses()"
+			[style.visibility]="'hidden'"
+			#tooltip
+		>
+			@if (_isTypeOfString(content)) {
+				{{ content }}
+			} @else {
+				<ng-container [ngTemplateOutlet]="content" />
+			}
+		</div>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTooltipContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'brn-tooltip-content',
+                    standalone: true,
+                    template: `
+		<div
+			(mouseenter)="_contentHovered.set(true)"
+			(mouseleave)="_contentHovered.set(false)"
+			[class]="_tooltipClasses()"
+			[style.visibility]="'hidden'"
+			#tooltip
+		>
+			@if (_isTypeOfString(content)) {
+				{{ content }}
+			} @else {
+				<ng-container [ngTemplateOutlet]="content" />
+			}
+		</div>
+	`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        // Forces the element to have a layout in IE and Edge. This fixes issues where the element
+                        // won't be rendered if the animations are disabled or there is no web animations polyfill.
+                        '[style.zoom]': 'isVisible() ? 1 : null',
+                        '(mouseleave)': '_handleMouseLeave($event)',
+                        'aria-hidden': 'true',
+                    },
+                    imports: [NgTemplateOutlet],
+                }]
+        }], propDecorators: { _tooltip: [{
+                type: ViewChild,
+                args: ['tooltip', {
+                        // Use a static query here since we interact directly with
+                        // the DOM which can happen before `ngAfterViewInit`.
+                        static: true,
+                    }]
+            }] } });
+
+class BrnTooltipDirective {
+    tooltipTemplate = signal(null);
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: BrnTooltipDirective, isStandalone: true, selector: "[brnTooltip]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnTooltip]',
+                    standalone: true,
+                }]
+        }] });
+
+class BrnTooltipContentDirective {
+    _brnTooltipDirective = inject(BrnTooltipDirective, { optional: true });
+    _tpl = inject(TemplateRef);
+    constructor() {
+        if (!this._brnTooltipDirective || !this._tpl)
+            return;
+        this._brnTooltipDirective.tooltipTemplate.set(this._tpl);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTooltipContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: BrnTooltipContentDirective, isStandalone: true, selector: "[brnTooltipContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTooltipContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnTooltipContent]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * We are building on shoulders of giants here and adapt the implementation provided by the incredible Angular
+ * team: https://github.com/angular/components/blob/main/src/material/tooltip/tooltip.ts
+ * Check them out! Give them a try! Leave a star! Their work is incredible!
+ */
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/** Time in ms to throttle repositioning after scroll events. */
+const SCROLL_THROTTLE_MS = 20;
+function getBrnTooltipInvalidPositionError(position) {
+    return Error(`Tooltip position "${position}" is invalid.`);
+}
+/** Injection token that determines the scroll handling while a tooltip is visible. */
+const BRN_TOOLTIP_SCROLL_STRATEGY = new InjectionToken('brn-tooltip-scroll-strategy');
+const BRN_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER = {
+    provide: BRN_TOOLTIP_SCROLL_STRATEGY,
+    deps: [Overlay],
+    useFactory: (overlay) => () => overlay.scrollStrategies.reposition({ scrollThrottle: SCROLL_THROTTLE_MS }),
+};
+function BRN_TOOLTIP_DEFAULT_OPTIONS_FACTORY() {
+    return {
+        showDelay: 0,
+        hideDelay: 0,
+        touchendHideDelay: 1500,
+    };
+}
+const BRN_TOOLTIP_DEFAULT_OPTIONS = new InjectionToken('mat-tooltip-default-options', {
+    providedIn: 'root',
+    factory: BRN_TOOLTIP_DEFAULT_OPTIONS_FACTORY,
+});
+const PANEL_CLASS = 'tooltip-panel';
+/** Options used to bind passive event listeners. */
+const passiveListenerOptions = normalizePassiveListenerOptions({ passive: true });
+/**
+ * Time between the user putting the pointer on a tooltip
+ * trigger and the long press event being fired.
+ */
+const LONGPRESS_DELAY = 500;
+// These constants were taken from MDC's `numbers` object.
+const MIN_VIEWPORT_TOOLTIP_THRESHOLD = 8;
+const UNBOUNDED_ANCHOR_GAP = 8;
+class BrnTooltipTriggerDirective {
+    _tooltipDirective = inject(BrnTooltipDirective, { optional: true });
+    _tooltipComponent = BrnTooltipContentComponent;
+    _cssClassPrefix = 'brn';
+    _destroyed = new Subject();
+    _passiveListeners = [];
+    _defaultOptions = inject(BRN_TOOLTIP_DEFAULT_OPTIONS, { optional: true });
+    _overlay = inject(Overlay);
+    _elementRef = inject((ElementRef));
+    _scrollDispatcher = inject(ScrollDispatcher);
+    _viewContainerRef = inject(ViewContainerRef);
+    _ngZone = inject(NgZone);
+    _platform = inject(Platform);
+    _ariaDescriber = inject(AriaDescriber);
+    _focusMonitor = inject(FocusMonitor);
+    _dir = inject(Directionality);
+    _scrollStrategy = inject(BRN_TOOLTIP_SCROLL_STRATEGY);
+    _document = inject(DOCUMENT);
+    _portal;
+    _viewInitialized = false;
+    _pointerExitEventsInitialized = false;
+    _viewportMargin = 8;
+    _currentPosition;
+    _touchstartTimeout;
+    _overlayRef = null;
+    _tooltipInstance = null;
+    /** Allows the user to define the position of the tooltip relative to the parent element */
+    _position = signal('above');
+    get position() {
+        return this._position();
+    }
+    set position(value) {
+        if (value !== this._position()) {
+            this._position.set(value);
+            if (this._overlayRef) {
+                this._updatePosition(this._overlayRef);
+                this._tooltipInstance?.show(0);
+                this._overlayRef.updatePosition();
+            }
+        }
+    }
+    /**
+     * Whether tooltip should be relative to the click or touch origin
+     * instead of outside the element bounding box.
+     */
+    _positionAtOrigin = signal(false);
+    get positionAtOrigin() {
+        return this._positionAtOrigin();
+    }
+    set positionAtOrigin(value) {
+        this._positionAtOrigin.set(value);
+        this._detach();
+        this._overlayRef = null;
+    }
+    /** Disables the display of the tooltip. */
+    _disabled = signal(false);
+    get disabled() {
+        return this._disabled();
+    }
+    set disabled(value) {
+        this._disabled.set(value);
+        // If tooltip is disabled, hide immediately.
+        if (value) {
+            this.hide(0);
+        }
+        else {
+            this._setupPointerEnterEventsIfNeeded();
+        }
+    }
+    /** The default delay in ms before showing the tooltip after show is called */
+    _showDelay = signal(0);
+    get showDelay() {
+        return this._showDelay();
+    }
+    set showDelay(value) {
+        this._showDelay.set(value);
+    }
+    /** The default delay in ms before hiding the tooltip after hide is called */
+    _hideDelay = signal(0);
+    get hideDelay() {
+        return this._hideDelay();
+    }
+    set hideDelay(value) {
+        this._hideDelay.set(value);
+        if (this._tooltipInstance) {
+            this._tooltipInstance._mouseLeaveHideDelay = this._hideDelay();
+        }
+    }
+    /** The default duration in ms that exit animation takes before hiding */
+    _exitAnimationDuration = signal(0);
+    get exitAnimationDuration() {
+        return this._exitAnimationDuration();
+    }
+    set exitAnimationDuration(value) {
+        this._exitAnimationDuration.set(value);
+        if (this._tooltipInstance) {
+            this._tooltipInstance._exitAnimationDuration = this._exitAnimationDuration();
+        }
+    }
+    /** The default delay in ms before hiding the tooltip after hide is called */
+    _tooltipContentClasses = signal('');
+    get tooltipContentClasses() {
+        return this._tooltipContentClasses();
+    }
+    set tooltipContentClasses(value) {
+        this._tooltipContentClasses.set(value ?? '');
+        if (this._tooltipInstance) {
+            this._tooltipInstance._tooltipClasses.set(value ?? '');
+        }
+    }
+    /**
+     * How touch gestures should be handled by the tooltip. On touch devices the tooltip directive
+     * uses a long press gesture to show and hide, however it can conflict with the native browser
+     * gestures. To work around the conflict, Angular Material disables native gestures on the
+     * trigger, but that might not be desirable on particular elements (e.g. inputs and draggable
+     * elements). The different values for this option configure the touch event handling as follows:
+     * - `auto` - Enables touch gestures for all elements, but tries to avoid conflicts with native
+     *   browser gestures on particular elements. In particular, it allows text selection on inputs
+     *   and textareas, and preserves the native browser dragging on elements marked as `draggable`.
+     * - `on` - Enables touch gestures for all elements and disables native
+     *   browser gestures with no exceptions.
+     * - `off` - Disables touch gestures. Note that this will prevent the tooltip from
+     *   showing on touch devices.
+     */
+    _touchGestures = signal('auto');
+    set touchGestures(value) {
+        this._touchGestures.set(value);
+    }
+    get touchGestures() {
+        return this._touchGestures();
+    }
+    /** The message to be used to describe the aria in the tooltip */
+    _ariaDescribedBy = '';
+    get ariaDescribedBy() {
+        return this._ariaDescribedBy;
+    }
+    set ariaDescribedBy(value) {
+        this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this._ariaDescribedBy, 'tooltip');
+        // If the message is not a string (e.g. number), convert it to a string and trim it.
+        // Must convert with `String(value)`, not `${value}`, otherwise Closure Compiler optimises
+        // away the string-conversion: https://github.com/angular/components/issues/20684
+        this._ariaDescribedBy = value !== null ? String(value).trim() : '';
+        if (this._ariaDescribedBy && !this._isTooltipVisible()) {
+            this._ngZone.runOutsideAngular(() => {
+                // The `AriaDescriber` has some functionality that avoids adding a description if it's the
+                // same as the `aria-label` of an element, however we can't know whether the tooltip trigger
+                // has a data-bound `aria-label` or when it'll be set for the first time. We can avoid the
+                // issue by deferring the description by a tick so Angular has time to set the `aria-label`.
+                Promise.resolve().then(() => {
+                    this._ariaDescriber.describe(this._elementRef.nativeElement, this._ariaDescribedBy, 'tooltip');
+                });
+            });
+        }
+    }
+    /** The content to be displayed in the tooltip */
+    _content = null;
+    get content() {
+        return this._content;
+    }
+    set content(value) {
+        this._content = value;
+        if (!this._content && this._isTooltipVisible()) {
+            this.hide(0);
+        }
+        else {
+            this._setupPointerEnterEventsIfNeeded();
+            this._updateTooltipContent();
+        }
+    }
+    constructor() {
+        if (this._defaultOptions) {
+            this._showDelay.set(this._defaultOptions.showDelay);
+            this._hideDelay.set(this._defaultOptions.hideDelay);
+            if (this._defaultOptions.position) {
+                this.position = this._defaultOptions.position;
+            }
+            if (this._defaultOptions.positionAtOrigin) {
+                this.positionAtOrigin = this._defaultOptions.positionAtOrigin;
+            }
+            if (this._defaultOptions.touchGestures) {
+                this.touchGestures = this._defaultOptions.touchGestures;
+            }
+        }
+        this._dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => {
+            if (this._overlayRef) {
+                this._updatePosition(this._overlayRef);
+            }
+        });
+        this._viewportMargin = MIN_VIEWPORT_TOOLTIP_THRESHOLD;
+        if (this._tooltipDirective) {
+            effect(() => {
+                if (this._tooltipDirective) {
+                    this.content = this._tooltipDirective.tooltipTemplate();
+                }
+            });
+        }
+    }
+    ngAfterViewInit() {
+        // This needs to happen after view init so the initial values for all inputs have been set.
+        this._viewInitialized = true;
+        this._setupPointerEnterEventsIfNeeded();
+        this._focusMonitor
+            .monitor(this._elementRef)
+            .pipe(takeUntil(this._destroyed))
+            .subscribe((origin) => {
+            // Note that the focus monitor runs outside the Angular zone.
+            if (!origin) {
+                this._ngZone.run(() => this.hide(0));
+            }
+            else if (origin === 'keyboard') {
+                this._ngZone.run(() => this.show());
+            }
+        });
+        if (brnDevMode && !this._ariaDescribedBy) {
+            console.warn('BrnTooltip: "aria-describedby" attribute is required for accessibility');
+        }
+    }
+    /**
+     * Dispose the tooltip when destroyed.
+     */
+    ngOnDestroy() {
+        const nativeElement = this._elementRef.nativeElement;
+        clearTimeout(this._touchstartTimeout);
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._tooltipInstance = null;
+        }
+        // Clean up the event listeners set in the constructor
+        this._passiveListeners.forEach(([event, listener]) => nativeElement.removeEventListener(event, listener, passiveListenerOptions));
+        this._passiveListeners.length = 0;
+        this._destroyed.next();
+        this._destroyed.complete();
+        this._ariaDescriber.removeDescription(nativeElement, this._ariaDescribedBy, 'tooltip');
+        this._focusMonitor.stopMonitoring(nativeElement);
+    }
+    /** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
+    show(delay = this.showDelay, origin) {
+        if (this.disabled || this._isTooltipVisible()) {
+            this._tooltipInstance?._cancelPendingAnimations();
+            return;
+        }
+        const overlayRef = this._createOverlay(origin);
+        this._detach();
+        this._portal = this._portal || new ComponentPortal(this._tooltipComponent, this._viewContainerRef);
+        const instance = (this._tooltipInstance = overlayRef.attach(this._portal).instance);
+        instance._triggerElement = this._elementRef.nativeElement;
+        instance._mouseLeaveHideDelay = this._hideDelay();
+        instance._tooltipClasses.set(this._tooltipContentClasses());
+        instance._exitAnimationDuration = this._exitAnimationDuration();
+        instance.side.set(this._currentPosition ?? 'above');
+        instance.afterHidden.pipe(takeUntil(this._destroyed)).subscribe(() => this._detach());
+        this._updateTooltipContent();
+        instance.show(delay);
+    }
+    /** Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input */
+    hide(delay = this.hideDelay, exitAnimationDuration = this.exitAnimationDuration) {
+        const instance = this._tooltipInstance;
+        if (instance) {
+            if (instance.isVisible()) {
+                instance.hide(delay, exitAnimationDuration);
+            }
+            else {
+                instance._cancelPendingAnimations();
+                this._detach();
+            }
+        }
+    }
+    toggle(origin) {
+        this._isTooltipVisible() ? this.hide() : this.show(undefined, origin);
+    }
+    _isTooltipVisible() {
+        return !!this._tooltipInstance && this._tooltipInstance.isVisible();
+    }
+    _createOverlay(origin) {
+        if (this._overlayRef) {
+            const existingStrategy = this._overlayRef.getConfig().positionStrategy;
+            if ((!this.positionAtOrigin || !origin) && existingStrategy._origin instanceof ElementRef) {
+                return this._overlayRef;
+            }
+            this._detach();
+        }
+        const scrollableAncestors = this._scrollDispatcher.getAncestorScrollContainers(this._elementRef);
+        // Create connected position strategy that listens for scroll events to reposition.
+        const strategy = this._overlay
+            .position()
+            .flexibleConnectedTo(this.positionAtOrigin ? origin || this._elementRef : this._elementRef)
+            .withTransformOriginOn(`.${this._cssClassPrefix}-tooltip`)
+            .withFlexibleDimensions(false)
+            .withViewportMargin(this._viewportMargin)
+            .withScrollableContainers(scrollableAncestors);
+        strategy.positionChanges.pipe(takeUntil(this._destroyed)).subscribe((change) => {
+            this._updateCurrentPositionClass(change.connectionPair);
+            if (this._tooltipInstance) {
+                if (change.scrollableViewProperties.isOverlayClipped && this._tooltipInstance.isVisible()) {
+                    // After position changes occur and the overlay is clipped by
+                    // a parent scrollable then close the tooltip.
+                    this._ngZone.run(() => this.hide(0));
+                }
+            }
+        });
+        this._overlayRef = this._overlay.create({
+            direction: this._dir,
+            positionStrategy: strategy,
+            panelClass: `${this._cssClassPrefix}-${PANEL_CLASS}`,
+            scrollStrategy: this._scrollStrategy(),
+        });
+        this._updatePosition(this._overlayRef);
+        this._overlayRef
+            .detachments()
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(() => this._detach());
+        this._overlayRef
+            .outsidePointerEvents()
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(() => this._tooltipInstance?._handleBodyInteraction());
+        this._overlayRef
+            .keydownEvents()
+            .pipe(takeUntil(this._destroyed))
+            .subscribe((event) => {
+            if (this._isTooltipVisible() && event.key === 'Escape' && !hasModifierKey(event)) {
+                event.preventDefault();
+                event.stopPropagation();
+                this._ngZone.run(() => this.hide(0));
+            }
+        });
+        if (this._defaultOptions?.disableTooltipInteractivity) {
+            this._overlayRef.addPanelClass(`${this._cssClassPrefix}-tooltip-panel-non-interactive`);
+        }
+        return this._overlayRef;
+    }
+    _detach() {
+        if (this._overlayRef?.hasAttached()) {
+            this._overlayRef.detach();
+        }
+        this._tooltipInstance = null;
+    }
+    _updatePosition(overlayRef) {
+        const position = overlayRef.getConfig().positionStrategy;
+        const origin = this._getOrigin();
+        const overlay = this._getOverlayPosition();
+        position.withPositions([
+            this._addOffset({ ...origin.main, ...overlay.main }),
+            this._addOffset({ ...origin.fallback, ...overlay.fallback }),
+        ]);
+    }
+    /** Adds the configured offset to a position. Used as a hook for child classes. */
+    _addOffset(position) {
+        const offset = UNBOUNDED_ANCHOR_GAP;
+        const isLtr = !this._dir || this._dir.value === 'ltr';
+        if (position.originY === 'top') {
+            position.offsetY = -offset;
+        }
+        else if (position.originY === 'bottom') {
+            position.offsetY = offset;
+        }
+        else if (position.originX === 'start') {
+            position.offsetX = isLtr ? -offset : offset;
+        }
+        else if (position.originX === 'end') {
+            position.offsetX = isLtr ? offset : -offset;
+        }
+        return position;
+    }
+    /**
+     * Returns the origin position and a fallback position based on the user's position preference.
+     * The fallback position is the inverse of the origin (e.g. `'below' -> 'above'`).
+     */
+    _getOrigin() {
+        const isLtr = !this._dir || this._dir.value === 'ltr';
+        const position = this.position;
+        let originPosition;
+        if (position === 'above' || position === 'below') {
+            originPosition = { originX: 'center', originY: position === 'above' ? 'top' : 'bottom' };
+        }
+        else if (position === 'before' || (position === 'left' && isLtr) || (position === 'right' && !isLtr)) {
+            originPosition = { originX: 'start', originY: 'center' };
+        }
+        else if (position === 'after' || (position === 'right' && isLtr) || (position === 'left' && !isLtr)) {
+            originPosition = { originX: 'end', originY: 'center' };
+        }
+        else if (typeof isDevMode() === 'undefined' || isDevMode()) {
+            throw getBrnTooltipInvalidPositionError(position);
+        }
+        const { x, y } = this._invertPosition(originPosition.originX, originPosition.originY);
+        return {
+            main: originPosition,
+            fallback: { originX: x, originY: y },
+        };
+    }
+    /** Returns the overlay position and a fallback position based on the user's preference */
+    _getOverlayPosition() {
+        const isLtr = !this._dir || this._dir.value === 'ltr';
+        const position = this.position;
+        let overlayPosition;
+        if (position === 'above') {
+            overlayPosition = { overlayX: 'center', overlayY: 'bottom' };
+        }
+        else if (position === 'below') {
+            overlayPosition = { overlayX: 'center', overlayY: 'top' };
+        }
+        else if (position === 'before' || (position === 'left' && isLtr) || (position === 'right' && !isLtr)) {
+            overlayPosition = { overlayX: 'end', overlayY: 'center' };
+        }
+        else if (position === 'after' || (position === 'right' && isLtr) || (position === 'left' && !isLtr)) {
+            overlayPosition = { overlayX: 'start', overlayY: 'center' };
+        }
+        else if (typeof isDevMode() === 'undefined' || isDevMode()) {
+            throw getBrnTooltipInvalidPositionError(position);
+        }
+        const { x, y } = this._invertPosition(overlayPosition.overlayX, overlayPosition.overlayY);
+        return {
+            main: overlayPosition,
+            fallback: { overlayX: x, overlayY: y },
+        };
+    }
+    /** Updates the tooltip message and repositions the overlay according to the new message length */
+    _updateTooltipContent() {
+        // Must wait for the template to be painted to the tooltip so that the overlay can properly
+        // calculate the correct positioning based on the size of the tek-pate.
+        if (this._tooltipInstance) {
+            this._tooltipInstance.content = this.content;
+            this._tooltipInstance._markForCheck();
+            this._ngZone.onMicrotaskEmpty.pipe(take(1), takeUntil(this._destroyed)).subscribe(() => {
+                if (this._tooltipInstance) {
+                    this._overlayRef?.updatePosition();
+                }
+            });
+        }
+    }
+    /** Inverts an overlay position. */
+    _invertPosition(x, y) {
+        if (this.position === 'above' || this.position === 'below') {
+            if (y === 'top') {
+                y = 'bottom';
+            }
+            else if (y === 'bottom') {
+                y = 'top';
+            }
+        }
+        else {
+            if (x === 'end') {
+                x = 'start';
+            }
+            else if (x === 'start') {
+                x = 'end';
+            }
+        }
+        return { x, y };
+    }
+    /** Updates the class on the overlay panel based on the current position of the tooltip. */
+    _updateCurrentPositionClass(connectionPair) {
+        const { overlayY, originX, originY } = connectionPair;
+        let newPosition;
+        // If the overlay is in the middle along the Y axis,
+        // it means that it's either before or after.
+        if (overlayY === 'center') {
+            // Note that since this information is used for styling, we want to
+            // resolve `start` and `end` to their real values, otherwise consumers
+            // would have to remember to do it themselves on each consumption.
+            if (this._dir && this._dir.value === 'rtl') {
+                newPosition = originX === 'end' ? 'left' : 'right';
+            }
+            else {
+                newPosition = originX === 'start' ? 'left' : 'right';
+            }
+        }
+        else {
+            newPosition = overlayY === 'bottom' && originY === 'top' ? 'above' : 'below';
+        }
+        if (newPosition !== this._currentPosition) {
+            this._tooltipInstance?.side.set(newPosition);
+            this._currentPosition = newPosition;
+        }
+    }
+    /** Binds the pointer events to the tooltip trigger. */
+    _setupPointerEnterEventsIfNeeded() {
+        // Optimization: Defer hooking up events if there's no content or the tooltip is disabled.
+        if (this._disabled() || !this.content || !this._viewInitialized || this._passiveListeners.length) {
+            return;
+        }
+        // The mouse events shouldn't be bound on mobile devices, because they can prevent the
+        // first tap from firing its click event or can cause the tooltip to open for clicks.
+        if (this._platformSupportsMouseEvents()) {
+            this._passiveListeners.push([
+                'mouseenter',
+                (event) => {
+                    this._setupPointerExitEventsIfNeeded();
+                    let point = undefined;
+                    if (event.x !== undefined && event.y !== undefined) {
+                        point = event;
+                    }
+                    this.show(undefined, point);
+                },
+            ]);
+        }
+        else if (this.touchGestures !== 'off') {
+            this._disableNativeGesturesIfNecessary();
+            this._passiveListeners.push([
+                'touchstart',
+                (event) => {
+                    const touch = event.targetTouches?.[0];
+                    const origin = touch ? { x: touch.clientX, y: touch.clientY } : undefined;
+                    // Note that it's important that we don't `preventDefault` here,
+                    // because it can prevent click events from firing on the element.
+                    this._setupPointerExitEventsIfNeeded();
+                    clearTimeout(this._touchstartTimeout);
+                    this._touchstartTimeout = setTimeout(() => this.show(undefined, origin), LONGPRESS_DELAY);
+                },
+            ]);
+        }
+        this._addListeners(this._passiveListeners);
+    }
+    _setupPointerExitEventsIfNeeded() {
+        if (this._pointerExitEventsInitialized) {
+            return;
+        }
+        this._pointerExitEventsInitialized = true;
+        const exitListeners = [];
+        if (this._platformSupportsMouseEvents()) {
+            exitListeners.push([
+                'mouseleave',
+                (event) => {
+                    const newTarget = event.relatedTarget;
+                    if (!newTarget || !this._overlayRef?.overlayElement.contains(newTarget)) {
+                        this.hide();
+                    }
+                },
+            ], ['wheel', (event) => this._wheelListener(event)]);
+        }
+        else if (this.touchGestures !== 'off') {
+            this._disableNativeGesturesIfNecessary();
+            const touchendListener = () => {
+                clearTimeout(this._touchstartTimeout);
+                this.hide(this._defaultOptions?.touchendHideDelay);
+            };
+            exitListeners.push(['touchend', touchendListener], ['touchcancel', touchendListener]);
+        }
+        this._addListeners(exitListeners);
+        this._passiveListeners.push(...exitListeners);
+    }
+    _addListeners(listeners) {
+        listeners.forEach(([event, listener]) => {
+            this._elementRef.nativeElement.addEventListener(event, listener, passiveListenerOptions);
+        });
+    }
+    _platformSupportsMouseEvents() {
+        return !this._platform.IOS && !this._platform.ANDROID;
+    }
+    /** Listener for the `wheel` event on the element. */
+    _wheelListener(event) {
+        if (this._isTooltipVisible()) {
+            const elementUnderPointer = this._document.elementFromPoint(event.clientX, event.clientY);
+            const element = this._elementRef.nativeElement;
+            // On non-touch devices we depend on the `mouseleave` event to close the tooltip, but it
+            // won't fire if the user scrolls away using the wheel without moving their cursor. We
+            // work around it by finding the element under the user's cursor and closing the tooltip
+            // if it's not the trigger.
+            if (elementUnderPointer !== element && !element.contains(elementUnderPointer)) {
+                this.hide();
+            }
+        }
+    }
+    /** Disables the native browser gestures, based on how the tooltip has been configured. */
+    _disableNativeGesturesIfNecessary() {
+        const gestures = this.touchGestures;
+        if (gestures !== 'off') {
+            const element = this._elementRef.nativeElement;
+            const style = element.style;
+            // If gestures are set to `auto`, we don't disable text selection on inputs and
+            // textareas, because it prevents the user from typing into them on iOS Safari.
+            if (gestures === 'on' || (element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA')) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                style.userSelect = style.msUserSelect = style.webkitUserSelect = style.MozUserSelect = 'none';
+            }
+            // If we have `auto` gestures and the element uses native HTML dragging,
+            // we don't set `-webkit-user-drag` because it prevents the native behavior.
+            if (gestures === 'on' || !element.draggable) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                style.webkitUserDrag = 'none';
+            }
+            style.touchAction = 'none';
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            style.webkitTapHighlightColor = 'transparent';
+        }
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTooltipTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.5", type: BrnTooltipTriggerDirective, isStandalone: true, selector: "[brnTooltipTrigger]", inputs: { position: "position", positionAtOrigin: ["positionAtOrigin", "positionAtOrigin", booleanAttribute], disabled: ["brnTooltipDisabled", "disabled", booleanAttribute], showDelay: ["showDelay", "showDelay", numberAttribute], hideDelay: ["hideDelay", "hideDelay", numberAttribute], exitAnimationDuration: ["exitAnimationDuration", "exitAnimationDuration", numberAttribute], tooltipContentClasses: "tooltipContentClasses", touchGestures: "touchGestures", ariaDescribedBy: ["aria-describedby", "ariaDescribedBy"], content: ["brnTooltipTrigger", "content"] }, host: { properties: { "class.brn-tooltip-disabled": "disabled" }, classAttribute: "brn-tooltip-trigger" }, providers: [BRN_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER], exportAs: ["brnTooltipTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTooltipTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnTooltipTrigger]',
+                    standalone: true,
+                    exportAs: 'brnTooltipTrigger',
+                    providers: [BRN_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER],
+                    host: {
+                        class: 'brn-tooltip-trigger',
+                        '[class.brn-tooltip-disabled]': 'disabled',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { position: [{
+                type: Input
+            }], positionAtOrigin: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute, alias: 'brnTooltipDisabled' }]
+            }], showDelay: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], hideDelay: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], exitAnimationDuration: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], tooltipContentClasses: [{
+                type: Input
+            }], touchGestures: [{
+                type: Input
+            }], ariaDescribedBy: [{
+                type: Input,
+                args: ['aria-describedby']
+            }], content: [{
+                type: Input,
+                args: ['brnTooltipTrigger']
+            }] } });
+
+const BrnTooltipImports = [
+    BrnTooltipDirective,
+    BrnTooltipContentDirective,
+    BrnTooltipTriggerDirective,
+    BrnTooltipContentComponent,
+];
+class BrnTooltipModule {
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: BrnTooltipModule, imports: [BrnTooltipDirective,
+            BrnTooltipContentDirective,
+            BrnTooltipTriggerDirective,
+            BrnTooltipContentComponent], exports: [BrnTooltipDirective,
+            BrnTooltipContentDirective,
+            BrnTooltipTriggerDirective,
+            BrnTooltipContentComponent] });
+    /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTooltipModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...BrnTooltipImports],
+                    exports: [...BrnTooltipImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BRN_TOOLTIP_DEFAULT_OPTIONS, BRN_TOOLTIP_DEFAULT_OPTIONS_FACTORY, BRN_TOOLTIP_SCROLL_STRATEGY, BRN_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, BrnTooltipContentComponent, BrnTooltipContentDirective, BrnTooltipDirective, BrnTooltipImports, BrnTooltipModule, BrnTooltipTriggerDirective, SCROLL_THROTTLE_MS, getBrnTooltipInvalidPositionError };
+//# sourceMappingURL=spartan-ng-brain-tooltip.mjs.map