@ship-ui/core 0.15.16 → 0.15.18

package/fesm2022/ship-ui-core.mjs

@@ -1016,6 +1016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
+const BASE_SPACE = 4;
 const SCROLLABLE_STYLES = ['scroll', 'auto'];
 const DEFAULT_OPTIONS = {
     width: undefined,
@@ -1026,7 +1027,6 @@ 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" }] : []));
         this.disableOpenByClick = input(false, ...(ngDevMode ? [{ debugName: "disableOpenByClick" }] : []));
@@ -1039,6 +1039,7 @@ class ShipPopoverComponent {
         }), ...(ngDevMode ? [{ debugName: "defaultOptionMerge" }] : []));
         this.triggerRef = viewChild.required('triggerRef');
         this.popoverRef = viewChild('popoverRef', ...(ngDevMode ? [{ debugName: "popoverRef" }] : []));
+        this.popoverContentRef = viewChild('popoverContentRef', ...(ngDevMode ? [{ debugName: "popoverContentRef" }] : []));
         this.id = signal('--' + generateUniqueId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
         this.menuStyle = signal(null, ...(ngDevMode ? [{ debugName: "menuStyle" }] : []));
         this.openAbort = null;
@@ -1046,16 +1047,16 @@ class ShipPopoverComponent {
             const open = this.isOpen();
             queueMicrotask(() => {
                 const popoverEl = this.popoverRef()?.nativeElement;
-                if (!popoverEl)
+                if (!popoverEl) {
+                    this.openAbort?.abort();
+                    this.openAbort = null;
                     return;
+                }
                 if (open) {
                     if (this.openAbort) {
                         this.openAbort.abort();
                     }
                     this.openAbort = new AbortController();
-                    const abortOptions = {
-                        signal: this.openAbort?.signal,
-                    };
                     this.#document.addEventListener('keydown', (e) => {
                         if (e.key === 'Escape' && !this.defaultOptionMerge().closeOnEsc) {
                             e.preventDefault();
@@ -1063,13 +1064,19 @@ class ShipPopoverComponent {
                         if (e.key === 'Escape' && this.defaultOptionMerge().closeOnEsc) {
                             this.isOpen.set(false);
                         }
-                    }, abortOptions);
+                    }, {
+                        signal: this.openAbort?.signal,
+                    });
                     popoverEl.showPopover();
                     if (!this.SUPPORTS_ANCHOR) {
                         setTimeout(() => {
                             const scrollableParent = this.#findScrollableParent(popoverEl);
-                            scrollableParent.addEventListener('scroll', () => this.#calculateMenuPosition(), abortOptions);
-                            window?.addEventListener('resize', () => this.#calculateMenuPosition(), abortOptions);
+                            scrollableParent.addEventListener('scroll', () => this.#calculateMenuPosition(), {
+                                signal: this.openAbort?.signal,
+                            });
+                            window?.addEventListener('resize', () => this.#calculateMenuPosition(), {
+                                signal: this.openAbort?.signal,
+                            });
                             this.#calculateMenuPosition();
                         });
                     }
@@ -1083,7 +1090,6 @@ class ShipPopoverComponent {
         }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
     }
     #document;
-    #BASE_SPACE;
     toggleIsOpen(event) {
         if (!this.disableOpenByClick()) {
             event.preventDefault();
@@ -1107,45 +1113,68 @@ class ShipPopoverComponent {
         }
         return this.#document.documentElement;
     }
+    #alignLeftUnder(triggerRect, menuRect) {
+        const newLeft = triggerRect.left;
+        const newTop = triggerRect.bottom + BASE_SPACE;
+        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,
+        };
+    }
     #calculateMenuPosition() {
         const triggerRect = this.triggerRef()?.nativeElement.getBoundingClientRect();
-        const menuRect = this.popoverRef()?.nativeElement.getBoundingClientRect();
-        if (!menuRect)
-            return;
-        const actionLeftInViewport = triggerRect.left;
-        const actionBottomInViewport = triggerRect.bottom;
-        let newLeft = actionLeftInViewport;
-        let newTop = actionBottomInViewport + this.#BASE_SPACE;
-        const outOfBoundsRight = newLeft + menuRect.width > window?.innerWidth;
-        const outOfBoundsBottom = newTop + menuRect.height > window?.innerHeight;
-        if (!this.SUPPORTS_ANCHOR) {
-            newLeft = actionLeftInViewport;
-            newTop = actionBottomInViewport + this.#BASE_SPACE;
-            if (outOfBoundsBottom) {
-                const _newTop = triggerRect.top - menuRect.height - this.#BASE_SPACE;
-                const outOfBoundsTop = _newTop < 0;
-                if (!outOfBoundsTop)
-                    newTop = _newTop;
-            }
-            if (outOfBoundsRight) {
-                newLeft = triggerRect.right - menuRect.width;
-                if (newLeft < 0) {
-                    newLeft = 0;
-                }
+        const menuRect = this.popoverContentRef()?.nativeElement.getBoundingClientRect();
+        const tryOrderMultiLayer = [this.#alignTopRight, this.#alignBottomRight];
+        const tryOrderDefault = [this.#alignLeftUnder, this.#alignLeftOver];
+        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',
+                });
+                return;
             }
-            const style = {
-                left: newLeft + 'px',
-                top: newTop + 'px',
-            };
-            this.menuStyle.set(style);
         }
+        const fallbackPosition = tryOrder[0](triggerRect, menuRect);
+        this.menuStyle.set({
+            left: fallbackPosition.left + 'px',
+            top: fallbackPosition.top + 'px',
+        });
     }
     ngOnDestroy() {
         this.openAbort?.abort();
         this.openAbort = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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 }, { propertyName: "popoverContentRef", first: true, predicate: ["popoverContentRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="trigger" #triggerRef [attr.popovertarget]="id() + 'hello'" (click)="toggleIsOpen($event)">
       <div class="trigger-wrapper">
         <ng-content select="[trigger]" />
@@ -1158,7 +1187,7 @@ class ShipPopoverComponent {
     @if (isOpen()) {
       <div [attr.id]="id() + 'hello'" popover="manual" #popoverRef class="popover">
         <div class="overlay" (click)="eventClose($event)"></div>
-        <div class="popover-content" [style.position-anchor]="id()" [style]="menuStyle()">
+        <div class="popover-content" #popoverContentRef [style.position-anchor]="id()" [style]="menuStyle()">
           <ng-content />
         </div>
       </div>
@@ -1183,7 +1212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
     @if (isOpen()) {
       <div [attr.id]="id() + 'hello'" popover="manual" #popoverRef class="popover">
         <div class="overlay" (click)="eventClose($event)"></div>
-        <div class="popover-content" [style.position-anchor]="id()" [style]="menuStyle()">
+        <div class="popover-content" #popoverContentRef [style.position-anchor]="id()" [style]="menuStyle()">
           <ng-content />
         </div>
       </div>