@namiml/web-sdk 1.7.7-beta.1 → 1.7.8

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Nami Web SDK Changelog
 
+## 1.7.8
+**Release Date:** February 17, 2026
+
+### Bug Fixes
+- Fix rendering of components with 0 height or width
+- Fix CTV button focus display
+- Clear uninterpolated Smart Text variables
+- Make sure background image is fullscreen when scrolling
+
+### New Features
+- Support Segment Picker form component
+- Support Countdown Timer component
+- Support Progress Bar component
+- Support new flow function setTags
+- Support listening for user tag updates in Flow
+
+### Enhancements
+- Allow branching in flows based on set/notSet operators
+- Support TTS on Vizio devices
+- Support active and inactive drop shadow styling on segment picker
+- Support paywall conditions based on product subscription duration
+
+## 1.7.7
+**Release Date:** December 17, 2025
+
+### Bug Fixes
+- Ensure page-changed event escapes shadow DOM when CustomEvent polyfill is present
+
 ## 1.7.6
 
 **Release Date:** December 16, 2025

package/dist/components/ContextProvider.d.ts

@@ -1,5 +1,5 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { IPaywall, ISkuMenu, NamiAppSuppliedVideoDetails, TPaywallContext, TPaywallMedia } from '../types/paywall';
+import { IPaywall, ISkuMenu, NamiAppSuppliedVideoDetails, TimerState, TPaywallContext, TPaywallMedia } from '../types/paywall';
 import { NamiProductDetails } from '../types/externals/product';
 import { NamiSKU } from '../types/externals/sku';
 import { NamiCampaign } from '../types/externals/campaign';
@@ -27,6 +27,9 @@ export declare class PaywallContextProvider extends SimpleEventTarget implements
     static setAppSuppliedVideoDetails(details: NamiAppSuppliedVideoDetails): void;
     static getSelectedPaywall(): IPaywall | undefined;
     static setUserInteractionEnabled(enabled: boolean): void;
+    static setUserTags(tags: {
+        [key: string]: string;
+    }): void;
     static setProductDetails(details: NamiProductDetails[]): void;
     static setPurchaseInProgress(inProgress: boolean): void;
     static setIsLoggedIn(isLoggedIn: boolean): void;
@@ -44,6 +47,9 @@ export declare class PaywallContextProvider extends SimpleEventTarget implements
     setProductDetails(details: NamiProductDetails[]): void;
     getProductDetails(): NamiProductDetails[];
     setCurrentGroupData(currentGroupId: string, currentGroupName: string): void;
+    setFormState(formId: string, state: boolean | string): void;
+    setTimerState(timerId: string, remainingSeconds: number, savedAt: number, hasEmittedCompletion: boolean): void;
+    getTimerState(timerId: string): TimerState | undefined;
     getCurrentGroupId(): string;
     getCurrentGroupName(): string;
     setCurrentFormId(formId: string, value?: string): void;
@@ -83,5 +89,8 @@ export declare class PaywallContextProvider extends SimpleEventTarget implements
     getCurrentCollapsibleSku(): NamiSKU;
     setFlow(flow: NamiFlow): void;
     setUserInteractionEnabled(enabled: boolean): void;
+    setUserTags(tags: {
+        [key: string]: string;
+    }): void;
     setCurrentSlideIndex(index: number): void;
 }

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

@@ -13,6 +13,7 @@ export declare class NamiButton extends NamiElement {
     disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValueMap<this>): void;
     private _handleFocus;
+    private _announceButtonLabel;
     private _handleBlur;
     private _dispatchFocusChange;
     private _dispatchPageChange;

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

@@ -0,0 +1,52 @@
+import { CSSResult, PropertyValues } from 'lit';
+import { NamiElement } from '../NamiElement';
+import type { TSemverObj } from '../../utils/parsers';
+import { TCountdownTimerTextComponent } from '../../types/components/elements';
+export declare class NamiCountdownTimerText extends NamiElement {
+    component: TCountdownTimerTextComponent;
+    inFocusedState: boolean;
+    scaleFactor: number;
+    minSDKVersion: TSemverObj;
+    private timer;
+    private startTime;
+    private initialDuration;
+    private hasEmittedCompletion;
+    private timerState;
+    private static readonly DEFAULT_LABELS;
+    private static readonly DEFAULT_UNITS;
+    private static readonly SECONDS_PER_DAY;
+    private static readonly SECONDS_PER_HOUR;
+    private static readonly SECONDS_PER_MINUTE;
+    private static readonly TIMER_INTERVAL_MS;
+    protected firstUpdated(): void;
+    disconnectedCallback(): void;
+    private getTimerId;
+    private loadTimerState;
+    private saveTimerState;
+    private getSavedTimerState;
+    private startTimer;
+    private initializeTimerState;
+    private restoreTimerFromState;
+    private resetTimerState;
+    private onTimerTick;
+    private clearTimer;
+    private calculateTimeValues;
+    private calculateTotalRemainingSeconds;
+    private calculateDurationRemainingSeconds;
+    private calculateTargetDateTimeRemainingSeconds;
+    private calculateCurrentRemainingSeconds;
+    private convertSecondsToTimeUnits;
+    private formatValue;
+    private emitCompletionEvent;
+    updated(changedProperties: PropertyValues): void;
+    private updateAccessibilityAttributes;
+    private handleComponentChange;
+    protected styles(): CSSResult;
+    render(): import("lit").TemplateResult<1>;
+    private buildUnitsToRender;
+    private normalizeLabelPosition;
+    private shouldDisplayLabels;
+    private getLabel;
+    private renderTimerUnits;
+    private renderUnit;
+}

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

@@ -10,6 +10,7 @@ export declare class NamiPlayPauseButton extends NamiElement {
     private playing;
     constructor();
     private _handleFocus;
+    private _announceButtonLabel;
     private _handleBlur;
     private _handleKeyDown;
     private _handleClick;

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

@@ -0,0 +1,31 @@
+import { CSSResult, TemplateResult } from 'lit';
+import { NamiElement } from '../NamiElement';
+import { TProgressBarComponent } from '../../types/components/elements';
+import { TSemverObj } from '../../utils/parsers';
+export declare class NamiProgressBar extends NamiElement {
+    component: TProgressBarComponent;
+    scaleFactor: number;
+    inFocusedState: boolean;
+    minSDKVersion: TSemverObj;
+    private currentProgress;
+    private isAnimating;
+    private screenreaderAnnouncement;
+    private hasInitialized;
+    private delayTimeoutId;
+    private animationFrameId;
+    private animationStartTime;
+    private startPercentage;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(changedProperties: any): void;
+    updated(changedProperties: any): void;
+    private cleanup;
+    private getResolvedDuration;
+    private startAnimation;
+    private beginAnimation;
+    private animateDeterminate;
+    private getActiveWidthCss;
+    private isActiveWidthPercent;
+    protected styles(): CSSResult;
+    render(): TemplateResult;
+}

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

@@ -6,8 +6,14 @@ export declare class NamiSegmentPickerItem extends NamiElement {
     inFocusedState: boolean;
     scaleFactor: number;
     private _isActive;
-    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleFocus;
+    private _announceButtonLabel;
     private _handleKeyDown;
+    private _getParentPicker;
+    private _getParentFormId;
+    private _updateFormState;
     private _handleClick;
     private _handleHover;
     updated(changedProperties: PropertyValues): void;

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

@@ -10,6 +10,8 @@ export declare class NamiToggleButton extends NamiElement {
     isActive: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private _handleFocus;
+    private _announceButtonLabel;
     private _handleKeyDown;
     private _handleClick;
     updated(): void;

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

@@ -10,6 +10,7 @@ export declare class NamiVolumeButton extends NamiElement {
     private muted;
     constructor();
     private _handleFocus;
+    private _announceButtonLabel;
     private _handleBlur;
     private _handleKeyDown;
     private _handleClick;

package/dist/components/index.d.ts

@@ -23,6 +23,8 @@ import { NamiToggleSwitch } from "./elements/ToggleSwitch";
 import { NamiRadioButton } from "./elements/RadioButton";
 import { NamiProgressIndicator } from "./elements/ProgressIndicator";
 import { NamiToggleButton } from "./elements/ToggleButton";
+import { NamiCountdownTimerText } from "./elements/CountdownTimerText";
+import { NamiProgressBar } from "./elements/ProgressBar";
 declare global {
     interface HTMLElementTagNameMap {
         "nami-spacer": NamiSpacer;
@@ -51,6 +53,8 @@ declare global {
         "nami-radio-button": NamiRadioButton;
         "nami-progress-indicator": NamiProgressIndicator;
         "nami-toggle-button": NamiToggleButton;
+        "nami-countdown-timer-text": NamiCountdownTimerText;
+        "nami-progress-bar": NamiProgressBar;
     }
 }
-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, NamiProgressIndicator, NamiToggleButton, };
+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, NamiProgressIndicator, NamiProgressBar, NamiToggleButton, NamiCountdownTimerText, };

package/dist/components/productDetails.d.ts

@@ -1,3 +1,4 @@
 import { NamiProductDetails } from "../types/externals/product";
 import { PaywallSKU } from "../types/sku";
+export declare const getSkuProductDetailKeys: () => string[];
 export declare const getProductDetail: (variableName: string, product?: NamiProductDetails | null, referenceId?: string, skus?: PaywallSKU[]) => unknown;

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

@@ -23,9 +23,9 @@ export declare function alignItems({ alignment, verticalAlignment }: TBaseCompon
 export declare function justifyContent({ alignment, horizontalAlignment }: TBaseComponent): string;
 export declare function widthAndHeight(component: TBaseComponent, scaleFactor: number): string;
 export declare function zIndex({ zIndex }: TBaseComponent): string;
-export declare function dropShadow(dropShadow?: string): string;
+export declare function dropShadow(dropShadow?: string, isText?: boolean): string;
 export declare function textStrikethrough(value: boolean | undefined): string;
-export declare function font({ fontName }: TTextLikeComponent): string;
+export declare function fontFamily(fontName?: string): 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;
@@ -33,3 +33,4 @@ export declare function getComponentStyles(prefix: string, component: TComponent
 export declare function formatKey(key: string, prefix: string): string;
 export declare function applySegmentStyles(styles: any, scaleFactor: number, inFocusedState: boolean): string;
 export declare function applySegmentFontStyles(styles: any, scaleFactor: number): string;
+export declare function focusVisibleStyles(component: TBaseComponent): string;

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

@@ -1,9 +1,10 @@
-import type { NamiFlowObjectDTO, NamiFlowOn, NamiFlowStep, NamiFlowTransition } from "../../types/flow";
+import { 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";
 import type { NamiFlowManager } from "./NamiFlowManager";
 import type { NamiButton } from "../../components";
+import { TimerState } from "../../types/paywall";
 export declare class BasicNamiFlow implements NamiFlowObjectDTO {
     id: string;
     name: string;
@@ -31,6 +32,9 @@ export declare class NamiFlow extends BasicNamiFlow {
     currentButton?: NamiButton;
     isPaused: boolean;
     pausedStepID?: string;
+    timerStates: {
+        [timerId: string]: TimerState;
+    };
     constructor(campaign: NamiFlowCampaign, paywall: PaywallComponent, manager: NamiFlowManager, context?: NamiPaywallLaunchContext);
     private registerResolvers;
     get currentFlowStep(): NamiFlowStep | undefined;

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

@@ -66,4 +66,11 @@ export declare class NamiFlowManager {
     static getLastAnimatedFlowProgress(key: string): number;
     static setLastAnimatedFlowProgress(key: string, value: number): void;
     static getCurrentFlowProgress(key?: string): number;
+    /**
+     * Gets the current flow step's auto-advance delay (in seconds)
+     * Parses __appear__ actions to find flowNav/flowNext with a delay parameter
+     * @returns Delay in seconds, or null if not auto-advancing
+     */
+    getCurrentFlowStepAutoAdvanceDelay(): number | null;
+    static getCurrentFlowStepAutoAdvanceDelay(): number | null;
 }