@authhero/widget 0.37.1 → 0.38.0

package/dist/types/components/authhero-node/authhero-node.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import type { FormComponent, RuntimeComponent } from "../../types/components";
 import { type CountryData } from "../../utils/country-data";
+import { type DateSegment } from "../../utils/date-format";
 export declare class AuthheroNode {
     /**
      * The component configuration to render.
@@ -16,6 +17,12 @@ export declare class AuthheroNode {
      * Whether the component is disabled.
      */
     disabled: boolean;
+    /**
+     * 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?: string;
     /**
      * Whether the password field is visible.
      */
@@ -37,6 +44,11 @@ export declare class AuthheroNode {
      * When true, the value is emitted as-is without dial code prefix.
      */
     telEmailMode: boolean;
+    /**
+     * Segment values for the DATE input, each held as typed (unpadded while the
+     * user is mid-entry) and normalised on blur.
+     */
+    dateSegments: Record<DateSegment, string>;
     /**
      * Emitted when a field value changes.
      */
@@ -57,6 +69,17 @@ export declare class AuthheroNode {
     componentWillLoad(): void;
     componentDidLoad(): void;
     private initCountryFromConfig;
+    /**
+     * 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.
+     */
+    private lastEmittedTel?;
+    /** Emit a TEL value and remember it, so the echo can be recognised. */
+    private emitTelValue;
     /**
      * Hydrate localPhoneNumber (and selectedCountry) from the effective value
      * for TEL fields. The full value is stored as `{dialCode}{localNumber}`,
@@ -80,6 +103,59 @@ export declare class AuthheroNode {
     private processPhoneInput;
     private handlePhoneInput;
     private handleInput;
+    /**
+     * 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).
+     */
+    private lastEmittedDate?;
+    /** Hydrate the day/month/year segments from the effective ISO value. */
+    private initDateValue;
+    private dateConfig;
+    private getDateLayoutForField;
+    private static readonly SEGMENT_LENGTH;
+    /** Birthdate autofill tokens — the common case for a typed date. */
+    private static readonly SEGMENT_AUTOCOMPLETE;
+    /**
+     * 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.
+     */
+    private dateIsoValue;
+    private setDateSegments;
+    private focusDateSegment;
+    /**
+     * 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.
+     */
+    private isDateSegmentComplete;
+    private handleDateSegmentInput;
+    /**
+     * 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.
+     */
+    private normalizeDateSegment;
+    /**
+     * Normalise on blur: pad a single digit ("5" -> "05") and expand a two-digit
+     * year against the field's upper bound ("85" -> 1985).
+     */
+    private handleDateSegmentBlur;
+    /**
+     * 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.
+     */
+    private handleDateSegmentKeyDown;
+    /**
+     * 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.
+     */
+    private handleDatePaste;
     private handleKeyDown;
     private handleCodeInput;
     private handleCheckbox;
@@ -153,6 +229,13 @@ export declare class AuthheroNode {
     private renderNumberField;
     private renderTelField;
     private renderUrlField;
+    /**
+     * 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.
+     */
     private renderDateField;
     private renderBooleanField;
     private renderLegalField;

package/dist/types/components/authhero-widget/authhero-widget.d.ts

@@ -153,6 +153,13 @@ export declare class AuthheroWidget {
      * @default false (same as autoSubmit when not specified)
      */
     autoNavigate?: boolean;
+    /**
+     * BCP-47 locale for locale-dependent field layout, e.g. whether a DATE
+     * field reads DD/MM/YYYY, MM/DD/YYYY or YYYY-MM-DD. Resolve it server-side
+     * and pass it in so the server-rendered markup and the hydrated one agree;
+     * screen text itself is already localized by the server.
+     */
+    locale?: string;
     /**
      * Internal parsed screen state.
      */
@@ -385,6 +392,18 @@ export declare class AuthheroWidget {
      * Check if a component is a divider.
      */
     private isDividerComponent;
+    /**
+     * Whether a required component holds a value the user has supplied.
+     */
+    private isRequiredFieldFilled;
+    /**
+     * Whether the screen still has required fields the user has not filled in.
+     * Used to hold the primary action button disabled: the widget submits via
+     * its own handler rather than a native form submit, so the browser's
+     * constraint validation never runs and an empty required field would
+     * otherwise only surface as a server error after a round trip.
+     */
+    private hasUnfilledRequiredFields;
     /**
      * Visible label of a choice button, used to filter searchable choice lists.
      */

package/dist/types/components.d.ts

@@ -19,6 +19,10 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * 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"?: string;
         /**
           * Current value for field components.
          */
@@ -56,6 +60,10 @@ export namespace Components {
           * @default false
          */
         "loading": boolean;
+        /**
+          * BCP-47 locale for locale-dependent field layout, e.g. whether a DATE field reads DD/MM/YYYY, MM/DD/YYYY or YYYY-MM-DD. Resolve it server-side and pass it in so the server-rendered markup and the hydrated one agree; screen text itself is already localized by the server.
+         */
+        "locale"?: string;
         /**
           * The UI screen configuration from the server. Can be passed as a JSON string or object. Follows Auth0 Forms component schema.
          */
@@ -151,6 +159,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * 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"?: string;
         /**
           * Emitted when a button is clicked.
          */
@@ -200,6 +212,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "loading"?: boolean;
+        /**
+          * BCP-47 locale for locale-dependent field layout, e.g. whether a DATE field reads DD/MM/YYYY, MM/DD/YYYY or YYYY-MM-DD. Resolve it server-side and pass it in so the server-rendered markup and the hydrated one agree; screen text itself is already localized by the server.
+         */
+        "locale"?: string;
         /**
           * Emitted when a non-submit button is clicked (social login, back, etc.). The consuming application decides what to do based on id/type/value.
          */
@@ -259,6 +275,7 @@ declare namespace LocalJSX {
     interface AuthheroNodeAttributes {
         "value": string;
         "disabled": boolean;
+        "locale": string;
     }
     interface AuthheroWidgetAttributes {
         "screen": UiScreen | string;
@@ -274,6 +291,7 @@ declare namespace LocalJSX {
         "loading": boolean;
         "autoSubmit": boolean;
         "autoNavigate": boolean;
+        "locale": string;
     }
 
     interface IntrinsicElements {

package/dist/types/utils/date-format.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Locale-aware layout for the segmented DATE input.
+ *
+ * The segment order is resolved from a static table rather than from
+ * `Intl.DateTimeFormat`, deliberately: the widget is server-rendered and then
+ * hydrated in the browser, and the two runtimes do not ship the same ICU data
+ * (a Workers runtime commonly falls back to en-US ordering). A static table
+ * gives the server and the client the same answer, so the hydrated DOM matches
+ * the rendered one.
+ */
+export type DateSegment = "year" | "month" | "day";
+export interface DateLayout {
+    /** Segment order, left to right. */
+    order: DateSegment[];
+    /** Placeholder token per segment, e.g. { day: "DD", ... }. */
+    tokens: Record<DateSegment, string>;
+    /** Character drawn between segments. */
+    separator: string;
+}
+/**
+ * Resolve the segment order for a locale. Falls back to day-month-year, which
+ * is what most of the world writes.
+ */
+export declare function getDateOrder(locale?: string): DateSegment[];
+/**
+ * Resolve the full layout for a DATE field. An explicit `config.format` wins;
+ * otherwise the locale decides the order.
+ */
+export declare function getDateLayout(format?: string, locale?: string): DateLayout;
+/** Number of days in a given month, honouring leap years. */
+export declare function daysInMonth(year: number, month: number): number;
+/** Split an ISO "YYYY-MM-DD" value into its segments. */
+export declare function parseIsoDate(value: string | undefined): Record<DateSegment, string> | null;
+/**
+ * Build an ISO "YYYY-MM-DD" string from segment values. Returns "" unless all
+ * three segments are complete and form a real calendar date — a half-filled or
+ * impossible date (31 February) is not a value worth submitting.
+ */
+export declare function toIsoDate(segments: Record<DateSegment, string>): string;
+/**
+ * Expand a two-digit year into the most recent matching year at or before
+ * `anchorYear` — "85" becomes 1985, "05" becomes 2005. Anything that is not
+ * exactly two digits is returned unchanged, so a fully typed year is never
+ * second-guessed.
+ */
+export declare function expandTwoDigitYear(year: string, anchorYear: number): string;
+/**
+ * The latest year a two-digit entry may expand to. `config.max` pins it when
+ * the field has an upper bound; otherwise we assume a date in the past (the
+ * birthdate case) and anchor on the current year.
+ */
+export declare function resolveYearAnchor(max: string | undefined, today: Date): number;