import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-442cf464.js';
import { f as findRelevantOptions } from './mutation-oberserver-ac258d15.js';

const checkboxGroupCss = "lu-checkbox-group{display:flex;flex-flow:column}lu-checkbox-group.direction-across{margin:0 5px 0 0;flex-flow:row}";

const CheckboxGroup = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.luBlur = createEvent(this, "luBlur", 7);
    this.luChange = createEvent(this, "luChange", 7);
    this.inputId = `lu-cg-${checkboxGroupIds++}`;
    /**
     * This is used when the parent form group receives the update event to tell the parent if it should validate or not.
     */
    this.isResetting = false;
    this.componentLoaded = false;
    /**
     * Added to the arial labelled on the native input
     */
    this.ariaLabeledByAddition = '';
    /**
     * Direction of elements
     */
    this.direction = 'down';
    /**
     * id set dynamically
     */
    this.useId = this.inputId + '-wrapper';
    /**
     * The name of the control, which is submitted with the form data.
     */
    this.name = this.inputId;
    /**
     * Tells if a at least one checkbox is required to be checked
     */
    this.required = false;
    /**
     * Used to add is-valid attribute signifying validity
     */
    this.valid = false;
    /**
     * Used to add is-invalid attribute signifying invalidity
     */
    this.invalid = false;
    /**
     * @internal Set by for group component so this component knows if it can dynamically set the label
     */
    this.hasFormGroup = false;
    this.mutationCallback = (mutationList, _observer) => {
      mutationList.forEach((record) => {
        if (record.type === 'childList') {
          for (let i = 0; i < record.addedNodes.length; i++) {
            const relevantOptions = findRelevantOptions(record.addedNodes[i], 'lu-checkbox');
            if (relevantOptions)
              relevantOptions.forEach(this.handleNewCheckbox);
          }
          for (let i = 0; i < record.removedNodes.length; i++) {
            const relevantOptions = findRelevantOptions(record.removedNodes[i], 'lu-checkbox');
            if (relevantOptions)
              relevantOptions.forEach(this.checkboxRemoved);
          }
        }
        if (record.type === 'attributes') {
          if (record.attributeName.toLowerCase() === 'data-is-checked') {
            this.valueChanged();
          }
          if (record.attributeName.toLowerCase() === 'has-focus') {
            let allBlurred = true;
            this.getCheckboxes().forEach(checkbox => {
              const focused = checkbox.getAttribute('has-focus');
              if (focused || focused === '') {
                allBlurred = false;
              }
            });
            if (allBlurred) {
              this.luBlur.emit();
            }
          }
        }
      });
    };
    this.handleNewCheckbox = (checkbox) => {
      checkbox.name = this.name;
      checkbox.labeledById = this.inputId;
      this.value = this.getValues(this.getCheckboxes());
    };
    this.checkboxRemoved = (_checkbox) => {
      this.valueChanged();
    };
    this.getCheckboxes = () => {
      return Array.from(this.el.querySelectorAll('lu-checkbox'));
    };
    this.valueChanged = () => {
      this.value = this.getValues(this.getCheckboxes());
      this.luChange.emit({ value: this.value, isResetting: this.isResetting });
    };
  }
  connectedCallback() {
    this.value = this.getValues(this.getCheckboxes());
    const el = this.el;
    this.mutationO = new MutationObserver(this.mutationCallback);
    this.mutationO.observe(el, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ['data-is-checked', 'has-focus']
    });
  }
  disconnectedCallback() {
    this.mutationO.disconnect();
    this.mutationO = undefined;
  }
  /**
   * this gives us a handle to set focus on the element
   */
  async setFocus() {
    if (this.el) {
      const checkboxList = this.el.querySelectorAll('lu-checkbox');
      if (checkboxList && checkboxList[0]) {
        checkboxList[0].focus();
      }
    }
  }
  /**
   * this gets the values
   */
  getValues(checkboxes) {
    return checkboxes.map((checkbox) => {
      return { checked: checkbox.checked, value: checkbox.value, name: checkbox.name };
    });
  }
  /**
   * this is used by the form validation/ form group to reset Value without initiating a validity check
   * @param update
   */
  async updateValue(update) {
    this.isResetting = true;
    update.forEach((reqUpdate) => {
      const foundCheckbox = this.getCheckboxes().filter((checkbox) => {
        return checkbox.name === reqUpdate.name;
      })[0];
      if (foundCheckbox) {
        foundCheckbox.checked = reqUpdate.checked;
      }
    });
    setTimeout(() => {
      this.isResetting = false;
    }, 20);
  }
  render() {
    return (h(Host, Object.assign({ class: {
        'is-checkbox-group': true,
        'direction-across': this.direction === 'across'
      }, role: 'group' }, (this.hasFormGroup || (this.ariaLabeledByAddition && this.ariaLabeledByAddition.length > 0)) &&
      { 'aria-labelledby': `${this.ariaLabeledByAddition} ` + (this.hasFormGroup ? this.inputId + '-label' : '') }, { id: this.useId, "is-valid": this.valid, "is-invalid": this.invalid }), h("slot", null)));
  }
  get el() { return getElement(this); }
};
let checkboxGroupIds = 0;
CheckboxGroup.style = checkboxGroupCss;

export { CheckboxGroup as lu_checkbox_group };

//# sourceMappingURL=lu-checkbox-group.entry.js.map