import { Component, Event, h, Prop, Watch, Method } from '@stencil/core';
export class UxplFormField {
  constructor() {
    /**
     * value
     */
    this.value = '';
    /**
     * Options
     */
    this.options = [];
    this.onInput = (e) => {
      var _a;
      const input = e.target;
      if (input) {
        if (((_a = this.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'number') {
          this.value = input.value ? Number(input.value) : undefined;
        }
        else {
          this.value = input.value || '';
        }
      }
      this.inputChanged.emit(e);
      this.changed.emit(e);
    };
  }
  valueChanged(newValue, oldValue) {
    if (newValue !== oldValue) {
      this.uxplChanged.emit({ value: this.value });
    }
  }
  async setFocus() {
    this.textInput.focus();
  }
  handleLabelClick() {
    this.textInput.focus();
  }
  componentWillLoad() {
  }
  componentDidLoad() {
  }
  render() {
    return (h("div", { class: 'pl-form-field-container' },
      h("div", { class: {
          "pl-form-field": true,
          "pl-form-field--text-input": true,
          'has-error': !this.valid,
          'consise': this.consise || this.concise
        } },
        this.options && this.options.length > 0 ?
          h("datalist", { id: "options" }, this.options.map((option) => h("option", null, option)))
          :
            undefined,
        h("div", { class: "input-line", slot: "input-container", part: "input-container" },
          h("slot", null),
          h("input", { part: "input-element", autoFocus: this.autofocus, ref: (el) => this.textInput = el, type: this.type, list: this.options && this.options.length > 0 ? 'options' : undefined, id: this.fieldId ? this.fieldId : 'pl-textbox', class: {
              "pl-form-field__input": true,
              "readonly": this.readonly ? this.readonly : false
            }, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: (e) => this.changed.emit(e), onKeyUp: (e) => this.keys.emit(e.key), onInput: this.onInput }),
          h("slot", { name: "selectionIndicator" })),
        h("label", { part: "input-label", class: {
            "pl-form-field__label": true,
            "hide-label": (this.consise || this.concise) && this.value ? true : false,
            "consise": this.consise || this.concise
          }, htmlFor: "{this.fieldId ? this.fieldId : 'pl-textbox'}", onClick: () => this.handleLabelClick() }, this.label),
        h("div", { class: "pl-form-field__helper-text" }, this.hint))));
  }
  static get is() { return "uxpl-form-field"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-form-field.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-form-field.css"]
  }; }
  static get properties() { return {
    "fieldId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "fieldId"
      },
      "attribute": "field-id",
      "reflect": false
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "label"
      },
      "attribute": "label",
      "reflect": false
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "type"
      },
      "attribute": "type",
      "reflect": false
    },
    "autofocus": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "type"
      },
      "attribute": "autofocus",
      "reflect": false
    },
    "value": {
      "type": "any",
      "mutable": true,
      "complexType": {
        "original": "string | number | null",
        "resolved": "number | string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "value"
      },
      "attribute": "value",
      "reflect": false,
      "defaultValue": "''"
    },
    "hint": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "hint"
      },
      "attribute": "hint",
      "reflect": false
    },
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "placeholder"
      },
      "attribute": "placeholder",
      "reflect": false
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "disabled"
      },
      "attribute": "disabled",
      "reflect": false
    },
    "readonly": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "readonly"
      },
      "attribute": "readonly",
      "reflect": false
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "required"
      },
      "attribute": "required",
      "reflect": false
    },
    "valid": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "required"
      },
      "attribute": "valid",
      "reflect": false
    },
    "consise": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "consise view (single height - no floating label)"
      },
      "attribute": "consise",
      "reflect": false
    },
    "concise": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "condise view (single height - no floating label)"
      },
      "attribute": "concise",
      "reflect": false
    },
    "options": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "string[]",
        "resolved": "string[]",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Options"
      },
      "defaultValue": "[]"
    }
  }; }
  static get events() { return [{
      "method": "changed",
      "name": "changed",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Value changed"
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "uxplChanged",
      "name": "uxplChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Value changed"
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "keys",
      "name": "keys",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Key typed changed"
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }, {
      "method": "inputChanged",
      "name": "inputChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Input"
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "setFocus": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
  static get watchers() { return [{
      "propName": "value",
      "methodName": "valueChanged"
    }]; }
}
