semmet-angular 0.3.0 → 0.5.0

package/src/table/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularTable",
+  "title": "Semmet Angular Table Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular accessible data table component (caption, scoped headers), following the W3C ARIA Authoring Practices Guide.",
+  "additionalProperties": false,
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name for the new component. Used to derive the class name, selector, and file names.",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": "What name would you like to use for the table component?"
+    },
+    "path": {
+      "type": "string",
+      "format": "path",
+      "$default": { "$source": "workingDirectory" },
+      "description": "The path where the component files should be created, relative to the workspace root. Defaults to the project's source root.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add the component to.",
+      "$default": { "$source": "projectName" }
+    }
+  },
+  "required": ["name", "project"]
+}

package/src/table/schema.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

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

@@ -0,0 +1,56 @@
+:host {
+  --semmet-color-on-surface: #1b201f;
+  --semmet-color-inverse-surface: #2f3736;
+  --semmet-color-inverse-on-surface: #ffffff;
+  --semmet-radius-sm: 8px;
+  --semmet-elevation-3: 0 8px 24px rgba(20, 24, 23, 0.18), 0 2px 8px rgba(20, 24, 23, 0.1);
+  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
+
+  display: block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+}
+
+button {
+  font: inherit;
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+  background: none;
+  border: 1px solid currentColor;
+  border-radius: var(--semmet-radius-sm);
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+[role='status'] {
+  position: fixed;
+  left: 50%;
+  bottom: 1.5rem;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  color: var(--semmet-color-inverse-on-surface);
+  background: var(--semmet-color-inverse-surface);
+  border-radius: var(--semmet-radius-sm);
+  box-shadow: var(--semmet-elevation-3);
+}
+
+[role='status'] button {
+  font-size: 1.125rem;
+  line-height: 1;
+  color: inherit;
+  border: none;
+  padding: 0.125rem 0.375rem;
+  transition: background-color var(--semmet-motion);
+}
+
+[role='status'] button:hover {
+  background: color-mix(in srgb, var(--semmet-color-inverse-on-surface) 20%, transparent);
+}

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

@@ -0,0 +1,9 @@
+<!-- Semmet Angular: Toast / Notification — https://www.w3.org/TR/wai-aria-1.2/#status -->
+<button type="button" (click)="show()">Save</button>
+
+@if (visible()) {
+  <div role="status" [id]="instanceId">
+    <span>Your changes have been saved.</span>
+    <button type="button" (click)="dismiss()" aria-label="Dismiss">×</button>
+  </div>
+}

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

@@ -0,0 +1,33 @@
+import { Component, DestroyRef, inject, signal } from '@angular/core';
+
+const AUTO_DISMISS_MS = 5000;
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  private dismissTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly visible = signal(false);
+
+  constructor() {
+    inject(DestroyRef).onDestroy(() => clearTimeout(this.dismissTimeout));
+  }
+
+  protected show(): void {
+    this.visible.set(true);
+    clearTimeout(this.dismissTimeout);
+    this.dismissTimeout = setTimeout(() => this.visible.set(false), AUTO_DISMISS_MS);
+  }
+
+  protected dismiss(): void {
+    clearTimeout(this.dismissTimeout);
+    this.visible.set(false);
+  }
+}

package/src/toast/index.d.ts

@@ -0,0 +1 @@
+export declare const toast: (options: import("./schema").Schema) => import("@angular-devkit/schematics").Rule;

package/src/toast/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toast = void 0;
+const generate_component_1 = require("../utils/generate-component");
+exports.toast = (0, generate_component_1.createAriaComponentSchematic)();
+//# sourceMappingURL=index.js.map

package/src/toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,KAAK,GAAG,IAAA,iDAA4B,GAAE,CAAC"}

package/src/toast/index.ts

@@ -0,0 +1,3 @@
+import { createAriaComponentSchematic } from '../utils/generate-component';
+
+export const toast = createAriaComponentSchematic();

package/src/toast/schema.d.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

package/src/toast/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/src/toast/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":""}

package/src/toast/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularToast",
+  "title": "Semmet Angular Toast Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Toast/Notification component (auto-dismissing polite live region) per WAI-ARIA status role guidance.",
+  "additionalProperties": false,
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name for the new component. Used to derive the class name, selector, and file names.",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": "What name would you like to use for the toast component?"
+    },
+    "path": {
+      "type": "string",
+      "format": "path",
+      "$default": { "$source": "workingDirectory" },
+      "description": "The path where the component files should be created, relative to the workspace root. Defaults to the project's source root.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add the component to.",
+      "$default": { "$source": "projectName" }
+    }
+  },
+  "required": ["name", "project"]
+}

package/src/toast/schema.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

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

@@ -0,0 +1,48 @@
+:host {
+  --semmet-color-primary: #0d7a72;
+  --semmet-color-on-primary: #ffffff;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-outline: #d7dedd;
+  --semmet-color-on-surface: #1b201f;
+  --semmet-radius-sm: 8px;
+  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
+
+  display: inline-block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+}
+
+[role='toolbar'] {
+  display: inline-flex;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  background: var(--semmet-color-surface);
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-sm);
+}
+
+button {
+  font: inherit;
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+  background: none;
+  border: none;
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  transition: background-color var(--semmet-motion), color var(--semmet-motion);
+}
+
+button:hover {
+  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
+}
+
+button:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: -2px;
+}
+
+button[aria-pressed='true'] {
+  background: var(--semmet-color-primary);
+  color: var(--semmet-color-on-primary);
+}

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

@@ -0,0 +1,15 @@
+<!-- Semmet Angular: Toolbar — https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/ -->
+<div role="toolbar" aria-label="Text formatting">
+  @for (action of actions; track action.id; let i = $index) {
+    <button
+      #toolbarButton
+      type="button"
+      [attr.aria-pressed]="isPressed(action.id)"
+      [tabIndex]="activeId() === action.id ? 0 : -1"
+      (click)="toggle(action.id)"
+      (keydown)="navigateToolbar($event, i)"
+    >
+      {{ action.label }}
+    </button>
+  }
+</div>

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

@@ -0,0 +1,71 @@
+import { Component, ElementRef, signal, viewChildren } from '@angular/core';
+
+interface <%= classify(name) %>Action {
+  id: number;
+  label: string;
+}
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  private readonly buttons = viewChildren<ElementRef<HTMLButtonElement>>('toolbarButton');
+
+  protected readonly actions: <%= classify(name) %>Action[] = [
+    { id: 1, label: 'Bold' },
+    { id: 2, label: 'Italic' },
+    { id: 3, label: 'Underline' },
+  ];
+
+  protected readonly activeId = signal(this.actions[0].id);
+
+  private readonly pressedIds = signal<ReadonlySet<number>>(new Set());
+
+  protected isPressed(id: number): boolean {
+    return this.pressedIds().has(id);
+  }
+
+  protected toggle(id: number): void {
+    this.activeId.set(id);
+    const next = new Set(this.pressedIds());
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    this.pressedIds.set(next);
+  }
+
+  // Left/Right/Home/End move focus across toolbar buttons with roving tabindex (APG toolbar pattern).
+  protected navigateToolbar(event: KeyboardEvent, index: number): void {
+    const items = this.buttons();
+    if (items.length === 0) {
+      return;
+    }
+
+    let nextIndex: number;
+    switch (event.key) {
+      case 'ArrowRight':
+        nextIndex = (index + 1) % items.length;
+        break;
+      case 'ArrowLeft':
+        nextIndex = (index - 1 + items.length) % items.length;
+        break;
+      case 'Home':
+        nextIndex = 0;
+        break;
+      case 'End':
+        nextIndex = items.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    this.activeId.set(this.actions[nextIndex].id);
+    items[nextIndex].nativeElement.focus();
+  }
+}

package/src/toolbar/index.d.ts

@@ -0,0 +1 @@
+export declare const toolbar: (options: import("./schema").Schema) => import("@angular-devkit/schematics").Rule;

package/src/toolbar/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toolbar = void 0;
+const generate_component_1 = require("../utils/generate-component");
+exports.toolbar = (0, generate_component_1.createAriaComponentSchematic)();
+//# sourceMappingURL=index.js.map

package/src/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,OAAO,GAAG,IAAA,iDAA4B,GAAE,CAAC"}

package/src/toolbar/index.ts

@@ -0,0 +1,3 @@
+import { createAriaComponentSchematic } from '../utils/generate-component';
+
+export const toolbar = createAriaComponentSchematic();

package/src/toolbar/schema.d.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

package/src/toolbar/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/src/toolbar/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":""}

package/src/toolbar/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularToolbar",
+  "title": "Semmet Angular Toolbar Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Toolbar component with roving-tabindex keyboard navigation, following the W3C ARIA Authoring Practices Guide.",
+  "additionalProperties": false,
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name for the new component. Used to derive the class name, selector, and file names.",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": "What name would you like to use for the toolbar component?"
+    },
+    "path": {
+      "type": "string",
+      "format": "path",
+      "$default": { "$source": "workingDirectory" },
+      "description": "The path where the component files should be created, relative to the workspace root. Defaults to the project's source root.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add the component to.",
+      "$default": { "$source": "projectName" }
+    }
+  },
+  "required": ["name", "project"]
+}

package/src/toolbar/schema.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

package/src/tree-view/files/__name@dasherize__/__name@dasherize__.css.template

@@ -0,0 +1,57 @@
+:host {
+  --semmet-color-primary: #0d7a72;
+  --semmet-color-on-surface: #1b201f;
+  --semmet-color-on-surface-variant: #576260;
+  --semmet-radius-sm: 6px;
+  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
+
+  display: block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+  color: var(--semmet-color-on-surface);
+}
+
+[role='tree'],
+[role='group'] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[role='group'] {
+  padding-left: 1.25rem;
+}
+
+[role='treeitem'] {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.4rem 0.5rem;
+  border-radius: var(--semmet-radius-sm);
+  cursor: pointer;
+  transition: background-color var(--semmet-motion);
+}
+
+[role='treeitem']:hover {
+  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
+}
+
+[role='treeitem']:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: -2px;
+}
+
+[role='treeitem'][aria-expanded]::before {
+  content: '';
+  width: 0.4rem;
+  height: 0.4rem;
+  flex-shrink: 0;
+  border-right: 2px solid var(--semmet-color-on-surface-variant);
+  border-bottom: 2px solid var(--semmet-color-on-surface-variant);
+  transform: rotate(-45deg);
+  transition: transform var(--semmet-motion);
+}
+
+[role='treeitem'][aria-expanded='true']::before {
+  transform: rotate(45deg);
+}

package/src/tree-view/files/__name@dasherize__/__name@dasherize__.html.template

@@ -0,0 +1,30 @@
+<!-- Semmet Angular: Tree View — https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ -->
+<ul role="tree" aria-label="Files">
+  @for (root of tree; track root.id) {
+    <li
+      #treeItem
+      role="treeitem"
+      [attr.aria-expanded]="hasChildren(root) ? isExpanded(root.id) : null"
+      [tabIndex]="activeId() === root.id ? 0 : -1"
+      (click)="activateItem(root)"
+      (keydown)="handleKeydown($event, root.id)"
+    >
+      {{ root.label }}
+      @if (hasChildren(root) && isExpanded(root.id)) {
+        <ul role="group">
+          @for (child of root.children; track child.id) {
+            <li
+              #treeItem
+              role="treeitem"
+              [tabIndex]="activeId() === child.id ? 0 : -1"
+              (click)="activateItem(child)"
+              (keydown)="handleKeydown($event, child.id)"
+            >
+              {{ child.label }}
+            </li>
+          }
+        </ul>
+      }
+    </li>
+  }
+</ul>

package/src/tree-view/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -0,0 +1,140 @@
+import { Component, ElementRef, computed, signal, viewChildren } from '@angular/core';
+
+interface <%= classify(name) %>Node {
+  id: number;
+  label: string;
+  children?: <%= classify(name) %>Node[];
+}
+
+interface VisibleNode {
+  node: <%= classify(name) %>Node;
+  parentId: number | null;
+}
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  private readonly treeItems = viewChildren<ElementRef<HTMLElement>>('treeItem');
+
+  protected readonly tree: <%= classify(name) %>Node[] = [
+    {
+      id: 1,
+      label: 'Documents',
+      children: [
+        { id: 2, label: 'Resume.pdf' },
+        { id: 3, label: 'Cover Letter.docx' },
+      ],
+    },
+  ];
+
+  private readonly expandedIds = signal<ReadonlySet<number>>(new Set([1]));
+  protected readonly activeId = signal(1);
+
+  protected readonly visibleNodes = computed<VisibleNode[]>(() => {
+    const result: VisibleNode[] = [];
+    const walk = (nodes: <%= classify(name) %>Node[], parentId: number | null): void => {
+      for (const node of nodes) {
+        result.push({ node, parentId });
+        if (node.children && this.expandedIds().has(node.id)) {
+          walk(node.children, node.id);
+        }
+      }
+    };
+    walk(this.tree, null);
+    return result;
+  });
+
+  protected isExpanded(id: number): boolean {
+    return this.expandedIds().has(id);
+  }
+
+  protected hasChildren(node: <%= classify(name) %>Node): boolean {
+    return !!node.children && node.children.length > 0;
+  }
+
+  protected toggle(id: number): void {
+    const next = new Set(this.expandedIds());
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    this.expandedIds.set(next);
+  }
+
+  protected activateItem(node: <%= classify(name) %>Node): void {
+    this.focusItem(node.id);
+    if (this.hasChildren(node)) {
+      this.toggle(node.id);
+    }
+  }
+
+  // Up/Down move between visible nodes; Right expands or moves into children; Left collapses
+  // or moves to the parent; Home/End jump to the first/last visible node (APG tree keyboard support).
+  protected handleKeydown(event: KeyboardEvent, id: number): void {
+    const visible = this.visibleNodes();
+    const index = visible.findIndex((entry) => entry.node.id === id);
+    if (index === -1) {
+      return;
+    }
+    const current = visible[index];
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        if (index < visible.length - 1) {
+          this.focusItem(visible[index + 1].node.id);
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        if (index > 0) {
+          this.focusItem(visible[index - 1].node.id);
+        }
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        if (this.hasChildren(current.node)) {
+          if (!this.isExpanded(current.node.id)) {
+            this.toggle(current.node.id);
+          } else if (index < visible.length - 1) {
+            this.focusItem(visible[index + 1].node.id);
+          }
+        }
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        if (this.hasChildren(current.node) && this.isExpanded(current.node.id)) {
+          this.toggle(current.node.id);
+        } else if (current.parentId !== null) {
+          this.focusItem(current.parentId);
+        }
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.focusItem(visible[0].node.id);
+        break;
+      case 'End':
+        event.preventDefault();
+        this.focusItem(visible[visible.length - 1].node.id);
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (this.hasChildren(current.node)) {
+          this.toggle(current.node.id);
+        }
+        break;
+    }
+  }
+
+  private focusItem(id: number): void {
+    this.activeId.set(id);
+    const index = this.visibleNodes().findIndex((entry) => entry.node.id === id);
+    this.treeItems()[index]?.nativeElement.focus();
+  }
+}

package/src/tree-view/index.d.ts

@@ -0,0 +1 @@
+export declare const treeView: (options: import("./schema").Schema) => import("@angular-devkit/schematics").Rule;

package/src/tree-view/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.treeView = void 0;
+const generate_component_1 = require("../utils/generate-component");
+exports.treeView = (0, generate_component_1.createAriaComponentSchematic)();
+//# sourceMappingURL=index.js.map

package/src/tree-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,QAAQ,GAAG,IAAA,iDAA4B,GAAE,CAAC"}

package/src/tree-view/index.ts

@@ -0,0 +1,3 @@
+import { createAriaComponentSchematic } from '../utils/generate-component';
+
+export const treeView = createAriaComponentSchematic();

package/src/tree-view/schema.d.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

package/src/tree-view/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/src/tree-view/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":""}