semmet-angular 0.8.0 → 0.10.0

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

@@ -0,0 +1,80 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-danger: #b42318;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-outline: #d4d4d8;
+  --semmet-color-on-surface: #18181b;
+  --semmet-color-on-surface-variant: #52525b;
+  --semmet-color-disabled: #f4f4f5;
+  --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-field {
+  display: grid;
+  gap: 0.375rem;
+}
+
+label {
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+}
+
+label span {
+  color: var(--semmet-color-danger);
+}
+
+input {
+  width: 100%;
+  min-height: 2.5rem;
+  box-sizing: border-box;
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-sm);
+  padding: 0.5rem 0.75rem;
+  font: inherit;
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  transition:
+    border-color var(--semmet-motion),
+    box-shadow var(--semmet-motion),
+    background-color var(--semmet-motion);
+}
+
+input::placeholder {
+  color: var(--semmet-color-on-surface-variant);
+}
+
+input[aria-invalid='true'] {
+  border-color: var(--semmet-color-danger);
+}
+
+input:disabled {
+  color: var(--semmet-color-on-surface-variant);
+  background: var(--semmet-color-disabled);
+  cursor: not-allowed;
+}
+
+input:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 1px;
+  border-color: var(--semmet-color-primary);
+}
+
+.semmet-field__hint,
+.semmet-field__error {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+.semmet-field__hint {
+  color: var(--semmet-color-on-surface-variant);
+}
+
+.semmet-field__error {
+  color: var(--semmet-color-danger);
+}

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

@@ -0,0 +1,32 @@
+<!-- Semmet Angular: Input - native <input> with label, hint, and validation wiring. -->
+<div class="semmet-field">
+  <label [for]="controlId()">
+    {{ label() }}
+    @if (required()) {
+      <span aria-hidden="true">*</span>
+    }
+  </label>
+
+  <input
+    [id]="controlId()"
+    [type]="inputType()"
+    [value]="value()"
+    [placeholder]="placeholder()"
+    [autocomplete]="autocomplete()"
+    [required]="required()"
+    [disabled]="disabled()"
+    [readOnly]="readOnly()"
+    [attr.aria-required]="required() ? 'true' : null"
+    [attr.aria-invalid]="error() ? 'true' : null"
+    [attr.aria-describedby]="describedBy()"
+    (input)="updateValue($event)"
+  />
+
+  @if (hint()) {
+    <p class="semmet-field__hint" [id]="hintId()">{{ hint() }}</p>
+  }
+
+  @if (error()) {
+    <p class="semmet-field__error" [id]="errorId()" role="alert">{{ error() }}</p>
+  }
+</div>

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

@@ -0,0 +1,48 @@
+import { Component, computed, input, model } from '@angular/core';
+
+type <%= classify(name) %>Type = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
+
+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('Email address');
+  readonly inputType = input<<%= classify(name) %>Type>('email');
+  readonly placeholder = input('name@example.com');
+  readonly hint = input('Use the email address associated with your account.');
+  readonly error = input('');
+  readonly required = input(false);
+  readonly disabled = input(false);
+  readonly readOnly = input(false);
+  readonly autocomplete = input('email');
+  readonly value = model('');
+
+  protected readonly controlId = computed(() => `${this.instanceId}-control`);
+  protected readonly hintId = computed(() => `${this.instanceId}-hint`);
+  protected readonly errorId = computed(() => `${this.instanceId}-error`);
+
+  protected readonly describedBy = computed(() => {
+    const ids = [];
+
+    if (this.hint()) {
+      ids.push(this.hintId());
+    }
+
+    if (this.error()) {
+      ids.push(this.errorId());
+    }
+
+    return ids.length > 0 ? ids.join(' ') : null;
+  });
+
+  protected updateValue(event: Event): void {
+    this.value.set((event.target as HTMLInputElement).value);
+  }
+}

package/src/input/index.d.ts

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

package/src/input/index.js

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

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

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

package/src/input/schema.d.ts

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

package/src/input/schema.js

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

package/src/input/schema.js.map

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

package/src/input/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularInput",
+  "title": "Semmet Angular Input Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Input component with native input 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 input 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/input/schema.ts

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

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

@@ -0,0 +1,91 @@
+:host {
+  --semmet-color-surface: #ffffff;
+  --semmet-color-outline: #d4d4d8;
+  --semmet-color-skeleton: #e4e4e7;
+  --semmet-color-skeleton-highlight: #f4f4f5;
+  --semmet-radius-sm: 8px;
+  --semmet-radius-md: 12px;
+
+  display: block;
+  width: 100%;
+}
+
+.semmet-skeleton,
+.semmet-skeleton__line {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  box-sizing: border-box;
+  background: var(--semmet-color-skeleton);
+  border-radius: var(--semmet-radius-sm);
+}
+
+.semmet-skeleton {
+  width: 100%;
+  height: 1rem;
+}
+
+.semmet-skeleton--circle {
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 999px;
+}
+
+.semmet-skeleton--card {
+  min-height: 16rem;
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-md);
+}
+
+.semmet-skeleton--media {
+  height: 12.5rem;
+  border-radius: var(--semmet-radius-md);
+}
+
+.semmet-skeleton-text {
+  display: grid;
+  width: 100%;
+  gap: 0.65rem;
+}
+
+.semmet-skeleton__line {
+  width: 100%;
+  height: 1rem;
+}
+
+.semmet-skeleton--animated::after,
+.semmet-skeleton-text--animated .semmet-skeleton__line::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--semmet-color-skeleton-highlight),
+    transparent
+  );
+  animation: semmet-skeleton-shimmer 1.35s ease-in-out infinite;
+}
+
+@keyframes semmet-skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :host {
+    --semmet-color-surface: #18181b;
+    --semmet-color-outline: #3f3f46;
+    --semmet-color-skeleton: #27272a;
+    --semmet-color-skeleton-highlight: #3f3f46;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .semmet-skeleton--animated::after,
+  .semmet-skeleton-text--animated .semmet-skeleton__line::after {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,31 @@
+<!-- Semmet Angular: Skeleton Loading - decorative placeholder for pending content. -->
+@if (variant() === 'text') {
+  <span
+    [id]="instanceId"
+    [class]="textClasses()"
+    [attr.aria-hidden]="ariaHidden()"
+    [attr.aria-label]="ariaLabel()"
+    [attr.aria-live]="ariaLive()"
+    [attr.role]="role()"
+  >
+    @for (line of lineItems(); track line) {
+      <span
+        class="semmet-skeleton__line"
+        [style.width]="lineWidth(line)"
+        [style.height]="heightStyle()"
+        [style.border-radius]="radiusStyle()"
+      ></span>
+    }
+  </span>
+} @else {
+  <span
+    [id]="instanceId"
+    [class]="skeletonClasses()"
+    [style.width]="widthStyle()"
+    [style.height]="heightStyle()"
+    [style.border-radius]="radiusStyle()"
+    [attr.aria-hidden]="ariaHidden()"
+    [attr.aria-label]="ariaLabel()"
+    [attr.aria-live]="ariaLive()"
+    [attr.role]="role()"
+  ></span>

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

@@ -0,0 +1,69 @@
+import { Component, booleanAttribute, computed, input, numberAttribute } from '@angular/core';
+
+type <%= classify(name) %>Variant = 'rect' | 'text' | 'circle' | 'card' | 'media';
+
+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 variant = input<<%= classify(name) %>Variant>('rect');
+  readonly width = input<string | null>(null);
+  readonly height = input<string | null>(null);
+  readonly size = input<string | null>(null);
+  readonly radius = input<string | null>(null);
+  readonly lines = input(1, { transform: numberAttribute });
+  readonly animated = input(true, { transform: booleanAttribute });
+  readonly decorative = input(true, { transform: booleanAttribute });
+  readonly label = input('Loading content');
+
+  protected readonly normalizedLines = computed(() => Math.max(1, Math.floor(this.lines() || 1)));
+  protected readonly lineItems = computed(() =>
+    Array.from({ length: this.normalizedLines() }, (_item, index) => index),
+  );
+
+  protected readonly skeletonClasses = computed(() =>
+    [
+      'semmet-skeleton',
+      `semmet-skeleton--${this.variant()}`,
+      this.animated() ? 'semmet-skeleton--animated' : '',
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
+
+  protected readonly textClasses = computed(() =>
+    [
+      'semmet-skeleton-text',
+      this.animated() ? 'semmet-skeleton-text--animated' : '',
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
+
+  protected readonly widthStyle = computed(() => this.size() ?? this.width());
+  protected readonly heightStyle = computed(() => this.size() ?? this.height());
+  protected readonly radiusStyle = computed(() => this.radius());
+  protected readonly ariaHidden = computed(() => (this.decorative() ? 'true' : null));
+  protected readonly role = computed(() => (this.decorative() ? null : 'status'));
+  protected readonly ariaLive = computed(() => (this.decorative() ? null : 'polite'));
+  protected readonly ariaLabel = computed(() => (this.decorative() ? null : this.label()));
+
+  protected lineWidth(index: number): string | null {
+    if (this.width()) {
+      return this.width();
+    }
+
+    if (this.normalizedLines() > 1 && index === this.normalizedLines() - 1) {
+      return '68%';
+    }
+
+    return null;
+  }
+}

package/src/skeleton/index.d.ts

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

package/src/skeleton/index.js

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

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

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

package/src/skeleton/schema.d.ts

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

package/src/skeleton/schema.js

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

package/src/skeleton/schema.js.map

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

package/src/skeleton/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularSkeleton",
+  "title": "Semmet Angular Skeleton Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Skeleton loading placeholder component for composable loading states.",
+  "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 skeleton 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/skeleton/schema.ts

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

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

@@ -0,0 +1,95 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-danger: #b42318;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-outline: #d4d4d8;
+  --semmet-color-on-surface: #18181b;
+  --semmet-color-on-surface-variant: #52525b;
+  --semmet-color-disabled: #f4f4f5;
+  --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-field {
+  display: grid;
+  gap: 0.375rem;
+}
+
+label {
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+}
+
+label span {
+  color: var(--semmet-color-danger);
+}
+
+textarea {
+  width: 100%;
+  min-height: 7rem;
+  box-sizing: border-box;
+  resize: vertical;
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-sm);
+  padding: 0.625rem 0.75rem;
+  font: inherit;
+  line-height: 1.5;
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  transition:
+    border-color var(--semmet-motion),
+    box-shadow var(--semmet-motion),
+    background-color var(--semmet-motion);
+}
+
+textarea::placeholder {
+  color: var(--semmet-color-on-surface-variant);
+}
+
+textarea[aria-invalid='true'] {
+  border-color: var(--semmet-color-danger);
+}
+
+textarea:disabled {
+  color: var(--semmet-color-on-surface-variant);
+  background: var(--semmet-color-disabled);
+  cursor: not-allowed;
+}
+
+textarea:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 1px;
+  border-color: var(--semmet-color-primary);
+}
+
+.semmet-field__meta {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.semmet-field__hint,
+.semmet-field__counter,
+.semmet-field__error {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+.semmet-field__hint,
+.semmet-field__counter {
+  color: var(--semmet-color-on-surface-variant);
+}
+
+.semmet-field__counter {
+  white-space: nowrap;
+}
+
+.semmet-field__error {
+  color: var(--semmet-color-danger);
+}

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

@@ -0,0 +1,40 @@
+<!-- Semmet Angular: Textarea - native <textarea> with label, hint, counter, and validation wiring. -->
+<div class="semmet-field">
+  <label [for]="controlId()">
+    {{ label() }}
+    @if (required()) {
+      <span aria-hidden="true">*</span>
+    }
+  </label>
+
+  <textarea
+    [id]="controlId()"
+    [value]="value()"
+    [placeholder]="placeholder()"
+    [rows]="rows()"
+    [attr.maxlength]="maxLength()"
+    [required]="required()"
+    [disabled]="disabled()"
+    [readOnly]="readOnly()"
+    [attr.aria-required]="required() ? 'true' : null"
+    [attr.aria-invalid]="error() ? 'true' : null"
+    [attr.aria-describedby]="describedBy()"
+    (input)="updateValue($event)"
+  ></textarea>
+
+  <div class="semmet-field__meta">
+    @if (hint()) {
+      <p class="semmet-field__hint" [id]="hintId()">{{ hint() }}</p>
+    }
+
+    @if (maxLength() !== null) {
+      <p class="semmet-field__counter" [id]="counterId()" aria-live="polite">
+        {{ remainingCharacters() }} characters left
+      </p>
+    }
+  </div>
+
+  @if (error()) {
+    <p class="semmet-field__error" [id]="errorId()" role="alert">{{ error() }}</p>
+  }
+</div>

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

@@ -0,0 +1,56 @@
+import { Component, computed, input, model } 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++}`;
+
+  readonly label = input('Message');
+  readonly placeholder = input('Write your message...');
+  readonly hint = input('Keep it concise and include the details someone needs to respond.');
+  readonly error = input('');
+  readonly required = input(false);
+  readonly disabled = input(false);
+  readonly readOnly = input(false);
+  readonly rows = input(4);
+  readonly maxLength = input<number | null>(280);
+  readonly value = model('');
+
+  protected readonly controlId = computed(() => `${this.instanceId}-control`);
+  protected readonly hintId = computed(() => `${this.instanceId}-hint`);
+  protected readonly errorId = computed(() => `${this.instanceId}-error`);
+  protected readonly counterId = computed(() => `${this.instanceId}-counter`);
+
+  protected readonly remainingCharacters = computed(() => {
+    const maxLength = this.maxLength();
+    return maxLength === null ? null : maxLength - this.value().length;
+  });
+
+  protected readonly describedBy = computed(() => {
+    const ids = [];
+
+    if (this.hint()) {
+      ids.push(this.hintId());
+    }
+
+    if (this.maxLength() !== null) {
+      ids.push(this.counterId());
+    }
+
+    if (this.error()) {
+      ids.push(this.errorId());
+    }
+
+    return ids.length > 0 ? ids.join(' ') : null;
+  });
+
+  protected updateValue(event: Event): void {
+    this.value.set((event.target as HTMLTextAreaElement).value);
+  }
+}

package/src/textarea/index.d.ts

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