import { Host, h } from '@stencil/core';
import { getHostAttrs, genId } from '../../utils';
/**
 * Displays a <bs-input> field with a corresponding <bs-label> and <bs-hint>.
 * @docsPage
 */
export class BsInputField {
  constructor() {
    /** Native attributes to pass through to the input element. */
    this.attrs = {};
    this.disabled = false;
    this.error = undefined;
    this.errorMsg = undefined;
    this.hint = undefined;
    this.hints = undefined;
    this.inputId = undefined;
    this.label = undefined;
    this.passAttrs = '';
    this.placeholder = undefined;
    this.required = undefined;
    this.type = 'text';
    this.value = undefined;
    this.hintId = null;
  }
  get hintMsg() {
    return this.errorMsg || this.hint || this.hintDeprecated || undefined;
  }
  // Temporary holdover; removing this very soon
  get hintDeprecated() {
    var _a, _b;
    return ((_b = (_a = this.hints) === null || _a === void 0 ? void 0 : _a.join) === null || _b === void 0 ? void 0 : _b.call(_a, '\n')) || this.hints;
  }
  get inputIdAttr() {
    return this.inputId || this.inputIdGen;
  }
  componentWillLoad() {
    this.inputIdGen = this.inputId || genId();
    this.hintId = this.hintMsg ? genId() : null;
    this.attrs = getHostAttrs(this.hostEl, [
      'autocomplete',
      'max',
      'min',
      'maxlength',
      'minlength',
      'name',
      ...this.passAttrs.split(',')
    ]);
  }
  render() {
    return (h(Host, null, this.label && (h("bs-label", { for: this.inputIdAttr, disabled: this.disabled, required: this.required }, this.label)), h("bs-input", Object.assign({ disabled: this.disabled, error: this.error, "hint-id": this.hintId, "input-id": this.inputIdAttr, "pass-attrs": this.passAttrs, placeholder: this.placeholder, required: this.required, type: this.type, value: this.value }, this.attrs)), this.hintMsg && (h("bs-field-details", { error: this.error, "error-msg": this.errorMsg, hint: this.hint || this.hintDeprecated, "hint-id": this.hintId }))));
  }
  static get is() { return "bs-input-field"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-input-field.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-input-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 input, 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 input."
        },
        "attribute": "error",
        "reflect": false
      },
      "errorMsg": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Pass error text."
        },
        "attribute": "error-msg",
        "reflect": false
      },
      "hint": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Pass helper text."
        },
        "attribute": "hint",
        "reflect": false
      },
      "hints": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string | string[]",
          "resolved": "string | string[]",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "DEPRECATED.  Use `hint` and/or `errorMsg`."
        },
        "attribute": "hints",
        "reflect": false
      },
      "inputId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Pass id for the input element.  Will also be applied to label attribute."
        },
        "attribute": "input-id",
        "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
      },
      "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 <input>."
        },
        "attribute": "pass-attrs",
        "reflect": false,
        "defaultValue": "''"
      },
      "placeholder": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Placeholder attribute - same as native"
        },
        "attribute": "placeholder",
        "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 input, append required* indicator to label."
        },
        "attribute": "required",
        "reflect": false
      },
      "type": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Sets the native input type attribute."
        },
        "attribute": "type",
        "reflect": false,
        "defaultValue": "'text'"
      },
      "value": {
        "type": "any",
        "mutable": false,
        "complexType": {
          "original": "string | number",
          "resolved": "number | string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Sets the input value."
        },
        "attribute": "value",
        "reflect": false
      }
    };
  }
  static get states() {
    return {
      "hintId": {}
    };
  }
  static get elementRef() { return "hostEl"; }
}
//# sourceMappingURL=bs-input-field.js.map
