import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-f1d2a96f.js';

const scPriceChoicesCss = "sc-price-choices{display:block;position:relative}sc-block-ui{z-index:9}";

const ScPriceChoices = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.scRemoveLineItem = createEvent(this, "scRemoveLineItem", 7);
    this.scUpdateLineItem = createEvent(this, "scUpdateLineItem", 7);
    /** Number of columns */
    this.columns = 1;
    /** Required by default */
    this.required = true;
  }
  handleChange() {
    this.el.querySelectorAll('sc-price-choice').forEach(priceChoice => {
      // get the underlying control
      const choice = priceChoice.querySelector('sc-choice');
      if (!choice.checked) {
        this.scRemoveLineItem.emit({ price_id: priceChoice.priceId, quantity: priceChoice.quantity });
      }
      else {
        this.scUpdateLineItem.emit({ price_id: priceChoice.priceId, quantity: priceChoice.quantity });
      }
    });
  }
  render() {
    return (h(Fragment, null, h("sc-choices", { label: this.label, required: this.required, class: "loaded price-selector", style: { '--columns': this.columns.toString() } }, h("slot", null))));
  }
  get el() { return getElement(this); }
};
ScPriceChoices.style = scPriceChoicesCss;

export { ScPriceChoices as sc_price_choices };
