@namiml/web-sdk 1.7.0 → 1.7.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Nami Web SDK Changelog
 
+## 1.7.2
+**Release Date:** September 17, 2025
+
+### Enhancements
+- Improve handling of device creation failures and latency
+- Add `disableCampaignUpdates` namiCommand
+- Add forced A/B testing via `splitPosition` namiCommand
+- Standardize `NamiPaywallManager.emitter`
+- Support smart variables derived from URL query parameters and related analytics
+
+### Bug Fixes
+- Fix CTV scaling and spacing issues
+- Styling improvements
+
+## 1.7.1
+**Release Date:** September 3, 2025
+
+### Enhancements
+- Add `NamiFlowManager.pause` method
+- Add component animations (pulse/wave)
+
+### Bug Fixes
+- Completed Flows will no longer call registered paywall close handlers
+
 ## 1.7.0
 **Release Date:** August 27, 2025
 

package/dist/components/ContextProvider.d.ts

@@ -18,6 +18,7 @@ export declare class PaywallContextProvider extends EventTarget implements React
     filteredSkuMenus: ISkuMenu[];
     static create(paywall: IPaywall, context: NamiPaywallLaunchContext, campaign: NamiCampaign): PaywallContextProvider;
     static remove(provider: PaywallContextProvider): void;
+    static get currentProvider(): PaywallContextProvider | undefined;
     static setCustomerAttribute(attributes: {
         [key: string]: string;
     }): void;

package/dist/components/NamiElement.d.ts

@@ -1,7 +1,8 @@
 import { CSSResult, LitElement, PropertyValueMap } from "lit";
 import ContextConsumer from "./ContextConsumer";
 import { PaywallContextProvider } from "./ContextProvider";
-export declare class NamiElement extends LitElement {
+import { TBaseComponent } from "../types/components";
+export declare class NamiElementBase extends LitElement {
     contextConsumer: ContextConsumer;
     contextProvider: PaywallContextProvider;
     constructor();
@@ -11,3 +12,11 @@ export declare class NamiElement extends LitElement {
     protected willUpdate(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     disconnectedCallback(): void;
 }
+export declare abstract class NamiElement<C extends TBaseComponent = TBaseComponent> extends NamiElementBase {
+    contextConsumer: ContextConsumer;
+    contextProvider: PaywallContextProvider;
+    abstract component: C;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    protected willUpdate(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected animationStyles(): CSSResult;
+}

package/dist/components/PaywallScreen.d.ts

@@ -8,6 +8,7 @@ export declare class NamiPaywallScreen extends LitElement {
     context: TPaywallLaunchContext;
     private contextProvider;
     private contextConsumer;
+    private minSDKVersion;
     timeSpentOnPaywall: number;
     flow?: NamiFlow;
     private teardownEvent;

package/dist/components/TemplateComponent.d.ts

@@ -1,3 +1,4 @@
 import { TComponent } from "../types/components";
 import { PaywallContextProvider } from "./ContextProvider";
-export declare function TemplateComponent(contextProvider: PaywallContextProvider, component: TComponent, scaleFactor: number, inFocusedState?: boolean): any;
+import type { TSemverObj } from "../utils/parsers";
+export declare function TemplateComponent(contextProvider: PaywallContextProvider, component: TComponent, scaleFactor: number, inFocusedState?: boolean, minSDKVersion?: TSemverObj): any;

package/dist/components/containers/BackgroundContainer.d.ts

@@ -1,11 +1,13 @@
 import { TContainer } from "../../types/components";
 import { NamiElement } from "../NamiElement";
 import { CSSResult } from "lit";
+import type { TSemverObj } from "../../utils/parsers";
 export declare class NamiBackgroundContainer extends NamiElement {
     component: TContainer;
     fullscreen: boolean;
     inFocusedState: boolean;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     connectedCallback(): void;
     protected styles(): CSSResult;
     protected updated(): void;

package/dist/components/containers/CarouselContainer.d.ts

@@ -2,10 +2,12 @@ import { CSSResult } from 'lit';
 import Swiper from 'swiper';
 import type { TCarouselContainer } from '../../types/components/containers';
 import { NamiElement } from '../NamiElement';
+import type { TSemverObj } from '../../utils/parsers';
 export declare class NamiCarouselContainer extends NamiElement {
     component: TCarouselContainer;
     inFocusedState: boolean;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     swiperInstance: Swiper;
     slideSpacing: number;
     connectedCallback(): void;

package/dist/components/containers/CollapseContainer.d.ts

@@ -1,11 +1,13 @@
 import { CSSResult } from 'lit';
 import { NamiElement } from '../NamiElement';
 import { TCollapseContainer } from '../../types/components/containers';
+import type { TSemverObj } from '../../utils/parsers';
 export declare class NamiCollapseContainer extends NamiElement {
     component: TCollapseContainer;
     inFocusedState: boolean;
     height: number;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     private isCollapsed;
     private _handleClick;
     protected styles(): CSSResult;

package/dist/components/containers/Container.d.ts

@@ -1,11 +1,13 @@
 import { CSSResult } from 'lit';
 import { TContainer } from '../../types/components';
 import { NamiElement } from '../NamiElement';
-import { TProductContainer } from '../../types/components/containers';
+import type { TProductContainer } from '../../types/components/containers';
+import type { TSemverObj } from '../../utils/parsers';
 export declare class NamiContainer extends NamiElement {
     component: TContainer | TProductContainer;
     inFocusedState: boolean;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     constructor();
     protected styles(): CSSResult;
     render(): any[];

package/dist/components/containers/Content.d.ts

@@ -1,11 +1,13 @@
 import { CSSResult } from "lit";
 import { NamiElement } from "../NamiElement";
 import { TContainer } from "../../types/components";
+import type { TSemverObj } from "../../utils/parsers";
 export declare class NamiContentContainer extends NamiElement {
     component: TContainer;
     zIndex: number;
     inFocusedState: boolean;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     protected styles(): CSSResult;
     firstUpdated(): void;
     render(): any[];

package/dist/components/containers/Footer.d.ts

@@ -1,11 +1,13 @@
 import { CSSResult } from 'lit';
-import { NamiElement } from '../NamiElement';
+import { NamiElementBase } from '../NamiElement';
 import { THeaderFooter } from '../../types/components/containers';
-export declare class NamiFooter extends NamiElement {
+import type { TSemverObj } from '../../utils/parsers';
+export declare class NamiFooter extends NamiElementBase {
     components: THeaderFooter;
     zIndex: string;
     inFocusedState: boolean;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     protected styles(): CSSResult;
     render(): any[];
 }

package/dist/components/containers/Header.d.ts

@@ -1,12 +1,14 @@
 import { CSSResult } from 'lit';
-import { NamiElement } from '../NamiElement';
+import { NamiElementBase } from '../NamiElement';
 import { THeaderFooter } from '../../types/components/containers';
-export declare class NamiHeader extends NamiElement {
+import type { TSemverObj } from '../../utils/parsers';
+export declare class NamiHeader extends NamiElementBase {
     components: THeaderFooter;
     zIndex: string;
     inFullScreen: boolean;
     inFocusedState: boolean;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     private formFactor;
     protected styles(): CSSResult;
     render(): any[];

package/dist/components/containers/ProductContainer.d.ts

@@ -1,10 +1,12 @@
 import { CSSResult } from 'lit';
 import { NamiElement } from '../NamiElement';
 import { TProductContainer } from '../../types/components/containers';
+import type { TSemverObj } from '../../utils/parsers';
 export declare class NamiProductContainer extends NamiElement {
     component: TProductContainer;
     inFocusedState: boolean;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     private currentGroupId;
     protected styles(): CSSResult;
     updated(): void;

package/dist/components/containers/ResponsiveGrid.d.ts

@@ -1,10 +1,12 @@
 import { CSSResult } from 'lit';
 import { NamiElement } from '../NamiElement';
 import { TResponsiveGrid } from '../../types/components/containers';
+import type { TSemverObj } from '../../utils/parsers';
 export declare class NamiResponsiveGrid extends NamiElement {
     component: TResponsiveGrid;
     inFocusedState: boolean;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     private mouseDown;
     private startX;
     scrollLeft: any;

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

@@ -1,10 +1,12 @@
 import { CSSResult } from 'lit';
 import { TButtonContainer } from '../../types/components/containers';
 import { NamiElement } from '../NamiElement';
+import type { TSemverObj } from '../../utils/parsers';
 export declare class NamiButton extends NamiElement {
     component: TButtonContainer;
     inFocusedState: boolean;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     constructor();
     firstTextValue(): string | undefined;
     connectedCallback(): void;

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

@@ -1,10 +1,12 @@
 import { TPlayPauseButton } from '../../types/components/containers';
 import { NamiElement } from '../NamiElement';
 import { CSSResult } from 'lit';
+import type { TSemverObj } from '../../utils/parsers';
 export declare class NamiPlayPauseButton extends NamiElement {
     component: TPlayPauseButton;
     inFocusedState: boolean;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     private playing;
     constructor();
     private _handleFocus;

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

@@ -1,10 +1,12 @@
 import { CSSResult } from 'lit';
 import { TSegmentPicker } from '../../types/components/elements';
 import { NamiElement } from '../NamiElement';
+import type { TSemverObj } from '../../utils/parsers';
 export declare class NamiSegmentPicker extends NamiElement {
     component: TSegmentPicker;
     inFocusedState: boolean;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     constructor();
     private _handleClick;
     protected styles(): CSSResult;

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

@@ -1,10 +1,12 @@
 import { CSSResult, TemplateResult } from 'lit';
 import { NamiElement } from '../NamiElement';
 import { TSpacerComponent } from '../../types/components/elements';
+import type { TSemverObj } from '../../utils/parsers';
 export declare class NamiSpacer extends NamiElement {
     component: TSpacerComponent;
     inFocusedState: boolean;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     protected styles(): CSSResult;
     render(): TemplateResult;
 }

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

@@ -1,9 +1,11 @@
 import { NamiElement } from "../NamiElement";
 import { TStack } from "../../types/components/containers";
+import type { TSemverObj } from "../../utils/parsers";
 export declare class NamiStack extends NamiElement {
     component: TStack;
     inFocusedState: boolean;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     protected styles(): import("lit").CSSResult;
     protected render(): any[];
 }

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

@@ -1,16 +1,19 @@
 import { TemplateResult, CSSResult } from 'lit';
 import { TSymbolComponent, TTextComponent, TTextListComponent } from '../../types/components/elements';
 import { NamiElement } from '../NamiElement';
+import type { TSemverObj } from '../../utils/parsers';
 export declare class NamiText extends NamiElement {
     component: TTextComponent;
     inFocusedState: boolean;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     protected styles(): CSSResult;
     render(): TemplateResult;
 }
 export declare class TextListItemWrapper extends NamiElement {
     component: TTextListComponent;
     inFocusedState: boolean;
+    scaleFactor: number;
     protected styles(): CSSResult;
     render(): TemplateResult;
 }

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

@@ -1,10 +1,12 @@
 import { TVolumeButton } from '../../types/components/containers';
 import { NamiElement } from '../NamiElement';
 import { CSSResult } from 'lit';
+import type { TSemverObj } from '../../utils/parsers';
 export declare class NamiVolumeButton extends NamiElement {
     component: TVolumeButton;
     inFocusedState: boolean;
     scaleFactor: number;
+    minSDKVersion: TSemverObj;
     private muted;
     constructor();
     private _handleFocus;

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

@@ -0,0 +1,2 @@
+import { CSSResult } from "lit";
+export declare const NAMI_ANIM_CSS: CSSResult;

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

@@ -1,11 +1,14 @@
-import { TCarouselContainer } from "../../types/components/containers";
-import { TBaseComponent, TContainerPosition } from "../../types/components";
-import { TSegmentPickerItem, TTextLikeComponent } from "../../types/components/elements";
+import type { TCarouselContainer } from "../../types/components/containers";
+import { type TBaseComponent, type TContainerPosition } from "../../types/components";
+import type { TSegmentPickerItem, TTextLikeComponent } from "../../types/components/elements";
+import type { TSemverObj } from "../../utils/parsers";
 export declare function parseSize(value: string | number, scaleFactor: number): string;
 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 alignAndJustifyItems(component: TBaseComponent): string;
+export declare function applyTextWidth(minSDKVersion: TSemverObj): string;
+export declare function applyChildSizing(minSDKVersion: TSemverObj, sizeKey: string): string;
 export declare function applyTextOverflow(component: TTextLikeComponent): string;
 export declare function transition(): string;
 export declare function grow({ grow }: TBaseComponent): string;

package/dist/nami/campaign.d.ts

@@ -56,6 +56,20 @@ export declare class NamiCampaignManager {
       * @return List of product groups associated with the specified campaign placement.
       */
     static getProductGroups(label?: string, withUrl?: string): string[];
+    /**
+     * Get all product SKUs associated with the provided placement label or URL.
+     * @param label Campaign placement label defined in Nami Control Center for launching a specific campaign.
+     * @param withUrl Campaign placement URI defined in Nami Control Center for launching a specific campaign.
+     * @returns List of product SKUs associated with the specified campaign placement.
+     */
+    static getAllProducts(label?: string, withUrl?: string): string[];
+    /**
+     * Get the list of currently active product SKUs associated with the provided placement label or URL.
+     * @param label Campaign placement label defined in Nami Control Center for launching a specific campaign.
+     * @param withUrl Campaign placement URI defined in Nami Control Center for launching a specific campaign.
+     * @returns List of current product SKUs associated with the specified campaign placement.
+     */
+    static getCurrentProducts(label?: string, withUrl?: string): string[];
     /**
      * Private Instance Methods
      */

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

@@ -29,6 +29,8 @@ export declare class NamiFlow extends BasicNamiFlow {
     component: PaywallComponent;
     manager: NamiFlowManager;
     currentButton?: NamiButton;
+    isPaused: boolean;
+    pausedStepID?: string;
     constructor(campaign: NamiFlowCampaign, paywall: PaywallComponent, manager: NamiFlowManager, context?: NamiPaywallLaunchContext);
     private registerResolvers;
     get currentFlowStep(): NamiFlowStep | undefined;
@@ -44,6 +46,8 @@ export declare class NamiFlow extends BasicNamiFlow {
     next(): void;
     private backToPreviousScreenStep;
     forward(stepId: string): void;
+    pause(): void;
+    resumeFromPause(): void;
     executeLifecycle(step: NamiFlowStep, key: string, data?: Record<string, any>): void;
     private lifecycles;
     triggerActions(actionId: string, component?: NamiButton, data?: Record<string, any>): void;

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

@@ -14,7 +14,9 @@ export declare class NamiFlowManager {
     eventHandler?: NamiFlowEventHandler;
     static registerEventHandler(eventHandler: NamiFlowEventHandler): void;
     static resume(): void;
-    presentFlow(campaign: NamiFlowCampaign, paywall: PaywallComponent, context?: NamiPaywallLaunchContext): NamiFlow;
     static finish(): void;
+    static pause(): void;
     static isFlowOpen(): boolean;
+    presentFlow(campaign: NamiFlowCampaign, paywall: PaywallComponent, context?: NamiPaywallLaunchContext): NamiFlow;
+    finishFlow(): void;
 }

package/dist/nami/namiRefs.d.ts

@@ -3,6 +3,8 @@ export declare class NamiRefs {
     static instance: NamiRefs;
     init(config: NamiConfiguration): Promise<void>;
     private setInitialValues;
+    private initAnonymousDevice;
+    private initIdentifiedDevice;
     private initAndFetchRequiredData;
     private reRenderPaywall;
 }

package/dist/nami/paywalls.d.ts

@@ -1,5 +1,6 @@
 import { IPaywall } from "../types/paywall";
 import { NamiProductDetails } from "../types/externals/product";
+import { NamiEventEmitter } from "./emitter";
 import { Callback, CloseHandler, DeepLinkUrlHandler, SKUActionHandler } from "../types/components/containers";
 import { NamiPurchaseDetails } from "../types/externals/purchase";
 /**
@@ -8,6 +9,7 @@ import { NamiPurchaseDetails } from "../types/externals/purchase";
  */
 export declare class NamiPaywallManager {
     static instance: NamiPaywallManager;
+    static emitter: NamiEventEmitter;
     private emitter;
     productDetails: NamiProductDetails[];
     /**

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

@@ -5,6 +5,7 @@ import type { NamiFlowManager } from "../../../nami/flow/NamiFlowManager";
  */
 export declare class FlowLiquidResolver {
     flowManager: NamiFlowManager;
+    urlParams: Record<string, string>;
     constructor(flowManager: NamiFlowManager);
     resolve(key: string): string | undefined;
     /**

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

@@ -0,0 +1,7 @@
+import { BaseNamespaceResolver } from "./BaseNameSpaceResolver";
+export declare class URLParamsResolver extends BaseNamespaceResolver {
+    protected readonly namespace = "urlParams";
+    private readonly context;
+    constructor();
+    protected resolveValue(keyPath: string): any;
+}