fm-lp-factory/factory/templates/template1/index.js

package created to build web ui components for FidelizarMais LP services

import awards from "./awards/awards.js";
import balance from "./balance/balance.js";
import basic from "./basic/basic.js";
import carousel from "./carousel/carousel.js";
import extract from "./extract/extract.js";
import indication from "./indication/indication.js";
import nps from "./nps/nps.js";
import video from "./video/video.js";
import forms from "./forms/forms.js";

export default (data) => {
    createFmTemplate1Css(data.configuration);
    data.components.forEach(component => {
        switch (component.category) {
            case "balance":
                balance(component);
                break;
            case "basic":
                basic(component);
                break;
            case "indication":
                indication(component);
                break;
            case "carousel":
                carousel(component);
                break;
            case "awards":
                awards(component);
                break;
            case "nps":
                nps(component);
                break;
            case "extract":
                extract(component);
                break;
            case "video":
                video(component);
                break;
            case "forms":
                forms(component);
                break;
        }
    });
}

const createFmTemplate1Css = (configuration) => {
    const colors = configuration.colors;
    const css = /*css*/ `
    :root {
        --fm-primary-color: ${colors.primary};
        --fm-primary-light-color: ${colors.primaryLight};
        --fm-secondary-color: ${colors.secondary};
        --fm-secondary-light-color: ${colors.secondaryLight};
        --fm-primary-button-color: ${colors.primaryButton};
        --fm-primary-button-text-color: ${colors.primaryButtonTextColor};
        --fm-secondary-button-color: ${colors.secondaryButton};
        --fm-secondary-button-text-color: ${colors.secondaryButtonTextColor};
        --fm-card-primary-background: ${colors.cardPrimaryBackground};
        --fm-card-primary-text-color: ${colors.cardPrimaryTextColor};
        --fm-card-secondary-background: ${colors.cardSecondaryBackground};
        --fm-card-secondary-text-color: ${colors.cardSecondaryTextColor};
        --fm-base-border-radius: ${colors.baseBorderRadius};

    }

    .fm-input-floating {
        position: relative;
        width: 100%;
        display: flex;
        isolation: isolate;
        
    }
    .fm-section-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 80%;
        margin: 20px auto auto auto;
    }

    @media screen and (max-width: 768px) {
        .fm-section-container {
            width: 90%;
            margin: 30px auto auto auto;
        }
    }
    
    .fm-flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        width: 100%;
    }
    
    .section-secondary {
        background-color: #f2f2f2;
        border-radius: var(--fm-base-border-radius);
        padding: 20px;
    }
    
    .fm-card {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        padding: 20px;
    }
    .fm-lp-input-container{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        position: relative;
    }
    .fm-lp-input-container .fm-input-text {
        width: 100%;
        border: 1px solid #ccc;
        height: 40px;
        padding-left: 10px;
        background: #f4f4f4;
    }
    .fm-lp-input-container .fm-input-text::placeholder {
        color: #ccc;
    }
    
    .fm-lp-input-container .fm-button-container,
    .fm-lp-input-container .fm-input-text{
        border-radius: var(--fm-base-border-radius);
    }

    .fm-lp-input-container .fm-button-container {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: absolute;
        right: 0;
        width: 25%;
        background: var(--fm-primary-button-color);
        color: var(--fm-primary-button-text-color);
        height: 100%;
        min-width: fit-content;
    }
    .fm-alert.active {
        background: #f4f4f4;
        padding: 10px 15px;
        margin: 10px auto;
        border-radius: var(--fm-base-border-radius);
        text-align: center;
    }
    .fm-alert.active.error {
        color: #f50000;
    }
    .fm-alert.active.success {
        color: #199e00;
    }
    .fm-card {
        padding: 1rem;
        background-color: var(--fm-secondary-color);
    }

    .fm-card-dark, .fm-card-light{
        padding: 2rem;
        margin: 0.5rem;
        border-radius: var(--fm-base-border-radius);
        font-weight: 700;
    }

    fm-h1{
        font-size: 3.5rem;
    }
    .fm-h2{
        font-size: 3rem;
    }
    .fm-h3{
        font-size: 2rem;
    }
    .fm-h4{
        font-size: 1.5rem;
    }

    .fm-rounded-icon, .fm-flat-icon {
        display: flex;
        padding: 10px;
    }

    .fm-rounded-icon {
        border-radius: 50%;
        background: var(--fm-secondary-light-color);
    }
    `;
    const style = document.createElement('style');
    style.innerHTML = css;
    style.id = "fm-template1-styles";
    document.head.appendChild(style);
}

export const updateFmTemplateCss = (css) => {
    const style = document.querySelector("#fm-template1-styles");
    style.innerHTML += css;
}