semmet-angular 0.4.0 → 0.6.0

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

@@ -0,0 +1,16 @@
+<!-- Semmet Angular: Slider — https://www.w3.org/WAI/ARIA/apg/patterns/slider/ -->
+<label [id]="instanceId + '-label'">Volume</label>
+<div #track class="track" (pointerdown)="handlePointerDown($event)" (pointermove)="handlePointerMove($event)">
+  <div class="fill" [style.width.%]="value()"></div>
+  <div
+    class="thumb"
+    role="slider"
+    tabindex="0"
+    [attr.aria-labelledby]="instanceId + '-label'"
+    [attr.aria-valuemin]="min"
+    [attr.aria-valuemax]="max"
+    [attr.aria-valuenow]="value()"
+    [style.left.%]="value()"
+    (keydown)="handleKeydown($event)"
+  ></div>
+</div>

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

@@ -0,0 +1,79 @@
+import { Component, ElementRef, signal, viewChild } from '@angular/core';
+
+const MIN = 0;
+const MAX = 100;
+const STEP = 1;
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  private readonly trackRef = viewChild<ElementRef<HTMLElement>>('track');
+
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly min = MIN;
+  protected readonly max = MAX;
+  protected readonly value = signal(50);
+
+  protected handleKeydown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'ArrowRight':
+      case 'ArrowUp':
+        event.preventDefault();
+        this.setValue(this.value() + STEP);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        event.preventDefault();
+        this.setValue(this.value() - STEP);
+        break;
+      case 'PageUp':
+        event.preventDefault();
+        this.setValue(this.value() + STEP * 10);
+        break;
+      case 'PageDown':
+        event.preventDefault();
+        this.setValue(this.value() - STEP * 10);
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.setValue(this.min);
+        break;
+      case 'End':
+        event.preventDefault();
+        this.setValue(this.max);
+        break;
+    }
+  }
+
+  protected handlePointerDown(event: PointerEvent): void {
+    (event.target as HTMLElement).setPointerCapture(event.pointerId);
+    this.setValueFromPointer(event);
+  }
+
+  protected handlePointerMove(event: PointerEvent): void {
+    if (event.buttons !== 1) {
+      return;
+    }
+    this.setValueFromPointer(event);
+  }
+
+  private setValueFromPointer(event: PointerEvent): void {
+    const track = this.trackRef()?.nativeElement;
+    if (!track) {
+      return;
+    }
+    const rect = track.getBoundingClientRect();
+    const ratio = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+    this.setValue(Math.round(this.min + ratio * (this.max - this.min)));
+  }
+
+  private setValue(next: number): void {
+    this.value.set(Math.min(this.max, Math.max(this.min, next)));
+  }
+}

package/src/slider/index.d.ts

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

package/src/slider/index.js

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

package/src/slider/index.js.map

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

package/src/slider/index.ts

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

package/src/slider/schema.d.ts

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

package/src/slider/schema.js

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

package/src/slider/schema.js.map

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

package/src/slider/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularSlider",
+  "title": "Semmet Angular Slider Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Slider component (keyboard + pointer drag support) 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 slider 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/slider/schema.ts

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

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

@@ -0,0 +1,64 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-outline: #d4d4d8;
+  --semmet-color-on-surface: #18181b;
+  --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;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+}
+
+.stepper {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-sm);
+  overflow: hidden;
+}
+
+button {
+  font: inherit;
+  font-size: 1.125rem;
+  color: var(--semmet-color-on-surface);
+  background: none;
+  border: none;
+  width: 2.25rem;
+  height: 2.25rem;
+  cursor: pointer;
+  transition: background-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;
+}
+
+input {
+  width: 3rem;
+  height: 2.25rem;
+  border: none;
+  border-left: 1px solid var(--semmet-color-outline);
+  border-right: 1px solid var(--semmet-color-outline);
+  text-align: center;
+  font: inherit;
+  color: var(--semmet-color-on-surface);
+  box-sizing: border-box;
+}
+
+input:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: -2px;
+}

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

@@ -0,0 +1,19 @@
+<!-- Semmet Angular: Spinbutton — https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/ -->
+<label [id]="instanceId + '-label'" [for]="instanceId + '-input'">Quantity</label>
+<div class="stepper">
+  <button type="button" (click)="decrement()" aria-label="Decrease quantity">−</button>
+  <input
+    type="text"
+    inputmode="numeric"
+    role="spinbutton"
+    [id]="instanceId + '-input'"
+    [attr.aria-labelledby]="instanceId + '-label'"
+    [attr.aria-valuemin]="min"
+    [attr.aria-valuemax]="max"
+    [attr.aria-valuenow]="value()"
+    [value]="value()"
+    (keydown)="handleKeydown($event)"
+    (change)="handleInput($event)"
+  />
+  <button type="button" (click)="increment()" aria-label="Increase quantity">+</button>
+</div>

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

@@ -0,0 +1,59 @@
+import { Component, signal } from '@angular/core';
+
+const MIN = 0;
+const MAX = 99;
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly min = MIN;
+  protected readonly max = MAX;
+  protected readonly value = signal(1);
+
+  protected increment(): void {
+    this.setValue(this.value() + 1);
+  }
+
+  protected decrement(): void {
+    this.setValue(this.value() - 1);
+  }
+
+  protected handleKeydown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        this.increment();
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.decrement();
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.setValue(this.min);
+        break;
+      case 'End':
+        event.preventDefault();
+        this.setValue(this.max);
+        break;
+    }
+  }
+
+  protected handleInput(event: Event): void {
+    const raw = Number((event.target as HTMLInputElement).value);
+    if (!Number.isNaN(raw)) {
+      this.setValue(raw);
+    }
+  }
+
+  private setValue(next: number): void {
+    this.value.set(Math.min(this.max, Math.max(this.min, next)));
+  }
+}

package/src/spinbutton/index.d.ts

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

package/src/spinbutton/index.js

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

package/src/spinbutton/index.js.map

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

package/src/spinbutton/index.ts

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

package/src/spinbutton/schema.d.ts

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

package/src/spinbutton/schema.js

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

package/src/spinbutton/schema.js.map

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

package/src/spinbutton/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularSpinbutton",
+  "title": "Semmet Angular Spinbutton Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Spinbutton component (numeric stepper) 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 spinbutton 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/spinbutton/schema.ts

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

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

@@ -0,0 +1,68 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-outline: #71717a;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-on-surface: #18181b;
+  --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='switch'] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding-left: 2.75rem;
+  min-height: 1.5rem;
+  font: inherit;
+  color: var(--semmet-color-on-surface);
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+[role='switch']::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 2.25rem;
+  height: 1.25rem;
+  box-sizing: border-box;
+  border: 2px solid var(--semmet-color-outline);
+  border-radius: 999px;
+  background: transparent;
+  transition: background-color var(--semmet-motion), border-color var(--semmet-motion);
+}
+
+[role='switch']::after {
+  content: '';
+  position: absolute;
+  left: 0.2rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0.85rem;
+  height: 0.85rem;
+  border-radius: 50%;
+  background: var(--semmet-color-outline);
+  transition: transform var(--semmet-motion), background-color var(--semmet-motion);
+}
+
+[role='switch'][aria-checked='true']::before {
+  background: var(--semmet-color-primary);
+  border-color: var(--semmet-color-primary);
+}
+
+[role='switch'][aria-checked='true']::after {
+  background: var(--semmet-color-surface);
+  transform: translateY(-50%) translateX(1rem);
+}
+
+[role='switch']:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}

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

@@ -0,0 +1,4 @@
+<!-- Semmet Angular: Switch — https://www.w3.org/WAI/ARIA/apg/patterns/switch/ -->
+<button type="button" role="switch" [attr.aria-checked]="checked()" [id]="instanceId" (click)="toggle()">
+  Enable notifications
+</button>

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

@@ -0,0 +1,18 @@
+import { Component, signal } from '@angular/core';
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly checked = signal(false);
+
+  protected toggle(): void {
+    this.checked.update((value) => !value);
+  }
+}

package/src/switch/index.d.ts

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

package/src/switch/index.js

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

package/src/switch/index.js.map

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

package/src/switch/index.ts

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

package/src/switch/schema.d.ts

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

package/src/switch/schema.js

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

package/src/switch/schema.js.map

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

package/src/switch/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularSwitch",
+  "title": "Semmet Angular Switch Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Switch component (signal-based boolean toggle) 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 switch 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/switch/schema.ts

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

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

@@ -0,0 +1,40 @@
+:host {
+  --semmet-color-outline: #d4d4d8;
+  --semmet-color-on-surface: #18181b;
+  --semmet-color-on-surface-variant: #52525b;
+  --semmet-color-surface-variant: #f4f4f5;
+
+  display: block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+caption {
+  text-align: left;
+  margin-bottom: 0.75rem;
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+}
+
+th,
+td {
+  text-align: left;
+  padding: 0.625rem 0.75rem;
+  border-bottom: 1px solid var(--semmet-color-outline);
+}
+
+thead th {
+  background: var(--semmet-color-surface-variant);
+  color: var(--semmet-color-on-surface-variant);
+  font-weight: 500;
+}
+
+tbody th {
+  color: var(--semmet-color-on-surface);
+  font-weight: 500;
+}

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

@@ -0,0 +1,18 @@
+<!-- Semmet Angular: Table — https://www.w3.org/WAI/ARIA/apg/patterns/table/ -->
+<table>
+  <caption>Quarterly results</caption>
+  <thead>
+    <tr>
+      <th scope="col">Quarter</th>
+      <th scope="col">Revenue</th>
+    </tr>
+  </thead>
+  <tbody>
+    @for (row of rows; track row.quarter) {
+      <tr>
+        <th scope="row">{{ row.quarter }}</th>
+        <td>{{ row.revenue }}</td>
+      </tr>
+    }
+  </tbody>
+</table>

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

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+interface <%= classify(name) %>Row {
+  quarter: string;
+  revenue: string;
+}
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  protected readonly rows: <%= classify(name) %>Row[] = [
+    { quarter: 'Q1', revenue: '$12,000' },
+    { quarter: 'Q2', revenue: '$15,500' },
+  ];
+}

package/src/table/index.d.ts

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

package/src/table/index.js

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

package/src/table/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/table/index.ts

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

package/src/table/schema.d.ts

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

package/src/table/schema.js

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

package/src/table/schema.js.map

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