<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <title>core-input</title>

  <script src="../webcomponentsjs/webcomponents.js"></script>

  <link href="core-input.html" rel="import">

  <style shim-shadowdom>
    body {
      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
      font-size: 14px;
      margin: 0;
      padding: 24px;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      -webkit-touch-callout: none;
    }

    section {
      padding: 20px 0;
    }

    section > div {
      padding: 14px;
      font-size: 16px;
    }

  </style>

</head>
<body>

<template is="auto-binding">

  <section>

    <input is="core-input" placeholder="a single-line input" value="{{value1}}" committedValue="{{committedValue1}}">

    <p>value: {{value1}}, committedValue: {{committedValue1}}</p>

    <input is="core-input" type="number" preventInvalidInput placeholder="input type = number, preventInvalidInput" value="{{value2}}" committedValue="{{committedValue2}}">

    <p>value: {{value2}}, committedValue: {{committedValue2}}</p>

  </section>

</template>

</body>
</html>