import { Component, Event, h, Host, Method, Prop } from '@stencil/core';
const progressScales = {
  small: {
    size: 14,
    strokeWidth: 2,
  },
  medium: {
    size: 16,
    strokeWidth: 2,
  },
  large: {
    size: 18,
    strokeWidth: 2,
  },
};
const getProgressScale = ({ scale = 'medium' }) => progressScales[scale];
export class DvnInput {
  constructor() {
    this.leaned = false;
    this.scale = 'medium';
    this.type = 'text';
    this.disabled = false;
    this.progressing = false;
    this.readonly = false;
    this.autoComplete = 'on';
    this.long = false;
  }
  focusOnInput() {
    this.textInput.focus();
  }
  render() {
    const { disabled, enableClear, feedback, leaned, name, placeholder, progressing, scale, type, value, } = this;
    const vars = {};
    if (this.width) {
      vars['--width'] = this.width;
      vars['--min-width'] = this.width;
    }
    const Tag = this.long ? 'textarea' : 'input';
    return (h(Host, { class: {
        leaned: leaned,
        [scale]: true,
        [feedback]: !!feedback,
        progressing: progressing,
        disabled: disabled,
      }, style: vars },
      h(Tag, { ref: (el) => this.textInput = el, type: type, name: name, placeholder: placeholder, disabled: disabled, value: value, onFocus: (e) => {
          e.stopPropagation();
          this.focus.emit(e);
        }, onBlur: (e) => {
          e.stopPropagation();
          this.blur.emit(e);
        }, onInput: (e) => {
          e.stopPropagation();
          this.change.emit(e.target.value);
        }, onChange: (e) => e.stopPropagation(), readonly: this.readonly, autocomplete: this.autoComplete }),
      progressing &&
        h("div", { class: "progress-container" },
          h("dvn-progress", { indefinite: true, leaned: true, tint: "neutral", size: getProgressScale(this).size, strokeWidth: getProgressScale(this).strokeWidth })),
      enableClear &&
        h("div", { class: "progress-container" },
          h("dvn-icon-button", { onClick: () => this.change.emit(undefined), iconName: "uil uil-times", leaned: true, scale: "small", tint: "neutral", view: "flat" }))));
  }
  static get is() { return "dvn-input"; }
  static get originalStyleUrls() { return {
    "$": ["dvn-input.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["dvn-input.css"]
  }; }
  static get properties() { return {
    "leaned": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "leaned",
      "reflect": false,
      "defaultValue": "false"
    },
    "scale": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Scale",
        "resolved": "\"large\" | \"medium\" | \"small\"",
        "references": {
          "Scale": {
            "location": "import",
            "path": "../../theme"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "scale",
      "reflect": false,
      "defaultValue": "'medium'"
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "name",
      "reflect": false
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'text'"
    },
    "feedback": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'error' | 'warning'",
        "resolved": "\"error\" | \"warning\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "feedback",
      "reflect": false
    },
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "placeholder",
      "reflect": false
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "progressing": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "progressing",
      "reflect": false,
      "defaultValue": "false"
    },
    "value": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "value",
      "reflect": false
    },
    "width": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "width",
      "reflect": false
    },
    "readonly": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "readonly",
      "reflect": false,
      "defaultValue": "false"
    },
    "autoComplete": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'on' | 'off'",
        "resolved": "\"off\" | \"on\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "auto-complete",
      "reflect": false,
      "defaultValue": "'on'"
    },
    "long": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "long",
      "reflect": false,
      "defaultValue": "false"
    },
    "enableClear": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "enable-clear",
      "reflect": false
    }
  }; }
  static get events() { return [{
      "method": "change",
      "name": "change",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "blur",
      "name": "blur",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "focus",
      "name": "focus",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "focusOnInput": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {},
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
}
