<commit_before><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">


<!--
`<paper-time-input>` Polymer element to accept a time with paper-input & paper-dropdown-menu
Inspired by the time input in google forms

Polymer 2 supported

### Styling

`<paper-time-input>` provides the following custom properties and mixins for styling:

Custom property | Description | Default
----------------|-------------|----------
`--paper-time-input-dropdown-ripple-color` | dropdown ripple color | `#2196F3`
`--paper-time-input-cotnainer` | Mixin applied to the inputs | `{}`
`--paper-time-dropdown-input-cotnainer` | Mixin applied to the dropdown input | `{}`

- paper-menu-button 2.0 depends on neon-animation 2.0, which doesn't import the Web Animations polyfill, so you'll have to import it


@demo demo/index.html
-->

<dom-module id="paper-time-input">
  <template>
    <style>
      :host {
        display: block;
        @apply --paper-font-common-base;
      }

      paper-input{
        width: 30px;
        text-align: center;
        --paper-input-container-input: {
          /* Damn you firefox
          * Needed to hide spin num in firefox
          * http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box
          */
          -moz-appearance: textfield;
          @apply --paper-time-input-cotnainer;
        };
        --paper-input-container-input-webkit-spinner: {
          -webkit-appearance: none;
          margin: 0;
          display: none;
        };
      }

      paper-dropdown-menu{
        width: 55px;
        padding: 0;
        /* Force ripple to use the whole container */
        --paper-dropdown-menu-ripple: {
          color: var(--paper-time-input-dropdown-ripple-color, #2196F3);
        };
        --paper-input-container-input: {
          @apply --paper-font-button;
          text-align: center;
          padding-left: 5px;
          @apply --paper-time-dropdown-input-cotnainer;
        };
        --paper-input-container-underline: {
          border-color: transparent;
        }
        --paper-input-container-underline-focus: {
          border-color: transparent;
        };
      }
      paper-item{
        cursor: pointer;
        text-align: center;
        font-size: 14px;
      }
      paper-listbox{
        padding: 0;
      }

      label{
        @apply --paper-font-caption;
      }
      .time-input-wrap{
        @apply --layout-horizontal;
        @apply --layout-no-wrap;
      }

      [hidden]{
        display: none !important;
      }
    </style>

    <label hidden$="[[hideLabel]]">[[label]]</label>
    <div class="time-input-wrap">

      <!-- Hour Input -->
      <paper-input
        id="hour"
        type="number"
        value="{{hour}}"
        on-change="_shouldFormatHour"
        required
        auto-validate="[[autoValidate]]"
        prevent-invalid-input
        maxlength="2"
        max="[[_computeHourMax(format)]]"
        min="0"
        no-label-float
        disabled="[[disabled]]">
        <span slot="suffix">:</span>
      </paper-input>

      <!-- Min Input -->
      <paper-input
        id="min"
        type="number"<commit_msg>add suffix tag for v1 paper input implimentations<commit_after><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">


<!--
`<paper-time-input>` Polymer element to accept a time with paper-input & paper-dropdown-menu
Inspired by the time input in google forms

Polymer 2 supported

### Styling

`<paper-time-input>` provides the following custom properties and mixins for styling:

Custom property | Description | Default
----------------|-------------|----------
`--paper-time-input-dropdown-ripple-color` | dropdown ripple color | `#2196F3`
`--paper-time-input-cotnainer` | Mixin applied to the inputs | `{}`
`--paper-time-dropdown-input-cotnainer` | Mixin applied to the dropdown input | `{}`

- paper-menu-button 2.0 depends on neon-animation 2.0, which doesn't import the Web Animations polyfill, so you'll have to import it


@demo demo/index.html
-->

<dom-module id="paper-time-input">
  <template>
    <style>
      :host {
        display: block;
        @apply --paper-font-common-base;
      }

      paper-input{
        width: 30px;
        text-align: center;
        --paper-input-container-input: {
          /* Damn you firefox
          * Needed to hide spin num in firefox
          * http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box
          */
          -moz-appearance: textfield;
          @apply --paper-time-input-cotnainer;
        };
        --paper-input-container-input-webkit-spinner: {
          -webkit-appearance: none;
          margin: 0;
          display: none;
        };
      }

      paper-dropdown-menu{
        width: 55px;
        padding: 0;
        /* Force ripple to use the whole container */
        --paper-dropdown-menu-ripple: {
          color: var(--paper-time-input-dropdown-ripple-color, #2196F3);
        };
        --paper-input-container-input: {
          @apply --paper-font-button;
          text-align: center;
          padding-left: 5px;
          @apply --paper-time-dropdown-input-cotnainer;
        };
        --paper-input-container-underline: {
          border-color: transparent;
        }
        --paper-input-container-underline-focus: {
          border-color: transparent;
        };
      }
      paper-item{
        cursor: pointer;
        text-align: center;
        font-size: 14px;
      }
      paper-listbox{
        padding: 0;
      }

      label{
        @apply --paper-font-caption;
      }
      .time-input-wrap{
        @apply --layout-horizontal;
        @apply --layout-no-wrap;
      }

      [hidden]{
        display: none !important;
      }
    </style>

    <label hidden$="[[hideLabel]]">[[label]]</label>
    <div class="time-input-wrap">

      <!-- Hour Input -->
      <paper-input
        id="hour"
        type="number"
        value="{{hour}}"
        on-change="_shouldFormatHour"
        required
        auto-validate="[[autoValidate]]"
        prevent-invalid-input
        maxlength="2"
        max="[[_computeHourMax(format)]]"
        min="0"
        no-label-float
        disabled="[[disabled]]">
        <span suffix slot="suffix">:</span>
      </paper-input>

      <!-- Min Input -->
      <paper-input
        id="min"
        type="number"
{'fraction_non_alphanumeric': 0.16172960831110486, 'fraction_numerical': 0.009967710234451775, 'mean_word_length': 2.012262156448203, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '730816', 'n_tokens_mistral': 2240, 'n_tokens_neox': 2121, 'n_words': 435}