material_design_lite-sass 1.0.2.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +6 -0
  3. data/lib/material_design_lite/sass/version.rb +1 -1
  4. data/vendor/assets/javascripts/material.js +2562 -2993
  5. data/vendor/assets/javascripts/material/button.js +114 -112
  6. data/vendor/assets/javascripts/material/checkbox.js +255 -260
  7. data/vendor/assets/javascripts/material/data-table.js +140 -124
  8. data/vendor/assets/javascripts/material/icon-toggle.js +239 -243
  9. data/vendor/assets/javascripts/material/layout.js +392 -388
  10. data/vendor/assets/javascripts/material/mdlComponentHandler.js +68 -27
  11. data/vendor/assets/javascripts/material/menu.js +430 -414
  12. data/vendor/assets/javascripts/material/progress.js +110 -97
  13. data/vendor/assets/javascripts/material/radio.js +244 -247
  14. data/vendor/assets/javascripts/material/ripple.js +220 -211
  15. data/vendor/assets/javascripts/material/slider.js +228 -228
  16. data/vendor/assets/javascripts/material/spinner.js +122 -119
  17. data/vendor/assets/javascripts/material/switch.js +246 -250
  18. data/vendor/assets/javascripts/material/tabs.js +129 -127
  19. data/vendor/assets/javascripts/material/textfield.js +221 -222
  20. data/vendor/assets/javascripts/material/tooltip.js +126 -122
  21. data/vendor/assets/stylesheets/material/_badge.scss +1 -1
  22. data/vendor/assets/stylesheets/material/_button.scss +15 -8
  23. data/vendor/assets/stylesheets/material/_card.scss +1 -1
  24. data/vendor/assets/stylesheets/material/_checkbox.scss +1 -1
  25. data/vendor/assets/stylesheets/material/_data-table.scss +5 -3
  26. data/vendor/assets/stylesheets/material/_functions.scss +16 -0
  27. data/vendor/assets/stylesheets/material/_grid.scss +11 -20
  28. data/vendor/assets/stylesheets/material/_layout.scss +7 -5
  29. data/vendor/assets/stylesheets/material/_menu.scss +4 -1
  30. data/vendor/assets/stylesheets/material/_radio.scss +1 -1
  31. data/vendor/assets/stylesheets/material/_slider.scss +1 -0
  32. data/vendor/assets/stylesheets/material/_switch.scss +1 -1
  33. data/vendor/assets/stylesheets/material/_tabs.scss +1 -1
  34. data/vendor/assets/stylesheets/material/_textfield.scss +15 -5
  35. data/vendor/assets/stylesheets/material/_tooltip.scss +2 -2
  36. data/vendor/assets/stylesheets/material/_variables.scss +18 -43
  37. data/vendor/assets/stylesheets/material/resets/_h5bp.scss +28 -21
  38. metadata +1 -1
@@ -15,138 +15,140 @@
15
15
  * limitations under the License.
16
16
  */
17
17
 
18
- /**
19
- * Class constructor for Tabs MDL component.
20
- * Implements MDL component design pattern defined at:
21
- * https://github.com/jasonmayes/mdl-component-design-pattern
22
- * @param {HTMLElement} element The element that will be upgraded.
23
- */
24
- function MaterialTabs(element) {
25
- 'use strict';
26
-
27
- // Stores the HTML element.
28
- this.element_ = element;
29
-
30
- // Initialize instance.
31
- this.init();
32
- }
33
-
34
- /**
35
- * Store constants in one place so they can be updated easily.
36
- * @enum {string}
37
- * @private
38
- */
39
- MaterialTabs.prototype.Constant_ = {
40
- // None at the moment.
41
- };
42
-
43
- /**
44
- * Store strings for class names defined by this component that are used in
45
- * JavaScript. This allows us to simply change it in one place should we
46
- * decide to modify at a later date.
47
- * @enum {string}
48
- * @private
49
- */
50
- MaterialTabs.prototype.CssClasses_ = {
51
- TAB_CLASS: 'mdl-tabs__tab',
52
- PANEL_CLASS: 'mdl-tabs__panel',
53
- ACTIVE_CLASS: 'is-active',
54
- UPGRADED_CLASS: 'is-upgraded',
55
-
56
- MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
57
- MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
58
- MDL_RIPPLE: 'mdl-ripple',
59
- MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
60
- };
61
-
62
- /**
63
- * Handle clicks to a tabs component
64
- * @private
65
- */
66
- MaterialTabs.prototype.initTabs_ = function(e) {
67
- 'use strict';
68
-
69
- if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
70
- this.element_.classList.add(
71
- this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
72
- }
73
-
74
- // Select element tabs, document panels
75
- this.tabs_ = this.element_.querySelectorAll('.' + this.CssClasses_.TAB_CLASS);
76
- this.panels_ =
77
- this.element_.querySelectorAll('.' + this.CssClasses_.PANEL_CLASS);
78
-
79
- // Create new tabs for each tab element
80
- for (var i = 0; i < this.tabs_.length; i++) {
81
- new MaterialTab(this.tabs_[i], this);
82
- }
83
-
84
- this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS);
85
- };
86
-
87
- /**
88
- * Reset tab state, dropping active classes
89
- * @private
90
- */
91
- MaterialTabs.prototype.resetTabState_ = function() {
18
+ (function() {
92
19
  'use strict';
93
20
 
94
- for (var k = 0; k < this.tabs_.length; k++) {
95
- this.tabs_[k].classList.remove(this.CssClasses_.ACTIVE_CLASS);
96
- }
97
- };
98
-
99
- /**
100
- * Reset panel state, droping active classes
101
- * @private
102
- */
103
- MaterialTabs.prototype.resetPanelState_ = function() {
104
- 'use strict';
105
-
106
- for (var j = 0; j < this.panels_.length; j++) {
107
- this.panels_[j].classList.remove(this.CssClasses_.ACTIVE_CLASS);
108
- }
109
- };
110
-
111
- MaterialTabs.prototype.init = function() {
112
- 'use strict';
113
-
114
- if (this.element_) {
115
- this.initTabs_();
116
- }
117
- };
21
+ /**
22
+ * Class constructor for Tabs MDL component.
23
+ * Implements MDL component design pattern defined at:
24
+ * https://github.com/jasonmayes/mdl-component-design-pattern
25
+ *
26
+ * @param {HTMLElement} element The element that will be upgraded.
27
+ */
28
+ var MaterialTabs = function MaterialTabs(element) {
29
+ // Stores the HTML element.
30
+ this.element_ = element;
31
+
32
+ // Initialize instance.
33
+ this.init();
34
+ };
35
+ window.MaterialTabs = MaterialTabs;
36
+
37
+ /**
38
+ * Store constants in one place so they can be updated easily.
39
+ *
40
+ * @enum {String}
41
+ * @private
42
+ */
43
+ MaterialTabs.prototype.Constant_ = {
44
+ // None at the moment.
45
+ };
46
+
47
+ /**
48
+ * Store strings for class names defined by this component that are used in
49
+ * JavaScript. This allows us to simply change it in one place should we
50
+ * decide to modify at a later date.
51
+ *
52
+ * @enum {String}
53
+ * @private
54
+ */
55
+ MaterialTabs.prototype.CssClasses_ = {
56
+ TAB_CLASS: 'mdl-tabs__tab',
57
+ PANEL_CLASS: 'mdl-tabs__panel',
58
+ ACTIVE_CLASS: 'is-active',
59
+ UPGRADED_CLASS: 'is-upgraded',
60
+
61
+ MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
62
+ MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
63
+ MDL_RIPPLE: 'mdl-ripple',
64
+ MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
65
+ };
66
+
67
+ /**
68
+ * Handle clicks to a tabs component
69
+ *
70
+ * @private
71
+ */
72
+ MaterialTabs.prototype.initTabs_ = function() {
73
+ if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
74
+ this.element_.classList.add(
75
+ this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
76
+ }
118
77
 
119
- function MaterialTab(tab, ctx) {
120
- 'use strict';
78
+ // Select element tabs, document panels
79
+ this.tabs_ = this.element_.querySelectorAll('.' + this.CssClasses_.TAB_CLASS);
80
+ this.panels_ =
81
+ this.element_.querySelectorAll('.' + this.CssClasses_.PANEL_CLASS);
121
82
 
122
- if (tab) {
123
- if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
124
- var rippleContainer = document.createElement('span');
125
- rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER);
126
- rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT);
127
- var ripple = document.createElement('span');
128
- ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE);
129
- rippleContainer.appendChild(ripple);
130
- tab.appendChild(rippleContainer);
83
+ // Create new tabs for each tab element
84
+ for (var i = 0; i < this.tabs_.length; i++) {
85
+ new MaterialTab(this.tabs_[i], this);
131
86
  }
132
87
 
133
- tab.addEventListener('click', function(e) {
134
- e.preventDefault();
135
- var href = tab.href.split('#')[1];
136
- var panel = ctx.element_.querySelector('#' + href);
137
- ctx.resetTabState_();
138
- ctx.resetPanelState_();
139
- tab.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
140
- panel.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
141
- });
88
+ this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS);
89
+ };
90
+
91
+ /**
92
+ * Reset tab state, dropping active classes
93
+ *
94
+ * @private
95
+ */
96
+ MaterialTabs.prototype.resetTabState_ = function() {
97
+ for (var k = 0; k < this.tabs_.length; k++) {
98
+ this.tabs_[k].classList.remove(this.CssClasses_.ACTIVE_CLASS);
99
+ }
100
+ };
101
+
102
+ /**
103
+ * Reset panel state, droping active classes
104
+ *
105
+ * @private
106
+ */
107
+ MaterialTabs.prototype.resetPanelState_ = function() {
108
+ for (var j = 0; j < this.panels_.length; j++) {
109
+ this.panels_[j].classList.remove(this.CssClasses_.ACTIVE_CLASS);
110
+ }
111
+ };
112
+
113
+ /**
114
+ * Initialize element.
115
+ */
116
+ MaterialTabs.prototype.init = function() {
117
+ if (this.element_) {
118
+ this.initTabs_();
119
+ }
120
+ };
121
+
122
+ function MaterialTab(tab, ctx) {
123
+ if (tab) {
124
+ if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
125
+ var rippleContainer = document.createElement('span');
126
+ rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER);
127
+ rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT);
128
+ var ripple = document.createElement('span');
129
+ ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE);
130
+ rippleContainer.appendChild(ripple);
131
+ tab.appendChild(rippleContainer);
132
+ }
133
+
134
+ tab.addEventListener('click', function(e) {
135
+ e.preventDefault();
136
+ var href = tab.href.split('#')[1];
137
+ var panel = ctx.element_.querySelector('#' + href);
138
+ ctx.resetTabState_();
139
+ ctx.resetPanelState_();
140
+ tab.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
141
+ panel.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
142
+ });
142
143
 
144
+ }
143
145
  }
144
- }
145
-
146
- // The component registers itself. It can assume componentHandler is available
147
- // in the global scope.
148
- componentHandler.register({
149
- constructor: MaterialTabs,
150
- classAsString: 'MaterialTabs',
151
- cssClass: 'mdl-js-tabs'
152
- });
146
+
147
+ // The component registers itself. It can assume componentHandler is available
148
+ // in the global scope.
149
+ componentHandler.register({
150
+ constructor: MaterialTabs,
151
+ classAsString: 'MaterialTabs',
152
+ cssClass: 'mdl-js-tabs'
153
+ });
154
+ })();
@@ -15,233 +15,232 @@
15
15
  * limitations under the License.
16
16
  */
17
17
 
18
- /**
19
- * Class constructor for Textfield MDL component.
20
- * Implements MDL component design pattern defined at:
21
- * https://github.com/jasonmayes/mdl-component-design-pattern
22
- * @param {HTMLElement} element The element that will be upgraded.
23
- */
24
- function MaterialTextfield(element) {
25
- 'use strict';
26
-
27
- this.element_ = element;
28
- this.maxRows = this.Constant_.NO_MAX_ROWS;
29
- // Initialize instance.
30
- this.init();
31
- }
32
-
33
- /**
34
- * Store constants in one place so they can be updated easily.
35
- * @enum {string | number}
36
- * @private
37
- */
38
- MaterialTextfield.prototype.Constant_ = {
39
- NO_MAX_ROWS: -1,
40
- MAX_ROWS_ATTRIBUTE: 'maxrows'
41
- };
42
-
43
- /**
44
- * Store strings for class names defined by this component that are used in
45
- * JavaScript. This allows us to simply change it in one place should we
46
- * decide to modify at a later date.
47
- * @enum {string}
48
- * @private
49
- */
50
- MaterialTextfield.prototype.CssClasses_ = {
51
- LABEL: 'mdl-textfield__label',
52
- INPUT: 'mdl-textfield__input',
53
- IS_DIRTY: 'is-dirty',
54
- IS_FOCUSED: 'is-focused',
55
- IS_DISABLED: 'is-disabled',
56
- IS_INVALID: 'is-invalid',
57
- IS_UPGRADED: 'is-upgraded'
58
- };
59
-
60
- /**
61
- * Handle input being entered.
62
- * @param {Event} event The event that fired.
63
- * @private
64
- */
65
- MaterialTextfield.prototype.onKeyDown_ = function(event) {
18
+ (function() {
66
19
  'use strict';
67
20
 
68
- var currentRowCount = event.target.value.split('\n').length;
69
- if (event.keyCode === 13) {
70
- if (currentRowCount >= this.maxRows) {
71
- event.preventDefault();
21
+ /**
22
+ * Class constructor for Textfield MDL component.
23
+ * Implements MDL component design pattern defined at:
24
+ * https://github.com/jasonmayes/mdl-component-design-pattern
25
+ *
26
+ * @param {HTMLElement} element The element that will be upgraded.
27
+ */
28
+ var MaterialTextfield = function MaterialTextfield(element) {
29
+ this.element_ = element;
30
+ this.maxRows = this.Constant_.NO_MAX_ROWS;
31
+ // Initialize instance.
32
+ this.init();
33
+ };
34
+ window.MaterialTextfield = MaterialTextfield;
35
+
36
+ /**
37
+ * Store constants in one place so they can be updated easily.
38
+ *
39
+ * @enum {String | Number}
40
+ * @private
41
+ */
42
+ MaterialTextfield.prototype.Constant_ = {
43
+ NO_MAX_ROWS: -1,
44
+ MAX_ROWS_ATTRIBUTE: 'maxrows'
45
+ };
46
+
47
+ /**
48
+ * Store strings for class names defined by this component that are used in
49
+ * JavaScript. This allows us to simply change it in one place should we
50
+ * decide to modify at a later date.
51
+ *
52
+ * @enum {String}
53
+ * @private
54
+ */
55
+ MaterialTextfield.prototype.CssClasses_ = {
56
+ LABEL: 'mdl-textfield__label',
57
+ INPUT: 'mdl-textfield__input',
58
+ IS_DIRTY: 'is-dirty',
59
+ IS_FOCUSED: 'is-focused',
60
+ IS_DISABLED: 'is-disabled',
61
+ IS_INVALID: 'is-invalid',
62
+ IS_UPGRADED: 'is-upgraded'
63
+ };
64
+
65
+ /**
66
+ * Handle input being entered.
67
+ *
68
+ * @param {Event} event The event that fired.
69
+ * @private
70
+ */
71
+ MaterialTextfield.prototype.onKeyDown_ = function(event) {
72
+ var currentRowCount = event.target.value.split('\n').length;
73
+ if (event.keyCode === 13) {
74
+ if (currentRowCount >= this.maxRows) {
75
+ event.preventDefault();
76
+ }
72
77
  }
73
- }
74
- };
75
-
76
- /**
77
- * Handle focus.
78
- * @param {Event} event The event that fired.
79
- * @private
80
- */
81
- MaterialTextfield.prototype.onFocus_ = function(event) {
82
- 'use strict';
83
-
84
- this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
85
- };
86
-
87
- /**
88
- * Handle lost focus.
89
- * @param {Event} event The event that fired.
90
- * @private
91
- */
92
- MaterialTextfield.prototype.onBlur_ = function(event) {
93
- 'use strict';
94
-
95
- this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
96
- };
97
-
98
- /**
99
- * Handle class updates.
100
- * @param {HTMLElement} button The button whose classes we should update.
101
- * @param {HTMLElement} label The label whose classes we should update.
102
- * @private
103
- */
104
- MaterialTextfield.prototype.updateClasses_ = function() {
105
- 'use strict';
106
- this.checkDisabled();
107
- this.checkValidity();
108
- this.checkDirty();
109
- };
110
-
111
- // Public methods.
112
-
113
- /**
114
- * Check the disabled state and update field accordingly.
115
- * @public
116
- */
117
- MaterialTextfield.prototype.checkDisabled = function() {
118
- 'use strict';
119
- if (this.input_.disabled) {
120
- this.element_.classList.add(this.CssClasses_.IS_DISABLED);
121
- } else {
122
- this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
123
- }
124
- };
125
-
126
- /**
127
- * Check the validity state and update field accordingly.
128
- * @public
129
- */
130
- MaterialTextfield.prototype.checkValidity = function() {
131
- 'use strict';
132
- if (this.input_.validity.valid) {
133
- this.element_.classList.remove(this.CssClasses_.IS_INVALID);
134
- } else {
135
- this.element_.classList.add(this.CssClasses_.IS_INVALID);
136
- }
137
- };
138
-
139
- /**
140
- * Check the dirty state and update field accordingly.
141
- * @public
142
- */
143
- MaterialTextfield.prototype.checkDirty = function() {
144
- 'use strict';
145
- if (this.input_.value && this.input_.value.length > 0) {
146
- this.element_.classList.add(this.CssClasses_.IS_DIRTY);
147
- } else {
148
- this.element_.classList.remove(this.CssClasses_.IS_DIRTY);
149
- }
150
- };
151
-
152
- /**
153
- * Disable text field.
154
- * @public
155
- */
156
- MaterialTextfield.prototype.disable = function() {
157
- 'use strict';
158
-
159
- this.input_.disabled = true;
160
- this.updateClasses_();
161
- };
162
-
163
- /**
164
- * Enable text field.
165
- * @public
166
- */
167
- MaterialTextfield.prototype.enable = function() {
168
- 'use strict';
169
-
170
- this.input_.disabled = false;
171
- this.updateClasses_();
172
- };
173
-
174
- /**
175
- * Update text field value.
176
- * @param {String} value The value to which to set the control (optional).
177
- * @public
178
- */
179
- MaterialTextfield.prototype.change = function(value) {
180
- 'use strict';
181
-
182
- if (value) {
183
- this.input_.value = value;
184
- }
185
- this.updateClasses_();
186
- };
187
-
188
- /**
189
- * Initialize element.
190
- */
191
- MaterialTextfield.prototype.init = function() {
192
- 'use strict';
193
-
194
- if (this.element_) {
195
- this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL);
196
- this.input_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
78
+ };
79
+
80
+ /**
81
+ * Handle focus.
82
+ *
83
+ * @param {Event} event The event that fired.
84
+ * @private
85
+ */
86
+ MaterialTextfield.prototype.onFocus_ = function(event) {
87
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
88
+ };
89
+
90
+ /**
91
+ * Handle lost focus.
92
+ *
93
+ * @param {Event} event The event that fired.
94
+ * @private
95
+ */
96
+ MaterialTextfield.prototype.onBlur_ = function(event) {
97
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
98
+ };
99
+
100
+ /**
101
+ * Handle class updates.
102
+ *
103
+ * @private
104
+ */
105
+ MaterialTextfield.prototype.updateClasses_ = function() {
106
+ this.checkDisabled();
107
+ this.checkValidity();
108
+ this.checkDirty();
109
+ };
110
+
111
+ // Public methods.
112
+
113
+ /**
114
+ * Check the disabled state and update field accordingly.
115
+ *
116
+ * @public
117
+ */
118
+ MaterialTextfield.prototype.checkDisabled = function() {
119
+ if (this.input_.disabled) {
120
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
121
+ } else {
122
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
123
+ }
124
+ };
125
+
126
+ /**
127
+ * Check the validity state and update field accordingly.
128
+ *
129
+ * @public
130
+ */
131
+ MaterialTextfield.prototype.checkValidity = function() {
132
+ if (this.input_.validity.valid) {
133
+ this.element_.classList.remove(this.CssClasses_.IS_INVALID);
134
+ } else {
135
+ this.element_.classList.add(this.CssClasses_.IS_INVALID);
136
+ }
137
+ };
138
+
139
+ /**
140
+ * Check the dirty state and update field accordingly.
141
+ *
142
+ * @public
143
+ */
144
+ MaterialTextfield.prototype.checkDirty = function() {
145
+ if (this.input_.value && this.input_.value.length > 0) {
146
+ this.element_.classList.add(this.CssClasses_.IS_DIRTY);
147
+ } else {
148
+ this.element_.classList.remove(this.CssClasses_.IS_DIRTY);
149
+ }
150
+ };
151
+
152
+ /**
153
+ * Disable text field.
154
+ *
155
+ * @public
156
+ */
157
+ MaterialTextfield.prototype.disable = function() {
158
+ this.input_.disabled = true;
159
+ this.updateClasses_();
160
+ };
161
+
162
+ /**
163
+ * Enable text field.
164
+ *
165
+ * @public
166
+ */
167
+ MaterialTextfield.prototype.enable = function() {
168
+ this.input_.disabled = false;
169
+ this.updateClasses_();
170
+ };
171
+
172
+ /**
173
+ * Update text field value.
174
+ *
175
+ * @param {String} value The value to which to set the control (optional).
176
+ * @public
177
+ */
178
+ MaterialTextfield.prototype.change = function(value) {
179
+
180
+ if (value) {
181
+ this.input_.value = value;
182
+ }
183
+ this.updateClasses_();
184
+ };
185
+
186
+ /**
187
+ * Initialize element.
188
+ */
189
+ MaterialTextfield.prototype.init = function() {
190
+
191
+ if (this.element_) {
192
+ this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL);
193
+ this.input_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
194
+
195
+ if (this.input_) {
196
+ if (this.input_.hasAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE)) {
197
+ this.maxRows = parseInt(this.input_.getAttribute(
198
+ this.Constant_.MAX_ROWS_ATTRIBUTE), 10);
199
+ if (isNaN(this.maxRows)) {
200
+ this.maxRows = this.Constant_.NO_MAX_ROWS;
201
+ }
202
+ }
197
203
 
198
- if (this.input_) {
199
- if (this.input_.hasAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE)) {
200
- this.maxRows = parseInt(this.input_.getAttribute(
201
- this.Constant_.MAX_ROWS_ATTRIBUTE), 10);
202
- if (isNaN(this.maxRows)) {
203
- this.maxRows = this.Constant_.NO_MAX_ROWS;
204
+ this.boundUpdateClassesHandler = this.updateClasses_.bind(this);
205
+ this.boundFocusHandler = this.onFocus_.bind(this);
206
+ this.boundBlurHandler = this.onBlur_.bind(this);
207
+ this.input_.addEventListener('input', this.boundUpdateClassesHandler);
208
+ this.input_.addEventListener('focus', this.boundFocusHandler);
209
+ this.input_.addEventListener('blur', this.boundBlurHandler);
210
+
211
+ if (this.maxRows !== this.Constant_.NO_MAX_ROWS) {
212
+ // TODO: This should handle pasting multi line text.
213
+ // Currently doesn't.
214
+ this.boundKeyDownHandler = this.onKeyDown_.bind(this);
215
+ this.input_.addEventListener('keydown', this.boundKeyDownHandler);
204
216
  }
205
- }
206
217
 
207
- this.boundUpdateClassesHandler = this.updateClasses_.bind(this);
208
- this.boundFocusHandler = this.onFocus_.bind(this);
209
- this.boundBlurHandler = this.onBlur_.bind(this);
210
- this.input_.addEventListener('input', this.boundUpdateClassesHandler);
211
- this.input_.addEventListener('focus', this.boundFocusHandler);
212
- this.input_.addEventListener('blur', this.boundBlurHandler);
213
-
214
- if (this.maxRows !== this.Constant_.NO_MAX_ROWS) {
215
- // TODO: This should handle pasting multi line text.
216
- // Currently doesn't.
217
- this.boundKeyDownHandler = this.onKeyDown_.bind(this);
218
- this.input_.addEventListener('keydown', this.boundKeyDownHandler);
218
+ this.updateClasses_();
219
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
219
220
  }
220
-
221
- this.updateClasses_();
222
- this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
223
221
  }
224
- }
225
- };
226
-
227
- /*
228
- * Downgrade the component
229
- */
230
- MaterialTextfield.prototype.mdlDowngrade_ = function() {
231
- 'use strict';
232
- this.input_.removeEventListener('input', this.boundUpdateClassesHandler);
233
- this.input_.removeEventListener('focus', this.boundFocusHandler);
234
- this.input_.removeEventListener('blur', this.boundBlurHandler);
235
- if (this.boundKeyDownHandler) {
236
- this.input_.removeEventListener('keydown', this.boundKeyDownHandler);
237
- }
238
- };
239
-
240
- // The component registers itself. It can assume componentHandler is available
241
- // in the global scope.
242
- componentHandler.register({
243
- constructor: MaterialTextfield,
244
- classAsString: 'MaterialTextfield',
245
- cssClass: 'mdl-js-textfield',
246
- widget: true
247
- });
222
+ };
223
+
224
+ /**
225
+ * Downgrade the component
226
+ *
227
+ * @private
228
+ */
229
+ MaterialTextfield.prototype.mdlDowngrade_ = function() {
230
+ this.input_.removeEventListener('input', this.boundUpdateClassesHandler);
231
+ this.input_.removeEventListener('focus', this.boundFocusHandler);
232
+ this.input_.removeEventListener('blur', this.boundBlurHandler);
233
+ if (this.boundKeyDownHandler) {
234
+ this.input_.removeEventListener('keydown', this.boundKeyDownHandler);
235
+ }
236
+ };
237
+
238
+ // The component registers itself. It can assume componentHandler is available
239
+ // in the global scope.
240
+ componentHandler.register({
241
+ constructor: MaterialTextfield,
242
+ classAsString: 'MaterialTextfield',
243
+ cssClass: 'mdl-js-textfield',
244
+ widget: true
245
+ });
246
+ })();