@ship-ui/core 0.17.7 → 0.17.9

package/fesm2022/ship-ui-core.mjs

@@ -2709,61 +2709,106 @@ class ShipPopover {
         }
         return this.#document.documentElement;
     }
-    #alignLeftUnder(triggerRect, menuRect) {
-        const newLeft = triggerRect.left;
-        const newTop = triggerRect.bottom + BASE_SPACE;
+    /**
+     * Position generators that mirror the CSS position-try-fallbacks.
+     * Each returns { left, top } for the popover-content in fixed coordinates.
+     */
+    // bottom span-right: below trigger, left edge aligned with trigger left
+    #bottomSpanRight(t, _m) {
+        return { left: t.left, top: t.bottom + BASE_SPACE };
+    }
+    // top span-right: above trigger, left edge aligned with trigger left
+    #topSpanRight(t, m) {
+        return { left: t.left, top: t.top - m.height - BASE_SPACE };
+    }
+    // bottom span-left: below trigger, right edge aligned with trigger right
+    #bottomSpanLeft(t, m) {
+        return { left: t.right - m.width, top: t.bottom + BASE_SPACE };
+    }
+    // top span-left: above trigger, right edge aligned with trigger right
+    #topSpanLeft(t, m) {
+        return { left: t.right - m.width, top: t.top - m.height - BASE_SPACE };
+    }
+    // right span-bottom: to the right of trigger, top edge aligned with trigger top
+    #rightSpanBottom(t, _m) {
+        return { left: t.right + BASE_SPACE, top: t.top };
+    }
+    // left span-bottom: to the left of trigger, top edge aligned with trigger top
+    #leftSpanBottom(t, m) {
+        return { left: t.left - m.width - BASE_SPACE, top: t.top };
+    }
+    // right center: to the right of trigger, vertically centered
+    #rightCenter(t, m) {
+        return { left: t.right + BASE_SPACE, top: t.top + t.height / 2 - m.height / 2 };
+    }
+    // left center: to the left of trigger, vertically centered
+    #leftCenter(t, m) {
+        return { left: t.left - m.width - BASE_SPACE, top: t.top + t.height / 2 - m.height / 2 };
+    }
+    // right span-top: to the right of trigger, bottom edge aligned with trigger bottom
+    #rightSpanTop(t, m) {
+        return { left: t.right + BASE_SPACE, top: t.bottom - m.height };
+    }
+    // left span-top: to the left of trigger, bottom edge aligned with trigger bottom
+    #leftSpanTop(t, m) {
+        return { left: t.left - m.width - BASE_SPACE, top: t.bottom - m.height };
+    }
+    /** Check if a position fits entirely within the viewport */
+    #fitsInViewport(pos, m) {
+        return (pos.left >= 0 &&
+            pos.top >= 0 &&
+            pos.left + m.width <= window.innerWidth &&
+            pos.top + m.height <= window.innerHeight);
+    }
+    /** Clamp a position so the popover stays within the viewport */
+    #clampToViewport(pos, m) {
         return {
-            left: newLeft,
-            top: newTop,
-        };
-    }
-    #alignTopRight(triggerRect, menuRect) {
-        const newLeft = triggerRect.right + BASE_SPACE;
-        const newTop = triggerRect.top;
-        return {
-            left: newLeft,
-            top: newTop,
-        };
-    }
-    #alignBottomRight(triggerRect, menuRect) {
-        const newLeft = triggerRect.right + BASE_SPACE;
-        const newTop = triggerRect.bottom;
-        return {
-            left: newLeft,
-            top: newTop,
-        };
-    }
-    #alignLeftOver(triggerRect, menuRect) {
-        const newLeft = triggerRect.left;
-        const newTop = triggerRect.bottom - triggerRect.height - menuRect.height - BASE_SPACE;
-        return {
-            left: newLeft,
-            top: newTop,
+            left: Math.max(0, Math.min(pos.left, window.innerWidth - m.width)),
+            top: Math.max(0, Math.min(pos.top, window.innerHeight - m.height)),
         };
     }
     #calculateMenuPosition() {
         const triggerRect = this.triggerRef()?.nativeElement.getBoundingClientRect();
         const menuRect = this.popoverContentRef()?.nativeElement.getBoundingClientRect();
-        const tryOrderMultiLayer = [this.#alignTopRight, this.#alignBottomRight];
-        const tryOrderDefault = [this.#alignLeftUnder, this.#alignLeftOver];
+        if (!triggerRect || !menuRect)
+            return;
+        // Mirror the CSS position-try-fallbacks order
+        const tryOrderDefault = [
+            this.#bottomSpanRight,
+            this.#topSpanRight,
+            this.#bottomSpanLeft,
+            this.#topSpanLeft,
+            this.#rightSpanBottom,
+            this.#leftSpanBottom,
+            this.#rightCenter,
+            this.#leftCenter,
+            this.#rightSpanTop,
+            this.#leftSpanTop,
+        ];
+        const tryOrderMultiLayer = [
+            this.#rightSpanBottom,
+            this.#rightSpanTop,
+            this.#leftSpanBottom,
+            this.#leftSpanTop,
+            this.#rightCenter,
+            this.#leftCenter,
+            this.#bottomSpanRight,
+            this.#topSpanRight,
+            this.#bottomSpanLeft,
+            this.#topSpanLeft,
+        ];
         const tryOrder = this.asMultiLayer() ? tryOrderMultiLayer : tryOrderDefault;
-        for (let i = 0; i < tryOrder.length; i++) {
-            const position = tryOrder[i](triggerRect, menuRect);
-            const outOfBoundsRight = position.left + (menuRect?.width || 0) > window.innerWidth;
-            const outOfBoundsBottom = position.top + (menuRect?.height || 0) > window.innerHeight;
-            if (!outOfBoundsRight && !outOfBoundsBottom) {
-                this.menuStyle.set({
-                    left: position.left + 'px',
-                    top: position.top + 'px',
-                });
+        // Try each position, use the first one that fits
+        for (const positionFn of tryOrder) {
+            const pos = positionFn.call(this, triggerRect, menuRect);
+            if (this.#fitsInViewport(pos, menuRect)) {
+                this.menuStyle.set({ left: pos.left + 'px', top: pos.top + 'px' });
                 return;
             }
         }
-        const fallbackPosition = tryOrder[0](triggerRect, menuRect);
-        this.menuStyle.set({
-            left: fallbackPosition.left + 'px',
-            top: fallbackPosition.top + 'px',
-        });
+        // If nothing fits perfectly, use the first position clamped to viewport
+        const fallback = this.#clampToViewport(tryOrder[0].call(this, triggerRect, menuRect), menuRect);
+        this.menuStyle.set({ left: fallback.left + 'px', top: fallback.top + 'px' });
     }
     ngOnDestroy() {
         this.openAbort?.abort();
@@ -6408,7 +6453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
 class ShipToggleCard {
     constructor() {
         this.isActive = model(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
-        this.disallowToggle = input(false, ...(ngDevMode ? [{ debugName: "disallowToggle" }] : []));
+        this.disableToggle = input(false, ...(ngDevMode ? [{ debugName: "disableToggle" }] : []));
         this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
         this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
         this.hostClasses = shipComponentClasses('card', {
@@ -6416,20 +6461,15 @@ class ShipToggleCard {
             variant: this.variant,
         });
     }
-    ngOnInit() {
-        if (this.disallowToggle()) {
-            this.isActive.set(true);
-        }
-    }
     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 }, disallowToggle: { classPropertyName: "disallowToggle", publicName: "disallowToggle", 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)="disallowToggle() || toggle()">
+    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: `
+    <h3 (click)="!disableToggle() && toggle()">
       <ng-content select="[title]">Title</ng-content>
 
-      @if (!disallowToggle()) {
+      @if (!disableToggle()) {
         <sh-icon class="toggle-icon">caret-down</sh-icon>
       }
     </h3>
@@ -6447,10 +6487,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                     selector: 'sh-toggle-card',
                     imports: [ShipIcon],
                     template: `
-    <h3 (click)="disallowToggle() || toggle()">
+    <h3 (click)="!disableToggle() && toggle()">
       <ng-content select="[title]">Title</ng-content>
 
-      @if (!disallowToggle()) {
+      @if (!disableToggle()) {
         <sh-icon class="toggle-icon">caret-down</sh-icon>
       }
     </h3>
@@ -6467,7 +6507,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"] }], disallowToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "disallowToggle", 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: { 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 }] }] } });
 
 class ShipToggle {
     constructor() {