@revenuecat/purchases-ui-js/dist/components/timeline/timeline-utils.js

Web components for Paywalls. Powered by RevenueCat

import { defaultColor, getTextComponentStyles, } from "../text/text-utils";
import { getBorderStyle, getColor, getCornerRadiusStyle, getSizeStyle, prefixObject, stringifyStyles, } from "../../utils/style-utils";
import { getLabelAndReplaceVariables } from "../../utils/variable-utils";
export function getTimelineStyles(props) {
    const styles = {
        "--item-spacing": `${props.item_spacing}px`,
        "--width": "initial",
        "--height": "initial",
        "--flex": "0 1 auto",
        "--position": "relative",
        "--inset": "0",
        "--transform": "initial",
    };
    Object.assign(styles, getSizeStyle(props.size));
    Object.assign(styles, props.zStackChildStyles);
    const prefixedStyles = prefixObject(styles, "timeline");
    return stringifyStyles(prefixedStyles);
}
export function getTimelineItemStyles(props) {
    const styles = {
        "--icon-size": `${props.icon.width_and_height}px`,
        "--icon-padding": `${props.icon.padding}px`,
        "--icon-color": getColor({
            colorMap: props.icon.color,
            colorMode: props.purchaseState?.colorMode,
        }),
        "--icon-background-color": getColor({
            colorMap: props.icon_background?.color,
            colorMode: props.purchaseState.colorMode,
        }),
        "--icon-border": getBorderStyle(props.icon_background?.border, props.purchaseState?.colorMode),
        "--text-spacing": `${props.text_spacing}px`,
        "--border-start-start-radius": `0px`,
        "--border-start-end-radius": `0px`,
        "--border-end-start-radius": `0px`,
        "--border-end-end-radius": `0px`,
        "--connector-color": getColor({
            colorMap: props.connector?.color,
            colorMode: props.purchaseState.colorMode,
        }),
        "--connector-width": `${props.connector?.width || 0}px`,
        "--connector-top": "0px",
        "--connector-height": `${props.item_spacing}px`,
    };
    Object.assign(styles, props.icon_background?.shape?.type === "rectangle"
        ? getCornerRadiusStyle(props.icon_background?.shape?.corners)
        : {
            "--border-start-start-radius": "50%",
            "--border-start-end-radius": "50%",
            "--border-end-start-radius": "50%",
            "--border-end-end-radius": "50%",
        });
    if (props.connector) {
        const hasMarginTop = props.connector.margin.top !== 0;
        const hasMarginBottom = props.connector.margin.bottom !== 0;
        const itemBackgroundSize = props.icon.padding + props.icon.width_and_height / 2;
        if (!hasMarginTop && !hasMarginBottom) {
            styles["--connector-height"] =
                `${props.item_spacing + itemBackgroundSize * 2}px`;
            styles["--connector-top"] = `50%`;
        }
        if (hasMarginTop && hasMarginBottom) {
            styles["--connector-height"] =
                `${props.item_spacing - props.connector.margin.top - props.connector.margin.bottom}px`;
            styles["--connector-top"] =
                `calc(100% + ${props.connector.margin.top}px)`;
        }
        if (!hasMarginTop && hasMarginBottom) {
            styles["--connector-height"] =
                `${props.item_spacing - props.connector.margin.bottom + itemBackgroundSize}px`;
            styles["--connector-top"] = `50%`;
        }
        if (hasMarginTop && !hasMarginBottom) {
            styles["--connector-height"] =
                `${props.item_spacing + itemBackgroundSize}px`;
            styles["--connector-top"] =
                `calc(100% + ${props.connector.margin.top}px)`;
        }
    }
    const prefixedStyles = prefixObject(styles, "timeline-item");
    return stringifyStyles(prefixedStyles);
}
export function getTimelineItemTextStyles(props, kind = "title") {
    const styles = {
        "--text-color": "inherit",
        "--text-font-size": "initial",
        "--text-font-weight": "initial",
        "--text-horizontal-alignment": "initial",
        "--text-margin-block-start": "0px",
        "--text-margin-inline-end": "0px",
        "--text-margin-block-end": "0px",
        "--text-margin-inline-start": "0px",
        "--text-padding-block-start": "0px",
        "--text-padding-inline-end": "0px",
        "--text-padding-block-end": "0px",
        "--text-padding-inline-start": "0px",
    };
    const textProps = {
        color: props[kind]?.color || defaultColor,
        font_size: props[kind]?.font_size || "body_m",
        font_weight: props[kind]?.font_weight || "regular",
        horizontal_alignment: props[kind]?.horizontal_alignment || "leading",
    };
    const { tagToRender, textStyles } = getTextComponentStyles({
        ...props,
        components: [],
        ...textProps,
        size: { width: { type: "fit" }, height: { type: "fit" } },
        type: "text",
        margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
        padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
        text_lid: "",
    });
    Object.assign(styles, textStyles);
    const stringifiedStyles = stringifyStyles(prefixObject(styles, "timeline-item"));
    const textLabel = getLabelAndReplaceVariables({
        text_lid: props[kind]?.text_lid,
        locale: props.purchaseState.locale,
        defaultLocale: props.purchaseState.defaultLocale,
        labels: props.labels,
        variableDictionary: props.variableDictionary,
    });
    return {
        textStyles: stringifiedStyles,
        tagToRender,
        textLabel,
    };
}