semmet-angular 0.4.0 → 0.6.0

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

@@ -0,0 +1,26 @@
+<!-- Semmet Angular: Pagination — https://www.w3.org/TR/wai-aria-1.2/#aria-current -->
+<nav aria-label="Pagination">
+  <ul>
+    <li>
+      <button type="button" [disabled]="!hasPrevious()" (click)="goToPrevious()" aria-label="Previous page">
+        Previous
+      </button>
+    </li>
+    @for (page of pages; track page) {
+      <li>
+        <a
+          [href]="'?page=' + page"
+          [attr.aria-current]="page === currentPage() ? 'page' : null"
+          (click)="goToPage(page)"
+        >
+          {{ page }}
+        </a>
+      </li>
+    }
+    <li>
+      <button type="button" [disabled]="!hasNext()" (click)="goToNext()" aria-label="Next page">
+        Next
+      </button>
+    </li>
+  </ul>
+</nav>

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

@@ -0,0 +1,31 @@
+import { Component, computed, signal } from '@angular/core';
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  protected readonly pages = [1, 2, 3, 4, 5];
+  protected readonly currentPage = signal(1);
+
+  protected readonly hasPrevious = computed(() => this.currentPage() > 1);
+  protected readonly hasNext = computed(() => this.currentPage() < this.pages.length);
+
+  protected goToPage(page: number): void {
+    this.currentPage.set(page);
+  }
+
+  protected goToPrevious(): void {
+    if (this.hasPrevious()) {
+      this.currentPage.update((page) => page - 1);
+    }
+  }
+
+  protected goToNext(): void {
+    if (this.hasNext()) {
+      this.currentPage.update((page) => page + 1);
+    }
+  }
+}

package/src/pagination/index.d.ts

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

package/src/pagination/index.js

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

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

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

package/src/pagination/schema.d.ts

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

package/src/pagination/schema.js

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

package/src/pagination/schema.js.map

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

package/src/pagination/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularPagination",
+  "title": "Semmet Angular Pagination Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Pagination component with working page state, following W3C ARIA guidance on aria-current.",
+  "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 pagination 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/pagination/schema.ts

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

package/src/progress-bar/files/__name@dasherize__/__name@dasherize__.css.template

@@ -0,0 +1,53 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-on-surface: #18181b;
+  --semmet-color-on-surface-variant: #52525b;
+  --semmet-radius-sm: 8px;
+  --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;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+}
+
+progress {
+  display: block;
+  width: 100%;
+  max-width: 20rem;
+  height: 0.5rem;
+  margin-bottom: 0.75rem;
+  accent-color: var(--semmet-color-primary);
+}
+
+button {
+  font: inherit;
+  font-weight: 500;
+  color: var(--semmet-color-primary);
+  background: none;
+  border: 1px solid currentColor;
+  border-radius: var(--semmet-radius-sm);
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: background-color var(--semmet-motion);
+}
+
+button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--semmet-color-primary) 8%, transparent);
+}
+
+button:disabled {
+  color: var(--semmet-color-on-surface-variant);
+  cursor: not-allowed;
+}
+
+button:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}

package/src/progress-bar/files/__name@dasherize__/__name@dasherize__.html.template

@@ -0,0 +1,6 @@
+<!-- Semmet Angular: Progress Bar — https://www.w3.org/TR/wai-aria-1.2/#progressbar -->
+<label [for]="instanceId">Uploading file</label>
+<progress [id]="instanceId" [value]="value()" max="100">{{ value() }}%</progress>
+<button type="button" (click)="advance()" [disabled]="isComplete()">
+  {{ isComplete() ? 'Done' : 'Simulate progress' }}
+</button>

package/src/progress-bar/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -0,0 +1,19 @@
+import { Component, computed, 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 value = signal(40);
+  protected readonly isComplete = computed(() => this.value() >= 100);
+
+  protected advance(): void {
+    this.value.update((current) => Math.min(100, current + 20));
+  }
+}

package/src/progress-bar/index.d.ts

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

package/src/progress-bar/index.js

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

package/src/progress-bar/index.js.map

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

package/src/progress-bar/index.ts

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

package/src/progress-bar/schema.d.ts

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

package/src/progress-bar/schema.js

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

package/src/progress-bar/schema.js.map

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

package/src/progress-bar/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularProgressBar",
+  "title": "Semmet Angular Progress Bar Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Progress Bar component (native <progress>, signal-based value).",
+  "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 progress bar 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/progress-bar/schema.ts

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

package/src/radio-group/files/__name@dasherize__/__name@dasherize__.css.template

@@ -0,0 +1,66 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-outline: #71717a;
+  --semmet-color-on-surface: #18181b;
+  --semmet-color-on-surface-variant: #52525b;
+  --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;
+}
+
+[role='radiogroup'] > span {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+}
+
+[role='radio'] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0.4rem 0 0.4rem 1.75rem;
+  color: var(--semmet-color-on-surface-variant);
+  cursor: pointer;
+  user-select: none;
+}
+
+[role='radio']::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  border: 2px solid var(--semmet-color-outline);
+  border-radius: 50%;
+  transition: border-color var(--semmet-motion);
+}
+
+[role='radio'][aria-checked='true'] {
+  color: var(--semmet-color-on-surface);
+  font-weight: 500;
+}
+
+[role='radio'][aria-checked='true']::before {
+  border-color: var(--semmet-color-primary);
+}
+
+[role='radio'][aria-checked='true']::after {
+  content: '';
+  position: absolute;
+  left: 0.3125rem;
+  top: 0.3125rem;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  background: var(--semmet-color-primary);
+}
+
+[role='radio']:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}

package/src/radio-group/files/__name@dasherize__/__name@dasherize__.html.template

@@ -0,0 +1,16 @@
+<!-- Semmet Angular: Radio Group — https://www.w3.org/WAI/ARIA/apg/patterns/radio/ -->
+<div role="radiogroup" [attr.aria-labelledby]="instanceId + '-label'">
+  <span [id]="instanceId + '-label'">Choose a plan</span>
+  @for (option of options; track option.id; let i = $index) {
+    <div
+      #radio
+      role="radio"
+      [attr.aria-checked]="selectedId() === option.id"
+      [tabIndex]="selectedId() === option.id ? 0 : -1"
+      (click)="select(option.id)"
+      (keydown)="navigateGroup($event, i)"
+    >
+      {{ option.label }}
+    </div>
+  }
+</div>

package/src/radio-group/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -0,0 +1,62 @@
+import { Component, ElementRef, signal, viewChildren } from '@angular/core';
+
+interface <%= classify(name) %>Option {
+  id: number;
+  label: string;
+}
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  private readonly radios = viewChildren<ElementRef<HTMLElement>>('radio');
+
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly options: <%= classify(name) %>Option[] = [
+    { id: 1, label: 'Monthly' },
+    { id: 2, label: 'Yearly' },
+  ];
+
+  protected readonly selectedId = signal(this.options[0].id);
+
+  protected select(id: number): void {
+    this.selectedId.set(id);
+  }
+
+  // Up/Down/Left/Right move focus and selection together; Home/End jump to first/last (APG radio group pattern).
+  protected navigateGroup(event: KeyboardEvent, index: number): void {
+    const items = this.radios();
+    if (items.length === 0) {
+      return;
+    }
+
+    let nextIndex: number;
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowRight':
+        nextIndex = (index + 1) % items.length;
+        break;
+      case 'ArrowUp':
+      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.selectedId.set(this.options[nextIndex].id);
+    items[nextIndex].nativeElement.focus();
+  }
+}

package/src/radio-group/index.d.ts

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

package/src/radio-group/index.js

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

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

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

package/src/radio-group/schema.d.ts

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

package/src/radio-group/schema.js

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

package/src/radio-group/schema.js.map

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

package/src/radio-group/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularRadioGroup",
+  "title": "Semmet Angular Radio Group Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Radio Group 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 radio group 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/radio-group/schema.ts

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

package/src/skip-link/files/__name@dasherize__/__name@dasherize__.css.template

@@ -0,0 +1,30 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-on-primary: #ffffff;
+  --semmet-radius-sm: 8px;
+  --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;
+}
+
+.skip-link {
+  position: absolute;
+  top: -3rem;
+  left: 0.5rem;
+  z-index: 100;
+  padding: 0.625rem 1rem;
+  color: var(--semmet-color-on-primary);
+  background: var(--semmet-color-primary);
+  border-radius: var(--semmet-radius-sm);
+  text-decoration: none;
+  font-weight: 500;
+  transition: top var(--semmet-motion);
+}
+
+.skip-link:focus-visible {
+  top: 0.5rem;
+  outline: 2px solid var(--semmet-color-on-primary);
+  outline-offset: 2px;
+}

package/src/skip-link/files/__name@dasherize__/__name@dasherize__.html.template

@@ -0,0 +1,3 @@
+<!-- Semmet Angular: Skip Link — https://www.w3.org/WAI/WCAG21/Techniques/general/G1 -->
+<a class="skip-link" href="#main-content">Skip to main content</a>
+<!-- Add id="main-content" to your <main> element -->

package/src/skip-link/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {}

package/src/skip-link/index.d.ts

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

package/src/skip-link/index.js

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

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

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

package/src/skip-link/schema.d.ts

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

package/src/skip-link/schema.js

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

package/src/skip-link/schema.js.map

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

package/src/skip-link/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularSkipLink",
+  "title": "Semmet Angular Skip Link Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Skip Link component (skip to main content), per WCAG Technique G1.",
+  "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 skip link 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/skip-link/schema.ts

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

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

@@ -0,0 +1,54 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-outline: #d4d4d8;
+  --semmet-color-on-surface: #18181b;
+  --semmet-motion: 120ms cubic-bezier(0.2, 0, 0, 1);
+
+  display: block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+  max-width: 20rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.75rem;
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+}
+
+.track {
+  position: relative;
+  height: 0.25rem;
+  border-radius: 999px;
+  background: var(--semmet-color-outline);
+  cursor: pointer;
+  touch-action: none;
+}
+
+.fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: 999px;
+  background: var(--semmet-color-primary);
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background: var(--semmet-color-primary);
+  box-shadow: 0 1px 3px rgba(20, 24, 23, 0.25);
+  cursor: pointer;
+  transition: box-shadow var(--semmet-motion);
+}
+
+.thumb:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}