define(["exports","../../../@polymer/polymer/polymer-element.js","../../simple-modal/lib/simple-modal-template.js","../../../@polymer/paper-button/paper-button.js","../../img-pan-zoom/img-pan-zoom.js","../../simple-tooltip/simple-tooltip.js"],(function(e,o,t,l,i,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.LrndesignGalleryZoom=void 0;
/**
   * Copyright 2018 The Pennsylvania State University
   * @license Apache-2.0, see License.md for full text.
   */
class LrndesignGalleryZoom extends o.PolymerElement{static get tag(){return"lrndesign-gallery-zoom"}static get behaviors(){return[LrndesignGalleryBehaviors]}static get template(){return o.html`
      <style>
        :host {
          display: block;
        }
        :host([hidden]) {
          display: none;
        }
        :host paper-button {
          width: 100%;
        }
        simple-modal-template[modal-id="zoomdialog"] {
          --simple-modal-width: 75vw;
          --simple-modal-height: 75vh;
          --simple-modal-titlebar-color: var(
            --lrndesign-gallery-dialog-titlebar-color
          );
          --simple-modal-titlebar-background: var(
            --lrndesign-gallery-dialog-titlebar-background-color
          );
          --simple-modal-header-color: var(
            --lrndesign-gallery-dialog-header-color
          );
          --simple-modal-header-background: var(
            --lrndesign-gallery-dialog-header-background-color
          );
          --simple-modal-content-container-color: var(
            --lrndesign-gallery-dialog-color
          );
          --simple-modal-content-container-background: var(
            --lrndesign-gallery-dialog-background-color
          );
        }
        #zoombtn {
          padding: 0px;
          margin: 0;
          min-width: unset;
        }
      </style>
      <paper-button
        id="zoombtn"
        label$="[[tooltip]]"
        title=""
        controls="zoomdialog"
      >
        <slot></slot>
      </paper-button>
      <simple-tooltip for="zoombtn" position="right"
        >[[tooltip]]</simple-tooltip
      >
      <simple-modal-template
        id="zoomtpl"
        modal-id="zoomdialog"
        title$="[[heading]]"
      >
        <div
          id="details"
          slot="header"
          hidden$="[[!_isAttrSet(details)]]"
        ></div>
        <div slot="content" hidden$="[[!_isAttrSet(src)]]">
          <img-pan-zoom
            id="img"
            alt$="[[zoomAlt]]"
            src$="[[src]]"
            max-zoom-pixel-ratio="1.5"
            min-zoom-image-ratio="0.5"
            zoom-per-click="1.2"
            zoom-per-scroll="0.6"
          >
          </img-pan-zoom>
          <div>
            Swipe, use a mouse or use the +/- and arrow keys to zoom and pan the
            image above.
          </div>
        </div>
      </simple-modal-template>
    `}static get properties(){return{details:{type:String,value:null,observer:"_detailsChanged"},heading:{type:String,value:"Image Zoom"},itemId:{type:String,value:null},modal:{type:Object,value:null},scrolled:{type:Boolean,value:!1},src:{type:String,reflectToAttribute:!0},tooltip:{type:String,value:"Zoom In"},zoomAlt:{type:String,value:null},zoomed:{type:Boolean,value:!1}}}ready(){super.ready(),this._detailsChanged(),this.shadowRoot.querySelector("#zoomtpl").associateEvents(this.shadowRoot.querySelector("#zoombtn")),this.scrolled&&(this.dispatchEvent(new CustomEvent("gallery-scroll")),this.zoomed||this.shadowRoot.querySelector("#zoombtn").focus()),this.zoomed&&this.zoom()}zoom(){this.shadowRoot.querySelector("#zoombtn").dispatchEvent(new CustomEvent("gallery-zoom",{detail:{root:this}}))}_detailsChanged(e){this.shadowRoot.querySelector("#details").innerHTML=this.details}_isAttrSet(e=null){return null!=e}}e.LrndesignGalleryZoom=LrndesignGalleryZoom,window.customElements.define(LrndesignGalleryZoom.tag,LrndesignGalleryZoom)}));