@nldd/design-system 0.8.82 → 0.8.84

package/dist/components/forms/validation-list/validation-list.js

@@ -0,0 +1,358 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Nederlandse Digitale Dienst Validation List (Lit + TypeScript)
+ *
+ * Everything a value has to satisfy, in one list. A requirement you can state
+ * up front is an item with a rule, and it checks itself while you type. One
+ * only a server can decide is an item without a rule, and the app names it in
+ * `unmet` on the control.
+ *
+ * The list has two modes and `judging` is the switch. Before a verdict it shows
+ * its hints, which are the requirements of the field. After one it shows
+ * everything the value does not satisfy, and the hints are gone. It throws that
+ * switch itself the moment its control turns `invalid`, so when the field is
+ * judged is the consumer's decision, and the right moment is on submit.
+ *
+ * Hints are off by default. A phone number does not need its format spelled out
+ * before anyone has typed, while the rules for a password do.
+ *
+ * There are no checkmarks. The control already shows a validation icon of its
+ * own, and repeating that per line says the same thing three times.
+ *
+ * @element nldd-validation-list
+ *
+ * @attr {string} for - Id of the control this list is about. Not needed inside an nldd-form-field, which hands its own control over.
+ * @attr {boolean} hint - Show every item before there is a verdict, as the requirements of the field. Overridable per item.
+ * @attr {boolean} judging - Drop the hints, because this field has been judged. Turned on by the list itself once its control is `invalid`, and settable by hand. What turns red follows `invalid`, not this.
+ *
+ * @slot - nldd-validation-item elements.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ * @element nldd-validation-item
+ *
+ * @attr {string} match - Regular expression the value has to contain. Not anchored, unlike the native `pattern`: `[A-Z]` means "has a capital in it".
+ * @attr {number} minlength - Fewest characters the value may have.
+ * @attr {number} maxlength - Most characters the value may have.
+ * @attr {boolean} required - The value may not be empty. Use it on a field whose other rules would pass an empty value.
+ * @attr {boolean} hint - Show this item before there is a verdict, whatever the list says.
+ * @attr {boolean} unmet - Whether the value fails this item. Managed by the list; do not set it yourself.
+ * @attr {boolean} visible - Whether the item is on screen. Managed by the list.
+ *
+ * @slot - The text of the requirement.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ * Give every item an id that names its field as well as its rule. An id has to
+ * be unique in the whole document, and `length` is the first thing three fields
+ * in one form will all reach for.
+ *
+ * @example
+ * <nldd-form-field label="Wachtwoord">
+ *   <nldd-password-field name="password" invalid unmet="password-breach"></nldd-password-field>
+ *   <nldd-validation-list hint>
+ *     <nldd-validation-item id="password-length" minlength="8">Minimaal 8 tekens</nldd-validation-item>
+ *     <nldd-validation-item id="password-capital" match="[A-Z]">Een hoofdletter</nldd-validation-item>
+ *     <nldd-validation-item id="password-breach">Dit wachtwoord staat in een bekend datalek</nldd-validation-item>
+ *   </nldd-validation-list>
+ * </nldd-form-field>
+ */
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { validationListStyles, validationItemStyles } from './validation-list.styles.js';
+import { validationListTemplate, validationItemTemplate } from './validation-list.template.js';
+/* ============================================================
+   nldd-validation-item
+   ============================================================ */
+let NLDDValidationItem = class NLDDValidationItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Not anchored, unlike the native `pattern`. See the note at the top. */
+        this.match = '';
+        /** For a field whose other rules would pass an empty value. See `test`. */
+        this.required = false;
+        this.hint = false;
+        this.unmet = false;
+        this.visible = false;
+    }
+    /** Whether this item judges itself, or waits for the app to name it. */
+    get hasRule() {
+        return this.required
+            || Boolean(this.match)
+            || this.minlength !== undefined
+            || this.maxlength !== undefined;
+    }
+    /**
+     * Whether `value` satisfies this item, or null when there is nothing to
+     * satisfy because the item carries no rule.
+     *
+     * An empty value is held against the rules like any other, so "minimaal 8
+     * tekens" fails on it, because it does. What keeps a fresh field from
+     * lighting up all of its requirements is not this method but the verdict: an
+     * item only turns critical once the control says `invalid`, and an untouched
+     * field has not been judged yet.
+     */
+    test(value) {
+        if (!this.hasRule)
+            return null;
+        if (this.required && !value)
+            return false;
+        if (this.minlength !== undefined && value.length < this.minlength)
+            return false;
+        if (this.maxlength !== undefined && value.length > this.maxlength)
+            return false;
+        if (this.match && !new RegExp(this.match, 'u').test(value))
+            return false;
+        return true;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'listitem');
+    }
+    render() {
+        return validationItemTemplate(this);
+    }
+};
+NLDDValidationItem.styles = validationItemStyles;
+__decorate([
+    property({ type: String })
+], NLDDValidationItem.prototype, "match", void 0);
+__decorate([
+    property({ type: Number })
+], NLDDValidationItem.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Number })
+], NLDDValidationItem.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDValidationItem.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDValidationItem.prototype, "hint", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDValidationItem.prototype, "unmet", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDValidationItem.prototype, "visible", void 0);
+NLDDValidationItem = __decorate([
+    customElement('nldd-validation-item')
+], NLDDValidationItem);
+export { NLDDValidationItem };
+/* ============================================================
+   nldd-validation-list
+   ============================================================ */
+let NLDDValidationList = class NLDDValidationList extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Id of the control, for a list that sits outside an nldd-form-field. */
+        this.for = '';
+        this.hint = false;
+        /**
+         * Whether the list is judging the value or explaining what the field wants.
+         *
+         * The switch between the two modes. Off, the hints state the requirements;
+         * on, they are gone and what is left is whatever the value fails. It goes on
+         * the moment the control is `invalid`, and then stays on. A field that has
+         * been judged does not become unjudged: repair the value and the control
+         * turns valid again, but the question the hints answered has been asked and
+         * settled, so bringing them back would undo the one thing the verdict
+         * achieved.
+         *
+         * What it does not decide is what turns red. That follows `invalid` on the
+         * control and nothing else, so a line never goes critical under a field that
+         * looks fine.
+         *
+         * So when a field starts being judged is decided by whoever writes `invalid`
+         * on the control, and the moment to do that is on submit. Writing it while
+         * someone is still typing turns a field red about a value that is not
+         * finished, which is the one thing this list is built to avoid.
+         *
+         * Set it yourself to flip the mode without a control saying anything, and
+         * clear it to put the field back the way it started, which is what a reset
+         * wants.
+         */
+        this.judging = false;
+        /**
+         * The control this list is about.
+         *
+         * Set by the wrapping nldd-form-field, which already answers "which control
+         * is this field about" for the label and the description. A `for` of its own
+         * wins, and setting this property directly is what a test or a story does.
+         */
+        this.control = null;
+        this._resolved = null;
+        this._observer = null;
+        this._onInput = () => this._evaluate();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._resolve();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._detach();
+    }
+    /**
+     * Resolving and latching happen before the render, not after it.
+     *
+     * Both write a reactive property, `_resolved` and `judging`, and writing one
+     * from `updated()` asks for a second render on top of the one that just
+     * finished. That is a dev-mode warning on every field that arrives already
+     * invalid. Reading what they need does not take a render: the control is
+     * found by id or handed over as a property, and the items are light DOM.
+     */
+    willUpdate(changed) {
+        if (changed.has('for') || changed.has('control'))
+            this._resolve();
+        this._latchJudging();
+    }
+    updated() {
+        this._evaluate();
+    }
+    /**
+     * A field that has been judged does not become unjudged, so this only ever
+     * goes on. What turns red is `invalid` and nothing else; this decides only
+     * whether the hints are still on screen.
+     */
+    _latchJudging() {
+        if (this._resolved?.hasAttribute('invalid'))
+            this.judging = true;
+    }
+    render() {
+        return validationListTemplate(this);
+    }
+    get _items() {
+        return Array.from(this.children)
+            .filter((el) => el instanceof NLDDValidationItem);
+    }
+    /**
+     * Finds the control and starts listening to it.
+     *
+     * `getRootNode()` and not `document`: an IDREF only resolves inside its own
+     * tree, and a consumer who puts this form inside a component of their own
+     * would otherwise find nothing.
+     */
+    _resolve() {
+        const root = this.getRootNode();
+        const next = this.for ? root.getElementById?.(this.for) ?? null : this.control;
+        // `_observer` and not just the control: taking this element out of the DOM
+        // and putting it back, which is what a consumer portalling a sheet to the
+        // body does, runs disconnectedCallback and takes the listener with it. The
+        // control never changed, so comparing only that would find no work to do
+        // and the list would sit there reacting to nothing.
+        if (next === this._resolved && this._observer)
+            return;
+        this._detach();
+        this._resolved = next;
+        if (!next)
+            return;
+        next.addEventListener('input', this._onInput);
+        this._observer = new MutationObserver(() => {
+            this._latchJudging();
+            this._evaluate();
+        });
+        this._observer.observe(next, { attributes: true, attributeFilter: ['invalid', 'unmet'] });
+    }
+    _detach() {
+        this._resolved?.removeEventListener('input', this._onInput);
+        this._observer?.disconnect();
+        this._observer = null;
+    }
+    _currentValue() {
+        if (this.value !== undefined)
+            return this.value;
+        const control = this._resolved;
+        return control?.value === undefined || control.value === null ? '' : String(control.value);
+    }
+    /**
+     * Decides per item whether it is met, and what that makes visible.
+     *
+     * An item with a rule judges itself; one without waits to be named in
+     * `unmet` on the control. Never both: a rule is held against the value as it
+     * is now, while `unmet` is a snapshot of the last check and therefore older,
+     * so letting the snapshot win would show a mistake that has been fixed.
+     */
+    _evaluate() {
+        const control = this._resolved;
+        // The two attributes answer two questions and are kept apart on purpose.
+        // `invalid` decides what turns critical, so a line never goes red under a
+        // field that looks fine; `judging` only decides whether the hints are
+        // still on screen, and unlike `invalid` it does not come back off.
+        const invalid = control?.hasAttribute('invalid') ?? false;
+        const named = (control?.getAttribute('unmet') ?? '').split(' ').filter(Boolean);
+        const value = this._currentValue();
+        let anyVisible = false;
+        let anyRuleFails = false;
+        const messages = [];
+        for (const item of this._items) {
+            const rule = item.test(value);
+            const failing = rule === null ? named.includes(item.id) : !rule;
+            if (import.meta.env?.DEV && rule !== null && named.includes(item.id)) {
+                console.warn(`<nldd-validation-list>: item "${item.id}" has a rule of its own and is also named in \`unmet\`. `
+                    + 'The rule decides, and the name is ignored: it is a snapshot of the previous check and cannot be newer '
+                    + 'than the value. Drop it from `unmet`, or take the rule off the item.');
+            }
+            item.unmet = invalid && failing;
+            item.visible = item.unmet || (!this.judging && (item.hint || this.hint));
+            if (item.visible)
+                anyVisible = true;
+            if (rule === false) {
+                anyRuleFails = true;
+                messages.push(item.textContent?.trim() ?? '');
+            }
+        }
+        this.classList.toggle('has-items', anyVisible);
+        this._reportValidity(anyRuleFails, messages);
+    }
+    /**
+     * Hands the verdict to the control, so a form with a failing rule does not
+     * submit.
+     *
+     * Only the rules. What the app named in `unmet` it already knows, and
+     * reporting that back would be this list telling the app what the app told
+     * it.
+     *
+     * Through `setCustomValidity` and not into `internals` directly. A control
+     * reports its own `required` and `pattern` through the same channel, and
+     * `setValidity` writes the whole set of flags at once: writing here would
+     * erase those on the way in, and they would erase this on the next render.
+     * The platform's own name for a reason of your own is the one both sides
+     * understand, and a plain native input answers to it too.
+     */
+    _reportValidity(fails, messages) {
+        const control = this._resolved;
+        if (!control?.setCustomValidity)
+            return;
+        control.setCustomValidity(fails ? messages.filter(Boolean).join('. ') : '');
+    }
+};
+NLDDValidationList.styles = validationListStyles;
+__decorate([
+    property({ type: String })
+], NLDDValidationList.prototype, "for", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDValidationList.prototype, "hint", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDValidationList.prototype, "judging", void 0);
+__decorate([
+    property({ attribute: false })
+], NLDDValidationList.prototype, "control", void 0);
+__decorate([
+    property({ attribute: false })
+], NLDDValidationList.prototype, "value", void 0);
+__decorate([
+    state()
+], NLDDValidationList.prototype, "_resolved", void 0);
+NLDDValidationList = __decorate([
+    customElement('nldd-validation-list')
+], NLDDValidationList);
+export { NLDDValidationList };
+//# sourceMappingURL=validation-list.js.map

package/dist/components/forms/validation-list/validation-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-list.js","sourceRoot":"","sources":["../../../../src/components/forms/validation-list/validation-list.ts"],"names":[],"mappings":"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"}

package/dist/components/forms/validation-list/validation-list.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const validationListStyles: import("lit").CSSResult;
+export declare const validationItemStyles: import("lit").CSSResult;
+//# sourceMappingURL=validation-list.styles.d.ts.map

package/dist/components/forms/validation-list/validation-list.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-list.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/validation-list/validation-list.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,yBA2BhC,CAAC;AAGF,eAAO,MAAM,oBAAoB,yBA2BhC,CAAC"}

package/dist/components/forms/validation-list/validation-list.styles.js

@@ -0,0 +1,58 @@
+import { css } from 'lit';
+export const validationListStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		--_gap: var(--primitives-space-2);
+
+		display: block;
+	}
+
+	:host(:not(.has-items)) {
+		display: none;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # List */
+
+	.validation-list {
+		display: flex;
+		flex-direction: column;
+		gap: var(--_gap);
+	}
+`;
+export const validationItemStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		--_content-color: var(--semantics-content-color);
+		--_font: var(--primitives-font-body-sm-regular-tight);
+
+		display: none;
+		color: var(--_content-color);
+		font: var(--_font);
+	}
+
+	:host([visible]) {
+		display: block;
+	}
+
+	:host([unmet]) {
+		--_content-color: var(--semantics-content-critical-color);
+	}
+
+	/* After the visible rule at equal specificity: hidden must also win on an
+	   item that is currently shown. */
+	:host([hidden]) {
+		display: none;
+	}
+`;
+//# sourceMappingURL=validation-list.styles.js.map

package/dist/components/forms/validation-list/validation-list.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-list.styles.js","sourceRoot":"","sources":["../../../../src/components/forms/validation-list/validation-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1B,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BtC,CAAC;AAGF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BtC,CAAC"}

package/dist/components/forms/validation-list/validation-list.template.d.ts

@@ -0,0 +1,5 @@
+import { TemplateResult } from 'lit';
+import type { NLDDValidationList, NLDDValidationItem } from './validation-list.js';
+export declare function validationListTemplate(_component: NLDDValidationList): TemplateResult;
+export declare function validationItemTemplate(_component: NLDDValidationItem): TemplateResult;
+//# sourceMappingURL=validation-list.template.d.ts.map

package/dist/components/forms/validation-list/validation-list.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-list.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/validation-list/validation-list.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAEnF,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,kBAAkB,GAAG,cAAc,CAQrF;AAED,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,kBAAkB,GAAG,cAAc,CAIrF"}

package/dist/components/forms/validation-list/validation-list.template.js

@@ -0,0 +1,16 @@
+import { html } from 'lit';
+export function validationListTemplate(_component) {
+    return html `
+		<div class="validation-list"
+			role="list"
+		>
+			<slot></slot>
+		</div>
+	`;
+}
+export function validationItemTemplate(_component) {
+    return html `
+		<slot></slot>
+	`;
+}
+//# sourceMappingURL=validation-list.template.js.map

package/dist/components/forms/validation-list/validation-list.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-list.template.js","sourceRoot":"","sources":["../../../../src/components/forms/validation-list/validation-list.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,sBAAsB,CAAC,UAA8B;IACpE,OAAO,IAAI,CAAA;;;;;;EAMV,CAAC;AACH,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,UAA8B;IACpE,OAAO,IAAI,CAAA;;EAEV,CAAC;AACH,CAAC"}