~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/iron-form/demo/simple-element.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
<!--
 
2
@license
 
3
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 
4
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 
5
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 
6
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 
7
Code distributed by Google as part of the polymer project is also
 
8
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 
9
-->
 
10
<link rel="import" href="../../polymer/polymer.html">
 
11
<link rel="import" href="../../iron-form-element-behavior/iron-form-element-behavior.html">
 
12
<link rel="import" href="../../iron-validatable-behavior/iron-validatable-behavior.html">
 
13
 
 
14
<dom-module id="simple-element">
 
15
  <style>
 
16
  :host([invalid]) input {
 
17
    border-color: red;
 
18
  }
 
19
  </style>
 
20
  <template>
 
21
    <input value="{{value}}" id="input">
 
22
  </template>
 
23
</dom-module>
 
24
 
 
25
<script>
 
26
 
 
27
  Polymer({
 
28
 
 
29
    is: 'simple-element',
 
30
 
 
31
    behaviors: [
 
32
      Polymer.IronFormElementBehavior,
 
33
      Polymer.IronValidatableBehavior
 
34
    ],
 
35
 
 
36
    listeners: {
 
37
      'input': '_onInput'
 
38
    },
 
39
 
 
40
    _onInput: function() {
 
41
      this.value = this.$.input.value;
 
42
    },
 
43
 
 
44
    // Overidden from Polymer.IronValidatableBehavior. Will set the `invalid`
 
45
    // attribute automatically, which should be used for styling.
 
46
    _getValidity: function() {
 
47
      return !!this.value;
 
48
    }
 
49
 
 
50
  });
 
51
 
 
52
</script>