import {
  __decorateClass,
  __privateAdd,
  __privateMethod
} from "../../chunks/chunk.QU3DSPNU.js";
var _GdsCheckbox_instances, toggleChecked_fn, dispatchChangeEvents_fn;
import { property, query } from "lit/decorators.js";
import { when } from "lit/directives/when.js";
import { GdsToggleControlBase } from "../../primitives/toggle-controls-base/toggle-control-base.component.js";
import { gdsCustomElement, html } from "../../scoping.js";
import rbcbToggleStyles from "../../shared-styles/rbcb-toggle.style.js";
import { checkboxToggle } from "../../shared-styles/rbcb-toggle.template.js";
import { tokens } from "../../tokens.style.js";
import { watch } from "../../utils/decorators/watch.js";
import { GdsFormControlElement } from "../form/form-control.js";
import { IconCheckmark } from "../icon/icons/checkmark.component.js";
import { IconMinusSmall } from "../icon/icons/minus-small.component.js";
import CheckboxStyles from "./checkbox.styles.js";
let GdsCheckbox = class extends GdsFormControlElement {
  constructor() {
    super(...arguments);
    __privateAdd(this, _GdsCheckbox_instances);
    this.label = "";
    this.supportingText = "";
    this.checked = false;
    this.indeterminate = false;
    this.disabled = false;
  }
  get value() {
    return this._internalValue || "";
  }
  set value(value) {
    this._internalValue = value;
  }
  _handleIndeterminateChange() {
    if (this.indeterminate) {
      this.checked = false;
    }
  }
  focus(options) {
    this._elCheckbox.focus(options);
  }
  render() {
    return html`
        <input
          type="checkbox"
          class="visually-hidden-checkbox"
          ?checked=${this.checked}
          ?disabled=${this.disabled}
          ?indeterminate=${this.indeterminate}
          aria-invalid=${this.invalid}
          aria-describedby="message supporting-text"
          id="checkbox-input"
          @change=${() => {
      this.checked = this._elCheckbox.checked;
      __privateMethod(this, _GdsCheckbox_instances, dispatchChangeEvents_fn).call(this);
    }}
        />
        ${when(
      this.errorMessage,
      () => html`<span id="message">${this.errorMessage}</span>`
    )}
        <gds-toggle-control-base type="checkbox" @click=${__privateMethod(this, _GdsCheckbox_instances, toggleChecked_fn)}>
          <label for="checkbox-input" slot="label"> ${this.label} </label>
          <span
            slot="supporting-text"
            class="supporting-text"
            id="supporting-text"
          >
            ${this.supportingText}
          </span>
          ${checkboxToggle({
      checked: this.checked,
      indeterminate: this.indeterminate,
      disabled: this.disabled,
      invalid: this.invalid
    })}
        </gds-toggle-control-base>
      </div>
    `;
  }
  _getValidityAnchor() {
    return this._elCheckbox;
  }
  formResetCallback() {
    this.checked = false;
  }
};
_GdsCheckbox_instances = new WeakSet();
toggleChecked_fn = function(e) {
  if (this.disabled || e.target instanceof HTMLLabelElement) return;
  if (this.indeterminate) {
    this.indeterminate = false;
  } else {
    this.checked = !this.checked;
  }
  __privateMethod(this, _GdsCheckbox_instances, dispatchChangeEvents_fn).call(this);
};
dispatchChangeEvents_fn = function() {
  this.dispatchStandardEvent("change", {
    bubbles: true,
    composed: true
  });
  this.dispatchStandardEvent("input", {
    bubbles: true,
    composed: true
  });
};
GdsCheckbox.styles = [tokens, rbcbToggleStyles, CheckboxStyles];
__decorateClass([
  property()
], GdsCheckbox.prototype, "label", 2);
__decorateClass([
  property({ attribute: "supporting-text" })
], GdsCheckbox.prototype, "supportingText", 2);
__decorateClass([
  property({ type: Boolean })
], GdsCheckbox.prototype, "checked", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], GdsCheckbox.prototype, "indeterminate", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], GdsCheckbox.prototype, "disabled", 2);
__decorateClass([
  query('input[type="checkbox"]')
], GdsCheckbox.prototype, "_elCheckbox", 2);
__decorateClass([
  watch("indeterminate")
], GdsCheckbox.prototype, "_handleIndeterminateChange", 1);
GdsCheckbox = __decorateClass([
  gdsCustomElement("gds-checkbox", {
    dependsOn: [GdsToggleControlBase, IconCheckmark, IconMinusSmall]
  })
], GdsCheckbox);
export {
  GdsCheckbox
};
