import { Component, Event, h, Host, Prop } from '@stencil/core';
function formatTwoDigits(value) {
  return value < 10 ? '0' + value : '' + value;
}
export class DvnTimePicker {
  constructor() {
    this.hour = 9;
    this.minute = 0;
    this.leaned = false;
  }
  componentWillLoad() {
    this.hours = Array.apply(null, Array(24)).map((_, i) => i);
  }
  render() {
    const { hour, minute } = this;
    return (h(Host, null,
      h("dvn-input-group", { leaned: this.leaned },
        h("dvn-select", { width: "50px", hideCaret: true, hideCheck: true, hideScrollbar: true, value: `${hour}`, enableSearch: true, optionsContainerMaxHeight: this.optionsContainerMaxHeight, onChange: e => {
            e.stopPropagation();
            this.change.emit({ hour: Number(e.detail), minute });
          } },
          h("dvn-select-option", null, "HH"),
          this.hours.map(hour => (h("dvn-select-option", { value: `${hour}` }, formatTwoDigits(hour))))),
        h("dvn-select", { width: "50px", hideCaret: true, hideCheck: true, hideScrollbar: true, value: `${minute}`, enableSearch: true, onChange: e => {
            e.stopPropagation();
            this.change.emit({ hour, minute: Number(e.detail) });
          } },
          h("dvn-select-option", null, "mm"),
          h("dvn-select-option", { value: "0" }, "00"),
          h("dvn-select-option", { value: "15" }, "15"),
          h("dvn-select-option", { value: "30" }, "30"),
          h("dvn-select-option", { value: "45" }, "45")))));
  }
  static get is() { return "dvn-time-picker"; }
  static get originalStyleUrls() { return {
    "$": ["dvn-time-picker.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["dvn-time-picker.css"]
  }; }
  static get properties() { return {
    "hour": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "hour",
      "reflect": false,
      "defaultValue": "9"
    },
    "minute": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "minute",
      "reflect": false,
      "defaultValue": "0"
    },
    "optionsContainerMaxHeight": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "options-container-max-height",
      "reflect": false
    },
    "leaned": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "leaned",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get events() { return [{
      "method": "change",
      "name": "change",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
}
