@ship-ui/core 0.15.15 → 0.15.16

package/fesm2022/ship-ui-core.mjs

@@ -1075,9 +1075,9 @@ class ShipPopoverComponent {
                     }
                 }
                 else {
-                    popoverEl.hidePopover && popoverEl.hidePopover();
-                    this.openAbort?.abort();
                     this.closed.emit();
+                    this.openAbort?.abort();
+                    this.openAbort = null;
                 }
             });
         }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
@@ -1092,12 +1092,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) {
@@ -1144,6 +1140,10 @@ class ShipPopoverComponent {
             this.menuStyle.set(style);
         }
     }
+    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: `
     <div class="trigger" #triggerRef [attr.popovertarget]="id() + 'hello'" (click)="toggleIsOpen($event)">
@@ -1253,7 +1253,6 @@ class ShipFormFieldPopoverComponent {
 
       <sh-popover
         [(isOpen)]="isOpen"
-        [disableOpenByClick]="true"
         (closed)="close()"
         [options]="{
           closeOnButton: false,
@@ -1300,7 +1299,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 +1685,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 +1700,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 +1726,6 @@ class ShipDatepickerInputComponent {
             }
         }, ...(ngDevMode ? [{ debugName: "#inputRefEffect" }] : []));
     }
-    #INIT_DATE;
     #datePipe;
     #inputRef;
     #inputObserver;
@@ -1740,10 +1737,6 @@ class ShipDatepickerInputComponent {
             input.dispatchEvent(new Event('input'));
         }
     }
-    open($event) {
-        $event.stopPropagation();
-        this.isOpen.set(true);
-    }
     close() {
         this.closed.emit(this.internalDate());
     }
@@ -1778,7 +1771,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 +1779,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 +1807,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 +1815,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 +1932,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 +1940,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 +1948,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 +1979,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 +1987,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>