@open-tender/utils/dist/esm/utils/theme.js

A library of utils for use with Open Tender applications that utilize our cloud-based Order API.

export const makeLineHeight = (lineHeight, fontSize) => {
    var _a;
    const size = parseInt((_a = fontSize === null || fontSize === void 0 ? void 0 : fontSize.replace('px', '')) !== null && _a !== void 0 ? _a : '0');
    return `${(parseFloat(lineHeight !== null && lineHeight !== void 0 ? lineHeight : '0') * size).toFixed(3)}px`;
};
// TODO: remove responsive option
export const remsToPixels = (rems, responsive = false) => {
    const cleanedUpRems = rems === null || rems === void 0 ? void 0 : rems.trim().replace(/\s+/g, ' ');
    if (!cleanedUpRems)
        return '0';
    const remsToPixelsSingleValue = (remsValue) => {
        const pixels = parseFloat(remsValue.replace('rem', '')) * 10;
        const adjustedPixels = responsive ? pixels : pixels;
        const noZeroes = parseFloat(adjustedPixels.toFixed(2)).toString();
        return noZeroes === '0' ? '0' : `${noZeroes}px`;
    };
    return cleanedUpRems
        .split(' ')
        .map(i => remsToPixelsSingleValue(i))
        .join(' ');
};
export const remsToNumber = (rems) => {
    return parseFloat(rems.replace('rem', '')) * 10;
};
export const objRemsToPixels = (object, responsive = false) => {
    return Object.entries(object).reduce((obj, [key, value]) => {
        return Object.assign(Object.assign({}, obj), { [key]: remsToPixels(value, responsive) });
    }, {});
};
export const pixelsToInt = (pixels) => {
    try {
        return parseInt(pixels.replace('px', ''));
    }
    catch (err) {
        return 0;
    }
};
export const pixelsToFloat = (pixels) => {
    try {
        return parseFloat(pixels.replace('px', ''));
    }
    catch (err) {
        return 0.0;
    }
};
const paddingToPixels = (padding) => {
    const [top, horizontal, bottom] = padding.split(' ');
    return `${remsToPixels(top)} ${remsToPixels(horizontal)} ${remsToPixels(bottom)}`;
};
/**
 * @deprecated use remsToPixels instead
 */
const boxRemsToPixels = (box) => {
    const pixels = box
        .split(' ')
        .map(i => remsToPixels(i))
        .join(' ');
    return pixels === '0 0 0 0' ? '0px' : pixels;
};
const buttonToPixels = (button) => {
    return Object.assign(Object.assign({}, button), { borderRadius: remsToPixels(button.borderRadius), borderWidth: remsToPixels(button.borderWidth), borderWidthApp: button.borderWidthApp
            ? remsToPixels(button.borderWidthApp)
            : remsToPixels(button.borderWidth), fontSize: button.fontSize ? remsToPixels(button.fontSize, true) : null, letterSpacing: button.letterSpacing
            ? remsToPixels(button.letterSpacing)
            : null, minHeightMobile: button.minHeightMobile
            ? paddingToPixels(button.minHeightMobile)
            : null, padding: button.padding ? paddingToPixels(button.padding) : null, subtitleFontSizeMobile: button.subtitleFontSizeMobile
            ? remsToPixels(button.subtitleFontSizeMobile)
            : null, subtitleMarginTopMobile: button.subtitleMarginTopMobile
            ? remsToPixels(button.subtitleMarginTopMobile)
            : null, titleFontSizeMobile: button.titleFontSizeMobile
            ? remsToPixels(button.titleFontSizeMobile)
            : null, titleMarginTopMobile: button.titleMarginTopMobile
            ? remsToPixels(button.titleMarginTopMobile)
            : null, titleMarginLeftMobile: button.titleMarginLeftMobile
            ? remsToPixels(button.titleMarginLeftMobile)
            : null });
};
const makeButtons = (buttons) => {
    const sizes = Object.entries(buttons.sizes).reduce((obj, [key, value]) => {
        return Object.assign(Object.assign({}, obj), { [key]: buttonToPixels(value) });
    }, {});
    return Object.assign(Object.assign({}, buttons), { sizes });
};
const makeLineHeights = (sizes, lineHeight) => {
    return Object.entries(sizes).reduce((obj, [size, fontSize]) => {
        return Object.assign(Object.assign({}, obj), { [size]: makeLineHeight(lineHeight, fontSize) });
    }, {});
};
const makeFont = (font, sizes) => {
    const fontStyle = Object.assign(Object.assign({}, font), { letterSpacing: remsToPixels(font.letterSpacing), lineHeights: makeLineHeights(sizes, `${font.lineHeight}`) });
    if (!font.fontSize)
        return fontStyle;
    const fontSize = remsToPixels(font.fontSize, true);
    const lineHeight = makeLineHeight(`${font.lineHeight}`, fontSize);
    return Object.assign(Object.assign({}, fontStyle), { fontSize, lineHeight });
};
const makeFonts = (fonts, lineHeight) => {
    const sizes = objRemsToPixels(fonts.sizesMobile, true);
    const lineHeights = makeLineHeights(sizes, lineHeight);
    const headline = makeFont(fonts.headline, sizes);
    const headings = makeFont(fonts.headings, sizes);
    const body = makeFont(fonts.body, sizes);
    const preface = makeFont(fonts.preface, sizes);
    return Object.assign(Object.assign({}, fonts), { headline, headings, body, preface, sizes, lineHeights });
};
const makeBorder = (border) => {
    return Object.assign(Object.assign({}, border), { radius: remsToPixels(border.radius), radiusSmall: remsToPixels(border.radiusSmall), width: remsToPixels(border.width), widthApp: remsToPixels(border.widthApp) });
};
const makeLabel = (label, lineHeight) => {
    const [vertical, horizontal] = label.padding.split(' ');
    const fs = parseFloat(label.fontSizeMobile.replace('rem', '')) * 10.0;
    const lh = parseFloat(lineHeight);
    return {
        fontSize: remsToPixels(label.fontSizeMobile, true),
        lineHeight: `${fs * lh}px`,
        offset: remsToPixels(label.offset),
        padding: `${remsToPixels(vertical)} ${remsToPixels(horizontal)}`,
        top: remsToPixels(label.top),
        left: remsToPixels(label.left)
    };
};
const makeInputs = (inputs) => {
    const [vertical, horizontal] = inputs.padding.split(' ');
    const fs = parseFloat(inputs.fontSizeMobile.replace('rem', '')) * 10.0;
    const lh = parseFloat(inputs.lineHeight);
    return Object.assign(Object.assign({}, inputs), { lineHeight: `${fs * lh}px`, letterSpacing: remsToPixels(inputs.letterSpacing), fontSize: remsToPixels(inputs.fontSizeMobile, true), radius: remsToPixels(inputs.radius), borderWidth: remsToPixels(inputs.borderWidth), borderWidthApp: remsToPixels(inputs.borderWidthApp), padding: `${remsToPixels(vertical)} ${remsToPixels(horizontal)}`, paddingHorizontal: remsToPixels(inputs.paddingHorizontal), paddingVertical: remsToPixels(inputs.paddingVertical), paddingTop: remsToPixels(inputs.paddingTop), paddingTopActive: remsToPixels(inputs.paddingTopActive), paddingBottom: remsToPixels(inputs.paddingBottom), paddingBottomActive: remsToPixels(inputs.paddingBottomActive), label: makeLabel(inputs.label, inputs.lineHeight) });
};
const makeCounts = (counts) => {
    const { alerts, quantity } = counts;
    return {
        alerts: Object.assign(Object.assign({}, alerts), { borderWidth: remsToPixels(alerts.borderWidth), borderWidthApp: remsToPixels(alerts.borderWidthApp), fontSize: remsToPixels(alerts.fontSize, true), fontSizeMobile: remsToPixels(alerts.fontSizeMobile, true), paddingBottom: remsToPixels(alerts.paddingBottom), paddingTop: remsToPixels(alerts.paddingTop) }),
        quantity: Object.assign(Object.assign({}, quantity), { fontSize: remsToPixels(quantity.fontSize, true), fontSizeMobile: remsToPixels(quantity.fontSizeMobile, true), paddingBottom: remsToPixels(quantity.paddingBottom), paddingTop: remsToPixels(quantity.paddingTop) })
    };
};
const makeCards = (cards) => {
    const { default: box, form, menuItem, modifier } = cards;
    return {
        default: Object.assign(Object.assign({}, box), { borderWidth: remsToPixels(box.borderWidth), borderWidthApp: remsToPixels(box.borderWidthApp), borderRadius: remsToPixels(box.borderRadius) }),
        form: Object.assign(Object.assign({}, form), { borderWidth: remsToPixels(form.borderWidth), borderWidthApp: remsToPixels(form.borderWidthApp), borderRadius: remsToPixels(form.borderRadius) }),
        menuItem: Object.assign(Object.assign({}, menuItem), { borderWidth: remsToPixels(menuItem.borderWidth), borderWidthApp: remsToPixels(menuItem.borderWidthApp), borderRadius: remsToPixels(menuItem.borderRadius) }),
        modifier: Object.assign(Object.assign({}, modifier), { borderWidth: remsToPixels(modifier.borderWidth), borderWidthApp: remsToPixels(modifier.borderWidthApp), borderRadius: remsToPixels(modifier.borderRadius) })
    };
};
const makeWelcome = (welcome) => {
    const { mobile } = welcome;
    const titleSize = remsToPixels(mobile === null || mobile === void 0 ? void 0 : mobile.titleSize);
    const subtitleSize = remsToPixels(mobile === null || mobile === void 0 ? void 0 : mobile.subtitleSize);
    return {
        textAlign: mobile === null || mobile === void 0 ? void 0 : mobile.textAlign,
        marginTop: remsToPixels(mobile === null || mobile === void 0 ? void 0 : mobile.marginTop),
        marginBottom: remsToPixels(mobile === null || mobile === void 0 ? void 0 : mobile.marginBottom),
        titleMarginLeft: remsToPixels(mobile === null || mobile === void 0 ? void 0 : mobile.titleMarginLeft),
        titleSize,
        titleLineHeight: makeLineHeight(mobile === null || mobile === void 0 ? void 0 : mobile.titleLineHeight.toFixed(5), titleSize),
        subtitleSize,
        subtitleLineHeight: makeLineHeight(mobile === null || mobile === void 0 ? void 0 : mobile.subtitleLineHeight.toFixed(5), subtitleSize),
        subtitleMarginTop: remsToPixels(mobile === null || mobile === void 0 ? void 0 : mobile.subtitleMarginTop)
    };
};
const makeItem = (item) => {
    const { mobile } = item;
    return Object.assign(Object.assign({}, mobile), { imageMargin: boxRemsToPixels(mobile.imageMargin), imageMaxHeight: remsToPixels(mobile.imageMaxHeight), imageMinHeight: remsToPixels(mobile.imageMinHeight), imagePadding: remsToPixels(mobile.imagePadding), imagePaddingAll: boxRemsToPixels(mobile.imagePaddingAll), maxWidth: remsToPixels(mobile.maxWidth), padding: remsToPixels(mobile.padding) });
};
const makeCategories = (categories) => {
    const { mobile } = categories;
    return Object.assign(Object.assign({}, mobile), { borderRadius: remsToPixels(mobile.borderRadius), containerMaxWidth: remsToPixels(mobile.containerMaxWidth), gap: remsToPixels(mobile.gap), gapDouble: remsToPixels(mobile.gapDouble), gapHalf: remsToPixels(mobile.gapHalf), imageBorderRadius: remsToPixels(mobile.imageBorderRadius), lineHeight: remsToPixels(mobile.lineHeight), lineMargin: remsToPixels(mobile.lineMargin), lineWidth: remsToPixels(mobile.lineWidth), maxWidth: remsToPixels(mobile.maxWidth), minWidth: remsToPixels(mobile.minWidth), paddingBottom: remsToPixels(mobile.paddingBottom), paddingHorizontal: remsToPixels(mobile.paddingHorizontal), paddingTop: remsToPixels(mobile.paddingTop), subtitleSize: remsToPixels(mobile.subtitleSize), titleSize: remsToPixels(mobile.titleSize) });
};
const fontSizeToLineHeight = (lineHeight, fontSize) => {
    var _a;
    const lineHt = (_a = parseFloat(lineHeight)) !== null && _a !== void 0 ? _a : 1;
    const textFontSize = remsToPixels(fontSize);
    return `${(lineHt * pixelsToFloat(textFontSize)).toFixed(2)}px`;
};
const makeMenuItems = (menuItems, lineHeight) => {
    const { allergens, box, calories, container, content, buttons, image, price, tags, tagsAllergens, text, title } = menuItems;
    return {
        allergens: Object.assign(Object.assign({}, allergens), { fontSize: remsToPixels(allergens.fontSize), fontSizeMobile: remsToPixels(allergens.fontSizeMobile), letterSpacing: remsToPixels(allergens.letterSpacing), lineHeight: fontSizeToLineHeight(lineHeight, allergens.fontSizeMobile), gap: remsToPixels(allergens.gap), gapMobile: remsToPixels(allergens.gapMobile), width: remsToPixels(allergens.width), widthMobile: remsToPixels(allergens.widthMobile) }),
        box: Object.assign(Object.assign({}, box), { border: boxRemsToPixels(box.border), borderMobile: boxRemsToPixels(box.borderMobile), borderRadius: remsToPixels(box.borderRadius), borderRadiusMobile: remsToPixels(box.borderRadiusMobile), margin: boxRemsToPixels(box.margin), marginMobile: boxRemsToPixels(box.marginMobile), minWidth: remsToPixels(box.minWidth), minWidthMobile: remsToPixels(box.minWidthMobile), padding: boxRemsToPixels(box.padding), paddingMobile: boxRemsToPixels(box.paddingMobile) }),
        calories: Object.assign(Object.assign({}, calories), { fontSize: remsToPixels(calories.fontSize), fontSizeMobile: remsToPixels(calories.fontSizeMobile), lineHeight: fontSizeToLineHeight(lineHeight, calories.fontSizeMobile), padding: boxRemsToPixels(calories.padding), paddingMobile: boxRemsToPixels(calories.paddingMobile) }),
        container: Object.assign(Object.assign({}, container), { gap: remsToPixels(container.gap), gapHalf: remsToPixels(container.gapHalf), gapHalfMobile: remsToPixels(container.gapHalfMobile), gapMobile: remsToPixels(container.gapMobile), margin: boxRemsToPixels(container.margin), marginMobile: boxRemsToPixels(container.marginMobile), maxWidth: remsToPixels(container.maxWidth), padding: boxRemsToPixels(container.padding), paddingMobile: boxRemsToPixels(container.paddingMobile) }),
        content: Object.assign(Object.assign({}, content), { padding: boxRemsToPixels(content.padding), paddingMobile: boxRemsToPixels(content.paddingMobile) }),
        buttons: Object.assign(Object.assign({}, buttons), { gap: remsToPixels(buttons.gap), gapMobile: remsToPixels(buttons.gapMobile), padding: boxRemsToPixels(buttons.padding), paddingMobile: boxRemsToPixels(buttons.paddingMobile) }),
        image: Object.assign(Object.assign({}, image), { border: boxRemsToPixels(image.border), borderMobile: boxRemsToPixels(image.borderMobile), borderRadius: remsToPixels(image.borderRadius), borderRadiusMobile: remsToPixels(image.borderRadiusMobile), margin: boxRemsToPixels(image.margin), marginMobile: boxRemsToPixels(image.marginMobile), minWidth: remsToPixels(image.minWidth), minWidthMobile: remsToPixels(image.minWidthMobile), padding: boxRemsToPixels(image.padding), paddingMobile: boxRemsToPixels(image.paddingMobile) }),
        price: Object.assign(Object.assign({}, price), { fontSize: remsToPixels(price.fontSize), fontSizeMobile: remsToPixels(price.fontSizeMobile), lineHeight: fontSizeToLineHeight(lineHeight, price.fontSizeMobile), padding: boxRemsToPixels(price.padding), paddingMobile: boxRemsToPixels(price.paddingMobile) }),
        tags: Object.assign(Object.assign({}, tags), { fontSize: remsToPixels(tags.fontSize), fontSizeMobile: remsToPixels(tags.fontSizeMobile), letterSpacing: remsToPixels(tags.letterSpacing), lineHeight: fontSizeToLineHeight(lineHeight, tags.fontSizeMobile), gap: remsToPixels(tags.gap), gapMobile: remsToPixels(tags.gapMobile), width: remsToPixels(tags.width), widthMobile: remsToPixels(tags.widthMobile) }),
        tagsAllergens: Object.assign(Object.assign({}, tagsAllergens), { gap: remsToPixels(tagsAllergens.gap), gapMobile: remsToPixels(tagsAllergens.gapMobile), padding: boxRemsToPixels(tagsAllergens.padding), paddingMobile: boxRemsToPixels(tagsAllergens.paddingMobile) }),
        text: Object.assign(Object.assign({}, text), { fontSize: remsToPixels(text.fontSize), fontSizeMobile: remsToPixels(text.fontSizeMobile), lineHeight: fontSizeToLineHeight(lineHeight, text.fontSizeMobile), padding: boxRemsToPixels(text.padding), paddingMobile: boxRemsToPixels(text.paddingMobile) }),
        title: Object.assign(Object.assign({}, title), { fontSize: remsToPixels(title.fontSize), fontSizeMobile: remsToPixels(title.fontSizeMobile), lineHeight: fontSizeToLineHeight(lineHeight, title.fontSizeMobile), padding: boxRemsToPixels(title.padding), paddingMobile: boxRemsToPixels(title.paddingMobile) })
    };
};
const makeModifiers = (modifiers, lineHeight) => {
    const { box, calories, content, image, price, text, title } = modifiers;
    return Object.assign(Object.assign({}, modifiers), { box: Object.assign(Object.assign({}, box), { border: boxRemsToPixels(box.border), borderMobile: boxRemsToPixels(box.borderMobile), borderRadius: remsToPixels(box.borderRadius), gap: remsToPixels(box.gap), gapHalf: remsToPixels(box.gapHalf), margin: boxRemsToPixels(box.margin), marginMobile: boxRemsToPixels(box.marginMobile), minHeight: remsToPixels(box.minHeight), minHeightWithGap: remsToPixels(box.minHeightWithGap), minWidth: remsToPixels(box.minWidth), padding: boxRemsToPixels(box.padding), paddingMobile: boxRemsToPixels(box.paddingMobile) }), calories: Object.assign(Object.assign({}, calories), { fontSize: remsToPixels(calories.fontSize), lineHeight: fontSizeToLineHeight(calories.fontSize, lineHeight) }), content: Object.assign(Object.assign({}, content), { padding: boxRemsToPixels(content.padding) }), image: Object.assign(Object.assign({}, image), { border: boxRemsToPixels(image.border), borderRadius: remsToPixels(image.borderRadius), height: remsToPixels(image.height), margin: boxRemsToPixels(image.margin), padding: boxRemsToPixels(image.padding), width: remsToPixels(image.width) }), price: Object.assign(Object.assign({}, price), { fontSize: remsToPixels(price.fontSize), lineHeight: fontSizeToLineHeight(price.fontSize, lineHeight) }), text: Object.assign(Object.assign({}, text), { fontSize: remsToPixels(text.fontSize), lineHeight: fontSizeToLineHeight(text.fontSize, lineHeight) }), title: Object.assign(Object.assign({}, title), { fontSize: remsToPixels(title.fontSize), lineHeight: fontSizeToLineHeight(title.fontSize, lineHeight) }) });
};
const makeTags = (tags) => {
    return Object.assign(Object.assign({}, tags), { image: Object.assign(Object.assign({}, tags.image), { padding: remsToPixels(tags.container.padding), paddingMobile: remsToPixels(tags.container.paddingMobile), margin: remsToPixels(tags.container.margin), marginMobile: remsToPixels(tags.container.marginMobile) }), container: Object.assign(Object.assign({}, tags.container), { padding: remsToPixels(tags.container.padding), paddingMobile: remsToPixels(tags.container.paddingMobile), margin: remsToPixels(tags.container.margin), marginMobile: remsToPixels(tags.container.marginMobile) }), box: Object.assign(Object.assign({}, tags.box), { padding: remsToPixels(tags.box.padding), paddingMobile: remsToPixels(tags.box.paddingMobile), margin: remsToPixels(tags.box.margin), marginMobile: remsToPixels(tags.box.marginMobile) }), text: Object.assign(Object.assign({}, tags.text), { fontSize: remsToPixels(tags.text.fontSize), fontSizeMobile: remsToPixels(tags.text.fontSizeMobile) }) });
};
const makeLogo = (logo) => {
    return {
        marginTop: remsToPixels(logo.marginTop),
        marginTopMobile: remsToPixels(logo.marginTopMobile),
        width: remsToPixels(logo.width),
        widthMobile: remsToPixels(logo.widthMobile)
    };
};
export const makeBottomTabs = (bottomTabs) => {
    const fontSize = remsToPixels(bottomTabs.buttons.fontSize);
    return {
        box: Object.assign(Object.assign({}, bottomTabs.box), { borderRadius: remsToPixels(bottomTabs.box.borderRadius), borderWidth: remsToPixels(bottomTabs.box.borderWidth), gap: remsToPixels(bottomTabs.box.gap), padding: remsToPixels(bottomTabs.box.padding) }),
        buttons: Object.assign(Object.assign({}, bottomTabs.buttons), { fontSize: fontSize, letterSpacing: remsToPixels(bottomTabs.buttons.letterSpacing), lineHeight: makeLineHeight(`${bottomTabs.buttons.lineHeight}`, fontSize), padding: remsToPixels(bottomTabs.buttons.padding) }),
        icons: Object.assign(Object.assign({}, bottomTabs.icons), { padding: remsToPixels(bottomTabs.icons.padding) })
    };
};
export const decorateTheme = (theme) => {
    const logo = makeLogo(theme.logo);
    const logoFooter = makeLogo(theme.logoFooter);
    const fonts = makeFonts(theme.fonts, theme.lineHeight);
    const lineHeight = makeLineHeight(theme.lineHeight, fonts.sizes.main);
    const layout = objRemsToPixels(theme.layout);
    const buttons = makeButtons(theme.buttons);
    const border = makeBorder(theme.border);
    const inputs = makeInputs(theme.inputs);
    const counts = makeCounts(theme.counts);
    const cards = makeCards(theme.cards);
    const welcome = makeWelcome(theme.welcome);
    const item = makeItem(theme.item);
    const categories = makeCategories(theme.categories);
    const menuItems = makeMenuItems(theme.menuItems, theme.lineHeight);
    const modifiers = makeModifiers(theme.modifiers, theme.lineHeight);
    const tags = makeTags(theme.tags);
    const bottomTabs = makeBottomTabs(theme.bottomTabs);
    return Object.assign(Object.assign({}, theme), { logo,
        logoFooter, fonts: fonts, lineHeight, layout: layout, buttons: buttons, border, inputs: inputs, counts,
        cards, welcome: welcome, item: item, categories,
        menuItems,
        modifiers,
        tags,
        bottomTabs });
};
export const hexToRgbA = (hex, opacity) => {
    let c;
    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
        c = hex.substring(1).split('');
        if (c.length === 3) {
            c = [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c = '0x' + c.join('');
        return ('rgba(' +
            [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') +
            `,${opacity})`);
    }
    return null;
};