@namiml/web-sdk 1.5.2 → 1.5.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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

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,6 +5,7 @@ import { NamiElement } from '../NamiElement';
 export declare class NamiCarouselContainer extends NamiElement {
     component: TCarouselContainer;
     inFocusedState: boolean;
+    scaleFactor: number;
     swiperInstance: Swiper;
     slideSpacing: number;
     connectedCallback(): void;

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,6 +5,7 @@ import { TProductContainer } from '../../types/components/containers';
 export declare class NamiContainer extends NamiElement {
     component: TContainer | TProductContainer;
     inFocusedState: boolean;
+    scaleFactor: number;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -5,6 +5,7 @@ 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,6 +4,7 @@ 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;

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

@@ -3,6 +3,7 @@ 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,7 @@ 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;

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

@@ -1,4 +1,4 @@
-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";
@@ -16,4 +16,4 @@ export declare function getSlideSmartTextValue(productDetail?: NamiProductDetail
 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,7 +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;
@@ -9,21 +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 slidePaddingAndMargin(component: TCarouselContainer): 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;