semmet-angular 0.41.0 → 0.43.0

package/src/popover/schema.json

@@ -9,21 +9,36 @@
     "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 },
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
       "x-prompt": "What name would you like to use for the popover component?"
     },
+    "e2e": {
+      "type": "boolean",
+      "default": false,
+      "description": "Generate a Playwright e2e spec for this component. Requires Playwright to be installed/configured in the consuming app."
+    },
     "path": {
       "type": "string",
       "format": "path",
-      "$default": { "$source": "workingDirectory" },
+      "$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" }
+      "$default": {
+        "$source": "projectName"
+      }
     }
   },
-  "required": ["name", "project"]
+  "required": [
+    "name",
+    "project"
+  ]
 }

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

@@ -1,57 +1,27 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-radius-sm: 8px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-target-md: 40px;
-  --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: var(--semmet-space-2xs);
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
 }
 
 progress {
   display: block;
   width: 100%;
-  max-width: 20rem;
-  height: 0.5rem;
-  margin-bottom: var(--semmet-space-xs);
-  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);
-  min-height: var(--semmet-target-md);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   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: 2px solid currentColor;
   outline-offset: 2px;
 }

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

@@ -3,10 +3,10 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> label="Uploading file" />
 -->
-<label [for]="instanceId">Uploading file</label>
+<label [for]="instanceId">{{ label() }}</label>
 <progress [id]="instanceId" [value]="value()" max="100">{{ value() }}%</progress>
 <button type="button" (click)="advance()" [disabled]="isComplete()">
-  {{ isComplete() ? 'Done' : 'Simulate progress' }}
+  {{ isComplete() ? completeLabel() : advanceLabel() }}
 </button>

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

@@ -1,4 +1,4 @@
-import { Component, computed, signal } from '@angular/core';
+import { Component, computed, input, signal } from '@angular/core';
 
 let nextId = 0;
 
@@ -13,6 +13,10 @@ export class <%= classify(name) %> {
   protected readonly value = signal(40);
   protected readonly isComplete = computed(() => this.value() >= 100);
 
+  readonly label = input('Uploading file');
+  readonly completeLabel = input('Done');
+  readonly advanceLabel = input('Simulate progress');
+
   protected advance(): void {
     this.value.update((current) => Math.min(100, current + 20));
   }

package/src/progress-bar/schema.json

@@ -9,21 +9,36 @@
     "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 },
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
       "x-prompt": "What name would you like to use for the progress bar component?"
     },
+    "e2e": {
+      "type": "boolean",
+      "default": false,
+      "description": "Generate a Playwright e2e spec for this component. Requires Playwright to be installed/configured in the consuming app."
+    },
     "path": {
       "type": "string",
       "format": "path",
-      "$default": { "$source": "workingDirectory" },
+      "$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" }
+      "$default": {
+        "$source": "projectName"
+      }
     }
   },
-  "required": ["name", "project"]
+  "required": [
+    "name",
+    "project"
+  ]
 }

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

@@ -1,32 +1,16 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-outline: #71717a;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-space-2xs: 8px;
-  --semmet-space-md: 32px;
-  --semmet-target-md: 40px;
-  --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: var(--semmet-space-2xs);
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
 }
 
 [role='radio'] {
   position: relative;
   display: flex;
   align-items: center;
-  min-height: var(--semmet-target-md);
-  padding: var(--semmet-space-2xs) 0 var(--semmet-space-2xs) var(--semmet-space-md);
-  color: var(--semmet-color-on-surface-variant);
+  padding-left: 1.5rem;
   cursor: pointer;
   user-select: none;
 }
@@ -38,18 +22,8 @@
   width: 1.125rem;
   height: 1.125rem;
   box-sizing: border-box;
-  border: 2px solid var(--semmet-color-outline);
+  border: 2px solid currentColor;
   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 {
@@ -60,11 +34,10 @@
   width: 0.625rem;
   height: 0.625rem;
   border-radius: 50%;
-  background: var(--semmet-color-primary);
+  background: currentColor;
 }
 
 [role='radio']:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
-  border-radius: 4px;
 }

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

@@ -3,10 +3,10 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> label="Choose a plan" />
 -->
 <div role="radiogroup" [attr.aria-labelledby]="instanceId + '-label'">
-  <span [id]="instanceId + '-label'">Choose a plan</span>
+  <span [id]="instanceId + '-label'">{{ label() }}</span>
   @for (option of options; track option.id; let i = $index) {
     <div
       #radio

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, signal, viewChildren } from '@angular/core';
+import { Component, ElementRef, input, signal, viewChildren } from '@angular/core';
 
 interface <%= classify(name) %>Option {
   id: number;
@@ -17,6 +17,7 @@ export class <%= classify(name) %> {
   private readonly radios = viewChildren<ElementRef<HTMLElement>>('radio');
 
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  readonly label = input('Choose a plan');
   protected readonly options: <%= classify(name) %>Option[] = [
     { id: 1, label: 'Monthly' },
     { id: 2, label: 'Yearly' },

package/src/radio-group/schema.json

@@ -9,21 +9,36 @@
     "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 },
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
       "x-prompt": "What name would you like to use for the radio group component?"
     },
+    "e2e": {
+      "type": "boolean",
+      "default": false,
+      "description": "Generate a Playwright e2e spec for this component. Requires Playwright to be installed/configured in the consuming app."
+    },
     "path": {
       "type": "string",
       "format": "path",
-      "$default": { "$source": "workingDirectory" },
+      "$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" }
+      "$default": {
+        "$source": "projectName"
+      }
     }
   },
-  "required": ["name", "project"]
+  "required": [
+    "name",
+    "project"
+  ]
 }

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

@@ -0,0 +1,17 @@
+:host {
+  display: inline-block;
+}
+
+.semmet-rating,
+.semmet-rating__item {
+  display: inline-flex;
+}
+
+.semmet-rating__item[role='radio'] {
+  cursor: pointer;
+}
+
+.semmet-rating__item:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,34 @@
+<!-- Semmet Angular: Rating - readonly image semantics or interactive radiogroup semantics. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> [value]="4" />
+<<%= selector %> [readonly]="false" (valueChange)="saveRating($event)" />
+-->
+@if (readonly()) {
+  <div class="semmet-rating" role="img" [attr.aria-label]="accessibleLabel()">
+    @for (item of values(); track item) {
+      <span class="semmet-rating__item" [class.semmet-rating__item--filled]="isFilled(item)" aria-hidden="true">★</span>
+    }
+  </div>
+} @else {
+  <div class="semmet-rating" role="radiogroup" [attr.aria-labelledby]="instanceId + '-label'">
+    <span [id]="instanceId + '-label'" class="semmet-rating__label">{{ label() }}</span>
+    @for (item of values(); track item; let i = $index) {
+      <span
+        #ratingOption
+        class="semmet-rating__item"
+        role="radio"
+        [class.semmet-rating__item--filled]="isFilled(item)"
+        [attr.aria-label]="item + ' out of ' + max()"
+        [attr.aria-checked]="isSelected(item)"
+        [tabIndex]="isSelected(item) ? 0 : -1"
+        (click)="select(item)"
+        (keydown)="navigate($event, i)"
+      >
+        ★
+      </span>
+    }
+  </div>
+}

package/src/rating/files/__name@dasherize__/__name@dasherize__.spec.ts.template

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>],
+  template: `<<%= selector %> [readonly]="false" />`,
+})
+class Host {}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<Host>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [Host] }).compileComponents();
+    fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+  });
+
+  it('uses radiogroup semantics when interactive', () => {
+    const group = fixture.nativeElement.querySelector('[role="radiogroup"]');
+    const options = fixture.nativeElement.querySelectorAll('[role="radio"]');
+
+    expect(group?.getAttribute('aria-labelledby')).toBeTruthy();
+    expect(options.length).toBe(5);
+    expect(options[3].getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('updates checked rating on click', () => {
+    const options = fixture.debugElement.queryAll(By.css('[role="radio"]'));
+
+    options[1].triggerEventHandler('click');
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelectorAll('[role="radio"]')[1].getAttribute('aria-checked')).toBe('true');
+  });
+});

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

@@ -0,0 +1,75 @@
+import { Component, ElementRef, booleanAttribute, computed, input, output, signal, viewChildren } from '@angular/core';
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  private readonly ratingOptions = viewChildren<ElementRef<HTMLElement>>('ratingOption');
+
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+
+  readonly label = input('Rating');
+  readonly max = input(5);
+  readonly value = input<number | null>(null);
+  readonly readonly = input(true, { transform: booleanAttribute });
+  readonly valueChange = output<number>();
+
+  protected readonly selectedValue = signal(4);
+  protected readonly activeValue = computed(() => this.value() ?? this.selectedValue());
+  protected readonly values = computed(() => Array.from({ length: Math.max(1, this.max()) }, (_, index) => index + 1));
+  protected readonly accessibleLabel = computed(() => `${this.activeValue()} out of ${this.max()} ${this.label()}`);
+
+  protected isSelected(value: number): boolean {
+    return this.activeValue() === value;
+  }
+
+  protected isFilled(value: number): boolean {
+    return value <= this.activeValue();
+  }
+
+  protected select(value: number): void {
+    if (this.readonly()) {
+      return;
+    }
+
+    this.selectedValue.set(value);
+    this.valueChange.emit(value);
+  }
+
+  protected navigate(event: KeyboardEvent, index: number): void {
+    if (this.readonly()) {
+      return;
+    }
+
+    const values = this.values();
+    let nextIndex: number;
+
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowLeft':
+        nextIndex = (index - 1 + values.length) % values.length;
+        break;
+      case 'ArrowUp':
+      case 'ArrowRight':
+        nextIndex = (index + 1) % values.length;
+        break;
+      case 'Home':
+        nextIndex = 0;
+        break;
+      case 'End':
+        nextIndex = values.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    this.select(values[nextIndex]);
+    this.ratingOptions()[nextIndex]?.nativeElement.focus();
+  }
+}

package/src/rating/index.d.ts

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

package/src/rating/index.js

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

package/src/rating/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,EAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAC,CAAC"}

package/src/rating/index.ts

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

package/src/rating/schema.d.ts

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

package/src/rating/schema.js

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

package/src/rating/schema.js.map

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

package/src/rating/schema.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularRating",
+  "title": "Semmet Angular Rating Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Rating component with readonly image semantics or interactive radiogroup semantics.",
+  "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 rating component?"
+    },
+    "e2e": {
+      "type": "boolean",
+      "default": false,
+      "description": "Generate a Playwright e2e spec for this component. Requires Playwright to be installed/configured in the consuming app."
+    },
+    "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/rating/schema.ts

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

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

@@ -1,35 +1,9 @@
 :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-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-space-md: 32px;
-  --semmet-space-lg: 48px;
-  --semmet-target-lg: 48px;
-  --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: var(--semmet-space-2xs);
-  color: var(--semmet-color-on-surface);
-}
-
-.semmet-select__label {
-  font-weight: 650;
-}
-
-.semmet-select__required {
-  color: var(--semmet-color-danger);
 }
 
 .semmet-select__control-wrap {
@@ -40,7 +14,7 @@
 .semmet-select__control-wrap::after {
   position: absolute;
   top: 50%;
-  right: var(--semmet-space-xs);
+  right: 0.75em;
   width: 0.5rem;
   height: 0.5rem;
   border-right: 2px solid currentColor;
@@ -52,46 +26,21 @@
 
 .semmet-select__control {
   width: 100%;
-  min-height: var(--semmet-target-lg);
-  padding: var(--semmet-space-2xs) var(--semmet-space-lg) var(--semmet-space-2xs) var(--semmet-space-xs);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
+  box-sizing: border-box;
   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: 2px solid currentColor;
   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: var(--semmet-space-2xs) 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);
+  margin: 0;
 }