emoji-picker-element em português

emoji-picker-element.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emoji</title>

    <script type="module">
        import pt_BR from 'https://cdn.jsdelivr.net/npm/emoji-picker-element@1.21.3/i18n/pt_BR.js';
        window.addEventListener('DOMContentLoaded', () => {
            const emojiPicker = document.querySelector('emoji-picker');
            emojiPicker.i18n = pt_BR;
        });
    </script>

    <style>

    </style>
</head>

<body style="margin-top: 150px;">

    <emoji-picker locale="pt_BR"
        data-source="https://cdn.jsdelivr.net/npm/emoji-picker-element-data@1.6.1/pt/cldr/data.json" id="emojiAbrir"
        style="display: none;">
    </emoji-picker>

    <button class="teste" id="open-emoji-picker"> Abrir </button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>

    <script>
        document.querySelector('emoji-picker')
            .addEventListener('emoji-click', function (event) {
                console.log(event);
            });

        document.getElementById('open-emoji-picker').addEventListener('click', function () {
            const emojiPickerContainer = document.getElementById('emojiAbrir');
            emojiPickerContainer.style.display = (emojiPickerContainer.style.display === 'none') ? 'block' :
                'none';
        });
    </script>

</body>

</html>