Index: third_party/polymer/v1_0/components/paper-input/paper-input-container.html |
diff --git a/third_party/polymer/v1_0/components/paper-input/paper-input-container.html b/third_party/polymer/v1_0/components/paper-input/paper-input-container.html |
deleted file mode 100644 |
index bd585fa954c0de4ad7236e247012f1ff8f10ceca..0000000000000000000000000000000000000000 |
--- a/third_party/polymer/v1_0/components/paper-input/paper-input-container.html |
+++ /dev/null |
@@ -1,518 +0,0 @@ |
-<!-- |
-@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 |
---> |
- |
-<link rel="import" href="../polymer/polymer.html"> |
-<link rel="import" href="../paper-styles/paper-styles.html"> |
- |
-<!-- |
-`<paper-input-container>` is a container for a `<label>`, an `<input is="iron-input">` or |
-`<iron-autogrow-textarea>` and optional add-on elements such as an error message or character |
-counter, used to implement Material Design text fields. |
- |
-For example: |
- |
- <paper-input-container> |
- <label>Your name</label> |
- <input is="iron-input"> |
- </paper-input-container> |
- |
-### Listening for input changes |
- |
-By default, it listens for changes on the `bind-value` attribute on its children nodes and perform |
-tasks such as auto-validating and label styling when the `bind-value` changes. You can configure |
-the attribute it listens to with the `attr-for-value` attribute. |
- |
-### Using a custom input element |
- |
-You can use a custom input element in a `<paper-input-container>`, for example to implement a |
-compound input field like a social security number input. The custom input element should have the |
-`paper-input-input` class, have a `notify:true` value property and optionally implements |
-`Polymer.IronValidatableBehavior` if it is validatble. |
- |
- <paper-input-container attr-for-value="ssn-value"> |
- <label>Social security number</label> |
- <ssn-input class="paper-input-input"></ssn-input> |
- </paper-input-container> |
- |
-### Validation |
- |
-If the `auto-validate` attribute is set, the input container will validate the input and update |
-the container styling when the input value changes. |
- |
-### Add-ons |
- |
-Add-ons are child elements of a `<paper-input-container>` with the `add-on` attribute and |
-implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified when the input value |
-or validity changes, and may implement functionality such as error messages or character counters. |
-They appear at the bottom of the input. |
- |
-### Styling |
- |
-The following custom properties and mixins are available for styling: |
- |
-Custom property | Description | Default |
-----------------|-------------|---------- |
-`--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color` |
-`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color` |
-`--paper-input-container-invalid-color` | Label and underline color when the input is focused | `--google-red-500` |
-`--paper-input-container-input-color` | Input foreground color | `--primary-text-color` |
-`--paper-input-container` | Mixin applied to the container | `{}` |
-`--paper-input-container-label` | Mixin applied to the label | `{}` |
-`--paper-input-container-label-focus` | Mixin applied to the label when the input is focused | `{}` |
-`--paper-input-container-input` | Mixin applied to the input | `{}` |
-`--paper-input-container-underline` | Mixin applied to the underline | `{}` |
-`--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focued | `{}` |
-`--paper-input-container-underline-disabled` | Mixin applied to the underline when the input is disabled | `{}` |
- |
-This element is `display:block` by default, but you can set the `inline` attribute to make it |
-`display:inline-block`. |
---> |
-<dom-module id="paper-input-container"> |
- |
- <style> |
- |
- :host { |
- display: block; |
- padding: 8px 0; |
- |
- @apply(--paper-input-container); |
- } |
- |
- :host[inline] { |
- display: inline-block; |
- } |
- |
- :host([disabled]) { |
- pointer-events: none; |
- opacity: 0.33; |
- } |
- |
- .floated-label-placeholder { |
- @apply(--paper-font-caption); |
- } |
- |
- .underline { |
- position: relative; |
- } |
- |
- .focused-line { |
- height: 2px; |
- |
- -webkit-transform-origin: center center; |
- transform-origin: center center; |
- -webkit-transform: scale3d(0,1,1); |
- transform: scale3d(0,1,1); |
- |
- background: var(--paper-input-container-focus-color, --default-primary-color); |
- |
- @apply(--paper-input-container-underline-focus); |
- } |
- |
- .underline.is-highlighted .focused-line { |
- -webkit-transform: none; |
- transform: none; |
- -webkit-transition: -webkit-transform 0.25s; |
- transition: transform 0.25s; |
- |
- @apply(--paper-transition-easing); |
- } |
- |
- .underline.is-invalid .focused-line { |
- background: var(--paper-input-container-invalid-color, --google-red-500); |
- |
- -webkit-transform: none; |
- transform: none; |
- -webkit-transition: -webkit-transform 0.25s; |
- transition: transform 0.25s; |
- |
- @apply(--paper-transition-easing); |
- } |
- |
- .unfocused-line { |
- height: 1px; |
- background: var(--paper-input-container-color, --secondary-text-color); |
- |
- @apply(--paper-input-container-underline); |
- } |
- |
- :host([disabled]) .unfocused-line { |
- border-bottom: 1px dashed; |
- border-color: var(--paper-input-container-color, --secondary-text-color); |
- background: transparent; |
- |
- @apply(--paper-input-container-underline-disabled); |
- } |
- |
- .input-content { |
- position: relative; |
- } |
- |
- .input-content ::content label, |
- .input-content ::content .paper-input-label { |
- position: absolute; |
- top: 0; |
- right: 0; |
- left: 0; |
- font: inherit; |
- color: var(--paper-input-container-color, --secondary-text-color); |
- |
- @apply(--paper-font-subhead); |
- @apply(--paper-input-container-label); |
- } |
- |
- .input-content.label-is-floating ::content label, |
- .input-content.label-is-floating ::content .paper-input-label { |
- -webkit-transform: translate3d(0, -75%, 0) scale(0.75); |
- transform: translate3d(0, -75%, 0) scale(0.75); |
- -webkit-transform-origin: left top; |
- transform-origin: left top; |
- -webkit-transition: -webkit-transform 0.25s; |
- transition: transform 0.25s; |
- |
- @apply(--paper-transition-easing); |
- } |
- |
- .input-content.label-is-highlighted ::content label, |
- .input-content.label-is-highlighted ::content .paper-input-label { |
- color: var(--paper-input-container-focus-color, --default-primary-color); |
- |
- @apply(--paper-input-container-label-focus); |
- } |
- |
- .input-content.is-invalid ::content label, |
- .input-content.is-invalid ::content .paper-input-label { |
- color: var(--paper-input-container-invalid-color, --google-red-500); |
- } |
- |
- .input-content.label-is-hidden ::content label, |
- .input-content.label-is-hidden ::content .paper-input-label { |
- visibility: hidden; |
- } |
- |
- .input-content ::content input, |
- .input-content ::content textarea, |
- .input-content ::content iron-autogrow-textarea, |
- .input-content ::content .paper-input-input { |
- position: relative; /* to make a stacking context */ |
- outline: none; |
- box-shadow: none; |
- padding: 0; |
- width: 100%; |
- background: transparent; |
- border: none; |
- color: var(--paper-input-container-input-color, --primary-text-color); |
- |
- @apply(--paper-font-subhead); |
- @apply(--paper-input-container-input); |
- } |
- |
- /* Firefox sets a min-width on the input, which can cause layout issues */ |
- .input-content ::content input { |
- min-width: 0; |
- } |
- |
- .input-content ::content textarea { |
- resize: none; |
- } |
- |
- .add-on-content.is-invalid ::content * { |
- color: var(--paper-input-container-invalid-color, --google-red-500); |
- } |
- |
- .add-on-content.is-highlighted ::content * { |
- color: var(--paper-input-container-focus-color, --default-primary-color); |
- } |
- |
- </style> |
- |
- <template> |
- |
- <template is="dom-if" if="[[!noLabelFloat]]"> |
- <div class="floated-label-placeholder"> </div> |
- </template> |
- |
- <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]"> |
- <content select=":not([add-on])"></content> |
- </div> |
- |
- <div class$="[[_computeUnderlineClass(focused,invalid)]]"> |
- <div class="unfocused-line fit"></div> |
- <div class="focused-line fit"></div> |
- </div> |
- |
- <div class$="[[_computeAddOnContentClass(focused,invalid)]]"> |
- <content id="addOnContent" select="[add-on]"></content> |
- </div> |
- |
- </template> |
- |
-</dom-module> |
- |
-<script> |
-(function() { |
- |
- Polymer({ |
- |
- is: 'paper-input-container', |
- |
- properties: { |
- |
- /** |
- * Set to true to disable the floating label. The label disappears when the input value is |
- * not null. |
- */ |
- noLabelFloat: { |
- type: Boolean, |
- value: false |
- }, |
- |
- /** |
- * Set to true to always float the floating label. |
- */ |
- alwaysFloatLabel: { |
- type: Boolean, |
- value: false |
- }, |
- |
- /** |
- * The attribute to listen for value changes on. |
- */ |
- attrForValue: { |
- type: String, |
- value: 'bind-value' |
- }, |
- |
- /** |
- * Set to true to auto-validate the input value when it changes. |
- */ |
- autoValidate: { |
- type: Boolean, |
- value: false |
- }, |
- |
- /** |
- * True if the input is invalid. This property is set automatically when the input value |
- * changes if auto-validating, or when the `iron-input-valid` event is heard from a child. |
- */ |
- invalid: { |
- observer: '_invalidChanged', |
- type: Boolean, |
- value: false |
- }, |
- |
- /** |
- * True if the input has focus. |
- */ |
- focused: { |
- readOnly: true, |
- type: Boolean, |
- value: false |
- }, |
- |
- _addons: { |
- type: Array |
- // do not set a default value here intentionally - it will be initialized lazily when a |
- // distributed child is attached, which may occur before configuration for this element |
- // in polyfill. |
- }, |
- |
- _inputHasContent: { |
- type: Boolean, |
- value: false |
- }, |
- |
- _inputSelector: { |
- type: String, |
- value: 'input,textarea,.paper-input-input' |
- }, |
- |
- _boundOnFocus: { |
- type: Function, |
- value: function() { |
- return this._onFocus.bind(this); |
- } |
- }, |
- |
- _boundOnBlur: { |
- type: Function, |
- value: function() { |
- return this._onBlur.bind(this); |
- } |
- }, |
- |
- _boundOnInput: { |
- type: Function, |
- value: function() { |
- return this._onInput.bind(this); |
- } |
- }, |
- |
- _boundValueChanged: { |
- type: Function, |
- value: function() { |
- return this._onValueChanged.bind(this); |
- } |
- } |
- |
- }, |
- |
- listeners: { |
- 'addon-attached': '_onAddonAttached', |
- 'iron-input-validate': '_onIronInputValidate' |
- }, |
- |
- get _valueChangedEvent() { |
- return this.attrForValue + '-changed'; |
- }, |
- |
- get _propertyForValue() { |
- return Polymer.CaseMap.dashToCamelCase(this.attrForValue); |
- }, |
- |
- get _inputElement() { |
- return Polymer.dom(this).querySelector(this._inputSelector); |
- }, |
- |
- ready: function() { |
- if (!this._addons) { |
- this._addons = []; |
- } |
- this.addEventListener('focus', this._boundOnFocus, true); |
- this.addEventListener('blur', this._boundOnBlur, true); |
- if (this.attrForValue) { |
- this._inputElement.addEventListener(this._valueChangedEvent, this._boundValueChanged); |
- } else { |
- this.addEventListener('input', this._onInput); |
- } |
- }, |
- |
- attached: function() { |
- this._handleValue(this._inputElement); |
- }, |
- |
- _onAddonAttached: function(event) { |
- if (!this._addons) { |
- this._addons = []; |
- } |
- var target = event.target; |
- if (this._addons.indexOf(target) === -1) { |
- this._addons.push(target); |
- if (this.isAttached) { |
- this._handleValue(this._inputElement); |
- } |
- } |
- }, |
- |
- _onFocus: function() { |
- this._setFocused(true); |
- }, |
- |
- _onBlur: function() { |
- this._setFocused(false); |
- }, |
- |
- _onInput: function(event) { |
- this._handleValue(event.target); |
- }, |
- |
- _onValueChanged: function(event) { |
- this._handleValue(event.target); |
- }, |
- |
- _handleValue: function(inputElement) { |
- var value = inputElement[this._propertyForValue] || inputElement.value; |
- |
- if (this.autoValidate) { |
- var valid; |
- if (inputElement.validate) { |
- valid = inputElement.validate(value); |
- } else { |
- valid = inputElement.checkValidity(); |
- } |
- this.invalid = !valid; |
- } |
- |
- // type="number" hack needed because this.value is empty until it's valid |
- if (value || (inputElement.type === 'number' && !inputElement.checkValidity())) { |
- this._inputHasContent = true; |
- } else { |
- this._inputHasContent = false; |
- } |
- |
- this.updateAddons({ |
- inputElement: inputElement, |
- value: value, |
- invalid: this.invalid |
- }); |
- }, |
- |
- _onIronInputValidate: function(event) { |
- this.invalid = this._inputElement.invalid; |
- }, |
- |
- _invalidChanged: function() { |
- if (this._addons) { |
- this.updateAddons({invalid: this.invalid}); |
- } |
- }, |
- |
- /** |
- * Call this to update the state of add-ons. |
- * @param {Object} state Add-on state. |
- */ |
- updateAddons: function(state) { |
- for (var addon, index = 0; addon = this._addons[index]; index++) { |
- addon.update(state); |
- } |
- }, |
- |
- _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) { |
- var cls = 'input-content'; |
- if (!noLabelFloat) { |
- if (alwaysFloatLabel || _inputHasContent) { |
- cls += ' label-is-floating'; |
- if (invalid) { |
- cls += ' is-invalid'; |
- } else if (focused) { |
- cls += " label-is-highlighted"; |
- } |
- } |
- } else { |
- if (_inputHasContent) { |
- cls += ' label-is-hidden'; |
- } |
- } |
- return cls; |
- }, |
- |
- _computeUnderlineClass: function(focused, invalid) { |
- var cls = 'underline'; |
- if (invalid) { |
- cls += ' is-invalid'; |
- } else if (focused) { |
- cls += ' is-highlighted' |
- } |
- return cls; |
- }, |
- |
- _computeAddOnContentClass: function(focused, invalid) { |
- var cls = 'add-on-content'; |
- if (invalid) { |
- cls += ' is-invalid'; |
- } else if (focused) { |
- cls += ' is-highlighted' |
- } |
- return cls; |
- } |
- |
- }); |
- |
-})(); |
-</script> |