'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-cd6fab62.js');

const scChoicesCss = ":host{display:block}.choices ::slotted(div){margin:0;display:flex;flex-wrap:wrap;gap:10px}.choices:not(.choices--auto-width) ::slotted(div){margin:0;display:grid;gap:10px}.breakpoint-lg ::slotted(div),.breakpoint-xl ::slotted(div){grid-template-columns:repeat(var(--columns, 1), 1fr)}.choices .choices__items{margin:0;display:flex;flex-wrap:wrap;gap:10px}.choices:not(.choices--auto-width) .choices__items{display:grid;gap:10px}.choices{border:none;padding:0;margin:0;min-width:0;margin:0}.choices .choices__label{font-family:var(--sc-input-font-family);font-size:var(--sc-input-font-size-medium);font-weight:var(--sc-input-font-weight);color:var(--sc-input-color);padding:0 var(--sc-spacing-xx-small)}.choices__items{display:grid;gap:10px}";

let id = 0;
const ScChoices = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.inputId = `choices-${++id}`;
    this.helpId = `choices-help-text-${id}`;
    this.labelId = `choices-label-${id}`;
    /** The group label. Required for proper accessibility. Alternatively, you can use the label slot. */
    this.label = '';
    /** Input size */
    this.size = 'medium';
    /** Required */
    this.required = false;
    /** Should we show the label */
    this.showLabel = true;
    /** The input's help text. */
    this.help = '';
    /** Hides the fieldset and legend that surrounds the group. The label will still be read by screen readers. */
    this.hideLabel = false;
    /** Number of columns on desktop */
    this.columns = 1;
    /** Validation error message. */
    this.errorMessage = '';
  }
  componentDidLoad() {
    this.handleRequiredChange();
    this.handleResize();
  }
  handleRequiredChange() {
    const choices = this.el.querySelectorAll('sc-choice');
    if (choices.length) {
      choices.forEach(choice => {
        choice.required = this.required;
      });
    }
  }
  handleResize() {
    // Only run if ResizeObserver is supported.
    if ('ResizeObserver' in window) {
      var ro = new window.ResizeObserver(entries => {
        entries.forEach(entry => {
          this.width = entry.contentRect.width;
        });
      });
      ro.observe(this.el);
    }
  }
  render() {
    return (index.h("fieldset", { part: "base", class: {
        'choices': true,
        'choices--hide-label': this.hideLabel,
        'choices--auto-width': this.autoWidth,
        'breakpoint-sm': this.width < 384,
        'breakpoint-md': this.width >= 384 && this.width < 576,
        'breakpoint-lg': this.width >= 576 && this.width < 768,
        'breakpoint-xl': this.width >= 768,
      }, role: "radiogroup" }, index.h("sc-form-control", { size: this.size, required: this.required, label: this.label, showLabel: this.showLabel, help: this.help, inputId: this.inputId, helpId: this.helpId, labelId: this.labelId }, index.h("div", { part: "choices", class: "choices__items" }, index.h("slot", null)))));
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "required": ["handleRequiredChange"]
  }; }
};
ScChoices.style = scChoicesCss;

exports.sc_choices = ScChoices;
