import {
  __decorateClass,
  __privateAdd,
  __privateGet,
  __privateMethod
} from "../../../chunks/chunk.QU3DSPNU.js";
var _syncCheckboxes, _CheckboxGroup_instances, renderCheckboxGroupContents_fn, renderFieldControlHeader_fn, renderCheckboxes_fn, handleCheckboxChange_fn, computeValue_fn, dispatchInputEvent_fn, renderFieldControlFooter_fn;
import { localized } from "@lit/localize";
import { property, query } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { GdsFormControlFooter } from "../../../primitives/form-control-footer/form-control-footer.component.js";
import { GdsFormControlHeader } from "../../../primitives/form-control-header/form-control-header.component.js";
import { gdsCustomElement, html } from "../../../scoping.js";
import { observeLightDOM } from "../../../utils/decorators/index.js";
import { watch } from "../../../utils/decorators/watch.js";
import {
  withLayoutChildProps,
  withMarginProps,
  withSizeXProps
} from "../../../utils/mixins/declarative-layout-mixins.js";
import { GdsFormControlElement } from "../../form/form-control.js";
import { styles } from "./checkbox-group.styles.js";
let CheckboxGroup = class extends GdsFormControlElement {
  constructor() {
    super(...arguments);
    __privateAdd(this, _CheckboxGroup_instances);
    this.size = "large";
    this.direction = "column";
    this.hideLabel = false;
    this.supportingText = "";
    this.showExtendedSupportingText = false;
    __privateAdd(this, _syncCheckboxes, () => {
      this.checkboxes.forEach((checkbox) => {
        checkbox.invalid = this.invalid;
        checkbox.errorMessage = this.errorMessage;
      });
    });
  }
  get value() {
    return this._internalValue || [];
  }
  set value(value) {
    this._internalValue = value;
  }
  /**
   * Returns an array of `<gds-checkbox>` elements in the checkbox group.
   *
   * @readonly
   */
  get checkboxes() {
    return Array.from(
      this.querySelectorAll("[gds-element=gds-checkbox]")
    );
  }
  _getValidityAnchor() {
    return this._elCheckboxGroup;
  }
  _handleValueChange() {
    this.checkboxes.forEach((checkbox) => {
      checkbox.checked = this.value.includes(checkbox.value) || false;
    });
  }
  _handleGroupInvalidChange() {
    __privateGet(this, _syncCheckboxes).call(this);
  }
  focus() {
    this.checkboxes[0]?.focus();
  }
  connectedCallback() {
    super.connectedCallback();
    this.addEventListener("gds-validity-state", __privateGet(this, _syncCheckboxes));
  }
  render() {
    const classes = {
      "checkbox-group": true,
      "direction-row": this.direction === "row",
      "direction-column": this.direction === "column"
    };
    return html`<div
      role="group"
      id="checkboxgroup"
      class=${classMap(classes)}
      aria-labelledby="group-label"
      aria-describedby="supporting-text extended-supporting-text footer"
      aria-invalid=${this.invalid}
    >
      ${__privateMethod(this, _CheckboxGroup_instances, renderCheckboxGroupContents_fn).call(this)}
    </div>`;
  }
  _syncOnDOMChange() {
    __privateGet(this, _syncCheckboxes).call(this);
    __privateMethod(this, _CheckboxGroup_instances, computeValue_fn).call(this);
  }
};
_syncCheckboxes = new WeakMap();
_CheckboxGroup_instances = new WeakSet();
renderCheckboxGroupContents_fn = function() {
  const elements = [
    __privateMethod(this, _CheckboxGroup_instances, renderFieldControlHeader_fn).call(this),
    __privateMethod(this, _CheckboxGroup_instances, renderCheckboxes_fn).call(this),
    __privateMethod(this, _CheckboxGroup_instances, renderFieldControlFooter_fn).call(this)
  ];
  return elements.map((element) => html`${element}`);
};
renderFieldControlHeader_fn = function() {
  if (this.label) {
    return html`<gds-form-control-header
        class=${classMap({
      [`size-${this.size}`]: true,
      "visually-hidden": this.hideLabel
    })}
      >
        <label id="group-label" slot="label">${this.label}</label>
        <span slot="supporting-text" id="supporting-text">
          ${this.supportingText}
        </span>
        <slot
          id="extended-supporting-text"
          name="extended-supporting-text"
          slot="extended-supporting-text"
        ></slot>
      </gds-form-control-header>`;
  }
};
renderCheckboxes_fn = function() {
  return html`<div class="content">
      <slot @input=${__privateMethod(this, _CheckboxGroup_instances, handleCheckboxChange_fn)}></slot>
    </div>`;
};
handleCheckboxChange_fn = function(e) {
  e && e.stopPropagation();
  __privateMethod(this, _CheckboxGroup_instances, computeValue_fn).call(this);
  __privateMethod(this, _CheckboxGroup_instances, dispatchInputEvent_fn).call(this);
};
computeValue_fn = function() {
  const newValue = this.checkboxes.filter((checkbox) => checkbox.checked).map((checkbox) => checkbox.value);
  if (JSON.stringify(newValue) !== JSON.stringify(this.value)) {
    this.value = newValue;
  }
};
dispatchInputEvent_fn = function() {
  this.updateComplete.then(
    () => this.dispatchStandardEvent("input", {
      bubbles: true,
      composed: true
    })
  );
};
renderFieldControlFooter_fn = function() {
  return html`<gds-form-control-footer
      id="footer"
      class="size-${this.size}"
      .errorMessage=${this.invalid ? this.errorMessage : void 0}
    >
    </gds-form-control-footer>`;
};
CheckboxGroup.styles = [styles];
__decorateClass([
  property()
], CheckboxGroup.prototype, "size", 2);
__decorateClass([
  property()
], CheckboxGroup.prototype, "direction", 2);
__decorateClass([
  property({ type: Boolean, attribute: "hide-label" })
], CheckboxGroup.prototype, "hideLabel", 2);
__decorateClass([
  property({ attribute: "supporting-text" })
], CheckboxGroup.prototype, "supportingText", 2);
__decorateClass([
  property({
    attribute: "show-extended-supporting-text",
    type: Boolean,
    reflect: true
  })
], CheckboxGroup.prototype, "showExtendedSupportingText", 2);
__decorateClass([
  property({ type: Array })
], CheckboxGroup.prototype, "value", 1);
__decorateClass([
  query("#checkboxgroup")
], CheckboxGroup.prototype, "_elCheckboxGroup", 2);
__decorateClass([
  watch("value", { waitUntilFirstUpdate: true })
], CheckboxGroup.prototype, "_handleValueChange", 1);
__decorateClass([
  watch("invalid"),
  watch("errorMessage")
], CheckboxGroup.prototype, "_handleGroupInvalidChange", 1);
__decorateClass([
  observeLightDOM({
    attributes: true,
    childList: true,
    subtree: true,
    characterData: true
  })
], CheckboxGroup.prototype, "_syncOnDOMChange", 1);
CheckboxGroup = __decorateClass([
  localized()
], CheckboxGroup);
let GdsCheckboxGroup = class extends withLayoutChildProps(
  withMarginProps(withSizeXProps(CheckboxGroup))
) {
};
GdsCheckboxGroup = __decorateClass([
  gdsCustomElement("gds-checkbox-group", {
    dependsOn: [GdsFormControlHeader, GdsFormControlFooter]
  })
], GdsCheckboxGroup);
export {
  GdsCheckboxGroup
};
