import{html,PolymerElement}from"../../@polymer/polymer/polymer-element.js";import{dom}from"../../@polymer/polymer/lib/legacy/polymer.dom.js";import*as async from"../../@polymer/polymer/lib/utils/async.js";import"../simple-colors/simple-colors.js";import"../../@polymer/app-layout/app-drawer/app-drawer.js";import"../../@polymer/neon-animation/neon-animation.js";import"../../@polymer/paper-button/paper-button.js";import"../../@polymer/iron-icons/iron-icons.js";import"../../@polymer/iron-icon/iron-icon.js";window.SimpleDrawer=window.SimpleDrawer||{},window.SimpleDrawer.requestAvailability=()=>(window.SimpleDrawer.instance||(window.SimpleDrawer.instance=document.createElement("simple-drawer"),document.body.appendChild(window.SimpleDrawer.instance)),window.SimpleDrawer.instance);class SimpleDrawer extends PolymerElement{static get template(){return html`
      <style>
        :host {
          display: block;
          z-index: 1000;
        }
        :host([hidden]) {
          display: none;
        }

        app-drawer {
          --app-drawer-width: var(--simple-drawer-width, 256px);
          --app-drawer-content-container: {
            padding: 0;
            overflow-y: scroll;
            position: fixed;
            color: var(--simple-drawer-color, #222222);
            background-color: var(--simple-drawer-background-color, #ffffff);
          }
        }
        :host ::slotted(*) {
          font-size: 14px;
          @apply --simple-drawer-content;
        }

        .content {
          text-align: left;
          padding: 8px 24px;
          @apply --simple-drawer-content-container;
        }

        .top ::slotted(*) {
          font-size: 24px;
          margin: 0;
          padding: 0 15px;
          height: 40px;
          line-height: 48px;
        }

        #close {
          position: absolute;
          right: 8px;
          top: 8px;
          padding: 4px;
          margin: 0;
          text-transform: none;
          float: right;
          font-size: 12px;
          color: var(--simple-drawer-header-color, #ffffff);
          background-color: transparent;
          min-width: unset;
        }

        #close iron-icon {
          display: inline-block;
          width: 16px;
          height: 16px;
          margin-right: 2px;
        }

        .top {
          font-size: 24px;
          margin: 0 0 8px 0;
          padding: 0 16px;
          height: 64px;
          line-height: 64px;
          display: flex;
          text-align: left;
          justify-content: space-between;
          background-color: var(--simple-drawer-header-background, #20427b);
          color: var(--simple-drawer-header-color, #ffffff);
          @apply --simple-drawer-header;
        }

        .top h2 {
          flex: auto;
          color: var(--simple-drawer-header-color, #ffffff);
          font-size: 24px;
          padding: 0;
          line-height: 32px;
          margin: 8px;
          @apply --simple-drawer-heading;
        }
      </style>
      <style include="simple-colors-shared-styles"></style>
      <app-drawer
        tabindex="0"
        id="drawer"
        opened="{{opened}}"
        align="[[align]]"
        role="dialog"
      >
        <div class="wrapper">
          <div class="top">
            <h2 hidden$="[[!title]]">[[title]]</h2>
            <slot name="header"></slot>
          </div>
          <div class="content">
            <slot name="content"></slot>
          </div>
          <paper-button id="close" on-click="close">
            <iron-icon icon="[[closeIcon]]"></iron-icon> [[closeLabel]]
          </paper-button>
        </div>
      </app-drawer>
    `}static get properties(){let props={title:{name:"title",type:String,value:""},align:{name:"align",type:String,value:"left"},opened:{name:"opened",type:Boolean,value:!1,reflectToAttribute:!0,observer:"_openedChanged"},closeLabel:{name:"closeLabel",type:String,value:"Close"},closeIcon:{name:"closeIcon",type:String,value:"cancel"},invokedBy:{name:"invokedBy",type:Object}};return super.properties&&(props=Object.assign(props,super.properties)),props}static get tag(){return"simple-drawer"}connectedCallback(){super.connectedCallback(),window.addEventListener("simple-drawer-hide",this.close.bind(this)),window.addEventListener("simple-drawer-show",this.showEvent.bind(this))}_resizeContent(e){async.microTask.run(()=>{window.dispatchEvent(new Event("resize"))})}showEvent(e){if(this.opened){for(;null!==dom(this).firstChild;)dom(this).removeChild(dom(this).firstChild);setTimeout(()=>{this.show(e.detail.title,e.detail.elements,e.detail.invokedBy,e.detail.align,e.detail.clone)},100)}else this.show(e.detail.title,e.detail.elements,e.detail.invokedBy,e.detail.align,e.detail.size,e.detail.clone)}show(title,elements,invokedBy,align="left",size="256px",clone=!1){let element;this.set("invokedBy",invokedBy),this.title=title,this.align=align,this.updateStyles({"--simple-drawer-width":size});let slots=["header","content"];for(var i in slots)elements[slots[i]]&&((element=clone?elements[slots[i]].cloneNode(!0):elements[slots[i]]).setAttribute("slot",slots[i]),dom(this).appendChild(element));setTimeout(()=>{this.opened=!0,this._resizeContent()},100)}animationEnded(e){for(this.title="";null!==dom(this).firstChild;)dom(this).removeChild(dom(this).firstChild);this.invokedBy&&async.microTask.run(()=>{setTimeout(()=>{this.invokedBy.focus()},500)})}close(){this.$.drawer.close()}_openedChanged(newValue,oldValue){if(void 0===newValue||newValue){if(newValue){const evt=new CustomEvent("simple-drawer-opened",{bubbles:!0,cancelable:!0,detail:{opened:!0,invokedBy:this.invokedBy}});this.dispatchEvent(evt)}}else{this.animationEnded();const evt=new CustomEvent("simple-drawer-closed",{bubbles:!0,cancelable:!0,detail:{opened:!1,invokedBy:this.invokedBy}});this.dispatchEvent(evt)}}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("simple-drawer-hide",this.close.bind(this)),window.removeEventListener("simple-drawer-show",this.showEvent.bind(this))}}window.customElements.define(SimpleDrawer.tag,SimpleDrawer);export{SimpleDrawer};