@namiml/web-sdk 1.5.0 → 1.5.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 1.5.2 (October 24, 2024)
+
+## Bugfixes
+- Fix an issue where the wrong campaign rule was being used for a given placement label
+- Fix issue where the wrong initial config campaign rule was being used
+- Fix an issue where background video on mobile goes into full screen player
+- Fix an issue with focus events on connected TV platforms
+- Fix an issue with login / logout state handling
+- Fix an issue with free trial and promotional offer display
+- Fix several UI issues with carousel and stack components
+
+## 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

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/containers/CarouselContainer.d.ts

@@ -1,9 +1,16 @@
 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;
+    slideSpacing: number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updateSpacing: (e: CustomEvent) => void;
     protected styles(): CSSResult;
+    protected updated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -6,6 +6,8 @@ export declare class NamiContainer extends NamiElement {
     component: TContainer | TProductContainer;
     inFocusedState: boolean;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private _handleFocusChanged;
     private _handleFocus;
     private _handleBlur;

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

@@ -6,5 +6,6 @@ export declare class NamiContentContainer extends NamiElement {
     zIndex: number;
     inFocusedState: boolean;
     protected styles(): CSSResult;
+    firstUpdated(): void;
     render(): any[];
 }

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

@@ -7,6 +7,5 @@ export declare class NamiProductContainer extends NamiElement {
     private currentGroupId;
     protected styles(): CSSResult;
     updated(): void;
-    private _offerState;
     render(): any[][];
 }

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

@@ -0,0 +1,8 @@
+import { NamiElement } from "../NamiElement";
+import { TStack } from "../../types/components/containers";
+export declare class NamiStack extends NamiElement {
+    component: TStack;
+    inFocusedState: boolean;
+    protected styles(): import("lit").CSSResult;
+    protected render(): any[];
+}

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

@@ -4,6 +4,7 @@ import { CSSResult, TemplateResult } from "lit";
 export declare class NamiVideo extends NamiElement {
     component: TVideoComponent;
     inFocusedState: boolean;
+    private bgVideo;
     protected styles(): CSSResult;
     loadMediaSrc(video: HTMLVideoElement): void;
     updated(): void;

package/dist/components/index.d.ts

@@ -16,6 +16,7 @@ import { NamiResponsiveGrid } from "./containers/ResponsiveGrid";
 import { NamiCarouselContainer } from "./containers/CarouselContainer";
 import { NamiVolumeButton } from "./elements/VolumeButton";
 import { NamiPlayPauseButton } from "./elements/PlayPauseButton";
+import { NamiStack } from "./elements/Stack";
 declare global {
     interface HTMLElementTagNameMap {
         "nami-spacer": NamiSpacer;
@@ -37,6 +38,7 @@ declare global {
         "nami-carousel-container": NamiCarouselContainer;
         "nami-volume-button": NamiVolumeButton;
         "nami-play-pause-button": NamiPlayPauseButton;
+        "nami-stack": NamiStack;
     }
 }
-export { NamiSpacer, NamiButton, NamiHeader, NamiFooter, NamiText, NamiSegmentPicker, NamiSegmentPickerItem, NamiContainer, NamiProductContainer, NamiImage, NamiBackgroundContainer, NamiContentContainer, NamiSymbol, NamiVideo, NamiCollapseContainer, NamiResponsiveGrid, NamiCarouselContainer, NamiPlayPauseButton, NamiVolumeButton };
+export { NamiSpacer, NamiButton, NamiHeader, NamiFooter, NamiText, NamiSegmentPicker, NamiSegmentPickerItem, NamiContainer, NamiProductContainer, NamiImage, NamiBackgroundContainer, NamiContentContainer, NamiSymbol, NamiVideo, NamiCollapseContainer, NamiResponsiveGrid, NamiCarouselContainer, NamiPlayPauseButton, NamiVolumeButton, NamiStack };

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/helpers.d.ts

@@ -10,11 +10,13 @@ export declare function interpolate<T>(value: T, replacements: ReplacementsType)
 export declare function getInterpolatedButtonComponents(component: TButtonContainer): TComponent[];
 export declare function getSkuButtonComponents(items: PaywallSKU[], component: TProductContainer, mediaList?: {
     [mediaName: string]: Pick<TPaywallMedia, 'content'>;
-}, additionalVariableStates?: object): [boolean, TComponent[]][];
+}): [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 const rgbaToHex: (rgba?: string) => string | null;
+export declare const sameColors: (color1?: string, color2?: string) => boolean;
 export {};

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

@@ -2,12 +2,12 @@ import { NamiProductDetails, NamiProductOffer, NamiSubscriptionPeriod } from "..
 import { PricingPhase } from "../../types/products";
 import { PaywallSKU } from "../../types/sku";
 export declare const isSubscription: (productType?: string) => productType is "subscription";
-export declare function getStandardBillingPeriod(product: NamiProductDetails): string | undefined;
-export declare function getFreeTrialPeriod(product: NamiProductDetails): string | undefined;
+export declare function getStandardBillingPeriod(product: NamiProductDetails): string | null;
+export declare function getFreeTrialPeriod(product: NamiProductDetails): string | null;
 export declare function getFreeTrialOffer(product: NamiProductDetails): NamiProductOffer | undefined;
 export declare function extractStandardPricingPhases(product: NamiProductDetails): PricingPhase[];
 export declare function convertOfferToPricingPhase(offer: NamiProductOffer | null, subPeriod?: NamiSubscriptionPeriod): PricingPhase;
-export declare function convertISO8601PeriodToText(iso8601Period?: string, singular?: boolean, justPeriod?: boolean, justNumber?: boolean): string | null;
+export declare function convertISO8601PeriodToText(iso8601Period: string | null, singular?: boolean, justPeriod?: boolean, justNumber?: boolean): string | null;
 export declare function getCurrencyFormat(priceCurrencyCode: string): Intl.NumberFormat;
 export declare const getPriceDifference: (currentSkuPricePerMonth?: number, referencedSkuPricePerMonth?: number, currencyFormat?: Intl.NumberFormat) => string | null;
 export declare const getPercentagePriceDifference: (currentSkuPrice?: number, currentSkuDurationInMonths?: number, referencedSkuPrice?: number, referencedSkuPeriodInMonths?: number) => string | null;

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

@@ -2,6 +2,7 @@ import { InitiateStateGroup, ISkuMenu, TInitialState } from "../../types/paywall
 import { NamiProductDetails } from "../../types/externals/product";
 import { PaywallSKU } from "../../types/sku";
 import { NamiPaywallLaunchContext } from "../../nami-web";
+import { TCarouselSlide } from "src/types/components/containers";
 export declare function currentSku(productDetails: NamiProductDetails[], initialState: TInitialState, skuMenus: ISkuMenu[], skus: PaywallSKU[]): {
     [key: string]: any;
 };
@@ -9,6 +10,9 @@ export declare function skuItems(productDetails: NamiProductDetails[], skuMenus:
 export declare function getSkuSmartTextValue(productDetail?: NamiProductDetails | null, sku?: PaywallSKU, skus?: PaywallSKU[]): {
     [key: string]: any;
 };
+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;

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

@@ -1,3 +1,4 @@
+import { TCarouselContainer } from "src/types/components/containers";
 import { TBaseComponent, TContainerPosition } from "../../types/components";
 import { TSegmentPickerItem, TTextLikeComponent } from "../../types/components/elements";
 export declare function parseSize(value: string | number): string;
@@ -9,6 +10,7 @@ export declare function applyTextOverflow(component: TTextLikeComponent): string
 export declare function transition(): string;
 export declare function grow({ grow }: TBaseComponent): string;
 export declare function paddingAndMargin(component: TBaseComponent): string;
+export declare function slidePaddingAndMargin(component: TCarouselContainer): string;
 export declare function transform({ moveX, moveY, }: TBaseComponent): string;
 export declare function borders(component: TBaseComponent, inFocusedState?: boolean): string;
 export declare function alignItems({ alignment, }: 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/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>;