Index: third_party/polymer/v0_8/components/paper-input/paper-input-behavior.html |
diff --git a/third_party/polymer/v0_8/components/paper-input/paper-input-behavior.html b/third_party/polymer/v0_8/components/paper-input/paper-input-behavior.html |
index 50c5cb085371091cc54c9df63fd240d3b3b357d9..06a4e545c5e5dada539da2342944a0551c52acb8 100644 |
--- a/third_party/polymer/v0_8/components/paper-input/paper-input-behavior.html |
+++ b/third_party/polymer/v0_8/components/paper-input/paper-input-behavior.html |
@@ -9,25 +9,32 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
--> |
<link rel="import" href="../polymer/polymer.html"> |
-<!-- |
-Use `Polymer.PaperInputBehavior` to implement your own `<paper-input>`. |
---> |
- |
<script> |
+ /** |
+ * 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 = { |
properties: { |
/** |
- * The label for this input. |
+ * The label for this input. Bind this to `<paper-input-container>`'s `label` property. |
*/ |
label: { |
type: String |
}, |
/** |
- * The value for this input. |
+ * The value for this input. Bind this to the `<input is="iron-input">`'s `bindValue` |
+ * property, or the value property of your input that is `notify:true`. |
*/ |
value: { |
notify: true, |
@@ -35,7 +42,8 @@ Use `Polymer.PaperInputBehavior` to implement your own `<paper-input>`. |
}, |
/** |
- * Set to true to disable this input. |
+ * Set to true to disable this input. Bind this to both the `<paper-input-container>`'s |
+ * and the input's `disabled` property. |
*/ |
disabled: { |
type: Boolean, |
@@ -43,28 +51,49 @@ Use `Polymer.PaperInputBehavior` to implement your own `<paper-input>`. |
}, |
/** |
- * Set to true to prevent the user from entering invalid input. |
+ * Returns true if the value is invalid. Bind this to both the `<paper-input-container>`'s |
+ * and the input's `invalid` property. |
+ */ |
+ invalid: { |
+ type: Boolean, |
+ value: false |
+ }, |
+ |
+ /** |
+ * Set to true to prevent the user from entering invalid input. Bind this to the |
+ * `<input is="iron-input">`'s `preventInvalidInput` property. |
*/ |
preventInvalidInput: { |
type: Boolean |
}, |
/** |
- * The type of the input. The supported types are `text`, `number` and `password`. |
+ * Set this to specify the pattern allowed by `preventInvalidInput`. Bind this to the |
+ * `<input is="iron-input">`'s `allowedPattern` property. |
+ */ |
+ allowedPattern: { |
+ type: String |
+ }, |
+ |
+ /** |
+ * The type of the input. The supported types are `text`, `number` and `password`. Bind this |
+ * to the `<input is="iron-input">`'s `type` property. |
*/ |
type: { |
type: String |
}, |
/** |
- * A pattern to validate the `input` with. |
+ * A pattern to validate the `input` with. Bind this to the `<input is="iron-input">`'s |
+ * `pattern` property. |
*/ |
pattern: { |
type: String |
}, |
/** |
- * Set to true to mark the input as required. |
+ * Set to true to mark the input as required. Bind this to the `<input is="iron-input">`'s |
+ * `required` property. |
*/ |
required: { |
type: Boolean, |
@@ -72,14 +101,16 @@ Use `Polymer.PaperInputBehavior` to implement your own `<paper-input>`. |
}, |
/** |
- * The maximum length of the input value. |
+ * The maximum length of the input value. Bind this to the `<input is="iron-input">`'s |
+ * `maxlength` property. |
*/ |
maxlength: { |
type: Number |
}, |
/** |
- * The error message to display when the input is invalid. |
+ * The error message to display when the input is invalid. Bind this to the |
+ * `<paper-input-error>`'s content, if using. |
*/ |
errorMessage: { |
type: String |
@@ -94,7 +125,8 @@ Use `Polymer.PaperInputBehavior` to implement your own `<paper-input>`. |
}, |
/** |
- * Set to true to disable the floating label. |
+ * Set to true to disable the floating label. Bind this to the `<paper-input-container>`'s |
+ * `noLabelFloat` property. |
*/ |
noLabelFloat: { |
type: Boolean, |
@@ -102,20 +134,158 @@ Use `Polymer.PaperInputBehavior` to implement your own `<paper-input>`. |
}, |
/** |
- * Set to true to auto-validate the input value. |
+ * Set to true to always float the label. Bind this to the `<paper-input-container>`'s |
+ * `alwaysFloatLabel` property. |
+ */ |
+ alwaysFloatLabel: { |
+ type: Boolean, |
+ value: false |
+ }, |
+ |
+ /** |
+ * Set to true to auto-validate the input value. Bind this to the `<paper-input-container>`'s |
+ * `autoValidate` property. |
*/ |
autoValidate: { |
type: Boolean, |
value: false |
+ }, |
+ |
+ /** |
+ * Name of the validator to use. Bind this to the `<input is="iron-input">`'s `validator` |
+ * property. |
+ */ |
+ validator: { |
+ type: String |
+ }, |
+ |
+ // HTMLInputElement attributes for binding if needed |
+ |
+ /** |
+ * Bind this to the `<input is="iron-input">`'s `autocomplete` property. |
+ */ |
+ autocomplete: { |
+ type: String, |
+ value: 'off' |
+ }, |
+ |
+ /** |
+ * Bind this to the `<input is="iron-input">`'s `autofocus` property. |
+ */ |
+ autofocus: { |
+ type: Boolean |
+ }, |
+ |
+ /** |
+ * Bind this to the `<input is="iron-input">`'s `inputmode` property. |
+ */ |
+ inputmode: { |
+ type: String |
+ }, |
+ |
+ /** |
+ * Bind this to the `<input is="iron-input">`'s `minlength` property. |
+ */ |
+ minlength: { |
+ type: Number |
+ }, |
+ |
+ /** |
+ * Bind this to the `<input is="iron-input">`'s `name` property. |
+ */ |
+ name: { |
+ type: String |
+ }, |
+ |
+ /** |
+ * A placeholder string in addition to the label. If this is set, the label will always float. |
+ */ |
+ placeholder: { |
+ type: String |
+ }, |
+ |
+ /** |
+ * Bind this to the `<input is="iron-input">`'s `readonly` property. |
+ */ |
+ readonly: { |
+ type: Boolean, |
+ value: false |
+ }, |
+ |
+ /** |
+ * Bind this to the `<input is="iron-input">`'s `size` property. |
+ */ |
+ size: { |
+ type: Number |
+ }, |
+ |
+ _ariaDescribedBy: { |
+ type: String, |
+ value: '' |
} |
}, |
+ listeners: { |
+ 'addon-attached': '_onAddonAttached' |
+ }, |
+ |
/** |
* Returns a reference to the input element. |
*/ |
get inputElement() { |
return this.$.input; |
+ }, |
+ |
+ attached: function() { |
+ this._updateAriaLabelledBy(); |
+ }, |
+ |
+ _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. |
+ */ |
+ validate: function () { |
+ return this.inputElement.validate(); |
+ }, |
+ |
+ _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) { |
+ return placeholder || alwaysFloatLabel; |
+ }, |
+ |
+ _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; |
} |
}; |