semmet-angular 0.42.0 → 0.43.0

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

@@ -1,122 +1,46 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-primary: #ffffff;
-  --semmet-color-danger: #b42318;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-radius-sm: 8px;
-  --semmet-radius-md: 12px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-space-sm: 24px;
-  --semmet-target-md: 40px;
-  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
-
   display: block;
-  max-width: 34rem;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
 }
 
 form {
   display: grid;
-  gap: var(--semmet-space-xs);
-  padding: var(--semmet-space-sm);
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-md);
 }
 
 h2 {
   margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
 }
 
 .semmet-field {
   display: grid;
-  gap: var(--semmet-space-2xs);
-}
-
-label {
-  font-weight: 500;
-}
-
-label span {
-  color: var(--semmet-color-danger);
 }
 
 input,
 textarea {
   width: 100%;
   box-sizing: border-box;
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   font: inherit;
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  transition: border-color var(--semmet-motion);
-}
-
-input {
-  min-height: var(--semmet-target-md);
 }
 
 textarea {
   min-height: 7rem;
   resize: vertical;
-  line-height: 1.5;
-}
-
-input[aria-invalid='true'],
-textarea[aria-invalid='true'] {
-  border-color: var(--semmet-color-danger);
 }
 
 input:focus-visible,
 textarea:focus-visible,
 button:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
 button {
   justify-self: start;
-  min-height: var(--semmet-target-md);
-  border: 0;
-  border-radius: var(--semmet-radius-sm);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   font: inherit;
-  font-weight: 600;
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
   cursor: pointer;
-  transition:
-    background-color var(--semmet-motion),
-    transform var(--semmet-motion);
-}
-
-button:hover {
-  transform: translateY(-1px);
 }
 
 .semmet-hint,
 .semmet-error,
 .semmet-status {
   margin: 0;
-  font-size: 0.8125rem;
-  line-height: 1.4;
-}
-
-.semmet-hint,
-.semmet-status {
-  color: var(--semmet-color-on-surface-variant);
-}
-
-.semmet-error {
-  color: var(--semmet-color-danger);
 }

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

@@ -3,14 +3,14 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> title="Contact form" submitLabel="Submit" />
 -->
 <form [attr.aria-labelledby]="instanceId + '-title'" (submit)="submit($event)" novalidate>
-  <h2 [id]="instanceId + '-title'">Contact form</h2>
+  <h2 [id]="instanceId + '-title'">{{ title() }}</h2>
 
   <div class="semmet-field">
     <label [for]="instanceId + '-name'">
-      Name
+      {{ nameLabel() }}
       <span aria-hidden="true">*</span>
     </label>
     <input
@@ -30,7 +30,7 @@ Import <%= classify(name) %> in that parent component.
 
   <div class="semmet-field">
     <label [for]="instanceId + '-email'">
-      Email
+      {{ emailLabel() }}
       <span aria-hidden="true">*</span>
     </label>
     <input
@@ -50,7 +50,7 @@ Import <%= classify(name) %> in that parent component.
 
   <div class="semmet-field">
     <label [for]="instanceId + '-message'">
-      Message
+      {{ messageLabel() }}
       <span aria-hidden="true">*</span>
     </label>
     <textarea
@@ -62,13 +62,13 @@ Import <%= classify(name) %> in that parent component.
       [attr.aria-describedby]="messageError() ? instanceId + '-message-error' : instanceId + '-message-hint'"
       (input)="updateField('message', $event)"
     ></textarea>
-    <p class="semmet-hint" [id]="instanceId + '-message-hint'">Minimum 10 characters.</p>
+    <p class="semmet-hint" [id]="instanceId + '-message-hint'">{{ messageHint() }}</p>
     @if (messageError()) {
       <p class="semmet-error" [id]="instanceId + '-message-error'" role="alert">{{ messageError() }}</p>
     }
   </div>
 
-  <button type="submit">Submit</button>
+  <button type="submit">{{ submitLabel() }}</button>
 
   @if (statusMessage()) {
     <p class="semmet-status" role="status">{{ statusMessage() }}</p>

package/src/form/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';
 
 interface <%= classify(name) %>State {
   name: string;
@@ -26,12 +26,25 @@ export class <%= classify(name) %> {
     message: '',
   });
 
+  readonly title = input('Contact form');
+  readonly nameLabel = input('Name');
+  readonly emailLabel = input('Email');
+  readonly messageLabel = input('Message');
+  readonly messageHint = input('Minimum 10 characters.');
+  readonly submitLabel = input('Submit');
+  readonly nameRequiredMessage = input('Enter your name.');
+  readonly emailRequiredMessage = input('Enter your email address.');
+  readonly emailInvalidMessage = input('Enter a valid email address.');
+  readonly messageRequiredMessage = input('Enter a message with at least 10 characters.');
+  readonly invalidStatusMessage = input('Check the highlighted fields and try again.');
+  readonly validStatusMessage = input('Form is valid and ready to submit.');
+
   protected readonly nameError = computed(() => {
     if (!this.submitted() || this.form().name.trim()) {
       return '';
     }
 
-    return 'Enter your name.';
+    return this.nameRequiredMessage();
   });
 
   protected readonly emailError = computed(() => {
@@ -41,10 +54,10 @@ export class <%= classify(name) %> {
 
     const email = this.form().email.trim();
     if (!email) {
-      return 'Enter your email address.';
+      return this.emailRequiredMessage();
     }
 
-    return this.emailPattern.test(email) ? '' : 'Enter a valid email address.';
+    return this.emailPattern.test(email) ? '' : this.emailInvalidMessage();
   });
 
   protected readonly messageError = computed(() => {
@@ -52,7 +65,7 @@ export class <%= classify(name) %> {
       return '';
     }
 
-    return 'Enter a message with at least 10 characters.';
+    return this.messageRequiredMessage();
   });
 
   protected readonly isInvalid = computed(() => Boolean(this.nameError() || this.emailError() || this.messageError()));
@@ -67,10 +80,10 @@ export class <%= classify(name) %> {
     this.submitted.set(true);
 
     if (this.isInvalid()) {
-      this.statusMessage.set('Check the highlighted fields and try again.');
+      this.statusMessage.set(this.invalidStatusMessage());
       return;
     }
 
-    this.statusMessage.set('Form is valid and ready to submit.');
+    this.statusMessage.set(this.validStatusMessage());
   }
 }

package/src/form/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 form 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/input/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,83 +1,27 @@
 :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-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;
 }
 
 .semmet-field {
   display: grid;
-  gap: var(--semmet-space-2xs);
-}
-
-label {
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
-}
-
-label span {
-  color: var(--semmet-color-danger);
 }
 
 input {
   width: 100%;
-  min-height: var(--semmet-target-md);
   box-sizing: border-box;
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   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);
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
 
 .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/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 input 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/input-group/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,59 +1,22 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-primary: #ffffff;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-surface-muted: #f4f4f5;
-  --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-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-input-group__label {
   display: inline-block;
-  margin-block-end: var(--semmet-space-2xs);
-  color: var(--semmet-color-on-surface);
-  font-weight: 650;
-}
-
-.semmet-input-group__required {
-  color: var(--semmet-color-danger);
 }
 
 .semmet-input-group {
   display: flex;
   align-items: stretch;
   width: 100%;
-  min-height: var(--semmet-target-lg);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
-  overflow: hidden;
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  transition:
-    border-color var(--semmet-motion),
-    box-shadow var(--semmet-motion),
-    opacity var(--semmet-motion);
 }
 
 .semmet-input-group:focus-within {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
-.semmet-input-group--invalid {
-  border-color: var(--semmet-color-danger);
-}
-
 .semmet-input-group--disabled {
   opacity: 0.58;
 }
@@ -63,29 +26,15 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 var(--semmet-space-xs);
   white-space: nowrap;
 }
 
-.semmet-input-group__addon {
-  color: var(--semmet-color-on-surface-variant);
-  background: var(--semmet-color-surface-muted);
-  border-inline-end: 1px solid var(--semmet-color-outline);
-}
-
-.semmet-input-group__control + .semmet-input-group__addon {
-  border-inline-start: 1px solid var(--semmet-color-outline);
-  border-inline-end: 0;
-}
-
 .semmet-input-group__control {
   min-width: 0;
   flex: 1 1 auto;
-  border: 0;
   color: inherit;
   background: transparent;
   font: inherit;
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
 }
 
 .semmet-input-group__control:focus {
@@ -93,12 +42,7 @@
 }
 
 .semmet-input-group__button {
-  border: 0;
-  border-inline-start: 1px solid var(--semmet-color-outline);
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
   font: inherit;
-  font-weight: 650;
   cursor: pointer;
 }
 
@@ -108,15 +52,5 @@
 
 .semmet-input-group__hint,
 .semmet-input-group__error {
-  margin: var(--semmet-space-2xs) 0 0;
-  font-size: 0.875rem;
-  line-height: 1.4;
-}
-
-.semmet-input-group__hint {
-  color: var(--semmet-color-on-surface-variant);
-}
-
-.semmet-input-group__error {
-  color: var(--semmet-color-danger);
+  margin: 0;
 }

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

@@ -1,9 +1,13 @@
-<!-- Semmet Angular: Input Group - native input with addon text announced through aria-describedby. -->
+<!-- Semmet Angular: Input Group - native input with projected addons announced through aria-describedby. -->
 <!--
 Usage from a parent component template:
-Import <%= classify(name) %> in that parent component.
+Import <%= classify(name) %>, <%= classify(name) %>Prefix, and <%= classify(name) %>Suffix in that parent component.
 
-<<%= selector %> label="Website" prefix="https://" suffix=".com" [(value)]="website" />
+<<%= selector %> label="Search" type="search" [(value)]="query">
+  <ng-template <%= camelize(name) %>Prefix>
+    <svg aria-hidden="true" viewBox="0 0 20 20"><path d="M8.5 3a5.5 5.5 0 0 1 4.3 8.9l3.15 3.15-1.4 1.4-3.15-3.15A5.5 5.5 0 1 1 8.5 3Zm0 2a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z" /></svg>
+  </ng-template>
+</<%= selector %>>
 -->
 <label class="semmet-input-group__label" [for]="instanceId">
   {{ label() }}
@@ -18,7 +22,9 @@ Import <%= classify(name) %> in that parent component.
 >
   @if (hasPrefix()) {
     <span class="semmet-input-group__addon" [id]="instanceId + '-prefix'">
-      {{ prefix() }}
+      @if (prefix(); as prefixSlot) {
+        <ng-container [ngTemplateOutlet]="prefixSlot.templateRef" />
+      }
     </span>
   }
   <input
@@ -35,7 +41,9 @@ Import <%= classify(name) %> in that parent component.
   />
   @if (hasSuffix()) {
     <span class="semmet-input-group__addon" [id]="instanceId + '-suffix'">
-      {{ suffix() }}
+      @if (suffix(); as suffixSlot) {
+        <ng-container [ngTemplateOutlet]="suffixSlot.templateRef" />
+      }
     </span>
   }
   @if (hasAction()) {

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

@@ -1,23 +1,38 @@
-import { Component, booleanAttribute, computed, input, model, output } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, Directive, TemplateRef, booleanAttribute, computed, contentChild, inject, input, model, output } from '@angular/core';
 
 type <%= classify(name) %>InputType = 'text' | 'email' | 'search' | 'tel' | 'url';
 
 let nextId = 0;
 
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Prefix]',
+})
+export class <%= classify(name) %>Prefix {
+  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+}
+
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Suffix]',
+})
+export class <%= classify(name) %>Suffix {
+  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+}
+
 @Component({
   selector: '<%= selector %>',
-  imports: [],
+  imports: [NgTemplateOutlet],
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
+  protected readonly prefix = contentChild(<%= classify(name) %>Prefix);
+  protected readonly suffix = contentChild(<%= classify(name) %>Suffix);
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
 
   readonly label = input('Website');
   readonly type = input<<%= classify(name) %>InputType>('url');
   readonly placeholder = input('example');
-  readonly prefix = input('https://');
-  readonly suffix = input('.com');
   readonly buttonLabel = input('Apply');
   readonly hint = input('Use a short, memorable address.');
   readonly errorMessage = input('');
@@ -26,8 +41,8 @@ export class <%= classify(name) %> {
   readonly value = model('');
   readonly buttonClick = output<MouseEvent>();
 
-  protected readonly hasPrefix = computed(() => this.prefix().trim().length > 0);
-  protected readonly hasSuffix = computed(() => this.suffix().trim().length > 0);
+  protected readonly hasPrefix = computed(() => Boolean(this.prefix()));
+  protected readonly hasSuffix = computed(() => Boolean(this.suffix()));
   protected readonly hasAction = computed(() => this.buttonLabel().trim().length > 0);
   protected readonly hasError = computed(() => this.errorMessage().trim().length > 0);
 

package/src/input-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 input 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"
+  ]
 }