import { h, Host } from '@stencil/core';
export class BsFormControl {
  constructor() {
    this.as = 'input';
    this.htmlSize = undefined;
    this.size = undefined;
    this.readOnly = undefined;
    this.disabled = undefined;
    this.value = undefined;
    this.type = undefined;
    this.controlId = undefined;
    this.isValid = undefined;
    this.isInvalid = undefined;
    this.name = undefined;
    this.placeholder = undefined;
    this.required = false;
    this.pattern = undefined;
  }
  disconnectedCallback() {
    this.bsElement.shadowRoot.removeEventListener('slotchange', this.handleSlotChange.bind(this));
  }
  handleSlotChange() {
    const select = this.bsElement.shadowRoot.querySelector('select');
    let nodeList = this.bsElement.querySelectorAll('option');
    nodeList === null || nodeList === void 0 ? void 0 : nodeList.forEach(node => {
      select.append(node);
    });
  }
  componentDidLoad() {
    if (this.as === 'select') {
      this.bsElement.shadowRoot.addEventListener('slotchange', this.handleSlotChange.bind(this));
    }
  }
  render() {
    const TagName = this.as;
    return (h(Host, null, this.as === 'input' || this.as === 'textarea' ? (h(TagName, { class: {
        "form-control": true,
        "is-valid": this.isValid,
        "is-invalid": this.isInvalid,
        "form-control-lg": this.size === 'lg',
        "form-control-sm": this.size === 'sm',
      }, name: this.name, type: this.type, id: this.controlId, size: this.htmlSize, readonly: this.readOnly, pattern: this.pattern, required: this.required, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: (event) => {
        this.bsInput.emit(event);
      }, onBlur: (event) => {
        this.bsBlur.emit(event);
      }, onFocus: (event) => {
        this.bsFocus.emit(event);
      } })) : (h("select", { class: {
        "form-control": true,
        "is-valid": this.isValid,
        "is-invalid": this.isInvalid,
        "form-control-lg": this.size === 'lg',
        "form-control-sm": this.size === 'sm',
      }, onBlur: (event) => {
        this.bsBlur.emit(event);
      }, onFocus: (event) => {
        this.bsFocus.emit(event);
      }, required: this.required, disabled: this.disabled, onInput: (event) => {
        this.bsInput.emit(event);
      } }, h("slot", null)))));
  }
  static get is() { return "bs-form-control"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-form-control.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-form-control.css"]
    };
  }
  static get properties() {
    return {
      "as": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "FormElementTypes",
          "resolved": "\"input\" | \"select\" | \"textarea\"",
          "references": {
            "FormElementTypes": {
              "location": "local",
              "path": "/Users/aadebayo/Repositories/stenciljs-bootstrap/src/components/bs-form-control/bs-form-control.tsx"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Determines what form control the component is."
        },
        "attribute": "as",
        "reflect": false,
        "defaultValue": "'input'"
      },
      "htmlSize": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Specifies how much of the input is shown."
        },
        "attribute": "html-size",
        "reflect": false
      },
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'sm' | 'lg'",
          "resolved": "\"lg\" | \"sm\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Used to change the size of inputs and labels respectively."
        },
        "attribute": "size",
        "reflect": false
      },
      "readOnly": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "The value of the input is not editable."
        },
        "attribute": "read-only",
        "reflect": false
      },
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Disables the input / select / textarea from edit or copy."
        },
        "attribute": "disabled",
        "reflect": false
      },
      "value": {
        "type": "any",
        "mutable": false,
        "complexType": {
          "original": "string | string[] | number",
          "resolved": "number | string | string[]",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "The value of the input/"
        },
        "attribute": "value",
        "reflect": false
      },
      "type": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "This specifies what type of input is.\nView MDN docs https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"
        },
        "attribute": "type",
        "reflect": false
      },
      "controlId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "The element id."
        },
        "attribute": "control-id",
        "reflect": false
      },
      "isValid": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Determines the input as valid"
        },
        "attribute": "is-valid",
        "reflect": false
      },
      "isInvalid": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Determines the input as invalid"
        },
        "attribute": "is-invalid",
        "reflect": false
      },
      "name": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The name is the input/textarea/select element name."
        },
        "attribute": "name",
        "reflect": false
      },
      "placeholder": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "The placeholder text for the input/textarea."
        },
        "attribute": "placeholder",
        "reflect": false
      },
      "required": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Used for making form control required."
        },
        "attribute": "required",
        "reflect": false,
        "defaultValue": "false"
      },
      "pattern": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Used to determine the constraints for validation."
        },
        "attribute": "pattern",
        "reflect": false
      }
    };
  }
  static get events() {
    return [{
        "method": "bsInput",
        "name": "bsInput",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "The event is emitted on keyboard input."
        },
        "complexType": {
          "original": "InputEvent",
          "resolved": "InputEvent",
          "references": {
            "InputEvent": {
              "location": "global"
            }
          }
        }
      }, {
        "method": "bsBlur",
        "name": "bsBlur",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "The event is emitted on focus loss."
        },
        "complexType": {
          "original": "FocusEvent",
          "resolved": "FocusEvent",
          "references": {
            "FocusEvent": {
              "location": "global"
            }
          }
        }
      }, {
        "method": "bsFocus",
        "name": "bsFocus",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "The event is emitted on focus"
        },
        "complexType": {
          "original": "FocusEvent",
          "resolved": "FocusEvent",
          "references": {
            "FocusEvent": {
              "location": "global"
            }
          }
        }
      }];
  }
  static get elementRef() { return "bsElement"; }
}
//# sourceMappingURL=bs-form-control.js.map
