From 8fa2ea34a65a988869d3d620f8133cd115187627 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Mon, 29 Jan 2018 08:21:25 +0200
Subject: [PATCH 1/3] Updates dependencies to Polymer 1 or 2

---
 bower.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/bower.json b/bower.json
index d430c66..4cf48ea 100644
--- a/bower.json
+++ b/bower.json
@@ -17,15 +17,15 @@
     "url": "git://github.com/StartPolymer/s-circle-progress.git"
   },
   "dependencies": {
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1",
-    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.5",
-    "paper-styles": "PolymerElements/paper-styles#^1.1.5",
-    "polymer": "Polymer/polymer#^1.4.0"
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#1 - 2",
+    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#1 - 2",
+    "paper-styles": "PolymerElements/paper-styles#1 - 2",
+    "polymer": "Polymer/polymer#1 - 2"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "iron-component-page": "PolymerElements/iron-component-page#1 - 2",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
+    "web-component-tester": "4 - 6",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#0 - 1"
   }
 }

From edf7a9f886cbc785844001e94a681f7e179d02dc Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Mon, 29 Jan 2018 08:25:30 +0200
Subject: [PATCH 2/3] Updates template to latest Shadow DOM and custom
 properties

---
 s-circle-progress.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/s-circle-progress.html b/s-circle-progress.html
index b8b287e..b84205d 100644
--- a/s-circle-progress.html
+++ b/s-circle-progress.html
@@ -16,8 +16,8 @@
 <style>
 
 :host {
-  @apply(--layout-vertical);
-  @apply(--layout-center-center);
+  @apply --layout-vertical;
+  @apply --layout-center-center;
 
   position: relative;
 
@@ -37,12 +37,12 @@
 }
 
 .Circle-background {
-  stroke: var(--s-circle-progress-bg-stroke-color, --paper-grey-100);
+  stroke: var(--s-circle-progress-bg-stroke-color, var(--paper-grey-100));
 }
 
 .Circle-foreground {
   transition: var(--s-circle-progress-transition, stroke-dashoffset 150ms);
-  stroke: var(--s-circle-progress-stroke-color, --accent-color);
+  stroke: var(--s-circle-progress-stroke-color, var(--accent-color));
   stroke-linecap: var(--s-circle-progress-stroke-linecap, round);
 }
 
@@ -66,7 +66,7 @@
       transform$="[[_transform]]" />
 </svg>
 
-<content></content>
+<slot></slot>
 
 </template>
 <script>

From 33216991dbecff0550cfe85ce62f259118ba2950 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Mon, 29 Jan 2018 08:26:11 +0200
Subject: [PATCH 3/3] Formats code

---
 s-circle-progress.html | 286 ++++++++++++++++++++---------------------
 1 file changed, 141 insertions(+), 145 deletions(-)

diff --git a/s-circle-progress.html b/s-circle-progress.html
index b84205d..5b07b7a 100644
--- a/s-circle-progress.html
+++ b/s-circle-progress.html
@@ -11,165 +11,161 @@
 -->
 
 <dom-module id="s-circle-progress">
-<template>
-
-<style>
-
-:host {
-  @apply --layout-vertical;
-  @apply --layout-center-center;
-
-  position: relative;
-
-  width: 64px;
-  height: 64px;
-  margin: 24px;
-
-  border-radius: 50%;
-}
-
-svg {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  display: none;
-}
-
-.Circle-background {
-  stroke: var(--s-circle-progress-bg-stroke-color, var(--paper-grey-100));
-}
-
-.Circle-foreground {
-  transition: var(--s-circle-progress-transition, stroke-dashoffset 150ms);
-  stroke: var(--s-circle-progress-stroke-color, var(--accent-color));
-  stroke-linecap: var(--s-circle-progress-stroke-linecap, round);
-}
-
-</style>
-
-<svg id="circle" width="100%" height="100%">
-  <circle class="Circle-background"
-      r$="[[_radius]]"
-      cx$="[[_cx]]"
-      cy$="[[_cy]]"
-      fill="transparent"
-      stroke-width$="[[strokeWidth]]" />
-  <circle class="Circle-foreground"
-      r$="[[_radius]]"
-      cx$="[[_cx]]"
-      cy$="[[_cy]]"
-      fill="transparent"
-      stroke-width$="[[strokeWidth]]"
-      stroke-dasharray$="[[_dasharray]]"
-      stroke-dashoffset$="[[_dashoffset]]"
-      transform$="[[_transform]]" />
-</svg>
-
-<slot></slot>
-
-</template>
-<script>
-
-Polymer({
-  is: 's-circle-progress',
-
-  behaviors: [
-    Polymer.IronResizableBehavior
-  ],
-
-  properties: {
-    /**
-     * Value of circular progress bar.
-     */
-    value: {
-      type: Number,
-      value: 0
-    },
+  <template>
+
+    <style>
+
+    :host {
+      @apply --layout-vertical;
+      @apply --layout-center-center;
+      position: relative;
+      width: 64px;
+      height: 64px;
+      margin: 24px;
+      border-radius: 50%;
+    }
 
-    /**
-     * Maximum of value.
-     */
-    max: {
-      type: Number,
-      value: 100
-    },
+    svg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: none;
+    }
 
-    /**
-     * Stroke width of circle.
-     */
-    strokeWidth: {
-      type: Number,
-      value: 4
-    },
+    .Circle-background {
+      stroke: var(--s-circle-progress-bg-stroke-color, var(--paper-grey-100));
+    }
 
-    /**
-     * Starting angle of the progress.
-     */
-    angle: {
-      type: Number,
-      value: -90
-    },
+    .Circle-foreground {
+      transition: var(--s-circle-progress-transition, stroke-dashoffset 150ms);
+      stroke: var(--s-circle-progress-stroke-color, var(--accent-color));
+      stroke-linecap: var(--s-circle-progress-stroke-linecap, round);
+    }
 
-    _cx: {
-      type: Number,
-      value: null
+    </style>
+
+  <svg id="circle" width="100%" height="100%">
+    <circle class="Circle-background"
+        r$="[[_radius]]"
+        cx$="[[_cx]]"
+        cy$="[[_cy]]"
+        fill="transparent"
+        stroke-width$="[[strokeWidth]]" />
+    <circle class="Circle-foreground"
+        r$="[[_radius]]"
+        cx$="[[_cx]]"
+        cy$="[[_cy]]"
+        fill="transparent"
+        stroke-width$="[[strokeWidth]]"
+        stroke-dasharray$="[[_dasharray]]"
+        stroke-dashoffset$="[[_dashoffset]]"
+        transform$="[[_transform]]" />
+  </svg>
+
+  <slot></slot>
+
+  </template>
+  <script>
+
+  Polymer({
+    is: 's-circle-progress',
+
+    behaviors: [
+      Polymer.IronResizableBehavior,
+    ],
+
+    properties: {
+      /**
+       * Value of circular progress bar.
+       */
+      value: {
+        type: Number,
+        value: 0,
+      },
+
+      /**
+       * Maximum of value.
+       */
+      max: {
+        type: Number,
+        value: 100,
+      },
+
+      /**
+       * Stroke width of circle.
+       */
+      strokeWidth: {
+        type: Number,
+        value: 4,
+      },
+
+      /**
+       * Starting angle of the progress.
+       */
+      angle: {
+        type: Number,
+        value: -90,
+      },
+
+      _cx: {
+        type: Number,
+        value: null,
+      },
+
+      _cy: {
+        type: Number,
+        value: null,
+      },
+
+      _radius: {
+        type: Number,
+        computed: '_computeRadius(_cx, _cy, strokeWidth)',
+      },
+
+      _transform: {
+        type: String,
+        computed: '_computeTransform(angle, _cx, _cy)',
+      },
+
+      _dasharray: {
+        type: Number,
+        computed: '_computeDashArray(_radius)',
+      },
+
+      _dashoffset: {
+        type: Number,
+        computed: '_computeDashOffset(value, max, _dasharray)',
+      },
     },
 
-    _cy: {
-      type: Number,
-      value: null
+    listeners: {
+      'iron-resize': '_onIronResize',
     },
 
-    _radius: {
-      type: Number,
-      computed: '_computeRadius(_cx, _cy, strokeWidth)'
+    _computeDashArray: function(radius) {
+      return 2 * Math.PI * radius;
     },
 
-    _transform: {
-      type: String,
-      computed: '_computeTransform(angle, _cx, _cy)'
+    _computeDashOffset: function(value, max, dasharray) {
+      return (1 - value / max) * dasharray;
     },
 
-    _dasharray: {
-      type: Number,
-      computed: '_computeDashArray(_radius)'
+    _computeRadius: function(cx, cy, strokeWidth) {
+      return cx && cy ? Math.max(0, Math.min(cx, cy) - strokeWidth / 2) : 0;
     },
 
-    _dashoffset: {
-      type: Number,
-      computed: '_computeDashOffset(value, max, _dasharray)'
-    }
-  },
-
-  listeners: {
-    "iron-resize": "_onIronResize"
-  },
-
-  _computeDashArray: function(radius) {
-    return 2 * Math.PI * radius;
-  },
-
-  _computeDashOffset: function(value, max, dasharray) {
-    return (1 - value / max) * dasharray;
-  },
-
-  _computeRadius: function(cx, cy, strokeWidth) {
-    return cx && cy ? Math.max(0, Math.min(cx, cy) - strokeWidth / 2) : 0;
-  },
-
-  _computeTransform: function(angle, cx, cy) {
-    return cx && cy ? 'rotate(' + angle + ', ' + cx + ', ' + cy + ')' : '';
-  },
+    _computeTransform: function(angle, cx, cy) {
+      return cx && cy ? 'rotate(' + angle + ', ' + cx + ', ' + cy + ')' : '';
+    },
 
-  _onIronResize: function() {
-    if (this.offsetWidth && this.offsetHeight) {
-      this._cx = this.offsetWidth / 2;
-      this._cy = this.offsetHeight / 2;
-      this.$.circle.style.display = 'block';
-    }
-  }
-});
+    _onIronResize: function() {
+      if (this.offsetWidth && this.offsetHeight) {
+        this._cx = this.offsetWidth / 2;
+        this._cy = this.offsetHeight / 2;
+        this.$.circle.style.display = 'block';
+      }
+    },
+  });
 
-</script>
+  </script>
 </dom-module>