@revenuecat/purchases-ui-js 4.8.21 → 4.8.23

package/dist/components/paywall/paywall-utils.d.ts

@@ -1,3 +1,5 @@
 import type { Size } from "../../types";
+import type { Component } from "../../types/component";
 import type { CSS } from "../../utils/base-utils";
+export declare function firstContentIsHeroMedia(components: Component[]): boolean;
 export declare function mapPaywallContentStackStyle(height: Size, pullContentUnderHeader: boolean, headerHeight: number): CSS;

package/dist/components/paywall/paywall-utils.js

@@ -1,3 +1,25 @@
+function findFirstContent(components) {
+    for (const component of components) {
+        if (component.type === "fallback_header") {
+            continue;
+        }
+        if (component.type === "stack") {
+            const nestedContent = findFirstContent(component.components);
+            if (nestedContent) {
+                return nestedContent;
+            }
+            continue;
+        }
+        return component;
+    }
+}
+export function firstContentIsHeroMedia(components) {
+    const firstContent = findFirstContent(components);
+    return ((firstContent?.type === "image" ||
+        firstContent?.type === "video" ||
+        firstContent?.type === "web_view") &&
+        firstContent.size.width.type === "fill");
+}
 export function mapPaywallContentStackStyle(height, pullContentUnderHeader, headerHeight) {
     return {
         // Nested fill children need a definite root height; other roots keep

package/dist/components/text/TextNode.svelte

@@ -3,6 +3,7 @@
     getHtmlFromMarkdown,
     getTextComponentStyles,
     getTextWrapperInlineStyles,
+    markdownLinkUrlFromClick,
   } from "./text-utils";
   import Text from "./Text.svelte";
   import { getColorModeContext } from "../../stores/color-mode";
@@ -53,28 +54,7 @@
   const markdownParsed = $derived(getHtmlFromMarkdown(label));
 
   const onclick = (event: MouseEvent) => {
-    if (
-      event.defaultPrevented ||
-      event.button !== 0 ||
-      event.metaKey ||
-      event.ctrlKey ||
-      event.shiftKey ||
-      event.altKey
-    ) {
-      return;
-    }
-
-    const target = event.target;
-    if (!(target instanceof Element)) {
-      return;
-    }
-
-    const anchor = target.closest("a[href]");
-    if (!(anchor instanceof HTMLAnchorElement)) {
-      return;
-    }
-
-    const url = anchor.getAttribute("href") ?? anchor.href;
+    const url = markdownLinkUrlFromClick(event);
     if (!url) {
       return;
     }

package/dist/components/text/text-utils.d.ts

@@ -4,6 +4,14 @@ import type { TextNodeProps } from "../../types/components/text";
 import type { AppFontsConfig } from "../../types/ui-config";
 import { type CSS } from "../../utils/base-utils";
 export declare const defaultColor: ColorScheme;
+/**
+ * Returns the `href` of the markdown link a plain left click landed on, or
+ * `null` when the click should be left alone (modifier keys, non-primary
+ * button, already handled, not on a link). Hosts route these through
+ * `onNavigateToUrl`, since a bare `target="_blank"` anchor is blocked in some
+ * of them (embedded webviews, sandboxed frames).
+ */
+export declare function markdownLinkUrlFromClick(event: MouseEvent): string | null;
 export declare function mapTextColor(colorMode: ColorMode, scheme: ColorGradientScheme): CSS;
 /**
  * Generates comprehensive styles for text components by combining text, component and size styles

package/dist/components/text/text-utils.js

@@ -6,6 +6,32 @@ import { getScopedFontFamily, isFontRCFMManaged } from "../../utils/font-utils";
 export const defaultColor = {
     light: { type: "hex", value: DEFAULT_TEXT_COLOR },
 };
+/**
+ * Returns the `href` of the markdown link a plain left click landed on, or
+ * `null` when the click should be left alone (modifier keys, non-primary
+ * button, already handled, not on a link). Hosts route these through
+ * `onNavigateToUrl`, since a bare `target="_blank"` anchor is blocked in some
+ * of them (embedded webviews, sandboxed frames).
+ */
+export function markdownLinkUrlFromClick(event) {
+    if (event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey) {
+        return null;
+    }
+    const target = event.target;
+    if (!(target instanceof Element)) {
+        return null;
+    }
+    const anchor = target.closest("a[href]");
+    if (!(anchor instanceof HTMLAnchorElement)) {
+        return null;
+    }
+    return anchor.getAttribute("href") || anchor.href || null;
+}
 export function mapTextColor(colorMode, scheme) {
     const info = mapColorMode(colorMode, scheme);
     const color = mapColorInfo(info);

package/dist/components/workflows/Screen.svelte

@@ -101,7 +101,11 @@
   }: Props = $props();
 </script>
 
-<div id={containerId} class="paywall-container">
+<div
+  id={containerId}
+  class="paywall-container"
+  style="width: 100%; min-width: 0; height: 100%;"
+>
   {#if paywallComponents}
     <Paywall
       paywallData={paywallComponents}

package/dist/components/workflows/Workflow.svelte

@@ -142,7 +142,8 @@
       for (const [key, declaration] of Object.entries(
         screen.state_declarations ?? {},
       )) {
-        if (!Object.hasOwn(merged, key)) merged[key] = declaration;
+        if (!Object.prototype.hasOwnProperty.call(merged, key))
+          merged[key] = declaration;
       }
     }
     return merged;

package/dist/stores/inputValidation.d.ts

@@ -4,13 +4,16 @@ import { type Readable } from "svelte/store";
  * Used to restore selection state when navigating back to a step.
  */
 export type InitialInputSelections = Record<string, string[]>;
-interface InputValidationContext {
+export interface InputValidationContext {
+    /** True only when every registered input is satisfied. */
     isSatisfied: Readable<boolean>;
-    updateSatisfaction: (satisfied: boolean) => void;
+    /** Registers or updates the satisfaction of a single input, keyed by component id. */
+    updateSatisfaction: (id: string, satisfied: boolean) => void;
+    /** Stops an unmounted input from gating the screen. */
+    removeInput: (id: string) => void;
 }
 export declare function createInputValidationContext(initiallySatisfied?: boolean): InputValidationContext;
 export declare function setInputValidationContext(context: InputValidationContext): void;
 export declare function getInputValidationContext(): InputValidationContext | undefined;
 export declare function setInitialInputSelectionsContext(selections: InitialInputSelections): void;
 export declare function getInitialInputSelectionsContext(): InitialInputSelections;
-export {};

package/dist/stores/inputValidation.js

@@ -1,15 +1,38 @@
 import { getContext, setContext } from "svelte";
-import { writable } from "svelte/store";
+import { derived, writable } from "svelte/store";
 const key = Symbol("inputValidation");
 const initialSelectionsKey = Symbol("initialInputSelections");
 export function createInputValidationContext(initiallySatisfied = true) {
-    const isSatisfied = writable(initiallySatisfied);
-    const updateSatisfaction = (satisfied) => {
-        isSatisfied.set(satisfied);
+    const satisfactionById = writable(new Map());
+    // `initiallySatisfied` only matters while no input has registered yet; once
+    // any input reports, the map is the single source of truth.
+    const isSatisfied = derived(satisfactionById, (byId) => byId.size === 0
+        ? initiallySatisfied
+        : Array.from(byId.values()).every(Boolean));
+    const updateSatisfaction = (id, satisfied) => {
+        satisfactionById.update((byId) => {
+            if (byId.get(id) === satisfied) {
+                return byId;
+            }
+            const next = new Map(byId);
+            next.set(id, satisfied);
+            return next;
+        });
+    };
+    const removeInput = (id) => {
+        satisfactionById.update((byId) => {
+            if (!byId.has(id)) {
+                return byId;
+            }
+            const next = new Map(byId);
+            next.delete(id);
+            return next;
+        });
     };
     return {
         isSatisfied,
         updateSatisfaction,
+        removeInput,
     };
 }
 export function setInputValidationContext(context) {

package/dist/stores/state.js

@@ -34,14 +34,14 @@ export class PaywallStateStore {
     registerDeclarations(declarations) {
         let changed = false;
         for (const [key, declaration] of Object.entries(declarations)) {
-            if (Object.hasOwn(this.#declaredDefaults, key))
+            if (Object.prototype.hasOwnProperty.call(this.#declaredDefaults, key))
                 continue;
             const normalized = this.#normalizeForType(declaration.default, declaration.type);
             if (normalized === undefined)
                 continue;
             this.#declaredDefaults[key] = normalized;
             this.#declaredTypes[key] = declaration.type;
-            if (!Object.hasOwn(this.#currentValues, key)) {
+            if (!Object.prototype.hasOwnProperty.call(this.#currentValues, key)) {
                 this.#currentValues[key] = normalized;
                 changed = true;
             }

package/dist/types/components/input-text.d.ts

@@ -6,6 +6,22 @@ import type { Overrides } from "../overrides";
 export type InputTextCapitalizeType = "none" | "sentences" | "words" | "characters";
 export type InputTextKeyboardType = "decimal" | "email" | "numeric" | "password" | "tel" | "text" | "url";
 export type ReservedAttribute = "$email" | "$displayName" | "$phoneNumber";
+export type InputTextValidationFormat = "email" | "uri";
+/**
+ * JSON Schema subset mapped to native HTML constraint attributes.
+ * Keys keep the JSON Schema camelCase vocabulary.
+ */
+export interface InputTextValidation {
+    minimum?: number | null;
+    maximum?: number | null;
+    minLength?: number | null;
+    maxLength?: number | null;
+    pattern?: string | null;
+    format?: InputTextValidationFormat | null;
+}
+export type InputTextValidationRule = "required" | "minimum" | "maximum" | "minLength" | "maxLength" | "pattern" | "format";
+/** Per-rule error copy; `validation_error_lid` is the fallback for missing keys. */
+export type InputTextValidationErrorLids = Partial<Record<InputTextValidationRule, string | null>>;
 export interface InputTextProps extends BaseComponent {
     type: "input_text";
     visible?: boolean | null;
@@ -15,6 +31,9 @@ export interface InputTextProps extends BaseComponent {
     field_id: string;
     reserved_attribute?: ReservedAttribute | null;
     required: boolean;
+    validation?: InputTextValidation | null;
+    validation_error_lid?: string | null;
+    validation_error_lids?: InputTextValidationErrorLids | null;
     size: SizeType;
     padding: Spacing;
     margin: Spacing;

package/dist/types/overrides.d.ts

@@ -61,7 +61,7 @@ export type OverrideCondition = IntroOfferCondition | MultipleIntroOffersConditi
 /**
  * The reserved properties of an override that should not be included in the override properties
  */
-type ReservedProperty = "id" | "type" | "overrides" | "stack" | "components" | "items" | "pages" | "tabs" | "field_id" | "option_id" | "keyboard_type" | "capitalize";
+type ReservedProperty = "id" | "type" | "overrides" | "stack" | "components" | "items" | "pages" | "tabs" | "field_id" | "option_id" | "keyboard_type" | "capitalize" | "validation" | "validation_error_lid" | "validation_error_lids";
 type OverrideProperties<C> = Partial<Omit<C, ReservedProperty>>;
 type Override<C> = {
     conditions: OverrideCondition[];

package/dist/types.d.ts

@@ -128,4 +128,4 @@ export declare enum StackDistribution {
 export type { WorkflowScreen } from "./types/workflow";
 export type { ColorScheme } from "./types/colors";
 export type { ComponentInteractionData, ComponentInteractionType, OnComponentInteraction, } from "./types/paywall-component-interaction";
-export type { ReservedAttribute } from "./types/components/input-text";
+export type { InputTextValidation, InputTextValidationErrorLids, InputTextValidationFormat, InputTextValidationRule, ReservedAttribute, } from "./types/components/input-text";

package/dist/utils/safe-area-background.js

@@ -80,7 +80,7 @@ export function getSafeAreaFallbackColorHeadStyles(paywallData, hostFallbackColo
 }
 function colorAtPercent(sortedPoints, percent) {
     const firstPoint = sortedPoints[0];
-    const lastPoint = sortedPoints.at(-1);
+    const lastPoint = sortedPoints[sortedPoints.length - 1];
     if (firstPoint == null || lastPoint == null) {
         return null;
     }

package/dist/utils/style-utils.js

@@ -206,8 +206,8 @@ const conditionMatches = (condition, context) => {
     if (condition.type === RuleKey.StateCondition) {
         const stateValues = context.stateValues ?? {};
         const stateDefaults = context.stateDefaults ?? {};
-        const hasCurrentValue = Object.hasOwn(stateValues, condition.name);
-        const hasDeclaredDefault = Object.hasOwn(stateDefaults, condition.name);
+        const hasCurrentValue = Object.prototype.hasOwnProperty.call(stateValues, condition.name);
+        const hasDeclaredDefault = Object.prototype.hasOwnProperty.call(stateDefaults, condition.name);
         // Undeclared key (not in store, not declared): false for BOTH operators.
         // This diverges from variable_condition (where != matches a missing variable):
         // state keys are editor-managed, so an undeclared reference is always a bug,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "4.8.21",
+  "version": "4.8.23",
   "author": {
     "name": "RevenueCat, Inc."
   },