@ship-ui/core 0.15.13 → 0.15.15

package/fesm2022/ship-ui-core.mjs

@@ -1038,56 +1038,66 @@ class ShipPopoverComponent {
             ...this.options(),
         }), ...(ngDevMode ? [{ debugName: "defaultOptionMerge" }] : []));
         this.triggerRef = viewChild.required('triggerRef');
-        this.popoverRef = viewChild.required('popoverRef');
+        this.popoverRef = viewChild('popoverRef', ...(ngDevMode ? [{ debugName: "popoverRef" }] : []));
         this.id = signal('--' + generateUniqueId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
         this.menuStyle = signal(null, ...(ngDevMode ? [{ debugName: "menuStyle" }] : []));
         this.openAbort = null;
         this.openEffect = effect(() => {
-            const popoverEl = this.popoverRef()?.nativeElement;
             const open = this.isOpen();
-            if (open) {
-                if (this.openAbort) {
-                    this.openAbort.abort();
-                }
-                this.openAbort = new AbortController();
-                const abortOptions = {
-                    signal: this.openAbort?.signal,
-                };
-                popoverEl?.showPopover();
-                this.#document.addEventListener('keydown', (e) => {
-                    if (e.key === 'Escape' && !this.defaultOptionMerge().closeOnEsc) {
-                        e.preventDefault();
+            queueMicrotask(() => {
+                const popoverEl = this.popoverRef()?.nativeElement;
+                if (!popoverEl)
+                    return;
+                if (open) {
+                    if (this.openAbort) {
+                        this.openAbort.abort();
                     }
-                    if (e.key === 'Escape' && this.defaultOptionMerge().closeOnEsc) {
-                        this.isOpen.set(false);
+                    this.openAbort = new AbortController();
+                    const abortOptions = {
+                        signal: this.openAbort?.signal,
+                    };
+                    this.#document.addEventListener('keydown', (e) => {
+                        if (e.key === 'Escape' && !this.defaultOptionMerge().closeOnEsc) {
+                            e.preventDefault();
+                        }
+                        if (e.key === 'Escape' && this.defaultOptionMerge().closeOnEsc) {
+                            this.isOpen.set(false);
+                        }
+                    }, abortOptions);
+                    popoverEl.showPopover();
+                    if (!this.SUPPORTS_ANCHOR) {
+                        setTimeout(() => {
+                            const scrollableParent = this.#findScrollableParent(popoverEl);
+                            scrollableParent.addEventListener('scroll', () => this.#calculateMenuPosition(), abortOptions);
+                            window?.addEventListener('resize', () => this.#calculateMenuPosition(), abortOptions);
+                            this.#calculateMenuPosition();
+                        });
                     }
-                }, abortOptions);
-                setTimeout(() => {
-                    const scrollableParent = this.#findScrollableParent(this.popoverRef()?.nativeElement);
-                    scrollableParent.addEventListener('scroll', () => this.#calculateMenuPosition(), abortOptions);
-                    window?.addEventListener('resize', () => this.#calculateMenuPosition(), abortOptions);
-                    this.#calculateMenuPosition();
-                });
-            }
-            else {
-                popoverEl.hidePopover && popoverEl.hidePopover();
-                this.openAbort?.abort();
-                this.closed.emit();
-            }
+                }
+                else {
+                    popoverEl.hidePopover && popoverEl.hidePopover();
+                    this.openAbort?.abort();
+                    this.closed.emit();
+                }
+            });
         }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
     }
     #document;
     #BASE_SPACE;
     toggleIsOpen(event) {
-        event.preventDefault();
-        event.stopPropagation();
         if (!this.disableOpenByClick()) {
+            event.preventDefault();
+            event.stopPropagation();
             this.isOpen.set(!this.isOpen());
         }
     }
     eventClose($event) {
-        $event.stopPropagation();
-        $event.preventDefault();
+        // console.log('eventClose before', $event);
+        if (!this.isOpen())
+            return;
+        // console.log('eventClose after', $event);
+        // $event.stopPropagation();
+        // $event.preventDefault();
         this.isOpen.set(false);
     }
     #findScrollableParent(element) {
@@ -1104,6 +1114,8 @@ class ShipPopoverComponent {
     #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;
@@ -1133,8 +1145,8 @@ class ShipPopoverComponent {
         }
     }
     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.2.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 (click)="toggleIsOpen($event)">
+    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)">
       <div class="trigger-wrapper">
         <ng-content select="[trigger]" />
         <ng-content select="button" />
@@ -1143,10 +1155,14 @@ class ShipPopoverComponent {
       <div class="trigger-anchor" [style.anchor-name]="id()"></div>
     </div>
 
-    <div popover #popoverRef class="popover" [style.position-anchor]="id()" [style]="menuStyle()">
-      <div class="overlay" (click)="isOpen() && eventClose($event)"></div>
-      <ng-content />
-    </div>
+    @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()">
+          <ng-content />
+        </div>
+      </div>
+    }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipPopoverComponent, decorators: [{
@@ -1155,7 +1171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     selector: 'sh-popover',
                     imports: [],
                     template: `
-    <div class="trigger" #triggerRef (click)="toggleIsOpen($event)">
+    <div class="trigger" #triggerRef [attr.popovertarget]="id() + 'hello'" (click)="toggleIsOpen($event)">
       <div class="trigger-wrapper">
         <ng-content select="[trigger]" />
         <ng-content select="button" />
@@ -1164,10 +1180,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
       <div class="trigger-anchor" [style.anchor-name]="id()"></div>
     </div>
 
-    <div popover #popoverRef class="popover" [style.position-anchor]="id()" [style]="menuStyle()">
-      <div class="overlay" (click)="isOpen() && eventClose($event)"></div>
-      <ng-content />
-    </div>
+    @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()">
+          <ng-content />
+        </div>
+      </div>
+    }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
@@ -2513,7 +2533,7 @@ class ShipMenuComponent {
         this.closed = output();
         this.searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
         this.activeOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeOptionIndex" }] : []));
-        this.inputRef = viewChild('input', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+        this.inputRef = viewChild('inputRef', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
         this.optionsRef = viewChild('optionsRef', ...(ngDevMode ? [{ debugName: "optionsRef" }] : []));
         this.options = observeChildren(this.optionsRef, this.customOptionElementSelectors);
         this.optionsEl = computed(() => this.options.signal().filter((x) => !x.disabled), ...(ngDevMode ? [{ debugName: "optionsEl" }] : []));
@@ -2616,6 +2636,16 @@ class ShipMenuComponent {
         }, ...(ngDevMode ? [{ debugName: "activeOptionIndexEffect" }] : []));
     }
     #renderer;
+    toggleIsOpen(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled())
+            return;
+        this.isOpen.set(!this.isOpen());
+        if (this.searchable() && this.isOpen()) {
+            setTimeout(() => this.inputRef()?.nativeElement.focus());
+        }
+    }
     #calculateMatchScore(option, input) {
         if (!input)
             return 0;
@@ -2709,7 +2739,7 @@ class ShipMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipMenuComponent, isStandalone: true, selector: "sh-menu", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, openIndicator: { classPropertyName: "openIndicator", publicName: "openIndicator", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, customOptionElementSelectors: { classPropertyName: "customOptionElementSelectors", publicName: "customOptionElementSelectors", isSignal: true, isRequired: false, transformFunction: null }, keepClickedOptionActive: { classPropertyName: "keepClickedOptionActive", publicName: "keepClickedOptionActive", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.disabled": "disabled()", "class.has-search": "searchable()", "class.multi-layer": "asMultiLayer()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "optionsRef", first: true, predicate: ["optionsRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipMenuComponent, isStandalone: true, selector: "sh-menu", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, openIndicator: { classPropertyName: "openIndicator", publicName: "openIndicator", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, customOptionElementSelectors: { classPropertyName: "customOptionElementSelectors", publicName: "customOptionElementSelectors", isSignal: true, isRequired: false, transformFunction: null }, keepClickedOptionActive: { classPropertyName: "keepClickedOptionActive", publicName: "keepClickedOptionActive", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.disabled": "disabled()", "class.has-search": "searchable()", "class.multi-layer": "asMultiLayer()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "optionsRef", first: true, predicate: ["optionsRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <sh-popover
       #formFieldWrapper
       [(isOpen)]="isOpen"
@@ -2720,7 +2750,7 @@ class ShipMenuComponent {
         closeOnButton: false,
         closeOnEsc: true,
       }">
-      <div trigger [class.is-open]="isOpen()" (click)="!disabled() && isOpen.set(true)">
+      <div trigger [class.is-open]="isOpen()" (click)="toggleIsOpen($event)">
         <ng-content />
 
         @if (openIndicator()) {
@@ -2730,7 +2760,7 @@ class ShipMenuComponent {
 
       <div class="form-field-wrap">
         <sh-form-field class="small stretch" [class.hidden]="searchable() === false">
-          <input type="text" #input placeholder="Search" />
+          <input type="text" #inputRef placeholder="Search" />
         </sh-form-field>
       </div>
 
@@ -2760,7 +2790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
         closeOnButton: false,
         closeOnEsc: true,
       }">
-      <div trigger [class.is-open]="isOpen()" (click)="!disabled() && isOpen.set(true)">
+      <div trigger [class.is-open]="isOpen()" (click)="toggleIsOpen($event)">
         <ng-content />
 
         @if (openIndicator()) {
@@ -2770,7 +2800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
       <div class="form-field-wrap">
         <sh-form-field class="small stretch" [class.hidden]="searchable() === false">
-          <input type="text" #input placeholder="Search" />
+          <input type="text" #inputRef placeholder="Search" />
         </sh-form-field>
       </div>