import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { v as v4, b as getHostAttrsWithId } from './index2.js';
import { d as defineCustomElement$6 } from './bs-character-count2.js';
import { d as defineCustomElement$5 } from './bs-field-layout2.js';
import { d as defineCustomElement$4 } from './bs-hint2.js';
import { d as defineCustomElement$3 } from './bs-input2.js';
import { d as defineCustomElement$2 } from './bs-label2.js';

const bsInputFieldCss = "bs-input-field{display:block;width:100%}";

const BsInputField$1 = /*@__PURE__*/ proxyCustomElement(class BsInputField extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    /** Native attributes to pass through to the input element. */
    this.attrs = {};
    this.disabled = false;
    this.error = undefined;
    this.hints = undefined;
    this.label = undefined;
    this.passAttrs = '';
    this.placeholder = undefined;
    this.required = undefined;
    this.type = 'text';
    this.value = undefined;
    this.hintId = null;
  }
  componentWillLoad() {
    this.hintId = this.hints ? v4() : null;
    this.attrs = getHostAttrsWithId(this.hostEl, [
      'autocomplete',
      'max',
      'min',
      'maxlength',
      'minlength',
      'name',
      ...this.passAttrs.split(',')
    ]);
  }
  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-input", Object.assign({ type: this.type, disabled: this.disabled, error: this.error, placeholder: this.placeholder, required: this.required, value: this.value, hintId: this.hintId }, this.attrs)))));
  }
  get hostEl() { return this; }
  static get style() { return bsInputFieldCss; }
}, [0, "bs-input-field", {
    "disabled": [4],
    "error": [4],
    "hints": [1],
    "label": [1],
    "passAttrs": [1, "pass-attrs"],
    "placeholder": [1],
    "required": [4],
    "type": [1],
    "value": [8],
    "hintId": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-input-field", "bs-character-count", "bs-field-layout", "bs-hint", "bs-input", "bs-label"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-input-field":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsInputField$1);
      }
      break;
    case "bs-character-count":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "bs-field-layout":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "bs-hint":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "bs-input":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "bs-label":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const BsInputField = BsInputField$1;
const defineCustomElement = defineCustomElement$1;

export { BsInputField, defineCustomElement };

//# sourceMappingURL=bs-input-field.js.map