Improve popover fallbacks, improve search in menu, create a new core utility for binding inputs with forms inside projections

Author: sp90

projects/design-system/src/app/app.routes.ts

@@ -77,6 +77,10 @@ export const routes: Routes = [
         path: 'form-fields',
         loadComponent: () => import('./ship/form-fields/form-fields'),
       },
+      {
+        path: 'form-fields-experimental',
+        loadComponent: () => import('./ship/form-fields/examples/experimental-form-field/experimental-form-field'),
+      },
       {
         path: 'sidenavs',
         loadComponent: () => import('./ship/sidenavs/sidenavs'),

projects/design-system/src/app/ship/dialogs/examples/basic-dynamic-dialog/basic-dynamic-dialog.ts

@@ -15,17 +15,9 @@ export class BasicDynamicDialog {
 
   openDialog() {
     const dialogRef = this.#dialog.open(SimpleDialogContentComponent, {
-      data: { message: 'Hello from parent!', yellow: false },
+      data: { message: 'hllo', yellow: true, hello: true },
       class: this.type() ?? '',
     });
-
-    dialogRef.closed.subscribe((res) => {
-      console.log('closed res', res);
-    });
-
-    dialogRef.component.closed.subscribe((res) => {
-      console.log('closed res', res);
-    });
   }
 }
 
@@ -37,6 +29,6 @@ export class BasicDynamicDialog {
   `,
 })
 class SimpleDialogContentComponent {
-  data = input<{ message: string; yellow: boolean }>();
+  data = input<{ message: string; yellow: boolean; hello: boolean }>();
   closed = output<string>();
 }

projects/design-system/src/app/ship/form-fields/examples/experimental-form-field/experimental-form-field.html

@@ -0,0 +1,11 @@
+<section>
+  <sh-form-field-experimental>
+    <label>ReactiveFormsField: {{ reactiveFormValue() }}</label>
+    <input placeholder="Placeholder no label..." type="text" [formControl]="reactiveFormControl" />
+  </sh-form-field-experimental>
+
+  <sh-form-field-experimental>
+    <label>NgModel: {{ ngModelControl() }}</label>
+    <input placeholder="Placeholder no label..." type="text" [(ngModel)]="ngModelControl" />
+  </sh-form-field-experimental>
+</section>

projects/design-system/src/app/ship/form-fields/examples/experimental-form-field/experimental-form-field.scss

@@ -0,0 +1,19 @@
+@use 'helpers' as *;
+
+:host {
+  display: block;
+  padding: p2r(40);
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(20);
+}
+
+sh-form-field-experimental {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(8);
+  max-width: 300px;
+}

projects/design-system/src/app/ship/form-fields/examples/experimental-form-field/experimental-form-field.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ShipFormFieldExperimental } from 'ship-ui';
+
+@Component({
+  selector: 'app-experimental-form-field',
+  imports: [ShipFormFieldExperimental, FormsModule, ReactiveFormsModule],
+  templateUrl: './experimental-form-field.html',
+  styleUrl: './experimental-form-field.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class ExperimentalFormField {
+  reactiveFormControl = new FormControl('reactive hello');
+  ngModelControl = signal('yellow');
+
+  reactiveFormValue = toSignal(this.reactiveFormControl.valueChanges);
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.reactiveFormControl.setValue('123 reactive');
+      this.ngModelControl.set('678 ngModel');
+    }, 5000);
+  }
+}

projects/design-system/src/app/ship/menus/examples/search-menu-example/search-menu-example.html

@@ -3,6 +3,7 @@
   <ng-container menu>
     @for (item of filteredItems; track item.value) {
       <button (click)="select(item)" [class.selected]="selected === item.value">
+        <p>hello world</p>
         {{ item.label }}
       </button>
     }

projects/ship-ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ship-ui/core",
   "license": "MIT",
-  "version": "0.16.2",
+  "version": "0.16.3",
   "peerDependencies": {
     "@angular/common": ">=20",
     "@angular/core": ">=20"

projects/ship-ui/src/lib/sh-form-field-experimental/sh-form-field-experimental.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, effect } from '@angular/core';
+import { createFormInputSignal } from '../utilities/create-form-input-signal';
+
+@Component({
+  selector: 'sh-form-field-experimental',
+  imports: [],
+  template: `
+    <ng-content></ng-content>
+
+    <button (click)="myClick()">hello</button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ShipFormFieldExperimental {
+  firstInput = createFormInputSignal();
+
+  hello = effect(() => {
+    console.log('hello', this.firstInput());
+  });
+
+  myClick() {
+    this.firstInput.update((x) => x + 'hello');
+  }
+}

projects/ship-ui/src/lib/ship-menu/ship-menu.ts

@@ -16,7 +16,7 @@ import {
 import { ShipFormField } from '../ship-form-field/ship-form-field';
 import { ShipIcon } from '../ship-icon/ship-icon';
 import { ShipPopover } from '../ship-popover/ship-popover';
-import { createInputSignal } from '../utilities/create-input-signal';
+import { createFormInputSignal } from '../utilities/create-form-input-signal';
 import { observeChildren } from '../utilities/observe-elements';
 
 @Component({
@@ -82,8 +82,7 @@ export class ShipMenu {
 
   options = observeChildren<HTMLButtonElement>(this.optionsRef, this.customOptionElementSelectors);
   optionsEl = computed(() => this.options.signal().filter((x) => !x.disabled));
-
-  inputValue = createInputSignal<string>(this.inputRef);
+  inputValue = createFormInputSignal(this.inputRef);
 
   abortController: AbortController | null = null;
   optionsEffect = effect(() => {
@@ -97,6 +96,7 @@ export class ShipMenu {
     this.abortController = new AbortController();
 
     const searchable = this.searchable();
+
     if (!searchable) {
       this.#document.documentElement.addEventListener('keydown', this.keyDownEventListener, {
         signal: this.abortController.signal,

projects/ship-ui/src/lib/utilities/create-form-input-signal.ts

@@ -0,0 +1,128 @@
+import {
+  DestroyRef,
+  effect,
+  ElementRef,
+  inject,
+  Injector,
+  signal,
+  type Signal,
+  type WritableSignal,
+} from '@angular/core';
+import { observeFirstChild } from './observe-elements';
+
+export function createFormInputSignal<T extends HTMLInputElement | HTMLTextAreaElement>(
+  formEl?: Signal<ElementRef<T> | undefined>,
+  elementTags: string[] = ['input', 'textarea']
+): WritableSignal<string | undefined> {
+  const elementRefSignal = formEl ? formEl : observeFirstChild<T>(inject(ElementRef), elementTags);
+  const valueSignal: WritableSignal<string | undefined> = signal(undefined);
+  const injector = inject(Injector);
+  const destroyRef = injector.get(DestroyRef);
+  const firstInputEl = signal<HTMLInputElement | HTMLTextAreaElement | null>(null);
+
+  effect(
+    (onCleanup) => {
+      const elRef = elementRefSignal();
+
+      if (!elRef) return;
+
+      const inputEl = elRef.nativeElement;
+
+      if (!inputEl) return;
+
+      createCustomInputEventListener(inputEl);
+
+      firstInputEl.set(inputEl);
+      valueSignal.set(inputEl.value ?? '');
+
+      onCleanup(() => {
+        firstInputEl.set(null);
+      });
+    },
+    { injector }
+  );
+
+  let removeListener: (() => void) | null = null;
+
+  effect(
+    () => {
+      const inputEl = firstInputEl();
+
+      if (!inputEl) return;
+
+      if (removeListener) {
+        removeListener();
+        removeListener = null;
+      }
+
+      const inputChangedListener = (event: Event) => {
+        valueSignal.set((event as CustomEvent<{ value: string }>).detail.value);
+      };
+
+      const inputListener = (event: Event) => {
+        valueSignal.set((event.target as HTMLInputElement | HTMLTextAreaElement).value);
+      };
+
+      inputEl.addEventListener('input', inputListener as EventListener);
+      inputEl.addEventListener('inputValueChanged', inputChangedListener as EventListener);
+
+      valueSignal.set(inputEl.value);
+
+      removeListener = () => {
+        inputEl.removeEventListener('input', inputListener as EventListener);
+        inputEl.removeEventListener('inputValueChanged', inputChangedListener as EventListener);
+      };
+
+      destroyRef.onDestroy(() => {
+        if (removeListener) removeListener();
+      });
+    },
+    { injector }
+  );
+
+  effect(
+    () => {
+      const inputEl = firstInputEl();
+
+      if (!inputEl) return;
+
+      const inputValue = valueSignal();
+
+      if (!inputValue) return;
+
+      inputEl.value = inputValue;
+      inputEl.dispatchEvent(new Event('input'));
+    },
+    { injector }
+  );
+
+  return valueSignal;
+}
+
+function createCustomInputEventListener(input: HTMLInputElement | HTMLTextAreaElement) {
+  Object.defineProperty(input, 'value', {
+    configurable: true,
+    get() {
+      const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
+      return descriptor!.get!.call(this);
+    },
+    set(newVal) {
+      const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
+      descriptor!.set!.call(this, newVal);
+
+      const inputEvent = new CustomEvent('inputValueChanged', {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          value: newVal,
+        },
+      });
+
+      this.dispatchEvent(inputEvent);
+
+      return newVal;
+    },
+  });
+
+  return input;
+}