@namiml/web-sdk 1.4.0 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## 1.5.1 (October 2, 2024)
+
+## Enhancements
+- Add `TOGGLE_CHANGE` and `PAGE_CHANGE` paywall events
+
+## Bugfixes
+- Fix carousel component swiper
+- Fix flex alignment
+- Fix hero video not redenering correctly in Safari
+
+## 1.5.0 (September 26, 2024)
+
+## New Features
+- Support for advanced video features
+- Support for carousel component
+
+## Enhancements
+- Improve fallback data handling
+- Support repeatable list inside collapse component
+- Support vertical alignment on product container
+- Align `removeAllListeners` behavior with RN SDK
+
+## Bugfixes
+- Fix segment picker cursor
+- Fix hidden component handling
+- Fix responsive grid spacing and scrolling
+- Fix background video and gradient container
+- Fix background video position
+
 ## 1.4.0 (September 5, 2024)
 
 ## New Features

package/dist/components/ContextProvider.d.ts

@@ -19,8 +19,9 @@ declare class ContextProvider implements ReactiveController {
     private setState;
     setProductDetails(details: NamiProductDetails[]): void;
     getProductDetails(): NamiProductDetails[];
-    setCurrentGroupId(currentGroupId: string): void;
+    setCurrentGroupData(currentGroupId: string, currentGroupName: string): void;
     getCurrentGroupId(): string;
+    getCurrentGroupName(): string;
     setSelectedProdcuts(products: {
         [currentGroupId: string]: string;
     }): void;

package/dist/components/Paywall.d.ts

@@ -10,6 +10,7 @@ declare class PaywallComponent extends NamiElement {
     paywall: IPaywall;
     paywallEvent: Partial<NamiPaywallEvent>;
     constructor(paywall: IPaywall, event: Partial<NamiPaywallEvent>, campaign?: NamiCampaign, context?: TPaywallLaunchContext);
+    disconnectedCallback(): void;
     setPaywallData(paywall: IPaywall, campaign: NamiCampaign): void;
     firstUpdated(): void;
     private postImpression;

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

@@ -0,0 +1,12 @@
+import { CSSResult } from 'lit';
+import Swiper from 'swiper';
+import { TCarouselContainer } from '../../types/components/containers';
+import { NamiElement } from '../NamiElement';
+export declare class NamiCarouselContainer extends NamiElement {
+    component: TCarouselContainer;
+    inFocusedState: boolean;
+    swiperInstance: Swiper;
+    protected styles(): CSSResult;
+    protected updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -4,6 +4,14 @@ import { TResponsiveGrid } from '../../types/components/containers';
 export declare class NamiResponsiveGrid extends NamiElement {
     component: TResponsiveGrid;
     inFocusedState: boolean;
+    private mouseDown;
+    private startX;
+    scrollLeft: any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    startDragging: (e: any) => void;
+    stopDragging: () => void;
+    move: (e: any) => void;
     protected styles(): CSSResult;
     render(): any[][];
 }

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

@@ -0,0 +1,15 @@
+import { TPlayPauseButton } from '../../types/components/containers';
+import { NamiElement } from '../NamiElement';
+import { CSSResult } from 'lit';
+export declare class NamiPlayPauseButton extends NamiElement {
+    component: TPlayPauseButton;
+    inFocusedState: boolean;
+    private playing;
+    constructor();
+    private _handleFocus;
+    private _handleBlur;
+    private _handleClick;
+    updated(): void;
+    protected styles(): CSSResult;
+    render(): any[];
+}

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

@@ -0,0 +1,15 @@
+import { TVolumeButton } from '../../types/components/containers';
+import { NamiElement } from '../NamiElement';
+import { CSSResult } from 'lit';
+export declare class NamiVolumeButton extends NamiElement {
+    component: TVolumeButton;
+    inFocusedState: boolean;
+    private muted;
+    constructor();
+    private _handleFocus;
+    private _handleBlur;
+    private _handleClick;
+    updated(): void;
+    protected styles(): CSSResult;
+    render(): any[];
+}

package/dist/components/index.d.ts

@@ -13,6 +13,9 @@ import { NamiSegmentPickerItem } from "./elements/SegmentPickerItem";
 import { NamiVideo } from "./elements/Video";
 import { NamiCollapseContainer } from "./containers/CollapseContainer";
 import { NamiResponsiveGrid } from "./containers/ResponsiveGrid";
+import { NamiCarouselContainer } from "./containers/CarouselContainer";
+import { NamiVolumeButton } from "./elements/VolumeButton";
+import { NamiPlayPauseButton } from "./elements/PlayPauseButton";
 declare global {
     interface HTMLElementTagNameMap {
         "nami-spacer": NamiSpacer;
@@ -31,6 +34,9 @@ declare global {
         "nami-video": NamiVideo;
         "nami-collapse-container": NamiCollapseContainer;
         "nami-responsive-grid": NamiResponsiveGrid;
+        "nami-carousel-container": NamiCarouselContainer;
+        "nami-volume-button": NamiVolumeButton;
+        "nami-play-pause-button": NamiPlayPauseButton;
     }
 }
-export { NamiSpacer, NamiButton, NamiHeader, NamiFooter, NamiText, NamiSegmentPicker, NamiSegmentPickerItem, NamiContainer, NamiProductContainer, NamiImage, NamiBackgroundContainer, NamiContentContainer, NamiSymbol, NamiVideo, NamiCollapseContainer, NamiResponsiveGrid };
+export { NamiSpacer, NamiButton, NamiHeader, NamiFooter, NamiText, NamiSegmentPicker, NamiSegmentPickerItem, NamiContainer, NamiProductContainer, NamiImage, NamiBackgroundContainer, NamiContentContainer, NamiSymbol, NamiVideo, NamiCollapseContainer, NamiResponsiveGrid, NamiCarouselContainer, NamiPlayPauseButton, NamiVolumeButton };

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

@@ -7,7 +7,10 @@ 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: () => void;
+export declare const setState: () => {
+    id: string;
+    name: string;
+};
 export declare const selectSKU: (sku: NamiSKU) => void;
 export declare const purchaseSelectedSKU: (sku: NamiSKU) => void;
 export declare const reloadProducts: () => void;

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

@@ -2,4 +2,4 @@ export declare const
 /**
   * Constant value of action taps
   */
-NAMI_CLOSE_PAYWALL: string, NAMI_RESTORE_PURCHASES: string, NAMI_SIGN_IN: string, NAMI_BUY_SKU: string, SET_STATE: string, NAMI_SELECT_SKU: string, NAMI_PURCHASE_SELECTED_SKU: string, NAMI_DEEP_LINK: string, NAMI_NAVIGATE_TO_SCREEN: string, NAMI_RELOAD_PRODUCTS: string, UNSUPPORTED: string, NAMI_PURCHASE_SUCCESS: string, NAMI_PURCHASE_CANCELLED: string, NAMI_PURCHASE_FAILED: string, NAMI_PURCHASE_PENDING: string, NAMI_PURCHASE_UNKNOWN: string, NAMI_SHOW_PAYWALL: string, NAMI_PAGE_CHANGE: string, NAMI_TOGGLE_CHANGE: string, NAMI_SLIDE_CHANGE: string;
+NAMI_CLOSE_PAYWALL: string, NAMI_RESTORE_PURCHASES: string, NAMI_SIGN_IN: string, NAMI_BUY_SKU: string, SET_STATE: string, NAMI_SELECT_SKU: string, NAMI_PURCHASE_SELECTED_SKU: string, NAMI_DEEP_LINK: string, NAMI_NAVIGATE_TO_SCREEN: string, NAMI_RELOAD_PRODUCTS: string, UNSUPPORTED: string, NAMI_PURCHASE_SUCCESS: string, NAMI_PURCHASE_CANCELLED: string, NAMI_PURCHASE_FAILED: string, NAMI_PURCHASE_PENDING: string, NAMI_PURCHASE_UNKNOWN: string, NAMI_SHOW_PAYWALL: string, NAMI_PAGE_CHANGE: string, NAMI_TOGGLE_CHANGE: string, NAMI_SLIDE_CHANGE: string, NAMI_PLAY_VIDEO: string, NAMI_PAUSE_VIDEO: string, NAMI_MUTE_VIDEO: string, NAMI_UNMUTE_VIDEO: string;

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

@@ -1,5 +1,5 @@
 import { TBaseComponent, TComponent } from "../../types/components";
-import { TButtonContainer, TProductContainer, TResponsiveGrid } from "../../types/components/containers";
+import { TButtonContainer, TCarouselContainer, TProductContainer, TResponsiveGrid } from "../../types/components/containers";
 import { TConditionalComponent } from "../../types/components/elements";
 import { TPaywallMedia } from "../../types/paywall";
 import { PaywallSKU } from "../../types/sku";
@@ -11,8 +11,10 @@ export declare function getInterpolatedButtonComponents(component: TButtonContai
 export declare function getSkuButtonComponents(items: PaywallSKU[], component: TProductContainer, mediaList?: {
     [mediaName: string]: Pick<TPaywallMedia, 'content'>;
 }, additionalVariableStates?: object): [boolean, TComponent[]][];
-export declare function getRepeatingListComponents(component: TResponsiveGrid): 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): T;
+export declare function valueFromSmartText<T>(value: T, sku?: PaywallSKU, block?: any): T;
+export declare const totalTimeSpentOnPaywall: () => number | undefined;
 export {};

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

@@ -12,4 +12,4 @@ export declare function getSkuSmartTextValue(productDetail?: NamiProductDetails
 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(groups: InitiateStateGroup[], context?: NamiPaywallLaunchContext): NamiPaywallLaunchContext;
+export declare function launchContext(groups: InitiateStateGroup[], stateContext: NamiPaywallLaunchContext, context?: NamiPaywallLaunchContext): NamiPaywallLaunchContext;

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

@@ -4,6 +4,7 @@ export declare function parseSize(value: string | number): string;
 export declare function backgroundColor(value: 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 applyTextOverflow(component: TTextLikeComponent): string;
 export declare function transition(): string;
 export declare function grow({ grow }: TBaseComponent): string;

package/dist/nami/api.d.ts

@@ -1,4 +1,4 @@
-import { NamiConfiguration } from "../types/config";
+import { NamiConfiguration } from "../types/externals/config";
 import { Impression, LoginResponse } from "../types/api";
 import { PurchaseValidationRequest, TransactionRequest } from "../types/purchase";
 export declare class NamiAPI {

package/dist/nami/emitter.d.ts

@@ -7,6 +7,7 @@ export declare class NamiEventEmitter {
     emit(eventName: string, ...args: any[]): void;
     addListener(eventName: string, listener: (...args: any[]) => void): void;
     removeListener(eventName: string, listener: (...args: any[]) => void): void;
+    removeAllListeners(eventName?: string): void;
     listeners(eventName: string): any[];
     listenerCount(eventName: string): number;
 }

package/dist/nami/index.d.ts

@@ -1,4 +1,5 @@
-import { NamiConfiguration, NamiConfigurationState } from "../types/config";
+import { NamiConfigurationState } from "../types/config";
+import { NamiConfiguration } from "../types/externals/config";
 export declare class Nami {
     #private;
     static instance: Nami;

package/dist/nami/namiRefs.d.ts

@@ -1,4 +1,4 @@
-import { NamiConfiguration } from "../types/config";
+import { NamiConfiguration } from "../types/externals/config";
 export declare class NamiRefs {
     static instance: NamiRefs;
     init(config: NamiConfiguration): Promise<void>;