text: /**
   * Copyright 2018 The Pennsylvania State University
   * @license Apache-2.0, see License.md for full text.
   */
  import{html as e,PolymerElement as r}from"../../@polymer/polymer/polymer-element.js";import"../../@polymer/paper-styles/paper-styles.js";import"../../@polymer/iron-flex-layout/iron-flex-layout.js";import{IronResizableBehavior as t}from"../../@polymer/iron-resizable-behavior/iron-resizable-behavior.js";import{mixinBehaviors as s}from"../../@polymer/polymer/lib/legacy/class.js";class CircleProgress extends(s([t],r)){static get template(){return e`
        <style include="paper-material-styles">
          :host {
            @apply --layout-vertical;
            @apply --layout-center-center;
            position: relative;
            width: var(--circle-progress-width, 64px);
            height: var(--circle-progress-height, 64px);
            margin: 24px;
            border-radius: 50%;
          }
          svg {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
          }
          .circle-background {
            stroke: var(--circle-progress-bg-stroke-color, --paper-grey-100);
          }
          .circle-foreground {
            transition: stroke-dashoffset var(--circle-progress-transition, 150ms);
            stroke: var(--circle-progress-stroke-color, blue);
            stroke-linecap: var(--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>
          <circle
            class="circle-foreground"
            r\$="[[_radius]]"
            cx\$="[[_cx]]"
            cy\$="[[_cy]]"
            fill="transparent"
            stroke-width\$="[[strokeWidth]]"
            stroke-dasharray\$="[[_dasharray]]"
            stroke-dashoffset\$="[[_dashoffset]]"
            transform\$="[[_transform]]"
          ></circle>
        </svg>
        <slot></slot>
      `}static get tag(){return"circle-progress"}static get properties(){return{...super.properties,value:{name:"value",type:Number,value:0},max:{name:"max",type:Number,value:100},strokeWidth:{name:"strokeWidth",type:Number,value:4},angle:{name:"angle",type:Number,value:-90},_cx:{name:"_cx",type:Number,value:null},_cy:{name:"_cy",type:Number,value:null},_radius:{name:"_radius",type:Number,computed:"_computeRadius(_cx, _cy, strokeWidth)"},_transform:{name:"_transform",type:String,computed:"_computeTransform(angle, _cx, _cy)"},_dasharray:{name:"_dasharray",type:Number,computed:"_computeDashArray(_radius)"},_dashoffset:{name:"_dashoffset",type:Number,computed:"_computeDashOffset(value, max, _dasharray)"}}}constructor(){super(),setTimeout(()=>{this.addEventListener("iron-resize",this._onIronResize.bind(this))},0)}_computeDashArray(e){return 2*Math.PI*e}_computeDashOffset(e,r,t){return(1-e/r)*t}_computeRadius(e,r,t){return e&&r?Math.max(0,Math.min(e,r)-t/2):0}_computeTransform(e,r,t){return r&&t?"rotate("+e+", "+r+", "+t+")":""}_onIronResize(){this.offsetWidth&&this.offsetHeight&&(this._cx=this.offsetWidth/2,this._cy=this.offsetHeight/2,this.shadowRoot.querySelector("#circle").style.display="block")}}window.customElements.define(CircleProgress.tag,CircleProgress);export{CircleProgress};