hotforfeature / origami Goto Github PK

View Code? Open in Web Editor NEW

161.0 17.0 33.0 2.71 MB

Angular + Polymer

License: MIT License

TypeScript 97.65% JavaScript 2.35%

angular angular2 polymer polymer2 webcomponents material-design

origami's People

Contributors

Stargazers

Watchers

origami's Issues

Iron-list example won't work

Running the exact example at https://github.com/hotforfeature/origami#host-events
gives the error

core.es5.js:2925 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
iron-list.html:1061 iron-list requires a template to be provided in light-dom
_ensureTemplatized @ iron-list.html:1061
_createPool @ iron-list.html:953
_increasePoolIfNeeded @ iron-list.html:995
_render @ iron-list.html:1048
complete @ polymer-mini.html:2175
Debouncer.boundComplete @ polymer-mini.html:2152
_atEndOfMicrotask @ polymer-mini.html:2130
window.MutationObserver.observe.characterData @ polymer-mini.html:2145
polymer-mini.html:2136 Uncaught TypeError: Cannot read property '_content' of undefined
    at HTMLElement.templatize (polymer.html:4230)
    at HTMLElement._ensureTemplatized (iron-list.html:1070)
    at HTMLElement._createPool (iron-list.html:953)
    at HTMLElement._increasePoolIfNeeded (iron-list.html:995)
    at HTMLElement._render (iron-list.html:1048)
    at Debouncer.complete (polymer-mini.html:2175)
    at Debouncer.boundComplete (polymer-mini.html:2152)
    at Object._atEndOfMicrotask (polymer-mini.html:2130)
    at MutationObserver.window.MutationObserver.observe.characterData (polymer-mini.html:2145)

Emoji-rain, paper button and input all seem to work, but iron-list gives me this error.
putting

<div>
        Name: [[item]]
</div>

in the template instead of my-item doesn't seem to make a difference either.
Any ideas?

Support `<custom-style>` in index and component HTML

Styles should work correctly when declared in "real" HTML (i.e. the index.html or custom elements in src/assets/)

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular-Polymer Sink</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="assets/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
  <link href="assets/bower_components/paper-button/paper-button.html" rel="import">
</head>
<body>
  <custom-style>
    <style>
      paper-button {
        --paper-button-ink-color: blue;
      }
    </style>
  </custom-style>
  <app-root>Loading...</app-root>
  <script>
    window.webComponentsReady = false;
    window.addEventListener('WebComponentsReady', function() {
      window.webComponentsReady = true;
    });
  </script>
</body>
</html>

As should this

app.component.html

import { Component } from '@angular/core';

@Component({
  selector: 'app-poly',
  template: `
    <custom-style>
      <style>
        paper-button {
          --paper-button-ink-color: blue;
        }
      </style>
    </custom-style>
    <paper-button>I'm blue!</paper-button>
  `
})
export class PolyComponen { }

The latest polymer-cli works a lot better with index.html as the entrypoint. I've found that the new best way of building for production is to have the index as the entrypoint, and elements.html as the shell.

Particularly, this setup fixes changes when compiling for ES5. In the old setup, you'd get errors about babelHelpers being undefined since that global was added to elements.html, which loads async before the other JS files.

Remove symlink from demo app

The app uses a symlink to include the latest version of origami as part of the demo app's src folder. This allows it to constantly use the latest version of origami and helps with development, however it is not possible to use the demo app on Windows.

Replacing the symlink with just a relative URL to the source may not work since the demo folder has its own node_modules folder.

data binding not working for dashed style properties

Data binding is not working for dashed style property names. Has anybody else noticed this issue?

Error when using copying demo

When I followed the quick start I got the error:

AppComponent.html:6 ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form
      control must be defined as 'standalone' in ngModelOptions.

      Example 1: <input [(ngModel)]="person.firstName" name="first">
      Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

Rewrite docs for 2.0

#40 #28 #22 all indicate that the readme is confusing in its current state. It should be less verbose and show more code examples.

I usually find myself looking straight for code samples and ignoring the "install" text when using a library. The samples should explain (either obviously or through in-code comments) what is necessary.

NG4 + P-2.0 does not work in IE

My ng4+p2 app works fine in Chrome and FF, but does not load in IE. Tested in versions Edge, IE 9, IE 8

Add docs/demo on using new custom element

It's not obviously clear on how to create your own Polymer element within an Angular app. An example in the demo repository will help.

PolymerDomSharedStylesHost breaks Polymer components on non-Chrome browsers

Currently PolymerDomSharedStylesHost simply wraps styles in <custom-style> elements, but it breaks
Polymer and other web components implementing ShadowDOM v1 spec on non-Chrome browsers.

Here is an example: Polymer's app-drawer component

<app-drawer class="drawer" id="mainDrawer" swipe-open>
  <section class="drawer-content">...</section>
</app-drawer>

This works fine on Chrome and the inspector gives us the following tree:

<!-- Chrome Inspection -->
<app-drawer _ngcontent-c0="" class="drawer" id="mainDrawer" swipe-open="" ...>
  #shadow-root
    <style>
      :host { ... } /* SelectorA */
      ...
      #contentContainer {  /* SelectorB */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--app-drawer-width, 256px);
        padding: 120px 0;
        ... 
      }
      ...
      #scrim { ... }  /* SelectorC */
      ...
    </style>
    <div id="scrim" style="transition-duration: 200ms;"></div>
    <div id="contentContainer" ...>
      <slot></slot> <!-- where the section.drawer-content will be attached -->
    </div>
  <section _ngcontent-c0="" class="drawer-content">
    ...
  </section>
<app-drawer>

So #contentContainer can get styled by app-drawer styling on Chrome. But other browsers don't support ShadowDOM spec and thus ShadyCSS polyfills the component in the following.

<!-- FireFox Inspection -->
<custom-style>
  <style scope="app-drawer" is="custom-style">
    app-drawer:not(.style-scope) { ... }  /* SelectorA */
    ...
    #contentContainer.app-drawer:not(.style-scope) { ... }  /* SelectorB */
    ...
    #scrim.app-drawer:not(.style-scope) { ... }  /* SelectorC */
    ...
  </style>
</custom-style>
...
<app-drawer _ngcontent-c0="" class="drawer" id="mainDrawer" ...>
  <div id="scrim" class="style-scope app-drawer" ...></div>
  <div id="contentContainer" class="style-scope app-drawer" ...>
    <section _ngcontent-c0="" class="drawer-content">
      ...
    </section>
  </div>
</app-drawer>

As you can see, SelectorA matches app-drawer (host element), but SelectorB and SelectorC can never match #contentContainer and #scrim respectively, and eventually #mainDrawer gets broken.

Here is how app-drawer is rendered before it's a pre-custom-styled version of style[scope="app-drawer"].

<!-- FireFox Inspection -->
<custom-style>
  <style scope="app-drawer">
    app-drawer { ... } /* SelectorA */
    ...
    #contentContainer.app-drawer { ... } /* SelectorB */
    ...
    #scrim.app-drawer { ... } /* SelectorC */
    ...
  </style>
</custom-style>
...
<app-drawer _ngcontent-c0="" class="drawer" id="mainDrawer" ...>
  <div id="scrim" class="style-scope app-drawer" ...></div>
  <div id="contentContainer" class="style-scope app-drawer" ...>
    <section _ngcontent-c0="" class="drawer-content">
      ...
    </section>
  </div>
</app-drawer>

I am not sure why this happened, but I suppose the component got double polyfilled, the first time polyfilling was done correctly by referring to both of component's template and style, but second time with component polyfilling wrong by referring to only component's style as an individual.

So I suggest: PolymerDomSharedStylesHost should rather apply custom-styling to the only styles defined app-level (document-level style plus Angular components' styles) since origami handles only Angular4 + Polymer2, or at least it can provide the way to point which styles should be custom-styled.

I made changes on origami myself and it worked fine for me. I also committed my changes on a side branch and get ready to contribute my work and time to origami. (I attach a screenshot since I can't push my updates right now due to permission denied to me)

Thank you.

<ng-template polymer-template> not working in Shady DOM

Need to change .parentElement to .parentNode.

Additionally it doesn't seem like <iron-list> items bind properly until they are notified. This may all be related to dealing with detaching and re-attaching the host element.

Add separate package.json for demo app

package.json, .angular-cli.json, and polymer.json all live in Origami's root folder. These should move to the demo app to keep things separate.

How do you run the demo?

How do we run the demo contained within this project?

Use polymer-bundler and ES6 transpiler for bower components

Developers should be provided with an easy and simple solution using polymer-bundler to bundle applications for more efficient HTTP1 usage.

Polymer 2 uses ES6 classes by default, and Angular will not transpile them. This fails to support IE11 out of the box. The Polymer CLI handles transpiling when building.

Some CSS mixins in component style NOT working properly in the production build

Currently NOT sure if this problem comes from origami or Angular production mode itself.
The issue was primarily described here. The demo will be given to reproduce the issue if someone wants.

Support Object/Array mutation and MutableData

https://www.polymer-project.org/2.0/docs/devguide/data-system#make-observable-changes
https://www.polymer-project.org/2.0/docs/devguide/data-system#optional-mutable-data

If a deep change is made in Angular to an object or an array, there should be a clear and simple solution for developers to notify a Polymer element of the change.

Add Vaadin Elements to Demo Kitchen Sink

Vaadin Elements are easily some of the most used Polymer-built elements outside of Google's own collections. While Origami explicitly supports Google's collections, it'd be good to showcase other elements developers may want to use that Origami doesn't have a collections library for.

Add external stylesheet support

This really is a ShadyCSS problem, but we could add a service to automatically wrap <link rel="stylesheet">.

The service would need to wait for the links to load, then take their text content and apply them to a <custom-style><style is="custom-style">...</style></custom-style> element and replace the link with the generated content.

Support Angular<->Polymer template data host bindings

Currently it's possible to bind events to a polymer template:

@Component({
  template: `
    <template ngNonBindable [polymer]="this">
      <paper-checkbox on-checked-changed="angularMethod"></paper-checkbox>
    </template>
  `
})
export class MyComponent {
  angularMethod(e: CustomEvent) {
    console.log('click', e);
  }
}

Though it is not possible to bind data properties to any elements in a Polymer template. This is a pain point in particular for vaadin-grid's selection column.

<!-- This is fine to bind, we're not in a Polymer template -->
<vaadin-grid-selection-column [(selectAll)]="{{angularSelectAll}}" emitChanges>
  <template class="header">
    <!-- This wants to bind to a "host" element property, but it can't :( -->
    <paper-checkbox checked="{{angularSelectAll}}"></paper-checkbox>
  </template>
  <template>
    <!-- Model template, this is fine -->
    <paper-checkbox checked="{{selected}}"></paper-checkbox>
  </template>
</vaadin-grid-selection-column>

In Polymer, the host element's template sets up bindings on its children by setting the __dataHost property. We're emulating this in the polymer template directive, though we only get the host after ngOnInit(), which can fire after Polymer has already done some binding (looking at you again vaadin-grid...)

The TL;DR is I want this Polymer template:

<dom-module id="my-component">
  <template>
    <paper-checkbox checked="{{polymerProperty}}"></paper-checkbox>
  </template>
  <script>
    class MyComponent extends Polymer.Element {
      static get is() { return 'my-component'; }
      static get properties() {
        return {
          polymerProperty: Boolean
        };
      }
    }
  </script>
</dom-module>

To match this Angular template in behavior:

@Component({
  template: `
    <template ngNonBindable>
      <!-- Automagic Polymer template binding -->
      <paper-checkbox checked="{{angularProperty}}"></paper-checkbox>
    </template>
  `
})
export class MyComponent {
  @PolymerChanges() angularProperty: boolean;
}

I think this can be achieved by going through all the children of the Angular component and seeing the __dataHost property like Polymer does in setupBindings(). Ideally this will completely eliminate the need for <template polymer>.

IE 8 support?

Hi @hotforfeature
We need to support browsers down to IE 8. If I understand it correctly, this lib does not support versions earlier then IE 11, correct? If yes: Why not?

Cheers,
Marc

Clarify PolymerProperty.unwrap() parameter

Documentation should make it clear that PolymerProperty.unwrap() can take any value as a parameter, and will return the value if it is not a CustomEvent. Otherwise, it will attempt to unwrap it.

Developers do not need to do a value instanceof CustomEvent check before passing it to PolymerProperty.unwrap().

Forms throws error if origami helpers included

When I add a form field with: emitChanges ironControl For example:

            <paper-input
              [(ngModel)]="loginForm.username"
              label="asdf"
              emitChanges ironControl
              type="text"
              id="username"
              class="form-control"
              name="username" #username></paper-input>

But I import the standard polymer elements with:
import { IronElementsModule, PaperElementsModule, AppElementsModule } from '@codebakery/origami/lib/collections';

Then I get the following error:

zone.js:642 Unhandled Promise rejection: More than one custom value accessor matches form control with unspecified name attribute ; Zone: <root> ; Task: Promise.then ; Value: Error: More than one custom value accessor matches form control with unspecified name attribute

But the docs say "[emitChanges] and [ironControl] are not needed for paper elements" -> So question:

Do we ether say that these controls MUST NOT be added
Or is this a bug?

Polymer Demo breaks in Safari intermittently

When I run the demo on Safari browser, I see below error intermittently. Try refreshing the page a couple of times and the error shows up. I see this more frequently in my app where I have other custom elements (extended from paper-elements).

[Error] TypeError: null is not an object (evaluating 'n.parentNode.replaceChild')
	runTask (polyfills.bundle.js:5723)
	invokeTask (polyfills.bundle.js:6026)
	invokeTask (polyfills.bundle.js:6892)
	globalZoneAwareCallback (polyfills.bundle.js:6910)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:119)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:119)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:124)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:113)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:113)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:115)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:679)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:679)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:683)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:253)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:253)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:257)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:407)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:407)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:410)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:60)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:60)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:62)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:6)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:63)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:63)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:153)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] SyntaxError: Can't create duplicate variable: 'AngularPolymer'
	(anonymous function)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:3)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:3)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:3)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:37)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:22)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:1659)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:290)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:614)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:3)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:14)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:5)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:109)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:5)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:282)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:272)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:272)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:279)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:67)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:67)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:74)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:260)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:260)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:299)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:299)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:673)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:673)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:151)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:151)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:239)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:536)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:48)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:137)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:263)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:317)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:6)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:3)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:17)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
	define (data:text/javascript;charset=utf-8,%0A…%0A:31)
	_polymerFn (data:text/javascript;charset=utf-8,%0A…%0A:31)
	Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Warning] Could not find style data in module named – "vaadin-button-default-theme" (localhost, line 68)

OS: MacOS Sierra (10.12.6)
Safari: Version 10.1.2 (12603.3.8)

AOT compilation fails

command

ng build --prod --aot

Error

ERROR in Error encountered resolving symbol values statically. 
Could not resolve type Document (position 6:46 in the original .ts file), 
resolving symbol CustomStyleService in 
/Users/madhusudhanad/ng4/angular4-polymer/src/app/origami/src/style/custom-style.service.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 
'/Users/madhusudhanad/ng4/angular4-polymer/src'
 @ ./src/main.ts 4:0-74
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

Changing Document type to any type, AOT compilation works.

Can't get emitChanges to work

I've got a Polymer component holding property "prop2" and an Angular component using the element and two way binding.

In angular:

<my-poly-element emitChanges [(prop2)]="myProperty"></my-poly-element>
<input type="text" [(ngModel)]="myProperty">

Inside the polymer component I have:

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="my-poly-element">

  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <button on-click="handleClick2">Click me to change value</button>
    <div>[[prop2]]</div>
  </template>

  <script>
    class PolymerAppTestElement extends Polymer.Element {
      static get is() { return 'my-poly-element'; }
      static get properties() {
        return {
          prop2: {
            type: String,
            value: 'Value to be changed'
          }
        };
      }
      handleClick2() {
        this.prop2 = "Changed!"
      }
    }

    customElements.define(PolymerAppTestElement.is, PolymerAppTestElement);
  </script>
</dom-module>

When I type in the textbox, it changes the value of prop2 in Polymer, but when clicking the button in the polymer component, the textbox does not change it's value to the same as the text field (it should be "Changed!").
Where myProperty is defined as:
@PolymerChanges() myProperty: string;
I'm trying to use emitChanges to get the Polymer change detection to work with Angular change detection, but it doesn't look like the model is working. Any idea what I'm missing here? Sorry if this is an obvious/stupid question, but I couldn't figure it out from the docs.

Support SystemJS with umd bundles

Hi, I'm unable to load codebakery/origami module in my visual studio asp.net mvc application. Below is my code snippet. Can anyone help me understand what exactly is the issue here.
Thanks in advance!

-----error----

-------package.json--------

{
  "name": "patient-inquiry",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "angular/common": "^4.0.0",
    "angular/compiler": "^4.0.0",
    "angular/core": "^4.0.0",
    "angular/forms": "^4.0.0",
    "angular/http": "^4.0.0",
    "angular/platform-browser": "^4.0.0",
    "angular/platform-browser-dynamic": "^4.0.0",
    "angular/router": "^4.0.0",
    "codebakery/origami": "^1.1.2",
    "ag-grid": "^9.1.0",
    "ag-grid-angular": "^9.1.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "angular/cli": "1.0.1",
    "angular/compiler-cli": "^4.0.0",
    "types/jasmine": "2.5.38",
    "types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

------app.module.ts---------

import { BrowserModule } from 'angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from 'angular/core';
import { AgGridModule } from "ag-grid-angular/main";
import { FormsModule } from 'angular/forms';
import { HttpModule } from 'angular/http';
import { AppComponent } from './app.component';
import { PatientSearchComponent } from './patient-search/patient-search.component';
import { PatientResultsComponent } from './patient-results/patient-results.component';
import { routing } from './app.routes';
import { PolymerModule } from 'codebakery/origami';
import { IronElementsModule, PaperElementsModule } from 'codebakery/origami/lib/collections';

@NgModule({
  declarations: [
    AppComponent,
    PatientSearchComponent,
    PatientResultsComponent
  ],
  imports: [
    BrowserModule,
    AgGridModule.withComponents(
      []),
    PolymerModule,
    FormsModule,
    HttpModule,
    routing,
    IronElementsModule,
    PaperElementsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

------main.ts------------

import { enableProdMode } from 'angular/core';
import { platformBrowserDynamic } from 'angular/platform-browser-dynamic';
import { webcomponentsReady } from 'codebakery/origami';

import { AppModule } from './app/app.module';


 //platformBrowserDynamic().bootstrapModule(AppModule);

webcomponentsReady().then(() => {
  platformBrowserDynamic().bootstrapModule(AppModule, {
    enableLegacyTemplate: false
  });
}).catch(error => {
  // No WebComponent support and webcomponentsjs is not loaded
  console.error(error);
});

-----systemjs.config.js--------

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the src folder
            app: 'src',
            // angular bundles
            'angular/core': 'npm: angular/core/bundles/core.umd.js',
            'angular/common': 'npm: angular/common/bundles/common.umd.js',
            'angular/compiler': 'npm: angular/compiler/bundles/compiler.umd.js',
            'angular/platform-browser': 'npm: angular/platform-browser/bundles/platform-browser.umd.js',
            'angular/platform-browser-dynamic': 'npm: angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            'angular/http': 'npm: angular/http/bundles/http.umd.js',
            'angular/router': 'npm: angular/router/bundles/router.umd.js',
            'angular/forms': 'npm: angular/forms/bundles/forms.umd.js',

            '@angular/animations': 'node_modules/@angular/animations/bundles/animations.umd.min.js',
            '@angular/animations/browser': 'node_modules/@angular/animations/bundles/animations-browser.umd.js',
            '@angular/platform-browser/animations': 'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js',

            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'hammerjs': 'npm:hammerjs',
            // ag libraries
            'ag-grid-angular': 'npm:ag-grid-angular',
            'ag-grid': 'npm:ag-grid',

            //codebakery/origami libraries
            '@codebakery/origami': 'npm:@codebakery/origami',
            '@codebakery/origami/lib/collections': 'npm:@codebakery/origami/lib/collections',

        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            hammerjs: {
                main: './hammer.js',
                defaultExtension: 'js'
            },
            'ag-grid-angular': {
                defaultExtension: "js"
            },
            'ag-grid': {
                defaultExtension: "js"
            },
        }
    });
})(this);

-----bower.json-------

{
  "name": "patient-inquiry",
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "src/assets/bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "polymer": "Polymer/polymer#2.0.0-rc.7",
    "paper-button": "PolymerElements/paper-button#2.0-preview",
    "paper-input": "PolymerElements/paper-input#2.0-preview",
    "paper-card": "PolymerElements/paper-card#^2.0.0",
    "paper-styles": "PolymerElements/paper-styles#^2.0.0",
    "paper-material": "PolymerElements/paper-material#^2.0.0"
  },
  "resolutions": {
    "iron-flex-layout": "1 - 2",
    "paper-styles": "1 - 2"
  }
}

------tconfig.js-------

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "lib": [ "es2015", "dom" ]
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

------layout.cshtml---------------

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <base href="~/src">

    <script src="~/node_modules/core-js/client/shim.min.js"></script>
    <script src="~/node_modules/zone.js/dist/zone.js"></script>
    <script src="~/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="~/node_modules/systemjs/dist/system.src.js"></script>
    @*<script src="~/node_modules/ag-grid-angular/main.js"></script>*@

    <script src="~/src/assets/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
    <link href="~/src/assets/bower_components/app-layout/app-layout.html" rel="import">
    <link rel="import" href="~/src/assets/bower_components/paper-input/paper-input.html">
    <link href="~/src/assets/bower_components/paper-tabs/paper-tabs.html" rel="import">
    <link href="~/src/assets/bower_components/iron-icons/iron-icons.html" rel="import">
    <link href="~/src/assets/bower_components/paper-button/paper-button.html" rel="import">
    <link href="~/src/assets/bower_components/paper-card/paper-card.html" rel="import">
    <link href="~/src/assets/bower_components/paper-menu-button/paper-menu-button.html" rel="import">
    <link href="~/src/assets/bower_components/paper-checkbox/paper-checkbox.html" rel="import">
    <link href="~/src/assets/bower_components/paper-listbox/paper-listbox.html" rel="import">
    <link href="~/src/assets/bower_components/paper-item/paper-item.html" rel="import">
    <link href="~/src/assets/bower_components/app-menu/app-menu.html" rel="import">
    <link href="~/src/assets/bower_components/iron-icon/iron-icon.html" rel="import">
    <link href="~/src/assets/bower_components/iron-flex-layout/iron-flex-layout.html" rel="import">
    <link href="~/src/assets/bower_components/iron-flex-layout/iron-flex-layout-classes.html" rel="import">
    <link rel="import" href="~/src/assets/bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
    <link rel="import" href="~/src/assets/bower_components/app-layout/app-drawer/app-drawer.html">
    <link rel="import" href="~/src/assets/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
    <link rel="import" href="~/src/assets/bower_components/app-layout/app-header/app-header.html">
    <link rel="import" href="~/src/assets/bower_components/app-layout/app-header-layout/app-header-layout.html">
    <link rel="import" href="~/src/assets/bower_components/app-layout/app-toolbar/app-toolbar.html">
    <link rel="import" href="~/src/assets/bower_components/paper-styles/element-styles/paper-material.html">
    <link rel="import" href="~/src/assets/bower_components/app-datepicker/app-datepicker.html">
    <link rel="import" href="~/src/assets/bower_components/app-datepicker/app-datepicker-dialog.html">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
    <link rel="import" href="~/src/assets/bower_components/web-animations-js/web-animations-next-lite.min.js">
    <link rel="import" href="~/src/assets/bower_components/polymer/polymer.html">
   
     <!-- ag-Grid references -->
    <link href="~/node_modules/ag-grid/dist/styles/ag-grid.css" rel="stylesheet" />
    <link href="~/node_modules/ag-grid/dist/styles/theme-fresh.css" rel="stylesheet" />

    <!-- Example uses font awesome icons -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Configure SystemJS -->
    <script src="~/systemjs.config.js"></script>
    
    <script>
        System.import('src').catch(function (err) { console.error(err); });
    </script>

</head>
<body>
    <div class="container body-content">
        @RenderBody()
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Research and create a demo for custom webpack builds

Currently we use a weird mix of polymer-build and angular webpack magic to get the production build working. Maybe an extension to the angular-cli build would be the answer...

I still trying to figure out how to use a hash when building the polymer parts. Basically what Angular does:

build sources and create new file names as a hash. for example: [hash].bundle.js
Reference that hash in the generated index.html
Now if the browser fetches index.html it will receive the notification that the cached version and the stored version is not byte identical and trigger an update. (because the new [hash].bundle.js got changed. This is a quite normal best practice when working with cache in web browsers

I wanted to apply the concept to the polymer build. So probably something like this https://github.com/sindresorhus/gulp-rev would need to be used. Basically:

Specify the entrypoint is elements.html
Generate [hash].elements.html with all the other imports hashed as well
AND not comes the tricky part: Reference that [hash].elements.htmlin our index.html. Which is generated through Angular

Because angular theoretically does not "know" about the polymer build it is difficult to include the generated [hash].elements.html for the prod build. I already found some work around, which work OK. But if someone wants to really build a correctly cached + managed production web app, this would be a mandatory step...

OK, after some digging around I think we should include a example on how to use the origami demo project without the scaffolded project using ng new projectname. So basically include a demo on how to build an angular project by using pure webpack configs. Here some reasons:

If we want to include a "real" custom build we can anyhow not use angular-cli, because we need to add configs like SWPrecacheWebpackPlugin. (side note: maybe use https://github.com/angular/mobile-toolkit/tree/master/service-worker/worker to bring it to work)
We need to use plugins for certain edge cases. For example:

    plugins: [
        new webpack.LoaderOptionsPlugin({
            options: {
                htmlLoader: {
                    // First the tag name and then the attribute name
                    attrs: ['iron-image:src', 'iron-icon:src', 'paper-icon-button:src']
                }
            }
        })
    ]

Support sub-property/array mutation change notification events

https://www.polymer-project.org/2.0/docs/devguide/data-system#change-events

Object sub-property change events include a detail.path to the sub-property whereas detail.value is the sub-property value. At the moment, @PolymerProperty() assumes detail.value is the value of the property.

Array mutation includes an array mutation path in detail.path

Polymer attribute$ binding fails

Using a polymer attribute inside Angular will fail, since attribute$ is not a valid attribute name and Angular uses Element.setAttribute() when creating the template.

Ex:

<!-- This is an Angular template declaring a Polymer template -->
<iron-list [items]="items">
  <ng-template polymer-template [modelHost]="this">
    <!-- Neither of these work -->
    <paper-item class$="[[getClass(item)]]">[[item]]</paper-item>
    <paper-item [attr.class$]="[[getClass(item)]]">[[item]]</paper-item>
  </ng-template>
</iron-list>

In this example, we're using [modelHost] referring to the Angular component, which has a getClass() property. We want to dynamically get the class for an element inside a Polymer template. If we want to bind the value to an attribute, we must use the attribute$ binding syntax.

The problem is this isn't "HTML", this is markup that Angular creates using the DOM programatically. So it will attempt to call paperItemEl.setAttribute('class$', '[[getClass(item)]]') which fails.

Feature request: Expose polymer methods

So that we can call methods like Polymer.dom() directly from our TS code. Not sure though if it would make more sense for the polymer team to publish a typescript definition file...

Latest (1.3.0-beta.0) npm install seems to be the whole directory

As such current imports don't work as they're now a layer lower than they should be. Did you intend this change or just accidentally upload too much?
What it was before (^1.1.1):

What is is now (1.3.0-beta.0):

Polymer 3 support

Just wanted to ask if/how and when you think polymer 3 should be supported with origami? 😄 Maybe we could release a -beta version to let people play around with it?

how to support vaadin-grid

how to support vaadin-grid vaadin-grid?

CustomStyleService not working for css-mixin object

According to the Custom Style guide, CustomStyleService works fine on custom css variables, but it doesn't work for mixin objects.
Here is an example:

/* my-custom-ctrl.component.ts */
import { Component, OnInit } from '@angular/core';
import { CustomStyleService } from '@codebakery/origami';
...

@Component({
  selector: 'my-custom-ctrl',
  templateUrl: 'my-custom-ctrl.component.html',
    styleUrls: ['my-custom-ctrl.component.html.css']
})
export class MyCustomCtrl implements OnInit {
  constructor(private customStyle: CustomStyleService) { }

  ngOnInit() {
    this.customStyle.updateCustomStyles();
  }
 ...
}

/* my-custom-ctrl.component.css */
...
paper-textarea {
    --paper-input-container-input: {
        color: darkgreen;
        font-size: 20px;
    };
   --paper-input-container-color: red;
   @apply --some-other-styles-mixin;
} 
...

With CustomStyleService adopted, the component style is correctly wrapped with <custom-style> element, but paper-textarea gets compiled incorrectly. It gets transpiled in the following (captured by Chrome Inspector):

paper-textarea.create-message-input[_ngcontent-c11] {
    \--paper-input-container-input: {
        color: darkgreen;
        font-size: 20px;
    }
}

As given above, --paper-input-container-color and the next @apply disappeared, they appear and work correctly as our expectation once I comment out --paper-input-container-input.
However, if I move paper-textarea styles into the document-level styling, all work fine, this is somewhat weird.

Hopefully get help to solve this problem!

Rename [polymer], @PolymerProperty, and OnPolymerChange

The names are confusing and it is not clearly obvious what they are doing.

OnPolymerChange's name and/or documentation should make it more clear that it is invoked when a @PolymerProperty() changes.

Update form docs to show reactive form example

For example: Does in the HTML template still the value property needs to be set when the form is initiated like:

this.editProfileForm = this.fb.group({
           firstName: [this.sharedService.loggedInUser.firstName, Validators.required]
       });

Support shady CSS custom styling in SASS

Like #2 but sassier. There may be limitations with using custom CSS properties in sass.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-poly',
  template: `
    <paper-button>I'm blue!</paper-button>
  `,
  styleUrls: ['./app.component.scss']
})
export class PolyComponent { }

app.component.scss

$ink: blue;

paper-button {
  --paper-button-ink-color: $ink;
}

Deprecate ng-template[polymer] feature

Related to angular/angular#17051

Once enableLegacyTemplate is correctly working, PolymerTemplateDirective should first check and see if this compiler option is set to false. If it is not, a deprecation warning should be generated.

PolymerTemplateDirective ends up doing quite a bit more than the original concept of detaching and reattaching a template. The directive won't be removed entirely. More than likely, it should change to select ng-template[polymer], template and automatically apply itself to templates.

Until angular/angular#15557 is fixed, this directive should also attempt to move any children of the template to the template's content property.

Support shady CSS custom styling

This may or may not be possible without build tools, but ideally a user should be able to use custom CSS properties and mixins within .css files for a component and have Polymer's shady CSS handle it.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-poly',
  template: `
    <paper-button>I'm blue!</paper-button>
  `,
  styleUrls: ['./app.component.css']
})
export class PolyComponent { }

app.component.css

paper-button {
  --paper-button-ink-color: blue;
}

EmitChangesDirective should use __classProperties

EmitChangesDirective uses some weirdness to get all properties and behavior properties for an element. Some digging revealed that Polymer actually creates a flattened __classProperties object that contains all the properties going up the chain.

I think the current method is working for hybrid elements, but will fail in this scenario with mixins:

MyMixin = Polymer.dedupingMixin(base => {
  return class MyMixin extends base {
    static get properties() {
      return {
        totallyLegal: {
          type: Boolean,
          value: true,
          reflectToAttribute: true
        };
      };
    }
  }
});

class MyElement extends MyMixin(Polymer.Element) {
  static get properties() {
    return {
      ownProp: {
        type: Boolean,
        value: true,
        reflectToAttribute: true
      }
    };
  }
  
  connectedCallback() {
    console.log(this.ownProp); // true
    console.log(this.totallyLegal); // true
  }
}

I don't think Origami will pick up on the totallyLegal, which is totally wrong.

ironControl needed for paper-textarea?

So, I have a question, which confuses me a bit. I have in literally only one component this html:

        <form id="newTaskForm" [formGroup]="newTaskForm" (ngSubmit)="confirmAddTask()">
            <div class="komed-text-subtitle add-task-title">{{'task.addTask' | translate}}</div>
            <paper-input #titleInput label="{{'task.title' | translate}}" type="text" id="taskTitle" class="form-control" formControlName="taskTitle"
                name="taskTitle">
            </paper-input>
            <paper-textarea label="{{'task.description' | translate}}" id="description" class="form-control" formControlName="description"
                name="description" max-rows="3">
            </paper-textarea>
        </form>

And this TS:

        this.newTaskForm = this.fb.group({
            taskTitle: ['', [Validators.required, Validators.minLength(1)]],
            description: ['', [Validators.required, Validators.minLength(1)]]
        });

Generates this error:

ERROR Error: No value accessor for form control with name: 'description'
    at _throwError (forms.es5.js:1830)
    at setUpControl (forms.es5.js:1740)
    at FormGroupDirective.addControl (forms.es5.js:4711)
    at FormControlName._setUpControl (forms.es5.js:5299)
    at FormControlName.ngOnChanges (forms.es5.js:5217)
    at checkAndUpdateDirectiveInline (core.es5.js:10812)
    at checkAndUpdateNodeInline (core.es5.js:12238)
    at checkAndUpdateNode (core.es5.js:12177)
    at debugCheckAndUpdateNode (core.es5.js:12880)
    at debugCheckDirectivesFn (core.es5.js:12821)

If I now only add ironControl to only the paper-textarea:

            <paper-textarea label="{{'task.description' | translate}}" id="description" class="form-control" formControlName="description"
                name="description" max-rows="3" ironControl>
            </paper-textarea>

Everything works fine... Could you help me out to understand why only the paper-textarea needs the attribute?

Weird Activity on Edge - Lazy & Slow

I am not sure if this issue is more related with Angular or Polymer.

My app is primarily built in Angular 4 + Polymer 2 which are bridged by origami.
The app has a list of channels and it loads a list of messages dynamically based on the selected channel. Everything works fine on all browsers including IE 11 but on Edge browser the app is running so lazy.

selecting a channel doesn't work immediately, but delayed, on only Edge browser

<channel (channelSelect)="selectedChannel = $event">
  <!-- channel implementation -->
    <iron-selector #channelSelector>
      <paper-item ... ></paper-item>
    </iron-selector>
</channel>
...
<msg-list *ngIf="selectedChannel" [channel]="selectedChannel">
  <!-- msg-list implementation -->
    <msg *ngFor="let msg of msgs" [msg]="msg">
    </msg>
<msg-list>

selecting a channel will fire a custom event and update custom attribute on <msg-list>, this will lead msgs refreshed based on the selected channel and thus <msg>s will be loaded. This activity runs immediately on all browsers, but not on only Edge

the app contains several blocks which needs to be displayed conditionally and so are controlled by ngIf ~ but they're all delayed shown on Edge only
```
<paper-button (click)="showBlock = !showBlock">Show/Hide</paper-button>
<div *ngIf="showBlock">
  ...
<div>
```

I tried to search any similar issue related with Angular, but not found anything. And the size of messages to load (and to render by *ngFor) is less than 15 right now so I guess the performance is not a problem.

Weird errors when using with https://github.com/alxhub/io17

I try to come up with a build concept that includes service workers. On my way there I got from the IO talks to this lib: https://github.com/alxhub/io17
But it seems that origami is causing errors in the build chain. Possibly not origami's fault but wanted to check if you @hotforfeature see a reason why?
I'm getting weird errors if this is my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { PolymerModule } from '@codebakery/origami';
import { IronElementsModule, PaperElementsModule, AppElementsModule } from '@codebakery/origami/lib/collections';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    PolymerModule,
    IronElementsModule,
    PaperElementsModule,
    AppElementsModule
  ],
  providers: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule { }

Somebody knows why? This also happens on OSX...

Vaadin-grid won't render properly in production

In Development it looks like this and renders fine:

However

Deployed it looks like this:

No errors in the console or in the build, other than the warning in the pic below.

When I started playing with Vaadin grid, I got the exact same rendering bug (in development), and fixed it by just directly ripping your bower.json and polymer imports html file, so I assume this might be something to do with dependencies? Any ideas if I'm doing something wrong or this just doesn't work in production?

Also on an unrelated note, this:

What do I believe?

Content selectors in templates not considered

In reference to issue #27

If a template's <content> element has the select attribute, the content is not remapped correctly it seems.

I am using angular 4.3.3, origami 1.3.0-beta.1, and am integrating with the Predix UI controls here (www.predix-ui.com). What I found specifically was the <px-card> element that doesn't remap properly.

This is what we should be putting in our code:

<px-card header-text="Card">
  <div class="actions">
    Actions
  </div>
  <p>This is the main content area of a Predix card.</p>
</px-card>

And it should resolve to:

<px-card header-text="Card" class="x-scope px-card-0">
  <header class="flex flex--middle flex--justify style-scope px-card">
    <div class="epsilon caps style-scope px-card" id="headerText">
      <template is="dom-if" class="style-scope px-card"></template>Card
    </div>
    <div class="actions">
      Actions
    </div>
  </header>
  <div class="contents  style-scope px-card"> 
    <p>This is the main content area of a Predix card.</p>
  </div>
  </px-card>

But, instead, it resolves to:

<px-card _ngcontent-c0="" class="x-scope px-card-0" header-text="Card">
  <header class="flex flex--middle flex--justify style-scope px-card">
    <div class="epsilon caps style-scope px-card" id="headerText">
      <template is="dom-if" class="style-scope px-card"></template>Card
    </div>
  </header>
  <div class="contents  style-scope px-card">
  </div>
  <div _ngcontent-c0="" class="actions">
    Actions
  </div>
  <p _ngcontent-c0="">This is the main content area of a Predix card.</p>
</px-card>

I suspect that other components that use this strategy have similar problems. Or am I missing a workaround that is already in place?

Here's the link on what selectors can be used: Creating Insertion Points using the Select Attribute

Remove my-custom-checkbox from examples

Hello, I'm new to Polymer and Origami.

I'm going through the example code in the main readme, and you seem to use an element called "my-custom-checkbox" which doesn't seem to be mentioned anywhere or included in Origami, so when used by anyone just wanting a quick demo it will be absent.
Example:
<my-custom-checkbox [(checked)]="isChecked" emitChanges></my-custom-checkbox>
from
https://github.com/hotforfeature/origami#markup

Am I missing something obvious, or is it just unnecessary code?
Cheers in advance

Can't bind to 'polymer' since it isn't a known property of 'template'

Hi Team,

I'm trying to use origami with vaadin-grid.git#column-template-observer and using the code from the origami vaadin-grid branch and I seem to encounter the following error:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'polymer' since it isn't a known property of 'template'

and the code:

  <vaadin-grid emitChanges [items]="items | async" id="material" size="200">
    <vaadin-grid-selection-column width="66px" flex="0">
      <template [polymer]="this" class="header" ngNonBindable>
        <i on-click="contextMenuAlert">checkbox</i>
      </template>
      <template ngNonBindable>
        <paper-checkbox checked="{{selected}}"></paper-checkbox>
      </template>
    </vaadin-grid-selection-column>

My goal here is to trigger the on-click event for the elem.. or any other element inside a Polymer .

If i remove [polymer]="this" The component works, however, my event bindings no longer work.

origami version: 1.2.3

Error running template sample code in Angular 4.1.1

I feel like I'm doing something egregiously wrong and if so I apologize for posting an issue. ButnI can't figure the problem and any help would be great.

I have the PolymerModule imported into my app. I have this code in my main.ts:

platformBrowserDynamic().bootstrapModule(RootModule, {
  enableLegacyTemplate: false
});

I have this on a test page:

<iron-list [items]="['apple', 'pear']" as="item">
  <ng-template polymer>
    <div>XXX [[item]]</div>
  </ng-template>
</iron-list>

But I consistently get this error (plus a subsequent JavaScript exception) in my Chrome console:

iron-list requires a template to be provided in light-dom

If I had to guess, I'd say that despite all the setup Angular isn't aware of the polymer directive. Indeed, I got a hint from another issue that maybe that I should've coded polymer-template: but that didn't make any difference and may be a clue.

If I inspect the DOM, I see the following which seems to confirm that the polymer directive isn't taking effect:

<iron-list _ngcontent-c10="" as="item" style="overflow: auto;">
  <!---->
</iron-list>

I wish I'd known about Origami before -- it looks extremely useful -- if I can just get it to work!

wkwebview crashes

Do you have any experience in loading a origami project in wkwebview (native iOS app)? In our project it seems like we're experiencing a out-of-ram error... But maybe it's because we're using so many components...

Add Unit Tests

Testing is love. Testing is life.

hotforfeature / origami Goto Github PK

origami's People

Contributors

Stargazers

Watchers

Forkers

origami's Issues

command

Error

Recommend Projects

Recommend Topics

Recommend Org