semmet-angular 0.11.0 → 0.13.0

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

@@ -0,0 +1,65 @@
+import { Component, ElementRef, Injector, afterNextRender, computed, inject, input, signal, viewChild } from '@angular/core';
+
+type <%= classify(name) %>Placement = 'top' | 'right' | 'bottom' | 'left';
+
+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 hostRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly injector = inject(Injector);
+  private readonly popoverRef = viewChild<ElementRef<HTMLElement>>('popover');
+
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly isOpen = signal(false);
+
+  readonly triggerLabel = input('More information');
+  readonly title = input('Helpful context');
+  readonly content = input('Use popovers for short contextual help that needs a button, link, or richer text.');
+  readonly closeLabel = input('Close popover');
+  readonly placement = input<<%= classify(name) %>Placement>('bottom');
+
+  protected readonly popoverClasses = computed(() => [
+    'semmet-popover__panel',
+    `semmet-popover__panel--${this.placement()}`,
+  ].join(' '));
+
+  protected toggle(): void {
+    this.isOpen.update((value) => !value);
+    if (!this.isOpen()) {
+      return;
+    }
+
+    afterNextRender(() => this.popoverRef()?.nativeElement.focus(), { injector: this.injector });
+  }
+
+  protected close(): void {
+    this.isOpen.set(false);
+  }
+
+  protected handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.close();
+    }
+  }
+
+  protected closeOnOutsideClick(event: MouseEvent): void {
+    if (!this.isOpen()) {
+      return;
+    }
+
+    const target = event.target as Node;
+    if (!this.hostRef.nativeElement.contains(target)) {
+      this.close();
+    }
+  }
+}

package/src/popover/index.d.ts

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

package/src/popover/index.js

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

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

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

package/src/popover/schema.d.ts

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

package/src/popover/schema.js

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

package/src/popover/schema.js.map

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

package/src/popover/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularPopover",
+  "title": "Semmet Angular Popover Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Popover component with a disclosure trigger, non-modal dialog semantics, Escape close, and outside-click dismissal.",
+  "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 popover 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/popover/schema.ts

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

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Progress Bar — https://www.w3.org/TR/wai-aria-1.2/#progressbar -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <label [for]="instanceId">Uploading file</label>
 <progress [id]="instanceId" [value]="value()" max="100">{{ value() }}%</progress>
 <button type="button" (click)="advance()" [disabled]="isComplete()">

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Radio Group — https://www.w3.org/WAI/ARIA/apg/patterns/radio/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <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) {

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

@@ -0,0 +1,92 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-outline: #d4d4d8;
+  --semmet-color-on-surface: #27272a;
+  --semmet-color-on-surface-variant: #71717a;
+  --semmet-color-danger: #b42318;
+  --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;
+}
+
+.semmet-select {
+  display: grid;
+  gap: 0.5rem;
+  color: var(--semmet-color-on-surface);
+}
+
+.semmet-select__label {
+  font-weight: 650;
+}
+
+.semmet-select__required {
+  color: var(--semmet-color-danger);
+}
+
+.semmet-select__control-wrap {
+  position: relative;
+  display: block;
+}
+
+.semmet-select__control-wrap::after {
+  position: absolute;
+  top: 50%;
+  right: 1rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  pointer-events: none;
+  transform: translateY(-65%) rotate(45deg);
+  content: '';
+}
+
+.semmet-select__control {
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.625rem 2.5rem 0.625rem 0.875rem;
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-sm);
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  font: inherit;
+  line-height: 1.3;
+  appearance: none;
+  transition:
+    border-color var(--semmet-motion),
+    box-shadow var(--semmet-motion),
+    opacity var(--semmet-motion);
+}
+
+.semmet-select__control:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}
+
+.semmet-select__control[aria-invalid='true'] {
+  border-color: var(--semmet-color-danger);
+}
+
+.semmet-select__control:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.semmet-select__hint,
+.semmet-select__error {
+  margin: 0.375rem 0 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.semmet-select__hint {
+  color: var(--semmet-color-on-surface-variant);
+}
+
+.semmet-select__error {
+  color: var(--semmet-color-danger);
+}

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

@@ -0,0 +1,39 @@
+<!-- Semmet Angular: Select - native select keeps platform semantics and form behavior. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> label="Category" [(value)]="category" [required]="true" />
+-->
+<label class="semmet-select" [for]="instanceId">
+  <span class="semmet-select__label">
+    {{ label() }}
+    @if (required()) {
+      <span class="semmet-select__required" aria-hidden="true">*</span>
+    }
+  </span>
+  <span class="semmet-select__control-wrap">
+    <select
+      [id]="instanceId"
+      class="semmet-select__control"
+      [value]="value()"
+      [required]="required()"
+      [disabled]="disabled()"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-invalid]="hasError()"
+      (change)="handleChange($event)"
+    >
+      @for (option of options(); track option.value) {
+        <option [value]="option.value" [disabled]="option.disabled">
+          {{ option.label }}
+        </option>
+      }
+    </select>
+  </span>
+</label>
+@if (hint()) {
+  <p class="semmet-select__hint" [id]="instanceId + '-hint'">{{ hint() }}</p>
+}
+@if (hasError()) {
+  <p class="semmet-select__error" [id]="instanceId + '-error'">{{ errorMessage() }}</p>
+}

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

@@ -0,0 +1,51 @@
+import { Component, booleanAttribute, computed, input, model } from '@angular/core';
+
+interface <%= classify(name) %>Option {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+const DEFAULT_OPTIONS: readonly <%= classify(name) %>Option[] = [
+  { value: '', label: 'Select an option', disabled: true },
+  { value: 'design', label: 'Design' },
+  { value: 'engineering', label: 'Engineering' },
+  { value: 'research', label: 'Research' },
+];
+
+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++}`;
+
+  readonly label = input('Category');
+  readonly hint = input('Choose the option that best matches your need.');
+  readonly errorMessage = input('');
+  readonly required = input(false, { transform: booleanAttribute });
+  readonly disabled = input(false, { transform: booleanAttribute });
+  readonly options = input<readonly <%= classify(name) %>Option[]>(DEFAULT_OPTIONS);
+  readonly value = model('');
+
+  protected readonly hasError = computed(() => this.errorMessage().trim().length > 0);
+
+  protected readonly describedBy = computed(() => {
+    const ids: string[] = [];
+    if (this.hint().trim().length > 0) {
+      ids.push(`${this.instanceId}-hint`);
+    }
+    if (this.hasError()) {
+      ids.push(`${this.instanceId}-error`);
+    }
+    return ids.length > 0 ? ids.join(' ') : null;
+  });
+
+  protected handleChange(event: Event): void {
+    this.value.set((event.target as HTMLSelectElement).value);
+  }
+}

package/src/select/index.d.ts

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

package/src/select/index.js

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

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

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

package/src/select/schema.d.ts

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

package/src/select/schema.js

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

package/src/select/schema.js.map

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

package/src/select/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularSelect",
+  "title": "Semmet Angular Select Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Select component using native select semantics, label, hint text, validation message wiring, and signal-based value state.",
+  "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 select 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/select/schema.ts

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

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Skeleton Loading - decorative placeholder for pending content. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> [lines]="3" label="Loading profile" />
+-->
 @if (variant() === 'text') {
   <span
     [id]="instanceId"

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

@@ -1,3 +1,10 @@
 <!-- Semmet Angular: Skip Link — https://www.w3.org/WAI/WCAG21/Techniques/general/G1 -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+<main id="main-content">Main content</main>
+-->
 <a class="skip-link" href="#main-content">Skip to main content</a>
 <!-- Add id="main-content" to your <main> element -->

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Slider — https://www.w3.org/WAI/ARIA/apg/patterns/slider/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <label [id]="instanceId + '-label'">Volume</label>
 <div #track class="track" (pointerdown)="handlePointerDown($event)" (pointermove)="handlePointerMove($event)">
   <div class="fill" [style.width.%]="value()"></div>

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Spinbutton — https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <label [id]="instanceId + '-label'" [for]="instanceId + '-input'">Quantity</label>
 <div class="stepper">
   <button type="button" (click)="decrement()" aria-label="Decrease quantity">−</button>

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

@@ -0,0 +1,85 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-neutral: #71717a;
+  --semmet-color-success: #067647;
+  --semmet-color-warning: #b54708;
+  --semmet-color-danger: #b42318;
+
+  display: inline-block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+.semmet-spinner {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  color: var(--semmet-color-primary);
+  font-weight: 600;
+  line-height: 1;
+}
+
+.semmet-spinner--sm {
+  font-size: 0.75rem;
+}
+
+.semmet-spinner--md {
+  font-size: 0.875rem;
+}
+
+.semmet-spinner--lg {
+  font-size: 1rem;
+}
+
+.semmet-spinner__visual {
+  display: inline-block;
+  width: 1.25em;
+  height: 1.25em;
+  border: 0.1875em solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: semmet-spinner-spin 700ms linear infinite;
+}
+
+.semmet-spinner--neutral {
+  color: var(--semmet-color-neutral);
+}
+
+.semmet-spinner--primary {
+  color: var(--semmet-color-primary);
+}
+
+.semmet-spinner--success {
+  color: var(--semmet-color-success);
+}
+
+.semmet-spinner--warning {
+  color: var(--semmet-color-warning);
+}
+
+.semmet-spinner--danger {
+  color: var(--semmet-color-danger);
+}
+
+.semmet-spinner__label--visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes semmet-spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .semmet-spinner__visual {
+    animation-duration: 1.4s;
+  }
+}

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

@@ -0,0 +1,25 @@
+<!-- Semmet Angular: Spinner - use decorative=true when another element already announces loading. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> label="Loading results" />
+<<%= selector %> [decorative]="true" />
+-->
+<span
+  [id]="instanceId"
+  [class]="spinnerClasses()"
+  [attr.role]="statusRole()"
+  [attr.aria-live]="ariaLive()"
+  [attr.aria-hidden]="ariaHidden()"
+>
+  <span class="semmet-spinner__visual" aria-hidden="true"></span>
+  @if (!decorative()) {
+    <span
+      class="semmet-spinner__label"
+      [class.semmet-spinner__label--visually-hidden]="!labelVisible()"
+    >
+      {{ label() }}
+    </span>
+  }
+</span>

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

@@ -0,0 +1,33 @@
+import { Component, booleanAttribute, computed, input } from '@angular/core';
+
+type <%= classify(name) %>Variant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+type <%= classify(name) %>Size = 'sm' | 'md' | 'lg';
+
+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++}`;
+
+  readonly label = input('Loading');
+  readonly variant = input<<%= classify(name) %>Variant>('primary');
+  readonly size = input<<%= classify(name) %>Size>('md');
+  readonly labelVisible = input(false, { transform: booleanAttribute });
+  readonly decorative = input(false, { transform: booleanAttribute });
+
+  protected readonly spinnerClasses = computed(() => [
+    'semmet-spinner',
+    `semmet-spinner--${this.variant()}`,
+    `semmet-spinner--${this.size()}`,
+    this.labelVisible() ? 'semmet-spinner--with-label' : '',
+  ].filter(Boolean).join(' '));
+
+  protected readonly statusRole = computed(() => this.decorative() ? null : 'status');
+  protected readonly ariaLive = computed(() => this.decorative() ? null : 'polite');
+  protected readonly ariaHidden = computed(() => this.decorative() ? 'true' : null);
+}

package/src/spinner/index.d.ts

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

package/src/spinner/index.js

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

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

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

package/src/spinner/schema.d.ts

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

package/src/spinner/schema.js

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

package/src/spinner/schema.js.map

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

package/src/spinner/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularSpinner",
+  "title": "Semmet Angular Spinner Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Spinner component with status semantics and reduced-motion support.",
+  "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 spinner 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"]
+}