Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(39)

Unified Diff: third_party/polymer/v0_8/components-chromium/paper-input/paper-input-behavior-extracted.js

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/v0_8/components-chromium/paper-input/paper-input-behavior-extracted.js
diff --git a/third_party/polymer/v0_8/components-chromium/paper-input/paper-input-behavior-extracted.js b/third_party/polymer/v0_8/components-chromium/paper-input/paper-input-behavior-extracted.js
index b7c06ad16f24f774982d44a3b9dbd77ada292160..2a0d54c4b5aec7eec1da66aeb551c8131412d8d0 100644
--- a/third_party/polymer/v0_8/components-chromium/paper-input/paper-input-behavior-extracted.js
+++ b/third_party/polymer/v0_8/components-chromium/paper-input/paper-input-behavior-extracted.js
@@ -1,18 +1,29 @@
+ /**
+ * 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,
@@ -20,7 +31,8 @@
},
/**
- * 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,
@@ -28,28 +40,49 @@
},
/**
- * 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,
@@ -57,14 +90,16 @@
},
/**
- * 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
@@ -79,7 +114,8 @@
},
/**
- * 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,
@@ -87,20 +123,158 @@
},
/**
- * 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;
}
};

Powered by Google App Engine
This is Rietveld 408576698