@slotted/angular 0.1.0-beta.8 → 0.1.0-beta.9

package/docs/dialog.examples.md

@@ -642,6 +642,144 @@ Excerpt — not a complete module
      padding-inline: var(--slotted-dialog-inset-inline); } -->
 ```
 
+### A dialog that is a form
+
+A dialog that edits a record submits with Enter from any field and with the footer’s submit. A form written around the header, the body and the footer draws no box of its own, so the parts stay the panel’s rows and keep its inset.
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+import { SlText } from '@slotted/angular/typography';
+
+function nameError(value: string): string {
+  return value.trim() === '' ? 'Enter the contact’s full name.' : '';
+}
+
+function emailError(value: string): string {
+  if (value.trim() === '') return 'Enter the address the contact reads.';
+  if (!/^\S+@\S+\.\S+$/.test(value)) return 'Enter an address like ana@contoso.com.';
+  return '';
+}
+
+@Component({
+  selector: 'app-dialog-form',
+  imports: [
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlField,
+    SlFieldError,
+    SlFieldLabel,
+    SlInline,
+    SlStack,
+    SlText,
+    SlTextField,
+    SlTextFieldInput,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <button slButton [slDialogTrigger]="dialog">Add contact</button>
+      <sl-dialog #dialog="slDialog" [open]="open()" (openChange)="toggle($event)">
+        <header slDialogHeader>
+          <h2 slDialogTitle>New contact</h2>
+          <p slDialogDescription>Contoso Foods, Seattle.</p>
+          <button slDialogClose></button>
+        </header>
+        <div slDialogBody>
+          <form id="new-contact" novalidate (submit)="submit($event)">
+            <div slStack [gap]="4">
+              <div slField required [invalid]="errors()?.name ? true : undefined">
+                <label slFieldLabel>Full name</label>
+                <div slTextField>
+                  <input
+                    slTextFieldInput
+                    autocomplete="name"
+                    [value]="name()"
+                    (valueChange)="name.set($event.value)"
+                  />
+                </div>
+                <span slFieldError live="polite" reserve>{{ errors()?.name }}</span>
+              </div>
+              <div slField required [invalid]="errors()?.email ? true : undefined">
+                <label slFieldLabel>Email</label>
+                <div slTextField>
+                  <input
+                    slTextFieldInput
+                    autocomplete="email"
+                    type="email"
+                    [value]="email()"
+                    (valueChange)="email.set($event.value)"
+                  />
+                </div>
+                <span slFieldError live="polite" reserve>{{ errors()?.email }}</span>
+              </div>
+            </div>
+          </form>
+        </div>
+        <footer slDialogFooter>
+          <button slButton variant="ghost" tone="secondary" (click)="open.set(false)">
+            Cancel
+          </button>
+          <button slButton type="submit" form="new-contact">Add contact</button>
+        </footer>
+      </sl-dialog>
+      @if (added(); as message) {
+        <span slText role="status" size="sm" tone="muted">{{ message }}</span>
+      }
+    </div>
+  `,
+})
+export class DialogForm {
+  readonly open = signal(false);
+  readonly name = signal('');
+  readonly email = signal('');
+  readonly submitted = signal(false);
+  readonly added = signal<string | null>(null);
+  readonly errors = computed(() =>
+    this.submitted() ? { name: nameError(this.name()), email: emailError(this.email()) } : null,
+  );
+
+  toggle(next: boolean): void {
+    if (next) {
+      this.name.set('');
+      this.email.set('');
+      this.submitted.set(false);
+    }
+    this.open.set(next);
+  }
+
+  submit(event: Event): void {
+    event.preventDefault();
+    this.submitted.set(true);
+    if (nameError(this.name()) !== '' || emailError(this.email()) !== '') return;
+    this.added.set(`${this.name().trim()} was added to Contoso Foods.`);
+    this.open.set(false);
+  }
+}
+```
+
 ### Deciding once for the application
 
 Eight decisions an application takes once instead of eight props on every dialog in a product. Angular Material is the only surveyed library with an equivalent, and a dialog that states one itself still wins.
@@ -1639,142 +1777,6 @@ export class DialogDismiss {
 }
 ```
 
-### form.ts
-
-Example
-
-```ts
-import { Component, computed, signal } from '@angular/core';
-import { SlButton } from '@slotted/angular/button';
-import {
-  SlDialog,
-  SlDialogBody,
-  SlDialogClose,
-  SlDialogDescription,
-  SlDialogFooter,
-  SlDialogHeader,
-  SlDialogTitle,
-  SlDialogTrigger,
-} from '@slotted/angular/dialog';
-import { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';
-import { SlInline } from '@slotted/angular/inline';
-import { SlStack } from '@slotted/angular/stack';
-import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
-import { SlText } from '@slotted/angular/typography';
-
-function nameError(value: string): string {
-  return value.trim() === '' ? 'Enter the contact’s full name.' : '';
-}
-
-function emailError(value: string): string {
-  if (value.trim() === '') return 'Enter the address the contact reads.';
-  if (!/^\S+@\S+\.\S+$/.test(value)) return 'Enter an address like ana@contoso.com.';
-  return '';
-}
-
-@Component({
-  selector: 'app-dialog-form',
-  imports: [
-    SlButton,
-    SlDialog,
-    SlDialogBody,
-    SlDialogClose,
-    SlDialogDescription,
-    SlDialogFooter,
-    SlDialogHeader,
-    SlDialogTitle,
-    SlDialogTrigger,
-    SlField,
-    SlFieldError,
-    SlFieldLabel,
-    SlInline,
-    SlStack,
-    SlText,
-    SlTextField,
-    SlTextFieldInput,
-  ],
-  template: `
-    <div slInline align="center" [gap]="3">
-      <button slButton [slDialogTrigger]="dialog">Add contact</button>
-      <sl-dialog #dialog="slDialog" [open]="open()" (openChange)="toggle($event)">
-        <header slDialogHeader>
-          <h2 slDialogTitle>New contact</h2>
-          <p slDialogDescription>Contoso Foods, Seattle.</p>
-          <button slDialogClose></button>
-        </header>
-        <div slDialogBody>
-          <form id="new-contact" novalidate (submit)="submit($event)">
-            <div slStack [gap]="4">
-              <div slField required [invalid]="errors()?.name ? true : undefined">
-                <label slFieldLabel>Full name</label>
-                <div slTextField>
-                  <input
-                    slTextFieldInput
-                    autocomplete="name"
-                    [value]="name()"
-                    (valueChange)="name.set($event.value)"
-                  />
-                </div>
-                <span slFieldError live="polite" reserve>{{ errors()?.name }}</span>
-              </div>
-              <div slField required [invalid]="errors()?.email ? true : undefined">
-                <label slFieldLabel>Email</label>
-                <div slTextField>
-                  <input
-                    slTextFieldInput
-                    autocomplete="email"
-                    type="email"
-                    [value]="email()"
-                    (valueChange)="email.set($event.value)"
-                  />
-                </div>
-                <span slFieldError live="polite" reserve>{{ errors()?.email }}</span>
-              </div>
-            </div>
-          </form>
-        </div>
-        <footer slDialogFooter>
-          <button slButton variant="ghost" tone="secondary" (click)="open.set(false)">
-            Cancel
-          </button>
-          <button slButton type="submit" form="new-contact">Add contact</button>
-        </footer>
-      </sl-dialog>
-      @if (added(); as message) {
-        <span slText role="status" size="sm" tone="muted">{{ message }}</span>
-      }
-    </div>
-  `,
-})
-export class DialogForm {
-  readonly open = signal(false);
-  readonly name = signal('');
-  readonly email = signal('');
-  readonly submitted = signal(false);
-  readonly added = signal<string | null>(null);
-  readonly errors = computed(() =>
-    this.submitted() ? { name: nameError(this.name()), email: emailError(this.email()) } : null,
-  );
-
-  toggle(next: boolean): void {
-    if (next) {
-      this.name.set('');
-      this.email.set('');
-      this.submitted.set(false);
-    }
-    this.open.set(next);
-  }
-
-  submit(event: Event): void {
-    event.preventDefault();
-    this.submitted.set(true);
-    if (nameError(this.name()) !== '' || emailError(this.email()) !== '') return;
-    this.added.set(`${this.name().trim()} was added to Contoso Foods.`);
-    this.open.set(false);
-  }
-}
-```
-
 ### full-screen.ts
 
 Example

package/docs/dialog.json

@@ -933,6 +933,14 @@
       "source": "<sl-dialog #d=\"slDialog\">\n  <div class=\"rename\">\n    <h2 slDialogTitle>Rename file</h2>\n    <input slTextField aria-label=\"Name\" value=\"report-q3.pdf\" />\n    <img alt=\"First page of report-q3.pdf\" [src]=\"preview\" />\n  </div>\n  <footer slDialogFooter><button slButton size=\"sm\">Rename</button></footer>\n</sl-dialog>\n<!-- .rename { display: grid; gap: var(--slotted-space-5);\n     padding-block: var(--slotted-dialog-inset-block);\n     padding-inline: var(--slotted-dialog-inset-inline); } -->\n",
       "verdict": "excerpt"
     },
+    {
+      "id": "form",
+      "title": "A dialog that is a form",
+      "note": "A dialog that edits a record submits with Enter from any field and with the footer’s submit. A form written around the header, the body and the footer draws no box of its own, so the parts stay the panel’s rows and keep its inset.",
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\nimport { SlText } from '@slotted/angular/typography';\n\nfunction nameError(value: string): string {\n  return value.trim() === '' ? 'Enter the contact’s full name.' : '';\n}\n\nfunction emailError(value: string): string {\n  if (value.trim() === '') return 'Enter the address the contact reads.';\n  if (!/^\\S+@\\S+\\.\\S+$/.test(value)) return 'Enter an address like ana@contoso.com.';\n  return '';\n}\n\n@Component({\n  selector: 'app-dialog-form',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlField,\n    SlFieldError,\n    SlFieldLabel,\n    SlInline,\n    SlStack,\n    SlText,\n    SlTextField,\n    SlTextFieldInput,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <button slButton [slDialogTrigger]=\"dialog\">Add contact</button>\n      <sl-dialog #dialog=\"slDialog\" [open]=\"open()\" (openChange)=\"toggle($event)\">\n        <header slDialogHeader>\n          <h2 slDialogTitle>New contact</h2>\n          <p slDialogDescription>Contoso Foods, Seattle.</p>\n          <button slDialogClose></button>\n        </header>\n        <div slDialogBody>\n          <form id=\"new-contact\" novalidate (submit)=\"submit($event)\">\n            <div slStack [gap]=\"4\">\n              <div slField required [invalid]=\"errors()?.name ? true : undefined\">\n                <label slFieldLabel>Full name</label>\n                <div slTextField>\n                  <input\n                    slTextFieldInput\n                    autocomplete=\"name\"\n                    [value]=\"name()\"\n                    (valueChange)=\"name.set($event.value)\"\n                  />\n                </div>\n                <span slFieldError live=\"polite\" reserve>{{ errors()?.name }}</span>\n              </div>\n              <div slField required [invalid]=\"errors()?.email ? true : undefined\">\n                <label slFieldLabel>Email</label>\n                <div slTextField>\n                  <input\n                    slTextFieldInput\n                    autocomplete=\"email\"\n                    type=\"email\"\n                    [value]=\"email()\"\n                    (valueChange)=\"email.set($event.value)\"\n                  />\n                </div>\n                <span slFieldError live=\"polite\" reserve>{{ errors()?.email }}</span>\n              </div>\n            </div>\n          </form>\n        </div>\n        <footer slDialogFooter>\n          <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">\n            Cancel\n          </button>\n          <button slButton type=\"submit\" form=\"new-contact\">Add contact</button>\n        </footer>\n      </sl-dialog>\n      @if (added(); as message) {\n        <span slText role=\"status\" size=\"sm\" tone=\"muted\">{{ message }}</span>\n      }\n    </div>\n  `,\n})\nexport class DialogForm {\n  readonly open = signal(false);\n  readonly name = signal('');\n  readonly email = signal('');\n  readonly submitted = signal(false);\n  readonly added = signal<string | null>(null);\n  readonly errors = computed(() =>\n    this.submitted() ? { name: nameError(this.name()), email: emailError(this.email()) } : null,\n  );\n\n  toggle(next: boolean): void {\n    if (next) {\n      this.name.set('');\n      this.email.set('');\n      this.submitted.set(false);\n    }\n    this.open.set(next);\n  }\n\n  submit(event: Event): void {\n    event.preventDefault();\n    this.submitted.set(true);\n    if (nameError(this.name()) !== '' || emailError(this.email()) !== '') return;\n    this.added.set(`${this.name().trim()} was added to Contoso Foods.`);\n    this.open.set(false);\n  }\n}\n",
+      "verdict": "example"
+    },
     {
       "id": "defaults",
       "title": "Deciding once for the application",
@@ -1077,14 +1085,6 @@
       "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-dialog-dismiss',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlText,\n  ],\n  template: `\n    <button slButton [slDialogTrigger]=\"dialog\">Import products</button>\n    <sl-dialog #dialog=\"slDialog\" escape=\"none\" outsidePress=\"none\" [(open)]=\"open\">\n      <header slDialogHeader>\n        <h2 slDialogTitle>Import 1,240 products</h2>\n        <p slDialogDescription>From spring-catalogue.csv into the Northwind price list.</p>\n      </header>\n      <div slDialogBody>\n        <span slText size=\"sm\">\n          38 rows update existing products and 1,202 add new ones. Escape and a press outside the\n          panel leave this dialog open; choose one of the actions.\n        </span>\n      </div>\n      <footer slDialogFooter>\n        <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">\n          Cancel import\n        </button>\n        <button slButton (click)=\"open.set(false)\">Start import</button>\n      </footer>\n    </sl-dialog>\n  `,\n})\nexport class DialogDismiss {\n  readonly open = signal(false);\n}\n",
       "verdict": "example"
     },
-    {
-      "id": "form",
-      "title": "form.ts",
-      "note": null,
-      "language": "ts",
-      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\nimport { SlText } from '@slotted/angular/typography';\n\nfunction nameError(value: string): string {\n  return value.trim() === '' ? 'Enter the contact’s full name.' : '';\n}\n\nfunction emailError(value: string): string {\n  if (value.trim() === '') return 'Enter the address the contact reads.';\n  if (!/^\\S+@\\S+\\.\\S+$/.test(value)) return 'Enter an address like ana@contoso.com.';\n  return '';\n}\n\n@Component({\n  selector: 'app-dialog-form',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlField,\n    SlFieldError,\n    SlFieldLabel,\n    SlInline,\n    SlStack,\n    SlText,\n    SlTextField,\n    SlTextFieldInput,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <button slButton [slDialogTrigger]=\"dialog\">Add contact</button>\n      <sl-dialog #dialog=\"slDialog\" [open]=\"open()\" (openChange)=\"toggle($event)\">\n        <header slDialogHeader>\n          <h2 slDialogTitle>New contact</h2>\n          <p slDialogDescription>Contoso Foods, Seattle.</p>\n          <button slDialogClose></button>\n        </header>\n        <div slDialogBody>\n          <form id=\"new-contact\" novalidate (submit)=\"submit($event)\">\n            <div slStack [gap]=\"4\">\n              <div slField required [invalid]=\"errors()?.name ? true : undefined\">\n                <label slFieldLabel>Full name</label>\n                <div slTextField>\n                  <input\n                    slTextFieldInput\n                    autocomplete=\"name\"\n                    [value]=\"name()\"\n                    (valueChange)=\"name.set($event.value)\"\n                  />\n                </div>\n                <span slFieldError live=\"polite\" reserve>{{ errors()?.name }}</span>\n              </div>\n              <div slField required [invalid]=\"errors()?.email ? true : undefined\">\n                <label slFieldLabel>Email</label>\n                <div slTextField>\n                  <input\n                    slTextFieldInput\n                    autocomplete=\"email\"\n                    type=\"email\"\n                    [value]=\"email()\"\n                    (valueChange)=\"email.set($event.value)\"\n                  />\n                </div>\n                <span slFieldError live=\"polite\" reserve>{{ errors()?.email }}</span>\n              </div>\n            </div>\n          </form>\n        </div>\n        <footer slDialogFooter>\n          <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">\n            Cancel\n          </button>\n          <button slButton type=\"submit\" form=\"new-contact\">Add contact</button>\n        </footer>\n      </sl-dialog>\n      @if (added(); as message) {\n        <span slText role=\"status\" size=\"sm\" tone=\"muted\">{{ message }}</span>\n      }\n    </div>\n  `,\n})\nexport class DialogForm {\n  readonly open = signal(false);\n  readonly name = signal('');\n  readonly email = signal('');\n  readonly submitted = signal(false);\n  readonly added = signal<string | null>(null);\n  readonly errors = computed(() =>\n    this.submitted() ? { name: nameError(this.name()), email: emailError(this.email()) } : null,\n  );\n\n  toggle(next: boolean): void {\n    if (next) {\n      this.name.set('');\n      this.email.set('');\n      this.submitted.set(false);\n    }\n    this.open.set(next);\n  }\n\n  submit(event: Event): void {\n    event.preventDefault();\n    this.submitted.set(true);\n    if (nameError(this.name()) !== '' || emailError(this.email()) !== '') return;\n    this.added.set(`${this.name().trim()} was added to Contoso Foods.`);\n    this.open.set(false);\n  }\n}\n",
-      "verdict": "example"
-    },
     {
       "id": "full-screen",
       "title": "full-screen.ts",