import { unsafeCSS, LitElement, html } from "lit";
import { property, query } from "lit/decorators.js";
import "../../icons/icon-check-mixed.js";
import "../../icons/icon-check-google.js";
import componentStyle from "./checkbox.css.js";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { customElement } from "../../decorator.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
var CheckboxStatus = /* @__PURE__ */ ((CheckboxStatus2) => {
  CheckboxStatus2["unchecked"] = "unchecked";
  CheckboxStatus2["checked"] = "checked";
  CheckboxStatus2["mixed"] = "mixed";
  return CheckboxStatus2;
})(CheckboxStatus || {});
var CheckboxState = /* @__PURE__ */ ((CheckboxState2) => {
  CheckboxState2["enabled"] = "enabled";
  CheckboxState2["loading"] = "loading";
  return CheckboxState2;
})(CheckboxState || {});
let ObcCheckbox = class extends LitElement {
  constructor() {
    super(...arguments);
    this.status = "unchecked";
    this.state = "enabled";
    this.disabled = false;
    this.hasHoverEffects = true;
  }
  get _isInteractionLocked() {
    return this.disabled || this.state === "loading";
  }
  updated(changed) {
    if (changed.has("disabled")) {
      this.dispatchEvent(
        new CustomEvent("disabled", {
          detail: {
            status: this.status,
            disabled: this.disabled
          }
        })
      );
    }
  }
  toggleStatus() {
    if (this._isInteractionLocked) return;
    if (this.status === "checked") {
      this.status = "unchecked";
    } else {
      this.status = "checked";
    }
    this.dispatchEvent(
      new CustomEvent("change", {
        detail: {
          status: this.status,
          disabled: this.disabled
        }
      })
    );
  }
  handleKeydown(e) {
    if (e.key === " " || e.key === "Space" || e.key === "Enter") {
      e.preventDefault();
      this.toggleStatus();
    }
  }
  get _computedAriaChecked() {
    switch (this.status) {
      case "checked":
        return "true";
      case "mixed":
        return "mixed";
      case "unchecked":
      default:
        return "false";
    }
  }
  focus(options) {
    this.checkboxControl?.focus(options);
  }
  syncFocusVisibleAttribute() {
    const isFocusVisible = this.checkboxControl?.matches(":focus-visible");
    this.toggleAttribute("data-focus-visible", Boolean(isFocusVisible));
  }
  handleControlFocus() {
    queueMicrotask(() => this.syncFocusVisibleAttribute());
  }
  handleControlBlur() {
    this.removeAttribute("data-focus-visible");
  }
  render() {
    const hostAriaLabel = this.getAttribute("aria-label") ?? void 0;
    const hostAriaLabelledBy = this.getAttribute("aria-labelledby") ?? void 0;
    const hostAriaDescribedBy = this.getAttribute("aria-describedby") ?? void 0;
    const forwardedAriaLabel = hostAriaLabelledBy ? void 0 : hostAriaLabel ?? "Checkbox item";
    return html`
      <div
        class=${classMap({
      "visually-hidden": true,
      [`status-${this.status}`]: true,
      [`state-${this.state}`]: true,
      disabled: this.disabled,
      "no-hover-effects": !this.hasHoverEffects
    })}
        role="checkbox"
        aria-checked=${this._computedAriaChecked}
        aria-label=${ifDefined(forwardedAriaLabel)}
        aria-labelledby=${ifDefined(hostAriaLabelledBy)}
        aria-describedby=${ifDefined(hostAriaDescribedBy)}
        aria-disabled=${this._isInteractionLocked ? "true" : "false"}
        aria-busy=${this.state === "loading" ? "true" : "false"}
        tabindex=${this._isInteractionLocked ? "-1" : "0"}
        @click=${this.toggleStatus}
        @keydown=${this.handleKeydown}
        @focus=${this.handleControlFocus}
        @blur=${this.handleControlBlur}
      >
        <div class="checkbox-container">
          <div class="checkbox-box">
            ${this.state === "loading" ? html`
                  <svg
                    class="checkbox-loading-spinner type-indeterminate size-small style-regular"
                    viewBox="0 0 16 16"
                    aria-hidden="true"
                  >
                    <circle cx="8" cy="8" r="6"></circle>
                  </svg>
                ` : this.status === "checked" ? html`<obi-check-google
                    class="checkbox-icon"
                  ></obi-check-google>` : this.status === "mixed" ? html`<obi-check-mixed
                      class="checkbox-icon"
                    ></obi-check-mixed>` : html`<span class="checkbox-icon"></span>`}
          </div>
        </div>
      </div>
    `;
  }
};
ObcCheckbox.styles = [unsafeCSS(componentStyle)];
__decorateClass([
  property({ type: String })
], ObcCheckbox.prototype, "status", 2);
__decorateClass([
  property({ type: String })
], ObcCheckbox.prototype, "state", 2);
__decorateClass([
  property({ type: Boolean })
], ObcCheckbox.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcCheckbox.prototype, "hasHoverEffects", 2);
__decorateClass([
  query(".visually-hidden")
], ObcCheckbox.prototype, "checkboxControl", 2);
ObcCheckbox = __decorateClass([
  customElement("obc-checkbox")
], ObcCheckbox);
export {
  CheckboxState,
  CheckboxStatus,
  ObcCheckbox
};
//# sourceMappingURL=checkbox.js.map
