https://static.dafiti.com.br/vendor/dafiti/bootstrap/dist/components/checkbox/js/checkbox-component.js

1class CheckboxComponent extends HTMLElement {
2    constructor() {
3        super();
4        this.attachShadow({ mode: "open" });
5        // Loads the template from the HTML file
6        this.shadowRoot.innerHTML = `
7            <style>
8                @import url("/vendor/dafiti/bootstrap/dist/components/checkbox/css/checkbox.css");
9                @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Roboto:wght@400;700&display=swap');
10            </style>
11            <label>
12                <input type="checkbox">
13                <span><slot></slot></span>
14            </label>
15        `;
16
17        // Add change listener to input
18        this.shadowRoot.querySelector("input").addEventListener("change", () => {
19            const isChecked = this.checked;
20            const checkboxName = this.getAttribute("name");
21            const value = this.getAttribute("value");
22            const event = new CustomEvent("checkboxChange", {
23                detail: { isChecked, checkboxName, value },
24            });
25
26            this.dispatchEvent(event);
27        });
28
29        if (this.hasAttribute('action')) {
30            this.onclick = () => eval(this.getAttribute('action'));
31        }
32
33        if (this.getAttribute('checked')) {
34            this.checked = true;
35        }
36    }
37
38    // Getter e setter para o atributo 'checked'
39    get checked() {
40        return this.shadowRoot.querySelector("input").checked;
41    }
42
43    set checked(value) {
44        this.shadowRoot.querySelector("input").checked = value;
45    }
46  }
47
48  customElements.get('checkbox-component') || customElements.define('checkbox-component', CheckboxComponent);