@authhero/widget 0.37.0 → 0.38.0

package/dist/collection/components/authhero-node/authhero-node.css

@@ -369,6 +369,100 @@ input[type="date"].input-field+.input-label {
   left: 8px;
 }
 
+/* ==========================================================================
+   Date Input - Segmented day / month / year
+   Part: date-input, date-segment, date-separator
+
+   The group is styled as one field: the outer box carries the border and
+   focus ring, the segments inside are borderless so three inputs read as a
+   single control.
+   ========================================================================== */
+
+.date-input {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  background-color: var(--ah-color-input-bg, #ffffff);
+  border: var(--ah-input-border-width, 1px) solid
+    var(--ah-color-border, #c9cace);
+  border-radius: var(--ah-input-radius, 3px);
+  transition:
+    border-color 0.15s ease-out,
+    box-shadow 0.15s ease-out;
+}
+
+.date-input:hover {
+  border-color: var(--ah-color-border-hover, #65676e);
+}
+
+.date-input:focus-within {
+  border-color: var(--ah-color-primary, #635dff);
+  box-shadow: inset 0 0 0 1px var(--ah-color-primary, #635dff);
+}
+
+.date-input.has-error {
+  border-color: var(--ah-color-error, #d03c38);
+}
+
+.date-input.has-error:focus-within {
+  box-shadow: inset 0 0 0 1px var(--ah-color-error, #d03c38);
+}
+
+/* Forced-colors mode drops box-shadow, which is the only thing marking the
+   segment group as focused — the border colour is overridden too. Draw an
+   outline in a system colour so keyboard focus stays visible. */
+@media (forced-colors: active) {
+  .date-input:focus-within,
+  .date-input.has-error:focus-within {
+    outline: 2px solid Highlight;
+    outline-offset: 1px;
+  }
+}
+
+.date-segment {
+  /* Sized in ch so the boxes track the font: wide enough for the placeholder
+     tokens (DD/MM are wider than "00") without leaving a gap around a typed
+     value. The year box holds twice the digits. */
+  width: 3.25ch;
+  min-width: 0;
+  padding: 0;
+  font-size: 16px;
+  font-family: inherit;
+  text-align: center;
+  color: var(--ah-color-input-text, var(--ah-color-text, #1e212a));
+  background: transparent;
+  border: none;
+  outline: none;
+}
+
+.date-segment[data-date-segment="year"] {
+  width: 5.5ch;
+}
+
+/* Shown here, unlike other fields: the tokens are the field's format hint */
+.date-segment::placeholder {
+  color: var(--ah-color-text-muted, #65676e);
+  opacity: 1;
+}
+
+.date-segment:disabled {
+  color: var(--ah-color-text-disabled, #a0a0a0);
+  cursor: not-allowed;
+}
+
+.date-input:has(.date-segment:disabled) {
+  background-color: var(--ah-color-bg-disabled, #f5f5f5);
+}
+
+.date-separator {
+  padding: 0 4px;
+  font-size: 16px;
+  color: var(--ah-color-text-muted, #65676e);
+  user-select: none;
+}
+
 /* Social buttons container */
 .social-buttons {
   display: flex;

package/dist/collection/components/authhero-node/authhero-node.js

@@ -1,5 +1,6 @@
 import { h, } from "@stencil/core";
 import { countries, getCountryByCode, } from "../../utils/country-data";
+import { expandTwoDigitYear, getDateLayout, parseIsoDate, resolveYearAnchor, toIsoDate, } from "../../utils/date-format";
 export class AuthheroNode {
     /**
      * The component configuration to render.
@@ -15,6 +16,12 @@ export class AuthheroNode {
      * Whether the component is disabled.
      */
     disabled = false;
+    /**
+     * BCP-47 locale used for locale-dependent field layout (currently the
+     * segment order of DATE fields). Resolved server-side so SSR and hydration
+     * agree; falls back to day-month-year when absent.
+     */
+    locale;
     /**
      * Whether the password field is visible.
      */
@@ -36,6 +43,15 @@ export class AuthheroNode {
      * When true, the value is emitted as-is without dial code prefix.
      */
     telEmailMode = false;
+    /**
+     * Segment values for the DATE input, each held as typed (unpadded while the
+     * user is mid-entry) and normalised on blur.
+     */
+    dateSegments = {
+        year: "",
+        month: "",
+        day: "",
+    };
     /**
      * Emitted when a field value changes.
      */
@@ -47,13 +63,16 @@ export class AuthheroNode {
     componentChanged() {
         this.initCountryFromConfig();
         this.initTelValue();
+        this.initDateValue();
     }
     valueChanged() {
         this.initTelValue();
+        this.initDateValue();
     }
     componentWillLoad() {
         this.initCountryFromConfig();
         this.initTelValue();
+        this.initDateValue();
     }
     componentDidLoad() {
         // Auto-focus a code field so the caret starts in the first (leftmost) box.
@@ -79,6 +98,20 @@ export class AuthheroNode {
             }
         }
     }
+    /**
+     * The last value this field emitted for a TEL component. The widget mirrors
+     * every emitted value back onto the `value` prop, and that echo must not be
+     * re-parsed: the wire format carries only a dial code, so a country picked
+     * from the list would be replaced by the first entry sharing that code — a
+     * user who chose Canada would be silently moved to the US on their next
+     * keystroke.
+     */
+    lastEmittedTel;
+    /** Emit a TEL value and remember it, so the echo can be recognised. */
+    emitTelValue(value) {
+        this.lastEmittedTel = value;
+        this.fieldChange.emit({ id: this.component.id, value });
+    }
     /**
      * Hydrate localPhoneNumber (and selectedCountry) from the effective value
      * for TEL fields. The full value is stored as `{dialCode}{localNumber}`,
@@ -87,6 +120,10 @@ export class AuthheroNode {
     initTelValue() {
         if (this.component?.type !== "TEL")
             return;
+        if (this.lastEmittedTel !== undefined &&
+            this.getEffectiveValue() === this.lastEmittedTel) {
+            return;
+        }
         const config = this.component.config;
         const allowEmail = config?.allow_email === true;
         const fullValue = this.getEffectiveValue();
@@ -121,11 +158,16 @@ export class AuthheroNode {
     handleCountryChange = (e) => {
         const target = e.target;
         this.selectedCountry = getCountryByCode(target.value);
+        // A half-typed "+xx" prefix is replaced by the picked country, not kept
+        // as a local number (it would emit "+46+4").
+        if (this.localPhoneNumber.startsWith("+")) {
+            this.localPhoneNumber = "";
+        }
         // Re-emit the full phone number with new dial code
         const fullNumber = this.localPhoneNumber
             ? `${this.selectedCountry.dialCode}${this.localPhoneNumber}`
             : "";
-        this.fieldChange.emit({ id: this.component.id, value: fullNumber });
+        this.emitTelValue(fullNumber);
     };
     /**
      * Try to detect a dial code prefix in the raw input (e.g. "+46", "0046")
@@ -163,7 +205,21 @@ export class AuthheroNode {
             target.value = cleanedLocal;
             this.localPhoneNumber = cleanedLocal;
             const fullNumber = `${this.selectedCountry.dialCode}${cleanedLocal}`;
-            this.fieldChange.emit({ id: this.component.id, value: fullNumber });
+            this.emitTelValue(fullNumber);
+        }
+        else if (value.startsWith("+")) {
+            // A leading "+" is an international prefix the user is still typing.
+            // Keep it in the field so the dial code can build up until it matches
+            // a country — stripping it per keystroke means "+46" never resolves to
+            // Sweden, since each character is discarded before the next arrives.
+            const cleaned = `+${value.slice(1).replace(/[^\d\s\-()]/g, "")}`;
+            if (cleaned !== value) {
+                target.value = cleaned;
+            }
+            this.localPhoneNumber = cleaned;
+            // Emit the partial prefix as-is; prefixing it with the (not yet chosen)
+            // country's dial code would produce nonsense like "+1+4".
+            this.emitTelValue(cleaned);
         }
         else {
             const cleaned = allowPlus
@@ -176,7 +232,7 @@ export class AuthheroNode {
             const fullNumber = cleaned
                 ? `${this.selectedCountry.dialCode}${cleaned}`
                 : "";
-            this.fieldChange.emit({ id: this.component.id, value: fullNumber });
+            this.emitTelValue(fullNumber);
         }
     }
     handlePhoneInput = (e) => {
@@ -196,7 +252,7 @@ export class AuthheroNode {
             else {
                 // Email or text — emit as-is
                 this.localPhoneNumber = value;
-                this.fieldChange.emit({ id: this.component.id, value });
+                this.emitTelValue(value);
             }
             return;
         }
@@ -207,6 +263,196 @@ export class AuthheroNode {
         const target = e.target;
         this.fieldChange.emit({ id: this.component.id, value: target.value });
     };
+    // ===========================================================================
+    // DATE segment handling
+    // ===========================================================================
+    /**
+     * The last ISO value this field emitted. The widget mirrors every emitted
+     * value back onto the `value` prop, and that echo must not be treated as an
+     * external change: it would re-format the segments under the caret while
+     * the user is still typing (a day of "3" comes back as "03", swallowing the
+     * next digit).
+     */
+    lastEmittedDate;
+    /** Hydrate the day/month/year segments from the effective ISO value. */
+    initDateValue() {
+        if (this.component?.type !== "DATE")
+            return;
+        if (this.lastEmittedDate !== undefined &&
+            this.getEffectiveValue() === this.lastEmittedDate) {
+            return;
+        }
+        const parsed = parseIsoDate(this.getEffectiveValue());
+        if (parsed) {
+            this.dateSegments = parsed;
+            return;
+        }
+        // No parseable value. Only clear when we currently hold a complete date,
+        // i.e. this is a genuine external reset: a half-typed date emits "" and
+        // the parent echoes that straight back as the value prop, which would
+        // otherwise wipe the segment the user just typed into.
+        if (toIsoDate(this.dateSegments) !== "") {
+            this.dateSegments = { year: "", month: "", day: "" };
+        }
+    }
+    dateConfig() {
+        return this.component.config;
+    }
+    getDateLayoutForField() {
+        const config = this.dateConfig();
+        return getDateLayout(config?.format, this.locale);
+    }
+    static SEGMENT_LENGTH = {
+        day: 2,
+        month: 2,
+        year: 4,
+    };
+    /** Birthdate autofill tokens — the common case for a typed date. */
+    static SEGMENT_AUTOCOMPLETE = {
+        day: "bday-day",
+        month: "bday-month",
+        year: "bday-year",
+    };
+    /**
+     * The submittable value for the current segments: an ISO date, or "" when
+     * it is incomplete, impossible, or outside the field's `min`/`max`. ISO
+     * strings compare chronologically, so the bounds need no parsing.
+     */
+    dateIsoValue(segments) {
+        const iso = toIsoDate(segments);
+        if (!iso)
+            return "";
+        const config = this.dateConfig();
+        const min = config?.min;
+        const max = config?.max;
+        if (typeof min === "string" && parseIsoDate(min) && iso < min)
+            return "";
+        if (typeof max === "string" && parseIsoDate(max) && iso > max)
+            return "";
+        return iso;
+    }
+    setDateSegments(segments) {
+        this.dateSegments = segments;
+        this.lastEmittedDate = this.dateIsoValue(segments);
+        this.fieldChange.emit({
+            id: this.component.id,
+            value: this.lastEmittedDate,
+        });
+    }
+    focusDateSegment(segment) {
+        const input = this.host.shadowRoot?.querySelector(`input[data-date-segment="${segment}"]`);
+        input?.focus();
+        input?.select();
+    }
+    /**
+     * Whether typing this digit completes the segment. A segment is complete at
+     * its full width, and also as soon as a further digit could not produce a
+     * valid number — no day starts with 4 and no month starts with 2.
+     */
+    isDateSegmentComplete(segment, value) {
+        if (value.length >= AuthheroNode.SEGMENT_LENGTH[segment])
+            return true;
+        if (value.length !== 1)
+            return false;
+        if (segment === "day")
+            return Number(value) > 3;
+        if (segment === "month")
+            return Number(value) > 1;
+        return false;
+    }
+    handleDateSegmentInput = (segment) => (e) => {
+        const target = e.target;
+        const digits = target.value
+            .replace(/\D/g, "")
+            .slice(0, AuthheroNode.SEGMENT_LENGTH[segment]);
+        if (digits !== target.value) {
+            target.value = digits;
+        }
+        this.setDateSegments({ ...this.dateSegments, [segment]: digits });
+        if (this.isDateSegmentComplete(segment, digits)) {
+            const order = this.getDateLayoutForField().order;
+            const next = order[order.indexOf(segment) + 1];
+            if (next)
+                this.focusDateSegment(next);
+        }
+    };
+    /**
+     * Pad a single digit ("5" -> "05") and expand a two-digit year against the
+     * field's upper bound ("85" -> 1985). Shared by blur and paste so a pasted
+     * date is read the same way as a typed one.
+     */
+    normalizeDateSegment(segment, value) {
+        if (segment !== "year")
+            return value.padStart(2, "0");
+        return expandTwoDigitYear(value, resolveYearAnchor(this.dateConfig()?.max, new Date()));
+    }
+    /**
+     * Normalise on blur: pad a single digit ("5" -> "05") and expand a two-digit
+     * year against the field's upper bound ("85" -> 1985).
+     */
+    handleDateSegmentBlur = (segment) => (e) => {
+        const target = e.target;
+        const value = target.value.replace(/\D/g, "");
+        if (!value)
+            return;
+        const normalized = this.normalizeDateSegment(segment, value);
+        if (normalized === value)
+            return;
+        target.value = normalized;
+        this.setDateSegments({ ...this.dateSegments, [segment]: normalized });
+    };
+    /**
+     * Backspace at the start of an empty segment moves to the previous one, so
+     * the whole date can be cleared without reaching for the mouse.
+     */
+    handleDateSegmentKeyDown = (segment) => (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            this.buttonClick.emit({ id: "submit", type: "submit", value: "next" });
+            return;
+        }
+        if (e.key !== "Backspace")
+            return;
+        const target = e.target;
+        if (target.value.length > 0 || target.selectionStart !== 0)
+            return;
+        const order = this.getDateLayoutForField().order;
+        const previous = order[order.indexOf(segment) - 1];
+        if (previous) {
+            e.preventDefault();
+            this.focusDateSegment(previous);
+        }
+    };
+    /**
+     * Pasting a whole date into any segment fills all three. An ISO value is
+     * read year-first; anything else follows the field's displayed order. A
+     * two-digit year is expanded the same way a typed one is, so "15/03/85"
+     * pastes as 1985 rather than falling through to the browser's own paste.
+     */
+    handleDatePaste = (e) => {
+        const text = e.clipboardData?.getData("text") ?? "";
+        const groups = text.match(/\d+/g);
+        if (!groups || groups.length < 3)
+            return;
+        const [first, second, third] = groups;
+        const isoLike = first.length === 4;
+        const order = isoLike
+            ? ["year", "month", "day"]
+            : this.getDateLayoutForField().order;
+        const segments = {
+            year: "",
+            month: "",
+            day: "",
+        };
+        [first, second, third].forEach((group, index) => {
+            const segment = order[index];
+            segments[segment] = this.normalizeDateSegment(segment, group.slice(0, AuthheroNode.SEGMENT_LENGTH[segment]));
+        });
+        if (!toIsoDate(segments))
+            return;
+        e.preventDefault();
+        this.setDateSegments(segments);
+    };
     handleKeyDown = (e) => {
         if (e.key === "Enter") {
             e.preventDefault();
@@ -219,7 +465,7 @@ export class AuthheroNode {
             if (config?.allow_email === true && target.value.length === 0) {
                 this.telEmailMode = true;
                 this.localPhoneNumber = "";
-                this.fieldChange.emit({ id: this.component.id, value: "" });
+                this.emitTelValue("");
             }
         }
     };
@@ -494,17 +740,40 @@ export class AuthheroNode {
         const effectiveValue = this.getEffectiveValue();
         return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "url", name: component.id, value: effectiveValue ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
+    /**
+     * DATE is rendered as three numeric segments rather than `input type=date`.
+     * A native date input renders differently in every browser (Safari adds a
+     * stepper), keeps its dd/mm/yyyy hint visible while half-filled, and asks
+     * for a calendar gesture to reach a year decades back — all wrong for a
+     * date typed from memory, which is what these fields collect.
+     */
     renderDateField(component) {
-        const inputId = `input-${component.id}`;
         const errors = this.getErrors();
-        const { min, max } = component.config ?? {};
-        // Date fields always have a value (even if placeholder format), so always float the label
-        const hasValue = true;
-        const effectiveValue = this.getEffectiveValue();
-        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "date", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, min: min, max: max, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        const { format } = component.config ?? {};
+        const layout = getDateLayout(format, this.locale);
+        const isoValue = this.dateIsoValue(this.dateSegments);
+        // Every segment filled but no ISO value means the date does not exist
+        // (31 February) or falls outside min/max. Flag it rather than silently
+        // submitting nothing — the widget posts JSON, so the browser's own
+        // constraint validation never runs.
+        const isIncomplete = layout.order.some((segment) => this.dateSegments[segment].length === 0);
+        const hasInvalidDate = !isoValue && !isIncomplete;
+        const hasError = errors.length > 0 || hasInvalidDate;
+        const firstInputId = `input-${component.id}`;
+        const segmentInput = (segment) => (h("input", { key: segment, id: segment === layout.order[0] ? firstInputId : undefined, class: "date-segment", part: `input date-segment date-segment-${segment}`, type: "text", inputmode: "numeric", autocomplete: AuthheroNode.SEGMENT_AUTOCOMPLETE[segment], "data-date-segment": segment, maxlength: AuthheroNode.SEGMENT_LENGTH[segment], size: AuthheroNode.SEGMENT_LENGTH[segment], value: this.dateSegments[segment], placeholder: layout.tokens[segment], "aria-label": layout.tokens[segment], "aria-invalid": hasError ? "true" : "false", required: component.required, disabled: this.disabled, onInput: this.handleDateSegmentInput(segment), onBlur: this.handleDateSegmentBlur(segment), onKeyDown: this.handleDateSegmentKeyDown(segment), onPaste: this.handleDatePaste }));
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("div", { class: hasError ? "date-input has-error" : "date-input", part: "date-input", role: "group", "aria-label": component.label }, layout.order.map((segment, index) => [
+            index > 0 && (h("span", { key: `sep-${segment}`, class: "date-separator", part: "date-separator", "aria-hidden": "true" }, layout.separator)),
+            segmentInput(segment),
+        ])), this.renderFloatingLabel(component.label, firstInputId, component.required, true)), h("input", { type: "hidden", name: component.id, "data-input-name": component.id, value: isoValue }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
     renderBooleanField(component) {
-        return (h("label", { class: "checkbox-wrapper", part: "checkbox-wrapper" }, h("input", { type: "checkbox", part: "checkbox", name: component.id, checked: this.value === "true" || component.config?.default_value === true, required: component.required, disabled: this.disabled, onChange: this.handleCheckbox }), h("span", { class: "checkbox-label", part: "checkbox-label" }, component.label)));
+        return (h("label", { class: "checkbox-wrapper", part: "checkbox-wrapper" }, h("input", { type: "checkbox", part: "checkbox", name: component.id, checked: 
+            // Once the field has a value it is authoritative — falling back to
+            // the default here would keep a ticked-by-default box ticked after
+            // the user unticks it.
+            this.value === undefined
+                ? component.config?.default_value === true
+                : this.value === "true", required: component.required, disabled: this.disabled, onChange: this.handleCheckbox }), h("span", { class: "checkbox-label", part: "checkbox-label" }, component.label)));
     }
     renderLegalField(component) {
         const text = component.config?.text ?? component.label ?? "";
@@ -750,6 +1019,25 @@ export class AuthheroNode {
                 "reflect": false,
                 "attribute": "disabled",
                 "defaultValue": "false"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "BCP-47 locale used for locale-dependent field layout (currently the\nsegment order of DATE fields). Resolved server-side so SSR and hydration\nagree; falls back to day-month-year when absent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale"
             }
         };
     }
@@ -759,7 +1047,8 @@ export class AuthheroNode {
             "selectedCountry": {},
             "localPhoneNumber": {},
             "countryDropdownOpen": {},
-            "telEmailMode": {}
+            "telEmailMode": {},
+            "dateSegments": {}
         };
     }
     static get events() {