https://static.dafiti.com.br/vendor/dafiti/bootstrap/dist/componen…/js/toggle-switch-component.js

1class ToggleSwitchComponent extends HTMLElement {
2    constructor() {
3       super();
4        this.attachShadow({ mode: "open" });
5        // Load the template from the HTML file
6        this.shadowRoot.innerHTML = `
7            <style>
8                @import url("/vendor/dafiti/bootstrap/dist/components/toggle-switch/css/toggle-switch.css");
9                @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Roboto:wght@400;700&display=swap');
10            </style>
11            <label class="switch">
12                <input type="checkbox"></input>
13                <span class="slider round"></span>
14            </label>
15            <span id="message"></span>
16        `;
17
18        // Add change listener to input
19        this.shadowRoot.querySelector("input").addEventListener("change", () => {
20            const isChecked = this.checked;
21            const checkboxName = this.getAttribute("name");
22            const event = new CustomEvent("changeToggleSwitch", {
23                detail: { isChecked, checkboxName },
24            });
25
26            this.dispatchEvent(event);
27        });
28    }
29
30    connectedCallback() {
31        const span = this.shadowRoot.getElementById('message');
32        span.textContent = this.getAttribute('data-field');
33
34        if (this.hasAttribute('name')) {
35            const checkbox = this.shadowRoot.querySelector(`input[type="checkbox"]`);
36            checkbox.setAttribute('name', this.getAttribute('name'));
37        }
38
39        if (this.hasAttribute('data-label')) {
40            const span = this.shadowRoot.querySelector(`span#message`);
41            span.setAttribute('data-label', this.getAttribute('data-label'));
42        }
43    }
44
45    get checked() {
46        return this.shadowRoot.querySelector("input").checked;
47    }
48
49    set checked(value) {
50        this.shadowRoot.querySelector("input").checked = value;
51    }
52
53    static get observedAttributes() {
54        return ['data-label'];
55    }
56
57    attributeChangedCallback(name, oldValue, newValue) {
58        if (name === 'data-label') {
59            this.updateDataLabel(newValue);
60        }
61    }
62
63    updateDataLabel(price) {
64        const label = this.shadowRoot.querySelector('span#message');
65        if (label !== null && price != "") {
66            label.setAttribute('data-label', price);
67        }
68      }
69  }
70
71  customElements.get('toggle-switch-component') || customElements.define('toggle-switch-component', ToggleSwitchComponent);