@namiml/web-sdk 1.5.1 → 1.5.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 1.4.3 (November 21, 2024)
+
+## Bugfixes
+- Resolve an issue where the collapse component caret icon was not updating when expanded
+
+## Enahncements
+- Support scaling on TV devices for optimal display on 720p, 1080p, 4K, and 8K devices
+
+## 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

package/dist/components/ContextProvider.d.ts

@@ -49,6 +49,8 @@ declare class ContextProvider implements ReactiveController {
     setAppSuppliedVideoDetails({ url, name }: NamiAppSuppliedVideoDetails): void;
     resetAppSuppliedVideoDetails(): void;
     setLaunchDetails(value: string, type?: string): void;
+    setOpenHeaderIds(id: string, sku?: NamiSKU): void;
+    getCurrentCollapsibleSku(): NamiSKU;
 }
 declare const contextProvider: ContextProvider;
 export default contextProvider;

package/dist/components/Paywall.d.ts

@@ -6,6 +6,7 @@ import { NamiCampaign } from '../types/externals/campaign';
 import { NamiPaywallEvent } from '../types/externals/paywall';
 declare class PaywallComponent extends NamiElement {
     formFactor: TDevice;
+    scaleFactor: number;
     campaign: NamiCampaign;
     paywall: IPaywall;
     paywallEvent: Partial<NamiPaywallEvent>;

package/dist/components/TemplateComponent.d.ts

@@ -1,2 +1,2 @@
 import { TComponent } from "../types/components";
-export declare function TemplateComponent(component: TComponent, inFocusedState?: boolean): any;
+export declare function TemplateComponent(component: TComponent, scaleFactor: number, inFocusedState?: boolean): any;

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

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

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

@@ -5,7 +5,12 @@ import { NamiElement } from '../NamiElement';
 export declare class NamiCarouselContainer extends NamiElement {
     component: TCarouselContainer;
     inFocusedState: boolean;
+    scaleFactor: number;
     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/CollapseContainer.d.ts

@@ -5,6 +5,7 @@ export declare class NamiCollapseContainer extends NamiElement {
     component: TCollapseContainer;
     inFocusedState: boolean;
     height: number;
+    scaleFactor: number;
     constructor();
     private _handleClick;
     protected styles(): CSSResult;

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

@@ -5,7 +5,10 @@ import { TProductContainer } from '../../types/components/containers';
 export declare class NamiContainer extends NamiElement {
     component: TContainer | TProductContainer;
     inFocusedState: boolean;
+    scaleFactor: number;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private _handleFocusChanged;
     private _handleFocus;
     private _handleBlur;

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

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

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

@@ -5,6 +5,7 @@ export declare class NamiFooter extends NamiElement {
     components: THeaderFooter;
     zIndex: string;
     inFocusedState: boolean;
+    scaleFactor: number;
     protected styles(): CSSResult;
     render(): any[];
 }

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

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

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

@@ -4,9 +4,9 @@ import { TProductContainer } from '../../types/components/containers';
 export declare class NamiProductContainer extends NamiElement {
     component: TProductContainer;
     inFocusedState: boolean;
+    scaleFactor: number;
     private currentGroupId;
     protected styles(): CSSResult;
     updated(): void;
-    private _offerState;
     render(): any[][];
 }

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

@@ -4,6 +4,7 @@ import { TResponsiveGrid } from '../../types/components/containers';
 export declare class NamiResponsiveGrid extends NamiElement {
     component: TResponsiveGrid;
     inFocusedState: boolean;
+    scaleFactor: number;
     private mouseDown;
     private startX;
     scrollLeft: any;

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

@@ -4,6 +4,7 @@ import { NamiElement } from '../NamiElement';
 export declare class NamiButton extends NamiElement {
     component: TButtonContainer;
     inFocusedState: boolean;
+    scaleFactor: number;
     constructor();
     updated(): void;
     private _handleFocus;

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

@@ -4,6 +4,7 @@ import { CSSResult, TemplateResult } from "lit";
 export declare class NamiImage extends NamiElement {
     component: TImageComponent;
     inFocusedState: boolean;
+    scaleFactor: number;
     protected styles(): CSSResult;
     protected render(): TemplateResult;
 }

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

@@ -4,6 +4,7 @@ import { CSSResult } from 'lit';
 export declare class NamiPlayPauseButton extends NamiElement {
     component: TPlayPauseButton;
     inFocusedState: boolean;
+    scaleFactor: number;
     private playing;
     constructor();
     private _handleFocus;

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

@@ -4,6 +4,7 @@ import { NamiElement } from '../NamiElement';
 export declare class NamiSegmentPicker extends NamiElement {
     component: TSegmentPicker;
     inFocusedState: boolean;
+    scaleFactor: number;
     constructor();
     private _handleClick;
     protected styles(): CSSResult;

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

@@ -4,6 +4,7 @@ import { NamiElement } from '../NamiElement';
 export declare class NamiSegmentPickerItem extends NamiElement {
     component: TSegmentPickerItem;
     inFocusedState: boolean;
+    scaleFactor: number;
     constructor();
     private _handleClick;
     private _handleHover;

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

@@ -4,6 +4,7 @@ import { TSpacerComponent } from '../../types/components/elements';
 export declare class NamiSpacer extends NamiElement {
     component: TSpacerComponent;
     inFocusedState: boolean;
+    scaleFactor: number;
     protected styles(): CSSResult;
     render(): TemplateResult;
 }

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

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

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

@@ -4,6 +4,7 @@ import { NamiElement } from '../NamiElement';
 export declare class NamiText extends NamiElement {
     component: TTextComponent;
     inFocusedState: boolean;
+    scaleFactor: number;
     protected styles(): CSSResult;
     render(): TemplateResult;
 }
@@ -16,12 +17,18 @@ export declare class TextListItemWrapper extends NamiElement {
 export declare class NamiSymbol extends NamiElement {
     component: TSymbolComponent;
     inFocusedState: boolean;
+    scaleFactor: number;
+    previousSymbolName: string;
     protected styles(): CSSResult;
+    protected updated(): void;
+    private shouldRenderCurrentIcon;
+    private renderSvgIcon;
     render(): TemplateResult;
 }
 export declare class NamiTextList extends NamiElement {
     component: TTextListComponent;
     inFocusedState: boolean;
+    scaleFactor: number;
     protected styles(): CSSResult;
     render(): TemplateResult;
 }

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

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

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

@@ -4,6 +4,7 @@ import { CSSResult } from 'lit';
 export declare class NamiVolumeButton extends NamiElement {
     component: TVolumeButton;
     inFocusedState: boolean;
+    scaleFactor: number;
     private muted;
     constructor();
     private _handleFocus;

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

@@ -1,6 +1,7 @@
 import { UserAction } from "../../types/components/containers";
 import { NamiSKU } from "../../types/externals/sku";
-export declare const handleAction: (onTap?: UserAction, sku?: NamiSKU) => void;
+import { NamiPaywallComponentChange } from "../../types/externals/paywall";
+export declare const handleAction: (onTap?: UserAction, sku?: NamiSKU, componentChange?: NamiPaywallComponentChange | undefined) => void;
 export declare const closePaywallHandler: () => void;
 export declare const restorePurchase: () => void;
 export declare const signIn: () => 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

@@ -1,7 +1,8 @@
-import { InitiateStateGroup, ISkuMenu, TInitialState } from "../../types/paywall";
+import { 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,7 +10,10 @@ 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;
-export declare function launchContext(groups: InitiateStateGroup[], stateContext: NamiPaywallLaunchContext, context?: NamiPaywallLaunchContext): NamiPaywallLaunchContext;
+export declare function launchContext(stateContext: NamiPaywallLaunchContext, context?: NamiPaywallLaunchContext): NamiPaywallLaunchContext;

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

@@ -1,6 +1,7 @@
+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;
+export declare function parseSize(value: string | number, scaleFactor: 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;
@@ -8,20 +9,21 @@ 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;
-export declare function paddingAndMargin(component: TBaseComponent): string;
+export declare function paddingAndMargin(component: TBaseComponent, scaleFactor: number): string;
+export declare function slidePaddingAndMargin(component: TCarouselContainer, scaleFactor: number): string;
 export declare function transform({ moveX, moveY, }: TBaseComponent): string;
-export declare function borders(component: TBaseComponent, inFocusedState?: boolean): 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 widthAndHeight(component: 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;
 export declare function textStrikethrough(value: boolean | undefined): string;
 export declare function font({ fontName }: TTextLikeComponent): string;
-export declare function applyStyles(component: TBaseComponent, inFocusedState?: boolean): string;
-export declare function applyGridStyles(component: TBaseComponent, inFocusedState?: boolean): string;
+export declare function applyStyles(component: TBaseComponent, scaleFactor: number, inFocusedState?: boolean): string;
+export declare function applyGridStyles(component: TBaseComponent, inFocusedState?: boolean, scaleFactor?: number): string;
 export declare function parsePosition(position?: TContainerPosition): string;
 export declare function getComponentStyles(prefix: string, component: TSegmentPickerItem): TSegmentPickerItem;
 export declare function formatKey(key: string, prefix: string): string;
-export declare function applySegmentStyles(styles: any, inFocusedState: boolean): string;
-export declare function applySegmentFontStyles(styles: any): string;
+export declare function applySegmentStyles(styles: any, scaleFactor: number, inFocusedState: boolean): string;
+export declare function applySegmentFontStyles(styles: any, scaleFactor: number): string;