class CheckboxElement extends HTMLElement {
  constructor() {
    super();
  }

  async connectedCallback() {
    const id = this.getAttribute("data-id");
    const label = this.getAttribute("data-label") || "";
    const description = this.getAttribute("data-description") || "";
    const value = this.getAttribute("data-value") || "";

    const isRequired =
      (this.getAttribute("data-isrequired") || "true") == "true";

    const input = document.createElement("div");
    input.innerHTML = /*html*/ `
        <div class="_input_holder checkbox__container">
          <input type="checkbox" value="${value}" class="__input __checkbox" id="${id}"/>
          <div class="checkbox__text">
            <label class="_input_label ${
              isRequired ? "_required_label" : ""
            }">${label}</label>
            <div class="_input_description">${description}</div>
          </div>

        </div>
      `;

    this.appendChild(input);
  }
}

window.customElements.define("checkbox-element", CheckboxElement);