| OLD | NEW |
| (Empty) |
| 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.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.txt | |
| 9 --> | |
| 10 | |
| 11 <link rel="import" href="../polymer/polymer.html"> | |
| 12 <link rel="import" href="../paper-styles/paper-styles.html"> | |
| 13 | |
| 14 <!-- | |
| 15 `<paper-input-container>` is a container for a `<label>`, an `<input is="iron-in
put">` or | |
| 16 `<iron-autogrow-textarea>` and optional add-on elements such as an error message
or character | |
| 17 counter, used to implement Material Design text fields. | |
| 18 | |
| 19 For example: | |
| 20 | |
| 21 <paper-input-container> | |
| 22 <label>Your name</label> | |
| 23 <input is="iron-input"> | |
| 24 </paper-input-container> | |
| 25 | |
| 26 ### Listening for input changes | |
| 27 | |
| 28 By default, it listens for changes on the `bind-value` attribute on its children
nodes and perform | |
| 29 tasks such as auto-validating and label styling when the `bind-value` changes. Y
ou can configure | |
| 30 the attribute it listens to with the `attr-for-value` attribute. | |
| 31 | |
| 32 ### Using a custom input element | |
| 33 | |
| 34 You can use a custom input element in a `<paper-input-container>`, for example t
o implement a | |
| 35 compound input field like a social security number input. The custom input eleme
nt should have the | |
| 36 `paper-input-input` class, have a `notify:true` value property and optionally im
plements | |
| 37 `Polymer.IronValidatableBehavior` if it is validatble. | |
| 38 | |
| 39 <paper-input-container attr-for-value="ssn-value"> | |
| 40 <label>Social security number</label> | |
| 41 <ssn-input class="paper-input-input"></ssn-input> | |
| 42 </paper-input-container> | |
| 43 | |
| 44 ### Validation | |
| 45 | |
| 46 If the `auto-validate` attribute is set, the input container will validate the i
nput and update | |
| 47 the container styling when the input value changes. | |
| 48 | |
| 49 ### Add-ons | |
| 50 | |
| 51 Add-ons are child elements of a `<paper-input-container>` with the `add-on` attr
ibute and | |
| 52 implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified whe
n the input value | |
| 53 or validity changes, and may implement functionality such as error messages or c
haracter counters. | |
| 54 They appear at the bottom of the input. | |
| 55 | |
| 56 ### Styling | |
| 57 | |
| 58 The following custom properties and mixins are available for styling: | |
| 59 | |
| 60 Custom property | Description | Default | |
| 61 ----------------|-------------|---------- | |
| 62 `--paper-input-container-color` | Label and underline color when the input is no
t focused | `--secondary-text-color` | |
| 63 `--paper-input-container-focus-color` | Label and underline color when the input
is focused | `--default-primary-color` | |
| 64 `--paper-input-container-invalid-color` | Label and underline color when the inp
ut is focused | `--google-red-500` | |
| 65 `--paper-input-container-input-color` | Input foreground color | `--primary-text
-color` | |
| 66 `--paper-input-container` | Mixin applied to the container | `{}` | |
| 67 `--paper-input-container-label` | Mixin applied to the label | `{}` | |
| 68 `--paper-input-container-label-focus` | Mixin applied to the label when the inpu
t is focused | `{}` | |
| 69 `--paper-input-container-input` | Mixin applied to the input | `{}` | |
| 70 `--paper-input-container-underline` | Mixin applied to the underline | `{}` | |
| 71 `--paper-input-container-underline-focus` | Mixin applied to the underline when
the input is focued | `{}` | |
| 72 `--paper-input-container-underline-disabled` | Mixin applied to the underline wh
en the input is disabled | `{}` | |
| 73 | |
| 74 This element is `display:block` by default, but you can set the `inline` attribu
te to make it | |
| 75 `display:inline-block`. | |
| 76 --> | |
| 77 <dom-module id="paper-input-container"> | |
| 78 | |
| 79 <style> | |
| 80 | |
| 81 :host { | |
| 82 display: block; | |
| 83 padding: 8px 0; | |
| 84 | |
| 85 @apply(--paper-input-container); | |
| 86 } | |
| 87 | |
| 88 :host[inline] { | |
| 89 display: inline-block; | |
| 90 } | |
| 91 | |
| 92 :host([disabled]) { | |
| 93 pointer-events: none; | |
| 94 opacity: 0.33; | |
| 95 } | |
| 96 | |
| 97 .floated-label-placeholder { | |
| 98 @apply(--paper-font-caption); | |
| 99 } | |
| 100 | |
| 101 .underline { | |
| 102 position: relative; | |
| 103 } | |
| 104 | |
| 105 .focused-line { | |
| 106 height: 2px; | |
| 107 | |
| 108 -webkit-transform-origin: center center; | |
| 109 transform-origin: center center; | |
| 110 -webkit-transform: scale3d(0,1,1); | |
| 111 transform: scale3d(0,1,1); | |
| 112 | |
| 113 background: var(--paper-input-container-focus-color, --default-primary-col
or); | |
| 114 | |
| 115 @apply(--paper-input-container-underline-focus); | |
| 116 } | |
| 117 | |
| 118 .underline.is-highlighted .focused-line { | |
| 119 -webkit-transform: none; | |
| 120 transform: none; | |
| 121 -webkit-transition: -webkit-transform 0.25s; | |
| 122 transition: transform 0.25s; | |
| 123 | |
| 124 @apply(--paper-transition-easing); | |
| 125 } | |
| 126 | |
| 127 .underline.is-invalid .focused-line { | |
| 128 background: var(--paper-input-container-invalid-color, --google-red-500); | |
| 129 | |
| 130 -webkit-transform: none; | |
| 131 transform: none; | |
| 132 -webkit-transition: -webkit-transform 0.25s; | |
| 133 transition: transform 0.25s; | |
| 134 | |
| 135 @apply(--paper-transition-easing); | |
| 136 } | |
| 137 | |
| 138 .unfocused-line { | |
| 139 height: 1px; | |
| 140 background: var(--paper-input-container-color, --secondary-text-color); | |
| 141 | |
| 142 @apply(--paper-input-container-underline); | |
| 143 } | |
| 144 | |
| 145 :host([disabled]) .unfocused-line { | |
| 146 border-bottom: 1px dashed; | |
| 147 border-color: var(--paper-input-container-color, --secondary-text-color); | |
| 148 background: transparent; | |
| 149 | |
| 150 @apply(--paper-input-container-underline-disabled); | |
| 151 } | |
| 152 | |
| 153 .input-content { | |
| 154 position: relative; | |
| 155 } | |
| 156 | |
| 157 .input-content ::content label, | |
| 158 .input-content ::content .paper-input-label { | |
| 159 position: absolute; | |
| 160 top: 0; | |
| 161 right: 0; | |
| 162 left: 0; | |
| 163 font: inherit; | |
| 164 color: var(--paper-input-container-color, --secondary-text-color); | |
| 165 | |
| 166 @apply(--paper-font-subhead); | |
| 167 @apply(--paper-input-container-label); | |
| 168 } | |
| 169 | |
| 170 .input-content.label-is-floating ::content label, | |
| 171 .input-content.label-is-floating ::content .paper-input-label { | |
| 172 -webkit-transform: translate3d(0, -75%, 0) scale(0.75); | |
| 173 transform: translate3d(0, -75%, 0) scale(0.75); | |
| 174 -webkit-transform-origin: left top; | |
| 175 transform-origin: left top; | |
| 176 -webkit-transition: -webkit-transform 0.25s; | |
| 177 transition: transform 0.25s; | |
| 178 | |
| 179 @apply(--paper-transition-easing); | |
| 180 } | |
| 181 | |
| 182 .input-content.label-is-highlighted ::content label, | |
| 183 .input-content.label-is-highlighted ::content .paper-input-label { | |
| 184 color: var(--paper-input-container-focus-color, --default-primary-color); | |
| 185 | |
| 186 @apply(--paper-input-container-label-focus); | |
| 187 } | |
| 188 | |
| 189 .input-content.is-invalid ::content label, | |
| 190 .input-content.is-invalid ::content .paper-input-label { | |
| 191 color: var(--paper-input-container-invalid-color, --google-red-500); | |
| 192 } | |
| 193 | |
| 194 .input-content.label-is-hidden ::content label, | |
| 195 .input-content.label-is-hidden ::content .paper-input-label { | |
| 196 visibility: hidden; | |
| 197 } | |
| 198 | |
| 199 .input-content ::content input, | |
| 200 .input-content ::content textarea, | |
| 201 .input-content ::content iron-autogrow-textarea, | |
| 202 .input-content ::content .paper-input-input { | |
| 203 position: relative; /* to make a stacking context */ | |
| 204 outline: none; | |
| 205 box-shadow: none; | |
| 206 padding: 0; | |
| 207 width: 100%; | |
| 208 background: transparent; | |
| 209 border: none; | |
| 210 color: var(--paper-input-container-input-color, --primary-text-color); | |
| 211 | |
| 212 @apply(--paper-font-subhead); | |
| 213 @apply(--paper-input-container-input); | |
| 214 } | |
| 215 | |
| 216 /* Firefox sets a min-width on the input, which can cause layout issues */ | |
| 217 .input-content ::content input { | |
| 218 min-width: 0; | |
| 219 } | |
| 220 | |
| 221 .input-content ::content textarea { | |
| 222 resize: none; | |
| 223 } | |
| 224 | |
| 225 .add-on-content.is-invalid ::content * { | |
| 226 color: var(--paper-input-container-invalid-color, --google-red-500); | |
| 227 } | |
| 228 | |
| 229 .add-on-content.is-highlighted ::content * { | |
| 230 color: var(--paper-input-container-focus-color, --default-primary-color); | |
| 231 } | |
| 232 | |
| 233 </style> | |
| 234 | |
| 235 <template> | |
| 236 | |
| 237 <template is="dom-if" if="[[!noLabelFloat]]"> | |
| 238 <div class="floated-label-placeholder"> </div> | |
| 239 </template> | |
| 240 | |
| 241 <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focus
ed,invalid,_inputHasContent)]]"> | |
| 242 <content select=":not([add-on])"></content> | |
| 243 </div> | |
| 244 | |
| 245 <div class$="[[_computeUnderlineClass(focused,invalid)]]"> | |
| 246 <div class="unfocused-line fit"></div> | |
| 247 <div class="focused-line fit"></div> | |
| 248 </div> | |
| 249 | |
| 250 <div class$="[[_computeAddOnContentClass(focused,invalid)]]"> | |
| 251 <content id="addOnContent" select="[add-on]"></content> | |
| 252 </div> | |
| 253 | |
| 254 </template> | |
| 255 | |
| 256 </dom-module> | |
| 257 | |
| 258 <script> | |
| 259 (function() { | |
| 260 | |
| 261 Polymer({ | |
| 262 | |
| 263 is: 'paper-input-container', | |
| 264 | |
| 265 properties: { | |
| 266 | |
| 267 /** | |
| 268 * Set to true to disable the floating label. The label disappears when th
e input value is | |
| 269 * not null. | |
| 270 */ | |
| 271 noLabelFloat: { | |
| 272 type: Boolean, | |
| 273 value: false | |
| 274 }, | |
| 275 | |
| 276 /** | |
| 277 * Set to true to always float the floating label. | |
| 278 */ | |
| 279 alwaysFloatLabel: { | |
| 280 type: Boolean, | |
| 281 value: false | |
| 282 }, | |
| 283 | |
| 284 /** | |
| 285 * The attribute to listen for value changes on. | |
| 286 */ | |
| 287 attrForValue: { | |
| 288 type: String, | |
| 289 value: 'bind-value' | |
| 290 }, | |
| 291 | |
| 292 /** | |
| 293 * Set to true to auto-validate the input value when it changes. | |
| 294 */ | |
| 295 autoValidate: { | |
| 296 type: Boolean, | |
| 297 value: false | |
| 298 }, | |
| 299 | |
| 300 /** | |
| 301 * True if the input is invalid. This property is set automatically when t
he input value | |
| 302 * changes if auto-validating, or when the `iron-input-valid` event is hea
rd from a child. | |
| 303 */ | |
| 304 invalid: { | |
| 305 observer: '_invalidChanged', | |
| 306 type: Boolean, | |
| 307 value: false | |
| 308 }, | |
| 309 | |
| 310 /** | |
| 311 * True if the input has focus. | |
| 312 */ | |
| 313 focused: { | |
| 314 readOnly: true, | |
| 315 type: Boolean, | |
| 316 value: false | |
| 317 }, | |
| 318 | |
| 319 _addons: { | |
| 320 type: Array | |
| 321 // do not set a default value here intentionally - it will be initialize
d lazily when a | |
| 322 // distributed child is attached, which may occur before configuration f
or this element | |
| 323 // in polyfill. | |
| 324 }, | |
| 325 | |
| 326 _inputHasContent: { | |
| 327 type: Boolean, | |
| 328 value: false | |
| 329 }, | |
| 330 | |
| 331 _inputSelector: { | |
| 332 type: String, | |
| 333 value: 'input,textarea,.paper-input-input' | |
| 334 }, | |
| 335 | |
| 336 _boundOnFocus: { | |
| 337 type: Function, | |
| 338 value: function() { | |
| 339 return this._onFocus.bind(this); | |
| 340 } | |
| 341 }, | |
| 342 | |
| 343 _boundOnBlur: { | |
| 344 type: Function, | |
| 345 value: function() { | |
| 346 return this._onBlur.bind(this); | |
| 347 } | |
| 348 }, | |
| 349 | |
| 350 _boundOnInput: { | |
| 351 type: Function, | |
| 352 value: function() { | |
| 353 return this._onInput.bind(this); | |
| 354 } | |
| 355 }, | |
| 356 | |
| 357 _boundValueChanged: { | |
| 358 type: Function, | |
| 359 value: function() { | |
| 360 return this._onValueChanged.bind(this); | |
| 361 } | |
| 362 } | |
| 363 | |
| 364 }, | |
| 365 | |
| 366 listeners: { | |
| 367 'addon-attached': '_onAddonAttached', | |
| 368 'iron-input-validate': '_onIronInputValidate' | |
| 369 }, | |
| 370 | |
| 371 get _valueChangedEvent() { | |
| 372 return this.attrForValue + '-changed'; | |
| 373 }, | |
| 374 | |
| 375 get _propertyForValue() { | |
| 376 return Polymer.CaseMap.dashToCamelCase(this.attrForValue); | |
| 377 }, | |
| 378 | |
| 379 get _inputElement() { | |
| 380 return Polymer.dom(this).querySelector(this._inputSelector); | |
| 381 }, | |
| 382 | |
| 383 ready: function() { | |
| 384 if (!this._addons) { | |
| 385 this._addons = []; | |
| 386 } | |
| 387 this.addEventListener('focus', this._boundOnFocus, true); | |
| 388 this.addEventListener('blur', this._boundOnBlur, true); | |
| 389 if (this.attrForValue) { | |
| 390 this._inputElement.addEventListener(this._valueChangedEvent, this._bound
ValueChanged); | |
| 391 } else { | |
| 392 this.addEventListener('input', this._onInput); | |
| 393 } | |
| 394 }, | |
| 395 | |
| 396 attached: function() { | |
| 397 this._handleValue(this._inputElement); | |
| 398 }, | |
| 399 | |
| 400 _onAddonAttached: function(event) { | |
| 401 if (!this._addons) { | |
| 402 this._addons = []; | |
| 403 } | |
| 404 var target = event.target; | |
| 405 if (this._addons.indexOf(target) === -1) { | |
| 406 this._addons.push(target); | |
| 407 if (this.isAttached) { | |
| 408 this._handleValue(this._inputElement); | |
| 409 } | |
| 410 } | |
| 411 }, | |
| 412 | |
| 413 _onFocus: function() { | |
| 414 this._setFocused(true); | |
| 415 }, | |
| 416 | |
| 417 _onBlur: function() { | |
| 418 this._setFocused(false); | |
| 419 }, | |
| 420 | |
| 421 _onInput: function(event) { | |
| 422 this._handleValue(event.target); | |
| 423 }, | |
| 424 | |
| 425 _onValueChanged: function(event) { | |
| 426 this._handleValue(event.target); | |
| 427 }, | |
| 428 | |
| 429 _handleValue: function(inputElement) { | |
| 430 var value = inputElement[this._propertyForValue] || inputElement.value; | |
| 431 | |
| 432 if (this.autoValidate) { | |
| 433 var valid; | |
| 434 if (inputElement.validate) { | |
| 435 valid = inputElement.validate(value); | |
| 436 } else { | |
| 437 valid = inputElement.checkValidity(); | |
| 438 } | |
| 439 this.invalid = !valid; | |
| 440 } | |
| 441 | |
| 442 // type="number" hack needed because this.value is empty until it's valid | |
| 443 if (value || (inputElement.type === 'number' && !inputElement.checkValidit
y())) { | |
| 444 this._inputHasContent = true; | |
| 445 } else { | |
| 446 this._inputHasContent = false; | |
| 447 } | |
| 448 | |
| 449 this.updateAddons({ | |
| 450 inputElement: inputElement, | |
| 451 value: value, | |
| 452 invalid: this.invalid | |
| 453 }); | |
| 454 }, | |
| 455 | |
| 456 _onIronInputValidate: function(event) { | |
| 457 this.invalid = this._inputElement.invalid; | |
| 458 }, | |
| 459 | |
| 460 _invalidChanged: function() { | |
| 461 if (this._addons) { | |
| 462 this.updateAddons({invalid: this.invalid}); | |
| 463 } | |
| 464 }, | |
| 465 | |
| 466 /** | |
| 467 * Call this to update the state of add-ons. | |
| 468 * @param {Object} state Add-on state. | |
| 469 */ | |
| 470 updateAddons: function(state) { | |
| 471 for (var addon, index = 0; addon = this._addons[index]; index++) { | |
| 472 addon.update(state); | |
| 473 } | |
| 474 }, | |
| 475 | |
| 476 _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused,
invalid, _inputHasContent) { | |
| 477 var cls = 'input-content'; | |
| 478 if (!noLabelFloat) { | |
| 479 if (alwaysFloatLabel || _inputHasContent) { | |
| 480 cls += ' label-is-floating'; | |
| 481 if (invalid) { | |
| 482 cls += ' is-invalid'; | |
| 483 } else if (focused) { | |
| 484 cls += " label-is-highlighted"; | |
| 485 } | |
| 486 } | |
| 487 } else { | |
| 488 if (_inputHasContent) { | |
| 489 cls += ' label-is-hidden'; | |
| 490 } | |
| 491 } | |
| 492 return cls; | |
| 493 }, | |
| 494 | |
| 495 _computeUnderlineClass: function(focused, invalid) { | |
| 496 var cls = 'underline'; | |
| 497 if (invalid) { | |
| 498 cls += ' is-invalid'; | |
| 499 } else if (focused) { | |
| 500 cls += ' is-highlighted' | |
| 501 } | |
| 502 return cls; | |
| 503 }, | |
| 504 | |
| 505 _computeAddOnContentClass: function(focused, invalid) { | |
| 506 var cls = 'add-on-content'; | |
| 507 if (invalid) { | |
| 508 cls += ' is-invalid'; | |
| 509 } else if (focused) { | |
| 510 cls += ' is-highlighted' | |
| 511 } | |
| 512 return cls; | |
| 513 } | |
| 514 | |
| 515 }); | |
| 516 | |
| 517 })(); | |
| 518 </script> | |
| OLD | NEW |