import { Component, Element, Host, Method, Prop, State, h } from '@stencil/core';
import { HiddenFormInputSlot, connectForm, defaultValidator, disconnectForm, getLabelText, guid, hasText, initializeValidators, } from '../../utils';
/** @slot - A slot for adding text and a component that can be labeled. */
export class Input {
  constructor() {
    /** Disables input from interaction. */
    this.disabled = false;
    /** Allows setting error state. */
    this.error = false;
    /** When set to true, it makes the input not mutable. */
    this.readonly = false;
    /** Specifies required state for form submission. */
    this.required = false;
    /** Specify the input type. */
    this.type = 'text';
    /** The value of the input. */
    // eslint-disable-next-line @stencil/strict-mutable
    this.value = '';
    /** Sets input width. */
    this.width = 'default';
    /** Initial render status. */
    this.isInitialRender = true;
    /** Instance validation. */
    this.validator = defaultValidator();
    //--------------------------------------------------------------------------
    //
    //  Private Methods
    //
    //--------------------------------------------------------------------------
    this.onFocus = () => {
      this.setFocus();
    };
    this.onBlur = () => {
      this.hasFocus = false;
    };
    this.onKeyDown = () => {
      if (this.type !== 'number' || this.disabled || this.readonly) {
        return;
      }
      // TODO: add "event: KeyboardEvent" as a parameter and insert logic for arrow up/down on number type here.
    };
    this.onInput = (event) => {
      const input = event.target;
      if (input) {
        this.value = input.value || '';
      }
    };
    //--------------------------------------------------------------------------
    //
    //  Private State
    //
    //--------------------------------------------------------------------------
    /** Determine if input has focus. */
    this.hasFocus = false;
  }
  //--------------------------------------------------------------------------
  //
  //  Public Methods
  //
  //--------------------------------------------------------------------------
  /**
   * Sets focus on native `input` in `abds-checkbox`.
   * @internal
  . */
  async setFocus() {
    var _a;
    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
    this.hasFocus = true;
  }
  //--------------------------------------------------------------------------
  //
  //  Lifecycle Methods
  //
  //--------------------------------------------------------------------------
  componentDidRender() {
    if (this.isInitialRender)
      this.isInitialRender = false;
  }
  componentWillLoad() {
    this.validator = initializeValidators(this);
    this.inputId = this.host.id || `input-${guid()}`;
  }
  connectedCallback() {
    this.labelText = getLabelText(this.host);
    connectForm(this);
  }
  disconnectedCallback() {
    disconnectForm(this);
  }
  render() {
    const isInvalid = (!this.isInitialRender || this.error) && !this.validator.validate(this.nativeInput);
    const hasSupportingText = (this.error && this.errorMessage) || this.helperText || isInvalid;
    return (h(Host, { onClick: this.disabled ? null : this.onFocus, onKeyDown: this.disabled ? null : this.onKeyDown },
      hasText(this.host) && (h("abds-label", { required: this.required, tooltip: this.tooltip },
        h("slot", null))),
      h("div", { class: {
          'input-container': true,
          invalid: !this.isInitialRender && !this.validator.validate(this.nativeInput),
          'has-focus': this.hasFocus,
        } },
        this.iconStart && (h("abds-icon", { class: "icon-start", icon: this.iconStart, size: "md", "stroke-width": "semibold" })),
        h("input", { "aria-describedby": hasSupportingText ? this.inputId : null, "aria-label": this.labelText || null, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, ref: (input) => (this.nativeInput = input), required: this.required, type: this.type, value: this.value }),
        this.iconEnd && (h("abds-icon", { class: "icon-end", icon: this.iconEnd, size: "md", "stroke-width": "semibold" }))),
      hasSupportingText && (h("abds-supporting-text", { errorText: isInvalid ? this.validator.errorMessage : this.errorMessage, "helper-text": this.helperText, id: this.inputId })),
      h(HiddenFormInputSlot, { component: this, type: this.type })));
  }
  static get is() { return "abds-input"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["input.css"]
  }; }
  static get styleUrls() { return {
    "$": ["input.css"]
  }; }
  static get properties() { return {
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The name of the control, which is submitted with the form data."
      },
      "attribute": "name",
      "reflect": true
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Disables input from interaction."
      },
      "attribute": "disabled",
      "reflect": true,
      "defaultValue": "false"
    },
    "error": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Allows setting error state."
      },
      "attribute": "error",
      "reflect": true,
      "defaultValue": "false"
    },
    "errorMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Custom error message. Will only display if `error` prop is true."
      },
      "attribute": "error-message",
      "reflect": true
    },
    "helperText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Text of the information message."
      },
      "attribute": "helper-text",
      "reflect": true
    },
    "iconEnd": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Adds an abds-icon to end of input."
      },
      "attribute": "icon-end",
      "reflect": false
    },
    "iconStart": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Adds an abds-icon to beginning of input."
      },
      "attribute": "icon-start",
      "reflect": false
    },
    "max": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The maximum value, which must not be less than its minimum (min attribute) value."
      },
      "attribute": "max",
      "reflect": true
    },
    "maxlength": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "This attribute specifies the maximum number of characters that the user can enter."
      },
      "attribute": "maxlength",
      "reflect": true
    },
    "min": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The minimum value, which must not be greater than its maximum (max attribute) value."
      },
      "attribute": "min",
      "reflect": true
    },
    "minlength": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "This attribute specifies the minimum number of characters that the user can enter."
      },
      "attribute": "minlength",
      "reflect": true
    },
    "minlengthMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies a custom error message for invalid minLength."
      },
      "attribute": "minlength-message",
      "reflect": false
    },
    "pattern": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset."
      },
      "attribute": "pattern",
      "reflect": true
    },
    "patternMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies a custom error message for invalid pattern."
      },
      "attribute": "pattern-message",
      "reflect": false
    },
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Instructional text that shows before the input has a value."
      },
      "attribute": "placeholder",
      "reflect": true
    },
    "readonly": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "When set to true, it makes the input not mutable."
      },
      "attribute": "readonly",
      "reflect": true,
      "defaultValue": "false"
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies required state for form submission."
      },
      "attribute": "required",
      "reflect": true,
      "defaultValue": "false"
    },
    "requiredMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies a custom error message for required state."
      },
      "attribute": "required-message",
      "reflect": false
    },
    "tooltip": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The tooltip text to be passed to label."
      },
      "attribute": "tooltip",
      "reflect": true
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "TextFieldTypes",
        "resolved": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
        "references": {
          "TextFieldTypes": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specify the input type."
      },
      "attribute": "type",
      "reflect": true,
      "defaultValue": "'text'"
    },
    "value": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The value of the input."
      },
      "attribute": "value",
      "reflect": true,
      "defaultValue": "''"
    },
    "width": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'default' | 'full'",
        "resolved": "\"default\" | \"full\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Sets input width."
      },
      "attribute": "width",
      "reflect": true,
      "defaultValue": "'default'"
    }
  }; }
  static get states() { return {
    "hasFocus": {}
  }; }
  static get methods() { return {
    "setFocus": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Sets focus on native `input` in `abds-checkbox`.",
        "tags": [{
            "name": "internal",
            "text": "."
          }]
      }
    }
  }; }
  static get elementRef() { return "host"; }
}
//# sourceMappingURL=input.js.map