Merge pull request #7 from michael-silva/master

Move the color dialog to document root

.gitignore

@@ -0,0 +1 @@
+bower_components

l2t-paper-color.html

@@ -49,10 +49,6 @@
       <iron-icon icon="label" slot="prefix"></iron-icon>
       <iron-icon icon="image:palette" slot="suffix"></iron-icon>
     </paper-input>
-    <l2t-paper-color-dialog
-      colors="{{colors}}"
-      hide-advanced$="[[hideAdvanced]]">
-    </l2t-paper-color-dialog>
 
   </template>
 
@@ -140,7 +136,8 @@
       */
       _dialogHandler(e) {
         if(e.detail) {
-          this.value = this.shadowRoot.querySelector('l2t-paper-color-dialog').color;
+          this.value = this.colorDialog.color;
+          this.dispatchEvent(new CustomEvent('change'));
         }
       }
       /**
@@ -150,13 +147,19 @@
         if(this.readonly)
           return
 
-        var colorDialog = this.shadowRoot.querySelector('l2t-paper-color-dialog');
-        colorDialog.color=this.value||colorDialog.color;
-        colorDialog.open();
+        this.colorDialog.color = this.value||this.colorDialog.color;
+        this.colorDialog.open();
+      }
+      _createDialog() {
+        this.colorDialog = document.createElement('l2t-paper-color-dialog');
+        this.colorDialog.colors = this.colors;
+        this.colorDialog.hideAdvanced = this.hideAdvanced;
+        document.body.appendChild(this.colorDialog);
       }
       ready(){
         super.ready();
-        this.addEventListener("paper-color-dialog-closed", function(e){this._dialogHandler(e)}, false);
+        this._createDialog();
+        this.colorDialog.addEventListener("paper-color-dialog-closed", (e) => this._dialogHandler(e), false);
       }
     }
 

polymer.json

@@ -0,0 +1,7 @@
+{
+  "lint": {
+    "rules": [
+      "polymer-2"
+    ]
+  }
+}