@ship-ui/core 0.17.14 → 0.17.15

package/assets/mcp/components.json

@@ -1061,6 +1061,12 @@
     ],
     "outputs": [],
     "methods": [
+      {
+        "name": "cancelAnimationFrame",
+        "parameters": "this.rafId);\n    }\n    this.rafId = requestAnimationFrame(this.calculateTooltipPosition);\n  };\n\n  private calculateTooltipPosition = (",
+        "returnType": "void =>",
+        "description": ""
+      },
       {
         "name": "untracked",
         "parameters": "() => {\n      if (this.isOpen() && openRef?.component === this && openRef?.wrapperComponentRef",
@@ -3201,12 +3207,24 @@
       }
     ],
     "methods": [
+      {
+        "name": "onCleanup",
+        "parameters": "() => {\n      const index = ShipMenu.openMenus.indexOf(this);\n      if (index > -1",
+        "returnType": "any",
+        "description": ""
+      },
       {
         "name": "toggleIsOpen",
         "parameters": "event: MouseEvent",
         "returnType": "any",
         "description": ""
       },
+      {
+        "name": "open",
+        "parameters": "",
+        "returnType": "any",
+        "description": ""
+      },
       {
         "name": "nextActiveIndex",
         "parameters": "activeIndex: number",

package/fesm2022/ship-ui-core.mjs

@@ -2663,6 +2663,8 @@ class ShipPopover {
                     }, {
                         signal: this.openAbort?.signal,
                     });
+                    if (!popoverEl.isConnected)
+                        return;
                     popoverEl.showPopover();
                     if (!this.SUPPORTS_ANCHOR) {
                         setTimeout(() => {
@@ -3840,9 +3842,22 @@ class ShipMenu {
         this.activeOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeOptionIndex" }] : []));
         this.inputRef = viewChild('inputRef', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
         this.optionsRef = viewChild('optionsRef', ...(ngDevMode ? [{ debugName: "optionsRef" }] : []));
+        this.openMenusEffect = effect((onCleanup) => {
+            if (this.isOpen()) {
+                ShipMenu.openMenus.push(this);
+            }
+            onCleanup(() => {
+                const index = ShipMenu.openMenus.indexOf(this);
+                if (index > -1) {
+                    ShipMenu.openMenus.splice(index, 1);
+                }
+            });
+        }, ...(ngDevMode ? [{ debugName: "openMenusEffect" }] : []));
         this.options = observeChildren(this.optionsRef, this.customOptionElementSelectors);
         this.optionsEl = computed(() => this.options.signal().filter((x) => !x.disabled), ...(ngDevMode ? [{ debugName: "optionsEl" }] : []));
         this.inputValue = createFormInputSignal(this.inputRef);
+        this.optionsId = generateUniqueId();
+        this.activeOptionId = signal(undefined, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : []));
         this.abortController = null;
         this.optionsEffect = effect(() => {
             if (this.abortController !== null) {
@@ -3884,6 +3899,9 @@ class ShipMenu {
             }
         }, ...(ngDevMode ? [{ debugName: "optionsEffect" }] : []));
         this.keyDownEventListener = (e) => {
+            // Only handle events if this is the most recently opened menu
+            if (ShipMenu.openMenus.at(-1) !== this)
+                return;
             const activeOptionIndex = this.activeOptionIndex();
             if (e.key === 'ArrowDown') {
                 e.preventDefault();
@@ -3896,8 +3914,20 @@ class ShipMenu {
             else if (e.key === 'Enter') {
                 e.preventDefault();
                 if (activeOptionIndex > -1) {
-                    this.activeElements()[activeOptionIndex].click();
-                    queueMicrotask(() => this.close('active'));
+                    const el = this.activeElements()[activeOptionIndex];
+                    const parent = el.parentElement;
+                    // For nested menu's
+                    if (parent?.hasAttribute('trigger')) {
+                        const event = new CustomEvent('ship-menu-open', {
+                            bubbles: true,
+                            cancelable: true,
+                        });
+                        el.dispatchEvent(event);
+                    }
+                    else {
+                        el.click();
+                        queueMicrotask(() => this.close('active'));
+                    }
                 }
             }
             else if (e.key === 'Tab') {
@@ -3920,6 +3950,10 @@ class ShipMenu {
                 this._lastElementList = allOptions;
                 for (let i = 0; i < allOptions.length; i++) {
                     this.#renderer.removeStyle(allOptions[i], 'order');
+                    if (!allOptions[i].id) {
+                        allOptions[i].id = `${this.optionsId}-option-${i}`;
+                    }
+                    allOptions[i].setAttribute('role', 'option');
                 }
                 return;
             }
@@ -3943,31 +3977,61 @@ class ShipMenu {
             }
             this.activeElements.set(optionElements);
             this._lastElementList = optionElements;
+            // Assign IDs to options for ARIA support
+            for (let i = 0; i < optionElements.length; i++) {
+                if (!optionElements[i].id) {
+                    optionElements[i].id = `${this.optionsId}-option-${i}`;
+                }
+                optionElements[i].setAttribute('role', 'option');
+            }
         }, ...(ngDevMode ? [{ debugName: "inputValueEffect" }] : []));
         this.activeOptionIndexEffect = effect(() => {
             const optionElements = this.activeElements();
             const activeOptionIndex = this.activeOptionIndex();
             for (let index = 0; index < optionElements.length; index++) {
                 optionElements[index].classList.remove('active');
+                optionElements[index].removeAttribute('aria-selected');
             }
             if (activeOptionIndex > -1) {
-                optionElements[activeOptionIndex].scrollIntoView({ block: 'center' });
-                optionElements[activeOptionIndex].classList.add('active');
+                const activeOption = optionElements[activeOptionIndex];
+                activeOption.scrollIntoView({ block: 'center' });
+                activeOption.classList.add('active');
+                activeOption.setAttribute('aria-selected', 'true');
+                this.activeOptionId.set(activeOption.id);
+            }
+            else {
+                this.activeOptionId.set(undefined);
             }
         }, ...(ngDevMode ? [{ debugName: "activeOptionIndexEffect" }] : []));
     }
     #document;
     #renderer;
+    static { this.openMenus = []; }
     toggleIsOpen(event) {
         event.preventDefault();
         event.stopPropagation();
         if (this.disabled())
             return;
-        this.isOpen.set(!this.isOpen());
-        if (this.searchable() && this.isOpen()) {
+        if (this.isOpen()) {
+            this.close('fromPopover');
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.disabled())
+            return;
+        this.isOpen.set(true);
+        if (this.searchable()) {
             setTimeout(() => this.inputRef()?.nativeElement.focus());
         }
     }
+    onShipMenuOpen(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.open();
+    }
     #calculateMatchScore(option, input) {
         if (!input)
             return 0;
@@ -4052,6 +4116,7 @@ class ShipMenu {
         const optionElements = this.optionsEl();
         for (let index = 0; index < optionElements.length; index++) {
             optionElements[index].classList.remove('active');
+            optionElements[index].removeAttribute('aria-selected');
         }
     }
     ngOnDestroy() {
@@ -4059,9 +4124,13 @@ class ShipMenu {
             this.abortController.abort();
             this.abortController = null;
         }
+        const index = ShipMenu.openMenus.indexOf(this);
+        if (index > -1) {
+            ShipMenu.openMenus.splice(index, 1);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipMenu, 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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipMenu, 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: { listeners: { "ship-menu-open": "onShipMenuOpen($event)" }, 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"
@@ -4072,7 +4141,15 @@ class ShipMenu {
         closeOnButton: false,
         closeOnEsc: true,
       }">
-      <div trigger [class.is-open]="isOpen()" (click)="toggleIsOpen($event)">
+      <div
+        trigger
+        [class.is-open]="isOpen()"
+        (click)="toggleIsOpen($event)"
+        role="combobox"
+        [attr.aria-expanded]="isOpen()"
+        aria-haspopup="listbox"
+        [attr.aria-controls]="optionsId"
+        [attr.aria-activedescendant]="activeOptionId()">
         <ng-content />
 
         @if (openIndicator()) {
@@ -4082,7 +4159,15 @@ class ShipMenu {
 
       <div class="form-field-wrap">
         <sh-form-field class="small stretch" [class.hidden]="searchable() === false">
-          <input type="text" #inputRef placeholder="Search" />
+          <input
+            type="text"
+            #inputRef
+            placeholder="Search"
+            role="combobox"
+            [attr.aria-expanded]="isOpen()"
+            [attr.aria-controls]="optionsId"
+            [attr.aria-activedescendant]="activeOptionId()"
+            aria-autocomplete="list" />
         </sh-form-field>
       </div>
 
@@ -4090,7 +4175,10 @@ class ShipMenu {
         class="options"
         #optionsRef
         (click)="close('active')"
-        [class.searching]="searchable() && inputValue() !== ''">
+        [class.searching]="searchable() && inputValue() !== ''"
+        role="listbox"
+        [id]="optionsId"
+        [attr.aria-activedescendant]="activeOptionId()">
         <ng-content select="[menu]" />
       </div>
     </sh-popover>
@@ -4112,7 +4200,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
         closeOnButton: false,
         closeOnEsc: true,
       }">
-      <div trigger [class.is-open]="isOpen()" (click)="toggleIsOpen($event)">
+      <div
+        trigger
+        [class.is-open]="isOpen()"
+        (click)="toggleIsOpen($event)"
+        role="combobox"
+        [attr.aria-expanded]="isOpen()"
+        aria-haspopup="listbox"
+        [attr.aria-controls]="optionsId"
+        [attr.aria-activedescendant]="activeOptionId()">
         <ng-content />
 
         @if (openIndicator()) {
@@ -4122,7 +4218,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
 
       <div class="form-field-wrap">
         <sh-form-field class="small stretch" [class.hidden]="searchable() === false">
-          <input type="text" #inputRef placeholder="Search" />
+          <input
+            type="text"
+            #inputRef
+            placeholder="Search"
+            role="combobox"
+            [attr.aria-expanded]="isOpen()"
+            [attr.aria-controls]="optionsId"
+            [attr.aria-activedescendant]="activeOptionId()"
+            aria-autocomplete="list" />
         </sh-form-field>
       </div>
 
@@ -4130,7 +4234,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
         class="options"
         #optionsRef
         (click)="close('active')"
-        [class.searching]="searchable() && inputValue() !== ''">
+        [class.searching]="searchable() && inputValue() !== ''"
+        role="listbox"
+        [id]="optionsId"
+        [attr.aria-activedescendant]="activeOptionId()">
         <ng-content select="[menu]" />
       </div>
     </sh-popover>
@@ -4142,7 +4249,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         '[class.multi-layer]': 'asMultiLayer()',
                     },
                 }]
-        }], propDecorators: { asMultiLayer: [{ type: i0.Input, args: [{ isSignal: true, alias: "asMultiLayer", required: false }] }], openIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "openIndicator", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], customOptionElementSelectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOptionElementSelectors", required: false }] }], keepClickedOptionActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepClickedOptionActive", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }], optionsRef: [{ type: i0.ViewChild, args: ['optionsRef', { isSignal: true }] }] } });
+        }], propDecorators: { asMultiLayer: [{ type: i0.Input, args: [{ isSignal: true, alias: "asMultiLayer", required: false }] }], openIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "openIndicator", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], customOptionElementSelectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOptionElementSelectors", required: false }] }], keepClickedOptionActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepClickedOptionActive", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }], optionsRef: [{ type: i0.ViewChild, args: ['optionsRef', { isSignal: true }] }], onShipMenuOpen: [{
+                type: HostListener,
+                args: ['ship-menu-open', ['$event']]
+            }] } });
 
 class ShipProgressBar {
     constructor() {
@@ -6913,14 +7023,22 @@ class ShipTooltipWrapper {
             if (this.isOpen()) {
                 setTimeout(() => {
                     this.#selfRef.nativeElement.showPopover();
-                    this.calculateTooltipPosition();
+                    this.schedulePositionUpdate();
                 });
             }
             else {
                 this.#selfRef.nativeElement.hidePopover();
             }
         }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
+        this.rafId = null;
+        this.schedulePositionUpdate = () => {
+            if (this.rafId !== null) {
+                cancelAnimationFrame(this.rafId);
+            }
+            this.rafId = requestAnimationFrame(this.calculateTooltipPosition);
+        };
         this.calculateTooltipPosition = () => {
+            this.rafId = null;
             if (!this.anchorEl())
                 return;
             const hostRect = this.anchorEl().nativeElement.getBoundingClientRect();
@@ -6929,7 +7047,9 @@ class ShipTooltipWrapper {
             if (tooltipRect.width === 0 && tooltipRect.height === 0)
                 return;
             const outOfBoundsTop = hostRect.top - tooltipRect.height < 0;
-            this.isBelow.set(outOfBoundsTop);
+            if (this.isBelow() !== outOfBoundsTop) {
+                this.isBelow.set(outOfBoundsTop);
+            }
             if (!this.SUPPORTS_ANCHOR) {
                 const tooltipRect = tooltipEl.getBoundingClientRect();
                 let newTop = hostRect.top - tooltipRect.height;
@@ -6943,9 +7063,17 @@ class ShipTooltipWrapper {
                 if (newLeft < 0) {
                     newLeft = -(tooltipRect.width / 2);
                 }
-                this.#renderer.setStyle(tooltipEl, 'left', `${newLeft}px`);
-                this.#renderer.setStyle(tooltipEl, 'top', `${newTop}px`);
-                this.#renderer.setStyle(tooltipEl, 'position', 'fixed');
+                const leftStyle = `${newLeft}px`;
+                const topStyle = `${newTop}px`;
+                if (tooltipEl.style.left !== leftStyle) {
+                    this.#renderer.setStyle(tooltipEl, 'left', leftStyle);
+                }
+                if (tooltipEl.style.top !== topStyle) {
+                    this.#renderer.setStyle(tooltipEl, 'top', topStyle);
+                }
+                if (tooltipEl.style.position !== 'fixed') {
+                    this.#renderer.setStyle(tooltipEl, 'position', 'fixed');
+                }
             }
         };
     }
@@ -6954,13 +7082,20 @@ class ShipTooltipWrapper {
     #positionAbort;
     ngAfterViewInit() {
         this.#positionAbort = new AbortController();
-        const options = { signal: this.#positionAbort.signal, capture: true };
-        window?.addEventListener('scroll', this.calculateTooltipPosition, options);
-        window?.addEventListener('resize', this.calculateTooltipPosition, { signal: this.#positionAbort.signal });
-        setTimeout(() => this.calculateTooltipPosition());
+        const options = { signal: this.#positionAbort.signal, capture: true, passive: true };
+        window?.addEventListener('scroll', this.schedulePositionUpdate, options);
+        window?.addEventListener('resize', this.schedulePositionUpdate, {
+            signal: this.#positionAbort.signal,
+            passive: true,
+        });
+        this.schedulePositionUpdate();
     }
     ngOnDestroy() {
         this.#positionAbort?.abort();
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipTooltipWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipTooltipWrapper, isStandalone: true, selector: "ship-tooltip-wrapper", inputs: { positionAnchorName: { classPropertyName: "positionAnchorName", publicName: "positionAnchorName", isSignal: true, isRequired: true, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.popover": "\"manual\"", "style.position-anchor": "positionAnchorName()", "class.below": "isBelow()" } }, ngImport: i0, template: `