semmet-angular 0.3.0 → 0.5.0

package/src/menu-button/files/__name@dasherize__/__name@dasherize__.css.template

@@ -0,0 +1,82 @@
+:host {
+  --semmet-color-primary: #0d7a72;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-outline: #d7dedd;
+  --semmet-color-on-surface: #1b201f;
+  --semmet-color-on-surface-variant: #576260;
+  --semmet-radius-sm: 8px;
+  --semmet-radius-md: 12px;
+  --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);
+
+  position: relative;
+  display: inline-block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+}
+
+button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font: inherit;
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-sm);
+  padding: 0.5rem 1rem;
+  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;
+}
+
+button::after {
+  content: '';
+  width: 0.4rem;
+  height: 0.4rem;
+  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);
+}
+
+button[aria-expanded='true']::after {
+  transform: rotate(-135deg);
+}
+
+ul {
+  position: absolute;
+  z-index: 1;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  min-width: 10rem;
+  margin: 0;
+  padding: 0.375rem;
+  list-style: none;
+  background: var(--semmet-color-surface);
+  border-radius: var(--semmet-radius-md);
+  box-shadow: var(--semmet-elevation-3);
+}
+
+[role='menuitem'] {
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  color: var(--semmet-color-on-surface);
+  cursor: pointer;
+  transition: background-color var(--semmet-motion);
+}
+
+[role='menuitem']:hover,
+[role='menuitem']:focus-visible {
+  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
+  outline: none;
+}

package/src/menu-button/files/__name@dasherize__/__name@dasherize__.html.template

@@ -0,0 +1,34 @@
+<!-- Semmet Angular: Menu Button — https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ -->
+<button
+  #menuButton
+  type="button"
+  [id]="instanceId + '-button'"
+  aria-haspopup="true"
+  [attr.aria-expanded]="isOpen()"
+  [attr.aria-controls]="instanceId + '-menu'"
+  (click)="toggle()"
+  (keydown)="handleButtonKeydown($event)"
+>
+  Options
+</button>
+<ul
+  #menu
+  role="menu"
+  [id]="instanceId + '-menu'"
+  [attr.aria-labelledby]="instanceId + '-button'"
+  [hidden]="!isOpen()"
+>
+  @for (item of items; track item.id; let i = $index) {
+    <li role="none">
+      <div
+        #menuItem
+        role="menuitem"
+        tabindex="-1"
+        (click)="select(item)"
+        (keydown)="handleMenuKeydown($event, item, i)"
+      >
+        {{ item.label }}
+      </div>
+    </li>
+  }
+</ul>

package/src/menu-button/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -0,0 +1,104 @@
+import { Component, ElementRef, Injector, afterNextRender, inject, signal, viewChild, viewChildren } from '@angular/core';
+
+interface <%= classify(name) %>Item {
+  id: number;
+  label: string;
+}
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+  host: {
+    '(document:click)': 'closeOnOutsideClick($event)',
+  },
+})
+export class <%= classify(name) %> {
+  private readonly injector = inject(Injector);
+  private readonly buttonRef = viewChild<ElementRef<HTMLButtonElement>>('menuButton');
+  private readonly menuRef = viewChild<ElementRef<HTMLElement>>('menu');
+  private readonly menuItems = viewChildren<ElementRef<HTMLElement>>('menuItem');
+
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly items: <%= classify(name) %>Item[] = [
+    { id: 1, label: 'First option' },
+    { id: 2, label: 'Second option' },
+    { id: 3, label: 'Third option' },
+  ];
+
+  protected readonly isOpen = signal(false);
+
+  protected toggle(): void {
+    this.isOpen.set(true);
+    this.focusFirstItem();
+  }
+
+  protected close(): void {
+    this.isOpen.set(false);
+    this.buttonRef()?.nativeElement.focus();
+  }
+
+  protected select(item: <%= classify(name) %>Item): void {
+    // Wire up the selected item's action here.
+    this.close();
+  }
+
+  protected handleButtonKeydown(event: KeyboardEvent): void {
+    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.isOpen.set(true);
+      this.focusFirstItem();
+    }
+  }
+
+  protected handleMenuKeydown(event: KeyboardEvent, item: <%= classify(name) %>Item, index: number): void {
+    const items = this.menuItems();
+    switch (event.key) {
+      case 'Escape':
+        event.preventDefault();
+        this.close();
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        items[(index + 1) % items.length]?.nativeElement.focus();
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        items[(index - 1 + items.length) % items.length]?.nativeElement.focus();
+        break;
+      case 'Home':
+        event.preventDefault();
+        items[0]?.nativeElement.focus();
+        break;
+      case 'End':
+        event.preventDefault();
+        items[items.length - 1]?.nativeElement.focus();
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        this.select(item);
+        break;
+    }
+  }
+
+  protected closeOnOutsideClick(event: MouseEvent): void {
+    if (!this.isOpen()) {
+      return;
+    }
+    const target = event.target as Node;
+    const insideButton = this.buttonRef()?.nativeElement.contains(target);
+    const insideMenu = this.menuRef()?.nativeElement.contains(target);
+    if (!insideButton && !insideMenu) {
+      this.isOpen.set(false);
+    }
+  }
+
+  private focusFirstItem(): void {
+    // Focus moves into the menu only after Angular flushes the DOM update that un-hides it.
+    afterNextRender(() => this.menuItems()[0]?.nativeElement.focus(), { injector: this.injector });
+  }
+}

package/src/menu-button/index.d.ts

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

package/src/menu-button/index.js

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

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

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

package/src/menu-button/schema.d.ts

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

package/src/menu-button/schema.js

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

package/src/menu-button/schema.js.map

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

package/src/menu-button/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularMenuButton",
+  "title": "Semmet Angular Menu Button Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Menu Button (dropdown) component with full keyboard 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 menu button 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/menu-button/schema.ts

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

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

@@ -0,0 +1,22 @@
+:host {
+  --semmet-color-primary: #0d7a72;
+  --semmet-color-on-surface: #1b201f;
+
+  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);
+}
+
+meter {
+  width: 100%;
+  max-width: 20rem;
+  height: 0.75rem;
+  accent-color: var(--semmet-color-primary);
+}

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

@@ -0,0 +1,5 @@
+<!-- Semmet Angular: Meter — https://www.w3.org/TR/wai-aria-1.2/#meter -->
+<label [for]="instanceId">Disk usage</label>
+<meter [id]="instanceId" min="0" max="100" [value]="value()" low="50" high="90" optimum="0">
+  {{ value() }}%
+</meter>

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

@@ -0,0 +1,14 @@
+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 value = signal(70);
+}

package/src/meter/index.d.ts

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

package/src/meter/index.js

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

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

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

package/src/meter/schema.d.ts

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

package/src/meter/schema.js

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

package/src/meter/schema.js.map

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

package/src/meter/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularMeter",
+  "title": "Semmet Angular Meter Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Meter component (native <meter> gauge bound to a signal).",
+  "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 meter 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/meter/schema.ts

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

package/src/navigation-menu/files/__name@dasherize__/__name@dasherize__.css.template

@@ -0,0 +1,88 @@
+:host {
+  --semmet-color-primary: #0d7a72;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-on-surface: #1b201f;
+  --semmet-radius-sm: 8px;
+  --semmet-radius-md: 12px;
+  --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;
+}
+
+nav > ul {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+nav > ul > li {
+  position: relative;
+}
+
+a,
+button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font: inherit;
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+  background: none;
+  border: none;
+  border-radius: var(--semmet-radius-sm);
+  padding: 0.6rem 0.875rem;
+  cursor: pointer;
+  text-decoration: none;
+  transition: background-color var(--semmet-motion);
+}
+
+a:hover,
+button:hover {
+  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
+}
+
+a:focus-visible,
+button:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}
+
+button::after {
+  content: '';
+  width: 0.4rem;
+  height: 0.4rem;
+  border-right: 2px solid var(--semmet-color-on-surface);
+  border-bottom: 2px solid var(--semmet-color-on-surface);
+  transform: rotate(45deg);
+  transition: transform var(--semmet-motion);
+}
+
+button[aria-expanded='true']::after {
+  transform: rotate(-135deg);
+}
+
+nav > ul ul {
+  position: absolute;
+  z-index: 1;
+  top: 100%;
+  left: 0;
+  min-width: 12rem;
+  margin: 0.25rem 0 0;
+  padding: 0.375rem;
+  list-style: none;
+  background: var(--semmet-color-surface);
+  border-radius: var(--semmet-radius-md);
+  box-shadow: var(--semmet-elevation-3);
+}
+
+nav > ul ul li a {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}

package/src/navigation-menu/files/__name@dasherize__/__name@dasherize__.html.template

@@ -0,0 +1,22 @@
+<!-- Semmet Angular: Navigation Menu (Disclosure) — https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/ -->
+<!-- Deliberately avoids the ARIA menu/menuitem roles — APG reserves those for app-style menus. -->
+<nav aria-label="Main">
+  <ul>
+    <li><a href="/">Home</a></li>
+    <li>
+      <button
+        type="button"
+        [attr.aria-expanded]="expanded()"
+        [attr.aria-controls]="instanceId + '-submenu'"
+        [id]="instanceId + '-button'"
+        (click)="toggleSubmenu()"
+      >
+        Products
+      </button>
+      <ul [id]="instanceId + '-submenu'" [attr.aria-labelledby]="instanceId + '-button'" [hidden]="!expanded()">
+        <li><a href="/products/first">First product</a></li>
+        <li><a href="/products/second">Second product</a></li>
+      </ul>
+    </li>
+  </ul>
+</nav>

package/src/navigation-menu/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 expanded = signal(false);
+
+  protected toggleSubmenu(): void {
+    this.expanded.update((value) => !value);
+  }
+}

package/src/navigation-menu/index.d.ts

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

package/src/navigation-menu/index.js

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

package/src/navigation-menu/index.js.map

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

package/src/navigation-menu/index.ts

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

package/src/navigation-menu/schema.d.ts

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

package/src/navigation-menu/schema.js

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

package/src/navigation-menu/schema.js.map

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

package/src/navigation-menu/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularNavigationMenu",
+  "title": "Semmet Angular Navigation Menu Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular disclosure-style navigation menu component, 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 navigation menu 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/navigation-menu/schema.ts

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

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

@@ -0,0 +1,63 @@
+:host {
+  --semmet-color-primary: #0d7a72;
+  --semmet-color-on-primary: #ffffff;
+  --semmet-color-on-surface: #1b201f;
+  --semmet-color-on-surface-variant: #576260;
+  --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;
+}
+
+ul {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+a,
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  padding: 0 0.625rem;
+  font: inherit;
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--semmet-radius-sm);
+  text-decoration: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: background-color var(--semmet-motion), color var(--semmet-motion);
+}
+
+a:hover,
+button:not(:disabled):hover {
+  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
+}
+
+a:focus-visible,
+button:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}
+
+a[aria-current='page'] {
+  background: var(--semmet-color-primary);
+  color: var(--semmet-color-on-primary);
+}
+
+button:disabled {
+  color: var(--semmet-color-on-surface-variant);
+  opacity: 0.5;
+  cursor: not-allowed;
+}