├── .gitignore
├── LICENSE.txt
├── README.md
├── bower.json
├── demo
    └── index.html
├── index.html
├── paper-time-input.html
└── test
    └── paper-time-input_test.html


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Ryan Burns
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # \<paper-time-input\>
 2 | 
 3 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/ryanburns23/paper-time-input)
 4 | 
 5 | 
 6 | Polymer element to accept a time with paper-input & paper-dropdown-menu
 7 | Inspired by the time-input in google forms
 8 | 
 9 | Polymer 2 supported
10 | 
11 | <!--
12 | ```
13 | <custom-element-demo>
14 |   <template>
15 |     <script src="../webcomponentsjs/webcomponents-lite.js"></script>
16 |     <link rel="import" href="paper-time-input.html">
17 |     <style>
18 |       paper-time-input{
19 |       	max-width: 400px;
20 |         margin: 0 auto;
21 |         padding: 10px;
22 |       }
23 |       body{
24 |         margin-bottom: 50px;
25 |       }
26 |     </style>
27 |     <next-code-block></next-code-block>
28 |   </template>
29 | </custom-element-demo>
30 | ```
31 | -->
32 | 
33 | ```html
34 | <paper-time-input hour="3" min="05" am-pm="PM"></paper-time-input>
35 | ```
36 | 
37 | - 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
38 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "paper-time-input",
 3 |   "description": "Polymer element to accept a time with paper-input",
 4 |   "main": "paper-time-input.html",
 5 |   "dependencies": {
 6 |     "polymer": "Polymer/polymer#1.9 - 2",
 7 |     "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#1 - 2",
 8 |     "paper-item": "PolymerElements/paper-item#1 - 2",
 9 |     "paper-listbox": "polymerelements/paper-listbox#1 - 2",
10 |     "paper-input": "PolymerElements/paper-input#1 - 2",
11 |     "iron-flex-layout": "PolymerElements/iron-flex-layout#1 - 2",
12 |     "paper-styles": "PolymerElements/paper-styles#1 - 2"
13 |   },
14 |   "devDependencies": {
15 |     "iron-component-page": "PolymerElements/iron-component-page#^2.0.0",
16 |     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
17 |     "web-component-tester": "^6.0.0",
18 |     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 6 | 
 7 |     <title>paper-time-input demo</title>
 8 | 
 9 |     <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
10 | 
11 |     <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
12 |     <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
13 |     <link rel="import" href="../paper-time-input.html">
14 | 
15 |     <custom-style>
16 |       <style is="custom-style" include="demo-pages-shared-styles">
17 |         body{
18 |           margin-bottom: 30px;
19 |         }
20 |       </style>
21 |     </custom-style>
22 | 
23 |   </head>
24 |   <body>
25 |     <div class="vertical-section-container centered">
26 |       <h3>Basic Demo</h3>
27 |       <demo-snippet>
28 |         <template>
29 |           <paper-time-input value="{{resultBasic}}"></paper-time-input>
30 |           <button onClick="validate()">Validate</button>
31 |           <script type="text/javascript">
32 |             function validate(){
33 |               document.querySelector('paper-time-input').validate();
34 |             }
35 |           </script>
36 |         </template>
37 |       </demo-snippet>
38 |     </div>
39 | 
40 |     <div class="vertical-section-container centered">
41 |       <h3>24 hour format</h3>
42 |       <demo-snippet>
43 |         <template>
44 |           <paper-time-input format="24" value="{{result24}}"></paper-time-input>
45 |         </template>
46 |       </demo-snippet>
47 |     </div>
48 | 
49 |     <div class="vertical-section-container centered">
50 |       <h3>Pre Set Time</h3>
51 |       <demo-snippet>
52 |         <template>
53 |           <paper-time-input value="{{result}}" hour="4" min="20" am-pm="AM"></paper-time-input>
54 |         </template>
55 |       </demo-snippet>
56 |     </div>
57 | 
58 |     <div class="vertical-section-container centered">
59 |       <h3>Disabled</h3>
60 |       <demo-snippet>
61 |         <template>
62 |           <paper-time-input disabled></paper-time-input>
63 |         </template>
64 |       </demo-snippet>
65 |     </div>
66 | 
67 |   </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 6 | 
 7 |     <title>paper-time-input</title>
 8 | 
 9 |     <script src="../webcomponentsjs/webcomponents-lite.js"></script>
10 | 
11 |     <link rel="import" href="../iron-component-page/iron-component-page.html">
12 |   </head>
13 |   <body>
14 |     <iron-component-page src="paper-time-input.html"></iron-component-page>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/paper-time-input.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="../paper-input/paper-input.html">
  3 | <link rel="import" href="../paper-listbox/paper-listbox.html">
  4 | <link rel="import" href="../paper-item/paper-item.html">
  5 | <link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
  6 | <link rel="import" href="../paper-styles/typography.html">
  7 | <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
  8 | 
  9 | 
 10 | <!--
 11 | `<paper-time-input>` Polymer element to accept a time with paper-input & paper-dropdown-menu
 12 | Inspired by the time input in google forms
 13 | 
 14 | Polymer 2 supported
 15 | 
 16 | ### Styling
 17 | 
 18 | `<paper-time-input>` provides the following custom properties and mixins for styling:
 19 | 
 20 | Custom property | Description | Default
 21 | ----------------|-------------|----------
 22 | `--paper-time-input-dropdown-ripple-color` | dropdown ripple color | `--primary-color`
 23 | `--paper-time-input-cotnainer` | Mixin applied to the inputs | `{}`
 24 | `--paper-time-dropdown-input-cotnainer` | Mixin applied to the dropdown input | `{}`
 25 | 
 26 | - 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
 27 | 
 28 | 
 29 | @demo demo/index.html
 30 | -->
 31 | 
 32 | <dom-module id="paper-time-input">
 33 |   <template>
 34 |     <style>
 35 |       :host {
 36 |         display: block;
 37 |         @apply --paper-font-common-base;
 38 |       }
 39 | 
 40 |       paper-input{
 41 |         width: 30px;
 42 |         text-align: center;
 43 |         --paper-input-container-input: {
 44 |           /* Damn you firefox
 45 |           * Needed to hide spin num in firefox
 46 |           * http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box
 47 |           */
 48 |           -moz-appearance: textfield;
 49 |           @apply --paper-time-input-cotnainer;
 50 |         };
 51 |         --paper-input-container-input-webkit-spinner: {
 52 |           -webkit-appearance: none;
 53 |           margin: 0;
 54 |           display: none;
 55 |         };
 56 |       }
 57 | 
 58 |       paper-dropdown-menu{
 59 |         width: 55px;
 60 |         padding: 0;
 61 |         /* Force ripple to use the whole container */
 62 |         --paper-dropdown-menu-ripple: {
 63 |           color: var(--paper-time-input-dropdown-ripple-color, --primary-color);
 64 |         };
 65 |         --paper-input-container-input: {
 66 |           @apply --paper-font-button;
 67 |           text-align: center;
 68 |           padding-left: 5px;
 69 |           @apply --paper-time-dropdown-input-cotnainer;
 70 |         };
 71 |         --paper-input-container-underline: {
 72 |           border-color: transparent;
 73 |         }
 74 |         --paper-input-container-underline-focus: {
 75 |           border-color: transparent;
 76 |         };
 77 |       }
 78 |       paper-item{
 79 |         cursor: pointer;
 80 |         text-align: center;
 81 |         font-size: 14px;
 82 |       }
 83 |       paper-listbox{
 84 |         padding: 0;
 85 |       }
 86 | 
 87 |       label{
 88 |         @apply --paper-font-caption;
 89 |       }
 90 |       .time-input-wrap{
 91 |         @apply --layout-horizontal;
 92 |         @apply --layout-no-wrap;
 93 |       }
 94 | 
 95 |       [hidden]{
 96 |         display: none !important;
 97 |       }
 98 |     </style>
 99 | 
100 |     <label hidden$="[[hideLabel]]">[[label]]</label>
101 |     <div class="time-input-wrap">
102 | 
103 |       <!-- Hour Input -->
104 |       <paper-input
105 |         id="hour"
106 |         type="number"
107 |         value="{{hour}}"
108 |         on-change="_shouldFormatHour"
109 |         required
110 |         auto-validate="[[autoValidate]]"
111 |         prevent-invalid-input
112 |         maxlength="2"
113 |         max="[[_computeHourMax(format)]]"
114 |         min="0"
115 |         no-label-float
116 |         disabled="[[disabled]]">
117 |         <span suffix slot="suffix">:</span>
118 |       </paper-input>
119 | 
120 |       <!-- Min Input -->
121 |       <paper-input
122 |         id="min"
123 |         type="number"
124 |         value="{{min}}"
125 |         on-change="_formatMin"
126 |         required
127 |         auto-validate="[[autoValidate]]"
128 |         prevent-invalid-input
129 |         maxlength="2"
130 |         max="59"
131 |         min="0"
132 |         no-label-float
133 |         disabled="[[disabled]]">
134 |       </paper-input>
135 | 
136 |       <!-- Dropdown Menu -->
137 |       <paper-dropdown-menu
138 |         id="dropdown"
139 |         required
140 |         hidden$="[[_equal(format, '24')]]"
141 |         no-label-float
142 |         disabled="[[disabled]]">
143 | 
144 |         <paper-listbox attr-for-selected="name" selected="{{amPm}}" slot="dropdown-content">
145 |           <paper-item name="AM">AM</paper-item>
146 |           <paper-item name="PM">PM</paper-item>
147 |         </paper-listbox>
148 |       </paper-dropdown-menu>
149 | 
150 |     </div>
151 | 
152 |   </template>
153 | 
154 |   <script>
155 |     Polymer({
156 |       is: 'paper-time-input',
157 |       properties: {
158 |         /**
159 |          * Label for the input
160 |          */
161 |         label: {
162 |           type: String,
163 |           value: 'Time'
164 |         },
165 |         /**
166 |          * auto validate time inputs
167 |          */
168 |         autoValidate: {
169 |           type: Boolean,
170 |           value: true
171 |         },
172 |         /**
173 |          * hides the label
174 |          */
175 |         hideLabel: {
176 |           type: Boolean,
177 |           value: false
178 |         },
179 |         /**
180 |          * 12 or 24 hr format
181 |          */
182 |         format: {
183 |           type: Number,
184 |           value: 12
185 |         },
186 |         /**
187 |          * disables the inputs
188 |          */
189 |         disabled: {
190 |           type: Boolean,
191 |           value: false
192 |         },
193 |         /**
194 |          * hour
195 |          */
196 |         hour: {
197 |           type: String,
198 |           notify: true
199 |         },
200 |         /**
201 |          * minute
202 |          */
203 |         min: {
204 |           type: String,
205 |           notify: true
206 |         },
207 |         /**
208 |          * AM or PM
209 |          */
210 |         amPm: {
211 |           type: String,
212 |           notify: true,
213 |           value: 'AM'
214 |         },
215 |         /**
216 |          * Formatted time string
217 |          */
218 |         value: {
219 |           type: String,
220 |           notify: true,
221 |           readOnly: true,
222 |           computed: '_computeTime(min, hour, amPm)'
223 |         },
224 |       },
225 |       /**
226 |        * Validate the inputs
227 |        * @return {boolean}
228 |        */
229 |       validate: function(){
230 |         var valid = true;
231 |         // Validate hour & min fields
232 |         if(!this.$.hour.validate() | !this.$.min.validate()){
233 |           valid = false;
234 |         }
235 |         // Validate AM PM if 12 hour time
236 |         if (this.format == 12 && !this.$.dropdown.validate()) {
237 |           valid = false;
238 |         }
239 |         return valid;
240 |       },
241 | 
242 |       /**
243 |        * Create time string
244 |        */
245 |       _computeTime: function(min, hour, amPm){
246 |         if (hour && min) {
247 |           // No ampm on 24 hr time
248 |           if (this.format == 24) {
249 |             amPm = "";
250 |           }
251 |           return hour + ":" + min + " " + amPm;
252 |         }
253 |       },
254 |       /**
255 |        * Format min
256 |        */
257 |       _formatMin: function(){
258 |         if(this.min.toString().length === 1){
259 |           this.min = (this.min < 10) ? ("0" + this.min) : this.min;
260 |         }
261 |       },
262 |       /**
263 |        * Hour needs a leading zero in 24hr format
264 |        */
265 |       _shouldFormatHour: function(){
266 |         if(this.format == 24 && this.hour.toString().length === 1){
267 |           this.hour = (this.hour < 10) ? ("0" + this.hour) : this.hour;
268 |         }
269 |       },
270 |       /**
271 |        * 24 hour format has a max hr of 23
272 |        */
273 |       _computeHourMax: function(format){
274 |         if (format == 12) {
275 |           return format
276 |         }else {
277 |           return 23
278 |         }
279 |       },
280 |       _equal: function(n1, n2){
281 |         if (n1 == n2) {
282 |           return true
283 |         }
284 |       }
285 |     });
286 |   </script>
287 | </dom-module>
288 | 


--------------------------------------------------------------------------------
/test/paper-time-input_test.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 6 | 
 7 |     <title>paper-time-input test</title>
 8 | 
 9 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10 |     <script src="../../web-component-tester/browser.js"></script>
11 | 
12 |     <link rel="import" href="../paper-time-input.html">
13 |   </head>
14 |   <body>
15 |     <test-fixture id="basic">
16 |       <template>
17 |         <paper-time-input></paper-time-input>
18 |       </template>
19 |     </test-fixture>
20 | 
21 |     <script>
22 |       suite('paper-time-input', function() {
23 |         test('instantiating the element works', function() {
24 |           var element = fixture('basic');
25 |           assert.equal(element.is, 'paper-time-input');
26 |         });
27 |       });
28 |     </script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------