text: import{html,PolymerElement}from"../../@polymer/polymer/polymer-element.js";import{afterNextRender}from"../../@polymer/polymer/lib/utils/render-status.js";import"../../@polymer/iron-icons/iron-icons.js";import"../../@polymer/iron-icon/iron-icon.js";import"../materializecss-styles/materializecss-styles.js";class LrnButton extends PolymerElement{static get template(){return html`
        <style>
          :host {
            display: block;
            @apply --paper-font-common-base;
            @apply --paper-button;
            --lrnsys-button-height: 48px;
          }
  
          :host(.center) {
            text-align: center;
          }
  
          a {
            text-decoration: none;
            display: block;
            color: #000000;
          }
  
          paper-button {
            transition: 0.3s;
            margin: 0;
            max-width: 50%;
            height: inherit;
            -webkit-justify-content: flex-start;
            justify-content: flex-start;
            align-items: center;
            border-radius: unset;
          }
  
          paper-button iron-icon {
            height: var(--lrnsys-button-height);
            margin: 0 12px;
          }
  
          paper-button div.inner {
            height: var(--lrnsys-button-height);
            line-height: var(--lrnsys-button-height);
            padding: 0 12px;
          }
  
          paper-button span.label {
            height: var(--lrnsys-button-height);
            line-height: var(--lrnsys-button-height);
          }
  
          .no-margin {
            margin: 0 !important;
          }
  
          .no-right-padding {
            padding-right: 0 !important;
          }
  
          .no-left-padding {
            padding-left: 0 !important;
          }
  
          .center {
            text-align: center;
            margin: 0 auto;
          }
        </style>
        <style include="materializecss-styles-colors"></style>
        <a
          tabindex="-1"
          id="lrnsys-button-link"
          href$="[[showHref]]"
          data-prefetch-hover$="[[prefetch]]"
          target$="[[target]]"
        >
          <paper-button
            id="button"
            raised="[[raised]]"
            class$="[[class]] [[color]] [[textColor]]"
            disabled$="[[disabled]]"
          >
            <div class$="inner [[innerClass]]">
              <iron-icon
                icon$="[[icon]]"
                id="icon"
                class$="[[iconClass]]"
                hidden$="[[!icon]]"
              ></iron-icon>
              <span class="label" hidden$="[[!label]]">
                [[label]]
              </span>
              <slot></slot>
            </div>
          </paper-button>
        </a>
        <paper-tooltip for="lrnsys-button-link" animation-delay="0"
          >[[alt]]</paper-tooltip
        >
      `}static get properties(){let props={href:{type:String,value:"#"},showHref:{type:String,value:!1},raised:{type:Boolean},label:{type:String,value:""},target:{type:String,value:""},icon:{type:String,value:!1},hoverClass:{type:String},iconClass:{type:String},innerClass:{type:String},color:{type:String},textColor:{type:String},prefetch:{type:String},alt:{type:String},disabled:{type:Boolean,value:!1},focusState:{type:Boolean,value:!1}};return super.properties&&(props=Object.assign(props,super.properties)),props}static get tag(){return"lrn-button"}constructor(){super(),import("../../@polymer/paper-button/paper-button.js"),import("../../@polymer/paper-tooltip/paper-tooltip.js")}connectedCallback(){super.connectedCallback(),afterNextRender(this,function(){this.addEventListener("mousedown",this.tapEventOn),this.addEventListener("mouseover",this.tapEventOn),this.addEventListener("mouseout",this.tapEventOff),this.$.button.addEventListener("focused-changed",this.focusToggle)})}disconnectedCallback(){this.removeEventListener("mousedown",this.tapEventOn),this.removeEventListener("mouseover",this.tapEventOn),this.removeEventListener("mouseout",this.tapEventOff),this.$.button.removeEventListener("focused-changed",this.focusToggle),super.disconnectedCallback()}ready(){super.ready(),this.disabled||(this.showHref=this.href)}tapEventOn(e){let root=this;void 0===root.hoverClass||root.disabled||root.hoverClass.split(" ").forEach(function(item,index){""!=item&&(root.$.button.classList.add(item),-1!=item.indexOf("-")&&root.$.icon.classList.add(item))})}tapEventOff(e){let root=this;void 0===root.hoverClass||root.disabled||root.hoverClass.split(" ").forEach(function(item,index){""!=item&&(root.$.button.classList.remove(item),-1!=item.indexOf("-")&&root.$.icon.classList.remove(item))})}focusToggle(e){let root=this;(this.dispatchEvent(new CustomEvent("focus-changed",{bubbles:!0,composed:!0,detail:{focus:root.focusState}})),void 0===root.hoverClass||root.disabled)||root.hoverClass.split(" ").forEach(function(item,index){""!=item&&(root.focusState?(root.$.button.classList.add(item),-1!=item.indexOf("-")&&root.$.icon.classList.add(item)):(root.$.button.classList.remove(item),-1!=item.indexOf("-")&&root.$.icon.classList.remove(item)))});root.focusState=!root.focusState}}window.customElements.define(LrnButton.tag,LrnButton);export{LrnButton};