@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/fesm2022/slotted-angular-form.mjs

@@ -0,0 +1,592 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, computed, Directive, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, output, HostAttributeToken, signal, DestroyRef, forwardRef } from '@angular/core';
+import { ControlContainer } from '@angular/forms';
+import { injectMessages } from '@slotted/angular/i18n';
+import { normaliseErrors, orderErrors, hasErrors, withoutError, mergeErrors, collectValidity, namedControls, isDirty } from '@slotted/core/form';
+import { formMessages } from '@slotted/core/i18n';
+import { createControllable } from '@slotted/core/state';
+
+const FALLBACK = {
+    align: 'end',
+    errorFocus: 'summary',
+    nativeValidation: false,
+    summary: 'auto',
+    summaryDescription: undefined,
+    validate: 'submit',
+};
+const FORM_DEFAULTS = new InjectionToken('slotted form defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its forms behave: when they validate, where
+ * focus goes after a failed submit, and how its action row is arranged. A form
+ * that states any of them itself still wins. The summary's heading comes from
+ * the language in force (`provideSlotted`).
+ */
+function provideFormDefaults(defaults) {
+    return {
+        provide: FORM_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+function injectFormDefaults() {
+    return inject(FORM_DEFAULTS);
+}
+const SL_FORM_ERROR_MESSAGES = new InjectionToken('slotted form error messages', { providedIn: 'root', factory: () => ({}) });
+/** Names the sentences the application's own validators are written as. */
+function provideFormErrorMessages(messages) {
+    return { provide: SL_FORM_ERROR_MESSAGES, useValue: messages };
+}
+function injectFormErrorMessages() {
+    return inject(SL_FORM_ERROR_MESSAGES);
+}
+/**
+ * What the summary needs from the form around it.
+ *
+ * It is an abstract class rather than an import so the two classes can depend
+ * on each other without a cycle — the shape `field` and `text-field` already
+ * have.
+ */
+class SlFormOwner {
+}
+
+/**
+ * The row a form's actions stand in.
+ *
+ * `inline` can end-align a row of buttons. What it cannot do without a query
+ * the consumer writes for every form is the reflow: below the form's own
+ * container width every action takes the whole width, in a column, with the
+ * primary one first — a reader's thumb is at the bottom of a phone and their
+ * eye at the end of a row.
+ */
+class SlFormActions {
+    /** Defaults to the form's own `align`, then to the token, then to `end`. */
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    form = inject(SlFormOwner, { optional: true });
+    resolvedAlign = computed(() => this.align() ?? this.form?.resolvedAlign() ?? 'end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFormActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlFormActions, isStandalone: true, selector: "[slFormActions]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "form", "data-part": "actions" }, properties: { "attr.data-align": "resolvedAlign()" } }, exportAs: ["slFormActions"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFormActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slFormActions]',
+                    standalone: true,
+                    exportAs: 'slFormActions',
+                    host: {
+                        // The family's identifier on the part: its rules reach it by name, never as any descendant.
+                        'data-ui': 'form',
+                        'data-part': 'actions',
+                        '[attr.data-align]': 'resolvedAlign()',
+                    },
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+
+let summaryCounter = 0;
+/**
+ * The summary of everything wrong with the form: a focusable region with a
+ * heading, and a link per error pointing at the control it is about.
+ *
+ * It is the GOV.UK error summary, item for item — "move keyboard focus to the
+ * error summary", "include the heading", "link to each of the answers that have
+ * validation errors", "make sure the error messages in the error summary are
+ * worded the same as those which appear next to the inputs". The last one is
+ * free here: one map feeds the summary and the field.
+ *
+ * The form renders this itself under `summary="auto"`. A consumer who wants it
+ * somewhere else writes `summary="none"` and puts `slFormSummary` on their own
+ * element.
+ */
+class SlFormSummary {
+    form = inject(SlFormOwner);
+    element = inject(ElementRef).nativeElement;
+    ngAfterViewInit() {
+        this.form.registerSummary(this.element);
+    }
+    /**
+     * The fragment is not followed. A link that navigated would write the
+     * control's identifier into the address bar and add an entry to the history
+     * of a page that never left; focusing the control is the whole of what the
+     * link is for, and the browser scrolls it into view with the focus.
+     */
+    focus(event, id) {
+        const target = this.element.ownerDocument.getElementById(id);
+        if (target === null)
+            return;
+        event.preventDefault();
+        target.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFormSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlFormSummary, isStandalone: true, selector: "[slFormSummary]", host: { attributes: { "data-ui": "form", "data-part": "summary", "role": "alert", "tabindex": "-1" }, properties: { "attr.aria-labelledby": "form.summaryId()" } }, exportAs: ["slFormSummary"], ngImport: i0, template: `<h2 data-part="summary-title" [attr.id]="form.summaryId()">
+      {{ form.resolvedSummaryTitle() }}
+    </h2>
+    @if (form.resolvedSummaryDescription(); as description) {
+      <p>{{ description }}</p>
+    }
+    <ul data-part="summary-list">
+      @for (entry of form.entries(); track entry.name) {
+        @for (message of entry.messages; track message) {
+          <li>
+            @if (entry.id) {
+              <a
+                data-part="summary-item"
+                [attr.href]="'#' + entry.id"
+                (click)="focus($event, entry.id)"
+              >
+                {{ message }}
+              </a>
+            } @else {
+              <span data-part="summary-item">{{ message }}</span>
+            }
+          </li>
+        }
+      }
+    </ul>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFormSummary, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slFormSummary]',
+                    standalone: true,
+                    exportAs: 'slFormSummary',
+                    template: `<h2 data-part="summary-title" [attr.id]="form.summaryId()">
+      {{ form.resolvedSummaryTitle() }}
+    </h2>
+    @if (form.resolvedSummaryDescription(); as description) {
+      <p>{{ description }}</p>
+    }
+    <ul data-part="summary-list">
+      @for (entry of form.entries(); track entry.name) {
+        @for (message of entry.messages; track message) {
+          <li>
+            @if (entry.id) {
+              <a
+                data-part="summary-item"
+                [attr.href]="'#' + entry.id"
+                (click)="focus($event, entry.id)"
+              >
+                {{ message }}
+              </a>
+            } @else {
+              <span data-part="summary-item">{{ message }}</span>
+            }
+          </li>
+        }
+      }
+    </ul>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        // The family's identifier on the part: its rules reach it by name, never as any descendant.
+                        'data-ui': 'form',
+                        'data-part': 'summary',
+                        role: 'alert',
+                        tabindex: '-1',
+                        '[attr.aria-labelledby]': 'form.summaryId()',
+                    },
+                }]
+        }] });
+/**
+ * A form, its errors and its row of actions.
+ *
+ * **It owns the errors and nothing else.** `docs/component-features.md` § 6 puts
+ * the boundary there: the family coordinates submission, validation, global
+ * messages and focus "sem possuir o estado de cada framework". Values come from
+ * `FormData`, validity from `checkValidity()` and from Reactive Forms, and the
+ * values themselves stay with whichever of the two owns them.
+ *
+ * **`novalidate` is written, and constraint validation still runs.** The
+ * attribute stops the browser drawing its own bubble beside a control whose
+ * error the `field` is already showing; `checkValidity()` is called explicitly
+ * and each control's `validationMessage` is the platform's localized string.
+ *
+ * **Reactive Forms is the second source.** When there is a `ControlContainer`,
+ * every control is marked touched at submit and each failing one becomes a
+ * sentence: a built-in validator's through the catalog's `errors.*` messages,
+ * an application's own through `SL_FORM_ERROR_MESSAGES`.
+ *
+ * **Signal Forms needs nothing here.** Angular 22's `[field]` binds a control
+ * through its `ControlValueAccessor`, which every Slotted control provides, so
+ * they work under it today and this family adds no second integration.
+ */
+class SlForm {
+    /**
+     * Present means the consumer owns the error map, for the life of the
+     * component. Keyed by the `name` attribute of the control each error is about.
+     */
+    errorsInput = input(undefined, { ...(ngDevMode ? { debugName: "errorsInput" } : /* istanbul ignore next */ {}), alias: 'errors' });
+    /** The errors an uncontrolled form starts from, read once. */
+    defaultErrors = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultErrors" }] : /* istanbul ignore next */ []));
+    validate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "validate" }] : /* istanbul ignore next */ []));
+    errorFocus = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorFocus" }] : /* istanbul ignore next */ []));
+    summary = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+    summaryDescription = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summaryDescription" }] : /* istanbul ignore next */ []));
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * summary's heading (`summaryTitle`) and the built-in validators' sentences
+     * (`errors.*`).
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** Lets the browser draw its own validation bubble. Off by default. */
+    nativeValidation = input(undefined, { ...(ngDevMode ? { debugName: "nativeValidation" } : /* istanbul ignore next */ {}), transform: (raw) => (raw === undefined ? undefined : booleanAttribute(raw)) });
+    /** Marks the form and every control in it as unavailable. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Marks the form busy for work the family did not start — a mutation a
+     * consumer's own client is running. It is merged with the family's own
+     * submission, so either one puts the root in its busy state.
+     */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Registers a `beforeunload` guard while anything in the form has been
+     * edited. Off by default: a guard nobody asked for is a trap.
+     */
+    guardUnsaved = input(false, { ...(ngDevMode ? { debugName: "guardUnsaved" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** One output for one transition, carrying the reason and `cancel()`. */
+    errorsChange = output();
+    /**
+     * Emitted when the form submits and nothing is wrong with it. The values are
+     * read from `FormData`, and `errors` is how a handler publishes what a server
+     * answered.
+     */
+    formSubmit = output();
+    element = inject(ElementRef).nativeElement;
+    defaults = injectFormDefaults();
+    errorMessages = injectFormErrorMessages();
+    /** The family's words in the language in force, with this form's `messages` laid over them. */
+    t = injectMessages(formMessages, this.messages);
+    /** The Reactive Forms group around this element, when a consumer wrote one. */
+    container = inject(ControlContainer, { optional: true, self: true });
+    writtenNoValidate = inject(new HostAttributeToken('novalidate'), {
+        optional: true,
+    });
+    own = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "own" }] : /* istanbul ignore next */ []));
+    controls = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
+    summaryElement = null;
+    /** Set when a publish should be followed by the focus a failed submit moves. */
+    pendingFocus = false;
+    ownSubmitting = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownSubmitting" }] : /* istanbul ignore next */ []));
+    /** Either the family's own submission or a consumer's own work. */
+    submitting = computed(() => this.ownSubmitting() || this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
+    submitted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "submitted" }] : /* istanbul ignore next */ []));
+    external = computed(() => normaliseErrors(this.errorsInput()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "external" }] : /* istanbul ignore next */ []));
+    controlled = computed(() => this.errorsInput() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlled" }] : /* istanbul ignore next */ []));
+    errors = computed(() => (this.controlled() ? this.external() : this.own()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    entries = computed(() => orderErrors(this.errors(), this.controls()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    hasAnyError = computed(() => hasErrors(this.errors()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasAnyError" }] : /* istanbul ignore next */ []));
+    summaryId = signal(`slotted-form-summary-${(summaryCounter += 1)}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summaryId" }] : /* istanbul ignore next */ []));
+    resolvedSummaryTitle = computed(() => this.t('summaryTitle'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSummaryTitle" }] : /* istanbul ignore next */ []));
+    resolvedSummaryDescription = computed(() => this.summaryDescription() ?? this.defaults.summaryDescription, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSummaryDescription" }] : /* istanbul ignore next */ []));
+    resolvedAlign = computed(() => this.align() ?? this.defaults.align, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []));
+    resolvedValidate = computed(() => this.validate() ?? this.defaults.validate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedValidate" }] : /* istanbul ignore next */ []));
+    resolvedErrorFocus = computed(() => this.errorFocus() ?? this.defaults.errorFocus, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedErrorFocus" }] : /* istanbul ignore next */ []));
+    resolvedSummary = computed(() => this.summary() ?? this.defaults.summary, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSummary" }] : /* istanbul ignore next */ []));
+    resolvedNativeValidation = computed(() => this.nativeValidation() ??
+        (this.writtenNoValidate === null ? this.defaults.nativeValidation : false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedNativeValidation" }] : /* istanbul ignore next */ []));
+    showsOwnSummary = computed(() => this.resolvedSummary() === 'auto' && this.entries().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showsOwnSummary" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.attachUnloadGuard();
+    }
+    ngOnInit() {
+        this.own.set(normaliseErrors(this.defaultErrors()));
+        this.readControls();
+    }
+    /**
+     * The summary says when it exists, and takes the focus a failed submit asked
+     * for. The move waits for the region rather than racing it: the errors and
+     * the element that shows them are published in the same change, and a
+     * `focus()` called before the region rendered would land on nothing.
+     */
+    registerSummary(element) {
+        this.summaryElement = element;
+        if (element === null || !this.pendingFocus)
+            return;
+        this.pendingFocus = false;
+        element.focus();
+    }
+    /** Runs validation now and publishes what it found. */
+    validateNow() {
+        const found = this.collect();
+        this.publish(found, 'programmatic', undefined);
+        return found;
+    }
+    /** Submits as though the submit button had been pressed. */
+    submit() {
+        this.element.requestSubmit();
+    }
+    /** Resets the controls and clears the errors. */
+    reset() {
+        this.element.reset();
+    }
+    /** Moves focus where a failed submit would have moved it. */
+    focusFirstError() {
+        const focus = this.resolvedErrorFocus();
+        if (focus === 'none')
+            return;
+        if (focus === 'summary' && this.summaryElement !== null) {
+            this.summaryElement.focus();
+            return;
+        }
+        const first = this.entries()[0];
+        if (first === undefined)
+            return;
+        const control = this.element.elements.namedItem(first.name);
+        const element = control instanceof RadioNodeList ? control[0] : control;
+        if (element instanceof HTMLElement)
+            element.focus();
+    }
+    onSubmit(event) {
+        this.submitted.set(true);
+        this.readControls();
+        if (this.submitting()) {
+            /* A second submit while one is pending is refused. */
+            event.preventDefault();
+            return;
+        }
+        const found = this.resolvedValidate() === 'none' ? this.external() : this.collect();
+        if (hasErrors(found)) {
+            event.preventDefault();
+            this.publish(found, 'submit', event);
+            return;
+        }
+        this.publish({}, 'submit', event);
+        event.preventDefault();
+        const data = new FormData(this.element);
+        const values = {};
+        for (const key of new Set(data.keys())) {
+            const all = data.getAll(key);
+            values[key] = all.length > 1 ? all : all[0];
+        }
+        this.formSubmit.emit({
+            values,
+            event,
+            errors: (errors) => this.publish(normaliseErrors(errors), 'submit', event),
+            pending: (work) => {
+                this.ownSubmitting.set(true);
+                void work
+                    .then((settled) => {
+                    if (settled !== undefined && settled !== null) {
+                        this.publish(normaliseErrors(settled), 'submit', event);
+                    }
+                })
+                    .finally(() => this.ownSubmitting.set(false));
+            },
+        });
+    }
+    onReset() {
+        this.submitted.set(false);
+        this.publish({}, 'clear', undefined);
+    }
+    /**
+     * A server error is dropped when the control it names is edited. After a
+     * failed submit under `validate="change"`, the whole form is checked again
+     * instead, because a reader who has seen the list is fixing it.
+     */
+    onInput(event) {
+        const name = nameOf(event.target);
+        if (name === null)
+            return;
+        if (this.resolvedValidate() === 'change' && this.submitted()) {
+            this.publish(this.collect(), 'keyboard', event, false);
+            return;
+        }
+        const next = withoutError(this.errors(), name);
+        if (next !== this.errors())
+            this.publish(next, 'keyboard', event, false);
+    }
+    /**
+     * On blur only the control that lost focus is checked. Running the whole form
+     * would tell a reader that six fields they have not reached yet are wrong,
+     * which is the noise `validate="submit"` exists to avoid.
+     */
+    onFocusOut(event) {
+        if (this.resolvedValidate() !== 'blur')
+            return;
+        const name = nameOf(event.target);
+        if (name === null)
+            return;
+        const found = this.collect();
+        const messages = found[name];
+        const next = messages === undefined
+            ? withoutError(this.errors(), name)
+            : mergeErrors(this.errors(), { [name]: messages });
+        if (next !== this.errors())
+            this.publish(next, 'keyboard', event, false);
+    }
+    /**
+     * Three sources, latest last: whatever a server sent, the platform's own
+     * constraint validation, and Reactive Forms.
+     */
+    collect() {
+        return mergeErrors(this.external(), collectValidity(this.element), this.angularErrors());
+    }
+    /**
+     * Every failing control in the group around this form, as a sentence. Angular
+     * reports a key and a shape and never a message, because a message is the
+     * application's and so is its language; the registry is where it is written.
+     */
+    angularErrors() {
+        const group = this.container?.control;
+        if (group === null || group === undefined)
+            return {};
+        group.markAllAsTouched();
+        const found = {};
+        for (const [name, control] of Object.entries(group.controls)) {
+            const errors = control.errors;
+            if (errors === null || control.disabled)
+                continue;
+            const messages = Object.entries(errors)
+                .map(([key, detail]) => this.errorMessages[key]?.({ name, key, detail }) ?? this.builtInMessage(key, detail))
+                .filter((message) => typeof message === 'string');
+            if (messages.length > 0)
+                found[name] = messages;
+        }
+        return found;
+    }
+    /**
+     * The sentence for one of Angular's own validators, from the catalog; for a
+     * key the catalog does not know, nothing — the application's validator names
+     * its own message through `SL_FORM_ERROR_MESSAGES`.
+     */
+    builtInMessage(key, detail) {
+        const shape = (detail ?? {});
+        switch (key) {
+            case 'required':
+                return this.t('errors.required');
+            case 'email':
+                return this.t('errors.email');
+            case 'min':
+                return this.t('errors.min', { min: Number(shape.min) });
+            case 'max':
+                return this.t('errors.max', { max: Number(shape.max) });
+            case 'minlength':
+                return this.t('errors.minlength', { length: Number(shape.requiredLength) });
+            case 'maxlength':
+                return this.t('errors.maxlength', { length: Number(shape.requiredLength) });
+            case 'pattern':
+                return this.t('errors.pattern');
+            default:
+                return undefined;
+        }
+    }
+    readControls() {
+        this.controls.set(namedControls(this.element));
+    }
+    publish(next, reason, source, moveFocus = true) {
+        this.readControls();
+        let cancelled = false;
+        const state = createControllable({
+            controlled: undefined,
+            initial: this.errors(),
+            equals: sameErrors,
+            onRequest: (pending) => {
+                this.errorsChange.emit(pending);
+                cancelled = pending.cancelled;
+            },
+        });
+        state.request(next, reason, source);
+        if (cancelled)
+            return;
+        if (!this.controlled())
+            this.own.set(next);
+        if (!moveFocus || !hasErrors(next) || this.resolvedErrorFocus() === 'none')
+            return;
+        /* A summary that has not been rendered yet takes the focus when it is, and
+           one that is already on the page takes it now. */
+        if (this.resolvedErrorFocus() === 'summary' && this.summaryElement === null) {
+            this.pendingFocus = true;
+            return;
+        }
+        this.focusFirstError();
+    }
+    /**
+     * The guard nobody else ships. It is off by default, because a page that
+     * refuses to close after a reader typed one character is a trap.
+     */
+    attachUnloadGuard() {
+        const onBeforeUnload = (event) => {
+            if (!this.guardUnsaved() || this.submitting())
+                return;
+            if (!isDirty(this.element))
+                return;
+            event.preventDefault();
+        };
+        window.addEventListener('beforeunload', onBeforeUnload);
+        inject(DestroyRef).onDestroy(() => window.removeEventListener('beforeunload', onBeforeUnload));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlForm, isStandalone: true, selector: "form[slForm]", inputs: { errorsInput: { classPropertyName: "errorsInput", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, defaultErrors: { classPropertyName: "defaultErrors", publicName: "defaultErrors", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, errorFocus: { classPropertyName: "errorFocus", publicName: "errorFocus", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, summaryDescription: { classPropertyName: "summaryDescription", publicName: "summaryDescription", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, nativeValidation: { classPropertyName: "nativeValidation", publicName: "nativeValidation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, guardUnsaved: { classPropertyName: "guardUnsaved", publicName: "guardUnsaved", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { errorsChange: "errorsChange", formSubmit: "formSubmit" }, host: { attributes: { "data-ui": "form", "data-part": "root" }, listeners: { "submit": "onSubmit($event)", "reset": "onReset()", "input": "onInput($event)", "focusout": "onFocusOut($event)" }, properties: { "attr.novalidate": "resolvedNativeValidation() ? null : ''", "attr.aria-busy": "submitting() ? 'true' : null", "attr.data-invalid": "hasAnyError() ? '' : null", "attr.data-loading": "submitting() ? '' : null", "attr.data-disabled": "disabled() ? '' : null" } }, providers: [{ provide: SlFormOwner, useExisting: forwardRef(() => SlForm) }], exportAs: ["slForm"], ngImport: i0, template: `@if (showsOwnSummary()) {
+      <div slFormSummary></div>
+    }
+    <ng-content />`, isInline: true, styles: ["@layer slotted.components{[data-ui=form][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);container-name:slotted-form;container-type:inline-size;color:var(--slotted-form-color, var(--slotted-text, CanvasText));display:block;font-family:var(--slotted-control-font-family, system-ui, sans-serif);inline-size:100%;min-inline-size:0}[data-ui=form][data-part=root][data-loading]{cursor:progress}[data-ui=form][data-part=summary]{background-color:var(--slotted-form-summary-background, var(--slotted-tone-danger-surface));border:var(--slotted-control-border-width, 1px) solid var(--slotted-form-summary-border-color, var(--slotted-tone-danger-border));border-inline-start-width:var(--slotted-border-width-thick, 2px);border-radius:var(--slotted-form-summary-radius, var(--slotted-radius-md, 6px));color:var(--slotted-form-summary-color, var(--slotted-tone-danger-text));display:block;font-size:var(--_font-size);margin-block-end:var(--slotted-space-6, 1rem);padding-block:var(--slotted-space-5, .75rem);padding-inline:var(--slotted-space-6, 1rem)}[data-ui=form][data-part=summary]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=form][data-part=summary]>[data-part=summary-title]{font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-md, 1.5);margin:0}[data-ui=form][data-part=summary]>[data-part=summary-list]{display:flex;flex-direction:column;gap:var(--slotted-space-2, .25rem);line-height:var(--slotted-line-height-sm, 1.45);list-style:none;margin-block:var(--slotted-space-3, .375rem) 0;max-block-size:calc(12em * var(--slotted-line-height-sm, 1.45));overflow-y:auto;padding-block:var(--slotted-space-1, .125rem);padding-inline-start:0}[data-ui=form][data-part=summary]>[data-part=summary-list]>li>[data-part=summary-item]{color:inherit;text-decoration-line:underline;text-underline-offset:var(--slotted-space-1, .125rem)}[data-ui=form][data-part=summary]>[data-part=summary-list]>li>[data-part=summary-item]:hover:not(:disabled){text-decoration-thickness:var(--slotted-border-width-thick, 2px)}[data-ui=form][data-part=summary]>[data-part=summary-list]>li>[data-part=summary-item]:focus-visible{border-radius:var(--slotted-radius-xs, 2px);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=form][data-part=actions]{display:flex;flex-wrap:wrap;gap:var(--slotted-space-4, .5rem);justify-content:flex-end;margin-block-start:var(--slotted-space-8, 1.5rem)}[data-ui=form][data-part=actions][data-align=start]{justify-content:flex-start}[data-ui=form][data-part=actions][data-align=between]{justify-content:space-between}[data-ui=form][data-part=actions][data-align=stretch]>*{flex:1 1 0}@container slotted-form (max-width: 360px){[data-ui=form][data-part=actions]{flex-direction:column-reverse}[data-ui=form][data-part=actions]>*{inline-size:100%}}@media(forced-colors:active){[data-ui=form][data-part=summary]{border-color:CanvasText;border-inline-start-color:Highlight}}}\n"], dependencies: [{ kind: "component", type: SlFormSummary, selector: "[slFormSummary]", exportAs: ["slFormSummary"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'form[slForm]', standalone: true, exportAs: 'slForm', imports: [SlFormSummary], template: `@if (showsOwnSummary()) {
+      <div slFormSummary></div>
+    }
+    <ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: SlFormOwner, useExisting: forwardRef(() => SlForm) }], host: {
+                        'data-ui': 'form',
+                        'data-part': 'root',
+                        '[attr.novalidate]': "resolvedNativeValidation() ? null : ''",
+                        '[attr.aria-busy]': "submitting() ? 'true' : null",
+                        '[attr.data-invalid]': "hasAnyError() ? '' : null",
+                        '[attr.data-loading]': "submitting() ? '' : null",
+                        '[attr.data-disabled]': "disabled() ? '' : null",
+                        '(submit)': 'onSubmit($event)',
+                        '(reset)': 'onReset()',
+                        '(input)': 'onInput($event)',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, styles: ["@layer slotted.components{[data-ui=form][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);container-name:slotted-form;container-type:inline-size;color:var(--slotted-form-color, var(--slotted-text, CanvasText));display:block;font-family:var(--slotted-control-font-family, system-ui, sans-serif);inline-size:100%;min-inline-size:0}[data-ui=form][data-part=root][data-loading]{cursor:progress}[data-ui=form][data-part=summary]{background-color:var(--slotted-form-summary-background, var(--slotted-tone-danger-surface));border:var(--slotted-control-border-width, 1px) solid var(--slotted-form-summary-border-color, var(--slotted-tone-danger-border));border-inline-start-width:var(--slotted-border-width-thick, 2px);border-radius:var(--slotted-form-summary-radius, var(--slotted-radius-md, 6px));color:var(--slotted-form-summary-color, var(--slotted-tone-danger-text));display:block;font-size:var(--_font-size);margin-block-end:var(--slotted-space-6, 1rem);padding-block:var(--slotted-space-5, .75rem);padding-inline:var(--slotted-space-6, 1rem)}[data-ui=form][data-part=summary]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=form][data-part=summary]>[data-part=summary-title]{font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-md, 1.5);margin:0}[data-ui=form][data-part=summary]>[data-part=summary-list]{display:flex;flex-direction:column;gap:var(--slotted-space-2, .25rem);line-height:var(--slotted-line-height-sm, 1.45);list-style:none;margin-block:var(--slotted-space-3, .375rem) 0;max-block-size:calc(12em * var(--slotted-line-height-sm, 1.45));overflow-y:auto;padding-block:var(--slotted-space-1, .125rem);padding-inline-start:0}[data-ui=form][data-part=summary]>[data-part=summary-list]>li>[data-part=summary-item]{color:inherit;text-decoration-line:underline;text-underline-offset:var(--slotted-space-1, .125rem)}[data-ui=form][data-part=summary]>[data-part=summary-list]>li>[data-part=summary-item]:hover:not(:disabled){text-decoration-thickness:var(--slotted-border-width-thick, 2px)}[data-ui=form][data-part=summary]>[data-part=summary-list]>li>[data-part=summary-item]:focus-visible{border-radius:var(--slotted-radius-xs, 2px);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=form][data-part=actions]{display:flex;flex-wrap:wrap;gap:var(--slotted-space-4, .5rem);justify-content:flex-end;margin-block-start:var(--slotted-space-8, 1.5rem)}[data-ui=form][data-part=actions][data-align=start]{justify-content:flex-start}[data-ui=form][data-part=actions][data-align=between]{justify-content:space-between}[data-ui=form][data-part=actions][data-align=stretch]>*{flex:1 1 0}@container slotted-form (max-width: 360px){[data-ui=form][data-part=actions]{flex-direction:column-reverse}[data-ui=form][data-part=actions]>*{inline-size:100%}}@media(forced-colors:active){[data-ui=form][data-part=summary]{border-color:CanvasText;border-inline-start-color:Highlight}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { errorsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], defaultErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultErrors", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], errorFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorFocus", required: false }] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: false }] }], summaryDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryDescription", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], nativeValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeValidation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], guardUnsaved: [{ type: i0.Input, args: [{ isSignal: true, alias: "guardUnsaved", required: false }] }], errorsChange: [{ type: i0.Output, args: ["errorsChange"] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }] } });
+function nameOf(target) {
+    if (!(target instanceof HTMLElement))
+        return null;
+    const name = target.name;
+    return typeof name === 'string' && name !== '' ? name : null;
+}
+function sameErrors(a, b) {
+    const names = Object.keys(a);
+    if (names.length !== Object.keys(b).length)
+        return false;
+    return names.every((name) => b[name] !== undefined &&
+        a[name].length === b[name].length &&
+        a[name].every((message, index) => message === b[name][index]));
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FORM_DEFAULTS, SL_FORM_ERROR_MESSAGES, SlForm, SlFormActions, SlFormOwner, SlFormSummary, injectFormDefaults, injectFormErrorMessages, provideFormDefaults, provideFormErrorMessages };
+//# sourceMappingURL=slotted-angular-form.mjs.map