@ng-zen/cli 22.4.1 → 22.5.0-next.1

package/schematics/ui/files/dialog/dialog.spec.ts

@@ -8,13 +8,13 @@ import { ZenDialogService } from './dialog.service';
 @Component({
   template: `
     <dialog
+      zen-dialog
       [backdrop]="backdrop()"
       [closeOnEscape]="closeOnEscape()"
       [header]="header()"
       [id]="id()"
       [size]="size()"
       [(open)]="isOpen"
-      zen-dialog
     >
       <p>Dialog content</p>
     </dialog>
@@ -34,8 +34,8 @@ class DialogTestComponent {
 @Component({
   template: `
     <p>{{ message() }}</p>
-    <button (click)="onConfirm()">Confirm</button>
-    <button (click)="onCancel()">Cancel</button>
+    <button type="button" (click)="onConfirm()">Confirm</button>
+    <button type="button" (click)="onCancel()">Cancel</button>
   `,
   standalone: true,
 })
@@ -58,7 +58,7 @@ function getDialogEl(fixture: ComponentFixture<unknown>): HTMLDialogElement | nu
 }
 
 function getDialogElFromBody(): HTMLDialogElement | null {
-  return document.body.querySelector('dialog[zen-dialog]') as HTMLDialogElement | null;
+  return document.body.querySelector('dialog[zen-dialog]');
 }
 
 describe('ZenDialog', () => {
@@ -212,7 +212,7 @@ describe('ZenDialogService', () => {
     const service = TestBed.inject(ZenDialogService);
 
     const ref = service.open(TestDialogContent, {
-      inputs: { message: 'Hello from service' } as Record<string, unknown>,
+      inputs: { message: 'Hello from service' },
     });
 
     expect(ref.componentInstance.message()).toBe('Hello from service');
@@ -230,7 +230,7 @@ describe('ZenDialogService', () => {
       },
     });
 
-    const confirmBtn = document.body.querySelector('button') as HTMLButtonElement;
+    const confirmBtn = document.body.querySelector('button')!;
     confirmBtn?.click();
 
     expect(confirmHandler).toHaveBeenCalledWith('confirmed');

package/schematics/ui/files/dialog/dialog.ts

@@ -44,7 +44,7 @@ type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
       <header class="zen-dialog-header">
         <h2>{{ header() }}</h2>
         @if (closable()) {
-          <button (click)="onClose()" aria-label="Close dialog" class="zen-dialog-close" type="button">
+          <button aria-label="Close dialog" class="zen-dialog-close" type="button" (click)="onClose()">
             <zen-icon [icon]="closeIcon" [size]="20" />
           </button>
         }

package/schematics/ui/files/form-control/form-control.ts

@@ -40,9 +40,6 @@ import { FormValueControl } from '@angular/forms/signals';
   },
 })
 export abstract class ZenFormControl<Value> implements FormValueControl<Value> {
-  /** The underlying value of the control. Subclasses must provide their own implementation using `model()`. */
-  abstract readonly value: ModelSignal<Value>;
-
   /** Validation errors for the field. Auto-bound by the Signal Forms directive. */
   readonly errors = input<readonly ValidationError.WithOptionalFieldTree[]>([]);
   /** Whether the control is disabled. Auto-bound by the Signal Forms directive. */
@@ -68,12 +65,15 @@ export abstract class ZenFormControl<Value> implements FormValueControl<Value> {
   /** Emitted when the field is blurred. The {@link FormField} directive listens to this output to mark the field as touched. */
   readonly touch = output<void>();
 
+  /** The underlying value of the control. Subclasses must provide their own implementation using `model()`. */
+  abstract readonly value: ModelSignal<Value>;
+
   // @ignore
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+
   focus(_options?: FocusOptions): void {}
 
   // @ignore
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
+
   reset(): void {}
 
   /** Should be called by the subclass when the control's value changes as a result of user interaction. */

package/schematics/ui/files/icon/icon.ts

@@ -29,17 +29,17 @@ export type IconSvgObject = readonly (readonly [string, Record<string, string |
   selector: 'zen-icon',
   template: `
     <svg
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
       [attr.height]="size()"
       [attr.stroke-width]="calculatedStrokeWidth()"
       [attr.viewBox]="'0 0 ' + BASE_SIZE + ' ' + BASE_SIZE"
       [attr.width]="size()"
       [innerHTML]="safeSvgContent()"
       [style.color]="color()"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      xmlns="http://www.w3.org/2000/svg"
     ></svg>
   `,
   styles: [':host { display: inline-flex; }'],

package/schematics/ui/files/input/input.stories.ts

@@ -89,7 +89,7 @@ export const WithFormRoot: Story = {
   standalone: true,
   template: `
     <div style="display: flex; flex-direction: column; gap: 0.5rem; max-width: 300px;">
-      <zen-input [formField]="form.name" placeholder="Type something" />
+      <zen-input placeholder="Type something" [formField]="form.name" />
       @if (form.name().invalid()) {
         <p style="color: red; margin: 0; font-size: 0.875rem;">
           {{ form.name().errors()![0].message }}
@@ -108,9 +108,9 @@ class InputSignalFormComponent {
 @Component({
   standalone: true,
   template: `
-    <form [formRoot]="loginForm" style="display: flex; flex-direction: column; gap: 0.5rem; max-width: 300px;">
-      <zen-input [formField]="loginForm.email" placeholder="Email" />
-      <zen-input [formField]="loginForm.password" placeholder="Password" type="password" />
+    <form style="display: flex; flex-direction: column; gap: 0.5rem; max-width: 300px;" [formRoot]="loginForm">
+      <zen-input placeholder="Email" [formField]="loginForm.email" />
+      <zen-input placeholder="Password" type="password" [formField]="loginForm.password" />
       <button type="submit">Sign in</button>
     </form>
   `,

package/schematics/ui/files/input/input.ts

@@ -37,6 +37,7 @@ import { ZenFormControl } from '../form-control';
   selector: 'zen-input',
   template: `
     <input
+      #inputRef
       [aria-invalid]="invalid() || null"
       [disabled]="disabled()"
       [placeholder]="placeholder()"
@@ -44,7 +45,6 @@ import { ZenFormControl } from '../form-control';
       [type]="type()"
       [value]="value()"
       (input)="onInput(inputRef.value)"
-      #inputRef
     />
   `,
   styleUrls: ['./input.scss'],

package/schematics/ui/files/pin/index.ts

@@ -0,0 +1,3 @@
+export * from './pin';
+export * from './pin.types';
+export * from './pin-item';

package/schematics/ui/files/pin/pin-item.spec.ts

@@ -0,0 +1,151 @@
+import { Component, provideZonelessChangeDetection, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { ZenButton } from '../button';
+import { ZenPin } from './pin';
+import type { PinPosition } from './pin.types';
+import { ZenPinItem } from './pin-item';
+
+@Component({
+  template: `
+    <button #trigger id="trigger" type="button" zen-button zenPin>
+      Trigger
+      <span zenPinItem [zenPinFlush]="flushed()" [zenPinOffset]="offset()" [zenPinPosition]="position()">
+        Pinned content
+      </span>
+    </button>
+  `,
+  imports: [ZenPin, ZenButton, ZenPinItem],
+})
+class HostComponent {
+  readonly position = signal<PinPosition>('top right');
+  readonly offset = signal<string | number>('0');
+  readonly flushed = signal<boolean>(false);
+}
+
+function getWrapper(fixture: ComponentFixture<unknown>): HTMLElement | null {
+  return fixture.nativeElement.querySelector('.zen-pin-wrapper') as HTMLElement | null;
+}
+
+describe('ZenPinItem', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+      providers: [provideZonelessChangeDetection()],
+    }).compileComponents();
+  });
+
+  function createFixture(): ComponentFixture<HostComponent> {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    return fixture;
+  }
+
+  it('sets default position-area to top right', () => {
+    expect(getWrapper(createFixture())!.style.getPropertyValue('position-area')).toBe('top right');
+  });
+
+  it('applies overlap translate by default', () => {
+    expect(getWrapper(createFixture())!.style.getPropertyValue('translate')).toBe('-50% 50%');
+  });
+
+  it('does not set margin by default', () => {
+    expect(getWrapper(createFixture())!.style.getPropertyValue('margin')).toBe('');
+  });
+
+  it.each([
+    ['top', '0 50%'],
+    ['bottom', '0 -50%'],
+    ['left', '50% 0'],
+    ['right', '-50% 0'],
+    ['center', '0 0'],
+    ['top left', '50% 50%'],
+    ['top right', '-50% 50%'],
+    ['bottom left', '50% -50%'],
+    ['bottom right', '-50% -50%'],
+    ['top center', '0 50%'],
+    ['center left', '50% 0'],
+    ['center right', '-50% 0'],
+    ['bottom center', '0 -50%'],
+  ] as const)('computes %s translate as %s', (position, expected) => {
+    const fixture = createFixture();
+    fixture.componentInstance.position.set(position);
+    fixture.detectChanges();
+
+    expect(getWrapper(fixture)!.style.getPropertyValue('translate')).toBe(expected);
+  });
+
+  it('removes translate when flush is true', () => {
+    const fixture = createFixture();
+    fixture.componentInstance.flushed.set(true);
+    fixture.detectChanges();
+
+    expect(getWrapper(fixture)!.style.getPropertyValue('translate')).toBe('');
+  });
+
+  it('sets margin from string offset', () => {
+    const fixture = createFixture();
+    fixture.componentInstance.offset.set('10px');
+    fixture.detectChanges();
+
+    expect(getWrapper(fixture)!.style.getPropertyValue('margin')).toBe('10px');
+  });
+
+  it('sets margin from numeric offset', () => {
+    const fixture = createFixture();
+    fixture.componentInstance.offset.set(15);
+    fixture.detectChanges();
+
+    expect(getWrapper(fixture)!.style.getPropertyValue('margin')).toBe('15px');
+  });
+
+  it('removes margin when offset is zero string', () => {
+    const fixture = createFixture();
+    fixture.componentInstance.offset.set('10px');
+    fixture.detectChanges();
+    expect(getWrapper(fixture)!.style.getPropertyValue('margin')).toBe('10px');
+
+    fixture.componentInstance.offset.set('0');
+    fixture.detectChanges();
+    expect(getWrapper(fixture)!.style.getPropertyValue('margin')).toBe('');
+  });
+
+  it('removes margin when offset is zero number', () => {
+    const fixture = createFixture();
+    fixture.componentInstance.offset.set(15);
+    fixture.detectChanges();
+    expect(getWrapper(fixture)!.style.getPropertyValue('margin')).toBe('15px');
+
+    fixture.componentInstance.offset.set(0);
+    fixture.detectChanges();
+    expect(getWrapper(fixture)!.style.getPropertyValue('margin')).toBe('');
+  });
+
+  it('keeps overlap translate when offset is set', () => {
+    const fixture = createFixture();
+    fixture.componentInstance.offset.set('10px');
+    fixture.detectChanges();
+
+    expect(getWrapper(fixture)!.style.getPropertyValue('translate')).toBe('-50% 50%');
+    expect(getWrapper(fixture)!.style.getPropertyValue('margin')).toBe('10px');
+  });
+
+  it('sets margin without translate when flush and offset', () => {
+    const fixture = createFixture();
+    fixture.componentInstance.flushed.set(true);
+    fixture.componentInstance.offset.set('8px');
+    fixture.detectChanges();
+
+    expect(getWrapper(fixture)!.style.getPropertyValue('translate')).toBe('');
+    expect(getWrapper(fixture)!.style.getPropertyValue('margin')).toBe('8px');
+  });
+
+  it('removes wrapper from DOM on destroy', () => {
+    const fixture = createFixture();
+    expect(getWrapper(fixture)).toBeTruthy();
+
+    fixture.destroy();
+    expect(getWrapper(fixture)).toBeNull();
+  });
+});

package/schematics/ui/files/pin/pin-item.ts

@@ -0,0 +1,115 @@
+import { booleanAttribute, DestroyRef, Directive, effect, ElementRef, inject, input, Renderer2 } from '@angular/core';
+
+import { ZenPin } from './pin';
+import type { PinPosition } from './pin.types';
+
+/**
+ * ZenPinItem is a directive that pins an element as an overlay relative to a
+ * `[zenPin]` anchor. Each pinned element gets its own absolutely-positioned
+ * wrapper using CSS Anchor Positioning.
+ *
+ * @example
+ *
+ * ```html
+ * <button zen-button zenPin>
+ *   Notifications
+ *   <zen-badge zenPinItem zenPinPosition="top right" [zenPinOffset]="5px">3</zen-badge>
+ *   <zen-icon zenPinItem zenPinPosition="bottom right" />
+ * </button>
+ * ```
+ *
+ * @author Konrad Stępień
+ * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
+ * @see [GitHub](https://github.com/kstepien3/ng-zen)
+ * @see [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)
+ */
+@Directive({
+  selector: '[zenPinItem]',
+})
+export class ZenPinItem {
+  /** Position of the pin relative to the anchor element. */
+  readonly zenPinPosition = input<PinPosition>('top right');
+
+  /** Fine-tune the margin to offset the pin from the position-area edge. Accepts CSS value or number (px). */
+  readonly zenPinOffset = input<string | number>('0');
+
+  /** Whether the pin sits flush at the edge without overlapping the anchor. */
+  readonly zenPinFlush = input<boolean, unknown>(false, { transform: booleanAttribute });
+
+  private readonly el = inject(ElementRef);
+  private readonly renderer = inject(Renderer2);
+  private readonly zenPin = inject(ZenPin);
+  private readonly destroyRef = inject(DestroyRef);
+
+  private wrapper: HTMLElement | null = null;
+
+  constructor() {
+    effect(() => {
+      if (!this.wrapper) {
+        this.createWrapper();
+      }
+      this.updatePosition();
+    });
+
+    this.destroyRef.onDestroy(() => this.cleanup());
+  }
+
+  private createWrapper(): void {
+    const wrapper = this.renderer.createElement('div');
+    this.renderer.addClass(wrapper, 'zen-pin-wrapper');
+    this.renderer.setStyle(wrapper, 'position', 'absolute');
+    this.renderer.setStyle(wrapper, 'position-anchor', this.zenPin.anchorName);
+    this.renderer.setStyle(wrapper, 'align-self', 'anchor-center');
+    this.renderer.setStyle(wrapper, 'justify-self', 'anchor-center');
+
+    const itemEl = this.el.nativeElement;
+    const parent = this.renderer.parentNode(itemEl);
+    this.renderer.removeChild(parent, itemEl);
+    this.renderer.appendChild(wrapper, itemEl);
+
+    const hostParent = this.renderer.parentNode(this.zenPin.hostEl);
+    this.renderer.appendChild(hostParent, wrapper);
+
+    this.wrapper = wrapper;
+  }
+
+  private updatePosition(): void {
+    if (!this.wrapper) return;
+
+    this.renderer.setStyle(this.wrapper, 'position-area', this.zenPinPosition());
+
+    if (this.zenPinFlush()) {
+      this.renderer.removeStyle(this.wrapper, 'translate');
+    } else {
+      this.renderer.setStyle(this.wrapper, 'translate', this.computeCenterOffset(this.zenPinPosition(), 50));
+    }
+
+    const o = this.zenPinOffset();
+    if (o !== '0' && o !== 0) {
+      this.renderer.setStyle(this.wrapper, 'margin', typeof o === 'number' ? `${o}px` : o);
+    } else {
+      this.renderer.removeStyle(this.wrapper, 'margin');
+    }
+  }
+
+  private cleanup(): void {
+    if (!this.wrapper) return;
+    const parent = this.renderer.parentNode(this.wrapper);
+    if (parent) {
+      this.renderer.removeChild(parent, this.wrapper);
+    }
+    this.wrapper = null;
+  }
+
+  private computeCenterOffset(position: PinPosition, pct: number): string {
+    const parts = position.split(' ') as [string] | [string, string];
+    const verticals = new Set(['top', 'bottom', 'center']);
+    const [v, h] = parts.length === 2 ? parts : verticals.has(parts[0]) ? [parts[0], 'center'] : ['center', parts[0]];
+
+    const hFactor = h === 'right' ? -1 : h === 'left' ? 1 : 0;
+    const vFactor = v === 'top' ? 1 : v === 'bottom' ? -1 : 0;
+    const x = hFactor * pct;
+    const y = vFactor * pct;
+    return `${x ? x + '%' : '0'} ${y ? y + '%' : '0'}`;
+  }
+}

package/schematics/ui/files/pin/pin.spec.ts

@@ -0,0 +1,153 @@
+import { Component, provideZonelessChangeDetection, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { ZenButton } from '../button';
+import { ZenPin } from './pin';
+import type { PinPosition } from './pin.types';
+import { ZenPinItem } from './pin-item';
+
+@Component({
+  template: `
+    <button #trigger id="trigger" type="button" zen-button zenPin>
+      Trigger
+      <span zenPinItem [zenPinFlush]="flushed()" [zenPinOffset]="offset()" [zenPinPosition]="position()">
+        Pinned content
+      </span>
+    </button>
+  `,
+  imports: [ZenPin, ZenButton, ZenPinItem],
+})
+class HostComponent {
+  readonly position = signal<PinPosition>('top right');
+  readonly offset = signal<string | number>('0');
+  readonly flushed = signal<boolean>(false);
+}
+
+@Component({
+  template: `
+    <button zen-button zenPin>
+      Trigger
+      <span zenPinItem>First pin</span>
+      <span zenPinItem>Second pin</span>
+    </button>
+  `,
+  imports: [ZenPin, ZenButton, ZenPinItem],
+})
+class MultiHostComponent {}
+
+function getWrappers(fixture: ComponentFixture<unknown>): HTMLElement[] {
+  return Array.from(fixture.nativeElement.querySelectorAll('.zen-pin-wrapper') as NodeListOf<HTMLElement>);
+}
+
+function getWrapper(fixture: ComponentFixture<unknown>, index = 0): HTMLElement | null {
+  return getWrappers(fixture)[index] ?? null;
+}
+
+describe('ZenPin', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent, MultiHostComponent],
+      providers: [provideZonelessChangeDetection()],
+    }).compileComponents();
+  });
+
+  function createFixture(): ComponentFixture<HostComponent> {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    return fixture;
+  }
+
+  it('creates a wrapper element with class zen-pin-wrapper', () => {
+    const fixture = createFixture();
+    expect(getWrapper(fixture)).toBeTruthy();
+  });
+
+  it('moves element content into wrapper', () => {
+    const fixture = createFixture();
+    expect(getWrapper(fixture)!.textContent).toContain('Pinned content');
+  });
+
+  it('sets anchor-name on host and position-anchor on wrapper', () => {
+    const fixture = createFixture();
+    const trigger = fixture.nativeElement.querySelector('#trigger') as HTMLElement;
+    const wrapper = getWrapper(fixture)!;
+
+    expect(trigger.style.getPropertyValue('anchor-name')).toMatch(/^--zen-pin-/);
+    expect(wrapper.style.getPropertyValue('position-anchor')).toBe(trigger.style.getPropertyValue('anchor-name'));
+  });
+
+  it('sets align-self and justify-self to anchor-center', () => {
+    const fixture = createFixture();
+    const wrapper = getWrapper(fixture)!;
+
+    expect(wrapper.style.getPropertyValue('align-self')).toBe('anchor-center');
+    expect(wrapper.style.getPropertyValue('justify-self')).toBe('anchor-center');
+  });
+
+  it('sets position-area from zenPinPosition input', () => {
+    const fixture = createFixture();
+    const wrapper = getWrapper(fixture)!;
+
+    expect(wrapper.style.getPropertyValue('position-area')).toBe('top right');
+  });
+
+  it('updates position-area when position changes', () => {
+    const fixture = createFixture();
+    fixture.componentInstance.position.set('bottom left');
+    fixture.detectChanges();
+
+    expect(getWrapper(fixture)!.style.getPropertyValue('position-area')).toBe('bottom left');
+  });
+
+  it('sets margin from zenPinOffset string input', () => {
+    const fixture = createFixture();
+    fixture.componentInstance.offset.set('10px');
+    fixture.detectChanges();
+
+    expect(getWrapper(fixture)!.style.getPropertyValue('margin')).toBe('10px');
+  });
+
+  it('sets margin from zenPinOffset number input', () => {
+    const fixture = createFixture();
+    fixture.componentInstance.offset.set(15);
+    fixture.detectChanges();
+
+    expect(getWrapper(fixture)!.style.getPropertyValue('margin')).toBe('15px');
+  });
+
+  it.each([
+    ['top right', '-50% 50%'],
+    ['top left', '50% 50%'],
+    ['bottom right', '-50% -50%'],
+  ] as const)('computes center-directed translate for position %s when not flush', (position, expected) => {
+    const fixture = createFixture();
+    fixture.componentInstance.position.set(position);
+    fixture.detectChanges();
+
+    expect(getWrapper(fixture)!.style.getPropertyValue('translate')).toBe(expected);
+  });
+
+  it('removes translate when flush is true', () => {
+    const fixture = createFixture();
+    fixture.componentInstance.flushed.set(true);
+    fixture.detectChanges();
+
+    expect(getWrapper(fixture)!.style.getPropertyValue('translate')).toBe('');
+  });
+
+  it('creates a wrapper per zen-pin-item', () => {
+    const fixture = TestBed.createComponent(MultiHostComponent);
+    fixture.detectChanges();
+
+    expect(getWrappers(fixture)).toHaveLength(2);
+  });
+
+  it('removes wrapper on host destroy', () => {
+    const fixture = createFixture();
+    expect(getWrapper(fixture)).toBeTruthy();
+
+    fixture.destroy();
+    expect(getWrapper(fixture)).toBeNull();
+  });
+});