@spartan-ng/brain 0.0.1-alpha.380 → 0.0.1-alpha.386

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

@@ -1,5 +1,5 @@
 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 { inject, ChangeDetectorRef, PLATFORM_ID, Renderer2, signal, viewChild, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, TemplateRef, InjectionToken, untracked, computed, ViewContainerRef, NgZone, input, booleanAttribute, numberAttribute, effect, isDevMode, NgModule } from '@angular/core';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import { Subject } from 'rxjs';
 import { AriaDescriber, FocusMonitor } from '@angular/cdk/a11y';
@@ -8,7 +8,7 @@ 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 { brnDevMode } from '@spartan-ng/brain/core';
 import { takeUntil, take } from 'rxjs/operators';
 
 /**
@@ -42,7 +42,7 @@ class BrnTooltipContentComponent {
     /** Amount of milliseconds of closing animation. */
     _exitAnimationDuration = 0;
     /** Reference to the internal tooltip element. */
-    _tooltip;
+    _tooltip = viewChild('tooltip', { read: (ElementRef) });
     /** Whether interactions on the page should close the tooltip */
     _closeOnInteraction = false;
     /** Whether the tooltip is currently visible. */
@@ -156,7 +156,7 @@ class BrnTooltipContentComponent {
         // 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;
+        const tooltip = this._tooltip()?.nativeElement;
         if (!tooltip || !this._isBrowser)
             return;
         this._renderer2.setStyle(tooltip, 'visibility', isVisible ? 'visible' : 'hidden');
@@ -172,14 +172,14 @@ class BrnTooltipContentComponent {
         // 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;
+        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: `
+    /** @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, read: ElementRef, isSignal: true }], ngImport: i0, template: `
 		<div
 			(mouseenter)="_contentHovered.set(true)"
 			(mouseleave)="_contentHovered.set(false)"
@@ -226,14 +226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                     },
                     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);
@@ -267,6 +260,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+const defaultOptions = {
+    showDelay: 0,
+    hideDelay: 0,
+    exitAnimationDuration: 0,
+    touchendHideDelay: 1500,
+};
+const BRN_TOOLTIP_DEFAULT_OPTIONS = new InjectionToken('brn-tooltip-default-options', {
+    providedIn: 'root',
+    factory: () => defaultOptions,
+});
+function provideBrnTooltipDefaultOptions(options) {
+    return { provide: BRN_TOOLTIP_DEFAULT_OPTIONS, useValue: { ...defaultOptions, ...options } };
+}
+function injectBrnTooltipDefaultOptions() {
+    return inject(BRN_TOOLTIP_DEFAULT_OPTIONS, { optional: true }) ?? defaultOptions;
+}
+
+/**
+ * Returns a signal that emits the previous value of the given signal.
+ * The first time the signal is emitted, the previous value will be the same as the current value.
+ *
+ * @example
+ * ```ts
+ * const value = signal(0);
+ * const previous = computedPrevious(value);
+ *
+ * effect(() => {
+ *  console.log('Current value:', value());
+ *  console.log('Previous value:', previous());
+ * });
+ *
+ * Logs:
+ * // Current value: 0
+ * // Previous value: 0
+ *
+ * value.set(1);
+ *
+ * Logs:
+ * // Current value: 1
+ * // Previous value: 0
+ *
+ * value.set(2);
+ *
+ * Logs:
+ * // Current value: 2
+ * // Previous value: 1
+ *```
+ *
+ * @param computation Signal to compute previous value for
+ * @returns Signal that emits previous value of `s`
+ */
+function computedPrevious(computation) {
+    let current = null;
+    let previous = untracked(() => computation()); // initial value is the current value
+    return computed(() => {
+        current = computation();
+        const result = previous;
+        previous = current;
+        return result;
+    });
+}
+
 /**
  * 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
@@ -291,17 +346,6 @@ const BRN_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER = {
     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 });
@@ -319,7 +363,7 @@ class BrnTooltipTriggerDirective {
     _cssClassPrefix = 'brn';
     _destroyed = new Subject();
     _passiveListeners = [];
-    _defaultOptions = inject(BRN_TOOLTIP_DEFAULT_OPTIONS, { optional: true });
+    _defaultOptions = injectBrnTooltipDefaultOptions();
     _overlay = inject(Overlay);
     _elementRef = inject((ElementRef));
     _scrollDispatcher = inject(ScrollDispatcher);
@@ -340,89 +384,26 @@ class BrnTooltipTriggerDirective {
     _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();
-            }
-        }
-    }
+    position = input(this._defaultOptions?.position ?? 'above');
     /**
      * 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;
-    }
+    positionAtOrigin = input(this._defaultOptions?.positionAtOrigin ?? false, {
+        transform: booleanAttribute,
+    });
     /** 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();
-        }
-    }
+    brnTooltipDisabled = input(false, { transform: booleanAttribute });
     /** 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);
-    }
+    showDelay = input(this._defaultOptions?.showDelay ?? 0, { transform: numberAttribute });
     /** 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();
-        }
-    }
+    hideDelay = input(this._defaultOptions?.hideDelay ?? 0, { transform: numberAttribute });
     /** 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();
-        }
-    }
+    exitAnimationDuration = input(this._defaultOptions?.exitAnimationDuration ?? 0, {
+        transform: numberAttribute,
+    });
     /** 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 ?? '');
-        }
-    }
+    tooltipContentClasses = input(this._defaultOptions?.tooltipContentClasses ?? '');
     /**
      * 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
@@ -437,78 +418,110 @@ class BrnTooltipTriggerDirective {
      * - `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();
-    }
+    touchGestures = input(this._defaultOptions?.touchGestures ?? 'auto');
     /** 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');
-                });
-            });
-        }
-    }
+    ariaDescribedBy = input('', { alias: 'aria-describedby' });
+    ariaDescribedByPrevious = computedPrevious(this.ariaDescribedBy);
     /** 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();
+    brnTooltipTrigger = input(null);
+    brnTooltipTriggerState = computed(() => {
+        if (this._tooltipDirective) {
+            return this._tooltipDirective.tooltipTemplate();
         }
-    }
+        return this.brnTooltipTrigger();
+    });
     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();
-                }
-            });
-        }
+        this._initBrnTooltipTriggerEffect();
+        this._initAriaDescribedByPreviousEffect();
+        this._initTooltipContentClassesEffect();
+        this._initPositionEffect();
+        this._initPositionAtOriginEffect();
+        this._initBrnTooltipDisabledEffect();
+        this._initExitAnimationDurationEffect();
+        this._initHideDelayEffect();
+    }
+    _initPositionEffect() {
+        effect(() => {
+            if (this._overlayRef) {
+                this._updatePosition(this._overlayRef);
+                this._tooltipInstance?.show(0);
+                this._overlayRef.updatePosition();
+            }
+        });
+    }
+    _initBrnTooltipDisabledEffect() {
+        effect(() => {
+            if (this.brnTooltipDisabled()) {
+                this.hide(0);
+            }
+            else {
+                this._setupPointerEnterEventsIfNeeded();
+            }
+        });
+    }
+    _initPositionAtOriginEffect() {
+        effect(() => {
+            // Needed that the effect got triggered
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            const _ = this.positionAtOrigin();
+            this._detach();
+            this._overlayRef = null;
+        });
+    }
+    _initTooltipContentClassesEffect() {
+        effect(() => {
+            if (this._tooltipInstance) {
+                this._tooltipInstance._tooltipClasses.set(this.tooltipContentClasses() ?? '');
+            }
+        });
+    }
+    _initAriaDescribedByPreviousEffect() {
+        effect(() => {
+            const ariaDescribedBy = this.ariaDescribedBy();
+            this._ariaDescriber.removeDescription(this._elementRef.nativeElement, untracked(() => this.ariaDescribedByPrevious()), 'tooltip');
+            if (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, ariaDescribedBy, 'tooltip');
+                    });
+                });
+            }
+        });
+    }
+    _initBrnTooltipTriggerEffect() {
+        effect(() => {
+            if (!this.brnTooltipTriggerState() && this._isTooltipVisible()) {
+                this.hide(0);
+            }
+            else {
+                this._setupPointerEnterEventsIfNeeded();
+                this._updateTooltipContent();
+            }
+        }, { allowSignalWrites: true });
+    }
+    _initExitAnimationDurationEffect() {
+        effect(() => {
+            if (this._tooltipInstance) {
+                this._tooltipInstance._exitAnimationDuration = this.exitAnimationDuration();
+            }
+        });
+    }
+    _initHideDelayEffect() {
+        effect(() => {
+            if (this._tooltipInstance) {
+                this._tooltipInstance._mouseLeaveHideDelay = this.hideDelay();
+            }
+        });
     }
     ngAfterViewInit() {
         // This needs to happen after view init so the initial values for all inputs have been set.
@@ -526,7 +539,7 @@ class BrnTooltipTriggerDirective {
                 this._ngZone.run(() => this.show());
             }
         });
-        if (brnDevMode && !this._ariaDescribedBy) {
+        if (brnDevMode && !this.ariaDescribedBy()) {
             console.warn('BrnTooltip: "aria-describedby" attribute is required for accessibility');
         }
     }
@@ -545,12 +558,12 @@ class BrnTooltipTriggerDirective {
         this._passiveListeners.length = 0;
         this._destroyed.next();
         this._destroyed.complete();
-        this._ariaDescriber.removeDescription(nativeElement, this._ariaDescribedBy, 'tooltip');
+        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()) {
+    show(delay = this.showDelay(), origin) {
+        if (this.brnTooltipDisabled() || this._isTooltipVisible()) {
             this._tooltipInstance?._cancelPendingAnimations();
             return;
         }
@@ -559,16 +572,16 @@ class BrnTooltipTriggerDirective {
         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._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) {
+    hide(delay = this.hideDelay(), exitAnimationDuration = this.exitAnimationDuration()) {
         const instance = this._tooltipInstance;
         if (instance) {
             if (instance.isVisible()) {
@@ -589,7 +602,7 @@ class BrnTooltipTriggerDirective {
     _createOverlay(origin) {
         if (this._overlayRef) {
             const existingStrategy = this._overlayRef.getConfig().positionStrategy;
-            if ((!this.positionAtOrigin || !origin) && existingStrategy._origin instanceof ElementRef) {
+            if ((!this.positionAtOrigin() || !origin) && existingStrategy._origin instanceof ElementRef) {
                 return this._overlayRef;
             }
             this._detach();
@@ -598,7 +611,7 @@ class BrnTooltipTriggerDirective {
         // Create connected position strategy that listens for scroll events to reposition.
         const strategy = this._overlay
             .position()
-            .flexibleConnectedTo(this.positionAtOrigin ? origin || this._elementRef : this._elementRef)
+            .flexibleConnectedTo(this.positionAtOrigin() ? origin || this._elementRef : this._elementRef)
             .withTransformOriginOn(`.${this._cssClassPrefix}-tooltip`)
             .withFlexibleDimensions(false)
             .withViewportMargin(this._viewportMargin)
@@ -682,7 +695,7 @@ class BrnTooltipTriggerDirective {
      */
     _getOrigin() {
         const isLtr = !this._dir || this._dir.value === 'ltr';
-        const position = this.position;
+        const position = this.position();
         let originPosition;
         if (position === 'above' || position === 'below') {
             originPosition = { originX: 'center', originY: position === 'above' ? 'top' : 'bottom' };
@@ -705,7 +718,7 @@ class BrnTooltipTriggerDirective {
     /** 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;
+        const position = this.position();
         let overlayPosition;
         if (position === 'above') {
             overlayPosition = { overlayX: 'center', overlayY: 'bottom' };
@@ -733,7 +746,7 @@ class BrnTooltipTriggerDirective {
         // 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.content = this.brnTooltipTriggerState();
             this._tooltipInstance._markForCheck();
             this._ngZone.onMicrotaskEmpty.pipe(take(1), takeUntil(this._destroyed)).subscribe(() => {
                 if (this._tooltipInstance) {
@@ -744,7 +757,7 @@ class BrnTooltipTriggerDirective {
     }
     /** Inverts an overlay position. */
     _invertPosition(x, y) {
-        if (this.position === 'above' || this.position === 'below') {
+        if (this.position() === 'above' || this.position() === 'below') {
             if (y === 'top') {
                 y = 'bottom';
             }
@@ -790,7 +803,10 @@ class BrnTooltipTriggerDirective {
     /** 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) {
+        if (this.brnTooltipDisabled() ||
+            !this.brnTooltipTriggerState() ||
+            !this._viewInitialized ||
+            this._passiveListeners.length) {
             return;
         }
         // The mouse events shouldn't be bound on mobile devices, because they can prevent the
@@ -808,7 +824,7 @@ class BrnTooltipTriggerDirective {
                 },
             ]);
         }
-        else if (this.touchGestures !== 'off') {
+        else if (this.touchGestures() !== 'off') {
             this._disableNativeGesturesIfNecessary();
             this._passiveListeners.push([
                 'touchstart',
@@ -842,7 +858,7 @@ class BrnTooltipTriggerDirective {
                 },
             ], ['wheel', (event) => this._wheelListener(event)]);
         }
-        else if (this.touchGestures !== 'off') {
+        else if (this.touchGestures() !== 'off') {
             this._disableNativeGesturesIfNecessary();
             const touchendListener = () => {
                 clearTimeout(this._touchstartTimeout);
@@ -877,7 +893,7 @@ class BrnTooltipTriggerDirective {
     }
     /** Disables the native browser gestures, based on how the tooltip has been configured. */
     _disableNativeGesturesIfNecessary() {
-        const gestures = this.touchGestures;
+        const gestures = this.touchGestures();
         if (gestures !== 'off') {
             const element = this._elementRef.nativeElement;
             const style = element.style;
@@ -899,7 +915,7 @@ class BrnTooltipTriggerDirective {
         }
     }
     /** @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 });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.5", type: BrnTooltipTriggerDirective, isStandalone: true, selector: "[brnTooltipTrigger]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, positionAtOrigin: { classPropertyName: "positionAtOrigin", publicName: "positionAtOrigin", isSignal: true, isRequired: false, transformFunction: null }, brnTooltipDisabled: { classPropertyName: "brnTooltipDisabled", publicName: "brnTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, exitAnimationDuration: { classPropertyName: "exitAnimationDuration", publicName: "exitAnimationDuration", isSignal: true, isRequired: false, transformFunction: null }, tooltipContentClasses: { classPropertyName: "tooltipContentClasses", publicName: "tooltipContentClasses", isSignal: true, isRequired: false, transformFunction: null }, touchGestures: { classPropertyName: "touchGestures", publicName: "touchGestures", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, brnTooltipTrigger: { classPropertyName: "brnTooltipTrigger", publicName: "brnTooltipTrigger", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.brn-tooltip-disabled": "brnTooltipDisabled()" }, 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,
@@ -910,37 +926,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                     providers: [BRN_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER],
                     host: {
                         class: 'brn-tooltip-trigger',
-                        '[class.brn-tooltip-disabled]': 'disabled',
+                        '[class.brn-tooltip-disabled]': 'brnTooltipDisabled()',
                     },
                 }]
-        }], 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']
-            }] } });
+        }], ctorParameters: () => [] });
 
 const BrnTooltipImports = [
     BrnTooltipDirective,
@@ -971,5 +960,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
  * 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 };
+export { BRN_TOOLTIP_SCROLL_STRATEGY, BRN_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, BrnTooltipContentComponent, BrnTooltipContentDirective, BrnTooltipDirective, BrnTooltipImports, BrnTooltipModule, BrnTooltipTriggerDirective, SCROLL_THROTTLE_MS, defaultOptions, getBrnTooltipInvalidPositionError, injectBrnTooltipDefaultOptions, provideBrnTooltipDefaultOptions };
 //# sourceMappingURL=spartan-ng-brain-tooltip.mjs.map