I have a finished Polymer 1 application that has not been released yet, so I decided to upgrade it to Polymer 2. In bower dependencies I used to have
"polymer": "Polymer/polymer#^1.4.0",
"platinum-elements": "PolymerElements/platinum-elements#^2.0.0",
"paper-elements": "PolymerElements/paper-elements#^1.0.7",
"neon-elements": "PolymerElements/neon-elements#^1.0.0",
"iron-elements": "PolymerElements/iron-elements#^1.0.9",
"gold-elements": "PolymerElements/gold-elements#^1.0.1",
"app-route": "PolymerElements/app-route#^1.0.1",
Digging deep I discovered, that PolymerElements/paper-elements does not really pull down version 2 of elements.
So, now my bower looks like this:
"dependencies": {
"polymer": "Polymer/polymer#^2.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
"app-route": "PolymerElements/app-route#^2.0.0",
"app-layout": "PolymerElements/app-layout#^2.0.0",
"neon-animation": "PolymerElements/neon-animation#^2.0.0",
"paper-badge": "PolymerElements/paper-badge#^2.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#^2.0.0",
"paper-button": "PolymerElements/paper-button#^2.0.0",
"paper-card": "PolymerElements/paper-card#^2.0.0",
"paper-checkbox": "PolymerElements/paper-checkbox#^2.0.0",
"paper-dialog": "PolymerElements/paper-dialog#^2.0.0",
"paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#^2.0.0",
"paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.0.0",
"paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.0",
"paper-fab": "PolymerElements/paper-fab#^2.0.0",
"paper-header-panel": "PolymerElements/paper-header-panel#^2.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
"paper-input": "PolymerElements/paper-input#^2.0.0",
"paper-item": "PolymerElements/paper-item#^2.0.0",
"paper-listbox": "PolymerElements/paper-listbox#^2.0.0",
"paper-menu-button": "PolymerElements/paper-menu-button#^2.0.0",
"paper-progress": "PolymerElements/paper-progress#^2.0.0",
"paper-radio-button": "PolymerElements/paper-radio-button#^2.0.0",
"paper-radio-group": "PolymerElements/paper-radio-group#^2.0.0",
"paper-ripple": "PolymerElements/paper-ripple#^2.0.0",
"paper-slider": "PolymerElements/paper-slider#^2.0.0",
"paper-spinner": "PolymerElements/paper-spinner#^2.0.0",
"paper-styles": "PolymerElements/paper-styles#^2.0.0",
"paper-swatch-picker": "PolymerElements/paper-swatch-picker#^2.0.0",
"paper-tabs": "PolymerElements/paper-tabs#^2.0.0",
"paper-toast": "PolymerElements/paper-toast#^2.0.0",
"paper-toggle-button": "PolymerElements/paper-toggle-button#^2.0.0",
"paper-tooltip": "PolymerElements/paper-tooltip#^2.0.0",
"iron-a11y-announcer": "PolymerElements/iron-a11y-announcer#^2.0.0",
"iron-a11y-keys": "PolymerElements/iron-a11y-keys#^2.0.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^2.0.0",
"iron-ajax": "PolymerElements/iron-ajax#^2.0.0",
"iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^2.0.0",
"iron-behaviors": "PolymerElements/iron-behaviors#^2.0.0",
"iron-collapse": "PolymerElements/iron-collapse#^2.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^2.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
"iron-doc-viewer": "PolymerElements/iron-doc-viewer#^2.0.0",
"iron-dropdown": "PolymerElements/iron-dropdown#^2.0.0",
"iron-fit-behavior": "PolymerElements/iron-fit-behavior#^2.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
"iron-icon": "PolymerElements/iron-icon#^2.0.0",
"iron-icons": "PolymerElements/iron-icons#^2.0.0",
"iron-iconset": "PolymerElements/iron-iconset#^2.0.0",
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0",
"iron-image": "PolymerElements/iron-image#^2.0.0",
"iron-jsonp-library": "PolymerElements/iron-jsonp-library#^2.0.0",
"iron-list": "PolymerElements/iron-list#^2.0.0",
"iron-location": "PolymerElements/iron-location#^2.0.0",
"iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
"iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#^2.0.0",
"iron-pages": "PolymerElements/iron-pages#^2.0.0",
"iron-swipeable-container": "PolymerElements/iron-swipeable-container#^1.0.3",
"iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#^2.0.0",
"iron-form": "PolymerElements/iron-form#^2.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^2.0.0",
"iron-input": "PolymerElements/iron-input#^2.0.0",
"iron-label": "PolymerElements/iron-label#^2.0.0",
"iron-localstorage": "PolymerElements/iron-localstorage#^2.0.0",
"iron-menu-behavior": "PolymerElements/iron-menu-behavior#^2.0.0",
"iron-meta": "PolymerElements/iron-meta#^2.0.0",
"iron-range-behavior": "PolymerElements/iron-range-behavior#^2.0.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^2.0.0",
"iron-scroll-target-behavior": "PolymerElements/iron-scroll-target-behavior#^2.0.0",
"iron-scroll-threshold": "PolymerElements/iron-scroll-threshold#^2.0.0",
"iron-selector": "PolymerElements/iron-selector#^2.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^2.0.0",
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^2.0.0",
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^2.0.0",
"gold-elements": "PolymerElements/gold-elements#^1.0.1",
"paper-date-picker": "polymer-paper-date-picker#^1.2.0",
"paper-time-picker": "bendavis78/paper-time-picker#^1.1.4",
"paper-password-input": "^2.1.0",
"vaadin-upload": "^2.0.0",
"socket.io-client": "^2.0.3",
"chart.js": "^2.6.0"
},
"ignore": [],
"resolutions": {
"iron-a11y-announcer": "1 - 2",
"webcomponentsjs": "^v1.0.0",
"polymer": "^2.0.0",
"iron-a11y-keys-behavior": "^2.0.0",
"iron-autogrow-textarea": "1 - 2",
"iron-collapse": "^2.0.0",
"iron-behaviors": "^2.0.0",
"iron-fit-behavior": "1 - 2",
"iron-dropdown": "^2.0.0",
"iron-flex-layout": "^2.0.0",
"iron-icon": "1 - 2",
"iron-iconset-svg": "1 - 2",
"iron-image": "^2.0.0",
"iron-media-query": "1 - 2",
"iron-checked-element-behavior": "^2.0.0",
"iron-list": "^2.0.0",
"iron-overlay-behavior": "1 - 2",
"iron-pages": "^2.0.0",
"iron-form-element-behavior": "^2.0.0",
"iron-input": "1 - 2",
"iron-scroll-target-behavior": "^2.0.0",
"iron-menu-behavior": "^2.0.0",
"iron-range-behavior": "1 - 2",
"iron-meta": "^2.0.0",
"iron-resizable-behavior": "^2.0.0",
"iron-selector": "^2.0.0",
"iron-validator-behavior": "^2.0.0",
"iron-validatable-behavior": "^2.0.0",
"paper-button": "^2.0.0",
"paper-icon-button": "^2.0.0",
"paper-input": "^2.0.0",
"paper-progress": "^2.0.0",
"paper-ripple": "^2.0.0",
"paper-styles": "^2.0.0",
"paper-behaviors": "^2.0.0",
"neon-animation": "^2.0.0"
}
And I'm having whole bunch of problems. Simple iron-form like this
<iron-form id="loginForm">
<form action="/" method="POST">
<paper-input name="uid" label="Username" type="text" required auto-validate></paper-input>
<paper-input name="pwd" label="Password" type="password" required auto-validate></paper-input>
<paper-button class="primary" raised on-tap="_submit">Log in
<button type="submit" class="no-style"></button>
</paper-button>
</form>
</iron-form>
Where in my element I have
_submit() {
this.$.loginForm.submit();
}
connectedCallback() {
super.connectedCallback();
this.$.loginForm.addEventListener('iron-form-presubmit', function (event) {
event.preventDefault();
myapp.auth.login(this.uid.value, this.pwd.value);
});
}
First, when I start typing username or password, the label will not float up and will show behind the username.
Second calling .submit() or .validate() on iron-form causes 'this.inputElement.validate is not a function' right here https://github.com/PolymerElements/paper-input/blob/v2.0.1/paper-input-behavior.html#L437 and that's because this.inputElement is undefined.
Am I missing something? The polymer-2-starter-kit template form polymer-cli seems to be targeting rc and hardly installs any of UI elements.
Thanks.
