[Project] Updated web dependencies

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "strolch-wc-dialog-button",
   "description": "Strolch WebComponent Dialog Button",
-  "version": "0.1.4",
+  "version": "0.1.13",
   "authors": [
     "Robert von Burg"
   ],
@@ -19,11 +19,11 @@
   "homepage": "https://github.com/strolch-li/strolch-wc-dialog-button",
   "ignore": [],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.11.3",
+    "polymer": "Polymer/polymer#^1.12.0",
 
-    "strolchjs": "strolch-li/strolchjs#^0.5.1",
-    "strolch-wc-styles": "strolch-li/strolch-wc-styles#^0.4.0",
-    "strolch-wc-util-behavior": "strolch-li/strolch-wc-util-behavior#^0.3.0",
+    "strolchjs": "strolch-li/strolchjs#^0.5.3",
+    "strolch-wc-styles": "strolch-li/strolch-wc-styles#^0.4.7",
+    "strolch-wc-util-behavior": "strolch-li/strolch-wc-util-behavior#^0.3.12",
 
     "paper-icon-button": "PolymerElements/paper-icon-button#^1.1.6",
     "paper-dialog": "PolymerElements/paper-dialog#^1.1.0",

strolch-wc-dialog-button.html

@@ -4,21 +4,52 @@
 <link rel="import" href="../paper-button/paper-button.html">
 <link rel="import" href="../paper-dialog/paper-dialog.html">
 
-<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
 <link rel="import" href="../strolch-wc-util-behavior/strolch-wc-util-behavior.html">
 
 <dom-module id="strolch-wc-dialog-button">
     <template>
         <!-- Style -->
-        <style is="custom-style" include="strolch-wc-styles">
+        <style is="custom-style">
             :host {
                 pointer-events: all !important;
+                --max-dialog-width: 600px;
+                --icon: {
+                };
+            }
+
+            paper-icon-button {
+                @apply(--icon);
+            }
+
+            .title {
+                color: var(--paper-dialog-button-color);
             }
 
             .aligned-dialog {
                 margin: 0;
                 min-width: 300px;
+                max-width: var(--max-dialog-width);
             }
+
+            .dialog-headline {
+                padding: 0 8px;
+                margin: 8px 0;
+                @apply(--layout-horizontal);
+                @apply(--layout-center);
+            }
+
+            p {
+                text-align: start;
+            }
+
+            a {
+                display: block;
+                text-decoration: none;
+                width: fit-content;
+                margin: 0 0 0 24px;
+                padding: 0;
+            }
+
         </style>
 
         <!-- Content -->
@@ -36,7 +67,10 @@
                           on-iron-overlay-closed="onClose">
 
                 <template is="dom-if" if="[[dialogHeadline]]">
-                    <h2>[[dialogHeadline]]</h2>
+                    <div class="dialog-headline">
+                        <paper-icon-button icon="close" on-tap="toggleDialog"></paper-icon-button>
+                        <h2 class="title">[[dialogHeadline]]</h2>
+                    </div>
                 </template>
 
                 <p>[[dialogContent]]</p>
@@ -125,7 +159,10 @@
                     this.setQueryParamsFromObject(this.parseQueryParams(queryParams));
                 }
 
-                this.fire("strolch-change-page", page, true);
+                this.fire("strolch-change-page", {
+                    page: page,
+                    keepQueryParams: true
+                });
             }
         });
     </script>