Blame view

bower_components/paper-input/paper-input-behavior.html 11.9 KB
73bcce88   luigser   COMPONENTS
1
2
3
4
5
6
7
8
9
  <!--
  @license
  Copyright (c) 2015 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
  -->
73bcce88   luigser   COMPONENTS
10
  <link rel="import" href="../polymer/polymer.html">
73bcce88   luigser   COMPONENTS
11
12
13
  <link rel="import" href="../iron-behaviors/iron-control-state.html">
  
  <script>
c5169e0e   Renato De Donato   a new hope
14
  
73bcce88   luigser   COMPONENTS
15
16
17
18
19
20
21
22
23
24
25
    /**
     * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-container>`. This
     * behavior is implemented by `<paper-input>`. It exposes a number of properties from
     * `<paper-input-container>` and `<input is="iron-input">` and they should be bound in your
     * template.
     *
     * The input element can be accessed by the `inputElement` property if you need to access
     * properties or methods that are not exposed.
     * @polymerBehavior Polymer.PaperInputBehavior
     */
    Polymer.PaperInputBehaviorImpl = {
c5169e0e   Renato De Donato   a new hope
26
  
73bcce88   luigser   COMPONENTS
27
      properties: {
e619a3b0   Luigi Serra   Controllet cross ...
28
29
30
31
32
        /**
         * Fired when the input changes due to user interaction.
         *
         * @event change
         */
73bcce88   luigser   COMPONENTS
33
34
  
        /**
c5169e0e   Renato De Donato   a new hope
35
         * The label for this input. Bind this to `<paper-input-container>`'s `label` property.
73bcce88   luigser   COMPONENTS
36
37
38
39
40
41
         */
        label: {
          type: String
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
42
         * The value for this input. Bind this to the `<input is="iron-input">`'s `bindValue`
73bcce88   luigser   COMPONENTS
43
44
45
46
47
48
49
50
         * property, or the value property of your input that is `notify:true`.
         */
        value: {
          notify: true,
          type: String
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
51
52
         * Set to true to disable this input. Bind this to both the `<paper-input-container>`'s
         * and the input's `disabled` property.
73bcce88   luigser   COMPONENTS
53
54
55
56
57
58
59
         */
        disabled: {
          type: Boolean,
          value: false
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
60
61
         * Returns true if the value is invalid. Bind this to both the `<paper-input-container>`'s
         * and the input's `invalid` property.
73bcce88   luigser   COMPONENTS
62
63
64
         */
        invalid: {
          type: Boolean,
e619a3b0   Luigi Serra   Controllet cross ...
65
66
          value: false,
          notify: true
73bcce88   luigser   COMPONENTS
67
68
69
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
70
71
         * Set to true to prevent the user from entering invalid input. Bind this to the
         * `<input is="iron-input">`'s `preventInvalidInput` property.
73bcce88   luigser   COMPONENTS
72
73
74
75
76
77
         */
        preventInvalidInput: {
          type: Boolean
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
78
79
         * Set this to specify the pattern allowed by `preventInvalidInput`. Bind this to the
         * `<input is="iron-input">`'s `allowedPattern` property.
73bcce88   luigser   COMPONENTS
80
81
82
83
84
85
         */
        allowedPattern: {
          type: String
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
86
87
         * The type of the input. The supported types are `text`, `number` and `password`. Bind this
         * to the `<input is="iron-input">`'s `type` property.
73bcce88   luigser   COMPONENTS
88
89
90
91
92
93
         */
        type: {
          type: String
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
94
95
         * The datalist of the input (if any). This should match the id of an existing `<datalist>`. Bind this
         * to the `<input is="iron-input">`'s `list` property.
73bcce88   luigser   COMPONENTS
96
97
98
99
100
101
         */
        list: {
          type: String
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
102
103
         * A pattern to validate the `input` with. Bind this to the `<input is="iron-input">`'s
         * `pattern` property.
73bcce88   luigser   COMPONENTS
104
105
106
107
108
109
         */
        pattern: {
          type: String
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
110
111
         * Set to true to mark the input as required. Bind this to the `<input is="iron-input">`'s
         * `required` property.
73bcce88   luigser   COMPONENTS
112
113
114
115
116
117
118
         */
        required: {
          type: Boolean,
          value: false
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
119
120
         * The error message to display when the input is invalid. Bind this to the
         * `<paper-input-error>`'s content, if using.
73bcce88   luigser   COMPONENTS
121
122
123
124
125
126
127
128
129
130
131
132
133
134
         */
        errorMessage: {
          type: String
        },
  
        /**
         * Set to true to show a character counter.
         */
        charCounter: {
          type: Boolean,
          value: false
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
135
136
         * Set to true to disable the floating label. Bind this to the `<paper-input-container>`'s
         * `noLabelFloat` property.
73bcce88   luigser   COMPONENTS
137
138
139
140
141
142
143
         */
        noLabelFloat: {
          type: Boolean,
          value: false
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
144
145
         * Set to true to always float the label. Bind this to the `<paper-input-container>`'s
         * `alwaysFloatLabel` property.
73bcce88   luigser   COMPONENTS
146
147
148
149
150
151
152
         */
        alwaysFloatLabel: {
          type: Boolean,
          value: false
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
153
154
         * Set to true to auto-validate the input value. Bind this to the `<paper-input-container>`'s
         * `autoValidate` property.
73bcce88   luigser   COMPONENTS
155
156
157
158
159
160
161
         */
        autoValidate: {
          type: Boolean,
          value: false
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
162
163
         * Name of the validator to use. Bind this to the `<input is="iron-input">`'s `validator`
         * property.
73bcce88   luigser   COMPONENTS
164
165
166
167
168
169
170
171
         */
        validator: {
          type: String
        },
  
        // HTMLInputElement attributes for binding if needed
  
        /**
c5169e0e   Renato De Donato   a new hope
172
         * Bind this to the `<input is="iron-input">`'s `autocomplete` property.
73bcce88   luigser   COMPONENTS
173
174
175
176
177
178
179
         */
        autocomplete: {
          type: String,
          value: 'off'
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
180
         * Bind this to the `<input is="iron-input">`'s `autofocus` property.
73bcce88   luigser   COMPONENTS
181
182
183
184
185
186
         */
        autofocus: {
          type: Boolean
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
187
         * Bind this to the `<input is="iron-input">`'s `inputmode` property.
73bcce88   luigser   COMPONENTS
188
189
190
191
192
193
         */
        inputmode: {
          type: String
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
194
         * Bind this to the `<input is="iron-input">`'s `minlength` property.
73bcce88   luigser   COMPONENTS
195
196
197
198
199
200
         */
        minlength: {
          type: Number
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
201
202
         * The maximum length of the input value. Bind this to the `<input is="iron-input">`'s
         * `maxlength` property.
e619a3b0   Luigi Serra   Controllet cross ...
203
204
205
206
207
208
209
         */
        maxlength: {
          type: Number
        },
  
        /**
         * The minimum (numeric or date-time) input value.
c5169e0e   Renato De Donato   a new hope
210
         * Bind this to the `<input is="iron-input">`'s `min` property.
e619a3b0   Luigi Serra   Controllet cross ...
211
212
213
214
215
216
217
218
         */
        min: {
          type: String
        },
  
        /**
         * The maximum (numeric or date-time) input value.
         * Can be a String (e.g. `"2000-1-1"`) or a Number (e.g. `2`).
c5169e0e   Renato De Donato   a new hope
219
         * Bind this to the `<input is="iron-input">`'s `max` property.
e619a3b0   Luigi Serra   Controllet cross ...
220
221
222
223
224
225
226
         */
        max: {
          type: String
        },
  
        /**
         * Limits the numeric or date-time increments.
c5169e0e   Renato De Donato   a new hope
227
         * Bind this to the `<input is="iron-input">`'s `step` property.
e619a3b0   Luigi Serra   Controllet cross ...
228
229
230
231
232
233
         */
        step: {
          type: String
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
234
         * Bind this to the `<input is="iron-input">`'s `name` property.
73bcce88   luigser   COMPONENTS
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
         */
        name: {
          type: String
        },
  
        /**
         * A placeholder string in addition to the label. If this is set, the label will always float.
         */
        placeholder: {
          type: String,
          // need to set a default so _computeAlwaysFloatLabel is run
          value: ''
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
250
         * Bind this to the `<input is="iron-input">`'s `readonly` property.
73bcce88   luigser   COMPONENTS
251
252
253
254
255
256
257
         */
        readonly: {
          type: Boolean,
          value: false
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
258
         * Bind this to the `<input is="iron-input">`'s `size` property.
73bcce88   luigser   COMPONENTS
259
260
261
262
263
264
265
266
         */
        size: {
          type: Number
        },
  
        // Nonstandard attributes for binding if needed
  
        /**
c5169e0e   Renato De Donato   a new hope
267
         * Bind this to the `<input is="iron-input">`'s `autocapitalize` property.
73bcce88   luigser   COMPONENTS
268
269
270
271
272
273
274
         */
        autocapitalize: {
          type: String,
          value: 'none'
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
275
         * Bind this to the `<input is="iron-input">`'s `autocorrect` property.
73bcce88   luigser   COMPONENTS
276
277
278
279
280
281
         */
        autocorrect: {
          type: String,
          value: 'off'
        },
  
e619a3b0   Luigi Serra   Controllet cross ...
282
        /**
c5169e0e   Renato De Donato   a new hope
283
         * Bind this to the `<input is="iron-input">`'s `autosave` property, used with type=search.
e619a3b0   Luigi Serra   Controllet cross ...
284
285
286
287
288
289
         */
        autosave: {
          type: String
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
290
         * Bind this to the `<input is="iron-input">`'s `results` property, , used with type=search.
e619a3b0   Luigi Serra   Controllet cross ...
291
292
293
294
295
         */
        results: {
          type: Number
        },
  
eb240478   Luigi Serra   public room cards...
296
        /**
c5169e0e   Renato De Donato   a new hope
297
         * Bind this to the `<input is="iron-input">`'s `accept` property, , used with type=file.
eb240478   Luigi Serra   public room cards...
298
299
300
301
302
303
         */
        accept: {
          type: String
        },
  
        /**
c5169e0e   Renato De Donato   a new hope
304
         * Bind this to the `<input is="iron-input">`'s `multiple` property, , used with type=file.
eb240478   Luigi Serra   public room cards...
305
306
307
308
309
         */
        multiple: {
          type: Boolean
        },
  
73bcce88   luigser   COMPONENTS
310
311
312
        _ariaDescribedBy: {
          type: String,
          value: ''
73bcce88   luigser   COMPONENTS
313
314
315
316
317
        }
  
      },
  
      listeners: {
c5169e0e   Renato De Donato   a new hope
318
        'addon-attached': '_onAddonAttached'
73bcce88   luigser   COMPONENTS
319
320
321
322
323
324
      },
  
      observers: [
        '_focusedControlStateChanged(focused)'
      ],
  
73bcce88   luigser   COMPONENTS
325
326
327
328
329
330
331
      /**
       * Returns a reference to the input element.
       */
      get inputElement() {
        return this.$.input;
      },
  
73bcce88   luigser   COMPONENTS
332
333
      attached: function() {
        this._updateAriaLabelledBy();
73bcce88   luigser   COMPONENTS
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
      },
  
      _appendStringWithSpace: function(str, more) {
        if (str) {
          str = str + ' ' + more;
        } else {
          str = more;
        }
        return str;
      },
  
      _onAddonAttached: function(event) {
        var target = event.path ? event.path[0] : event.target;
        if (target.id) {
          this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, target.id);
        } else {
          var id = 'paper-input-add-on-' + Math.floor((Math.random() * 100000));
          target.id = id;
          this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, id);
        }
      },
  
      /**
       * Validates the input element and sets an error style if needed.
e619a3b0   Luigi Serra   Controllet cross ...
358
359
       *
       * @return {boolean}
73bcce88   luigser   COMPONENTS
360
       */
e619a3b0   Luigi Serra   Controllet cross ...
361
362
363
364
365
      validate: function() {
        return this.inputElement.validate();
      },
  
      /**
e619a3b0   Luigi Serra   Controllet cross ...
366
367
368
369
370
371
       * If `autoValidate` is true, then validates the element.
       */
      _handleAutoValidate: function() {
        if (this.autoValidate)
          this.validate();
      },
73bcce88   luigser   COMPONENTS
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
  
      /**
       * Restores the cursor to its original position after updating the value.
       * @param {string} newValue The value that should be saved.
       */
      updateValueAndPreserveCaret: function(newValue) {
        // Not all elements might have selection, and even if they have the
        // right properties, accessing them might throw an exception (like for
        // <input type=number>)
        try {
          var start = this.inputElement.selectionStart;
          this.value = newValue;
  
          // The cursor automatically jumps to the end after re-setting the value,
          // so restore it to its original position.
          this.inputElement.selectionStart = start;
          this.inputElement.selectionEnd = start;
        } catch (e) {
          // Just set the value and give up on the caret.
          this.value = newValue;
        }
      },
  
      _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) {
        return placeholder || alwaysFloatLabel;
      },
  
      _focusedControlStateChanged: function(focused) {
        // IronControlState stops the focus and blur events in order to redispatch them on the host
        // element, but paper-input-container listens to those events. Since there are more
        // pending work on focus/blur in IronControlState, I'm putting in this hack to get the
        // input focus state working for now.
        if (!this.$.container) {
          this.$.container = Polymer.dom(this.root).querySelector('paper-input-container');
          if (!this.$.container) {
            return;
          }
        }
        if (focused) {
          this.$.container._onFocus();
        } else {
          this.$.container._onBlur();
        }
      },
  
      _updateAriaLabelledBy: function() {
        var label = Polymer.dom(this.root).querySelector('label');
        if (!label) {
          this._ariaLabelledBy = '';
          return;
        }
        var labelledBy;
        if (label.id) {
          labelledBy = label.id;
        } else {
          labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds();
          label.id = labelledBy;
        }
        this._ariaLabelledBy = labelledBy;
e619a3b0   Luigi Serra   Controllet cross ...
431
432
433
434
435
436
437
438
439
440
441
442
443
      },
  
      _onChange:function(event) {
        // In the Shadow DOM, the `change` event is not leaked into the
        // ancestor tree, so we must do this manually.
        // See https://w3c.github.io/webcomponents/spec/shadow/#events-that-are-not-leaked-into-ancestor-trees.
        if (this.shadowRoot) {
          this.fire(event.type, {sourceEvent: event}, {
            node: this,
            bubbles: event.bubbles,
            cancelable: event.cancelable
          });
        }
73bcce88   luigser   COMPONENTS
444
      }
c5169e0e   Renato De Donato   a new hope
445
  
73bcce88   luigser   COMPONENTS
446
447
448
    };
  
    /** @polymerBehavior */
c5169e0e   Renato De Donato   a new hope
449
450
    Polymer.PaperInputBehavior = [Polymer.IronControlState, Polymer.PaperInputBehaviorImpl];
  
73bcce88   luigser   COMPONENTS
451
  </script>