import { Component, Prop, h, State, Element, Watch } from '@stencil/core';
let id = 0;
export class ScChoices {
  constructor() {
    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 (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" },
      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 },
        h("div", { part: "choices", class: "choices__items" },
          h("slot", null)))));
  }
  static get is() { return "sc-choices"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-choices.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-choices.css"]
  }; }
  static get properties() { return {
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The group label. Required for proper accessibility. Alternatively, you can use the label slot."
      },
      "attribute": "label",
      "reflect": false,
      "defaultValue": "''"
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'small' | 'medium' | 'large'",
        "resolved": "\"large\" | \"medium\" | \"small\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Input size"
      },
      "attribute": "size",
      "reflect": true,
      "defaultValue": "'medium'"
    },
    "autoWidth": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "auto-width",
      "reflect": false
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Required"
      },
      "attribute": "required",
      "reflect": false,
      "defaultValue": "false"
    },
    "showLabel": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Should we show the label"
      },
      "attribute": "show-label",
      "reflect": false,
      "defaultValue": "true"
    },
    "help": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The input's help text."
      },
      "attribute": "help",
      "reflect": false,
      "defaultValue": "''"
    },
    "hideLabel": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Hides the fieldset and legend that surrounds the group. The label will still be read by screen readers."
      },
      "attribute": "hide-label",
      "reflect": false,
      "defaultValue": "false"
    },
    "columns": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Number of columns on desktop"
      },
      "attribute": "columns",
      "reflect": false,
      "defaultValue": "1"
    },
    "errorMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Validation error message."
      },
      "attribute": "error-message",
      "reflect": false,
      "defaultValue": "''"
    }
  }; }
  static get states() { return {
    "width": {}
  }; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "required",
      "methodName": "handleRequiredChange"
    }]; }
}
