import { h, Host } from '@stencil/core';
import { v4 as createId } from 'uuid';
import { getHostAttrsWithId } from '../../utils';
/**
 * Displays a <bs-select> field with a corresponding <bs-label> and <bs-hint>.
 *
 * @docsPage
 */
export class BsSelectField {
  constructor() {
    /** Native attributes to pass through to the select element. */
    this.attrs = {};
    this.disabled = false;
    this.error = undefined;
    this.required = undefined;
    this.label = undefined;
    this.hints = undefined;
    this.placeholder = '';
    this.value = undefined;
    this.passAttrs = '';
    this.data = [];
    this.hintId = null;
  }
  componentWillLoad() {
    this.hintId = this.hints ? createId() : null;
    this.attrs = getHostAttrsWithId(this.hostEl, [
      'autocomplete',
      'max',
      'min',
      'maxlength',
      'minlength',
      'name',
      'placeholder',
      ...this.passAttrs.split(',')
    ]);
  }
  get validValue() {
    return this.value;
  }
  render() {
    return (h(Host, null, h("bs-field-layout", { disabled: this.disabled, error: this.error, hints: this.hints, label: this.label, "label-for": this.attrs.id, required: this.required, hintId: this.hintId }, h("bs-select", Object.assign({ disabled: this.disabled, error: this.error, required: this.required, value: this.validValue, hintId: this.hintId }, this.attrs), h("option", { selected: !this.validValue, disabled: false }, this.placeholder), this.data.map(option => (h("option", { value: option.value, selected: this.validValue === option.value, disabled: option.disabled }, option.label)))))));
  }
  static get is() { return "bs-select-field"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-select-field.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-select-field.css"]
    };
  }
  static get properties() {
    return {
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Sets the disabled state on select, disabled styles on label."
        },
        "attribute": "disabled",
        "reflect": false,
        "defaultValue": "false"
      },
      "error": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Applies error styles to the select."
        },
        "attribute": "error",
        "reflect": false
      },
      "required": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Sets the required state on the select, append required* indicator to label."
        },
        "attribute": "required",
        "reflect": false
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Pass label text."
        },
        "attribute": "label",
        "reflect": false
      },
      "hints": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string | string[]",
          "resolved": "string | string[]",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Pass single helper/error text or array of text."
        },
        "attribute": "hints",
        "reflect": false
      },
      "placeholder": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Pass a default placeholder option, which will have no value."
        },
        "attribute": "placeholder",
        "reflect": false,
        "defaultValue": "''"
      },
      "value": {
        "type": "any",
        "mutable": false,
        "complexType": {
          "original": "string | number",
          "resolved": "number | string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Sets the select value."
        },
        "attribute": "value",
        "reflect": false
      },
      "passAttrs": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "List additional attributes by name (comma-separated) to pass through to <select>."
        },
        "attribute": "pass-attrs",
        "reflect": false,
        "defaultValue": "''"
      },
      "data": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "OptionProps[]",
          "resolved": "OptionProps[]",
          "references": {
            "OptionProps": {
              "location": "import",
              "path": "../../types/propTypes"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "mapTo",
              "text": "OptionProps"
            }],
          "text": ""
        },
        "defaultValue": "[]"
      }
    };
  }
  static get states() {
    return {
      "hintId": {}
    };
  }
  static get elementRef() { return "hostEl"; }
}
//# sourceMappingURL=bs-select-field.js.map
