@ship-ui/core 0.17.10 → 0.17.11

package/assets/mcp/components.json

@@ -1046,13 +1046,24 @@
         "type": "boolean",
         "description": "",
         "defaultValue": "false"
+      },
+      {
+        "name": "content",
+        "type": "string | TemplateRef<any> | null | undefined",
+        "description": ""
+      },
+      {
+        "name": "close",
+        "type": "() => void",
+        "description": "",
+        "defaultValue": "("
       }
     ],
     "outputs": [],
     "methods": [
       {
         "name": "untracked",
-        "parameters": "() => {\n      if (this.isOpen()",
+        "parameters": "() => {\n      if (this.isOpen() && openRef?.component === this && openRef?.wrapperComponentRef",
         "returnType": "any",
         "description": ""
       },

package/fesm2022/ship-ui-core.mjs

@@ -6892,6 +6892,12 @@ class ShipTooltipWrapper {
         this.positionAnchorName = input.required(...(ngDevMode ? [{ debugName: "positionAnchorName" }] : []));
         this.anchorEl = input.required(...(ngDevMode ? [{ debugName: "anchorEl" }] : []));
         this.isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
+        this.close = input(() => { }, ...(ngDevMode ? [{ debugName: "close" }] : []));
+        this.tooltipContext = {
+            close: () => this.close()(),
+        };
+        this.isTemplate = computed(() => this.content() instanceof TemplateRef, ...(ngDevMode ? [{ debugName: "isTemplate" }] : []));
         this.#selfRef = inject((ElementRef));
         this.#renderer = inject(Renderer2);
         this.#positionAbort = null;
@@ -6951,20 +6957,29 @@ class ShipTooltipWrapper {
         this.#positionAbort?.abort();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipTooltipWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", 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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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 }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", 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 />
+      @if (isTemplate()) {
+        <ng-container *ngTemplateOutlet="$any(content()); context: { $implicit: tooltipContext }" />
+      } @else {
+        {{ content() }}
+      }
     </div>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipTooltipWrapper, decorators: [{
             type: Component,
             args: [{
                     selector: 'ship-tooltip-wrapper',
                     standalone: true,
+                    imports: [NgTemplateOutlet],
                     template: `
     <div class="tooltip-content">
-      <ng-content />
+      @if (isTemplate()) {
+        <ng-container *ngTemplateOutlet="$any(content()); context: { $implicit: tooltipContext }" />
+      } @else {
+        {{ content() }}
+      }
     </div>
   `,
                     host: {
@@ -6974,17 +6989,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         '[class.below]': 'isBelow()',
                     },
                 }]
-        }], propDecorators: { positionAnchorName: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionAnchorName", required: true }] }], anchorEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorEl", required: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }] } });
+        }], propDecorators: { positionAnchorName: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionAnchorName", required: true }] }], anchorEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorEl", required: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], close: [{ type: i0.Input, args: [{ isSignal: true, alias: "close", required: false }] }] } });
 let openRef = null;
 class ShipTooltip {
     constructor() {
         this.shTooltip = input.required(...(ngDevMode ? [{ debugName: "shTooltip" }] : []));
         this.#contentReplacedEffect = effect(() => {
-            this.shTooltip();
+            const content = this.shTooltip();
             untracked(() => {
-                if (this.isOpen()) {
-                    this.cleanupTooltip();
-                    this.showTooltip();
+                if (this.isOpen() && openRef?.component === this && openRef?.wrapperComponentRef) {
+                    openRef.wrapperComponentRef.setInput('content', content);
+                    openRef.wrapperComponentRef.changeDetectorRef.detectChanges();
                 }
             });
         }, ...(ngDevMode ? [{ debugName: "#contentReplacedEffect" }] : []));
@@ -6992,7 +7007,6 @@ class ShipTooltip {
         this.#viewContainerRef = inject(ViewContainerRef);
         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" }] : []));
@@ -7002,7 +7016,6 @@ class ShipTooltip {
     #viewContainerRef;
     #environmentInjector;
     #renderer;
-    #projectedViewRef;
     onMouseEnter() {
         if (openRef?.component.anchorName !== this.anchorName) {
             this.cleanupTooltip();
@@ -7030,31 +7043,23 @@ class ShipTooltip {
         }
     }
     showTooltip() {
-        if (openRef?.wrapperComponentRef || !this.shTooltip())
-            return;
-        let nodesToProject;
-        const content = this.shTooltip();
-        if (typeof content === 'string') {
-            nodesToProject = [[this.#renderer.createText(content)]];
-        }
-        else if (content instanceof TemplateRef) {
-            this.#projectedViewRef = content.createEmbeddedView({});
-            this.#projectedViewRef.detectChanges();
-            nodesToProject = [this.#projectedViewRef.rootNodes];
-        }
-        else {
+        if (openRef?.wrapperComponentRef || !this.shTooltip()) {
+            if (openRef?.component === this && openRef?.wrapperComponentRef) {
+                openRef.wrapperComponentRef.setInput('content', this.shTooltip());
+            }
             return;
         }
         openRef = {
             wrapperComponentRef: this.#viewContainerRef.createComponent(ShipTooltipWrapper, {
                 environmentInjector: this.#environmentInjector,
-                projectableNodes: nodesToProject,
             }),
             component: this,
         };
         openRef.wrapperComponentRef.setInput('positionAnchorName', this.anchorName);
         openRef.wrapperComponentRef.setInput('anchorEl', this.#elementRef);
-        openRef.wrapperComponentRef?.setInput('isOpen', this.isOpen);
+        openRef.wrapperComponentRef.setInput('isOpen', this.isOpen);
+        openRef.wrapperComponentRef.setInput('content', this.shTooltip());
+        openRef.wrapperComponentRef.setInput('close', () => this.cleanupTooltip());
         openRef.wrapperComponentRef.changeDetectorRef.detectChanges();
         openRef.wrapperComponentRef.location.nativeElement.addEventListener('mouseenter', () => {
             this.cancelCleanupTimer();
@@ -7073,10 +7078,6 @@ class ShipTooltip {
             openRef.component.isOpen.set(false);
             openRef = null;
         }
-        if (this.#projectedViewRef) {
-            this.#projectedViewRef.destroy();
-            this.#projectedViewRef = null;
-        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: ShipTooltip, 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 }); }