{
    /**
     * @param {HTMLElement} host
     */
    const init = async (host, _) => {
        await GOVBRPlataformaJS.importarModulo('', 'custom-inputs/lista', '', 'GOVBRInputSelect');
        await GOVBRPlataformaJS.importarModulo('', 'custom-inputs/suggest', '', 'GOVBRInputSuggest');
        await GOVBRPlataformaJS.importarModulo('', 'demos/custom-inputs', null, 'fa');
        host.innerHTML = `<form onsubmit="event.preventDefault();"<div>
            <label for="simples">Lista - Simples</label>
            <govbr-plataforma-input-select
                data-id="simples"
                data-valor="1"
            >
                <govbr-plataforma-input-select-item data-valor="">Selecione...</govbr-plataforma-input-select-item>
                <govbr-plataforma-input-select-item data-valor="1">Primeiro</govbr-plataforma-input-select-item>
                <govbr-plataforma-input-select-item data-valor="2">Segundo</govbr-plataforma-input-select-item>
                <govbr-plataforma-input-select-item data-valor="3">Terceiro</govbr-plataforma-input-select-item>
                <govbr-plataforma-input-select-item data-valor="4">Quarto</govbr-plataforma-input-select-item>
            </govbr-plataforma-input-select>
        </div>
        <div>
            <label for="simples_inline">Lista - Simples Inline</label>
            <govbr-plataforma-input-select
                data-id="simples_inline"
                data-inline
                data-valor="1"
            >
                <govbr-plataforma-input-select-item data-valor="">Selecione...</govbr-plataforma-input-select-item>
                <govbr-plataforma-input-select-item data-valor="1">Primeiro</govbr-plataforma-input-select-item>
                <govbr-plataforma-input-select-item data-valor="2">Segundo</govbr-plataforma-input-select-item>
                <govbr-plataforma-input-select-item data-valor="3">Terceiro</govbr-plataforma-input-select-item>
                <govbr-plataforma-input-select-item data-valor="4">Quarto</govbr-plataforma-input-select-item>
            </govbr-plataforma-input-select>
        </div>
        <div>
            <label for="multiplo">Lista - Múltiplo</label>
            <govbr-plataforma-input-select
                data-id="multiplo"
                data-multiselecao
                data-valor="[&quot;1&quot;,&quot;2&quot;]"
            >
                <govbr-plataforma-input-select-item data-valor="1">Primeiro</govbr-plataforma-input-select-item>
                <govbr-plataforma-input-select-item data-valor="2">Segundo</govbr-plataforma-input-select-item>
                <govbr-plataforma-input-select-item data-valor="3">Terceiro</govbr-plataforma-input-select-item>
                <govbr-plataforma-input-select-item data-valor="4">Quarto</govbr-plataforma-input-select-item>
            </govbr-plataforma-input-select>
        </div>
        <div>
            <label for="multiplo_inline">Lista - Múltiplo Inline</label>
            <govbr-plataforma-input-select
                data-id="multiplo_inline"
                data-multiselecao
                data-inline
                data-valor="[&quot;1&quot;,&quot;2&quot;]"
            >
                <govbr-plataforma-input-select-item data-valor="1">Primeiro</govbr-plataforma-input-select-item>
                <govbr-plataforma-input-select-item data-valor="2">Segundo</govbr-plataforma-input-select-item>
                <govbr-plataforma-input-select-item data-valor="3">Terceiro</govbr-plataforma-input-select-item>
                <govbr-plataforma-input-select-item data-valor="4">Quarto</govbr-plataforma-input-select-item>
            </govbr-plataforma-input-select>
        </div>
        <div>
            <label for="suggest">Suggest</label>
            <govbr-plataforma-input-suggest
                data-force-valor
                data-min-length="1"
                data-dados="${GOVBRPlataformaJS.ComponentUtils.escapaValorAtributoHTML(
                    JSON.stringify(
                        IconesFontAwesome.map((icone) => {
                            return {
                                valor: icone.nome,
                                camposAdicionais: { titulo: icone.titulo },
                                icone: icone.nome,
                                termos: [...[icone.nome, icone.titulo], ...icone.termosPesquisa],
                            };
                        })
                    )
                )}"
            >
                <input
                    id="suggest"
                    name="suggest"
                    type="text"
                    style="width: 100%"
                ></input>
            </govbr-input-suggest>
        </div>`;
    };
    GOVBRDemos.addInitComponente('custom-inputs', init);
}
