@codebakery/origami
Advanced tools
@codebakery/origami - npm Package Compare versions
Comparing version 1.1.0 to 1.1.1
@@ -5,2 +5,12 @@ # Change Log | ||
| <a name="1.1.1"></a> | ||
| ## [1.1.1](https://github.com/hotforfeature/origami/compare/v1.1.0...v1.1.1) (2017-05-24) | ||
| ### Bug Fixes | ||
| * **events:** fix [emitChanges] not working with ES6-style Polymer elements ([009fdbd](https://github.com/hotforfeature/origami/commit/009fdbd)) | ||
| <a name="1.1.0"></a> | ||
@@ -7,0 +17,0 @@ # [1.1.0](https://github.com/hotforfeature/origami/compare/v1.0.1...v1.1.0) (2017-05-04) |
@@ -13,2 +13,4 @@ import { Directive, ElementRef } from '@angular/core'; | ||
| var properties_1 = {}; | ||
| this.copyKeysFrom(klass.properties, properties_1); | ||
| // Hybrid element properties and behaviors | ||
| this.copyKeysFrom(klass.prototype.properties, properties_1); | ||
@@ -15,0 +17,0 @@ if (klass.prototype.behaviors) { |
@@ -5,5 +5,5 @@ import { getCustomElements } from './customElements'; | ||
| if (elementRef && elementRef.nativeElement) { | ||
| var htmlElement = Object.getPrototypeOf(elementRef.nativeElement); | ||
| if (htmlElement && htmlElement.is) { | ||
| return getCustomElements().get(htmlElement.is); | ||
| var klass = getCustomElements().get(elementRef.nativeElement.tagName.toLowerCase()); | ||
| if (klass) { | ||
| return klass; | ||
| } | ||
@@ -10,0 +10,0 @@ else { |
@@ -43,2 +43,6 @@ export declare namespace Polymer { | ||
| Path: Polymer.Path; | ||
| Element: { | ||
| prototype: HTMLElement; | ||
| new (): HTMLElement; | ||
| }; | ||
| } | ||
@@ -45,0 +49,0 @@ declare global { |
| { | ||
| "name": "@codebakery/origami", | ||
| "version": "1.1.0", | ||
| "version": "1.1.1", | ||
| "description": "Angular + Polymer", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -82,4 +82,3 @@ [](https://travis-ci.org/hotforfeature/origami) | ||
| ``` | ||
| $ bower install --save Polymer/polymer#^2.0.0-rc.7 | ||
| $ bower install --save webcomponents/webcomponentsjs#^1.0.0-rc.11 | ||
| $ bower install --save Polymer/polymer | ||
| ``` | ||
@@ -160,7 +159,61 @@ | ||
| ### Bower | ||
| Origami bridges the gap between Angular and Polymer. It does not download elements for you. First you need to install them with bower. | ||
| ``` | ||
| $ bower install --save Polymer/polymer | ||
| $ bower install --save PolymerElements/paper-input | ||
| $ bower install --save PolymerElements/paper-button | ||
| ... | ||
| ``` | ||
| Next, import elements and polyfills in `index.html`. Elements cannot be imported from within an Angular template. | ||
| index.html | ||
| ```html | ||
| <html> | ||
| <head> | ||
| <title>Paper Crane</title> | ||
| <script src="assets/bower_components/webcomponentsjs/webcomponents-loader.js"></script> | ||
| <link href="assets/bower_components/paper-input/paper-input.html" rel="import"> | ||
| <link href="assets/bower_components/paper-button/paper-button.html" rel="import"> | ||
| </head> | ||
| <body> | ||
| <app-root>Loading...</app-root> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| ### Bootstrap | ||
| Our app should wait for polyfills to be ready before bootstrapping the main module. Additionally, we must instruct Angular not to consume `<template>` elements. | ||
| main.ts | ||
| ```ts | ||
| import { enableProdMode } from '@angular/core'; | ||
| import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; | ||
| import { webcomponentsReady } from '@codebakery/origami'; | ||
| import { AppModule } from './app/app.module'; | ||
| import { environment } from './environments/environment'; | ||
| if (environment.production) { | ||
| enableProdMode(); | ||
| } | ||
| webcomponentsReady().then(() => { | ||
| platformBrowserDynamic().bootstrapModule(AppModule, { | ||
| enableLegacyTemplate: false | ||
| }); | ||
| }); | ||
| ``` | ||
| ### Import | ||
| Import the `PolymerModule` from Origami into the app's main module and enable custom element support. That's it! | ||
| Import the `PolymerModule` from Origami into the app's main module and enable custom element schema support. That's it! | ||
| Optionally, the app can also import selectors from Origami for Polymer's collections. This is highly recommended (+10 to sanity), but is not required. | ||
| Optionally, the app can import selectors from Origami for Polymer's collections. This is highly recommended (+10 to sanity), but is not required. | ||
@@ -195,5 +248,7 @@ ```ts | ||
| ### Bootstrap | ||
| ### Markup | ||
| Add the `[emitChanges]` directive to all custom elements using two-way data binding. Optionally add `[ironControl]` to control elements that should work in Angular forms. | ||
| Add the `[emitChanges]` directive to all custom elements using two-way data binding. Add `[ironControl]` to control elements that should work in Angular forms. | ||
@@ -204,3 +259,3 @@ ```html | ||
| <form #ngForm="ngForm"> | ||
| <paper-input label="Name" emitChanges ironControl required [(ngModel)]="name"></paper-input> | ||
| <paper-input label="Name" name="name" emitChanges ironControl required [(ngModel)]="name"></paper-input> | ||
@@ -212,4 +267,6 @@ <!-- No two-way binding, [emitChanges] is not needed --> | ||
| If the app imported `PaperElementsModule`, `[emitChanges]` and `[ironControl]` are not needed for paper elements. They are still required for elements that do not have a collections module. | ||
| #### Collection Modules | ||
| If the app imported collection modules, such as `PaperElementsModule`, `[emitChanges]` and `[ironControl]` *must not be added* to elements that the collection provides selectors for. They are still required for elements that do not have a collections module. | ||
| ```html | ||
@@ -219,3 +276,3 @@ <my-custom-checkbox [(checked)]="isChecked" emitChanges></my-custom-checkbox> | ||
| <form #ngForm="ngForm"> | ||
| <paper-input label="Name" required [(ngModel)]="name"></paper-input> | ||
| <paper-input label="Name" name="name" required [(ngModel)]="name"></paper-input> | ||
@@ -222,0 +279,0 @@ <paper-button [disabled]="!ngForm.form.valid" (click)="onSubmit()">Submit</paper-button> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.36%
148949
- Lines of code
- increased by0.45%
1333
- Number of lines in readme file
- increased by26.03%
276