fm-lp-factory/factory/templates/template1/nps/npsCardListFromHtml.js

package created to build web ui components for FidelizarMais LP services

import { updateFmTemplateCss } from "../index.js";
import { basicArrowSpinningLoading } from "../../../assets/components/loaders.js";
import flat from "../../../assets/components/icons/flat.js";

let sectionElement = null;
let allReviews = [];
let offset = 0;
const LIMIT = 5;

export default async (component) => {
    const section = document.createElement("section");
    section.classList.add("fm-nps-card-list-basic", "fm-section-container");

    css();

    section.innerHTML = template
        .replace("%title%", component.data.title)
        .replace("%subtitle%", component.data.subtitle)
        .replace("%iframeUrl%", component.data.store);

    document.querySelector("#fm-landing-page-content").appendChild(section);
};



const template = `
<div class="fm-nps-card-list-basic-container">
   <div class="fm-nps-card-list-basic-container-inner">
        <div class="fm-nps-card-list-basic-container-inner-header">
            <span class="fm-nps-card-list-basic-container-inner-subtitle">%title%</span>
            <span class="fm-nps-card-list-basic-container-inner-title">%subtitle%</span>
        </div>
        <iframe class="fm-nps-iframe" src="%iframeUrl%" loading="lazy" frameborder="0"></iframe>
   </div>
</div>
`;


const css = () => {
    updateFmTemplateCss(`
    .fm-nps-card-list-basic { width: 90%; margin: 0 auto; }
    .fm-nps-card-list-basic-container {
        background: var(--fm-primary-light-color);
        border-radius: var(--fm-base-border-radius);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .fm-nps-card-list-basic-container-inner {
        padding: 20px;
        margin: 40px;
        width: 100%;
        max-width: 1000px;
        background: var(--fm-secondary-light-color);
        border-radius: var(--fm-base-border-radius);
    }
    .fm-nps-card-list-basic-container-inner-header {
        text-align: center;
        margin-bottom: 20px;
    }
    .fm-nps-card-list-basic-container-inner-subtitle {
        font-size: 1.1rem;
        color: var(--fm-secondary-color);
    }
    .fm-nps-card-list-basic-container-inner-title {
        font-size: 32px;
        font-weight: bold;
    }
    .fm-nps-iframe {
        width: 100%;
        min-height: 600px;
        border: none;
        border-radius: var(--fm-base-border-radius);
        overflow: hidden;
    }
    @media (max-width: 768px) {
        .fm-nps-iframe {
            min-height: 800px;
        }
    }
    `);
};