@ship-ui/core 0.14.22 → 0.15.0

package/README.md

@@ -2,6 +2,8 @@
 
 A modern signal based and zoneless compatable UI library for Angular visit our website [shipui.com](https://shipui.com) for more info.
 
+Docs can be found at [docs.shipui.com](https://docs.shipui.com)
+
 ## Base setup
 
 To start using ShipUI make sure you're using angular 19 or newer.

package/fesm2022/ship-ui-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, ChangeDetectionStrategy, Component, signal, DestroyRef, InjectionToken, input, computed, viewChild, effect, HostListener, NgModule, Injectable, model, output, ApplicationRef, createComponent, isSignal, OutputEmitterRef, contentChild, contentChildren, afterNextRender, assertInInjectionContext, Injector, HostBinding, TemplateRef, runInInjectionContext, Directive, ChangeDetectorRef, viewChildren, ViewContainerRef, EnvironmentInjector } from '@angular/core';
+import { inject, ElementRef, Renderer2, ChangeDetectionStrategy, Component, signal, DestroyRef, InjectionToken, input, computed, viewChild, effect, HostListener, NgModule, Injectable, DOCUMENT, model, output, ApplicationRef, createComponent, isSignal, OutputEmitterRef, contentChild, contentChildren, afterNextRender, assertInInjectionContext, Injector, HostBinding, TemplateRef, runInInjectionContext, Directive, ChangeDetectorRef, viewChildren, ViewContainerRef, EnvironmentInjector } from '@angular/core';
 import { DatePipe, NgTemplateOutlet } from '@angular/common';
 import { NgModel } from '@angular/forms';
 import { SIGNAL } from '@angular/core/primitives/signals';
@@ -51,7 +51,7 @@ function classMutationSignal() {
             }
         }
     });
-    observer.observe(element, { attributes: true });
+    observer.observe(element, { attributes: true, attributeFilter: ['class'] });
     destroyRef.onDestroy(() => observer.disconnect());
     return classListSignal.asReadonly();
 }
@@ -355,6 +355,7 @@ const DEFAULT_OPTIONS$1 = {
 };
 class ShipDialogComponent {
     constructor() {
+        this.#document = inject(DOCUMENT);
         this.#shConfig = inject(SHIP_CONFIG, { optional: true });
         this.dialogRef = viewChild('dialogRef', ...(ngDevMode ? [{ debugName: "dialogRef" }] : []));
         this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
@@ -380,7 +381,7 @@ class ShipDialogComponent {
                 }, {
                     signal: this.abortController?.signal,
                 });
-                document.addEventListener('keydown', (e) => {
+                this.#document.addEventListener('keydown', (e) => {
                     if (e.key === 'Escape' && !this.defaultOptionMerge().closeOnEsc) {
                         e.preventDefault();
                     }
@@ -397,6 +398,7 @@ class ShipDialogComponent {
             }
         }, ...(ngDevMode ? [{ debugName: "isOpenEffect" }] : []));
     }
+    #document;
     #shConfig;
     ngOnDestroy() {
         this.abortController?.abort();
@@ -452,13 +454,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
 class ShipDialogService {
     constructor() {
-        this.#bodyEl = typeof document !== 'undefined' ? document.querySelector('body') : null;
+        this.#document = inject(DOCUMENT);
+        this.#bodyEl = this.#document.querySelector('body');
         this.#appRef = inject(ApplicationRef);
         this.compRef = null;
         this.insertedCompRef = null;
         this.closedFieldSub = null;
         this.compClosedSub = null;
     }
+    #document;
     #bodyEl;
     #appRef;
     open(component, options) {
@@ -515,12 +519,12 @@ class ShipDialogService {
         };
     }
     #createEl() {
-        const wrapperEl = document.createElement('sh-dialog-ref');
+        const wrapperEl = this.#document.createElement('sh-dialog-ref');
         wrapperEl.id = 'sh-dialog-ref';
-        if (!document.getElementById('sh-dialog-ref')) {
+        if (!this.#document.getElementById('sh-dialog-ref')) {
             this.#bodyEl?.append(wrapperEl);
         }
-        return document.getElementById('sh-dialog-ref');
+        return this.#document.getElementById('sh-dialog-ref');
     }
     #cleanupRefs() {
         if (this.insertedCompRef) {
@@ -550,7 +554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 class ShipButtonGroupComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipButtonGroupComponent, isStandalone: true, selector: "sh-button-group", ngImport: i0, template: `
-    <ng-content></ng-content>
+    <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipButtonGroupComponent, decorators: [{
@@ -559,7 +563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     selector: 'sh-button-group',
                     imports: [],
                     template: `
-    <ng-content></ng-content>
+    <ng-content />
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
@@ -590,7 +594,7 @@ class ShipCardComponent {
     #shConfig;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipCardComponent, isStandalone: true, selector: "sh-card", host: { properties: { "class": "class()" } }, ngImport: i0, template: `
-    <ng-content></ng-content>
+    <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipCardComponent, decorators: [{
@@ -599,7 +603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     selector: 'sh-card',
                     imports: [],
                     template: `
-    <ng-content></ng-content>
+    <ng-content />
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
@@ -611,14 +615,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 class ShipCheckboxComponent {
     constructor() {
         this.currentClassList = classMutationSignal();
-        this.showClasses = computed(() => {
-            const classArr = this.currentClassList().split(' ');
-            return classArr;
-        }, ...(ngDevMode ? [{ debugName: "showClasses" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipCheckboxComponent, isStandalone: true, selector: "sh-checkbox", ngImport: i0, template: `
-    <div class="box sh-sheet" [class]="showClasses()">
+    <div class="box sh-sheet" [class]="currentClassList()">
       <sh-icon class="inherit default-indicator">check-bold</sh-icon>
       <sh-icon class="inherit indeterminate-indicator">minus-bold</sh-icon>
     </div>
@@ -632,7 +632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     selector: 'sh-checkbox',
                     imports: [ShipIconComponent],
                     template: `
-    <div class="box sh-sheet" [class]="showClasses()">
+    <div class="box sh-sheet" [class]="currentClassList()">
       <sh-icon class="inherit default-indicator">check-bold</sh-icon>
       <sh-icon class="inherit indeterminate-indicator">minus-bold</sh-icon>
     </div>
@@ -645,14 +645,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
 class ShipChipComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipChipComponent, isStandalone: true, selector: "sh-chip", host: { classAttribute: "sh-sheet" }, ngImport: i0, template: '<div><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipChipComponent, isStandalone: true, selector: "sh-chip", host: { classAttribute: "sh-sheet" }, ngImport: i0, template: '<div><ng-content /></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipChipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-chip',
                     imports: [],
-                    template: '<div><ng-content></ng-content></div>',
+                    template: '<div><ng-content /></div>',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'sh-sheet',
@@ -665,6 +665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 // - Add alpha support
 class ShipColorPickerComponent {
     constructor() {
+        this.#document = inject(DOCUMENT);
         this.canvasRef = viewChild.required('colorCanvas');
         this.canvasData = signal(null, ...(ngDevMode ? [{ debugName: "canvasData" }] : []));
         this.showDarkColors = input(false, ...(ngDevMode ? [{ debugName: "showDarkColors" }] : []));
@@ -710,6 +711,7 @@ class ShipColorPickerComponent {
         }, ...(ngDevMode ? [{ debugName: "renderingTypeEffect" }] : []));
         this.initColor = null;
     }
+    #document;
     onResize() {
         this.setCanvasSize();
     }
@@ -775,22 +777,22 @@ class ShipColorPickerComponent {
             this.isDragging.set(true);
             this.updateColorAndMarker(event);
         });
-        document.addEventListener('mousemove', (event) => {
+        this.#document.addEventListener('mousemove', (event) => {
             if (this.isDragging()) {
                 event.preventDefault();
                 this.updateColorAndMarker(event, true);
             }
         });
-        document.addEventListener('mouseup', () => this.isDragging.set(false));
+        this.#document.addEventListener('mouseup', () => this.isDragging.set(false));
         canvas.addEventListener('touchstart', (_) => this.isDragging.set(true));
-        document.addEventListener('touchmove', (event) => {
+        this.#document.addEventListener('touchmove', (event) => {
             if (this.isDragging()) {
                 event.preventDefault();
                 this.updateColorAndMarker(event.touches[0], true);
             }
         });
-        document.addEventListener('touchend', () => this.isDragging.set(false));
-        document.addEventListener('touchcancel', () => this.isDragging.set(false));
+        this.#document.addEventListener('touchend', () => this.isDragging.set(false));
+        this.#document.addEventListener('touchcancel', () => this.isDragging.set(false));
     }
     setCanvasSize() {
         const canvas = this.canvasRef()?.nativeElement;
@@ -1015,6 +1017,7 @@ const DEFAULT_OPTIONS = {
 };
 class ShipPopoverComponent {
     constructor() {
+        this.#document = inject(DOCUMENT);
         this.#BASE_SPACE = 4;
         this.SUPPORTS_ANCHOR = typeof CSS !== 'undefined' && CSS.supports('position-anchor', '--abc') && CSS.supports('anchor-name', '--abc');
         this.asMultiLayer = input(false, ...(ngDevMode ? [{ debugName: "asMultiLayer" }] : []));
@@ -1043,7 +1046,7 @@ class ShipPopoverComponent {
                     signal: this.openAbort?.signal,
                 };
                 popoverEl?.showPopover();
-                document.addEventListener('keydown', (e) => {
+                this.#document.addEventListener('keydown', (e) => {
                     if (e.key === 'Escape' && !this.defaultOptionMerge().closeOnEsc) {
                         e.preventDefault();
                     }
@@ -1065,6 +1068,7 @@ class ShipPopoverComponent {
             }
         }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
     }
+    #document;
     #BASE_SPACE;
     toggleIsOpen(event) {
         event.preventDefault();
@@ -1087,7 +1091,7 @@ class ShipPopoverComponent {
             }
             parent = parent.parentElement;
         }
-        return document.documentElement;
+        return this.#document.documentElement;
     }
     #calculateMenuPosition() {
         const triggerRect = this.triggerRef()?.nativeElement.getBoundingClientRect();
@@ -1122,12 +1126,13 @@ class ShipPopoverComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.6", type: ShipPopoverComponent, isStandalone: true, selector: "sh-popover", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, disableOpenByClick: { classPropertyName: "disableOpenByClick", publicName: "disableOpenByClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.multi-layer": "asMultiLayer()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="trigger" #triggerRef [style.anchor-name]="id()" (click)="toggleIsOpen($event)">
+    <div class="trigger" #triggerRef (click)="toggleIsOpen($event)">
       <div class="trigger-wrapper">
         <ng-content select="[trigger]" />
         <ng-content select="button" />
         <ng-content select="[shButton]" />
       </div>
+      <div class="trigger-anchor" [style.anchor-name]="id()"></div>
     </div>
 
     <div popover #popoverRef class="popover" [style.position-anchor]="id()" [style]="menuStyle()">
@@ -1142,12 +1147,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     selector: 'sh-popover',
                     imports: [],
                     template: `
-    <div class="trigger" #triggerRef [style.anchor-name]="id()" (click)="toggleIsOpen($event)">
+    <div class="trigger" #triggerRef (click)="toggleIsOpen($event)">
       <div class="trigger-wrapper">
         <ng-content select="[trigger]" />
         <ng-content select="button" />
         <ng-content select="[shButton]" />
       </div>
+      <div class="trigger-anchor" [style.anchor-name]="id()"></div>
     </div>
 
     <div popover #popoverRef class="popover" [style.position-anchor]="id()" [style]="menuStyle()">
@@ -2800,15 +2806,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         }] });
 
 class ShipRadioComponent {
-    #selfRef = inject(ElementRef);
-    onClick() {
-        if (this.#selfRef.nativeElement.querySelector('input')) {
-            this.#selfRef.nativeElement.querySelector('input').focus();
-        }
+    constructor() {
+        this.currentClassList = classMutationSignal();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipRadioComponent, isStandalone: true, selector: "sh-radio", host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: `
-    <div class="radio"></div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ShipRadioComponent, isStandalone: true, selector: "sh-radio", ngImport: i0, template: `
+    <div class="radio sh-sheet" [class]="currentClassList()"></div>
 
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -2819,16 +2822,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     selector: 'sh-radio',
                     imports: [],
                     template: `
-    <div class="radio"></div>
+    <div class="radio sh-sheet" [class]="currentClassList()"></div>
 
     <ng-content />
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+        }] });
 
 class ShipRangeSliderComponent {
     constructor() {
@@ -2972,7 +2972,7 @@ class ShipRangeSliderComponent {
                 this.#updateStateFromInput(false);
             }
         });
-        this.#observer.observe(this.#inputElement, { attributes: true });
+        this.#observer.observe(this.#inputElement, { attributes: true, attributeFilter: MUTATION_ATTRIBUTES });
     }
     #countDecimals(value) {
         if (isNaN(value) || Math.floor(value) === value)
@@ -4010,6 +4010,7 @@ function watchHostClass(className) {
 }
 class ShipSidenavComponent {
     constructor() {
+        this.#document = inject(DOCUMENT);
         this.#selfRef = inject(ElementRef);
         this.openWidth = 280;
         this.openWidthTreshold = this.openWidth * 0.5;
@@ -4054,16 +4055,17 @@ class ShipSidenavComponent {
             return this.isOpen() ? `translateX(${this.openWidth}px)` : `translateX(0px)`;
         }, ...(ngDevMode ? [{ debugName: "draggingStyle" }] : []));
         this.draggingEffect = effect(() => {
-            if (typeof document === 'undefined' || this.disableDrag())
+            if (this.disableDrag())
                 return;
             if (this.isDragging()) {
-                document.body.classList.add('dragging');
+                this.#document.body.classList.add('dragging');
             }
             else {
-                document.body.classList.remove('dragging');
+                this.#document.body.classList.remove('dragging');
             }
         }, ...(ngDevMode ? [{ debugName: "draggingEffect" }] : []));
     }
+    #document;
     #selfRef;
     #closestParent;
     #closestParentRect;
@@ -4160,7 +4162,7 @@ class ShipSidenavComponent {
       </div>
 
       <main>
-        <ng-content></ng-content>
+        <ng-content />
       </main>
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -4201,7 +4203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
       </div>
 
       <main>
-        <ng-content></ng-content>
+        <ng-content />
       </main>
     </div>
   `,
@@ -4306,6 +4308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
 class ShipSortableDirective {
     constructor() {
+        this.#document = inject(DOCUMENT);
         this.#selfEl = inject((ElementRef));
         this.#renderer = inject(Renderer2);
         this.#placeholderEl = signal(null, ...(ngDevMode ? [{ debugName: "#placeholderEl" }] : []));
@@ -4388,6 +4391,7 @@ class ShipSortableDirective {
                 }
             });
     }
+    #document;
     #selfEl;
     #renderer;
     #placeholderEl;
@@ -4399,7 +4403,7 @@ class ShipSortableDirective {
     dragStart(e) {
         if (e.target && e.dataTransfer) {
             const targetElement = e.target;
-            const currentTarget = document.elementFromPoint(e.clientX, e.clientY);
+            const currentTarget = this.#document.elementFromPoint(e.clientX, e.clientY);
             const isSortingHandle = currentTarget?.hasAttribute('sort-handle') || currentTarget?.closest('[sort-handle]') !== null;
             let draggedElement;
             if (isSortingHandle) {
@@ -4990,7 +4994,7 @@ class ShipToggleCardComponent {
 
     <div class="collapsable">
       <div class="content">
-        <ng-content></ng-content>
+        <ng-content />
       </div>
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: ShipIconComponent, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -5011,7 +5015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
     <div class="collapsable">
       <div class="content">
-        <ng-content></ng-content>
+        <ng-content />
       </div>
     </div>
   `,
@@ -5050,6 +5054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
 class ShipTooltipComponent {
     constructor() {
+        this.#document = inject(DOCUMENT);
         this.#BASE_SPACE = 4;
         this.SUPPORTS_ANCHOR = CSS.supports('position-anchor', '--abc') && CSS.supports('anchor-name', '--abc');
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
@@ -5091,10 +5096,11 @@ class ShipTooltipComponent {
             this.calculateMenuPosition();
             const scrollableParent = this.#findScrollableParent(this.tooltipRef()?.nativeElement);
             scrollableParent.addEventListener('scroll', () => this.calculateMenuPosition(), { signal });
-            document.addEventListener('resize', () => this.calculateMenuPosition(), { signal });
+            this.#document.addEventListener('resize', () => this.calculateMenuPosition(), { signal });
         }, ...(ngDevMode ? [{ debugName: "calcPositionEffect" }] : []));
         this.scrollableStyles = ['scroll', 'auto'];
     }
+    #document;
     #BASE_SPACE;
     #findScrollableParent(element) {
         let parent = element.parentElement;
@@ -5105,7 +5111,7 @@ class ShipTooltipComponent {
             }
             parent = parent.parentElement;
         }
-        return document.documentElement;
+        return this.#document.documentElement;
     }
     eventClose($event) {
         $event.stopPropagation();
@@ -5349,7 +5355,7 @@ class ShipVirtualScrollComponent {
     <div class="viewport" #viewport (scroll)="onScroll()">
       <div class="total-height" [style.height]="totalHeight() + 'px'"></div>
       <div class="items-container" [style.transform]="'translateY(' + translateY() + 'px)'">
-        <ng-content></ng-content>
+        <ng-content />
       </div>
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -5363,7 +5369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
     <div class="viewport" #viewport (scroll)="onScroll()">
       <div class="total-height" [style.height]="totalHeight() + 'px'"></div>
       <div class="items-container" [style.transform]="'translateY(' + translateY() + 'px)'">
-        <ng-content></ng-content>
+        <ng-content />
       </div>
     </div>
   `,
@@ -5500,9 +5506,9 @@ class ShipTooltipWrapper {
         this.#positionAbort?.abort();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipTooltipWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: ShipTooltipWrapper, isStandalone: true, selector: "ship-tooltip-wrapper", inputs: { positionAnchorName: { classPropertyName: "positionAnchorName", publicName: "positionAnchorName", isSignal: true, isRequired: true, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.popover": "\"auto\"", "style.position-anchor": "positionAnchorName()", "class.below": "isBelow()" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: ShipTooltipWrapper, isStandalone: true, selector: "ship-tooltip-wrapper", inputs: { positionAnchorName: { classPropertyName: "positionAnchorName", publicName: "positionAnchorName", isSignal: true, isRequired: true, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.popover": "\"manual\"", "style.position-anchor": "positionAnchorName()", "class.below": "isBelow()" } }, ngImport: i0, template: `
     <div class="tooltip-content">
-      <ng-content></ng-content>
+      <ng-content />
     </div>
   `, isInline: true }); }
 }
@@ -5513,12 +5519,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     standalone: true,
                     template: `
     <div class="tooltip-content">
-      <ng-content></ng-content>
+      <ng-content />
     </div>
   `,
                     host: {
                         role: 'tooltip',
-                        '[attr.popover]': '"auto"',
+                        '[attr.popover]': '"manual"',
                         '[style.position-anchor]': 'positionAnchorName()',
                         '[class.below]': 'isBelow()',
                     },
@@ -5533,6 +5539,7 @@ class ShipTooltipDirective {
         this.#environmentInjector = inject(EnvironmentInjector);
         this.#renderer = inject(Renderer2);
         this.#projectedViewRef = null;
+        this.DEBOUNCE_DELAY = 500;
         this.anchorName = `--${generateUniqueId()}`;
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     }
@@ -5542,14 +5549,31 @@ class ShipTooltipDirective {
     #renderer;
     #projectedViewRef;
     onMouseEnter() {
-        if (openRef?.component !== this) {
+        if (openRef?.component.anchorName !== this.anchorName) {
             this.cleanupTooltip();
         }
+        this.cancelCleanupTimer();
         queueMicrotask(() => this.showTooltip());
     }
+    onMouseLeave() {
+        this.startCleanupTimer();
+    }
     ngOnDestroy() {
+        this.cancelCleanupTimer();
         this.cleanupTooltip();
     }
+    startCleanupTimer() {
+        this.cancelCleanupTimer();
+        this.debounceTimer = setTimeout(() => {
+            this.cleanupTooltip();
+        }, this.DEBOUNCE_DELAY);
+    }
+    cancelCleanupTimer() {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+    }
     showTooltip() {
         if (openRef?.wrapperComponentRef || !this.shTooltip())
             return;
@@ -5577,12 +5601,19 @@ class ShipTooltipDirective {
         openRef.wrapperComponentRef.setInput('anchorEl', this.#elementRef);
         openRef.wrapperComponentRef?.setInput('isOpen', this.isOpen);
         openRef.wrapperComponentRef.changeDetectorRef.detectChanges();
+        openRef.wrapperComponentRef.location.nativeElement.addEventListener('mouseenter', () => {
+            this.cancelCleanupTimer();
+        });
+        openRef.wrapperComponentRef.location.nativeElement.addEventListener('mouseleave', () => {
+            this.startCleanupTimer();
+        });
         setTimeout(() => {
             this.isOpen.set(true);
         });
     }
     cleanupTooltip() {
         if (openRef?.wrapperComponentRef) {
+            openRef.component.cancelCleanupTimer();
             openRef.wrapperComponentRef.destroy();
             openRef.component.isOpen.set(false);
             openRef = null;
@@ -5593,7 +5624,7 @@ class ShipTooltipDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: ShipTooltipDirective, isStandalone: true, selector: "[shTooltip]", inputs: { shTooltip: { classPropertyName: "shTooltip", publicName: "shTooltip", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()" }, properties: { "style.anchor-name": "anchorName", "class.active": "isOpen()" }, classAttribute: "tooltip" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: ShipTooltipDirective, isStandalone: true, selector: "[shTooltip]", inputs: { shTooltip: { classPropertyName: "shTooltip", publicName: "shTooltip", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "style.anchor-name": "anchorName", "class.active": "isOpen()" }, classAttribute: "tooltip" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ShipTooltipDirective, decorators: [{
             type: Directive,
@@ -5609,6 +5640,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         }], propDecorators: { onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
             }] } });
 
 /*