import "../chunks/chunk.QU3DSPNU.js";
import { classMap } from "lit/directives/class-map.js";
import { when } from "lit/directives/when.js";
import { html } from "../scoping.js";
const checkboxToggle = (props) => template({ ...props, type: "checkbox" });
const radioToggle = (props) => template({ ...props, type: "radio" });
const template = (props) => {
  const { type, checked, indeterminate, disabled, invalid } = props;
  const modifiers = {
    "rbcb--checkbox": type === "checkbox",
    "rbcb--radio": type === "radio",
    "--checked": checked,
    "--indeterminate": indeterminate,
    "--disabled": disabled,
    "--invalid": invalid
  };
  return html`
    <div class="rbcb ${classMap(modifiers)}">
      <div class="rbcb__perimeter"></div>
      <div class="rbcb__toggle">
        ${when(
    type === "checkbox",
    () => html`
            ${when(
      indeterminate,
      () => html`<gds-icon-minus-small
                  class="rbcb__icon"
                  stroke="4"
                ></gds-icon-minus-small>`,
      () => when(
        checked,
        () => html`<gds-icon-checkmark
                      class="rbcb__icon"
                      stroke="4"
                    ></gds-icon-checkmark>`
      )
    )}
          `
  )}
      </div>
    </div>
  `;
};
export {
  checkboxToggle,
  radioToggle
};
