text: define(["../polymer/polymer-legacy.js", "../iron-icon/iron-icon.js", "../paper-styles/default-theme.js", "../paper-behaviors/paper-inky-focus-behavior.js", "../polymer/lib/legacy/polymer-fn.js", "../polymer/lib/utils/html-tag.js"], function (_polymerLegacy, _ironIcon, _defaultTheme, _paperInkyFocusBehavior, _polymerFn, _htmlTag) {
    "use strict";
  
    var _templateObject_95fdf550941711ec8d52c707f928eca0;
  
    /**
    Material design: [Icon
    toggles](https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons)
    
    `paper-icon-button` is a button with an image placed at the center. When the
    user touches the button, a ripple effect emanates from the center of the button.
    
    `paper-icon-button` does not include a default icon set. To use icons from the
    default set, include `PolymerElements/iron-icons/iron-icons.html`, and use the
    `icon` attribute to specify which icon from the icon set to use.
    
        <paper-icon-button icon="menu"></paper-icon-button>
    
    See [`iron-iconset`](iron-iconset) for more information about
    how to use a custom icon set.
    
    Example:
    
        <script type="module">
          import '@polymer/iron-icons/iron-icons.js';
        </script>
    
        <paper-icon-button icon="favorite"></paper-icon-button>
        <paper-icon-button src="star.png"></paper-icon-button>
    
    To use `paper-icon-button` as a link, wrap it in an anchor tag. Since
    `paper-icon-button` will already receive focus, you may want to prevent the
    anchor tag from receiving focus as well by setting its tabindex to -1.
    
        <a href="https://www.polymer-project.org" tabindex="-1">
          <paper-icon-button icon="polymer"></paper-icon-button>
        </a>
    
    ### Styling
    
    Style the button with CSS as you would a normal DOM element. If you are using
    the icons provided by `iron-icons`, they will inherit the foreground color of
    the button.
    
        /* make a red "favorite" button *\/
        <paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>
    
    By default, the ripple is the same color as the foreground at 25% opacity. You
    may customize the color using the `--paper-icon-button-ink-color` custom
    property.
    
    The following custom properties and mixins are available for styling:
    
    Custom property | Description | Default
    ----------------|-------------|----------
    `--paper-icon-button-disabled-text` | The color of the disabled button | `--disabled-text-color`
    `--paper-icon-button-ink-color` | Selected/focus ripple color | `--primary-text-color`
    `--paper-icon-button` | Mixin for a button | `{}`
    `--paper-icon-button-disabled` | Mixin for a disabled button | `{}`
    `--paper-icon-button-hover` | Mixin for button on hover | `{}`
    
    @group Paper Elements
    @element paper-icon-button
    @demo demo/index.html
    */
    (0, _polymerFn.Polymer)({
      is: 'paper-icon-button',
      _template: (0, _htmlTag.html)(_templateObject_95fdf550941711ec8d52c707f928eca0 || (_templateObject_95fdf550941711ec8d52c707f928eca0 = babelHelpers.taggedTemplateLiteral(["\n    <style>\n      :host {\n        display: inline-block;\n        position: relative;\n        padding: 8px;\n        outline: none;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        cursor: pointer;\n        z-index: 0;\n        line-height: 1;\n\n        width: 40px;\n        height: 40px;\n\n        /*\n          NOTE: Both values are needed, since some phones require the value to\n          be `transparent`.\n        */\n        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n        -webkit-tap-highlight-color: transparent;\n\n        /* Because of polymer/2558, this style has lower specificity than * */\n        box-sizing: border-box !important;\n\n        @apply --paper-icon-button;\n      }\n\n      :host #ink {\n        color: var(--paper-icon-button-ink-color, var(--primary-text-color));\n        opacity: 0.6;\n      }\n\n      :host([disabled]) {\n        color: var(--paper-icon-button-disabled-text, var(--disabled-text-color));\n        pointer-events: none;\n        cursor: auto;\n\n        @apply --paper-icon-button-disabled;\n      }\n\n      :host([hidden]) {\n        display: none !important;\n      }\n\n      :host(:hover) {\n        @apply --paper-icon-button-hover;\n      }\n\n      iron-icon {\n        --iron-icon-width: 100%;\n        --iron-icon-height: 100%;\n      }\n    </style>\n\n    <iron-icon id=\"icon\" src=\"[[src]]\" icon=\"[[icon]]\"\n               alt$=\"[[alt]]\"></iron-icon>\n  "], ["\n    <style>\n      :host {\n        display: inline-block;\n        position: relative;\n        padding: 8px;\n        outline: none;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        cursor: pointer;\n        z-index: 0;\n        line-height: 1;\n\n        width: 40px;\n        height: 40px;\n\n        /*\n          NOTE: Both values are needed, since some phones require the value to\n          be \\`transparent\\`.\n        */\n        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n        -webkit-tap-highlight-color: transparent;\n\n        /* Because of polymer/2558, this style has lower specificity than * */\n        box-sizing: border-box !important;\n\n        @apply --paper-icon-button;\n      }\n\n      :host #ink {\n        color: var(--paper-icon-button-ink-color, var(--primary-text-color));\n        opacity: 0.6;\n      }\n\n      :host([disabled]) {\n        color: var(--paper-icon-button-disabled-text, var(--disabled-text-color));\n        pointer-events: none;\n        cursor: auto;\n\n        @apply --paper-icon-button-disabled;\n      }\n\n      :host([hidden]) {\n        display: none !important;\n      }\n\n      :host(:hover) {\n        @apply --paper-icon-button-hover;\n      }\n\n      iron-icon {\n        --iron-icon-width: 100%;\n        --iron-icon-height: 100%;\n      }\n    </style>\n\n    <iron-icon id=\"icon\" src=\"[[src]]\" icon=\"[[icon]]\"\n               alt$=\"[[alt]]\"></iron-icon>\n  "]))),
      hostAttributes: {
        role: 'button',
        tabindex: '0'
      },
      behaviors: [_paperInkyFocusBehavior.PaperInkyFocusBehavior],
      registered: function registered() {
        this._template.setAttribute('strip-whitespace', '');
      },
      properties: {
        /**
         * The URL of an image for the icon. If the src property is specified,
         * the icon property should not be.
         */
        src: {
          type: String
        },
  
        /**
         * Specifies the icon name or index in the set of icons available in
         * the icon's icon set. If the icon property is specified,
         * the src property should not be.
         */
        icon: {
          type: String
        },
  
        /**
         * Specifies the alternate text for the button, for accessibility.
         */
        alt: {
          type: String,
          observer: '_altChanged'
        }
      },
      _altChanged: function _altChanged(newValue, oldValue) {
        var label = this.getAttribute('aria-label'); // Don't stomp over a user-set aria-label.
  
        if (!label || oldValue == label) {
          this.setAttribute('aria-label', newValue);
        }
      }
    });
  });