text: /**
   * Copyright 2018 The Pennsylvania State University
   * @license Apache-2.0, see License.md for full text.
   */
  import{LitElement as t,html as o,css as e}from"../../lit-element/lit-element.js";import"../simple-tooltip/simple-tooltip.js";import"../simple-icon/lib/simple-icon-lite.js";import"../simple-icon/lib/simple-icons.js";import{SimpleColors as r}from"../simple-colors/simple-colors.js";class LrnButton extends r{static get styles(){return[...super.styles,e`
          :host {
            display: block;
            --lrnsys-button-height: 48px;
          }
  
          :host(.center) {
            text-align: center;
          }
  
          a {
            text-decoration: none;
            display: block;
            color: #000000;
          }
  
          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: var(--lrn-button-border-radius, unset);
            background-color: var(
              --lrn-button-background-color,
              var(--simple-colors-default-theme-accent-2, white)
            );
            border: var(--lrn-button-border-width, 0px) solid
              var(
                --lrn-button-border-color,
                var(--simple-colors-default-theme-accent-2, #ddd)
              );
            color: var(
              --lrn-button-color,
              var(--simple-colors-default-theme-grey-12, black)
            );
          }
  
          :host([accent-color="grey"]) button,
          :host([text-color]) button,
          :host([dark][accent-color="grey"]) button,
          :host([dark][text-color]) button {
            background-color: var(
              --lrn-button-background-color,
              var(--simple-colors-default-theme-grey-1, white)
            );
            border-color: var(
              --lrn-button-border-color,
              var(--simple-colors-default-theme-grey-3, #ddd)
            );
            color: var(
              --lrn-button-color,
              var(--simple-colors-default-theme-grey-12, black)
            );
          }
  
          :host([text-color]) button,
          :host([text-color][dark]) button {
            color: var(
              --lrn-button-color,
              var(--simple-colors-default-theme-accent-9, black)
            );
          }
  
          button:focus,
          button:hover {
            background-color: var(
              --lrn-button-focus-background-color,
              var(
                --lrn-button-background-color,
                var(--simple-colors-default-theme-accent-3, white)
              )
            );
            border-color: var(
              --lrn-button-focus-border-color,
              var(
                --lrn-button-border-color,
                var(--simple-colors-default-theme-accent-3, #ddd)
              )
            );
          }
  
          :host([accent-color="grey"]) button:focus,
          :host([text-color]) button:focus,
          :host([dark][accent-color="grey"]) button:focus,
          :host([dark][text-color]) button:focus,
          :host([accent-color="grey"]) button:hover,
          :host([text-color]) button:hover,
          :host([dark][accent-color="grey"]) button:hover,
          :host([dark][text-color]) button:hover {
            background-color: var(
              --lrn-button-focus-background-color,
              var(
                --lrn-button-background-color,
                var(--simple-colors-default-theme-grey-2, white)
              )
            );
            border-color: var(
              --lrn-button-focus-border-color,
              var(
                --lrn-button-border-color,
                var(--simple-colors-default-theme-grey-3, #ddd)
              )
            );
          }
  
          button simple-icon-lite {
            --simple-icon-height: var(--lrnsys-button-height);
            margin: 0 12px;
          }
  
          button div.inner {
            height: var(--lrnsys-button-height);
            line-height: var(--lrnsys-button-height);
            padding: 0 12px;
          }
  
          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;
          }
        `]}render(){return o` <a
          tabindex="-1"
          id="lrnsys-button-link"
          href="${this.showHref}"
          data-prefetch-hover="${this.prefetch}"
          target="${this.target}"
        >
          <button
            id="button"
            raised="${this.raised}"
            class="${this.class}"
            ?disabled="${this.disabled}"
          >
            <div class="inner ${this.innerClass}">
              ${this.icon?o`
                    <simple-icon-lite
                      icon="${this.icon}"
                      id="icon"
                    ></simple-icon-lite>
                  `:""}
              ${this.label?o` <span class="label"> ${this.label} </span>`:""}
              <slot></slot>
            </div>
          </button>
        </a>
        <simple-tooltip for="lrnsys-button-link" animation-delay="0"
          >${this.alt}</simple-tooltip
        >`}static get properties(){return{...super.properties,href:{type:String},showHref:{type:String,attribute:"show-href"},raised:{type:Boolean},label:{type:String},target:{type:String},icon:{type:String},hoverClass:{type:String,attribute:"hover-class"},iconClass:{type:String,attribute:"icon-class"},innerClass:{type:String,attribute:"inner-class"},dark:{type:Boolean,reflect:!0},accentColor:{type:String,attribute:"accent-color",reflect:!0},color:{type:String},textColor:{type:Boolean,attribute:"text-color",reflect:!0},prefetch:{type:String},alt:{type:String},disabled:{type:Boolean},focusState:{type:Boolean,attribute:"focus-state"}}}static get tag(){return"lrn-button"}constructor(){super(),this.href="#",this.label="",this.target="",this.disabled=!1,this.focusState=!1,this.dark=!1,this.color="grey",setTimeout(()=>{this.addEventListener("mousedown",this.tapEventOn),this.addEventListener("mouseover",this.tapEventOn),this.addEventListener("mouseout",this.tapEventOff),this.addEventListener("focusin",this.tapEventOn),this.addEventListener("focusout",this.tapEventOff)},0)}updated(t){super.updated&&super.updated(t),t.forEach((t,o)=>{"color"===o&&(this.accentColor=this.color),console.log(o,this.color,this.accentColor)})}firstUpdated(){this.shadowRoot.querySelector("#button").addEventListener("focused-changed",this.focusToggle),this.disabled||(this.showHref=this.href)}tapEventOn(t){void 0===this.hoverClass||this.disabled||this.hoverClass.split(" ").forEach((t,o)=>{""!=t&&(this.shadowRoot.querySelector("#button").classList.add(t),-1!=t.indexOf("-")&&this.shadowRoot.querySelector("#icon").classList.add(t))})}tapEventOff(t){void 0===this.hoverClass||this.disabled||this.hoverClass.split(" ").forEach((t,o)=>{""!=t&&(this.shadowRoot.querySelector("#button").classList.remove(t),-1!=t.indexOf("-")&&this.shadowRoot.querySelector("#icon").classList.remove(t))})}focusToggle(t){(this.dispatchEvent(new CustomEvent("focus-changed",{bubbles:!0,composed:!0,detail:{focus:this.focusState}})),void 0===this.hoverClass||this.disabled)||this.hoverClass.split(" ").forEach((t,o)=>{""!=t&&(this.focusState?(this.shadowRoot.querySelector("#button").classList.add(t),-1!=t.indexOf("-")&&this.shadowRoot.querySelector("#icon").classList.add(t)):(this.shadowRoot.querySelector("#button").classList.remove(t),-1!=t.indexOf("-")&&this.shadowRoot.querySelector("#icon").classList.remove(t)))});this.focusState=!this.focusState}}window.customElements.define(LrnButton.tag,LrnButton);export{LrnButton};