@ship-ui/core 0.15.22 → 0.15.24

package/fesm2022/ship-ui-core.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, Renderer2, ChangeDetectionStrategy, Component, signal, DestroyRef, InjectionToken, input, computed, viewChild, effect, HostListener, NgModule, Injectable, DOCUMENT, model, output, ApplicationRef, createComponent, isSignal, OutputEmitterRef, PLATFORM_ID, ViewChild, contentChild, contentChildren, afterNextRender, assertInInjectionContext, Injector, HostBinding, TemplateRef, runInInjectionContext, Directive, ChangeDetectorRef, viewChildren, ViewContainerRef, EnvironmentInjector } from '@angular/core';
 import { isPlatformBrowser, JsonPipe, DatePipe, NgTemplateOutlet } from '@angular/common';
-import { ShipCardComponent as ShipCardComponent$1, ShipIconComponent as ShipIconComponent$1, ShipButtonComponent as ShipButtonComponent$1 } from 'ship-ui';
 import { NgModel } from '@angular/forms';
 import { SIGNAL } from '@angular/core/primitives/signals';
 
@@ -1509,13 +1508,13 @@ class ShipBlueprintComponent {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipCardComponent$1, selector: "sh-card" }, { kind: "component", type: ShipIconComponent$1, selector: "sh-icon" }, { kind: "component", type: ShipButtonComponent$1, selector: "[shButton]" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipCardComponent, selector: "sh-card" }, { kind: "component", type: ShipIconComponent, selector: "sh-icon" }, { kind: "component", type: ShipButtonComponent, selector: "[shButton]" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipBlueprintComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sh-blueprint',
-                    imports: [ShipCardComponent$1, ShipIconComponent$1, JsonPipe, ShipButtonComponent$1],
+                    imports: [ShipCardComponent, ShipIconComponent, JsonPipe, ShipButtonComponent],
                     template: `
     <div
       class="canvas-container"
@@ -3594,6 +3593,7 @@ function observeChildren(parentEl, elementTags) {
 
 class ShipMenuComponent {
     constructor() {
+        this.#document = inject(DOCUMENT);
         this.#renderer = inject(Renderer2);
         this.asMultiLayer = input(false, ...(ngDevMode ? [{ debugName: "asMultiLayer" }] : []));
         this.openIndicator = input(false, ...(ngDevMode ? [{ debugName: "openIndicator" }] : []));
@@ -3612,17 +3612,26 @@ class ShipMenuComponent {
         this.inputValue = createInputSignal(this.inputRef);
         this.abortController = null;
         this.optionsEffect = effect(() => {
-            if (!this.isOpen())
-                return;
-            if (this.abortController) {
+            if (this.abortController !== null) {
                 this.abortController.abort();
                 this.abortController = null;
             }
+            if (!this.isOpen())
+                return;
             this.abortController = new AbortController();
+            const searchable = this.searchable();
+            if (!searchable) {
+                this.#document.documentElement.addEventListener('keydown', this.keyDownEventListener, {
+                    signal: this.abortController.signal,
+                });
+            }
             const inputEl = this.inputRef()?.nativeElement;
             if (!inputEl)
                 return;
             queueMicrotask(() => inputEl.focus());
+            inputEl.addEventListener('keydown', this.keyDownEventListener, {
+                signal: this.abortController.signal,
+            });
             if (!this.closeOnClick()) {
                 const optionRef = this.optionsRef()?.nativeElement;
                 optionRef?.addEventListener('click', (e) => {
@@ -3640,31 +3649,29 @@ class ShipMenuComponent {
                     }
                 });
             }
-            inputEl.addEventListener('keydown', (e) => {
-                const activeOptionIndex = this.activeOptionIndex();
-                if (e.key === 'ArrowDown') {
-                    e.preventDefault();
-                    this.activeOptionIndex.set(this.nextActiveIndex(activeOptionIndex));
-                }
-                else if (e.key === 'ArrowUp') {
-                    e.preventDefault();
-                    this.activeOptionIndex.set(this.prevActiveIndex(activeOptionIndex));
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (activeOptionIndex > -1) {
-                        this.activeElements()[activeOptionIndex].click();
-                        queueMicrotask(() => this.close('active'));
-                    }
-                }
-                else if (e.key === 'Tab') {
-                    e.preventDefault();
-                    this.close('closed');
-                }
-            }, {
-                signal: this.abortController.signal,
-            });
         }, ...(ngDevMode ? [{ debugName: "optionsEffect" }] : []));
+        this.keyDownEventListener = (e) => {
+            const activeOptionIndex = this.activeOptionIndex();
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.activeOptionIndex.set(this.nextActiveIndex(activeOptionIndex));
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.activeOptionIndex.set(this.prevActiveIndex(activeOptionIndex));
+            }
+            else if (e.key === 'Enter') {
+                e.preventDefault();
+                if (activeOptionIndex > -1) {
+                    this.activeElements()[activeOptionIndex].click();
+                    queueMicrotask(() => this.close('active'));
+                }
+            }
+            else if (e.key === 'Tab') {
+                e.preventDefault();
+                this.close('closed');
+            }
+        };
         this._lastElementList = [];
         this.activeElements = signal([], ...(ngDevMode ? [{ debugName: "activeElements" }] : []));
         this.lastInputValue = '';
@@ -3674,6 +3681,15 @@ class ShipMenuComponent {
                 return;
             const inputValue = (this.inputValue() ?? '').toLowerCase();
             this.#resetActiveOption();
+            if (!inputValue || inputValue === '') {
+                const allOptions = this.optionsEl();
+                this.activeElements.set(allOptions);
+                this._lastElementList = allOptions;
+                for (let i = 0; i < allOptions.length; i++) {
+                    this.#renderer.removeStyle(allOptions[i], 'order');
+                }
+                return;
+            }
             if (!inputValue || inputValue === '')
                 return;
             let optionElements = this._lastElementList.length && inputValue.length > this.lastInputValue.length
@@ -3707,6 +3723,7 @@ class ShipMenuComponent {
             }
         }, ...(ngDevMode ? [{ debugName: "activeOptionIndexEffect" }] : []));
     }
+    #document;
     #renderer;
     toggleIsOpen(event) {
         event.preventDefault();