Polymer 2 Hybrid

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"
   }
 }

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, --paper-grey-100);
-}
-
-.Circle-foreground {
-  transition: var(--s-circle-progress-transition, stroke-dashoffset 150ms);
-  stroke: var(--s-circle-progress-stroke-color, --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>
-
-<content></content>
-
-</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>