semmet-angular 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semmet-angular",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Angular schematics that generate real, ARIA-conformant standalone components (Accordion, Tabs, Dialog, Disclosure, Tooltip...) with signals-based state and keyboard interaction built in.",
   "publisher": "danilodevsilva",
   "license": "MIT",

package/src/accordion/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,24 +1,43 @@
 <!-- Semmet Angular: Accordion — https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ -->
-@for (item of items; track item.id; let i = $index) {
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> and <%= classify(name) %>Item in that parent component.
+
+<<%= selector %>>
+  <ng-template <%= camelize(name) %>Item id="profile" title="Profile" [expanded]="true">
+    <app-profile-panel />
+  </ng-template>
+
+  <ng-template <%= camelize(name) %>Item id="settings" title="Settings">
+    <app-settings-panel [userId]="userId()" (saved)="reload()" />
+  </ng-template>
+</<%= selector %>>
+
+Set [preserveContent]="false" on <<%= selector %>> to destroy panel content when closed.
+-->
+@for (item of items(); track item.id(); let i = $index) {
   <h3>
     <button
       #headerButton
       type="button"
-      [attr.aria-expanded]="isExpanded(item.id)"
-      [attr.aria-controls]="instanceId + '-panel-' + item.id"
-      [id]="instanceId + '-header-' + item.id"
-      (click)="toggle(item.id)"
+      [disabled]="item.disabled()"
+      [attr.aria-expanded]="isExpanded(item.id())"
+      [attr.aria-controls]="instanceId + '-panel-' + item.id()"
+      [id]="instanceId + '-header-' + item.id()"
+      (click)="toggle(item)"
       (keydown)="navigateHeaders($event, i)"
     >
-      {{ item.title }}
+      {{ item.title() }}
     </button>
   </h3>
   <div
-    [id]="instanceId + '-panel-' + item.id"
+    [id]="instanceId + '-panel-' + item.id()"
     role="region"
-    [attr.aria-labelledby]="instanceId + '-header-' + item.id"
-    [hidden]="!isExpanded(item.id)"
+    [attr.aria-labelledby]="instanceId + '-header-' + item.id()"
+    [hidden]="!isExpanded(item.id())"
   >
-    {{ item.content }}
+    @if (shouldRender(item.id())) {
+      <ng-container [ngTemplateOutlet]="item.templateRef" />
+    }
   </div>
 }

package/src/accordion/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -1,42 +1,96 @@
-import { Component, ElementRef, signal, viewChildren } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  Component,
+  Directive,
+  ElementRef,
+  TemplateRef,
+  booleanAttribute,
+  computed,
+  contentChildren,
+  inject,
+  input,
+  signal,
+  viewChildren,
+} from '@angular/core';
 
-interface <%= classify(name) %>Item {
-  id: number;
-  title: string;
-  content: string;
-}
+type <%= classify(name) %>ItemId = string | number;
 
 let nextId = 0;
+let nextItemId = 0;
+
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Item]',
+})
+export class <%= classify(name) %>Item {
+  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+
+  readonly id = input<<%= classify(name) %>ItemId>(`<%= dasherize(name) %>-item-${nextItemId++}`);
+  readonly title = input.required<string>();
+  readonly expanded = input(false, { transform: booleanAttribute });
+  readonly disabled = input(false, { transform: booleanAttribute });
+}
 
 @Component({
   selector: '<%= selector %>',
-  imports: [],
+  imports: [NgTemplateOutlet],
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
   private readonly headerButtons = viewChildren<ElementRef<HTMLButtonElement>>('headerButton');
 
+  protected readonly items = contentChildren(<%= classify(name) %>Item);
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
-  protected readonly items: <%= classify(name) %>Item[] = [
-    { id: 1, title: 'First section title', content: 'First panel content' },
-    { id: 2, title: 'Second section title', content: 'Second panel content' },
-  ];
+  readonly preserveContent = input(true, { transform: booleanAttribute });
 
-  private readonly expandedIds = signal<ReadonlySet<number>>(new Set([1]));
+  private readonly renderedIds = signal<ReadonlySet<<%= classify(name) %>ItemId>>(new Set());
+  private readonly userExpandedIds = signal<ReadonlySet<<%= classify(name) %>ItemId> | null>(null);
 
-  protected isExpanded(id: number): boolean {
+  private readonly expandedIds = computed<ReadonlySet<<%= classify(name) %>ItemId>>(() => {
+    const userExpandedIds = this.userExpandedIds();
+    if (userExpandedIds) {
+      return userExpandedIds;
+    }
+
+    return new Set(
+      this.items()
+        .filter((item) => item.expanded())
+        .map((item) => item.id()),
+    );
+  });
+
+  protected isExpanded(id: <%= classify(name) %>ItemId): boolean {
     return this.expandedIds().has(id);
   }
 
-  protected toggle(id: number): void {
+  protected shouldRender(id: <%= classify(name) %>ItemId): boolean {
+    return this.isExpanded(id) || (this.preserveContent() && this.renderedIds().has(id));
+  }
+
+  protected toggle(item: <%= classify(name) %>Item): void {
+    if (item.disabled()) {
+      return;
+    }
+
+    const id = item.id();
     const next = new Set(this.expandedIds());
     if (next.has(id)) {
+      this.markRendered(id);
       next.delete(id);
     } else {
       next.add(id);
+      this.markRendered(id);
     }
-    this.expandedIds.set(next);
+    this.userExpandedIds.set(next);
+  }
+
+  private markRendered(id: <%= classify(name) %>ItemId): void {
+    const renderedIds = this.renderedIds();
+    if (renderedIds.has(id)) {
+      return;
+    }
+
+    this.renderedIds.set(new Set(renderedIds).add(id));
   }
 
   // Up/Down/Home/End move focus between headers — optional but APG-recommended keyboard support.

package/src/carousel/files/__name@dasherize__/__name@dasherize__.css.template

@@ -52,6 +52,11 @@ button:hover {
   background: color-mix(in srgb, var(--semmet-color-primary) 88%, black);
 }
 
+button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
 button:focus-visible {
   outline: 2px solid var(--semmet-color-primary);
   outline-offset: 2px;

package/src/carousel/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,10 +1,34 @@
 <!-- Semmet Angular: Carousel — https://www.w3.org/WAI/ARIA/apg/patterns/carousel/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> and <%= classify(name) %>Slide in that parent component.
+
+<<%= selector %>>
+  <ng-template <%= camelize(name) %>Slide id="intro" label="Introduction">
+    <app-intro-slide />
+  </ng-template>
+
+  <ng-template <%= camelize(name) %>Slide id="summary" label="Summary">
+    <app-summary-slide [userId]="userId()" (selected)="selectSummary()" />
+  </ng-template>
+</<%= selector %>>
+
+Set [preserveContent]="false" on <<%= selector %>> to destroy inactive slide content.
+-->
 <section aria-roledescription="carousel" aria-label="Featured items">
   <div aria-live="polite">
-    <div aria-roledescription="slide" [attr.aria-label]="slideLabel()">
-      {{ activeSlide().content }}
-    </div>
+    @for (slide of slides(); track slide.id(); let i = $index) {
+      <div
+        aria-roledescription="slide"
+        [attr.aria-label]="slideLabel(i, slide)"
+        [hidden]="!isActive(i)"
+      >
+        @if (shouldRender(slide)) {
+          <ng-container [ngTemplateOutlet]="slide.templateRef" />
+        }
+      </div>
+    }
   </div>
-  <button type="button" (click)="previous()" aria-label="Previous slide">‹</button>
-  <button type="button" (click)="next()" aria-label="Next slide">›</button>
+  <button type="button" [disabled]="slides().length <= 1" (click)="previous()" aria-label="Previous slide">‹</button>
+  <button type="button" [disabled]="slides().length <= 1" (click)="next()" aria-label="Next slide">›</button>
 </section>

package/src/carousel/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -1,35 +1,91 @@
-import { Component, computed, signal } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  Component,
+  Directive,
+  TemplateRef,
+  booleanAttribute,
+  computed,
+  contentChildren,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
 
-interface <%= classify(name) %>Slide {
-  id: number;
-  content: string;
-}
+type <%= classify(name) %>SlideId = string | number;
 
 let nextId = 0;
+let nextSlideId = 0;
+
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Slide]',
+})
+export class <%= classify(name) %>Slide {
+  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+
+  readonly id = input<<%= classify(name) %>SlideId>(`<%= dasherize(name) %>-slide-${nextSlideId++}`);
+  readonly label = input('');
+}
 
 @Component({
   selector: '<%= selector %>',
-  imports: [],
+  imports: [NgTemplateOutlet],
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
+  protected readonly slides = contentChildren(<%= classify(name) %>Slide);
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
-  protected readonly slides: <%= classify(name) %>Slide[] = [
-    { id: 1, content: 'First slide content' },
-    { id: 2, content: 'Second slide content' },
-  ];
+  readonly preserveContent = input(true, { transform: booleanAttribute });
 
   protected readonly activeIndex = signal(0);
 
-  protected readonly activeSlide = computed(() => this.slides[this.activeIndex()]);
-  protected readonly slideLabel = computed(() => `${this.activeIndex() + 1} of ${this.slides.length}`);
+  private readonly renderedIds = signal<ReadonlySet<<%= classify(name) %>SlideId>>(new Set());
+  private readonly slideCount = computed(() => this.slides().length);
+  private readonly activeSlide = computed(() => this.slides()[this.activeIndex()] ?? null);
+
+  protected isActive(index: number): boolean {
+    return this.activeIndex() === index;
+  }
+
+  protected shouldRender(slide: <%= classify(name) %>Slide): boolean {
+    return this.activeSlide()?.id() === slide.id() || (this.preserveContent() && this.renderedIds().has(slide.id()));
+  }
+
+  protected slideLabel(index: number, slide: <%= classify(name) %>Slide): string {
+    const position = `${index + 1} of ${this.slideCount()}`;
+    return slide.label() ? `${position}: ${slide.label()}` : position;
+  }
 
   protected previous(): void {
-    this.activeIndex.update((index) => (index - 1 + this.slides.length) % this.slides.length);
+    this.selectIndex(this.activeIndex() - 1);
   }
 
   protected next(): void {
-    this.activeIndex.update((index) => (index + 1) % this.slides.length);
+    this.selectIndex(this.activeIndex() + 1);
+  }
+
+  private selectIndex(index: number): void {
+    const slides = this.slides();
+    if (slides.length === 0) {
+      return;
+    }
+
+    const activeSlide = this.activeSlide();
+    if (activeSlide) {
+      this.markRendered(activeSlide.id());
+    }
+
+    const nextIndex = (index + slides.length) % slides.length;
+    this.markRendered(slides[nextIndex].id());
+    this.activeIndex.set(nextIndex);
+  }
+
+  private markRendered(id: <%= classify(name) %>SlideId): void {
+    const renderedIds = this.renderedIds();
+    if (renderedIds.has(id)) {
+      return;
+    }
+
+    this.renderedIds.set(new Set(renderedIds).add(id));
   }
 }

package/src/disclosure/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,4 +1,16 @@
 <!-- Semmet Angular: Disclosure — https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> and <%= classify(name) %>Content in that parent component.
+
+<<%= selector %> label="Show profile details" [(expanded)]="profileDetailsOpen">
+  <ng-template <%= camelize(name) %>Content>
+    <app-profile-details [userId]="userId()" (saved)="reload()" />
+  </ng-template>
+</<%= selector %>>
+
+Set [preserveContent]="false" on <<%= selector %>> to destroy hidden content.
+-->
 <button
   type="button"
   [attr.aria-expanded]="expanded()"
@@ -6,12 +18,16 @@
   [id]="instanceId + '-button'"
   (click)="toggle()"
 >
-  Show details
+  {{ label() }}
 </button>
 <div
   [id]="instanceId + '-panel'"
   [attr.aria-labelledby]="instanceId + '-button'"
   [hidden]="!expanded()"
 >
-  Hidden content
+  @if (content(); as panel) {
+    @if (shouldRender()) {
+      <ng-container [ngTemplateOutlet]="panel.templateRef" />
+    }
+  }
 </div>

package/src/disclosure/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -1,18 +1,46 @@
-import { Component, signal } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  Component,
+  Directive,
+  TemplateRef,
+  booleanAttribute,
+  contentChild,
+  inject,
+  input,
+  model,
+  signal,
+} from '@angular/core';
 
 let nextId = 0;
 
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Content]',
+})
+export class <%= classify(name) %>Content {
+  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+}
+
 @Component({
   selector: '<%= selector %>',
-  imports: [],
+  imports: [NgTemplateOutlet],
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
+  protected readonly content = contentChild(<%= classify(name) %>Content);
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
-  protected readonly expanded = signal(false);
+  readonly label = input('Show details');
+  readonly preserveContent = input(true, { transform: booleanAttribute });
+  readonly expanded = model(false);
+
+  private readonly rendered = signal(false);
+
+  protected shouldRender(): boolean {
+    return this.expanded() || (this.preserveContent() && this.rendered());
+  }
 
   protected toggle(): void {
+    this.rendered.set(true);
     this.expanded.update((value) => !value);
   }
 }

package/src/tabs/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,29 +1,48 @@
 <!-- Semmet Angular: Tabs — https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> and <%= classify(name) %>Item in that parent component.
+
+<<%= selector %>>
+  <ng-template <%= camelize(name) %>Item id="profile" label="Profile" [selected]="true">
+    <app-profile-panel />
+  </ng-template>
+
+  <ng-template <%= camelize(name) %>Item id="settings" label="Settings">
+    <app-settings-panel [userId]="userId()" (saved)="reload()" />
+  </ng-template>
+</<%= selector %>>
+
+Set [preserveContent]="false" on <<%= selector %>> to destroy inactive tab content.
+-->
 <div role="tablist" aria-label="Tabs">
-  @for (item of items; track item.id; let i = $index) {
+  @for (item of items(); track item.id(); let i = $index) {
     <button
       #tabButton
       type="button"
       role="tab"
-      [attr.aria-selected]="isActive(item.id)"
-      [attr.aria-controls]="instanceId + '-panel-' + item.id"
-      [id]="instanceId + '-tab-' + item.id"
-      [tabIndex]="isActive(item.id) ? 0 : -1"
-      (click)="select(item.id)"
+      [disabled]="item.disabled()"
+      [attr.aria-selected]="isActive(item.id())"
+      [attr.aria-controls]="instanceId + '-panel-' + item.id()"
+      [id]="instanceId + '-tab-' + item.id()"
+      [tabIndex]="isActive(item.id()) ? 0 : -1"
+      (click)="select(item)"
       (keydown)="navigateTabs($event, i)"
     >
-      {{ item.label }}
+      {{ item.label() }}
     </button>
   }
 </div>
-@for (item of items; track item.id) {
+@for (item of items(); track item.id()) {
   <div
-    [id]="instanceId + '-panel-' + item.id"
+    [id]="instanceId + '-panel-' + item.id()"
     role="tabpanel"
     tabindex="0"
-    [attr.aria-labelledby]="instanceId + '-tab-' + item.id"
-    [hidden]="!isActive(item.id)"
+    [attr.aria-labelledby]="instanceId + '-tab-' + item.id()"
+    [hidden]="!isActive(item.id())"
   >
-    {{ item.content }}
+    @if (shouldRender(item.id())) {
+      <ng-container [ngTemplateOutlet]="item.templateRef" />
+    }
   </div>
 }

package/src/tabs/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -1,65 +1,155 @@
-import { Component, ElementRef, signal, viewChildren } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  Component,
+  Directive,
+  ElementRef,
+  TemplateRef,
+  booleanAttribute,
+  computed,
+  contentChildren,
+  inject,
+  input,
+  signal,
+  viewChildren,
+} from '@angular/core';
 
-interface <%= classify(name) %>Item {
-  id: number;
-  label: string;
-  content: string;
-}
+type <%= classify(name) %>ItemId = string | number;
 
 let nextId = 0;
+let nextItemId = 0;
+
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Item]',
+})
+export class <%= classify(name) %>Item {
+  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+
+  readonly id = input<<%= classify(name) %>ItemId>(`<%= dasherize(name) %>-item-${nextItemId++}`);
+  readonly label = input.required<string>();
+  readonly selected = input(false, { transform: booleanAttribute });
+  readonly disabled = input(false, { transform: booleanAttribute });
+}
 
 @Component({
   selector: '<%= selector %>',
-  imports: [],
+  imports: [NgTemplateOutlet],
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
   private readonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');
 
+  protected readonly items = contentChildren(<%= classify(name) %>Item);
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
-  protected readonly items: <%= classify(name) %>Item[] = [
-    { id: 1, label: 'First tab', content: 'First panel content' },
-    { id: 2, label: 'Second tab', content: 'Second panel content' },
-  ];
+  readonly preserveContent = input(true, { transform: booleanAttribute });
 
-  private readonly activeId = signal(this.items[0].id);
+  private readonly renderedIds = signal<ReadonlySet<<%= classify(name) %>ItemId>>(new Set());
+  private readonly selectedId = signal<<%= classify(name) %>ItemId | null>(null);
 
-  protected isActive(id: number): boolean {
+  private readonly activeId = computed<<%= classify(name) %>ItemId | null>(() => {
+    const selectedId = this.selectedId();
+    const items = this.items();
+    if (selectedId !== null && items.some((item) => item.id() === selectedId && !item.disabled())) {
+      return selectedId;
+    }
+
+    return (
+      items.find((item) => item.selected() && !item.disabled()) ??
+      items.find((item) => !item.disabled()) ??
+      items[0]
+    )?.id() ?? null;
+  });
+
+  protected isActive(id: <%= classify(name) %>ItemId): boolean {
     return this.activeId() === id;
   }
 
-  protected select(id: number): void {
-    this.activeId.set(id);
+  protected shouldRender(id: <%= classify(name) %>ItemId): boolean {
+    return this.isActive(id) || (this.preserveContent() && this.renderedIds().has(id));
+  }
+
+  protected select(item: <%= classify(name) %>Item): void {
+    if (item.disabled()) {
+      return;
+    }
+
+    const activeId = this.activeId();
+    if (activeId !== null) {
+      this.markRendered(activeId);
+    }
+
+    const id = item.id();
+    this.markRendered(id);
+    this.selectedId.set(id);
   }
 
   // Left/Right/Home/End move focus AND selection (automatic activation model, per APG tabs pattern).
   protected navigateTabs(event: KeyboardEvent, index: number): void {
+    const items = this.items();
     const buttons = this.tabButtons();
-    if (buttons.length === 0) {
+    if (buttons.length === 0 || items.length === 0) {
       return;
     }
 
-    let nextIndex: number;
+    let nextIndex: number | null;
     switch (event.key) {
       case 'ArrowRight':
-        nextIndex = (index + 1) % buttons.length;
+        nextIndex = this.nextEnabledIndex(items, index, 1);
         break;
       case 'ArrowLeft':
-        nextIndex = (index - 1 + buttons.length) % buttons.length;
+        nextIndex = this.nextEnabledIndex(items, index, -1);
         break;
       case 'Home':
-        nextIndex = 0;
+        nextIndex = this.firstEnabledIndex(items);
         break;
       case 'End':
-        nextIndex = buttons.length - 1;
+        nextIndex = this.lastEnabledIndex(items);
         break;
       default:
         return;
     }
 
+    if (nextIndex === null) {
+      return;
+    }
+
     event.preventDefault();
-    this.select(this.items[nextIndex].id);
-    buttons[nextIndex].nativeElement.focus();
+    this.select(items[nextIndex]);
+    buttons[nextIndex]?.nativeElement.focus();
+  }
+
+  private markRendered(id: <%= classify(name) %>ItemId): void {
+    const renderedIds = this.renderedIds();
+    if (renderedIds.has(id)) {
+      return;
+    }
+
+    this.renderedIds.set(new Set(renderedIds).add(id));
+  }
+
+  private nextEnabledIndex(items: readonly <%= classify(name) %>Item[], index: number, direction: 1 | -1): number | null {
+    for (let step = 1; step <= items.length; step++) {
+      const nextIndex = (index + step * direction + items.length) % items.length;
+      if (!items[nextIndex].disabled()) {
+        return nextIndex;
+      }
+    }
+
+    return null;
+  }
+
+  private firstEnabledIndex(items: readonly <%= classify(name) %>Item[]): number | null {
+    const index = items.findIndex((item) => !item.disabled());
+    return index === -1 ? null : index;
+  }
+
+  private lastEnabledIndex(items: readonly <%= classify(name) %>Item[]): number | null {
+    for (let index = items.length - 1; index >= 0; index--) {
+      if (!items[index].disabled()) {
+        return index;
+      }
+    }
+
+    return null;
   }
 }