@namiml/web-sdk/dist/types/components/index.d.ts

Nami Web SDK makes subscriptions & in-app purchases easy, with powerful built-in paywalls and A/B testing

import { NamiAnimationSpec } from "./animation";
import { TButtonContainer, TCarouselContainer, TCarouselSlide, TCollapseContainer, TFlexProductContainer, TPlayPauseButton, TProductContainer, TRadioButton, TResponsiveGrid, TStack, TToggleSwitch, TVolumeButton, UserAction } from "./containers";
import { TConditionalComponent, TImageComponent, TQRCodeComponent, TSegmentPicker, TSegmentPickerItem, TSpacerComponent, TSvgImageComponent, TSymbolComponent, TTextComponent, TTextListComponent, TVideoComponent } from "./elements";
export interface TBaseComponent {
    id?: string;
    title?: string;
    component: string;
    namiComponentType?: string;
    grow?: boolean;
    flag?: null | string;
    context?: {
        [key: string]: any;
    };
    moveX?: number | string;
    moveY?: string | number;
    direction?: DirectionType;
    spacing?: number;
    alignment?: AlignmentType;
    horizontalAlignment?: AlignmentType;
    verticalAlignment?: AlignmentType;
    leftPadding?: number | string;
    rightPadding?: number | string;
    topPadding?: number | string;
    bottomPadding?: number | string;
    leftMargin?: number | string;
    rightMargin?: number | string;
    topMargin?: number | string;
    bottomMargin?: number | string;
    fillColor?: string;
    borderWidth?: number;
    borderRadius?: number;
    borderColor?: string;
    borders?: Array<BorderSideType>;
    focusedBorders?: Array<BorderSideType>;
    focusedFillColor?: string;
    focusedFontColor?: string;
    focusedBorderColor?: string;
    focusedBorderWidth?: number;
    focusedBorderRadius?: number;
    roundBorders?: Array<BorderLocationType>;
    focusedRoundBorders?: Array<BorderLocationType>;
    fillColorFallback?: string;
    focusedFillColorFallback?: string;
    zIndex?: number;
    conditionAttributes?: TConditionalAttributes;
    height?: number | string;
    width?: number | string;
    dropShadow?: string;
    onTap?: UserAction;
    actionTap?: string;
    refId?: string;
    _fields?: {
        [attribute: string]: TFieldSettings;
    } & {
        _group: string;
        _label: string;
        _toggleAttr: string | null;
        _toggleValue: any;
        _collapsible: boolean;
        _hint: string | null;
    };
    _fieldGroupLabel?: string;
    _fieldLabel?: string;
    _fieldHint?: string;
    _fieldReadOnly?: boolean;
    _fieldPlaceholder?: string;
    _fieldDescription?: string;
    _fieldOmit?: string[];
    fixedHeight?: number;
    fixedWidth?: number | "fitContent";
    hidden?: boolean;
    animation?: NamiAnimationSpec;
}
export type TComponent = TButtonContainer | TContainer | TTextListComponent | TTextComponent | TSpacerComponent | TImageComponent | TSvgImageComponent | TSymbolComponent | TCarouselContainer | TProductContainer | TFlexProductContainer | TStack | TConditionalComponent | TSegmentPicker | TSegmentPickerItem | TVideoComponent | TCollapseContainer | TResponsiveGrid | TVolumeButton | TPlayPauseButton | TQRCodeComponent | TToggleSwitch | TRadioButton;
export type DirectionType = "vertical" | "horizontal";
export type AlignmentType = "center" | "right" | "left" | "top" | "bottom";
export type BorderLocationType = "upperLeft" | "upperRight" | "lowerLeft" | "lowerRight";
export type BorderSideType = 'left' | 'right' | 'top' | 'bottom';
export type TContainerPosition = `${'center' | 'start' | 'end'}-${'top' | 'bottom' | 'left' | 'right'}`;
export declare const BorderMap: Record<BorderLocationType, string>;
export declare const BorderSideMap: Record<BorderSideType, string>;
export type TTestObject = {
    value: any;
    expected: any;
    operator: "equals" | "contains" | "notEquals" | "set" | "notSet" | "notContains" | 'gt' | 'lt' | 'gte' | 'lte';
};
type TransformToString<T> = {
    [P in keyof T]: T[P] extends number | boolean ? T[P] | string : T[P];
};
export type TConditionalAttributes = Array<Omit<TConditionalComponent, "components"> & {
    attributes: Partial<TransformToString<TBaseComponent>> & {
        name?: string;
        text?: string;
        texts?: string[];
        url?: string;
        fontSize?: number;
        screenreaderText?: string;
        fontColor?: string;
        linkColor?: string;
    };
}>;
export type TField = "image" | "listContainerComponent" | "text" | "url" | "textArea" | "fontSelect" | "splitTextArea" | "color" | "colorGradient" | "number" | "alignment" | "carouselSlides" | "option" | "iconSelect" | "toggle";
export type TContainer = TBaseComponent & {
    component: "container" | "formContainer";
    position?: TContainerPosition;
    fillColor?: string;
    fillImage?: string | null;
    components?: TComponent[];
    loopVariable?: string;
    loopSource?: string | any[];
    backgroundBlur?: number | null;
};
export type TFieldSettings = {
    type: TField;
    label: string;
    hint: string | null;
    description: string | null;
    placeholder: string | null;
    variable: string;
    readOnly: boolean;
    markdownHint: boolean;
    options: {
        label: string;
        value: any;
    }[] | null;
    maxLimit: number | null;
    minLimit: number | null;
    aspectRatio: number | null;
    newSlide?: TCarouselSlide;
    carousel?: string;
    darkModeVariable?: string;
    conditions?: TTestObject[];
    showOpacity?: boolean;
    newRow?: any;
};
export {};