@ship-ui/core 0.17.10 → 0.17.12

package/assets/mcp/components.json

@@ -570,7 +570,7 @@
     "examples": [
       {
         "name": "toggle-card-disallowed",
-        "html": "<sh-toggle-card [disableToggle]=\"true\" [isActive]=\"true\">\n  <ng-container title>Advanced options</ng-container>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n</sh-toggle-card>\n",
+        "html": "<sh-toggle-card [disableToggle]=\"true\">\n  <ng-container title>Advanced options</ng-container>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n</sh-toggle-card>\n",
         "ts": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { ShipToggleCard } from 'ship-ui';\n\n@Component({\n  selector: 'app-toggle-card-disallowed-example',\n  standalone: true,\n  imports: [ShipToggleCard],\n  templateUrl: './toggle-card-disallowed.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleCardDisallowedExampleComponent {}\n"
       },
       {
@@ -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": ""
       },
@@ -1658,7 +1669,7 @@
         "name": "isActive",
         "type": "boolean",
         "description": "",
-        "defaultValue": "false"
+        "defaultValue": ""
       }
     ],
     "outputs": [],

package/fesm2022/ship-ui-core.mjs

@@ -6452,8 +6452,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
 
 class ShipToggleCard {
     constructor() {
-        this.isActive = model(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
         this.disableToggle = input(false, ...(ngDevMode ? [{ debugName: "disableToggle" }] : []));
+        this.isActive = model(...(ngDevMode ? [undefined, { debugName: "isActive" }] : []));
+        this.#disabledEffect = effect(() => {
+            if (this.disableToggle()) {
+                this.isActive.set(true);
+            }
+        }, ...(ngDevMode ? [{ debugName: "#disabledEffect" }] : []));
         this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
         this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
         this.hostClasses = shipComponentClasses('card', {
@@ -6461,11 +6466,12 @@ class ShipToggleCard {
             variant: this.variant,
         });
     }
+    #disabledEffect;
     toggle() {
         this.isActive.set(!this.isActive());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipToggleCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipToggleCard, isStandalone: true, selector: "sh-toggle-card", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, disableToggle: { classPropertyName: "disableToggle", publicName: "disableToggle", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isActive: "isActiveChange" }, host: { properties: { "class.active": "isActive()", "class": "hostClasses()" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipToggleCard, isStandalone: true, selector: "sh-toggle-card", inputs: { disableToggle: { classPropertyName: "disableToggle", publicName: "disableToggle", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isActive: "isActiveChange" }, host: { properties: { "class.active": "isActive()", "class": "hostClasses()" } }, ngImport: i0, template: `
     <h3 (click)="!disableToggle() && toggle()">
       <ng-content select="[title]">Title</ng-content>
 
@@ -6507,7 +6513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         '[class]': 'hostClasses()',
                     },
                 }]
-        }], propDecorators: { isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }, { type: i0.Output, args: ["isActiveChange"] }], disableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableToggle", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+        }], propDecorators: { disableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableToggle", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }, { type: i0.Output, args: ["isActiveChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 class ShipToggle {
     constructor() {
@@ -6892,6 +6898,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 +6963,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 +6995,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 +7013,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 +7022,6 @@ class ShipTooltip {
     #viewContainerRef;
     #environmentInjector;
     #renderer;
-    #projectedViewRef;
     onMouseEnter() {
         if (openRef?.component.anchorName !== this.anchorName) {
             this.cleanupTooltip();
@@ -7030,31 +7049,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 +7084,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 }); }