<html><head><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="../paper-styles/typography.html">



</head><body><dom-module id="paper-badge">
  <template>
    <style>:host{display:block;position:absolute;outline:none;}:host([hidden]), [hidden]{display:none !important;}iron-icon{--iron-icon-width:12px;--iron-icon-height:12px;}.badge{@apply (--layout);@apply (--layout-center-center);@apply (--paper-font-common-base);font-weight:normal;font-size:11px;border-radius:50%;margin-left:var(--paper-badge-margin-left, 0px);margin-bottom:var(--paper-badge-margin-bottom, 0px);width:var(--paper-badge-width, 20px);height:var(--paper-badge-height, 20px);background-color:var(--paper-badge-background, --accent-color);opacity:var(--paper-badge-opacity, 1.0);color:var(--paper-badge-text-color, white);@apply (--paper-badge);}</style>

    <div class="badge">
      <iron-icon hidden$="{{!_computeIsIconBadge(icon)}}" icon="{{icon}}"></iron-icon>
      <span id="badge-text" hidden$="{{_computeIsIconBadge(icon)}}">{{label}}</span>
    </div>
  </template>

  <script>Polymer({is:"paper-badge",hostAttributes:{role:"status",tabindex:0},behaviors:[Polymer.IronResizableBehavior],listeners:{"iron-resize":"updatePosition"},properties:{"for":{type:String,observer:"_forChanged"},label:{type:String,observer:"_labelChanged"},icon:{type:String,value:""}},attached:function(){this._updateTarget()},attributeChanged:function(t){"hidden"===t&&this.updatePosition()},_forChanged:function(){this.isAttached&&this._updateTarget()},_labelChanged:function(){this.setAttribute("aria-label",this.label)},_updateTarget:function(){this._target=this.target,this.async(this.notifyResize,1)},_computeIsIconBadge:function(t){return t.length>0},get target(){var t,e=Polymer.dom(this).parentNode,i=Polymer.dom(this).getOwnerRoot();return t=this["for"]?Polymer.dom(i).querySelector("#"+this["for"]):e.nodeType==Node.DOCUMENT_FRAGMENT_NODE?i.host:e},updatePosition:function(){if(this._target&&this.offsetParent){var t=this.offsetParent.getBoundingClientRect(),e=this._target.getBoundingClientRect(),i=this.getBoundingClientRect();this.style.left=e.left-t.left+(e.width-i.width/2)+"px",this.style.top=e.top-t.top-i.height/2+"px"}}});</script>
</dom-module>
</body></html>