@namiml/web-sdk 1.6.3 → 1.7.0

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

@@ -7,7 +7,6 @@ export declare class NamiBackgroundContainer extends NamiElement {
     inFocusedState: boolean;
     scaleFactor: number;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     protected styles(): CSSResult;
     protected updated(): void;
     render(): any[];

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

@@ -1,6 +1,6 @@
 import { CSSResult } from 'lit';
 import Swiper from 'swiper';
-import { TCarouselContainer } from '../../types/components/containers';
+import type { TCarouselContainer } from '../../types/components/containers';
 import { NamiElement } from '../NamiElement';
 export declare class NamiCarouselContainer extends NamiElement {
     component: TCarouselContainer;
@@ -13,5 +13,8 @@ export declare class NamiCarouselContainer extends NamiElement {
     updateSpacing: (e: CustomEvent) => void;
     protected styles(): CSSResult;
     protected updated(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    private handleSlideChange;
+    private getCarouselOnChange;
+    private getCarouselSlides;
+    render(): import("lit").TemplateResult<1>;
 }

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

@@ -9,5 +9,5 @@ export declare class NamiCollapseContainer extends NamiElement {
     private isCollapsed;
     private _handleClick;
     protected styles(): CSSResult;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }

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

@@ -7,6 +7,7 @@ export declare class NamiHeader extends NamiElement {
     inFullScreen: boolean;
     inFocusedState: boolean;
     scaleFactor: number;
+    private formFactor;
     protected styles(): CSSResult;
     render(): any[];
 }

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

@@ -14,8 +14,9 @@ export declare class NamiButton extends NamiElement {
     private _handleFocus;
     private _handleBlur;
     private _dispatchFocusChange;
-    private _handleKeyDown;
+    private _dispatchPageChange;
+    private _handleKeyUp;
     private _handleClick;
     protected styles(): CSSResult;
-    render(): any[] | import("lit-html").TemplateResult<1>;
+    render(): any[] | import("lit").TemplateResult<1>;
 }

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

@@ -2,8 +2,11 @@ import { NamiElement } from "../NamiElement";
 import { TQRCodeComponent } from "../../types/components/elements";
 export declare class NamiQRCode extends NamiElement {
     component: TQRCodeComponent;
+    scaleFactor: number;
     protected styles(): import("lit").CSSResult;
     private renderQr;
     firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    protected updated(changedProps: Map<string, unknown>): void;
+    private get computedSize();
+    render(): import("lit").TemplateResult<1>;
 }

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

@@ -0,0 +1,12 @@
+import type { TRadioButton } from "../../types/components/containers";
+import { NamiElement } from "../NamiElement";
+import { type CSSResult } from "lit";
+export declare class NamiRadioButton extends NamiElement {
+    component: TRadioButton;
+    inFocusedState: boolean;
+    scaleFactor: number;
+    constructor();
+    protected styles(): CSSResult;
+    private get isActive();
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -8,5 +8,5 @@ export declare class NamiSegmentPicker extends NamiElement {
     constructor();
     private _handleClick;
     protected styles(): CSSResult;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }

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

@@ -12,5 +12,5 @@ export declare class NamiSegmentPickerItem extends NamiElement {
     private _handleHover;
     updated(changedProperties: PropertyValues): void;
     protected styles(): CSSResult;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }

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

@@ -0,0 +1,18 @@
+import type { TToggleSwitch } from "../../types/components/containers";
+import { NamiElement } from "../NamiElement";
+import { type CSSResult } from "lit";
+export declare class NamiToggleSwitch extends NamiElement {
+    component: TToggleSwitch;
+    inFocusedState: boolean;
+    scaleFactor: number;
+    isActive: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleKeyDown;
+    private _handleClick;
+    protected styles(): CSSResult;
+    private applyPlateStyles;
+    private applyHandleStyles;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -6,6 +6,7 @@ export declare class NamiVideo extends NamiElement {
     inFocusedState: boolean;
     scaleFactor: number;
     private bgVideo;
+    disconnectedCallback(): void;
     protected styles(): CSSResult;
     loadMediaSrc(video: HTMLVideoElement): void;
     updated(): void;

package/dist/components/index.d.ts

@@ -17,7 +17,10 @@ import { NamiCarouselContainer } from "./containers/CarouselContainer";
 import { NamiVolumeButton } from "./elements/VolumeButton";
 import { NamiPlayPauseButton } from "./elements/PlayPauseButton";
 import { NamiStack } from "./elements/Stack";
+import { NamiPaywallScreen } from "./PaywallScreen";
 import { NamiQRCode } from "./elements/QRCode";
+import { NamiToggleSwitch } from "./elements/ToggleSwitch";
+import { NamiRadioButton } from "./elements/RadioButton";
 declare global {
     interface HTMLElementTagNameMap {
         "nami-spacer": NamiSpacer;
@@ -40,7 +43,10 @@ declare global {
         "nami-volume-button": NamiVolumeButton;
         "nami-play-pause-button": NamiPlayPauseButton;
         "nami-stack": NamiStack;
+        "nami-paywall-screen": NamiPaywallScreen;
         "nami-qr-code": NamiQRCode;
+        "nami-toggle-switch": NamiToggleSwitch;
+        "nami-radio-button": NamiRadioButton;
     }
 }
-export { NamiSpacer, NamiButton, NamiHeader, NamiFooter, NamiText, NamiSegmentPicker, NamiSegmentPickerItem, NamiContainer, NamiProductContainer, NamiImage, NamiBackgroundContainer, NamiContentContainer, NamiSymbol, NamiVideo, NamiCollapseContainer, NamiResponsiveGrid, NamiCarouselContainer, NamiPlayPauseButton, NamiVolumeButton, NamiStack, NamiQRCode, };
+export { NamiSpacer, NamiButton, NamiHeader, NamiFooter, NamiText, NamiSegmentPicker, NamiSegmentPickerItem, NamiContainer, NamiProductContainer, NamiImage, NamiBackgroundContainer, NamiContentContainer, NamiSymbol, NamiVideo, NamiCollapseContainer, NamiResponsiveGrid, NamiCarouselContainer, NamiPlayPauseButton, NamiVolumeButton, NamiStack, NamiPaywallScreen, NamiQRCode, NamiToggleSwitch, NamiRadioButton, };

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

@@ -1,18 +1,26 @@
 import { UserAction } from "../../types/components/containers";
 import { NamiSKU } from "../../types/externals/sku";
-import { NamiPaywallComponentChange } from "../../types/externals/paywall";
-export declare const handleAction: (onTap?: UserAction, sku?: NamiSKU, componentChange?: NamiPaywallComponentChange | undefined) => void;
+import { type NamiPaywallComponentChange } from "../../types/externals/paywall";
+import { PaywallContextProvider } from "../ContextProvider";
+type HandleActionParams = {
+    onTap?: UserAction;
+    sku?: NamiSKU;
+    componentChange?: NamiPaywallComponentChange;
+    contextProvider: PaywallContextProvider;
+};
+export declare const handleAction: ({ onTap, sku, componentChange, contextProvider, }?: HandleActionParams) => void;
 export declare const closePaywallHandler: () => void;
 export declare const restorePurchase: () => void;
 export declare const signIn: () => void;
 export declare const deepLink: (url?: string) => void;
-export declare const buySKU: (onTap: UserAction, sku: NamiSKU) => NamiSKU;
-export declare const navigateToScreen: (screen?: string) => void;
-export declare const setState: () => {
+export declare const buySKU: (contextProvider: PaywallContextProvider, onTap: UserAction, sku: NamiSKU) => NamiSKU;
+export declare const navigateToScreen: (contextProvider: PaywallContextProvider, screen?: string) => void;
+export declare const setState: (contextProvider: PaywallContextProvider) => {
     id: string;
     name: string;
 };
-export declare const selectSKU: (sku: NamiSKU) => void;
-export declare const purchaseSelectedSKU: (sku: NamiSKU) => void;
+export declare const selectSKU: (contextProvider: PaywallContextProvider, sku: NamiSKU) => void;
+export declare const purchaseSelectedSKU: (contextProvider: PaywallContextProvider, sku: NamiSKU) => void;
 export declare const reloadProducts: () => void;
 export declare function shouldHoist(onTap?: UserAction): boolean;
+export {};

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

@@ -1,22 +1,22 @@
 import { TBaseComponent, TComponent } from "../../types/components";
-import { TButtonContainer, TCarouselContainer, TProductContainer, TResponsiveGrid } from "../../types/components/containers";
+import { TButtonContainer, TProductContainer, TResponsiveGrid } from "../../types/components/containers";
 import { TConditionalComponent } from "../../types/components/elements";
 import { TPaywallMedia } from "../../types/paywall";
 import { PaywallSKU } from "../../types/sku";
+import { PaywallContextProvider } from "../ContextProvider";
 type ReplacementsType = {
     [type: string]: any extends Array<any> ? never : any;
 };
 export declare function interpolate<T>(value: T, replacements: ReplacementsType): T;
-export declare function getInterpolatedButtonComponents(component: TButtonContainer): TComponent[];
-export declare function getSkuButtonComponents(items: PaywallSKU[], component: TProductContainer, mediaList?: {
+export declare function getInterpolatedButtonComponents(contextProvider: PaywallContextProvider, component: TButtonContainer): TComponent[];
+export declare function getSkuButtonComponents(contextProvider: PaywallContextProvider, items: PaywallSKU[], component: TProductContainer, mediaList?: {
     [mediaName: string]: Pick<TPaywallMedia, 'content'>;
 }): [boolean, TComponent[]][];
-export declare function getRepeatingListBlocks(component: TResponsiveGrid): TComponent[][];
-export declare function getCarouselSlides(component: TCarouselContainer): TComponent[][];
-export declare function conditionComponentMatches(condition: TConditionalComponent): boolean;
-export declare function withOverrides<T extends TBaseComponent>({ conditionAttributes, ...component }: T): T;
-export declare function valueFromSmartText<T>(value: T, sku?: PaywallSKU, block?: any): T;
-export declare const totalTimeSpentOnPaywall: () => number | undefined;
+export declare function getRepeatingListBlocks(contextProvider: PaywallContextProvider, component: TResponsiveGrid): TComponent[][];
+export declare function conditionComponentMatches(contextProvider: PaywallContextProvider, condition: TConditionalComponent): boolean;
+export declare function withOverrides<T extends TBaseComponent>(contextProvider: PaywallContextProvider, { conditionAttributes, ...component }: T): T;
+export declare function valueFromSmartText<T>(contextProvider: PaywallContextProvider, value: T, sku?: PaywallSKU, block?: any): T;
+export declare const totalTimeSpentOnPaywall: (contextProvider: PaywallContextProvider) => number | undefined;
 export declare const rgbaToHex: (rgba?: string) => string | null;
 export declare const sameColors: (color1?: string, color2?: string) => boolean;
 export {};

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

@@ -1,4 +1,4 @@
-import { ISkuMenu, TInitialState } from "../../types/paywall";
+import { ISkuMenu, TInitialState, TPaywallLaunchContext } from "../../types/paywall";
 import { NamiProductDetails } from "../../types/externals/product";
 import { PaywallSKU } from "../../types/sku";
 import { NamiPaywallLaunchContext } from "../../nami-web";
@@ -13,7 +13,7 @@ export declare function getSkuSmartTextValue(productDetail?: NamiProductDetails
 export declare function getSlideSmartTextValue(productDetail?: NamiProductDetails | null, slide?: TCarouselSlide, skus?: PaywallSKU[]): {
     [key: string]: any;
 };
-export declare function checkAnySkuHasTrialOffer(productDetails: NamiProductDetails[], skuMenus: ISkuMenu[], productGroups: string[]): boolean;
-export declare function checkAnySkuHasPromoOffer(productDetails: NamiProductDetails[], skuMenus: ISkuMenu[], productGroups: string[]): boolean;
-export declare function productDetail(details: NamiProductDetails[] | undefined, refId: string): NamiProductDetails | null;
-export declare function launchContext(stateContext: NamiPaywallLaunchContext, context?: NamiPaywallLaunchContext): NamiPaywallLaunchContext;
+export declare function checkAnySkuHasTrialOffer(productDetails: NamiProductDetails[], skuMenus: ISkuMenu[]): boolean;
+export declare function checkAnySkuHasPromoOffer(productDetails: NamiProductDetails[], skuMenus: ISkuMenu[]): boolean;
+export declare function productDetail(details?: NamiProductDetails[], refId?: string): NamiProductDetails | null;
+export declare function normalizeLaunchContext(stateContext: NamiPaywallLaunchContext, context: NamiPaywallLaunchContext, skuMenus?: ISkuMenu[]): TPaywallLaunchContext;

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

@@ -0,0 +1,74 @@
+export type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+export interface SwipeDetail {
+    direction: SwipeDirection;
+    distanceX: number;
+    distanceY: number;
+    absX: number;
+    absY: number;
+    duration: number;
+    velocity: number;
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    startedAt: number;
+    endedAt: number;
+    originalEvent: PointerEvent;
+}
+export type SwipeHandler = (detail: SwipeDetail) => void;
+export interface SwipeOptions {
+    /**
+     * Minimum distance in px along the primary axis to qualify as a swipe.
+     * Default: 30
+     */
+    minDistance?: number;
+    /**
+     * Maximum allowed duration (ms) for a swipe gesture.
+     * Swipes slower than this are ignored. Default: 600
+     */
+    maxDuration?: number;
+    /**
+     * If true, we’ll treat the first dominant axis as locked, which
+     * helps filter diagonal drags. Default: true
+     */
+    lockAxis?: boolean;
+    /**
+     * If true, set `touch-action: none` on the element for the lifetime
+     * of the detector to avoid browser scroll interference. Default: false
+     */
+    preventScrollOnSwipe?: boolean;
+    /**
+     * Allowed pointer types. Default: ['touch'] (most common for swipes)
+     */
+    pointerTypes?: Array<'touch' | 'mouse' | 'pen'>;
+    /**
+     * If true, listeners are registered as passive where sensible.
+     * We never rely on preventDefault; CSS touch-action is used instead.
+     * Default: true
+     */
+    passiveListeners?: boolean;
+    /** We only care about vertical in your case */
+    /**
+     * Hint to the detector about which axis you care about most.
+     * - 'y' (default): prefer vertical gestures. Useful when the UI is
+     *   primarily vertically scrolling and you want more aggressive vertical
+     *   swipe detection.
+     * - 'x': prefer horizontal gestures.
+     * - 'both': do not bias; choose the axis based on the gesture's delta and
+     *   the optional axis lock.
+     *
+     * This is a hint only. When set to 'both' the normal heuristics (dominant
+     * axis or axis-lock) determine the primary axis.
+     */
+    axisHint?: 'x' | 'y' | 'both';
+    /**
+     * Extra pixels required *after* a scrollable child hits its edge
+     * before we treat it as a swipe. Helps avoid accidental edge triggers.
+     */
+    edgeLeakThreshold?: number;
+}
+export interface SwipeController {
+    destroy(): void;
+    updateOptions(next: Partial<SwipeOptions>): void;
+}
+export declare function onSwipe(element: HTMLElement | null | undefined, handler: SwipeHandler, options?: SwipeOptions): SwipeController;

package/dist/nami/campaign.d.ts

@@ -1,8 +1,8 @@
 import { AvailableCampaignsResponseHandler } from "../types/campaign";
-import { TPaywallLaunchContext, PaywallResultHandler } from "../types/paywall";
+import { PaywallResultHandler } from "../types/paywall";
 import { PaywallComponent } from "../components/Paywall";
 import { Callback } from "../types/components/containers";
-import { NamiPaywallActionHandler } from "../types/externals/paywall";
+import { NamiPaywallActionHandler, NamiPaywallLaunchContext } from "../types/externals/paywall";
 import { NamiCampaign } from "../types/externals/campaign";
 /**
  * @class NamiCampaignManager
@@ -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;
+    static launch(label?: string, withUrl?: string, context?: NamiPaywallLaunchContext, 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

@@ -1,4 +1,4 @@
-import type { NamiFlowObjectDTO, NamiFlowOn, NamiFlowStep } from "../../types/flow";
+import type { NamiFlowObjectDTO, NamiFlowOn, NamiFlowStep, NamiFlowTransition } from "../../types/flow";
 import type { NamiCampaign, NamiFlowCampaign } from '../../types/externals/campaign';
 import type { NamiPaywallLaunchContext } from '../../types/externals/paywall';
 import type { PaywallComponent } from "../../components/Paywall";
@@ -10,12 +10,14 @@ export declare class BasicNamiFlow implements NamiFlowObjectDTO {
     steps: NamiFlowStep[];
     screens: string[];
     resumeFromBookmark: boolean;
+    transition: NamiFlowTransition;
     constructor(flowObject?: Partial<{
         id: string;
         name: string;
         steps: NamiFlowStep[];
         screens: string[];
         resume_from_bookmark: boolean;
+        transition?: NamiFlowTransition;
     }>);
     get allScreensAvailable(): boolean;
 }
@@ -33,19 +35,21 @@ export declare class NamiFlow extends BasicNamiFlow {
     get nextStepAvailable(): boolean;
     get previousStepAvailable(): boolean;
     get previousFlowStep(): NamiFlowStep | undefined;
+    get nextFlowStep(): NamiFlowStep | undefined;
     getStep(stepId: string): NamiFlowStep | undefined;
     private findStepByType;
     private isStepActive;
     finished(): void;
     back(): void;
+    next(): void;
     private backToPreviousScreenStep;
     forward(stepId: string): void;
-    executeLifecycle(step: NamiFlowStep, key: string): void;
+    executeLifecycle(step: NamiFlowStep, key: string, data?: Record<string, any>): void;
     private lifecycles;
-    triggerActions(actionId: string, component?: NamiButton): void;
-    executeFullLifecycles(lifecycles: NamiFlowOn[]): void;
-    triggerBeforeActions(actionId: string, component?: NamiButton): void;
-    triggerAfterActions(actionId: string, component?: NamiButton): void;
+    triggerActions(actionId: string, component?: NamiButton, data?: Record<string, any>): void;
+    executeFullLifecycles(lifecycles: NamiFlowOn[], data?: Record<string, any>): void;
+    triggerBeforeActions(actionId: string, component?: NamiButton, data?: Record<string, any>): void;
+    triggerAfterActions(actionId: string, component?: NamiButton, data?: Record<string, any>): void;
     currentStepHasHoistedPrimaryActions(actionId: string): boolean;
     private shouldRun;
     private performAction;

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

@@ -1,4 +1,4 @@
-import type { NamiFlowEventHandler, NamiFlowHandoffStepHandler } from "../../types/flow";
+import { type NamiFlowEventHandler, type NamiFlowHandoffStepHandler } from "../../types/flow";
 import { NamiFlow } from "./NamiFlow";
 import type { NamiFlowCampaign } from '../../types/externals/campaign';
 import { NamiPaywallLaunchContext } from '../../types/externals/paywall';

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

@@ -4,7 +4,25 @@ import type { TDevice } from '../../types/device';
 export declare const isValidUrl: (label: string) => boolean;
 export declare const selectSegment: (segments: NamiCampaignSegment[], splitPosition: number) => NamiCampaignSegment;
 export declare const mapAnonymousCampaigns: (campaigns: NamiAnonymousCampaign[], splitPosition: number, formFactor?: TDevice) => NamiCampaign[];
+/**
+ *
+ * @returns A combined list of unique campaigns based on both API and Initial, filtered by form factor.
+ * This is used to get all campaigns that are applicable to the current device.
+ *
+ * Note: Since this function returns a unique list of campaigns, and API campaigns take precedence,
+ * there may be times when API campaigns are returned that do not yet have paywalls but initial campaigns would.
+ */
 export declare const allCampaigns: () => NamiCampaign[];
+export declare const getInitialCampaigns: () => NamiCampaign[];
+export declare const getApiCampaigns: () => NamiCampaign[];
+/**
+ * Get paywall data from label. This function continues to search for both the campaign and paywall
+ * based on the provided label and type. It first checks API data, then falls back to initial data.
+ *
+ * @param value Campaign label to search for
+ * @param type Campaign type to filter by
+ * @returns An object containing the currently available campaign and paywall data
+ */
 export declare const getPaywallDataFromLabel: (value: string, type?: string) => {
     campaign: NamiCampaign | undefined;
     paywall: IPaywall | undefined;

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

@@ -1,4 +1,21 @@
 import { IPaywall } from "../../types/paywall";
+/**
+ * Get initial paywalls from storage service.
+ * @returns An array of initial paywalls from storage service.
+ */
+export declare const getInitialPaywalls: () => IPaywall[];
+/**
+ * Get all API paywalls from storage service.
+ * @returns An array of API paywalls from storage service.
+ */
+export declare const getApiPaywalls: () => IPaywall[];
+/**
+ * Get all paywalls from both API and Initial sources, ensuring uniqueness.
+ * This function combines paywalls from both sources and filters out duplicates.
+ * API Data takes precedence over Initial Data.
+ *
+ * @returns A combined list of unique paywalls based on both API and Initial data.
+ */
 export declare const allPaywalls: () => IPaywall[];
 export declare const getPaywall: (paywallId: string) => IPaywall | undefined;
 export declare const hasAllPaywalls: (paywallIds: string[]) => boolean;

package/dist/nami-web-ssr.d.ts

@@ -0,0 +1 @@
+export * from './nami-web';