@namiml/web-sdk 1.5.11 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 1.6.0 (July 10, 2025)
+
+### New Features
+- **NamiFlowManager** - Introduced `NamiFlowManager` for orchestrating multi-page flows.
+  - **NamiFlowManager.registerStepHandoff** - Method to register a callback that is called when a flow is handed off.
+  - **NamiFlowManager.registerEventHandler** - Method to register a callback that is called for flow analytics.
+  - **NamiFlowManager.resume** - Method to call after a flow is handed off, to resume the flow.
+
+### UI Enhancements
+- Default Focused Buttons
+- Blur Properties
+
+### Accessibility
+- Screenreader support for videos
+- Screenreader hints have been added
+
+### Performance
+- Better support handling multiple `Nami.configure` calls
+- General stability fixes
+
 ## 1.5.11 (June 18, 2025)
 
 ## Enhancements

package/dist/components/ContextProvider.d.ts

@@ -5,15 +5,19 @@ import { NamiSKU } from '../types/externals/sku';
 import { NamiCampaign } from '../types/externals/campaign';
 import { TDevice } from '../types/device';
 import { Callback } from '../types/components/containers';
+import type { NamiFlow } from 'src/nami/flow/NamiFlow';
 export declare const initialState: TPaywallContext;
-declare class ContextProvider implements ReactiveController {
+declare class ContextProvider extends EventTarget implements ReactiveController {
     host: ReactiveControllerHost | null;
     state: TPaywallContext;
     subscribers: Set<Callback>;
     productDetails: NamiProductDetails[];
+    flow?: NamiFlow;
     constructor();
     subscribe(callback: Callback): Callback;
     unsubscribe(callback: Callback): void;
+    emitEvent<T = any>(name: string, payload?: T): void;
+    onEvent<T = any>(name: string, handler: (payload: T) => void): () => void;
     hostConnected(): void;
     hostDisconnected(): void;
     private setState;
@@ -51,6 +55,9 @@ declare class ContextProvider implements ReactiveController {
     setLaunchDetails(value: string, type?: string): void;
     setOpenHeaderIds(id: string, sku?: NamiSKU): void;
     getCurrentCollapsibleSku(): NamiSKU;
+    setFlow(flow: NamiFlow): void;
+    setUserInteractionEnabled(enabled: boolean): void;
+    setCurrentSlideIndex(index: number): void;
 }
 declare const contextProvider: ContextProvider;
 export default contextProvider;

package/dist/components/Paywall.d.ts

@@ -1,22 +1,28 @@
 import { IPaywall, TPaywallLaunchContext } from '../types/paywall';
-import { TDevice } from '../types/device';
 import { NamiElement } from './NamiElement';
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { NamiCampaign } from '../types/externals/campaign';
 import { NamiPaywallEvent } from '../types/externals/paywall';
+import type { NamiFlow } from 'src/nami/flow/NamiFlow';
 declare class PaywallComponent extends NamiElement {
-    formFactor: TDevice;
-    scaleFactor: number;
-    campaign: NamiCampaign;
-    paywall: IPaywall;
-    paywallEvent: Partial<NamiPaywallEvent>;
-    constructor(paywall: IPaywall, event: Partial<NamiPaywallEvent>, campaign?: NamiCampaign, context?: TPaywallLaunchContext);
+    campaign: NamiCampaign | undefined;
+    paywall: IPaywall | undefined;
+    flow: NamiFlow | undefined;
+    private paywallEvent;
+    private teardownEvent;
+    constructor(paywall?: IPaywall, event?: Partial<NamiPaywallEvent>, campaign?: NamiCampaign, context?: TPaywallLaunchContext);
+    connectedCallback(): void;
     disconnectedCallback(): void;
-    setPaywallData(paywall: IPaywall, campaign: NamiCampaign): void;
+    private handleKeyDownEvent;
+    private userInteractionListener;
+    setPaywallData(paywall: IPaywall, campaign?: NamiCampaign): void;
     firstUpdated(): void;
+    updated(changedProps: PropertyValues): void;
     private postImpression;
     private getTemplate;
     styles(): import("lit").CSSResult;
+    flowNavigateToScreen(paywall: IPaywall): Promise<void>;
+    getSelectedSlideIndexForCurrentCarousel(): number | undefined;
     render(): TemplateResult;
 }
 export { PaywallComponent };

package/dist/components/elements/Button.d.ts

@@ -6,9 +6,11 @@ export declare class NamiButton extends NamiElement {
     inFocusedState: boolean;
     scaleFactor: number;
     constructor();
+    firstTextValue(): string | undefined;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(): void;
+    firstUpdated(): void;
     private _handleFocus;
     private _handleBlur;
     private _dispatchFocusChange;

package/dist/components/utils/styles.d.ts

@@ -5,7 +5,7 @@ export declare function parseSize(value: string | number, scaleFactor: number):
 export declare function backgroundColor(value: string, fallback?: string): string;
 export declare function pickAndApplyBackgroundColor(component: TBaseComponent, inFocusedState?: boolean): string;
 export declare function flexDirection({ direction }: TBaseComponent): string;
-export declare function flexAlignments(component: TBaseComponent): string;
+export declare function alignAndJustifyItems(component: TBaseComponent): string;
 export declare function applyTextOverflow(component: TTextLikeComponent): string;
 export declare function transition(): string;
 export declare function grow({ grow }: TBaseComponent): string;
@@ -13,8 +13,8 @@ export declare function paddingAndMargin(component: TBaseComponent, scaleFactor:
 export declare function slidePaddingAndMargin(component: TCarouselContainer, scaleFactor: number): string;
 export declare function transform({ moveX, moveY, }: TBaseComponent): string;
 export declare function borders(component: TBaseComponent, scaleFactor: number, inFocusedState?: boolean): string;
-export declare function alignItems({ alignment, }: TBaseComponent): string;
-export declare function justifyContent({ alignment, }: TBaseComponent): string;
+export declare function alignItems({ alignment, verticalAlignment }: TBaseComponent): string;
+export declare function justifyContent({ alignment, horizontalAlignment }: TBaseComponent): string;
 export declare function widthAndHeight(component: TBaseComponent, scaleFactor: number): string;
 export declare function zIndex({ zIndex }: TBaseComponent): string;
 export declare function dropShadow(component: TBaseComponent): string;

package/dist/core/errors.d.ts

@@ -18,6 +18,9 @@ export declare class ExternalIDRequiredError extends Error {
 export declare class CampaignNotAvailableError extends Error {
     constructor();
 }
+export declare class FlowScreensNotAvailableError extends Error {
+    constructor();
+}
 export declare class AnonymousModeAlreadyOnError extends Error {
     constructor();
 }

package/dist/nami/campaign.d.ts

@@ -48,7 +48,7 @@ export declare class NamiCampaignManager {
      * @param actionCallback - Optional handler for paywall actions.
      * @returns {PaywallComponent | void} The launched paywall web component.
      */
-    static launch(label?: string, withUrl?: string, context?: TPaywallLaunchContext, resultCallback?: PaywallResultHandler, actionCallback?: NamiPaywallActionHandler): PaywallComponent | void;
+    static launch(label?: string, withUrl?: string, context?: TPaywallLaunchContext, resultCallback?: PaywallResultHandler, actionCallback?: NamiPaywallActionHandler): PaywallComponent;
     /**
       * Provide the list of product groups supported by the provided placement label or URL.
       * @param label Campaign placement label defined in Nami Control Center for launching a specific campaign.

package/dist/nami/flow/NamiFlow.d.ts

@@ -0,0 +1,50 @@
+import type { NamiFlowObjectDTO, NamiFlowStep } from "src/types/flow";
+import type { NamiCampaign, NamiFlowCampaign } from 'src/types/externals/campaign';
+import type { NamiPaywallLaunchContext } from 'src/types/externals/paywall';
+import type { PaywallComponent } from "src/components/Paywall";
+import type { NamiFlowManager } from "./NamiFlowManager";
+import type { NamiButton } from "src/components";
+export declare class BasicNamiFlow implements NamiFlowObjectDTO {
+    id: string;
+    name: string;
+    steps: NamiFlowStep[];
+    screens: string[];
+    resumeFromBookmark: boolean;
+    constructor(flowObject?: Partial<{
+        id: string;
+        name: string;
+        steps: NamiFlowStep[];
+        screens: string[];
+        resume_from_bookmark: boolean;
+    }>);
+    get allScreensAvailable(): boolean;
+}
+export declare class NamiFlow extends BasicNamiFlow {
+    campaign?: NamiCampaign;
+    context?: NamiPaywallLaunchContext;
+    stepcrumbs: NamiFlowStep[];
+    branchcrumbs: string[];
+    component: PaywallComponent;
+    manager: NamiFlowManager;
+    currentButton?: NamiButton;
+    constructor(campaign: NamiFlowCampaign, paywall: PaywallComponent, manager: NamiFlowManager, context?: NamiPaywallLaunchContext);
+    setupFlowEntry(): void;
+    get currentFlowStep(): NamiFlowStep | undefined;
+    get nextStepAvailable(): boolean;
+    get previousStepAvailable(): boolean;
+    get previousFlowStep(): NamiFlowStep | undefined;
+    getStep(stepId: string): NamiFlowStep | undefined;
+    private findStepByType;
+    private isStepActive;
+    finished(): void;
+    back(): void;
+    private backToPreviousScreenStep;
+    forward(stepId: string): void;
+    executeLifecycle(step: NamiFlowStep, key: string): void;
+    triggerActions(actionId: string, button?: NamiButton): void;
+    private shouldRun;
+    private performAction;
+    private nextStep;
+    private handleScreenStep;
+    private handleBranchStep;
+}

package/dist/nami/flow/NamiFlowManager.d.ts

@@ -0,0 +1,18 @@
+import type { NamiFlowEventHandler, NamiFlowHandoffStepHandler } from "src/types/flow";
+import { NamiFlow } from "./NamiFlow";
+import type { NamiFlowCampaign } from 'src/types/externals/campaign';
+import { NamiPaywallLaunchContext } from 'src/types/externals/paywall';
+import { PaywallComponent } from "src/components/Paywall";
+export declare class NamiFlowManager {
+    private static _instance;
+    static get instance(): NamiFlowManager;
+    currentFlow?: NamiFlow;
+    flowOpen: boolean;
+    private constructor();
+    handoffStepHandler?: NamiFlowHandoffStepHandler;
+    static registerStepHandoff(handoffStepHandler?: NamiFlowHandoffStepHandler): void;
+    eventHandler?: NamiFlowEventHandler;
+    static registerEventHandler(eventHandler: NamiFlowEventHandler): void;
+    static resume(): void;
+    presentFlow(campaign: NamiFlowCampaign, paywall: PaywallComponent, context?: NamiPaywallLaunchContext): NamiFlow;
+}

package/dist/nami/paywalls.d.ts

@@ -61,6 +61,13 @@ export declare class NamiPaywallManager {
      * @param name The name of the video
      */
     static setAppSuppliedVideoDetails(url: string, name?: string): void;
+    /**
+     * Enables or disables user interaction on Nami paywalls.
+     *
+     * @param {boolean} allowed - Whether user interaction should be allowed.
+     * @returns {void}
+     */
+    static allowUserInteraction(allowed: boolean): void;
     /**
      * Private Instance Methods
      */

package/dist/nami/utils/index.d.ts

@@ -0,0 +1 @@
+export declare function isEqual(objA: any, objB: any): boolean;

package/dist/nami/utils/paywall.d.ts

@@ -1,2 +1,4 @@
 import { IPaywall } from "../../types/paywall";
 export declare const allPaywalls: () => IPaywall[];
+export declare const getPaywall: (paywallId: string) => IPaywall | undefined;
+export declare const hasAllPaywalls: (paywallIds: string[]) => boolean;

package/dist/nami/utils/resolvers/BaseNameSpaceResolver.d.ts

@@ -0,0 +1,7 @@
+export declare abstract class BaseNamespaceResolver {
+    protected abstract readonly namespace: string;
+    protected abstract resolveValue(path: string): any;
+    constructor();
+    protected register(): void;
+    protected resolveKeyPath(keyPath: string, target: any): any;
+}

package/dist/nami/utils/resolvers/ConditionalEvaluator.d.ts

@@ -0,0 +1,19 @@
+import { NamiConditions } from "src/types/conditions";
+type Resolver = (identifier: string) => any;
+export declare class NamiConditionEvaluator {
+    private static instance;
+    private resolvers;
+    private namespaceResolvers;
+    private constructor();
+    static get shared(): NamiConditionEvaluator;
+    registerNamespaceResolver(namespace: string, resolver: Resolver): void;
+    resetResolvers(): void;
+    evaluate(conditions: NamiConditions): boolean;
+    evaluateOrdered(conditions?: NamiConditions): boolean;
+    private evaluateFilter;
+    private resolve;
+    private resolveRaw;
+    private extractProperty;
+    private log;
+}
+export {};

package/dist/nami/utils/resolvers/DeviceResolver.d.ts

@@ -0,0 +1,10 @@
+import { BaseNamespaceResolver } from "./BaseNameSpaceResolver";
+export declare class DeviceResolver extends BaseNamespaceResolver {
+    protected readonly namespace = "Device";
+    private readonly context;
+    constructor();
+    private screenSizeTier;
+    private tvQuality;
+    private tvResolution;
+    protected resolveValue(keyPath: string): any;
+}

package/dist/nami/utils/resolvers/FlowLiquidResolver.d.ts

@@ -0,0 +1,18 @@
+import type { NamiFlowManager } from "src/nami/flow/NamiFlowManager";
+/**
+ * Resolver for liquid-style flow variables, without requiring namespace prefixes.
+ * We drop BaseNamespaceResolver since we don't need namespace registration or stripping.
+ */
+export declare class FlowLiquidResolver {
+    flowManager: NamiFlowManager;
+    constructor(flowManager: NamiFlowManager);
+    resolve(key: string): string | undefined;
+    /**
+     * Replaces {{key}} in a string using FlowLiquidResolver.
+     */
+    private interpolateLiquidVariables;
+    /**
+     * Deeply interpolates strings in objects/arrays without any namespace logic.
+     */
+    interpolateDeep(input: any): any;
+}

package/dist/nami/utils/resolvers/LaunchContextResolver.d.ts

@@ -0,0 +1,8 @@
+import { NamiPaywallLaunchContext } from "src/nami-web";
+import { BaseNamespaceResolver } from "./BaseNameSpaceResolver";
+export declare class LaunchContextResolver extends BaseNamespaceResolver {
+    protected readonly namespace = "LaunchContext";
+    private context;
+    constructor(context: NamiPaywallLaunchContext);
+    protected resolveValue(keyPath: string): any;
+}