@ship-ui/core 0.15.15 → 0.15.17

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,27 +1064,32 @@ 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();
                         });
                     }
                 }
                 else {
-                    popoverEl.hidePopover && popoverEl.hidePopover();
-                    this.openAbort?.abort();
                     this.closed.emit();
+                    this.openAbort?.abort();
+                    this.openAbort = null;
                 }
             });
         }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
     }
     #document;
-    #BASE_SPACE;
     toggleIsOpen(event) {
         if (!this.disableOpenByClick()) {
             event.preventDefault();
@@ -1092,12 +1098,8 @@ class ShipPopoverComponent {
         }
     }
     eventClose($event) {
-        // console.log('eventClose before', $event);
         if (!this.isOpen())
             return;
-        // console.log('eventClose after', $event);
-        // $event.stopPropagation();
-        // $event.preventDefault();
         this.isOpen.set(false);
     }
     #findScrollableParent(element) {
@@ -1111,41 +1113,68 @@ class ShipPopoverComponent {
         }
         return this.#document.documentElement;
     }
+    #alignLeftUnder(triggerRect) {
+        const newLeft = triggerRect.left;
+        const newTop = triggerRect.bottom + BASE_SPACE;
+        return {
+            left: newLeft,
+            top: newTop,
+        };
+    }
+    #alignTopRight(triggerRect) {
+        const newLeft = triggerRect.right + BASE_SPACE;
+        const newTop = triggerRect.top;
+        return {
+            left: newLeft,
+            top: newTop,
+        };
+    }
+    #alignBottomRight(triggerRect) {
+        const newLeft = triggerRect.right + BASE_SPACE;
+        const newTop = triggerRect.bottom;
+        return {
+            left: newLeft,
+            top: newTop,
+        };
+    }
+    #alignLeftOver(triggerRect) {
+        const newLeft = triggerRect.left;
+        const newTop = triggerRect.bottom - triggerRect.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);
+            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);
+        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>
@@ -1253,7 +1282,6 @@ class ShipFormFieldPopoverComponent {
 
       <sh-popover
         [(isOpen)]="isOpen"
-        [disableOpenByClick]="true"
         (closed)="close()"
         [options]="{
           closeOnButton: false,
@@ -1300,7 +1328,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
       <sh-popover
         [(isOpen)]="isOpen"
-        [disableOpenByClick]="true"
         (closed)="close()"
         [options]="{
           closeOnButton: false,
@@ -1687,7 +1714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
 class ShipDatepickerInputComponent {
     constructor() {
-        this.#INIT_DATE = this.#getUTCDate(new Date());
+        // #INIT_DATE = this.#getUTCDate(new Date());
         this.ngModels = contentChild(NgModel, ...(ngDevMode ? [{ debugName: "ngModels" }] : []));
         this.#datePipe = inject(DatePipe);
         this.#inputRef = signal(null, ...(ngDevMode ? [{ debugName: "#inputRef" }] : []));
@@ -1702,7 +1729,7 @@ class ShipDatepickerInputComponent {
                 return null;
             return this.#datePipe.transform(date, mask);
         }, ...(ngDevMode ? [{ debugName: "_maskedDate" }] : []));
-        this.internalDate = signal(this.#INIT_DATE, ...(ngDevMode ? [{ debugName: "internalDate" }] : []));
+        this.internalDate = signal(null, ...(ngDevMode ? [{ debugName: "internalDate" }] : []));
         this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this.currentClass = classMutationSignal();
         this.#inputObserver = contentProjectionSignal('#input-wrap input');
@@ -1728,7 +1755,6 @@ class ShipDatepickerInputComponent {
             }
         }, ...(ngDevMode ? [{ debugName: "#inputRefEffect" }] : []));
     }
-    #INIT_DATE;
     #datePipe;
     #inputRef;
     #inputObserver;
@@ -1740,10 +1766,6 @@ class ShipDatepickerInputComponent {
             input.dispatchEvent(new Event('input'));
         }
     }
-    open($event) {
-        $event.stopPropagation();
-        this.isOpen.set(true);
-    }
     close() {
         this.closed.emit(this.internalDate());
     }
@@ -1778,7 +1800,7 @@ class ShipDatepickerInputComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDatepickerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipDatepickerInputComponent, isStandalone: true, selector: "sh-datepicker-input", inputs: { masking: { classPropertyName: "masking", publicName: "masking", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", isOpen: "isOpenChange" }, providers: [DatePipe], queries: [{ propertyName: "ngModels", first: true, predicate: NgModel, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <sh-form-field-popover (click)="open($event)" (closed)="close()" [(isOpen)]="isOpen">
+    <sh-form-field-popover (closed)="close()" [(isOpen)]="isOpen">
       <ng-content select="label" ngProjectAs="label" />
 
       <ng-content select="[prefix]" ngProjectAs="[prefix]" />
@@ -1786,7 +1808,7 @@ class ShipDatepickerInputComponent {
 
       <div id="input-wrap" class="input" ngProjectAs="input">
         @if (this.masking()) {
-          <div class="masked-value" (click)="open($event)">
+          <div class="masked-value">
             {{ _maskedDate() }}
           </div>
         }
@@ -1814,7 +1836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     imports: [ShipDatepickerComponent, ShipFormFieldPopoverComponent, ShipIconComponent],
                     providers: [DatePipe],
                     template: `
-    <sh-form-field-popover (click)="open($event)" (closed)="close()" [(isOpen)]="isOpen">
+    <sh-form-field-popover (closed)="close()" [(isOpen)]="isOpen">
       <ng-content select="label" ngProjectAs="label" />
 
       <ng-content select="[prefix]" ngProjectAs="[prefix]" />
@@ -1822,7 +1844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
       <div id="input-wrap" class="input" ngProjectAs="input">
         @if (this.masking()) {
-          <div class="masked-value" (click)="open($event)">
+          <div class="masked-value">
             {{ _maskedDate() }}
           </div>
         }
@@ -1939,10 +1961,6 @@ class ShipDaterangeInputComponent {
         input.dispatchEvent(new Event('input', { bubbles: true }));
         input.dispatchEvent(new Event('change', { bubbles: true }));
     }
-    open($event) {
-        $event.stopPropagation();
-        this.isOpen.set(true);
-    }
     close() {
         this.closed.emit({
             start: this.startDate(),
@@ -1951,11 +1969,7 @@ class ShipDaterangeInputComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDaterangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipDaterangeInputComponent, isStandalone: true, selector: "sh-daterange-input", inputs: { monthsToShow: { classPropertyName: "monthsToShow", publicName: "monthsToShow", isSignal: true, isRequired: false, transformFunction: null }, masking: { classPropertyName: "masking", publicName: "masking", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", isOpen: "isOpenChange" }, providers: [DatePipe], queries: [{ propertyName: "startDateInputs", predicate: ["startDate"], isSignal: true }, { propertyName: "endDateInputs", predicate: ["endDate"], isSignal: true }], ngImport: i0, template: `
-    <sh-form-field-popover
-      [class]="'columns-' + monthsToShow()"
-      (click)="open($event)"
-      (closed)="close()"
-      [(isOpen)]="isOpen">
+    <sh-form-field-popover [class]="'columns-' + monthsToShow()" (closed)="close()" [(isOpen)]="isOpen">
       <ng-content select="label" ngProjectAs="label" />
 
       <ng-content select="[prefix]" ngProjectAs="[prefix]" />
@@ -1963,9 +1977,7 @@ class ShipDaterangeInputComponent {
 
       <div class="input" ngProjectAs="input" #inputWrap>
         @if (this.masking()) {
-          <div class="masked-value" (click)="open($event)">
-            {{ _maskedStartDate() ?? 'N/A' }} - {{ _maskedEndDate() ?? 'N/A' }}
-          </div>
+          <div class="masked-value">{{ _maskedStartDate() ?? 'N/A' }} - {{ _maskedEndDate() ?? 'N/A' }}</div>
         }
         <ng-content select="input" />
       </div>
@@ -1996,11 +2008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     imports: [ShipDatepickerComponent, ShipFormFieldPopoverComponent, ShipIconComponent],
                     providers: [DatePipe],
                     template: `
-    <sh-form-field-popover
-      [class]="'columns-' + monthsToShow()"
-      (click)="open($event)"
-      (closed)="close()"
-      [(isOpen)]="isOpen">
+    <sh-form-field-popover [class]="'columns-' + monthsToShow()" (closed)="close()" [(isOpen)]="isOpen">
       <ng-content select="label" ngProjectAs="label" />
 
       <ng-content select="[prefix]" ngProjectAs="[prefix]" />
@@ -2008,9 +2016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
       <div class="input" ngProjectAs="input" #inputWrap>
         @if (this.masking()) {
-          <div class="masked-value" (click)="open($event)">
-            {{ _maskedStartDate() ?? 'N/A' }} - {{ _maskedEndDate() ?? 'N/A' }}
-          </div>
+          <div class="masked-value">{{ _maskedStartDate() ?? 'N/A' }} - {{ _maskedEndDate() ?? 'N/A' }}</div>
         }
         <ng-content select="input" />
       </div>